javascript - 防止关节的盲端连接

我想防止没有源或目标的链接。 linkPinning: false没有作用，所以我尝试了以下方法:

paper.on({
    'cell:pointerup blank:pointerup': function(cellView, event) {
        graph.getLinks().forEach(function(link) {
            var source = link.get('source');
            var target = link.get('target');
            if (source.id === undefined || target.id === undefined) {
                link.remove();
            }
        });
    },
});

这将删除所有“错误”链接，但是现在我无法从element1到element2添加正确的链接。

这是因为在事件触发时，目标尚未设定。第一次将x和y设置为目标。如果再单击一次，则设置目标。我不明白为什么要这么做。我希望在第一次事件发生时立即设置目标。

创建链接的结果

首先，我对target有所了解:

"type":"link",
"source": {
    "id":"919a11e4-d14b-48f8-8ab5-736aaa626882",
    "selector":"circle:nth-child(3)  "
    },
"target": {
    "x":540,
    "y":230
    }

再单击一次或修改

在此之后，我得到一个元素:

"type":"link",
"source":{
    "id":"919a11e4-d14b-48f8-8ab5-736aaa626882",
    "selector":"circle:nth-child(3)  "
    },
"target": {
    "id":"29b9ff1c-5ccf-4328-9665-7ee4fe08d4e0",
    "selector":"circle:nth-child(5)  "
    }

为什么仅在箭头(或类似的东西)再单击一次矿石移动之后才设置正确的目标(至元素)？

定义

这是我定义纸张和形状的代码:

var paper = new joint.dia.Paper({
    el: $('#canvas'),
    width: 801,
    height: 496,
    model: graph,
    gridSize: 10,
    linkPinning: false, // DOESN'T HAVE EFFECT
    interactive: function(cellView) {
        if (cellView.model.isLink()) {
            return { vertexAdd: false }; // Disable the default vertex add functionality on pointerdown.
        }
        return true;
    },
    defaultLink: new joint.dia.Link({
        router: { name: 'manhattan' },
        connector: { name: 'rounded' },
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
            '.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
        }
    })
});

joint.shapes.app = {};

joint.shapes.app.Standard = joint.shapes.basic.Generic.extend({
    markup: '<rect/><circle class="port port-top"/><circle class="port port-bottom"/><circle class="port port-right"/><circle class="port port-left"/><text/>',
    defaults: joint.util.deepSupplement({

        type: 'app.Standard',
        attrs: {
            '.port': { r: 5, magnet: true, fill: '#4f6870', opacity: 0.5 },
            '.port-top': { ref: 'rect', 'ref-x': 0.5, 'ref-y': 0 },
            '.port-right': { ref: 'rect', 'ref-dx': 0, 'ref-y': 0.5 },
            '.port-bottom': { ref: 'rect', 'ref-x': 0.5, 'ref-dy': 0 },
            '.port-left': { ref: 'rect', 'ref-x': 0, 'ref-y': 0.5 },
            rect: {
                fill: '#ffffff',
                stroke: '#d6d6d6',
                'stroke-width': 1,
                width: 100,
                height: 40,
                rx: 4,
                ry: 4
            },
            'text': {
                fill: '#626262',
                text: 'Text',
                'font-size': 12,
                ref: 'rect',
                'ref-x': 0.5,
                'ref-y': 0.5,
                'text-anchor': 'middle',
                'y-alignment': 'middle',
                'font-family': 'Arial, helvetica, sans-serif',
                lineHeight: '1.5em'
            }
        }

    }, joint.shapes.basic.Generic.prototype.defaults)
});

graph.fromJSON(JSON.parse(flowchart.json));

最佳答案

 paper = new joint.dia.Paper({
  ....
    model: graph,
    linkPinning: false,
 ....)};

设置linkPinning:定义纸张时为false。它为我工作。

请参阅此文档:http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Paper.prototype.options.linkPinning