search

jerosoler / Drawflow

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

Adding and Removing connection ports #514

Open mcarpenter622 opened 2 years ago

mcarpenter622 commented 2 years ago

I am in the process of adding a node that can have a variable number of output ports. So that the ports align with the data in the nodes I added the following CSS .drawflow .drawflow-node.choice .output { top: 15px; margin-top: 10px; margin-bottom: 10px; } Right now, when I add or remove a port the connections redraw but at the wrong spot - slightly above the port its attached to. However, when I move one of the nodes the connections snap to the right spot. Is there a way to force the connections to redraw? updateConnectionNodes apparently does nothing in this case.

mcarpenter622 commented 2 years ago

Additional caveat, I removed the styling above and I am still seeing this issue. This appears to be an issue with the redraw after a port is added or removed

mcarpenter622 commented 2 years ago

Additional info, This appears to be happening when the content of the node causes the node height to grow. This seems to throw off the calculations. If I put an extra div in there that grows past the node's boundaries, the ports align correctly, but that is obviously not a solution.

jerosoler commented 2 years ago

Hello

Yes the function is 'updateConnectionNodes(id)' Be careful when passing the parameter.

updateConnectionNodes('node-5') // ✔ CORRECT 
updateConnectionNodes(5) // ⛔ INCORRECT

There are some inconsistencies in the functions.

mcarpenter622 commented 2 years ago

So that is what I am saying, I am using the correct input to this method, but it doesnt work correctly when the content of the node causes the node size to grow. There is definitely a bug here.

jerosoler commented 2 years ago

Create an example to see the problem.