Why is are the nodes not properly connecting by dragging input to output?

cacious7 commented 2 years ago

When I try to connect a node's input to another node's output, the line is not displayed correctly, it is displayed on top of both nodes instead of between them. I have added a screenshot for clarity. I am using Vue2. The grid isn't showing either after copying the CSS from your theme builder.

jerosoler commented 2 years ago

Is it loading the css before starting?

Try to add the css in the head

If you try without the theme generator, only with the minimum css configuration, the line also happens?

Are you using any third party css library?

Have you tried this:

If not fixed, can you provide a demo?

cacious7 commented 2 years ago

Hello @jerosoler , I really appreciate the quick reply. Thankfully, I have figured out the problem. The issue happens when the .drawflow height is set to 100%. Anything else seems to work, e.g px or vh.

Just to highlight one more problem, I was getting a blank page initially, when I started because the .drawflow dimensions were not set by default. The width and height seemed to be 0, so I ended up setting them myself to width: 100%; height: 100%; and the height:100% is what brought the problem, so you might want to consider having some default values.

cacious7 commented 2 years ago

Actually, I have just realized that the values I set, were for the ".parent-drawflow" (main container). The width and height for the child .drawflow were not set by me to 100% each. This must be an existing problem on your side. Please check it. If the height is set to vh, it fixes the problem, however, the grid is still not visible even after setting it in the theme builder. What could be the issue with that?

jerosoler commented 2 years ago

Surely it is some problem loading the css

Try this, you will see that it works correctly:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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>
</head>
<div id="drawflow"></div>
  <style>
    body {
        display: block;
        width: 100%;
        height: 100%;
        position:absolute;
        margin: 0px;
        padding: 0px;
    }
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 100%;
    }

</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();    
    editor.addNode('aaa', 1, 1, 600, 200, 'aaa', {}, `aaa` );
    editor.addNode('bbb', 1, 1, 850, 200, 'bbb', {}, `bbb` );
    editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc`);
    editor.addConnection(1, 2, 'output_1', 'input_1');
    editor.addConnection(2, 3, 'output_1', 'input_1');
</script>
</body>
</html>

cacious7 commented 2 years ago

The grid is still not displaying, I can't figure out why. I have followed your guidelines but it isn't working. I have also tried adding the body CSS you've given me to the .drawflow container parent element but there is no visible change. Please advise.

jerosoler commented 2 years ago

Create a codepen or similar to display your code,

jerosoler commented 2 years ago

View example with vue2:

https://github.com/jerosoler/Drawflow/issues/263#issuecomment-930449781

jerosoler / Drawflow

Why is are the nodes not properly connecting by dragging input to output? #437