Connections misaligned after editor.import() when customizing node outputs

[k22kevalam-jenisha]

Hi, I’m customizing node outputs in Drawflow based on dynamic buttons.
I reposition the .output anchors inside the node to align with my custom button list.

When I first load the editor and add nodes manually, everything works fine.
But when I import saved JSON using editor.import(exportedData) and rebuild node HTML, the connections do not align with the outputs.

The connections only align correctly after I drag the node once.
It seems that Drawflow does not recalculate connection positions after node HTML is modified following import().

code:

editor.import(json);

Object.keys(editor.drawflow.drawflow.Home.data).forEach(id => {
  let node = editor.getNodeFromId(id);

  // rebuild node HTML
  let html = createNodeHTML(node.name, id);

  let nodeEl = document.querySelector(`#node-${id} .drawflow_content_node`);
  if (nodeEl) {
    nodeEl.innerHTML = html;

    // reposition outputs based on buttons
    let outputs = nodeEl.querySelectorAll(".output");
    let buttons = nodeEl.querySelectorAll(".interactive_btn");
    buttons.forEach((btn, i) => {
      outputs[i].style.top = `${btn.offsetTop + btn.offsetHeight / 2}px`;
    });
  }
});

[jerosoler]

View

• Connections Not Rendered Correctly Upon Import Until Node Is Moved #914

[k22kevalam-jenisha]

View

• Connections Not Rendered Correctly Upon Import Until Node Is Moved #914

@jerosoler Thank you so much for your help!