具有相同名称端口名称的 JointJS 不起作用答案

【问题标题】：JointJS with same name port name doesn't work具有相同名称端口名称的 JointJS 不起作用
【发布时间】：2016-06-17 19:01:22
【问题描述】：

如果inport 和outports 分配了同一个名字，那就不行了！ IE。这不起作用：

inPorts: ['aaa', 'bbb'],
outPorts: ['aaa', 'bbb']

这是我的代码：

http://jsfiddle.net/tianxu0836/L2f73cbf/50/

jsfiddle 中的代码是工作版本，因为 inport 和 outport 有不同的名称。如果您将名称设置为相同的名称，它将不再起作用。

有什么解决办法吗？这不应该发生。

【问题讨论】：

标签： javascript diagram jointjs

【解决方案1】：

尝试更新devs.Model的实现如下

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

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="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.Model',
        size: { width: 1, height: 1 },
        inPorts: [],
        outPorts: [],
        attrs: {
            '.': { magnet: false },
            text: {
                'pointer-events': 'none'
            },
            '.body': {
                width: 150,
                height: 250,
                stroke: '#000'
            },
            '.port-body': {
                r: 10,
                magnet: true,
                stroke: '#000'
            },
            '.label': {
                text: 'Model',
                'ref-x': .5,
                'ref-y': 10,
                ref: '.body',
                'text-anchor': 'middle',
                fill: '#000'
            },
            '.inPorts .port-label': {
                x: -15,
                dy: 4,
                'text-anchor': 'end',
                fill: '#000'
            },
            '.outPorts .port-label': {
                x: 15,
                dy: 4,
                fill: '#000'
            }
        }
    }, joint.shapes.basic.Generic.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),
                id: _.uniqueId(type),
                type: type
            }
        };

        attrs[portSelector] = {
            ref: '.body',
            'ref-y': (index + 0.5) * (1 / total)
        };

        if (selector === '.outPorts') {
            attrs[portSelector]['ref-dx'] = 0;
        }

        return attrs;
    }
}));

唯一的变化是 id 的生成方式，getPortAttrs - name 不用作 id。

【讨论】：