Deleting node with multiple input connections

fajardokarl commented 2 years ago

Hi, @jerosoler.

We really like using this library, but we saw a bug on connections when deleting node, when an input has multiple connection, it deletes the wrong value on the connections array. Like here:

We have this initially, the connections are all correct.

Then deleted the node-4, but the connection from node-5 was deleted.

Btw, Thanks for this, we really like using this library,

jerosoler commented 2 years ago

Hi!

Do you have the latest version of the library?

I have recreated your example and it does it for me correctly.

Have you modified any part of the library?

And removing node-4.

Here is the code I've tested with.

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

      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
        <button onClick="exportInfo()">Export Info of node 6</button>
    </div>
    <script>

    var id = document.getElementById("drawflow");

    const editor = new Drawflow(id);
    editor.start();

    editor.addNode('test1', 1, 1, 0, 0, 'test1', {}, 'Node: 1');
    editor.addNode('test2', 1, 1, 0, 100, 'test2', {}, 'Node: 2');
    editor.addNode('test3', 1, 2, 50, 200, 'test2', {}, 'Node: 3');
    editor.addNode('test4', 1, 1, 500, 200, 'test4', {}, 'Node: 4');
    editor.addNode('test5', 1, 1, 300, 400, 'test5', {}, 'Node: 5');
    editor.addNode('test6', 1, 0, 550, 600, 'test6', {}, 'Node: 6');

                       //id_output, id_input, output_class, input_class)
    editor.addConnection(2,3,'output_1', 'input_1');

    editor.addConnection(3,4,'output_1', 'input_1');
    editor.addConnection(3,5,'output_2', 'input_1');

    editor.addConnection(4,6,'output_1', 'input_1');
    editor.addConnection(5,6,'output_1', 'input_1');

    const exportInfo = () => {
        const data = editor.getNodeFromId(6);
        console.log(data);
    }
    editor.on("nodeRemoved", (id) => {
        console.log('Remove node', id);
        console.log(editor.export());
    })

</script> 
  </body>
</html>

fajardokarl commented 2 years ago

Thanks for the fast response.

I have no modification on the library but im remapping the export object data object (editor.export().drawflow.Home.data) for formatting and reordering of the nodes. Together with that is updating the output and output objects to match the new node_id (which the value was taken from the index + 1).

This maybe is the problem, because it only occurs when on edit mode(uses the import method). I can't show the code for reordering because it was too specific. but this is how I re order the output and output objects.

set-new-connections.txt

jerosoler commented 2 years ago

The problem is not with the library then. It's from your remap. Check your code.

jerosoler / Drawflow

Deleting node with multiple input connections #535