JointJS，定义自定义形状的端口，但它们不会显示在图形上

Question

在JointJS（和Dagre布局库）中实现交互式流程图时遇到一些问题。

我的第一个问题：使用以下代码创建带端口的自定义JointJS元素时，除非我注释掉＆＃34;键入：＆＃34;定义端口未定义或显示在图表上。我注释掉了一行，端口出现了。

function defineElement(id, parentID, type, elementLabel, toolName, timeRequired, userAccessing, IPInfo, notes) {
      this.id = id;
      this.parentID = parentID;
      this.elementType = type;
      this.label = elementLabel;
      this.toolName = toolName;
      this.timeRequired = timeRequired;
      this.userAccessing = userAccessing;
      this.IPInfo = IPInfo;
      this.notes = notes;
    }

    function makeElement(element) {

        var maxLineLength = _.max(element.label.split('\n'), function(l) { return l.length; }).length;

        var letterSize = 8;
        var width = 1.6 * (letterSize * (0.6 * maxLineLength + 1));
        var height = 2 * ((element.label.split('\n').length + 1) * letterSize);

        var newElement;

        joint.shapes.devs.flowchartStart = 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.flowchartStart', ////////// unless I comment this out the ports don't display //////////////


            attrs: {
                '.body': { stroke: 'black', rx: width/20, ry: height*5},
                '.body-label': { 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle' },
                '.port-body': { r: 6, magnet: 'active' },
                '.inPorts .port-body': { stroke: 'gray', fill: 'red' },
                '.outPorts .port-body': { stroke: 'gray', fill: 'green'},
                '.inPorts .port-label': {  },
                '.outPorts .port-label': {  }
            }

        }, 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.flowchartStartView = joint.shapes.devs.ModelView;

                newElement =  new joint.shapes.devs.flowchartStart ({
                    id: element.id,
                    size: { width: width, height: height },
                    outPorts: ['out'],
                    attrs: {
                        text: { text: element.label }
                    }
                });
                newElement.attr('rect/fill', { type: 'linearGradient', stops: [{ offset: '0%', color: '#00f900' },{ offset: '100%', color: '#029b02' }] });
                newElement.attr('rect/fill/attrs', { x1: '0%', y1: '0%', x2: '0%', y2: '100%' });

        newElement.set('parentID', element.parentID);   
        newElement.set('label', element.label); 

        newElement.attr('text', { fill: '#111111' });   
        newElement.attr('rect/filter', { name: 'dropShadow', args: { dx: 1, dy: 3, blur: 1, opacity: 0.75 } });

        return newElement;

    }