Skip to content

Selection

You can use the editor.selection object to select or change the selection of shapes and handle related events.

Get selected shapes

In order to get a set of selected shapes in the editor:

const selected = editor.selection.getShapes();

You can also test a shape is selected or not as below:

const selected = editor.selection.isSelected(shape);

Select shapes

You can use various selection methods to select/deselect shapes or area.

// select an array of shapes
editor.selection.select(shapes);
// additional select an array of shapes
editor.selection.select(shapes, false);
// select shapes overlap the given area in the current page
editor.selection.selectArea(0, 0, 100, 100);
// select all shapes in the current page
editor.selection.selectAll();

Listen to the changes of selection

You can listen to the changes of selection through the both React component and editor object.

<DGMEditor
onSelectionChange={(shapes) => {
console.log('selection changed', shapes);
}}/>
editor.selection.onChange.addListener((shapes) => {
console.log('selection changed', shapes);
});