Import data - Custom output node id ( not sequential ) error

Andam commented 5 months ago

First of all thank you for this awesome library While using this library I come across an issue and though it might benefit the community in case someone else ran into same issue. I have not made a pull request to fix it because I dont know how this solution fits into the project. That being said this is also related to the issue mentioned here

Scenario

When you import data and your output node connection id are not sequential such your output id are 2 and 4 (not sequential like 1 and 2), it will produce an error like below TypeError: Cannot read properties of undefined (reading 'offsetWidth')

Solution

I overcome this issue for myself by modifying the code in drawflow.min.js . I commented below code in addNodeImport function

for (var l = 0; l < Object.keys(e.outputs).length; l++) {
    const e = document.createElement("div");
    e.classList.add("output"), e.classList.add("output_" + (l + 1)), o.appendChild(e)
}

and replaced it with this code

var ll = Object.keys(e.outputs);
for (var l = 0; l < ll.length; l++) {
    const e = document.createElement("div");
    e.classList.add("output"), e.classList.add(ll[l]), o.appendChild(e)
}

The above code adds class name based on output node id instead of sequentially from the for loop index

Error log from browser console

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
    at drawflow.min.js:410:35
    at Array.map (<anonymous>)
    at i.updateConnectionNodes (drawflow.min.js:405:32)
    at i.load (drawflow.min.js:94:78)
    at i.import (drawflow.min.js:968:83)
    at Object.success (ApprovalFlow:4358:34)
    at fire (plugins.bundle.js:3500:31)
    at Object.fireWith [as resolveWith] (plugins.bundle.js:3630:7)
    at done (plugins.bundle.js:9796:14)

Before

After

jerosoler commented 5 months ago

Hi @Andam

In drawflow the outputs and inputs are sequential.

If you export and import from the application there is no problem.

The problem is that the object to be imported is not correct. Surely you are creating an object from a database.

There are many more functions that depend on sequential outputs than just addNodeImport.

You can fork from project and adapt it to your case.

Andam commented 5 months ago

Correct, I have a structure from the database that I was trying to present in a diagram. Above solution has worked for presentation. I have not reached the stage to modify the database structure using the diagram yet but I was afraid that you were going to say that "many more functions that depend on sequential outputs than just addNodeImport" hence why I did not make a pull request. I will see what can I do once I reach the modification stage ( either change the database structure or modify the library ).

Anyway, I thought someone might benefit from this, you can close this issue as you see it fit and thanks again.

jerosoler / Drawflow