JointJS 端口：类型（输入、输出）未设置

Question

我正在使用此代码创建带有端口的元素（包括将端口移动到顶部和底部的部分）：

    joint.shapes.devs.flowchartProcess = joint.shapes.devs.Model.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {


    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="body-label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({

    // type: 'devs.flowchartProcess',
    attrs: {
        '.body': { stroke: 'black' },
        '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' },
        '.port-body': { r: portRadius, magnet: 'active' },
        '.inPorts .port-body': { stroke: portBodyStroke, fill: inPortFill },
        '.outPorts .port-body': { stroke: portBodyStroke, fill: outPortFill},
        '.inPorts .port-label': { 'font-size': 0},
        '.outPorts .port-label': {'font-size': 0 }
    },
    parentID: none


}, joint.shapes.devs.Model.prototype.defaults),

    getPortAttrs: function(portName, index, total, selector, type) {

        var attrs = {};

        var portClass = 'port' + index;
        var portSelector = selector + '>.' + portClass;
        var portLabelSelector = portSelector + '>.port-label';
        var portBodySelector = portSelector + '>.port-body';

        attrs[portLabelSelector] = { text: portName };
        attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };

        // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
        attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
        // ('ref-dx' => 'ref-dy')
        if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
        //

        return attrs;
    }
}));

joint.shapes.devs.flowchartProcessView = joint.shapes.devs.ModelView;

然后我像这样实例化上面的元素：

            newElement =  new joint.shapes.devs.flowchartProcess ({
            id: id,
            size: { width: width, height: height },
            inPorts: ['in1'],
            outPorts: ['out1'],
            attrs: {
                text: { text: elementLabel }
            }
        });

我遇到的问题是尝试验证在元素端口之间拖动的连接。我根据 API 和教程尝试了这个示例代码：

    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
    // Prevent linking from input ports.
    if (magnetS && magnetS.getAttribute('type') === 'input') return false;
    // Prevent linking from output ports to input ports within one element.
    if (cellViewS === cellViewT) return false;
    // Prevent linking to input ports.
    return magnetT && magnetT.getAttribute('type') === 'input';
}

没有链接正在验证，所以我做了一些挖掘。然后我用这个替换了上面的代码：

    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {

    console.log(cellViewS + " | " + magnetS.getAttribute('type') + " | " + cellViewT + " | " + magnetT.getAttribute('class') + " | " + end + " | " + linkView);

    return true;
}

从那里我看到没有设置“类型”属性，尽管目标端口的“类”很好。在 Chrome 中对这些变量设置监视验证了该属性不存在。

我的印象是使用 devs.Model 库会自动设置所有需要的端口。类型是输入端口还是输出端口我还需要手动设置吗？我是否设法以某种方式弄乱了定义或实例化，从而阻止了正确的属性被定义？

提前非常感谢！

Answer 1

好的，我自己解决了。这一行：

        attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };

没有在磁口模板的主要属性中设置类型，所以这段代码：

    if (magnetS && magnetS.getAttribute('type') === 'input') return false;

正在尝试获取不存在的属性。 'in' 和 'out' 属性存在于不同的地方，但不是磁铁可以找到的地方。可能有更深层次的修复会更优雅，但这种解决方法让我再次滚动：

    attrs: {
    '.body': { stroke: 'black' },
    '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' },
    '.port-body': { r: portRadius, magnet: 'active' },
    '.inPorts .port-body': { stroke: portBodyStroke, fill: inPortFill, type: 'input' }, // add type here
    '.outPorts .port-body': { stroke: portBodyStroke, fill: outPortFill, type: 'output' }, // and here
    '.inPorts .port-label': { 'font-size': 0},
    '.outPorts .port-label': {'font-size': 0 }
},

这将 type 属性定义在适当的位置，以便验证代码找到它，然后一切都很好。