Options
All
  • Public
  • Public/Protected
  • All
Menu

Class BpmnElementsRegistry

experimental

subject to change, feedback welcome.

BpmnElementRegistry is a public API that permits to find the BpmnElements present in the diagram. How to access it:

// 1. Initialize the BpmnVisualization.
const bpmnVisualization = new bpmnvisu.BpmnVisualization(document.getElementById('bpmn-container'));
// 2. Get diagram and load it.
const bpmn = 'BPMN diagram string - whether coming from bpmn.xml file or some API call';
bpmnVisualization.load(bpmn);
// 3. Access registry directly from bpmnVisualization.
bpmnVisualization.bpmnElementsRegistry

Hierarchy

  • BpmnElementsRegistry

Index

Methods

Methods

addCssClasses

  • addCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void

  • Add one/several CSS class(es) to one/several BPMN element(s).

    Notice that if you pass ids that are not related to existing BPMN elements, their reference will be kept within the registry but nothing happens on the rendering side.

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

    Parameters

    • bpmnElementIds: string | string[]

      The BPMN id of the element(s) where to add the CSS classes

    • classNames: string | string[]

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

    Returns void

addOverlays

  • addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void

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

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

    Parameters

    • bpmnElementId: string

      The BPMN id of the element where to add the overlays

    • overlays: Overlay | Overlay[]

      The overlays to add to the BPMN element

    Returns void

getElementsByIds

  • getElementsByIds(bpmnElementIds: string | string[]): BpmnElement[]

  • Get all elements by ids.

    ...
// Find all elements by specified id or ids
const bpmnElementsSet1 = bpmnVisualization.bpmnElementsRegistry.getElementsByIds('userTask_1');
const bpmnElementsSet2 = bpmnVisualization.bpmnElementsRegistry.getElementsByIds(['startEvent_3', 'userTask_2']);
// now you can do whatever you want with the elements
...

    Parameters

    • bpmnElementIds: string | string[]

    Returns BpmnElement[]

getElementsByKinds

  • Get all elements by kinds.

    ...
// Find all elements by desired type or types
const bpmnTaskElements = bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(bpmnvisu.ShapeBpmnElementKind.TASK);
const bpmnEndEventAndPoolElements = bpmnVisualization.bpmnElementsRegistry.getElementsByKinds([bpmnvisu.ShapeBpmnElementKind.EVENT_END, bpmnvisu.ShapeBpmnElementKind.POOL]);
// now you can do whatever you want with the elements
...

    Parameters

    Returns BpmnElement[]

removeAllOverlays

  • removeAllOverlays(bpmnElementId: string): void

  • Remove all overlays of a BPMN element.

    WARNING: could be renamed when adding support for removal of one or several specific overlays.

    example
    //  all overlays of the BPMN element with id: activity_1
bpmnVisualization.bpmnElementsRegistry.removeAllOverlays('activity_1');

    Parameters

    • bpmnElementId: string

      The BPMN id of the element where to remove the overlays

    Returns void

removeCssClasses

  • removeCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void

  • Remove one/several CSS class(es) from one/several BPMN element(s).

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

    Parameters

    • bpmnElementIds: string | string[]

      The BPMN id of the element(s) where to remove the CSS classes

    • classNames: string | string[]

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

    Returns void

toggleCssClasses

  • toggleCssClasses(bpmnElementIds: string | string[], classNames: string | string[]): void

  • Toggle one/several CSS class(es) for one/several BPMN element(s). Notice that if you pass ids that are not related to existing BPMN elements, their reference will be kept within the registry but nothing happens on the rendering side.

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

    Parameters

    • bpmnElementIds: string | string[]

      The BPMN id of the element(s) where to remove the CSS classes

    • classNames: string | string[]

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

    Returns void

Generated using TypeDoc