I forgot to add to the initial post that I had also considered the possibility of decorating a connection with a text as suggested in How to put label in a custom element - #2 by Niklas_Kiefer, but it didn’t work.
In particular, I tested the following function to draw a custom connection
this.drawCustomConnection = function( visual, element ) {
let colorFrame = (TemporalAttributesValidator.isRelativeConstraintValid(element)) ? COLOR_GREEN : COLOR_RED;
let minD = Number(element.businessObject.minDuration || '');
let maxD = Number(element.businessObject.maxDuration || Infinity);
let propositionalLabel = element.businessObject.propositionalLabel || '';
let attrs = computeStyle(attrs, {
stroke: colorFrame,
strokeWidth: 2,
strokeDasharray: '20,5,5,5,5,5',
strokeLinecap: 'square',
// strokeLinecap:'round',
markerEnd: marker('sequenceflow-end', 'white', colorFrame),
});
// add the line representing the connection
let connectionSVGElement = svgAppend(visual, createLine(element.waypoints, attrs));
//add a 'label' to show the temporal range '[minD, maxD]', propositionalLabel
// The next code adds the text,
// but it is displayed only when the connection is being created
// once it is created it disappears
// https://forum.bpmn.io/t/how-to-put-label-in-a-custom-element/3287/2
let {x :refX, y: refY} = getExternalLabelMid(element);
let text = textRenderer.createText("["+minD + ", " + maxD+"]"); // (label || '', options);
svgAttr(text, {
transform: "translate(" + refX + ", " + refY + ")"
});
svgAppend(connectionSVGElement, text);
return connectionSVGElement;
}
As noted in the source comment, the ‘label’ is created and shown only a connection is in editing mode (initially when it is created using the mouse to connect the source element to the destination one, then when it is modified by moving it or adding a point to it).
Then, the ‘label’ disappears.
Moreover, I would prefer to work at the bpmn-js level: decorate an element with a label containing a constant/dynamic text.