javascript - JointJs:示例 "Marking available magnets"无法正常工作(端口)

Question

全部

我使用一个标准示例标记可用的磁铁当我使用 2 个模型时效果很好

但是当我从 m1 克隆 4 个模型时，我通常会收到 5 个模型

当我尝试将其端口“out”连接到其他模型的端口“in”时，带有标签“Model 4”的模型无法正常工作，但看不到其他模型的“in”端口

当我尝试连接“输出”端口时，我在 firebag 中看到下一个:“端口类型 - 输入”

“输出”端口的类型必须是“输出”，但它具有“输入”类型

但其他“输出”端口工作正常

我的代码:

<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
<script src="joint.shapes.devs.js"></script>

<div id="paper-mark-available"></div>
<div id="paper-link-out"></div>

<script>
(function() {

    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({
        el: $('#paper-mark-available'),
        width: 1650, height: 500, gridSize: 1,
        model: graph,
        defaultLink: new joint.dia.Link({
            attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }
        }),
        validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {

            console.log('PORT TYPE - '+magnetS.getAttribute('type'));

            if (magnetS && magnetS.getAttribute('type') === 'input') return false;
            if (cellViewS === cellViewT) return false;
            return magnetT && magnetT.getAttribute('type') === 'input';
        },

        markAvailable: true
    });

    var m1 = new joint.shapes.devs.Model({
        position: { x: 50, y: 50 },
        size: { width: 90, height: 90 },
        inPorts: ['in1','in2'],
        outPorts: ['out'],
        attrs: {
            '.label': { text: 'Model 1', 'ref-x': .4, 'ref-y': .2 },
            rect: { fill: '#2ECC71' },
            '.inPorts circle': { fill: '#16A085', magnet: 'passive', type: 'input' },
            '.outPorts circle': { fill: '#E74C3C', type: 'output' }
        }
    }).addTo(graph);

    var m2 = m1.clone().translate(300, 0).attr('.label/text', 'Model 2').addTo(graph);
    var m3 = m1.clone().translate(150, 0).attr('.label/text', 'Model 3').addTo(graph);
    var m4 = m1.clone().translate(180, 0).attr('.label/text', 'Model 4').addTo(graph);![enter image description here][2]
    var m5 = m1.clone().translate(250, 0).attr('.label/text', 'Model 5').addTo(graph);

})()
</script>

您知道为什么会发生这种情况吗？我该如何解决它？

谢谢

Answer 1

我自己也遇到过这个问题。可以在此处找到解决方案 https://github.com/clientIO/joint/pull/120 .