JointJS 端口不起作用答案

【问题标题】：JointJS ports are non-functionalJointJS 端口不起作用
【发布时间】：2018-07-11 19:56:45
【问题描述】：

这是一个显示问题的 JSFiddle：https://jsfiddle.net/Bronzdragon/xpvt214o/399003/

graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 800,
    height: 600,
});

var rect = new joint.shapes.basic.Rect({
  attrs: {rect: {fill: 'lightblue'}},
  size: { width: 200, height: 100 },
  ports: {
    groups: {
      'inputs': {
        position: { name: 'left' },
        attrs: {circle: {fill: 'lightgreen'}},
        magnet: 'passive'
      },
      'outputs': {
        position: { name: 'right' },
        attrs: {circle: {fill: 'pink'}},
        magnet: true,
      }
    },
    items:[ { group: 'inputs' }, { group: 'outputs' } ]
  }
});
rect.position(100, 50);
rect.addTo(graph);

var rect2 = rect.clone();
rect2.position(400, 100);
rect2.addTo(graph);

我正在定义一个 JointJS 元素（称为 rect），上面有两个端口，并将它们添加到图表中。元素本身是功能性的，但端口不是。从活动磁铁（粉红色圆圈）拖出时，它应该创建一个链接。相反，它会移动元素。

我已按照 JointJS 指南创建形状和添加端口。我添加的这些端口似乎完全不活动。我不知道我做错了什么。

【问题讨论】：

标签： javascript jointjs

【解决方案1】：

我已经给 JointJS 团队发了电子邮件，他们给我回复了以下内容（非常感谢 Roman！）：

感谢您与我们联系！你快到了。 magnet 属性旨在设置在特定形状的 DOM 元素上。类似于fill、refX、xlinkHref等

var rect = new joint.shapes.basic.Rect({
  attrs: {rect: {fill: 'lightblue' }, root: {  magnet: false }},
  size: { width: 200, height: 100 },
  ports: {
    groups: {
      'inputs': {
        position: { name: 'left' },
        attrs: {circle: {fill: 'green', magnet: 'passive' }},

      },
      'outputs': {
        position: { name: 'right' },
        attrs: {circle: {fill: 'red', magnet: true }},    
      }
    },
    items:[ { group: 'inputs' }, { group: 'outputs' } ]
  }
});

另外，如果您是 JointJS 的新手，我建议您阅读我们的在线教程 (https://resources.jointjs.com/tutorial)。我建议使用 standard 形状而不是 basic，因为标准形状更新并反映了最好的 JointJS 技术。

【讨论】：