After fullscreen mode, dragging elements now allow outside drawflow bounds

shidcordero commented 3 years ago

Added a fullscreen mode on its parent div container which will look like this.

but after exiting the fullscreen mode, I can now drag the element outside the bounds of drawflow

Also in the fullscreen mode, I can already drag the element outside the bounds of drawflow

jerosoler commented 3 years ago

Hi @shidcordero

How implement fullscreen?

Simple demo fullscreen and no problem:

<!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;
      }

      </style>
  </head>
  <body>
    <button id="fullscreen" onclick="fullscreen()">Fullscreen</button>
    <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`);

          function fullscreen() {
            if (id.requestFullscreen) {
            id.requestFullscreen();
            }
          }

    </script>

  </body>
</html>

jerosoler commented 3 years ago

Test with parent div and no problem.

<!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;
      }

      </style>
  </head>
  <body>
    <div id="test">
        <button id="fullscreen" onclick="fullscreen()">Fullscreen</button>
        <div id="drawflow">
    </div>  

    </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`);

          function fullscreen() {
            const div = document.getElementById("test");
            if (div.requestFullscreen) {
            div.requestFullscreen();
            }
          }

    </script>

  </body>
</html>

shidcordero commented 3 years ago

im not sure now how did it happen to me, does display and position styles can be the cause here? or setting the height or width?

jerosoler commented 3 years ago

It could be the cause if you have done something like this:

     position: absolute;
     width: 100vw;
     height: 100vh;

shidcordero commented 3 years ago

so I've tried your code in my app, and it works great. can you try it in a vue app? My doubt was it only occurs on a Vue app

shidcordero commented 3 years ago

finally fixed it. I found the solution in your Theme Generator, and the fix was just to add a class parent-drawflow in the #drawflow id.

jerosoler / Drawflow

After fullscreen mode, dragging elements now allow outside drawflow bounds #198