如何在JointJS中以交互方式創建鏈接

Question

我想以交互方式添加指向基於JointJS的圖表的鏈接。

我的想法是在pointerdown創建一個小的臨時節點， 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 
    }
});

Answer 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 } }
});

這將使元素表現得像一個端口。

Answer 2

防止懸空鏈接：

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

Answer 3

這是一個很好的解決方案。

你可以結合起來

linkView.startArrowheadMove('target');

和

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