Interface CssClassesRegistry

interface CssClassesRegistry {
    addCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void;
    removeAllCssClasses(bpmnElementIds?: string | string[]): void;
    removeCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void;
    toggleCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void;
}

Implemented by

Methods

addCssClasses removeAllCssClasses removeCssClasses toggleCssClasses

Methods

addCssClasses

  • addCssClasses(bpmnElementIds, classNames): void

  • 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.

    Parameters

    • bpmnElementIds: string | string[]

      The BPMN ID of the element(s) to add the CSS classes to. Passing a nullish parameter or an empty array has no effect.

    • classNames: string | string[]

      The name of the class(es) to add to the BPMN element(s).

    Returns void

    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']);

    See

removeAllCssClasses

  • removeAllCssClasses(bpmnElementIds?): void

  • 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.

    Parameters

    • OptionalbpmnElementIds: 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.

    Returns void

    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');

    See

    removeCssClasses to remove specific classes from a BPMN element.

    Since

    0.34.0

removeCssClasses

  • removeCssClasses(bpmnElementIds, classNames): void

  • 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.

    Parameters

    • bpmnElementIds: string | string[]

      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.

    • classNames: string | string[]

      The name of the class(es) to remove from the BPMN element(s).

    Returns void

    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']);

    See

    removeAllCssClasses to remove all CSS classes from a BPMN element.

toggleCssClasses

  • toggleCssClasses(bpmnElementIds, classNames): void

  • 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.

    Parameters

    • bpmnElementIds: string | string[]

      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.

    • classNames: string | string[]

      The name of the class(es) to toggle on the BPMN element(s).

    Returns void

    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']);

    See

Settings

Member Visibility

On This Page

Methods