[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.
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).