Add an image on notation

Developers
1

Hi Team,

I want to add an image on notation like Start, Stop and Pause.

image

My requirement is to select a notation and then pause or stop it. When pause or stop it a pause or stop image is to be added to the selected notation.

If i add this logic on custom renderer that will be applicable to all the notations types or all notation of one type. Can you please provide me any inputs on this please.

Thanks
Vijay

2

So you want to add buttons to the modeler or to individual elements?

3

Hi,

Thanks for the response.

Buttons are outside the canvas and nothing to do with modeler.

When i click Pause button a pause icon should be added to task as you can see in the below image.

image

Thanks
Vijay

4

Have you considered using overlays? https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays

5

Thank you it worked.

 const overlays = this.bpmnViewer.get('overlays');
    overlays.add(this.selectedProcess.element, {
      position: {
        top: 0,
        left: -18
      },
      html: `<img src="./assets/icons/pause.png" style="width: 40px; height: 40px;" alt="Pause">`
    });