JointJS ports: type (input, output) not getting set

Question

I'm creating elements with ports using this code (including the portion to move the ports to top and bottom):

    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;

Then I instantiate the above element like this:

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

The issue I'm having is in trying to validate connections dragged between element ports. I tried this sample code based on the API and tutorials:

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

No links were validating so I did some digging. I then replaced the above code with this:

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

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

    return true;
}

From there I saw that there is no "type" attribute being set, though the "class" for the target port was fine. Setting a watch on those variables in Chrome verified that attribute isn't there.

I was under the impression that using the devs.Model library automatically set up the ports with all the needed stuff. Is whether the type is an input or output port something I still need to set manually? Have I managed to mess up the definition or instantiation somehow, preventing the proper attributes from being defined?

Many thanks in advance!

Answer 1

Okay, so solved it myself. This line:

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

isn't setting type in the main attributes in the magnetic port template so this code:

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

is trying to get an attribute that doesn't exist. The 'in' and 'out' attributes exist in various places but not where the magnetS can find it. There is probably a deeper fix that would be more elegant but this workaround got me rolling again:

    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 }
},

That defines the type attribute in the proper place for the validate code to find it and all is then well.