JointJS旧版端口创建方案废弃后的替代实现方法咨询

JointJS v3.0及后续版本对端口相关API做了重构，原旧教程中的直接操作ports数组、调用已废弃的实例方法的实现方式已不可用，可通过以下新版支持的方案实现完全相同的端口创建、管理功能：

基础端口配置定义 #

推荐预先定义全局通用的端口分组配置，复用端口样式、位置规则，减少重复代码：

// 端口通用配置，可根据需求自定义样式、位置规则
const commonPortConfig = {
  groups: {
    // 输入端口组，默认位于节点左侧
    input: {
      position: 'left',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#2385bb',
          strokeWidth: 2,
          fill: '#ffffff'
        }
      }
    },
    // 输出端口组，默认位于节点右侧
    output: {
      position: 'right',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#2385bb',
          strokeWidth: 2,
          fill: '#ffffff'
        }
      }
    }
  }
};

节点初始化时添加端口 #

创建节点实例时直接传入ports配置即可完成初始化端口的添加：

const customRect = new joint.shapes.standard.Rectangle({
  position: { x: 200, y: 150 },
  size: { width: 120, height: 70 },
  attrs: {
    body: {
      fill: '#f0f4f8',
      stroke: '#cbd5e1',
      strokeWidth: 1
    },
    label: {
      text: '业务节点',
      fontSize: 14,
      fill: '#1e293b'
    }
  },
  ports: {
    ...commonPortConfig,
    items: [
      // 传入要初始化的端口列表，指定所属分组即可
      { id: 'in-1', group: 'input' },
      { id: 'out-1', group: 'output' },
      { id: 'out-2', group: 'output' }
    ]
  }
});
// 将节点添加到画布
customRect.addTo(graph);

动态管理端口 #

运行时需要新增、删除、修改端口时，使用以下官方提供的标准API即可：

• 新增单个端口
  customRect.addPort({ id: 'in-2', group: 'input' });
• 批量新增多个端口
  customRect.addPorts([{ id: 'in-2', group: 'input' }, { id: 'out-3', group: 'output' }]);
• 删除指定ID的端口
  customRect.removePort('in-1');
• 批量删除多个端口
  customRect.removePorts(['in-1', 'out-1']);
• 清空现有端口并重置为新的端口列表
  customRect.setPorts([{ id: 'new-in-1', group: 'input' }, { id: 'new-out-1', group: 'output' }]);
• 修改指定端口的属性
  customRect.portProp('in-1', 'attrs/circle/fill', '#ef4444');

特殊需求适配 #

• 自定义端口排布：如果需要非标准的上下左右排布规则，可将group下的position字段替换为自定义计算函数，返回每个端口的坐标偏移即可
• 端口交互限制：不需要支持连线的端口设置magnet: false即可
• 端口标签：需要展示端口名称的，在端口配置的attrs中添加label相关的属性配置即可

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