How to adjust the position of the connection when node resizes?

[meet1919]

The node which I am using has the following css

.drawflow .drawflow-node {
    width: auto;
    height: auto;   
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    height: 15px;
    width: 15px;
    border: 2px solid var(--border-color);
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    background: #4ea9ff;
}

.drawflow .drawflow-node .output {
    right: 0;
    transform: translateX(-50%);
}

.drawflow .drawflow-node .input {
    left: 0px;
    transform: translateX(-50%);
    background: #43b993;
}

when the node resizes the input and output are shifted also as they should be at the vertical center of the node. But the thing is connection doesn't shift. It attaches/shifts instantly to the input and output when I drag the node.

the problem occurs here

<svg class="connection node_in_node-2 node_out_node-1 output_1 input_1 p-task">
    <path class="main-path" d=" M 399.2000043392181 400.3000259399413 C 478.993762731552 400.3000259399413 
        478.993762731552 275.349998474121 558.787521123886  275.349998474121"></path>
</svg>

the d attribute of path should dynamically update when node resizes.

[jerosoler]

View function updateConnectionNodes(id)

Example use:

editor.updateConnectionNodes('node-5');

[meet1919]

Ohh yes. Sorry, I didnt study the documentation well.

[meet1919]

the connection tries to update but doesnt attaches to the actual position of input and output when the node resizes. What should be the problem now? It is working when I drag the nodes, so same function applies here. It should work as expected right?

[jerosoler]

Same function

[meet1919]

yeah, but it doesnt work properly. But works properly when node is dragged.

here how I am using it

$('#project-details').on('click', '.add-input', function () {
    $(this).prop('hidden', true)
    $(this).parent().find('.remove-input').prop('hidden', false)
    $(this).parent().find('.user-instruction-input').show(100)
    let node_id = $(this).closest('.drawflow-node').attr('id')
    drawflow.updateConnectionNodes(node_id)
})

$('#project-details').on('click', '.remove-input', function () {
    $(this).prop('hidden', true)
    $(this).parent().find('.add-input').prop('hidden', false)
    $(this).parent().find('.user-instruction-input').hide(100)
    let node_id = $(this).closest('.drawflow-node').attr('id')
    drawflow.updateConnectionNodes(node_id)
})

[jerosoler]

Could it be because it is taking 100 miliseconds to hide and show? Try settimeout.

Or prepare a codepen or sandbox to try

[meet1919]

Yeah, 100 ms was the problem.