wrong link ends position after rendring from json (graph.fromJSON)

Hello, I draw the diagram below: I export the diagram using graph.toJSON() then I import it using graph.fromJSON(), the diagram was rendered as below:

The link ends was changed. This is my paper config:

const paper = new joint.dia.Paper({
      el: $('#paper', el),
      width: PAPER.WIDTH,
      height: PAPER.HEIGHT,
      gridSize: 1,
      model: graph,
      cellViewNamespace: joint.shapes,
      drawGrid: true,
      interactive: true,
      linkPinning: false,
      defaultRouter: {
        name: 'manhattan',
        args: {
          perpendicular: true,
          step: 20
        }
      }
    });

Could anyone please help me out here ? Thanks.

[thoussem]

@kumilingus thank you very much it works

[kumilingus]

It’s probably because the paper is not in the DOM when it starts to render elements and links. Try to freeze the paper at initialization and unfreeze it when you are sure the paper is in the DOM.

const paper = new joint.dia.Paper({ frozen: true });
// later when paper is in the DOM
paper.unfreeze();