Is it possible to Add a multiple option on context menu event in node?

Anuj-Kushwah-ak commented 3 years ago

@jerosoler, I want to add multiple options in node on context menu event along with node delete option, something like in the image. Screenshot from 2021-06-16 20-25-33

jerosoler commented 3 years ago

Hello @Anuj-Kushwah-ak

Use a event contextmenu for detect second button https://github.com/jerosoler/Drawflow#events

and create your conextmenu.

Jero

Anuj-Kushwah-ak commented 3 years ago

@jerosoler, I am facing a problem with the HTML part of the option where I wish to use angular material's to create the menu.

jerosoler commented 3 years ago

Hello @Anuj-Kushwah-ak

View a simple html with contextmenu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    <style>
      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }
      #contextmenu {
        display: flex;
            align-items: center;
          position:absolute;
          background: white;
          border: 2px solid black;
          padding: 10px;
          z-index: 10;

      }
      </style>
  </head>
  <body>
    <div id="drawflow">

    </div>
    <script>
          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();

          const data = { 
           level1: {
            name: 'TEST 1',
            level2: {
              name: 'test 2',
              level3: {
                name: "TESTTTTT 3"
              }
            }
           }
          }
          const htmltest = `
          <input type="text" df-level1-name>
          <input type="text" df-level1-level2-name>
          <input type="text" df-level1-level2-level3-name>
          `;
          editor.addNode('test2', 1,1, 100, 200, 'test2', data, htmltest );

          editor.addNode('instagram', 1, 1, 150, 300, 'rrss', {}, `Instagram`);
          editor.addNode('facebook', 1, 1, 150, 300, 'rrss', {}, `Facebook`);
          editor.addNode('facebook', 1, 1, 150, 300, 'rrss', {}, `Facebook`);

          editor.on('contextmenu', function(event) {

            if(event.target.closest(".drawflow_content_node") != null || event.target.classList[0] === 'drawflow-node') {
                showConextMenu(event.clientX, event.clientY)
            }

        });

        function showConextMenu(x,y) {
            //var pos_x = editor.pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
            //var pos_y = editor.pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
            var pos_x = x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x *  ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) ) ;
            var pos_y = y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y *  ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) ) ;

            console.log(pos_x);
            var contextmenu = document.createElement('div');
            contextmenu.id = "contextmenu";
            contextmenu.innerHTML = "<ul><li>Option 1</li><li>Option 2</li></ul>";
            contextmenu.style.display = "block";

            contextmenu.style.left = pos_x + "px";
            contextmenu.style.top = pos_y + "px";

            editor.precanvas.appendChild(contextmenu);
        }

        function unShowConextMenu() {
            var contextmenu = document.getElementById('contextmenu')
            if(contextmenu != null) {
                contextmenu.remove();
            }

        }

        editor.on('click', function(event) {

            if(event.target.closest("#contextmenu") === null) {
                unShowConextMenu();
            }
        });

    </script>

  </body>
</html>

jerosoler / Drawflow

Is it possible to Add a multiple option on context menu event in node? #187