How to add a second label to a connection

Developers
6

Found the reason of the problem!

With diagram-js 11.3.0 and bpmn-js v11.0.5, the preview feature does not allow attaching any SVG element different from polyLine to a bpmn-js connection.

In details

The preview feature allows one to see how a connection is rendered during the creation or modification.
All SVG elements specified in the method CustomRenderer.prototype.drawConnection() are rendered correctly.
Let us assume that CustomRenderer.prototype.drawConnection() adds two SVG polylines and one SVG text.

Once, the user releases the mouse, the system (I was not able to catch which method) sets the following SVG elements inside the main SVG element of the HTML document:

  1. an SVG g element with CSS djs-element djs-connection corresponding to the considered connection. (I call this g main).
  2. inside to the main g, another g element containing all the SVG element created in CustomRenderer.prototype.drawConnection(). This last g is not rendered because it has CSS djs-connection djs-visual that prevents the rendering.
  3. inside to the main g, all the SVG polyline element present in g element of point 2.

Therefore, the SVG text created in CustomRenderer.prototype.drawConnection() is present, but it is not copied in the main g and, therefore, not rendered.

Roberto