Change Import - Githubissues

labiio commented 5 months ago

          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>

Originally posted by @jerosoler in https://github.com/jerosoler/Drawflow/issues/363#issuecomment-1050699201

labiio commented 5 months ago

Hi I was able to do this in my app but then after i save the import changes the outputs:

After save and import:

Can somebody help?

jerosoler commented 5 months ago

View comment:

https://github.com/jerosoler/Drawflow/issues/608#issuecomment-1348184804

Event "import"

Jero

jerosoler / Drawflow

Change Import #810