Skip to content

[BUG] CSS classes are not added to label DOM elements #1621

@tbouffard

Description

@tbouffard

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

For instance, after calling

bpmnVisualization.bpmnElementsRegistry.addCssClasses('task_3', ''additional-info']);

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

Screenshots

Add css class names, labels are not styled.
After doing a zoom or a pan, labels are styled.

bug_label_css_not_applied_except_on_zoom_or_pan

Additional context
The same behavior occurs when calling toggleCssClasses or removeCssClasses.

When updating the mxGraph model, we only update the shape of the bpmn element but not the shape of the label, and we only redraw the shape of the bpmn element.
See https://github.com/process-analytics/bpmn-visualization-js/blob/v0.20.0/src/component/mxgraph/MxGraphCellUpdater.ts#L43
On zoom or panning, the whole model is computed and redrawn, so the label shape contains the right css classes.
So, in MxGraphCellUpdater, we should also set state.text.style. See also https://github.com/jgraph/mxgraph/blob/v4.1.1/javascript/src/js/view/mxCellRenderer.js#L427

Notice that for now, we don't have integration tests that check the DOM elements produced for labels. We should add some to check that the right css classnames.
For the record, specific bpmn-label class is applied to label DOM elements #956 on 2020-12-18.

Metadata

Metadata

Assignees

Labels

BPMN diagram stylingChange the standard rendering: stroke color, thicknessbugSomething isn't working

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions