Programmatically de-select

[joey-kwl]

Is there a way to remove the selection border using an external button?

When I click on an activity I see this border:

I have a button outside the BPMN canvas that I want to use to remove the blue selection. I’m using the NavigatedViewer component

[barmac]

This should help:

const selection = modeler.get('selection');
selection.select([]);

[joey-kwl]

That does indeed help.

Which type definition should I use? I’m importing bpmn-js/lib/NavigatedViewer but I get Property 'select' does not exist on type 'NavigatedViewer

const selection = modeler.get("selection") as BpmnViewer
selection.select([])

[barmac]

Selection is a diagram-js module used in bpmn-js: https://github.com/bpmn-io/diagram-js/blob/develop/lib/features/selection/Selection.js

I assume this should work in typescript:

import type Selection from 'diagram-js/lib/features/selection/Selection';

const selection = modeler.get('selection') as Selection;
selection.select([]);

[nikku]

There exists a couple of alternatives here along with Programmatically de-select - #4 by barmac.

JavaScript code intelligence

/* @typedef { import('diagram-js/lib/features/selection/Selection').default } Selection */

/* @type { Selection } */
const selection = modeler.get('selection');

TypeScript code intelligence

import type Selection from 'diagram-js/lib/features/selection/Selection';

const selection = modeler.get<Selection>('selection');
selection.select([]);