javascript - ポート付きの円オブジェクトを作成する

Question

ポートで円を作成しようとしています。ワークフローを実装しています。ポートで開始円と終了円を作成する必要がありますが、今まで成功していません。

円を作成できますが、ポートがないため、メソッド getPortAttrs が呼び出されます。

joint.shapes.devs.CircleModel = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
    markup: '<g class="rotatable"><g class="scalable"><circle class="body"/> </g> <g class="inPorts"/> <g class="outPorts"/> </g>',
    portMarkup: '<g class="port<%= id %>"> <circle class="port-body"/> <text class="port-label"/> </g>',
    defaults: joint.util.deepSupplement({
        type: 'devs.CircleModel',
        size: { width: 20, height: 20 },
        inPorts: [],
        outPorts: [],
        attrs: {
            '.': { magnet: true },
            '.body': {
                transform: 'translate(10, 10)',
                r: 10,
                'stroke-width': 2,
                stroke: 'green',
                fill: 'green'
            },
            '.port-body': {
                r: 5,
                magnet: true,
                stroke: 'black'
            },
            '.inPorts .port-label': { dy:-30, x: 4 },
            '.outPorts .port-label':{ dy: 15, x: 4 }
        }
    }, joint.dia.Element.prototype.defaults),

    getPortAttrs: function (portName, index, total, selector, type) {
        var attrs = {};
        var portClass = 'port' + index;
        var portSelector = selector + '>.' + portClass;
        var portTextSelector = portSelector + '>.port-label';
        var portCircleSelector = portSelector + '>.port-body';
        attrs[portTextSelector] = { text: portName };
        attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type) , type: type } };
        attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
        if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
        return attrs;
    }
}));