Я создаю элементы с портами, используя этот код (в том числе части, чтобы переместить порты сверху и снизу):JointJS порты: тип (вход, выход) не получает набор
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;
Затем я экземпляр выше такого элемента:
newElement = new joint.shapes.devs.flowchartProcess ({
id: id,
size: { width: width, height: height },
inPorts: ['in1'],
outPorts: ['out1'],
attrs: {
text: { text: elementLabel }
}
});
Проблема, с которой я столкнулась, заключается в попытке проверить соединения, перетаскиваемые между портами элементов. Я попробовал этот пример кода на основе API и учебные пособия:
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';
}
Ссылки не были проверки, так что я сделал некоторые копали. Затем я заменил код выше с этим:
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
console.log(cellViewS + " | " + magnetS.getAttribute('type') + " | " + cellViewT + " | " + magnetT.getAttribute('class') + " | " + end + " | " + linkView);
return true;
}
Оттуда я видел, что нет атрибута «типа» не быть установлен, если «класс» для целевого порта был хорошо. Установка часов на эти переменные в Chrome подтвердила, что атрибута нет.
У меня создалось впечатление, что с помощью библиотеки devs.Model автоматически настраиваются порты со всеми необходимыми материалами. Является ли тип входным или выходным портом чем-то, что мне еще нужно установить вручную? Мне удалось каким-то образом испортить определение или инстанцирование, не позволяя определить правильные атрибуты?
Большое спасибо заранее!