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），上面有两个端口，并将它们添加到图形中。元素本身是功能性的，但端口不是。当拖离活动磁铁（粉红色圆圈）时，它应该创建一个 link。相反，它会移动元素。

我已按照 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)。我建议使用 standard 形状而不是 basic，因为标准形状更新并且反映了最好的 JointJS 技术。

JointJS 端口不起作用

JointJS ports are non-functional

javascript

jointjs