Interface CssClassesRegistry

Add one or more CSS classes to one or more BPMN elements.

Notes:

• If an ID is passed that does not reference an existing BPMN element, its reference is retained in the registry, but no rendering changes are made.
• This method is intended to set CSS classes on specific elements, e.g. to hide or highlight them. During BPMN diagram rendering, bpmn-visualization sets specific CSS classes to all elements based on their types.
• To style all elements of a given type, use the default classes instead of adding new ones. The classes allow identification of elements of the same `family' and of the same specific type.
• For example, a BPMN Service Task is an Activity and a Task. So it has the bpmn-type-activity and the bpmn-type-task classes. It shares these classes with all types of Tasks.
• It also has the specific bpmn-service-task to distinguish it from a BPMN User Task which has a bpmn-user-task.
• In addition, labels also have the bpmn-label classes.

See the repository providing the examples of the bpmn-visualization TypeScript library for more details.

Example

// Add 'success-path' to BPMN elements with id: flow_1 and flow_5
bpmnVisualization.bpmnElementsRegistry.addCssClasses(['flow_1', 'flow_5'], 'success-path');

// Add 'suspicious-path' and 'additional-info' to BPMN element with id: task_3
bpmnVisualization.bpmnElementsRegistry.addCssClasses('task_3', ['suspicious-path', 'additional-info']);
Copy

See

• removeCssClasses to remove specific CSS classes from a BPMN element.
• removeAllCssClasses to remove all CSS classes from a BPMN element.
• toggleCssClasses to toggle CSS classes on a BPMN element.
• StyleRegistry#updateStyle to directly update the style of BPMN elements.

Remove any CSS classes that were previously added to one or more BPMN elements using the addCssClasses or the toggleCssClasses methods.

Note: If you pass IDs that are not related to existing BPMN elements, they will be ignored and no changes will be made to the rendering.

Example

// Remove all CSS classes from all BPMN elements
bpmnVisualization.bpmnElementsRegistry.removeAllCssClasses();

// Remove all CSS classes from BPMN elements with ID: activity_1 and activity_2
bpmnVisualization.bpmnElementsRegistry.removeAllCssClasses(['activity_1', 'activity_2']);

// Remove all CSS classes from BPMN element with ID: task_3
bpmnVisualization.bpmnElementsRegistry.removeAllCssClasses('task_3');
Copy

See

removeCssClasses to remove specific classes from a BPMN element.

Since

0.34.0

Remove one or more CSS classes that were previously added to one or more BPMN elements using the addCssClasses or the toggleCssClasses methods.

Note: If you pass IDs that are not related to existing BPMN elements, they will be ignored and no changes will be made to the rendering.

Example

// Remove 'highlight' from BPMN elements with ID: activity_1 and activity_2
bpmnVisualization.bpmnElementsRegistry.removeCssClasses(['activity_1', 'activity_2'], 'highlight');

// Remove 'running' and 'additional-info' from BPMN element with ID: task_3
bpmnVisualization.bpmnElementsRegistry.removeCssClasses('task_3', ['running', 'additional-info']);
Copy

See

removeAllCssClasses to remove all CSS classes from a BPMN element.

Toggle one or more CSS classes on one or more BPMN elements.

Note: If an ID is passed that does not reference an existing BPMN element, its reference is retained in the registry, but no rendering changes are made.

Example

// Toggle 'highlight' for BPMN elements with ID: activity_1 and activity_2
bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(['activity_1', 'activity_2'], 'highlight');

// Toggle 'running' and 'additional-info' for BPMN element with ID: task_3
bpmnVisualization.bpmnElementsRegistry.toggleCssClasses('task_3', ['running', 'additional-info']);
Copy

See

• removeCssClasses to remove specific CSS classes from a BPMN element.
• removeAllCssClasses to remove all CSS classes from a BPMN element.
• addCssClasses to add CSS classes to a BPMN element.