Setting Color via addMarker on Sequence Flows does not color Arrowhead

[yT0n1]

Describe the bug

When styling a connection via addMarker (as described here), the arrowhead is not colored.

Steps to reproduce

1. open https://github.com/yT0n1/bpmn-js-examples/blob/332480cb2334736b44e17ed7e91c32ae27d31794/colors/index.html#L96 in browser
2. Look at the first sequence flow after Order Received message start event. The arrowhead is not colored green.

Expected behavior

I would expect addMarker to work also on sequence flows. Alternatively, I would wish for a convenience function for sequence flows to achieve the same behavior.

Environment

• OS: MacOs 14.5

Additional context

Slack discussion: https://camunda.slack.com/archives/C032H77434N/p1716470720927639

[marstamm]

Root Cause

Arrow heads (and some other SVG elements) are rendered using marker svg attributes, in this case marked-end.

All markers are shared and referenced by ID. The definitions are in the root of the SVG, not in the djs-visual of the element we are adding a marker to. Because of this, the Color can not be changed with SVG

Solution Sketch

To allow styling of connections with markers, instead of having a shared marker for all, we could create a marker for every connection and add it in the djs-visual subtree:

<g class="djs-visual">
  <defs>
    <marker id="uniqueID" >
       <path /*...*/ ></path>
    </marker>
  </defs>
  <path style="marker-end: url(&quot;#uniqueID&quot;);" /*...*/></path>
</g>

This way, css will also affect the marker:

.marked .djs-visual path {
    stroke: blue !important;
    fill: blue !important;
}

This could have performance implications, since we are adding more elements to the SVG, but I do not expect this to have a huge impact, as we are still rendering the same amount of markers

[philippfromme]

@marstamm Thanks for the analysis. The one global <defs> with reused markers approach was used because initially you couldn't change colors so there'd be exactly one marker for each connection type. When adding colors we slightly modified it to one marker for each connection type and color. Happy to see this changing.

[marstamm]

I'd like to look into this in Spring Cleaning and evaluate if this can be achieved in a timely manner