`.drawflow-node` with style: `width: auto` doesn't like leaving `.drawflow`

bennetgallein commented 5 months ago

As the title says, having the .drawflow-node class with width: auto instead of a fixed width, dragging it outside of the .drawflow class compresses the width.

chrome-capture-2024-1-31-min

any help is appreciated :pray:

jerosoler commented 5 months ago

Hi

I can't reproduce your problem.

View this code:

<!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: 100%;
      height: 800px;
      border: 1px solid red;
    }

    .drawflow .drawflow-node {
      width: auto;
    }
  </style>
</head>
<body>
  <div>
    <div id="drawflow"></div>
  </div>
  <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();  
    editor.addNode("item", 1, 1, 100, 550, "item", {}, 'Hi!');
    editor.addNode("item", 1, 1, 300, 550, "item", {}, 'Large element');
    editor.addNode("item", 1, 1, 500, 550, "item", {}, 'Extra Large element!!! asda asdsad sadsa dsadsasad sadsadsadsad  sadas');
  </script>
</body>
</html>

bennetgallein commented 5 months ago

Hey,

I've copied your snippet and ran it locally.

chrome-capture-2024-2-1

Browser is Chrome 120 but also reproducable in Firefox 115.

Since you've only posted a picture I want to clarify that this is happening when you drag the box to the side of the canvas.

Edit: I'm using the jsdelivr script without any version and Vue, setting reroute and fix_curvature but that's it

bennetgallein commented 5 months ago

I thinkt the reason might be the left and right properties that are set when the node is dragged. When the width is fixed, the right property goes into the negative numbers while it stays at 0 when the width is dynamic.

IMO this should also be respected in case we want to control the width of the node from within the contents (if that makes sense)

jerosoler commented 5 months ago

Try new snippet.

Only added new css:

 #drawflow {
      position: relative;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }
    .drawflow, .drawflow .parent-node {
      position:absolute;
    }

    .drawflow .drawflow-node {
      width: auto;
      position: relative;
    }

Complet example:

<!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: 100%;
      height: 800px;
      border: 1px solid red;
    }
    .drawflow, .drawflow .parent-node {
      position:absolute;
    }

    .drawflow .drawflow-node {
      width: auto;
      position: relative;
    }
  </style>
</head>
<body>
  <div>
    <div id="drawflow"></div>
  </div>
  <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();  
    editor.addNode("item", 1, 1, 100, 550, "item", {}, 'Hi!');
    editor.addNode("item", 1, 1, 300, 550, "item", {}, 'Large element');
    editor.addNode("item", 1, 1, 500, 550, "item", {}, 'Extra Large element!!! asda asdsad sadsa dsadsasad sadsadsadsad  sadas');
  </script>
</body>
</html>

bennetgallein commented 5 months ago

Hell yeah, that works as expected :+1: Thanks a ton!

jerosoler / Drawflow

`.drawflow-node` with style: `width: auto` doesn't like leaving `.drawflow` #818