Experimental Add one or more CSS classes to one or more BPMN elements.
Notes:
bpmn-visualization sets specific CSS classes to all elements based on their types.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.bpmn-service-task to distinguish it from a BPMN User Task which has a bpmn-user-task.bpmn-label classes.See the repository providing the examples of the bpmn-visualization TypeScript library for more details.
The BPMN ID of the element(s) to add the CSS classes to. Passing a nullish parameter or an empty array has no effect.
The name of the class(es) to add to the BPMN element(s).
// 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']);
Add one/several overlays to a BPMN element.
Notice that if you pass an id that is not related to an existing BPMN element, nothing happens on the rendering side.
// Add an overlay to BPMN elements with id 'task_1'
bpmnVisualization.bpmnElementsRegistry.addOverlays('task_1', {
position: 'top-left',
label: '40',
style: {
font: { color: 'Chartreuse', size: 8 },
fill: { color: 'Pink', opacity: 50 },
stroke: { color: 'DarkSeaGreen', width: 2 }
}
});
// Add several overlays to BPMN element with id 'task_3'
bpmnVisualization.bpmnElementsRegistry.addOverlays('task_3', [
{
position: 'bottom-right',
label: '110',
style: {
font: { color: '#663399', size: 8 },
fill: { color: '#FFDAB9', opacity: 50 },
stroke: { color: 'DarkSeaGreen', width: 2 }
}
},
{
position: 'top-left',
label: '40',
style: {
font: { color: 'MidnightBlue', size: 30 },
fill: { color: 'Aquamarine', opacity: 70 },
stroke: { color: '#4B0082', width: 1 }
}
}
]);
Get all elements by ids. The returned array contains elements in the order of the bpmnElementIds parameter.
Not found elements are not returned as undefined in the array, so the returned array contains at most as many elements as the bpmnElementIds parameter.
...
// Find all elements by specified id or ids
const bpmnElements1 = bpmnVisualization.bpmnElementsRegistry.getElementsByIds('userTask_1');
const bpmnElements2 = bpmnVisualization.bpmnElementsRegistry.getElementsByIds(['startEvent_3', 'userTask_2']);
// now you can do whatever you want with the elements
...
WARNING: this method is not designed to accept a large amount of ids. It does DOM lookup to retrieve the HTML elements relative to the BPMN elements. Attempts to retrieve too many elements, especially on large BPMN diagram, may lead to performance issues.
If you only need to retrieve the BPMN model data, use getModelElementsByIds instead.
The BPMN ID of the element(s) to retrieve.
Get all elements by kinds.
...
// Find all elements by desired type or types
const bpmnTaskElements = bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(ShapeBpmnElementKind.TASK);
const bpmnEndEventAndPoolElements = bpmnVisualization.bpmnElementsRegistry.getElementsByKinds([ShapeBpmnElementKind.EVENT_END, ShapeBpmnElementKind.POOL]);
// now you can do whatever you want with the elements
...
If you only need to retrieve the BPMN model data, use getModelElementsByKinds instead.
WARNING: this method is not designed to accept a large amount of types. It does DOM lookup to retrieve the HTML elements relative to the BPMN elements. Attempts to retrieve too many elements, especially on large BPMN diagrams, may lead to performance issues.
The BPMN kind of the element(s) to retrieve.
Get all model elements in the form of BpmnSemantic objects corresponding to the identifiers supplied. The returned array contains elements in the order of the bpmnElementIds parameter.
Not found elements are not returned as undefined in the array, so the returned array contains at most as many elements as the bpmnElementIds parameter.
...
// Find all elements by specified id or ids
const bpmnElements1 = bpmnVisualization.bpmnElementsRegistry.getModelElementsByIds('userTask_1');
const bpmnElements2 = bpmnVisualization.bpmnElementsRegistry.getModelElementsByIds(['startEvent_3', 'userTask_2']);
// now you can do whatever you want with the elements
...
If you also need to retrieve the related DOM elements and more information, use getElementsByIds instead.
The BPMN ID of the element(s) to retrieve.
0.39.0
Get all model elements in the form of BpmnSemantic objects corresponding to the BPMN kinds supplied
...
// Find all elements by desired kind or kinds
const bpmnElements1 = bpmnVisualization.bpmnElementsRegistry.getModelElementsByKinds(ShapeBpmnElementKind.TASK);
const bpmnElements2 = bpmnVisualization.bpmnElementsRegistry.getModelElementsByKinds([ShapeBpmnElementKind.EVENT_END, ShapeBpmnElementKind.POOL]);
// now you can do whatever you want with the elements
...
If you also need to retrieve the related DOM elements and more information, use getElementsByKinds instead.
The BPMN kind of the element(s) to retrieve.
0.39.0
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.
Optional bpmnElementIds: string | string[]The BPMN ID of the element(s) from which to remove all CSS classes. When passing a nullish parameter, all CSS classes associated with all BPMN elements will be removed. Passing an empty array has no effect.
// 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');
removeCssClasses to remove specific classes from a BPMN element.
0.34.0
Remove all overlays of a BPMN element.
Notice that if you pass an id that is not related to an existing BPMN element, nothing happens on the rendering side.
WARNING: could be renamed when adding support for removal of one or several specific overlays.
The BPMN id of the element where to remove the overlays
// all overlays of the BPMN element with id: activity_1
bpmnVisualization.bpmnElementsRegistry.removeAllOverlays('activity_1');
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.
The BPMN ID of the element(s) from which to remove the CSS classes. Passing a nullish parameter or an empty array has no effect.
The name of the class(es) to remove from the BPMN element(s).
// 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']);
removeAllCssClasses to remove all CSS classes from a BPMN element.
Reset the style that were previously updated to one or more BPMN elements using the updateStyle method.
Optional bpmnElementIds: string | string[]The BPMN ID of the element(s) whose style must be reset. When passing a nullish parameter, the style of all BPMN elements will be reset. Passing an empty array has no effect.
bpmnVisualization.bpmnElementsRegistry.resetStyle('activity_1');
Notes:
bpmn-visualization applies style properties
to all elements according to their types.
So if you want to style all elements of a certain type, change the default configuration of the styles instead of updating the element afterward. See the repository providing the
examples of the bpmn-visualization TypeScript library for more details.0.37.0
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.
The BPMN ID of the element(s) on which to toggle the CSS classes. Passing a nullish parameter or an empty array has no effect.
The name of the class(es) to toggle on the BPMN element(s).
// 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']);
Update the style of one or several BPMN elements.
The BPMN ID of the element(s) whose style must be updated.
The style properties to update.
bpmnVisualization.bpmnElementsRegistry.updateStyle('activity_1', {
stroke: {
color: 'red',
},
});
Notes:
bpmn-visualization applies style properties
to all elements according to their types.
So if you want to style all elements of a certain type, change the default configuration of the styles instead of updating the element afterwards. See the repository providing the
examples of the bpmn-visualization TypeScript library for more details.0.33.0
BpmnElementRegistryis a public API that permits to find the BpmnElements present in the diagram. How to access it:WARN: subject to change, feedback welcome.