Rappid框架中使用fromJSON重建图形时Link Element无法指向端口

我之前碰到过完全一样的问题，这通常是自定义元素注册不规范，或者反序列化时JointJS无法正确识别端口配置导致的。下面是具体的排查和解决步骤：

1. 规范自定义元素的注册方式 #

你原来用joint.util.defaultsDeep直接修改原型的方式，会导致序列化时元素类型信息不完整，反序列化时JointJS无法正确识别你的app.RectangularModel类型，只能用基础矩形元素替代——而基础元素没有你的端口配置，自然找不到对应端口。

正确的做法是用define方法创建自定义元素，确保类型信息被正确记录：

// 先初始化app命名空间（如果不存在）
joint.shapes.app = joint.shapes.app || {};

// 定义自定义元素
joint.shapes.app.RectangularModel = joint.shapes.standard.Rectangle.define('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' } }],
                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 } } }
            }
        }
    }
}, {});

重点：一定要在调用graph.fromJSON()之前执行这段注册代码，否则加载时JointJS找不到对应的元素类型。

2. 确保链接创建时正确关联端口 #

检查你创建链接的代码，必须明确指定source和target的port属性，这样序列化后的JSON才会包含端口信息：

// 示例：创建指向端口的链接
const link = new joint.shapes.standard.Link({
    source: { id: 'element-1', port: 'in-port-1' }, // 替换成你的元素ID和端口ID
    target: { id: 'element-2', port: 'out-port-1' },
    attrs: { line: { stroke: '#333' } }
});
graph.addCell(link);

保存后的JSON中，链接的source和target应该包含port字段，比如：

{
  "type": "standard.Link",
  "id": "link-1",
  "source": { "id": "element-1", "port": "in-port-1" },
  "target": { "id": "element-2", "port": "out-port-1" },
  // ... 其他属性
}

如果JSON里没有port字段，说明链接创建时没关联端口，加载时自然找不到目标。

3. 清理端口配置中的冗余属性 #

你原来的out端口组的markup里直接写了fill和stroke属性，这和后面attrs中的配置冲突，会导致端口渲染异常。建议移除markup中的样式属性，统一用attrs配置：

// 修正后的out端口组
'out': {
    markup: [{ tagName: 'path', selector: 'portBody', attributes: { 'd': 'M0 -10 L5 -10 Q10 0 5 10 L 0 10 Z' } }],
    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 } } }
}

4. 遵循正确的加载顺序 #

确保加载流程是：

1. 注册自定义元素
2. 初始化Graph和Paper
3. 调用graph.fromJSON(yourSavedData)

按照这些步骤调整后，加载后的链接应该能正确指向对应的端口了。

内容的提问来源于stack exchange，提问作者Jin Krish