Interface OverlaysRegistry

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

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.

Example

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