0

If the inport and outports assigned with a same name, it will not work! i.e. This will not work:

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

Here is my code:

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

The code in the jsfiddle is the working version, because the inport and outport have different name. if you set the name to the same name, it will not work anymore.

Is there any solution for this? This shouldn't happen.

CodingTT
  • 1,125
  • 3
  • 14
  • 23

1 Answers1

0

Try to update implementation of devs.Model as follows 

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;
    }
}));

the only change is way how id is generated, in getPortAttrs - name is not used as an id.

lades
  • 81
  • 2