Angular项目中JointJS导入JSON后端口样式丢失问题求助

核心原因分析 #

1. 端口颜色丢失：JointJS默认序列化时不会自动保留端口的自定义样式，除非样式定义在端口组的attrs配置中而非硬编码到markup里。
2. 自定义markup导致链接失效：devs.Model的端口依赖特定DOM结构（如带magnet属性的元素），完全覆盖markup会破坏这些核心结构，导致无法触发链接逻辑。

解决方案步骤 #

1. 正确用attrs定义端口样式（支持序列化）

不要直接修改markup，而是在端口组的attrs中配置颜色，这样样式会被自动序列化到JSON中。

import * as joint from 'jointjs';

// 自定义devs.Model子类
class CustomDevsNode extends joint.shapes.devs.Model {
  defaults() {
    return {
      ...super.defaults,
      size: { width: 180, height: 80 },
      ports: {
        groups: {
          // 入端口（蓝色）
          in: {
            attrs: {
              circle: {
                fill: '#007bff',
                r: 6,
                magnet: true, // 必须保留，开启链接功能
                stroke: '#fff',
                strokeWidth: 2
              }
            },
            position: 'left',
            label: { position: { name: 'left' } }
          },
          // 出端口（红色）
          out: {
            attrs: {
              circle: {
                fill: '#dc3545',
                r: 6,
                magnet: true,
                stroke: '#fff',
                strokeWidth: 2
              }
            },
            position: 'right',
            label: { position: { name: 'right' } }
          }
        }
      }
    };
  }
}

2. 序列化与反序列化的正确姿势

使用JointJS原生的toJSON()和fromJSON()方法即可，只要样式定义在attrs中，序列化时会自动包含：

// 导出元素到JSON
const elementJson = customNode.toJSON();

// 从JSON导入元素
const importedNode = new CustomDevsNode();
importedNode.fromJSON(elementJson);
graph.addCell(importedNode);

如果导入后样式仍丢失，可在子类中重写fromJSON确保端口配置被正确合并：

fromJSON(json: any) {
  const result = super.fromJSON(json);
  // 手动合并端口组的自定义样式
  const portGroups = json.ports?.groups || {};
  Object.keys(portGroups).forEach(groupName => {
    if (portGroups[groupName].attrs) {
      this.setPortGroupAttrs(groupName, portGroups[groupName].attrs);
    }
  });
  return result;
}

3. 自定义markup时保留核心结构（如需）

如果必须修改端口的DOM结构，不要完全覆盖父类的markup，需保留magnet属性和端口容器：

class CustomMarkupDevsNode extends joint.shapes.devs.Model {
  defaults() {
    return {
      ...super.defaults,
      markup: [
        '<g class="rotatable">',
          '<g class="scalable"><rect class="body" rx="5" ry="5"/></g>',
          '<text class="label"/>',
          // 必须保留端口容器
          '<g class="inPorts"/>',
          '<g class="outPorts"/>',
        '</g>'
      ].join(''),
      ports: {
        groups: {
          in: {
            // 自定义端口的markup，但保留magnet属性
            markup: '<g class="port"><circle class="port-circle" magnet="true"/><text class="port-label"/></g>',
            attrs: {
              '.port-circle': {
                fill: '#007bff',
                r: 7,
                stroke: '#fff'
              }
            },
            position: 'left'
          }
        }
      }
    };
  }
}

关键注意点 #

• 所有需要支持链接的端口元素必须设置magnet: true，这是JointJS识别可链接区域的核心标记。
• 样式配置尽量放在attrs中，而非直接写死在markup字符串里，确保序列化时能被捕获。
• 不要随意删除devs.Model默认markup中的.inPorts、.outPorts容器，否则端口无法渲染。

内容的提问来源于stack exchange，提问作者Malik kamran Khalil