Hi to all,
I am trying to extend the base model of bpmn io with custom elements, but I have problems to define a custom connection. Specifically I am trying to add a connection whose shape is a line with a red cross, like this:
I have tried to add the red cross in my custom renderer with two different approaches. The first one as a marker with static coordinates in svg format in the attributes of createLine (function from diagram-js) in my custom render:
The code of my connection from my custom render is:
‘custom:negatedAssignment’: (p, element) => {
var attrs = {
strokeLinejoin: 'round',
markerEnd: marker('negated', 'white', element.color),
stroke: element.color || BLACK,
strokeWidth: 1.5,
};
return svgAppend(p, createLine(element.waypoints, attrs));
},
Where marker function is:
function marker(type, fill, stroke) {
var id = type + '-' + colorEscape(fill) + '-' + colorEscape(stroke) + '-' + rendererId;
if (!markers[id]) {
createMarker(id, type, fill, stroke);
}
return 'url(#' + id + ')';
}
and createMarker function is:
function createMarker(id, type, fill, stroke) {
if(type === "negated"){
var dobleFlecha=svgCreate('path');
var zero=parseInt('0');
var ten=parseInt('10');
var dpath='M '+zero+' '+zero+' L '+ten+' '+ten+' M '+ten+' '+zero+' L '+zero+' '+ ten
svgAttr(dobleFlecha,{d:dpath})
addMarker(id, {
element: dobleFlecha,
attrs: {
stroke: 'red'
},
ref: {x:90 , y:5},
scale: 1.0
})
}
}
With this code I can generate partly that connection, because if I move part of the line, the red cross will be out of the line, since his position is static:
I have tried to update the coordinates in the variable ‘dpath’ from createMarker but it does not work. Is this a good approach?, How could I update the marker position?.
Secondly I have tried to draw my connection replacing createLine with a custom function which bases on createLine. With this function I tried to create another line to cross out a line but it generated them together:
function drawCrossedLine(points,attrs){
var line = svgCreate('polyline');
var result=toSVGPoints(points)
result +=(parseInt(points[0].x)).toString()+ ',' + (parseInt(points[0].y)-30).toString()+ ','+(parseInt(points[0].x+50)).toString()+ ',' + (parseInt(points[0].y+30)).toString();
svgAttr(line, {points: result });
if (attrs) {
svgAttr(line, attrs);
}
return line
}
Is this approach better?,How could I draw three lines separately with some relationship between them to create my negated connection?.
Thanks in advance for your work and your attention.