Add multi-object canvas selection

changelog.d/20260826_000000_glebpotapov_multi_object_selection.md

@@ -0,0 +1,5 @@
+### Added
+
+- Added multi-object selection in the 2D annotation workspace, including
+  bounding-box selection, batch operations, and undo and redo support
+  (<https://github.com/cvat-ai/cvat/pull/11084>)

cvat-canvas/src/scss/canvas.scss

@@ -82,14 +82,84 @@ polyline.cvat_shape_drawing_opacity {
     fill: #fcfbfc;
 }
 
+.cvat_canvas_selected_objects_box {
+    fill: none;
+    stroke: #1f1f1f;
+    stroke-opacity: 1;
+    pointer-events: all;
+    cursor: move;
+}
+
+.cvat_canvas_selected_objects_box_dragging {
+    opacity: 0;
+}
+
+.cvat_canvas_shape_selected_object {
+    fill-opacity: var(--cvat-selection-opacity) !important;
+}
+
+image.cvat_canvas_shape_selected_object {
+    opacity: var(--cvat-selection-mask-opacity) !important;
+}
+
+polyline.cvat_canvas_shape_selected_object {
+    fill-opacity: 0 !important;
+}
+
+.cvat_canvas_selected_objects_label {
+    position: absolute;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 2px 4px 2px 8px;
+    color: white;
+    background: rgba(31, 31, 31, 88%);
+    border: 1px solid rgba(255, 255, 255, 35%);
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 45%));
+    pointer-events: none;
+}
+
+.cvat_canvas_selected_objects_label_title {
+    white-space: nowrap;
+}
+
+.cvat_canvas_selected_objects_label_dragging {
+    visibility: hidden;
+}
+
+.cvat_canvas_selected_objects_menu_button {
+    width: 20px;
+    height: 20px;
+    margin-left: 6px;
+    padding: 0 0 4px;
+    color: white;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 20px;
+    pointer-events: auto;
+
+    &:hover,
+    &:focus-visible {
+        color: #40a9ff;
+    }
+}
+
 image.cvat_canvas_shape_selection {
     visibility: hidden;
 }
 
 .cvat_canvas_selection_box {
     fill: white;
     fill-opacity: 0.1;
-    stroke: white;
+    stroke: #1f1f1f;
 }
 
 .cvat_canvas_shape_region_selection {

cvat-canvas/src/typescript/canvas.ts

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import {
-    DrawData, MergeData, SplitData, GroupData,
+    DrawData, MergeData, SplitData, GroupData, SelectData,
     JoinData, SliceData, MasksEditData,
     InteractionData as _InteractionData,
     InteractionResult as _InteractionResult,
@@ -41,6 +41,8 @@ interface Canvas {
     split(splitData: SplitData): void;
     merge(mergeData: MergeData): void;
     select(objectState: any): void;
+    selectObjects(selectData: SelectData): void;
+    setSelectedObjects(clientIDs: number[]): void;
 
     fitCanvas(): void;
     bitmap(enable: boolean): void;
@@ -170,6 +172,14 @@ class CanvasImpl implements Canvas {
         this.model.select(objectState);
     }
 
+    public selectObjects(selectData: SelectData): void {
+        this.model.selectObjects(selectData);
+    }
+
+    public setSelectedObjects(clientIDs: number[]): void {
+        this.model.setSelectedObjects(clientIDs);
+    }
+
     public mode(): Mode {
         return this.model.mode;
     }

cvat-canvas/src/typescript/canvasController.ts

@@ -13,6 +13,7 @@ import {
     MergeData,
     SplitData,
     GroupData,
+    SelectData,
     JoinData,
     SliceData,
     Mode,
@@ -37,6 +38,8 @@ export interface CanvasController {
     readonly mergeData: MergeData;
     readonly splitData: SplitData;
     readonly groupData: GroupData;
+    readonly selectData: SelectData;
+    readonly selectedObjects: number[];
     readonly joinData: JoinData;
     readonly sliceData: SliceData;
     readonly selected: any;
@@ -47,6 +50,7 @@ export interface CanvasController {
     zoom(x: number, y: number, deltaY: number): void;
     draw(drawData: DrawData): void;
     edit(editData: MasksEditData | PolyEditData): void;
+    selectObjects(selectData: SelectData): void;
     enableDrag(x: number, y: number): void;
     drag(x: number, y: number): void;
     disableDrag(): void;
@@ -103,6 +107,10 @@ export class CanvasControllerImpl implements CanvasController {
         this.model.edit(editData);
     }
 
+    public selectObjects(selectData: SelectData): void {
+        this.model.selectObjects(selectData);
+    }
+
     public focus(clientID: number, padding: number): void {
         this.model.focus(clientID, padding);
     }
@@ -163,6 +171,14 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.groupData;
     }
 
+    public get selectData(): SelectData {
+        return this.model.selectData;
+    }
+
+    public get selectedObjects(): number[] {
+        return this.model.selectedObjects;
+    }
+
     public get joinData(): JoinData {
         return this.model.joinData;
     }

cvat-canvas/src/typescript/canvasModel.ts

@@ -79,9 +79,13 @@ export enum ColorBy {
     LABEL = 'Label',
 }
 
+export type MultiSelectModifier = 'shift' | 'ctrl' | 'alt' | 'meta';
+
 export interface Configuration {
     smoothImage?: boolean;
     autoborders?: boolean;
+    multiSelectModifier?: MultiSelectModifier;
+    multiSelectObjectModifier?: MultiSelectModifier;
     snapToPoint?: boolean;
     adaptiveZoom?: boolean;
     displayAllText?: boolean;
@@ -174,6 +178,11 @@ export interface GroupData {
     enabled: boolean;
 }
 
+export interface SelectData {
+    enabled: boolean;
+    once?: boolean;
+}
+
 export interface MergeData {
     enabled: boolean;
 }
@@ -222,6 +231,8 @@ export enum UpdateReasons {
     JOIN = 'join',
     SLICE = 'slice',
     SELECT = 'select',
+    SELECT_OBJECTS = 'select_objects',
+    SELECTED_OBJECTS_UPDATED = 'selected_objects_updated',
     CANCEL = 'cancel',
     BITMAP = 'bitmap',
     SELECT_REGION = 'select_region',
@@ -244,6 +255,7 @@ export enum Mode {
     JOIN = 'join',
     SLICE = 'slice',
     INTERACT = 'interact',
+    SELECT = 'select',
     SELECT_REGION = 'select_region',
     DRAG_CANVAS = 'drag_canvas',
     ZOOM_CANVAS = 'zoom_canvas',
@@ -268,6 +280,8 @@ export interface CanvasModel {
     readonly groupData: GroupData;
     readonly joinData: JoinData;
     readonly sliceData: SliceData;
+    readonly selectData: SelectData;
+    readonly selectedObjects: number[];
     readonly configuration: Configuration;
     readonly selected: any;
     geometry: Geometry;
@@ -294,6 +308,8 @@ export interface CanvasModel {
     split(splitData: SplitData): void;
     merge(mergeData: MergeData): void;
     select(objectState: any): void;
+    selectObjects(selectData: SelectData): void;
+    setSelectedObjects(clientIDs: number[]): void;
     interact(interactionData: InteractionData): void;
 
     fitCanvas(width: number, height: number): void;
@@ -324,6 +340,9 @@ const defaultData = {
     groupData: {
         enabled: false,
     },
+    selectData: {
+        enabled: false,
+    },
     splitData: {
         enabled: false,
     },
@@ -385,10 +404,12 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         interactionData: InteractionData;
         mergeData: MergeData;
         groupData: GroupData;
+        selectData: SelectData;
         joinData: JoinData;
         sliceData: SliceData;
         splitData: SplitData;
         selected: any;
+        selectedObjects: number[];
         mode: Mode;
         exception: Error | null;
     };
@@ -435,6 +456,8 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 undefinedAttrValue: consts.DEFAULT_UNDEFINED_ATTR_VALUE,
                 hideEditedObject: false,
                 focusedObjectPadding: 50,
+                multiSelectModifier: 'shift',
+                multiSelectObjectModifier: 'ctrl',
             },
             imageBitmap: false,
             image: null,
@@ -462,6 +485,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             left: 0,
             fittedScale: 0,
             selected: null,
+            selectedObjects: [],
             mode: Mode.IDLE,
             exception: null,
             ...defaultData,
@@ -894,6 +918,26 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         this.notify(UpdateReasons.GROUP);
     }
 
+    public selectObjects(selectData: SelectData): void {
+        if (![Mode.IDLE, Mode.SELECT].includes(this.data.mode)) {
+            throw Error(`Canvas is busy. Action: ${this.data.mode}`);
+        }
+
+        if ((this.data.selectData.enabled && selectData.enabled) || (
+            !this.data.selectData.enabled && !selectData.enabled
+        )) {
+            return;
+        }
+
+        this.data.selectData = { ...selectData };
+        this.notify(UpdateReasons.SELECT_OBJECTS);
+    }
+
+    public setSelectedObjects(clientIDs: number[]): void {
+        this.data.selectedObjects = [...clientIDs];
+        this.notify(UpdateReasons.SELECTED_OBJECTS_UPDATED);
+    }
+
     public join(joinData: JoinData): void {
         if (![Mode.IDLE, Mode.JOIN].includes(this.data.mode)) {
             throw Error(`Canvas is busy. Action: ${this.data.mode}`);
@@ -993,6 +1037,13 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         if (typeof configuration.smoothImage === 'boolean') {
             this.data.configuration.smoothImage = configuration.smoothImage;
         }
+        if (['shift', 'ctrl', 'alt', 'meta'].includes(configuration.multiSelectModifier)) {
+            this.data.configuration.multiSelectModifier = configuration.multiSelectModifier;
+        }
+        if (['shift', 'ctrl', 'alt', 'meta'].includes(configuration.multiSelectObjectModifier)) {
+            this.data.configuration.multiSelectObjectModifier = configuration.multiSelectObjectModifier;
+        }
+
         if (typeof configuration.undefinedAttrValue === 'string') {
             this.data.configuration.undefinedAttrValue = configuration.undefinedAttrValue;
         }
@@ -1167,6 +1218,14 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         return { ...this.data.groupData };
     }
 
+    public get selectData(): SelectData {
+        return { ...this.data.selectData };
+    }
+
+    public get selectedObjects(): number[] {
+        return [...this.data.selectedObjects];
+    }
+
     public get selected(): any {
         return this.data.selected;
     }