JointJS：如何在图形元素的右侧显示端口？

Question

我正在尝试创建一个 Angular 应用程序，它允许用户动态创建图形。我目前正在尝试创建一个将端口添加到顶点的函数，我希望用户能够选择端口出现在哪一侧（右、左、上、下）。我按照 JointJS 文档上的示例进行操作，但是，我只能改变端口标签的位置，而不能改变端口本身：

这是我的函数，它根据位置（“顶部”、“右侧”等）和名称返回端口主体：

getPort(portName: string, position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        label: {
          text: portName
        },
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

这是我如何将端口添加到图表中（它采用唯一的顶点名称作为参数）：

this.graph.getElements().forEach(element => {
      if (element.attributes.attrs['label'].text == agentName) {
        element.addPort(port)
      }
})

我遵循了本教程，但是即使我复制了一些应该出现在右侧的端口主体，它仍然局限于左侧。

我做错了什么？

Answer 1

原来您可以指定端口组中的位置。我将以下部分添加到我的形状中：

ports: {
    groups: {
      'left': this.PORT_GROUP('left'),
      'right': this.PORT_GROUP('right'),
      'top': this.PORT_GROUP('top'),
      'bottom': this.PORT_GROUP('bottom'),
    }
  }

连同此功能：

PORT_GROUP(position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position,
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

它将端口与主体放置在正确的位置：

{
  group: 'left',
  attrs: {label: {text: 'portName'}}
}