如何在 JointJS 中以交互方式创建链接答案

【问题标题】：How to interactively create links in JointJS如何在 JointJS 中以交互方式创建链接
【发布时间】：2014-07-05 14:53:54
【问题描述】：

我想以交互方式向基于 JointJS 的图表添加链接。

我的想法是在pointerdown 上创建一个小的临时节点，并带有从原始节点到该临时节点的链接，将其拖到另一个节点的顶部，然后在 pointerup 上创建真正的链接，删除临时链接和节点.

不幸的是，我不知道如何说服指针移动临时元素而不是 pointerdown 事件发生的节点。任何的想法？谢谢！

var tmp_obj;
paper.on('cell:pointerdown', function(cellView, evt, x, y) {
    if(evt.button == 1) {
        // Freeze the selected node so it does not move
        paper.findViewByModel(cellView.model).options.interactive = false;

        // Create a small temporary node on top of the selected node
        tmp_obj = new joint.shapes.basic.Rect({
            position: { x: x, y: y },
            size: { width: 5, height: 5 }
        }

        // Create the link between the original node and the small temporary node

        // And now?
    }
}

paper.on('cell:pointerup', function(cellView, evt, x, y) {

    if(evt.button == 1) {
        // Unfreeze the origin node
        paper.findViewByModel(cellView.model).options.interactive = true;

        // Delete the temporary object (and temporary link)
        tmp_obj.remove()

        // Find the first element below that is not a link nor the dragged element itself.
        var elementBelow = graph.get('cells').find(function(cell) {
            if (cell instanceof joint.dia.Link) return false; // Not interested in links.
            if (cell.id === cellView.model.id) return false; // The same element as the dropped one.
            if (cell.getBBox().containsPoint(g.point(x, y))) {
                return true;
            }
            return false;
        });

        // create the link from cellView to elementBelow 
    }
});

【问题讨论】：

标签： javascript jointjs

【解决方案1】：

也许你可以使用JointJS的磁铁功能？如果您在 JointJS 元素的 SVG 子元素上设置 magnet: true，则该元素将变为活动状态，并允许用户从该元素开始创建链接。例如：

var r = new joint.shapes.basic.Rect({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 40 },
    attrs: { text: { text: 'basic.Rect', magnet: true } }
});

这将使元素表现得像一个端口。

【讨论】：

太棒了！也许应该记录得更好一点。现在我必须找到一种方法来防止在节点和空之间创建悬空链接。
@SiliconValley 你有没有想过如何防止悬空链接？（或者如何将它们重新拾起并拖动到元素上 - 一旦断开连接，它只会改变形状:()
我已经为每个端口添加了磁铁：true 但我仍然无法开始绘制链接并且调整大小的光标位于所有端口和元素上

【解决方案2】：

为了防止悬空链接：

joint.dia.Paper({ linkPinning: false })

【讨论】：

谢谢。文档和示例确实在代码和库的质量下

【解决方案3】：

Here 是一个不错的解决方案。

你可以组合

linkView.startArrowheadMove('target');

和

evt.data.view.pointermove(evt, p.x, p.y);

【讨论】：