javascript - JointJS 端口不起作用

Question

这是一个显示问题的 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 指南创建形状并添加端口。我添加的这些端口似乎完全不活动。我不知道我做错了什么。

Answer 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 )。我建议使用标准形状而不是基本，因为标准形状更新并且反射(reflect)了最好的JointJS技术。