How to highlight a specific element

Developers
1

Cheers together,

i am a bpmn.io noop and do some experimental stuff with the bpmn-navigated-viewer.js. My wish is to highlight a specific element. Like the screenshot below.

What is the correct way to realize stuff like this. Unfortunately i wasn’t able to find some example project in your github.

My simple approach is:

var canvasElement = angular.element('#bpmn g[data-element-id="foo"] g rect');
if (canvasElement) {
  canvasElement.attr('style', 'stroke: red; stroke-width: 4px');
}
2

Hi,

That kind of stuff is exactly what we expect people to do.

Did you have a look at this example https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays

Does that answer your question? If not, let me know.

Cheers
Robert

3

This might also serve as an example (not being a developer, I am not sure if I picked the right code)

https://github.com/camunda/camunda-tasklist-ui/blob/master/client/scripts/task/plugins/detail/directives/cam-tasklist-task-diagram.js

In our tasklist we are doing the exact same thing as you ask for.

4

yes, this is very helpful to getting started with the BPMNViewer API. Is there any API documention like Angular doc in the web?

It’s important to know the following:

Access the overlays service via bpmnViewer.get('overlays') and add overlays to elements by id using the Overlays#add method.

Usage summary

5

yes!!! your second example of camunda tasklist to add some class definitions via canvas.addMarker(taskDefinitionKey, 'highlight'); is also very helpful.

6

currently our examples serve as documentation.

we will add more structured docs at a later stage for sure. currently we are focusing on more BPMN support along with clean code and tests.

Cheers
Robert