我正在尝试使用端口创建一个圆圈,我正在实施一个工作流程,我需要创建一个带有端口的开始圆圈和一个结束圆圈,但直到现在都没有成功。
我可以创建圆圈但没有端口,调用 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;
}
}));