Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to connect nodes that are not on the same level in the DOM?

See original GitHub issue

First thank you for this very nice project! Let me explain my need on an example. Suppose the DOM tree is

          body
                div 
                          div of id A
                div of id B

I want to connect A and B. Is it possible?

I tried to connect it but I get the error

Uncaught (in promise) TypeError: this.drawflow.drawflow[t] is undefined
    getNodeFromId https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js:1
    addConnection https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js:1

Issue Analytics

State:
Created 2 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

3reactions

jerosolercommented, Feb 25, 2022

Yes it’s possible.

In this case I use an output displacement technique. I use the class link followed by the output to which it is directed to move the element.

    editor.on('nodeCreated', (id) => {
        const links =  document.querySelectorAll(`#node-${id} .drawflow_content_node .link`);
        links.forEach((item) => {
            const target = document.querySelector(`#node-${id} .outputs .${item.classList[1]}`);
            if(target != null) {
                const pos = item.getBoundingClientRect();
                const targetPos = target.getBoundingClientRect();
                target.style.top = `${pos.y - targetPos.y}px`;
                target.style.left = `${pos.x - targetPos.x}px`;
            }
        })
    })

    editor.start();

    
    editor.addNode('question', 1, 3, 300, 200, 'question', {}, `
        <div class="title">Ask question</div>
        <div class="panel">Nice to meet yout (name)...</div>
        <div class="panel">Custom API</div>
        <div class="multiple">
            <div class="panel">Yes<div class="link output_1"></div></div>
            <div class="panel">No<div class="link output_2"></div></div>
            <div class="panel">No Match<div class="link output_3"></div></div>
        </div>
    ` );

In this case it is only done for the outputs and new nodes, the same would have to be done with the import event.

I put the complete code of the example.


<!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>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
      font-size: 14px;
    }
    .multiple {
        border-radius: 4px;
    }
    .multiple .panel {
        margin: 0px;
        border-radius: 0px;
    }
    .panel {
        display: block;
        position: relative;
        background: white;
        padding: 10px;
        margin: 10px 0px;
        border-radius: 4px;
        border: 1px solid #eaeef3;
    }

    .link {
        position: absolute;
        right: 5px;
        top: 15px;
        
        display: block;
        width: 10px;
        height: 10px; 
    }

    .drawflow .drawflow-node .output, .drawflow .drawflow-node .input  {
        width: 8px;
        height: 8px;
        border: 2px solid #75889a;
    }

    .drawflow .inputs {
        position: absolute;
        top: 10px;
        opacity: 1;
    }
    .drawflow .connection .main-path {
        stroke-width: 2px;
    }

    .drawflow .drawflow-node {
        border: 2px solid white;
        width: 260px;
        
    }
    .drawflow .drawflow-node .title {
        font-weight: bold;
    }

    .drawflow-node.question {
        outline: 2px solid #eaeef3;
        background: #eaeef3;
    }
    .drawflow-node.question .title {
        color: #75889a;
    }

    .drawflow-node.yes {
        outline: 2px solid #e9f0e9;
        background: #e9f0e9;
    }
    .drawflow-node.yes .title {
        color: #758375;
    }

    .drawflow-node.newblock .inputs {
        top: 50px;
    }
    .drawflow-node.newblock {
        outline: 2px solid #eaeef3;
        background: #eaeef3;
    }
    .drawflow-node.newblock .title {
        color: #75889a;
    }

    .drawflow-node.no .inputs {
        top: 50px;
    }
    .drawflow-node.no {
        outline: 2px solid #ffdee6;
        background: #ffdee6;
    }
    .drawflow-node.no .title {
        color: #ad516a;
    }
    .drawflow .drawflow-node {
        z-index: initial;
    }
    
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);

    editor.on('nodeCreated', (id) => {
        const links =  document.querySelectorAll(`#node-${id} .drawflow_content_node .link`);
        links.forEach((item) => {
            const target = document.querySelector(`#node-${id} .outputs .${item.classList[1]}`);
            if(target != null) {
                const pos = item.getBoundingClientRect();
                const targetPos = target.getBoundingClientRect();
                target.style.top = `${pos.y - targetPos.y}px`;
                target.style.left = `${pos.x - targetPos.x}px`;
            }
        })
    })

    editor.start();

    
    editor.addNode('question', 1, 3, 300, 200, 'question', {}, `
        <div class="title">Ask question</div>
        <div class="panel">Nice to meet yout (name)...</div>
        <div class="panel">Custom API</div>
        <div class="multiple">
            <div class="panel">Yes<div class="link output_1"></div></div>
            <div class="panel">No<div class="link output_2"></div></div>
            <div class="panel">No Match<div class="link output_3"></div></div>
        </div>
    ` );

    editor.addNode('yes', 1, 0, 850, 200, 'yes', {}, `
        <div class="title">Yes Randomized Facts</div>
        <div class="panel">Did you know.... Vieflow power over 6000 Alexa Skills and Google Actions</div>
    ` );

    editor.addNode('newblock', 1, 0, 850, 370, 'newblock', {}, `
        <div class="title">New Block 5</div>
        <div class="panel">Connect a flow to this step</div>
    ` );

    editor.addNode('no', 1, 1, 850, 500, 'no', {}, `
        <div class="title">No - Goodbye</div>
        <div class="panel">No problem. Bye for now!<div class="link output_1"></div></div>
    ` );

    editor.addConnection(1, 2, 'output_1', 'input_1');

    editor.addConnection(1, 3, 'output_2', 'input_1');
    //editor.addConnection(1, 4, 'output_3', 'input_1');
    
    
    
</script>
</body>
</html>

1reaction

jerosolercommented, Feb 25, 2022

Are they multiple nodes? If there are multiple nodes, have you thought about adding a new editor to a drawflow node? Maybe that could be your solution.

If it’s not multiple nodes and it’s just style, does it mean something like this?

Top Results From Across the Web

Connect nodes at same level using constant extra space

Write a function to connect all the adjacent nodes at the same level in a binary tree. The structure of the given Binary...

can adjacent text nodes in the DOM be merged with Javascript?

It is possible, but you need to specify the parent element. It should be possible to traverse the whole DOM and every node,...

Understanding the DOM Tree and Nodes - Alibaba Cloud

This post is written as a guide to some of the concepts and terms related to the DOM tree and nodes.

JavaScript HTML DOM Navigation - W3Schools

With the HTML DOM, you can navigate the node tree using node relationships. ... Siblings (brothers or sisters) are nodes with the same...

How To Access Elements in the DOM - DigitalOcean

You can do the same in plain JavaScript with the querySelector() and querySelectorAll() methods. document.querySelector(); document.

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

Is it possible to connect nodes that are not on the same level in the DOM?

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

Not able to make it work on Vue3

The Vue3 unMounted event will not be triggered when using removeNodeId and clear