JointJS 向自定义元素添加端口

Question

我使用 jointjs tutorial 创建了一个自定义元素，如下所示：


CustomRect = joint.dia.Element.define('example.CustomRect', {
  attrs: {
    rect: {
      refX: 0,
      refY: 0,
      refWidth: '116',
      refHeight: '70',
      strokeWidth: 1,
      stroke: '#000000',
      fill: '#FFFFFF'
    },
    label: {
      textAnchor: 'left',
      refX: 10,
      fill: 'black',
      fontSize: 18,
      text: 'text'
    },
    upperRect: {
      strokeWidth: 1,
      stroke: '#000000',
      fill: 'rgba(255,0,0,0.3)',
      cursor: 'pointer'
    }
  }
}, {
    markup: [{
      tagName: 'rect',
      selector: 'rect'
    },
    {
      tagName: 'text',
      selector: 'label'
    },
    {
      tagName: 'rect',
      selector: 'upperRect'
    }]
})

...

let customRect = new this.CustomRect()

customRect.attr({
  upperRect: {
    refWidth: '116',
    refHeight: '10',
    refX: 0,
    refY: -11,
    event: 'element:upperRect:pointerdown'
  }
})

此外，我尝试使用 Port API for joint.dia.Element 添加端口，如下所示：

customRect.addPorts([
  {
    args: {
      y: 30
    },
    z: 0
  }
]);

这确实为我的元素添加了端口，但它们没有应有的功能，所以它们只是一些什么都不做的圆圈。

Port Tutorial 中显示的方法不起作用，因为我没有为我的自定义元素使用 joint.shapes.devs.Model，因为那时我无法像 joint.dia.Element 那样自定义它元素（或者至少我认为我不能）。

那么，如何将端口添加到使用 joint.dia.Element 定义的自定义元素中，使其具有应有的功能（如 Port Tutorial 中所示）？

Answer 1

不幸的是，文档对此解释得不够清楚。如果你想让端口交互，你需要在它们上设置 magnet 属性。

const CustomRect = joint.dia.Element.define('example.CustomRect', {
  /* ... */
  attrs: {
    root: {
      // Don't allow the root of the element to be target of a connection
      magnet: false
    }
  },
  ports: {
    items: [{
      id: 'port1',
      attrs: {
        portBody: {
          // The port can be a target of a connection
          // The user can create a link from the port by dragging the port
          magnet: true
        }
      }
    }, {
      id: 'port2',
      attrs: {
        portBody: {
          // The port can only become a target of a connection
          // The logic can be modified via paper.options.validateMagnet()
          magnet: 'passive'
        }
      }
    }]
  }
}, {
  /* ... */
  portMarkup: [{
    tagName: 'circle',
    selector: 'portBody',
    attributes: {
      'r': 10,
      'fill': '#FFFFFF',
      'stroke': '#000000'
      // If all the magnets are `true` / `passive` feel free to define
      // the magnet here in the default port markup or per a port group
      // 'magnet': true
    }
  }]
});

JointJS 向自定义元素添加端口

JointJS Adding a Port to a custom element

javascript

angular

typescript

jointjs