Javascript JointJS无法连接端口,表示;getPortSelector";不是功能
我在连接JointJS中自定义元素上的端口时遇到问题。我使用以下代码定义元素:Javascript JointJS无法连接端口,表示;getPortSelector";不是功能,javascript,jointjs,dagre,Javascript,Jointjs,Dagre,我在连接JointJS中自定义元素上的端口时遇到问题。我使用以下代码定义元素: function defineElement(id, parentID, type, elementLabel, toolName, timeRequired, userAccessing, IPInfo, notes) { this.id = id; this.parentID = parentID; this.elementType = type; this.label = elementLabe
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.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: 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.flowchartProcessView = joint.shapes.devs.ModelView;
newElement = new joint.shapes.devs.flowchartProcess ({
id: element.id,
size: { width: width, height: height },
inPorts: ['in'],
outPorts: ['out'],
attrs: {
text: { text: element.label }
}
});
newElement.attr('rect/fill', { type: 'linearGradient', stops: [{ offset: '0%', color: '#00fdff' },{ offset: '100%', color: '#049a9b' }] });
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;
}
function makeLink(parent, child) {
var thislink = new joint.shapes.devs.Link({
source: { id: parent.id, selector: parent.getPortSelector('out') },
target: { id: child.id, selector: child.getPortSelector('in') },
attrs: { '.marker-target': { d: 'M 8 0 L 0 4 L 8 8 z' } },
smooth: false
});
thislink.set('router', { name: 'metro' });
return thislink;
}
但是我得到一个错误,说“getPortSelector”不是一个函数。有什么想法吗?非常感谢 因此,我添加了一个不必要的实例化层,使方法的范围不符合预期,从而给自己造成了问题。明确的步骤是不需要的,是为了把水弄脏
我简化了元素实例化代码,现在一切都好了。您可以使用
端口
而不是选择器
属性吗?i、 e.源:{id:parent.id,端口:'out'},目标:{id:child.id,端口:'in'}