I’m working on a diagramming application using JointJS where users can create and connect rectangles with links. I’ve implemented an autosave feature that saves the state of the graph and reloads it when the page is refreshed.

However, I’ve encountered an issue where, after loading the graph from the autosave, the links between rectangles are not connecting to the centers as intended. Instead, they connect to the top-left corners of the rectangles. Interestingly, when I manually resize any of the rectangles after loading, the links adjust and correctly connect to the centers.

Expected Behavior:

• Links should connect to the centers of rectangles immediately after loading the graph.

Actual Behavior:

• Links connect to the top-left corners of rectangles after loading.

• After manually resizing a rectangle, the links adjust and connect to the centers as expected.

Screenshots:

Before resizing (links connected to top-left corners):

After resizing (links correctly connected to centers):

Here is the relevant code snippet:

const rect1 = new shapes.standard.Rectangle();
rect1.position(50, 50);
rect1.resize(100, 40);
rect1.attr({
  body: { stroke: "#C94A46", rx: 2, ry: 2 },
  label: { text: "Rect1", fill: "#353535" },
});
rect1.addTo(this.graph);

const rect2 = new shapes.standard.Rectangle();
rect2.position(200, 50);
rect2.resize(100, 40);
rect2.attr({
  body: { stroke: "#C94A46", rx: 2, ry: 2 },
  label: { text: "Rect2", fill: "#353535" },
});
rect2.addTo(this.graph);

// Create the link
const link = new shapes.standard.Link();
link.source(rect1, {
  magnet: "auto",
});

link.target(rect2, { x: "50%", y: "50%" }); // Connect to the center
link.attr({
  line: {
    stroke: "#000000", // Color
    strokeWidth: 2, // Width
  },
});
link.addTo(this.graph);

What I’ve Tried:

• Ensuring that the magnet is set to “auto” and the target is defined with { x: “50%”, y: “50%” }.
• I’ve attempted to manually trigger updates or re-renders after loading, but the issue persists until a resize occurs.

Question:
How can I ensure that the link connects to the center of the rectangles immediately after the graph is loaded, without requiring a manual resize? Is there a way to force the link to recalculate its position after loading?