Dynamic positions for inputs and outputs nodes

[jeremiecourlivant]

Hello,

I test Drawflow since severals days and it works fine and it's very useful.

I follow this issue to positioningg the inputs and outputs : #363 (comment).

It works fine but if I add text on the node after the creation of the node, the positionning is wrong.

I try to add the text after the inputs/outputs but it moves. I thought that the connections wouldn't move becaus the text is below.

I try to reapplicate the code to place the connections and it doesn't work, and the placement depends of the position of the node on the screen.

I tryy to get the height of the added text and add or substract this height to the positions of the connection but it doesn't work.

So, do you have a solution for this problem ?

Thanks,
Jérémie

[jerosoler]

This may be of help to you:

• Redraw dynamic outputs  #537

[jeremiecourlivant]

It helps, thanks, the connection is in the right place with updateConnectionNodes, but not the circle, with or without the code :

const links =  document.querySelectorAll(`#node-${id} .drawflow_content_node .link`);
    links.forEach((item) => {
        var target = document.querySelector(`#node-${id} .outputs .${item.classList[1]}`);
        if(target != null) {
            const pos = item.getBoundingClientRect();
            const targetPos = target.getBoundingClientRect();
            target.style.top = `${pos.y - targetPos.y}px`;
        }
        target = document.querySelector(`#node-${id} .inputs .${item.classList[1]}`);
        if(target != null) {
            const pos = item.getBoundingClientRect();
            const targetPos = target.getBoundingClientRect();
            target.style.top = `${pos.y - targetPos.y}px`;
        }
})