process-analytics/bpmn-visualization-js

[BUG] CSS classes are not added to message flow icon DOM element

tbouffard opened this issue · 0 comments

Describe the bug
When adding a css class to a message flow, the css attribute of the message flow icon DOM element is not updated with the new class.

For instance, after calling

bpmnVisualization.bpmnElementsRegistry.addCssClasses('message_flow_id_1', ''highlight-path']);

To Reproduce
bpmn-visualization: 0.20.0
See process-analytics/bpmn-visualization-examples#264

Screenshots
A Css class is applied to the message flow, but not to the message flow icon.

bug_unable_style_msg_flow_icon

Additional context
When a message flow has an icon, we add a dedicated mxCell for the icon in the mxGraph model: https://github.com/process-analytics/bpmn-visualization-js/blob/v0.20.0/src/component/mxgraph/BpmnRenderer.ts#L123
When we add css classes, we only add them to the mxCell related to the message flow (more generally, to the related bpmn element), but we miss to add them to the mxCell of the icon: https://github.com/process-analytics/bpmn-visualization-js/blob/v0.20.0/src/component/mxgraph/MxGraphCellUpdater.ts#L35

The produced svg group for the icon is something like:

<g style="visibility: visible;" transform="translate(0.5,0.5)"
  class="bpmn-shape=bpmn.message-flow-icon" data-bpmn-id="messageFlowIcon_of__6-638">
...
<g>

We see that the base css class is wrong. We have bpmn-shape=bpmn.message-flow-icon and we should have bpmn-message-flow-icon

We should add an integration test for message flow icons when we are checking the generated svg (we don't have tests for message flows for now).