Adding a shape to a connection

Developers
1

Hi all,

I’m new to bpmn-js and I’m experimenting on customization.
On my Angular project I’m trying to put a shape on top of a connection, so I’ve started from your example. Here you put a red rectangle on top of other existing rectangles from the BPMN file.

image
I managed to achieve that, but what I actually want to accomplish is to draw that red rectangle on top of the arrows, if the corresponding sequenceFlow on the BPMN has a conditionExpression. Then I want to print that condition as a label on the rectangle.

Unfortunately, I can’t even manage to put the rectangle on the arrow.
This is what I’ve tried:

override drawConnection(parentNode: SVGElement, element: Connection): SVGElement {
  const connection = this.bpmnRenderer.drawConnection(parentNode, element);
  const rect = drawRect(parentNode, 30, 20, TASK_BORDER_RADIUS, '#cc0000')

  svgAttr(rect, {
    transform: 'translate(185, 178)'
  });

  return connection;
}

This does not put the rectangle on top of the arrow, so I tried to translate it according to the arrow’s path d directions, but I was not able to calculate the translation properly (the 185 and 178 are just examples).

Is there a better way, through the library, to achieve that? Without the translation the red rectangle gets positioned at 0, 0, even though it is in the same djs-group as its arrow.