В рамках Rappid. Элемент Link не указывает на порт при воссоздании с помощью метода from JSON

Question

Я создаю элементы в области трафарета, используя только следующее определение

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);

И после завершения рисования в области бумаги, как обычно (все работает нормально), у меня есть кнопка сохранения в панель инструментов. Функциональность кнопки состоит в том, чтобы сохранить данные чертежа на сервере API, чтобы загрузить их позже.

Я получаю данные графика с помощью метода функции graph.to JSON () для сохранения на сервере. Но когда я пытаюсь воспроизвести тот же график JSON данных, используя функцию graph.fromJSON, ссылки неправильно указывают на порты.

Это исходное изображение, нарисованное

Это изображение, воспроизведенное с использованием метода graph.fromJSON

graph.fromJSON method">

Проблема:

Как вы можете видеть на изображении, когда данные графика воспроизводятся на графике с помощью функции graph.fromJSON, ссылки указывают на расположение 0,0, если элемент вместо портов, нарисованных в элементе.

Answer 1

Исправлена ​​проблема. Я добавлял данные графика перед тем, как прикрепить документ в DOM. График отображается нормально, когда я использую graph.addCells после создания бумаги и прикрепления ее к DOM.