jointjs - 在快速框架中。使用 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 之前，我正在添加图形数据。graph.addCells在创建纸张并将其附加到 DOM 后使用时，该图呈现良好。