jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.41k stars 713 forks source link

custom node ids also custom input output ids #873

Open scottix opened 3 weeks ago

scottix commented 3 weeks ago

Thank you for the work you have done. I found this library easy to setup and get going in Vue.

One thing that is kind of burden is not being able to set custom ids for nodes along with the ids of inputs and outputs. I understand they are sequential, but this is kind of an anti-pattern for tracking nodes along with inputs and outputs called temporal information leakage.

  1. When I build out the editor I have to create a mapping of my nodes. This is extra unnecessary work on my end.

    const idMapping = {};
    workflowData.nodes.forEach(node => {
    ...
    const newNodeId = editor.addNode(name, inputs.length, outputs.length, position.x, position.y, name, {}, nodeContent);
    idMapping[node.id] = newNodeId;
    }
  2. Number of inputs and outputs. I understand you tried to make it easier to add nodes, but overall managing inputs and outputs is kind of a nightmare. Since they are sequential, unexpected errors could crop up if something fails or bugs in modification of the structure. Also it forces me to confine myself to a specific structure or I need to make sure I map it correctly. This is prone to error if something ever changes like the number of inputs and outputs of a node. Example structure:

    "connections": [
        {
            "from": { "node": "node1", "output": "output_1" }, // Has to be in this format and cause of potential errors
            "to": { "node": "node2", "input": "input_1" }
        },
        {
            "from": { "node": "node2", "output": "output_2" },
            "to": { "node": "node3", "input": "input_1" }
        }
    ]

Allowing custom ids for nodes and their inputs/outputs would prevent temporal information leakage and make managing and tracking them easier.

Thank you!

jerosoler commented 3 weeks ago

Hi @scottix

I know the problem. What a small library it is. You can try modifying it if you want.

You also have this option to activate.

editor.useuuid = true;

Add before start and add new node.


I am currently working on a library with more functions and with these problems solved, but I don't know if it will be open source, or when it will be ready.

Jero

Neophyte69 commented 3 weeks ago

I have in fact been able to use my own custom node IDs etc, and was able to successfully identify which link or node was clicked or right-clicked and deleted. I will share a snippet shortly. For me it was critical to have the IDs as these click events are out of scope with the rest of my code, meaning I lose access to certain variable and objects I already had. So, when calling the necessary methods in my code, I pass the IDs from the drawflow click event to my code.

Neophyte69 commented 3 weeks ago

Apologies for the delay in my further reply.

This is what I did with mine: image