JointJS+Angular：如何实现图形元素端口在指定侧边显示？

问题根源 #

1. 元素类型不兼容：如果使用joint.shapes.basic.Rect这类旧版基础元素，它们对端口位置布局的支持有限，无法识别position配置。
2. 缺少端口组（Port Group）配置：JointJS的端口布局依赖ports.groups定义的规则，直接在单个端口里设置position不会触发布局逻辑，导致端口默认固定在左侧。
3. 端口配置层级错误：原代码中端口的position配置没有关联到正确的布局规则，且自定义markup可能干扰了默认的端口定位逻辑。

修复步骤 #

1. 使用支持端口布局的标准元素 #

创建元素时，改用joint.shapes.standard.Rectangle（或其他standard系列元素），这类元素原生支持端口的位置布局：

// 示例：创建带端口组配置的元素
const agentElement = new joint.shapes.standard.Rectangle({
  position: { x: 100, y: 100 },
  size: { width: 180, height: 90 },
  attrs: {
    label: { text: agentName },
    body: { fill: '#f0f0f0', stroke: '#333' }
  },
  // 必须配置ports.groups，定义端口的基础布局规则
  ports: {
    groups: {
      default: {
        // 默认位置（会被单个端口的position覆盖）
        position: { name: 'left', args: { y: 0.5 } },
        attrs: {
          portBody: {
            magnet: true,
            r: 10,
            fill: '#023047',
            stroke: '#023047'
          }
        },
        label: {
          // 标签的默认位置配置
          position: {
            name: 'left',
            args: { y: 0.5, offset: -12 } // 标签偏移端口的距离
          }
        }
      }
    }
  }
});
this.graph.addCell(agentElement);

2. 简化并修正端口生成函数 #

去掉冗余的markup定义，通过group关联到元素的端口组，让布局规则生效：

getPort(portName: string, position: string): object {
  // 根据端口位置设置标签偏移
  const labelOffset = position === 'right' || position === 'bottom' ? 12 : -12;
  const positionArgs = position === 'top' || position === 'bottom' 
    ? { x: 0.5 } // 上下端口水平居中
    : { y: 0.5 }; // 左右端口垂直居中

  return {
    group: 'default', // 关联到元素定义的端口组
    position: {
      name: position,
      args: positionArgs
    },
    attrs: {
      label: { text: portName }
    },
    label: {
      position: {
        name: position,
        args: { ...positionArgs, offset: labelOffset }
      }
    }
  };
}

3. 优化端口添加逻辑 #

使用JointJS官方推荐的attr()方法获取元素文本，避免直接访问内部属性：

this.graph.getElements().forEach(element => {
  if (element.attr('label/text') === agentName) {
    element.addPort(port);
  }
});

验证要点 #

• 确认元素是joint.shapes.standard系列，而非basic系列
• 元素必须包含ports.groups配置，端口需指定group属性
• 测试不同位置参数（left/right/top/bottom），确认端口位置正确切换

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