Handle location

[prksean]

Hello, another question...

I built custom node.

• Each node has list of items.
• Nodes can connect to each other
• Items can connect to items in another node.
• Items are connected whenever they are clicked.
• When another item is clicked, previous connection disappears.
• Doing this by manipulating edges data.
• Think of it as tables(nodes) and columns(items).

So inside my custom node template, I have divs for list of items and Handles for each item.

There can be many items for a node so I want to implement show more/show less for items and filter function for items and render items and their handles dynamically.

Problem is, when I do this, the edge does not seem to find correct location for Handle. It seems like the Handle location is all finalized at first load.

For example, let's say this node has 10 items total. At first only first 5 is loaded. I click one of them and connection shows fine. But after I enter some words to filter and get different list of items showing, and I click one of the items, edge does not connect properly to its Handle (or Handle position is off).

I thought this would work because edges are using IDs to connect.

Any feedback will be appreciated.

[bcakmakoglu]

Check this section of the docs.

You might have to call updateNodeInternals when changing your handles dynamically.
In most cases this should work automatically but if it doesn't you'll have to call it yourself, otherwise edges do not have knowledge of existing handles and their positions, so they can't be properly drawn.

[prksean]

Thank you, will give it a try.