在 Rapid 框架中。 Link 使用 fromJSON 方法重新创建时，元素无法指向端口

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.toJSON() 方法获取图形数据以保存在服务器上。但是当我尝试重现相同的图形 JSON 数据时，使用函数 graph.fromJSON 链接没有正确指向端口。

这是画的原图

这是使用graph.fromJSON方法复制的图像

问题：

正如您在图像中看到的那样，当使用函数 graph.fromJSON 函数在图形中复制图形数据时，链接指向 0,0 位置，如果元素而不是绘制的端口元素。

Answer 1

已解决问题。在将论文附加到 DOM 之前，我正在添加图表数据。当我在创建论文并将其附加到 DOM.

后使用 graph.addCells 时，图表呈现良好

在 Rapid 框架中。 Link 使用 fromJSON 方法重新创建时，元素无法指向端口

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

jointjs

rappid