In Rappid framework. Link Element fails to point to the port when recreating with fromJSON method

Question

I am creating the elements in the stencil area based only using the following definition

joint.util.defaultsDeep({
        type: 'app.RectangularModel',
        attrs: {
            root: {
                magnet: false
            }
        },
        ports: {
            groups: {
                'in': {
                    markup: [{
                        tagName: 'path',
                        selector: 'portBody',
                        attributes: {
                            'd': 'M0 -10 L-5 -10 Q-10 0 -5 10 L 0 10 Z'
                        }
                    }],
                    attrs: {
                        portBody: {
                            magnet: true,
                            fill: '#61549c',
                            strokeWidth: 0
                        },
                        portLabel: {
                            fontSize: 11,
                            fill: '#61549c',
                            fontWeight: 800
                        }
                    },
                    position: {
                        name: 'left'
                    },
                    label: {
                        position: {
                            name: 'left',
                            args: {
                                y: 0
                            }
                        }
                    }
                },
                'out': {
                    markup: [{
                        tagName: 'path',
                        selector: 'portBody',
                        attributes: {
                            'd': 'M0 -10 L5 -10 Q10 0 5 10 L 0 10 Z',
                            'fill': 'purple',
                            'stroke': 'purple'
                        }
                    }],
                    position: {
                        name: 'right'
                    },
                    attrs: {
                        portBody: {
                            magnet: true,
                            fill: '#61549c',
                            strokeWidth: 0
                        },
                        portLabel: {
                            fontSize: 11,
                            fill: '#61549c',
                            fontWeight: 800
                        }
                    },
                    label: {
                        position: {
                            name: 'right',
                            args: {
                                y: 0
                            }
                        }
                    }
                }
            }
        }
    }, joint.shapes.standard.Rectangle.prototype.defaults);

And after finishing the drawing in the paper area as usual (everything works fine), I have a save button in the toolbar. The functionality of the button is to save the drawing data into the API server to load it later.

I am getting the graph data using the function graph.toJSON() method to save on the server. But when I am trying to reproduce the same graph JSON data, using the function graph.fromJSON the links are not pointing correctly to the ports.

This is the original image drawn

This is the image reproduced using graph.fromJSON method

Problem:

As you can see in the image when the graph data is reproduced in the graph using the function graph.fromJSON function, the links are pointing to the 0,0 location if the element instead of the ports drawn in the element.

Answer 1

Fixed the issue. I was adding the graph data before attaching the paper into the DOM. The graph renders fine when I am using graph.addCells after creating the paper and attaching it to the DOM.