Connections Not Rendered Correctly Upon Import Until Node Is Moved

smngvlkz commented 6 days ago

When refreshing the page or changing node dimensions/positions, the connection strings/paths become misaligned from their input/output points. The connections only realign properly after moving the nodes.

Current Behavior

I create multiple nodes, connect them using the input/output points and save. But when I refresh the page, the connections lines become misaligned and only snap back to correct positions when I move a node. This happens even when I resize a node or change input/outpu positions.

Expected Behavior

Connections should maintain their correct positions relative to input/output points after page refresh
Connections should stay properly aligned when nodes are resized or modified
Connection paths should remain fixed unless explicitly deleted or modified

Code Example

const editor = ref(null)
const drawflowRef = ref(null)

editor.value = new Drawflow(drawflowRef.value)
editor.value!.reroute = true
editor.value!.reroute_fix_curvature = true

const data = savedContent // From database/storage
if (data) {
  editor.value!.clear()
  editor.value!.import(data)

const allNodes = editor.value.drawflow.drawflow.Home.data;
  for (const nodeId in allNodes) {
    const node = allNodes[nodeId];
    const nodeElement = document.querySelector(`#node-${nodeId} .drawflow_content_node`);
    if (nodeElement) {
      nodeElement.style.width = `${node.data.width}px`;
      nodeElement.style.height = `${node.data.height}px`;

    }
  }

  // Attempt to update connections
  setTimeout(() => {
    editor.value.updateConnectionNodes('all');
  }, 0);
}

I am using the latest version of Drawflow with Vue 3. I am also using the latest CSS

jerosoler commented 5 days ago

Css is not load on import data and render fail.

View this:

708
267
371
349

jerosoler commented 5 days ago

I don't see:

editor.value.start();

smngvlkz commented 5 days ago

I do haveeditor.value.start(); actually its on top, I just didn't add it in the example code

smngvlkz commented 5 days ago

@jerosoler Please note none of the solutions you posted are not working. I am still having the same issue where the connection lines are being rendered out of position and only snap back into position when I move the node

jerosoler / Drawflow