Single object annotation mode

changelog.d/20240219_101835_boris_single_object_mode.md

@@ -0,0 +1,4 @@
+### Added
+
+- Single shape annotation mode allowing to easily annotate scenarious where a user
+only needs to draw one object on one image (<https://github.com/opencv/cvat/pull/7486>)

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",

cvat-canvas/src/typescript/canvasController.ts

@@ -1,5 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
-// Copyright (C) 2022-2023 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -45,13 +45,6 @@ export interface CanvasController {
     zoom(x: number, y: number, direction: number): void;
     draw(drawData: DrawData): void;
     edit(editData: MasksEditData): void;
-    interact(interactionData: InteractionData): void;
-    merge(mergeData: MergeData): void;
-    split(splitData: SplitData): void;
-    group(groupData: GroupData): void;
-    join(joinData: JoinData): void;
-    slice(sliceData: SliceData): void;
-    selectRegion(enabled: boolean): void;
     enableDrag(x: number, y: number): void;
     drag(x: number, y: number): void;
     disableDrag(): void;
@@ -107,34 +100,6 @@ export class CanvasControllerImpl implements CanvasController {
         this.model.edit(editData);
     }
 
-    public interact(interactionData: InteractionData): void {
-        this.model.interact(interactionData);
-    }
-
-    public merge(mergeData: MergeData): void {
-        this.model.merge(mergeData);
-    }
-
-    public split(splitData: SplitData): void {
-        this.model.split(splitData);
-    }
-
-    public group(groupData: GroupData): void {
-        this.model.group(groupData);
-    }
-
-    public join(joinData: JoinData): void {
-        this.model.join(joinData);
-    }
-
-    public slice(sliceData: SliceData): void {
-        this.model.slice(sliceData);
-    }
-
-    public selectRegion(enable: boolean): void {
-        this.model.selectRegion(enable);
-    }
-
     public get geometry(): Geometry {
         return this.model.geometry;
     }

cvat-canvas/src/typescript/canvasView.ts

@@ -1,5 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
-// Copyright (C) 2022-2023 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -97,7 +97,7 @@
         return this.controller.mode;
     }
 
     private onMessage = (messages: CanvasHint[] | null, topic: string) => {
         this.canvas.dispatchEvent(
             new CustomEvent('canvas.message', {
                 bubbles: false,
@@ -232,6 +232,16 @@
         }
     }
 
+    private dispatchCanceledEvent(): void {
+        this.mode = Mode.IDLE;
+        const event: CustomEvent = new CustomEvent('canvas.canceled', {
+            bubbles: false,
+            cancelable: true,
+        });
+
+        this.canvas.dispatchEvent(event);
+    }
+
     private onInteraction = (
         shapes: InteractionResult[] | null,
         shapesUpdated = true,
@@ -256,16 +266,7 @@
         }
 
         if (shapes === null || isDone) {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
-            this.mode = Mode.IDLE;
-            this.controller.interact({
-                enabled: false,
-            });
+            this.dispatchCanceledEvent();
         }
     };
 
@@ -290,13 +291,7 @@
                 const [state] = this.controller.objects
                     .filter((_state: any): boolean => _state.clientID === clientID);
                 this.onEditDone(state, points);
-
-                const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                    bubbles: false,
-                    cancelable: true,
-                });
-
-                this.canvas.dispatchEvent(event);
+                this.dispatchCanceledEvent();
                 return;
             }
 
@@ -317,10 +312,7 @@
 
             this.canvas.dispatchEvent(event);
         } else if (!continueDraw) {
-            this.canvas.dispatchEvent(new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            }));
+            this.dispatchCanceledEvent();
         }
 
         if (continueDraw) {
@@ -335,7 +327,8 @@
             );
         } else {
             // when draw stops from inside canvas (for example if use predefined number of points)
-            this.controller.draw({ enabled: false });
+            this.mode = Mode.IDLE;
+            this.canvas.style.cursor = '';
         }
     };
 
@@ -361,6 +354,7 @@
 
     private onEditDone = (state: any, points: number[], rotation?: number): void => {
         this.canvas.style.cursor = '';
+        this.mode = Mode.IDLE;
         if (state && points) {
             const event: CustomEvent = new CustomEvent('canvas.edited', {
                 bubbles: false,
@@ -374,18 +368,12 @@
 
             this.canvas.dispatchEvent(event);
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
 
         for (const clientID of Object.keys(this.innerObjectsFlags.editHidden)) {
             this.setupInnerFlags(+clientID, 'editHidden', false);
         }
-        this.mode = Mode.IDLE;
     };
 
     private onMergeDone = (objects: any[] | null, duration?: number): void => {
@@ -399,18 +387,11 @@
                 },
             });
 
+            this.mode = Mode.IDLE;
             this.canvas.dispatchEvent(event);
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
-
-        this.controller.merge({ enabled: false });
-        this.mode = Mode.IDLE;
     };
 
     private onSplitDone = (object?: any, duration?: number): void => {
@@ -425,23 +406,23 @@
                 },
             });
 
+            this.canvas.style.cursor = '';
+            this.mode = Mode.IDLE;
+            this.splitHandler.split({ enabled: false });
             this.canvas.dispatchEvent(event);
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
-
-        this.controller.split({ enabled: false });
-        this.mode = Mode.IDLE;
     };
 
     private onSelectDone = (objects?: any[], duration?: number): void => {
+        if (this.mode === Mode.JOIN) {
+            this.onMessage(null, 'join');
+        }
+
         if (objects && typeof duration !== 'undefined') {
             if (this.mode === Mode.GROUP && objects.length > 1) {
+                this.mode = Mode.IDLE;
                 this.canvas.dispatchEvent(new CustomEvent('canvas.groupped', {
                     bubbles: false,
                     cancelable: true,
@@ -451,6 +432,7 @@
                     },
                 }));
             } else if (this.mode === Mode.JOIN && objects.length > 1) {
+                this.mode = Mode.IDLE;
                 let [left, top, right, bottom] = objects[0].points.slice(-4);
                 objects.forEach((state) => {
                     const [curLeft, curTop, curRight, curBottom] = state.points.slice(-4);
@@ -487,26 +469,14 @@
                 }).catch(this.onError);
             }
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
-
-        if (this.mode === Mode.GROUP) {
-            this.controller.group({ enabled: false });
-        } else if (this.mode === Mode.JOIN) {
-            this.controller.join({ enabled: false });
-            this.onMessage(null, 'join');
-        }
-
-        this.mode = Mode.IDLE;
     };
 
     private onSliceDone = (state?: any, results?: number[][], duration?: number): void => {
         if (state && results && typeof duration !== 'undefined') {
+            this.mode = Mode.IDLE;
+            this.sliceHandler.slice({ enabled: false });
             this.canvas.dispatchEvent(new CustomEvent('canvas.sliced', {
                 bubbles: false,
                 cancelable: true,
@@ -517,40 +487,22 @@
                 },
             }));
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
-
-        this.controller.slice({ enabled: false });
-        this.mode = Mode.IDLE;
     };
 
     private onRegionSelected = (points?: number[]): void => {
         if (points) {
-            const event: CustomEvent = new CustomEvent('canvas.regionselected', {
+            this.canvas.dispatchEvent(new CustomEvent('canvas.regionselected', {
                 bubbles: false,
                 cancelable: true,
                 detail: {
                     points,
                 },
-            });
-
-            this.canvas.dispatchEvent(event);
+            }));
         } else {
-            const event: CustomEvent = new CustomEvent('canvas.canceled', {
-                bubbles: false,
-                cancelable: true,
-            });
-
-            this.canvas.dispatchEvent(event);
+            this.dispatchCanceledEvent();
         }
-
-        this.controller.selectRegion(false);
-        this.mode = Mode.IDLE;
     };
 
     private onFindObject = (e: MouseEvent): void => {
@@ -1711,19 +1663,15 @@
             if (data.enabled) {
                 this.canvas.style.cursor = 'copy';
                 this.mode = Mode.MERGE;
-            } else {
-                this.canvas.style.cursor = '';
             }
             this.mergeHandler.merge(data);
         } else if (reason === UpdateReasons.SPLIT) {
             const data: SplitData = this.controller.splitData;
             if (data.enabled) {
                 this.canvas.style.cursor = 'copy';
                 this.mode = Mode.SPLIT;
-            } else {
-                this.canvas.style.cursor = '';
+                this.splitHandler.split(data);
             }
-            this.splitHandler.split(data);
         } else if ([UpdateReasons.JOIN, UpdateReasons.GROUP].includes(reason)) {
             let data: GroupData | JoinData = null;
             if (reason === UpdateReasons.GROUP) {
@@ -1745,18 +1693,12 @@
                     objectType: ['shape'],
                 });
             }
-
-            if (data.enabled) {
-                this.canvas.style.cursor = 'copy';
-            } else {
-                this.canvas.style.cursor = '';
-            }
         } else if (reason === UpdateReasons.SLICE) {
             const data = this.controller.sliceData;
             if (data.enabled && this.mode === Mode.IDLE) {
                 this.mode = Mode.SLICE;
+                this.sliceHandler.slice(data);
             }
-            this.sliceHandler.slice(data);
         } else if (reason === UpdateReasons.SELECT) {
             this.objectSelector.push(this.controller.selected);
             if (this.mode === Mode.MERGE) {
@@ -1805,8 +1747,8 @@
                     }),
                 );
             }
-            this.mode = Mode.IDLE;
             this.canvas.style.cursor = '';
+            this.dispatchCanceledEvent();
         } else if (reason === UpdateReasons.DATA_FAILED) {
             this.onError(model.exception, 'data fetching');
         } else if (reason === UpdateReasons.DESTROY) {