bpmn-visualization API Documentation
    Preparing search index...

    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

    Index

    Methods

    addCssClasses removeAllCssClasses removeCssClasses toggleCssClasses

    Methods

    • 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

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

    • 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

      // 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 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

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

    • 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

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

    Settings

    Member Visibility

    On This Page

    Methods