Intelligent scissors disabling feature

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added ability to export project as a dataset (<https://github.com/openvinotoolkit/cvat/pull/3365>)
   and project with 3D tasks (<https://github.com/openvinotoolkit/cvat/pull/3502>)
 - Additional inline tips in interactors with demo gifs (<https://github.com/openvinotoolkit/cvat/pull/3473>)
+- Added intelligent scissors blocking feature (<https://github.com/openvinotoolkit/cvat/pull/3510>)
 
 ### Changed
 

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvasModel.ts

@@ -87,6 +87,7 @@ export interface InteractionData {
         shapeType: string;
         points: number[];
     };
+    onChangeToolsBlockerState?: (event: string) => void;
 }
 
 export interface InteractionResult {
@@ -565,15 +566,14 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         if (![Mode.IDLE, Mode.INTERACT].includes(this.data.mode)) {
             throw Error(`Canvas is busy. Action: ${this.data.mode}`);
         }
-
-        if (interactionData.enabled && !interactionData.intermediateShape) {
+        const thresholdChanged = this.data.interactionData.enableThreshold !== interactionData.enableThreshold;
+        if (interactionData.enabled && !interactionData.intermediateShape && !thresholdChanged) {
             if (this.data.interactionData.enabled) {
                 throw new Error('Interaction has been already started');
             } else if (!interactionData.shapeType) {
                 throw new Error('A shape type was not specified');
             }
         }
-
         this.data.interactionData = interactionData;
         if (typeof this.data.interactionData.crosshair !== 'boolean') {
             this.data.interactionData.crosshair = true;

cvat-canvas/src/typescript/canvasView.ts

@@ -1279,7 +1279,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }
                 this.interactionHandler.interact(data);
             } else {
-                this.canvas.style.cursor = '';
+                if (!data.enabled) {
+                    this.canvas.style.cursor = '';
+                }
                 if (this.mode !== Mode.IDLE) {
                     this.interactionHandler.interact(data);
                 }
@@ -1569,7 +1571,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
     private addObjects(states: any[]): void {
         const { displayAllText } = this.configuration;
-
         for (const state of states) {
             const points: number[] = state.points as number[];
             const translatedPoints: number[] = this.translateToCanvas(points);

cvat-canvas/src/typescript/interactionHandler.ts

@@ -8,6 +8,7 @@ import Crosshair from './crosshair';
 import {
     translateToSVG, PropType, stringifyPoints, translateToCanvas,
 } from './shared';
+
 import {
     InteractionData, InteractionResult, Geometry, Configuration,
 } from './canvasModel';
@@ -34,6 +35,7 @@ export class InteractionHandlerImpl implements InteractionHandler {
     private thresholdRectSize: number;
     private intermediateShape: PropType<InteractionData, 'intermediateShape'>;
     private drawnIntermediateShape: SVG.Shape;
+    private thresholdWasModified: boolean;
 
     private prepareResult(): InteractionResult[] {
         return this.interactionShapes.map(
@@ -141,14 +143,15 @@ export class InteractionHandlerImpl implements InteractionHandler {
                         _e.preventDefault();
                         _e.stopPropagation();
                         self.remove();
+                        this.shapesWereUpdated = true;
+                        const shouldRaiseEvent = this.shouldRaiseEvent(_e.ctrlKey);
                         this.interactionShapes = this.interactionShapes.filter(
                             (shape: SVG.Shape): boolean => shape !== self,
                         );
                         if (this.interactionData.startWithBox && this.interactionShapes.length === 1) {
                             this.interactionShapes[0].style({ visibility: '' });
                         }
-                        this.shapesWereUpdated = true;
-                        if (this.shouldRaiseEvent(_e.ctrlKey)) {
+                        if (shouldRaiseEvent) {
                             this.onInteraction(this.prepareResult(), true, false);
                         }
                     });
@@ -207,10 +210,14 @@ export class InteractionHandlerImpl implements InteractionHandler {
     private initInteraction(): void {
         if (this.interactionData.crosshair) {
             this.addCrosshair();
+        } else if (this.crosshair) {
+            this.removeCrosshair();
         }
-
         if (this.interactionData.enableThreshold) {
             this.addThreshold();
+        } else if (this.threshold) {
+            this.threshold.remove();
+            this.threshold = null;
         }
     }
 
@@ -332,9 +339,27 @@ export class InteractionHandlerImpl implements InteractionHandler {
         const handler = shape.remember('_selectHandler');
         if (handler && handler.nested) {
             handler.nested.fill(shape.attr('fill'));
+            // move green circle group(anchors) and polygon(lastChild) to the top of svg to make anchors hoverable
+            handler.parent.node.prepend(handler.nested.node);
+            handler.parent.node.prepend(handler.parent.node.lastChild);
         }
     }
 
+    private visualComponentsChanged(interactionData: InteractionData): boolean {
+        const allowedKeys = ['enabled', 'crosshair', 'enableThreshold', 'onChangeToolsBlockerState'];
+        if (Object.keys(interactionData).every((key: string): boolean => allowedKeys.includes(key))) {
+            if (this.interactionData.enableThreshold !== undefined && interactionData.enableThreshold !== undefined
+                && this.interactionData.enableThreshold !== interactionData.enableThreshold) {
+                return true;
+            }
+            if (this.interactionData.crosshair !== undefined && interactionData.crosshair !== undefined
+                && this.interactionData.crosshair !== interactionData.crosshair) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     public constructor(
         onInteraction: (
             shapes: InteractionResult[] | null,
@@ -376,7 +401,6 @@ export class InteractionHandlerImpl implements InteractionHandler {
             if (this.threshold) {
                 this.threshold.center(x, y);
             }
-
             if (this.interactionData.enableSliding && this.interactionShapes.length) {
                 if (this.isWithinFrame(x, y)) {
                     if (this.interactionData.enableThreshold && !this.isWithinThreshold(x, y)) return;
@@ -399,6 +423,7 @@ export class InteractionHandlerImpl implements InteractionHandler {
         this.canvas.on('wheel.interaction', (e: WheelEvent): void => {
             if (e.ctrlKey) {
                 if (this.threshold) {
+                    this.thresholdWasModified = true;
                     const { x, y } = this.cursorPosition;
                     e.preventDefault();
                     if (e.deltaY > 0) {
@@ -412,10 +437,24 @@ export class InteractionHandlerImpl implements InteractionHandler {
             }
         });
 
-        document.body.addEventListener('keyup', (e: KeyboardEvent): void => {
-            if (e.keyCode === 17 && this.shouldRaiseEvent(false)) {
-                // 17 is ctrl
-                this.onInteraction(this.prepareResult(), true, false);
+        window.addEventListener('keyup', (e: KeyboardEvent): void => {
+            if (this.interactionData.enabled && e.keyCode === 17) {
+                if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) {
+                    this.interactionData.onChangeToolsBlockerState('keyup');
+                }
+                if (this.shouldRaiseEvent(false)) {
+                    // 17 is ctrl
+                    this.onInteraction(this.prepareResult(), true, false);
+                }
+            }
+        });
+
+        window.addEventListener('keydown', (e: KeyboardEvent): void => {
+            if (this.interactionData.enabled && e.keyCode === 17) {
+                if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) {
+                    this.interactionData.onChangeToolsBlockerState('keydown');
+                }
+                this.thresholdWasModified = false;
             }
         });
     }
@@ -461,6 +500,9 @@ export class InteractionHandlerImpl implements InteractionHandler {
             if (this.interactionData.startWithBox) {
                 this.interactionShapes[0].style({ visibility: 'hidden' });
             }
+        } else if (interactionData.enabled && this.visualComponentsChanged(interactionData)) {
+            this.interactionData = { ...this.interactionData, ...interactionData };
+            this.initInteraction();
         } else if (interactionData.enabled) {
             this.interactionData = interactionData;
             this.initInteraction();

cvat-core/src/ml-model.js

@@ -99,6 +99,14 @@ class MLModel {
     get tip() {
         return { ...this._tip };
     }
+
+    /**
+     * @param {(event:string)=>void} onChangeToolsBlockerState Set canvas onChangeToolsBlockerState callback
+     * @returns {void}
+     */
+    set onChangeToolsBlockerState(onChangeToolsBlockerState) {
+        this._params.canvas.onChangeToolsBlockerState = onChangeToolsBlockerState;
+    }
 }
 
 module.exports = MLModel;

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/settings-actions.ts

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: MIT
 
 import { AnyAction } from 'redux';
-import { GridColor, ColorBy, SettingsState } from 'reducers/interfaces';
+import {
+    GridColor, ColorBy, SettingsState, ToolsBlockerState,
+} from 'reducers/interfaces';
 
 export enum SettingsActionTypes {
     SWITCH_ROTATE_ALL = 'SWITCH_ROTATE_ALL',
@@ -34,6 +36,7 @@ export enum SettingsActionTypes {
     CHANGE_CANVAS_BACKGROUND_COLOR = 'CHANGE_CANVAS_BACKGROUND_COLOR',
     SWITCH_SETTINGS_DIALOG = 'SWITCH_SETTINGS_DIALOG',
     SET_SETTINGS = 'SET_SETTINGS',
+    SWITCH_TOOLS_BLOCKER_STATE = 'SWITCH_TOOLS_BLOCKER_STATE',
 }
 
 export function changeShapesOpacity(opacity: number): AnyAction {
@@ -280,6 +283,15 @@ export function changeDefaultApproxPolyAccuracy(approxPolyAccuracy: number): Any
     };
 }
 
+export function switchToolsBlockerState(toolsBlockerState: ToolsBlockerState): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_TOOLS_BLOCKER_STATE,
+        payload: {
+            toolsBlockerState,
+        },
+    };
+}
+
 export function setSettings(settings: Partial<SettingsState>): AnyAction {
     return {
         type: SettingsActionTypes.SET_SETTINGS,