Question

全部

我使用标准示例标记可用磁铁当我使用2个模型

时，它运作良好

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

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

当我尝试连接“out”端口时，我在火袋中看到下一个：“PORT TYPE - input”

“out”端口的类型必须是“output”，但它具有“input”类型

但其他“out”端口正常工作

我的代码：

<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。

JointJs：示例“标记可用磁铁”无法正常工作（端口）

1 个答案: