javascript - 防止接头中的盲端链接

Question

我想阻止没有来源或目标的链接。 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));

Answer 1

 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