Ports 端口

一个元素的一端和另一个元素的一端相连可以在 Graph（逻辑层）中通过 Link 的 target 和 source 两个函数实现相连。

从用户的角度出发，在 Paper（视图层）中，用户通过鼠标移动从一个元素的一端拉一条线和另一个元素的一端相连，而这就需要借助端口（Ports）来实现。

创建单个 Port

配置 Port

const port = {
  // 端口样式，与 Element 的 attrs 一致
  attrs: {
    // 端口的配置项
    portBody: {
      magnet: true,
      width: 16,
      height: 16,
      x: -8,
      y: -8,
      fill: "#03071E"
    },
    // 端口附带一个文本
    label: {
      text: "port"
    }
  },
  // 文本的相关配置
  label: {
    position: {
      name: "left"
    },
    markup: [
      {
        tagName: "text",
        selector: "label"
      }
    ]
  },
  // 端口的子图形，是一个矩形
  markup: [
    {
      tagName: "rect",
      selector: "portBody"
    }
  ]
};

1. attrs：JointJS 的样式定义。与 Element 的属性是一致的。
2. label：端口的文本描述，下面的 markup 与第三点的 markup 是一样的。
3. markup：定义端口图形下的子图形的 SVG 类型，并给子图形设置一个名称，以便于 attrs 的样式可以正确对应到子图形上。

添加 Port

可以通过构造函数传递对应的属性添加 Port。

const rect = new joint.shapes.standard.Rectangle({
  position: { x: 275, y: 50 },
  size: { width: 90, height: 90 },
  ports: {
    items: [port] // add a port in constructor
  }
});

也可以通过图形的函数 addPort 添加 Port。

const rect = new joint.shapes.standard.Rectangle({
  // ...
  del:[ports: {]
    del:[items: [port] // add a port in constructor]
  del:[}]
});

add:[rect.addPort(port);]