Hide mask during editing

changelog.d/20241018_142148_klakhov_hide_mask.md

@@ -0,0 +1,3 @@
+### Added
+
+- Feature to hide a mask during editing  (<https://github.com/cvat-ai/cvat/pull/8554>)

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvasModel.ts

@@ -96,6 +96,7 @@ export interface Configuration {
     controlPointsSize?: number;
     outlinedBorders?: string | false;
     resetZoom?: boolean;
+    hideEditedObject?: boolean;
 }
 
 export interface BrushTool {
@@ -416,6 +417,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 textPosition: consts.DEFAULT_SHAPE_TEXT_POSITION,
                 textContent: consts.DEFAULT_SHAPE_TEXT_CONTENT,
                 undefinedAttrValue: consts.DEFAULT_UNDEFINED_ATTR_VALUE,
+                hideEditedObject: false,
             },
             imageBitmap: false,
             image: null,
@@ -981,6 +983,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.CSSImageFilter = configuration.CSSImageFilter;
         }
 
+        if (typeof configuration.hideEditedObject === 'boolean') {
+            this.data.configuration.hideEditedObject = configuration.hideEditedObject;
+        }
+
         this.notify(UpdateReasons.CONFIG_UPDATED);
     }
 

cvat-canvas/src/typescript/editHandler.ts

@@ -472,7 +472,7 @@ export class EditHandlerImpl implements EditHandler {
 
             const paintHandler = this.editLine.remember('_paintHandler');
 
-            for (const point of (paintHandler as any).set.members) {
+            for (const point of paintHandler.set.members) {
                 point.attr('stroke-width', `${consts.POINTS_STROKE_WIDTH / geometry.scale}`);
                 point.attr('r', `${this.controlPointsSize / geometry.scale}`);
             }

cvat-canvas/src/typescript/masksHandler.ts

@@ -6,7 +6,7 @@
 import debounce from 'lodash/debounce';
 
 import {
-    DrawData, MasksEditData, Geometry, Configuration, BrushTool, ColorBy,
+    DrawData, MasksEditData, Geometry, Configuration, BrushTool, ColorBy, Position,
 } from './canvasModel';
 import consts from './consts';
 import { DrawHandler } from './drawHandler';
@@ -61,10 +61,11 @@
     private editData: MasksEditData | null;
 
     private colorBy: ColorBy;
-    private latestMousePos: { x: number; y: number; };
+    private latestMousePos: Position;
     private startTimestamp: number;
     private geometry: Geometry;
     private drawingOpacity: number;
+    private isHidden: boolean;
 
     private keepDrawnPolygon(): void {
         const canvasWrapper = this.canvas.getElement().parentElement;
@@ -217,12 +218,73 @@
     private imageDataFromCanvas(wrappingBBox: WrappingBBox): Uint8ClampedArray {
         const imageData = this.canvas.toCanvasElement()
             .getContext('2d').getImageData(
-                wrappingBBox.left, wrappingBBox.top,
-                wrappingBBox.right - wrappingBBox.left + 1, wrappingBBox.bottom - wrappingBBox.top + 1,
+                wrappingBBox.left,
+                wrappingBBox.top,
+                wrappingBBox.right - wrappingBBox.left + 1,
+                wrappingBBox.bottom - wrappingBBox.top + 1,
             ).data;
         return imageData;
     }
 
+    private startPolygonDrawing() {
+        if (this.tool?.type?.startsWith('polygon-')) {
+            this.isPolygonDrawing = true;
+            this.vectorDrawHandler.draw({
+                enabled: true,
+                shapeType: 'polygon',
+                onDrawDone: (data: { points: number[] } | null) => {
+                    if (!data) return;
+                    const points = data.points.reduce((acc: fabric.Point[], _: number, idx: number) => {
+                        if (idx % 2) {
+                            acc.push(new fabric.Point(data.points[idx - 1], data.points[idx]));
+                        }
+
+                        return acc;
+                    }, []);
+
+                    const color = fabric.Color.fromHex(this.tool.color);
+                    color.setAlpha(this.tool.type === 'polygon-minus' ? 1 : this.drawingOpacity);
+                    const polygon = new fabric.Polygon(points, {
+                        fill: color.toRgba(),
+                        selectable: false,
+                        objectCaching: false,
+                        absolutePositioned: true,
+                        globalCompositeOperation: this.tool.type === 'polygon-minus' ? 'destination-out' : 'xor',
+                    });
+
+                    this.canvas.add(polygon);
+                    this.drawnObjects.push(polygon);
+                    this.canvas.renderAll();
+                },
+            }, this.geometry);
+
+            const canvasWrapper = this.canvas.getElement().parentElement as HTMLDivElement;
+            canvasWrapper.style.pointerEvents = 'none';
+            canvasWrapper.style.zIndex = '0';
+        }
+    }
+
+    private updateHidden(value: boolean) {
+        this.isHidden = value;
+
+        if (value && this.isPolygonDrawing) {
+            this.vectorDrawHandler.cancel();
+        } else if (this.isPolygonDrawing) {
+            this.startPolygonDrawing();
+        }
+
+        // Need to update style of upper canvas explicitly because update of default cursor is not applied immediately
+        // https://github.com/fabricjs/fabric.js/issues/1456
+        const newOpacity = value ? '0' : '';
+        const newCursor = value ? 'inherit' : 'none';
+        this.canvas.getElement().parentElement.style.opacity = newOpacity;
+        const upperCanvas = this.canvas.getElement().parentElement.querySelector('.upper-canvas') as HTMLElement;
+        if (upperCanvas) {
+            upperCanvas.style.cursor = newCursor;
+        }
+        this.canvas.defaultCursor = newCursor;
+    }
+
     private updateBrushTools(brushTool?: BrushTool, opts: Partial<BrushTool> = {}): void {
         if (this.isPolygonDrawing) {
             // tool was switched from polygon to brush for example
@@ -259,41 +321,7 @@
             this.updateBlockedTools();
         }
 
-        if (this.tool?.type?.startsWith('polygon-')) {
-            this.isPolygonDrawing = true;
-            this.vectorDrawHandler.draw({
-                enabled: true,
-                shapeType: 'polygon',
-                onDrawDone: (data: { points: number[] } | null) => {
-                    if (!data) return;
-                    const points = data.points.reduce((acc: fabric.Point[], _: number, idx: number) => {
-                        if (idx % 2) {
-                            acc.push(new fabric.Point(data.points[idx - 1], data.points[idx]));
-                        }
-
-                        return acc;
-                    }, []);
-
-                    const color = fabric.Color.fromHex(this.tool.color);
-                    color.setAlpha(this.tool.type === 'polygon-minus' ? 1 : this.drawingOpacity);
-                    const polygon = new fabric.Polygon(points, {
-                        fill: color.toRgba(),
-                        selectable: false,
-                        objectCaching: false,
-                        absolutePositioned: true,
-                        globalCompositeOperation: this.tool.type === 'polygon-minus' ? 'destination-out' : 'xor',
-                    });
-
-                    this.canvas.add(polygon);
-                    this.drawnObjects.push(polygon);
-                    this.canvas.renderAll();
-                },
-            }, this.geometry);
-
-            const canvasWrapper = this.canvas.getElement().parentElement as HTMLDivElement;
-            canvasWrapper.style.pointerEvents = 'none';
-            canvasWrapper.style.zIndex = '0';
-        }
+        this.startPolygonDrawing();
     }
 
     private updateBlockedTools(): void {
@@ -350,6 +378,7 @@
         this.editData = null;
         this.drawingOpacity = 0.5;
         this.brushMarker = null;
+        this.isHidden = false;
         this.colorBy = ColorBy.LABEL;
         this.onDrawDone = onDrawDone;
         this.onDrawRepeat = onDrawRepeat;
@@ -452,7 +481,7 @@
                 this.canvas.renderAll();
             }
 
-            if (isMouseDown && !isBrushSizeChanging && ['brush', 'eraser'].includes(tool?.type)) {
+            if (isMouseDown && !this.isHidden && !isBrushSizeChanging && ['brush', 'eraser'].includes(tool?.type)) {
                 const color = fabric.Color.fromHex(tool.color);
                 color.setAlpha(tool.type === 'eraser' ? 1 : 0.5);
 
@@ -530,6 +559,10 @@
 
     public configurate(configuration: Configuration): void {
         this.colorBy = configuration.colorBy;
+
+        if (this.isHidden !== configuration.hideEditedObject) {
+            this.updateHidden(configuration.hideEditedObject);
+        }
     }
 
     public transform(geometry: Geometry): void {
@@ -563,7 +596,10 @@
                 const color = fabric.Color.fromHex(this.getStateColor(drawData.initialState)).getSource();
                 const [left, top, right, bottom] = points.slice(-4);
                 const imageBitmap = expandChannels(color[0], color[1], color[2], points);
-                imageDataToDataURL(imageBitmap, right - left + 1, bottom - top + 1,
+                imageDataToDataURL(
+                    imageBitmap,
+                    right - left + 1,
+                    bottom - top + 1,
                     (dataURL: string) => new Promise((resolve) => {
                         fabric.Image.fromURL(dataURL, (image: fabric.Image) => {
                             try {
@@ -654,7 +690,10 @@
                 const color = fabric.Color.fromHex(this.getStateColor(editData.state)).getSource();
                 const [left, top, right, bottom] = points.slice(-4);
                 const imageBitmap = expandChannels(color[0], color[1], color[2], points);
-                imageDataToDataURL(imageBitmap, right - left + 1, bottom - top + 1,
+                imageDataToDataURL(
+                    imageBitmap,
+                    right - left + 1,
+                    bottom - top + 1,
                     (dataURL: string) => new Promise((resolve) => {
                         fabric.Image.fromURL(dataURL, (image: fabric.Image) => {
                             try {

cvat-core/src/annotations-collection.ts

@@ -1026,6 +1026,7 @@ export default class Collection {
                         label_id: state.label.id,
                         outside: state.outside || false,
                         occluded: state.occluded || false,
+                        hidden: state.hidden || false,
                         points: state.shapeType === 'mask' ? (() => {
                             const { width, height } = this.frameMeta[state.frame];
                             return cropMask(state.points, width, height);
@@ -1045,6 +1046,7 @@ export default class Collection {
                             z_order: 0,
                             outside: element.outside || false,
                             occluded: element.occluded || false,
+                            hidden: state.hidden || false,
                         })) : undefined,
                     });
                 } else if (state.objectType === 'track') {

cvat-core/src/annotations-objects.ts

@@ -409,7 +409,7 @@ class Drawn extends Annotation {
         super(data, clientID, color, injection);
         this.frameMeta = injection.frameMeta;
         this.descriptions = data.descriptions || [];
-        this.hidden = false;
+        this.hidden = data.hidden || false;
         this.pinned = true;
         this.shapeType = null;
     }

cvat-core/src/object-state.ts

@@ -164,7 +164,7 @@ export default class ObjectState {
             zOrder: 0,
             lock: serialized.lock || false,
             color: '#000000',
-            hidden: false,
+            hidden: serialized.hidden || false,
             pinned: false,
             source: serialized.source || Source.MANUAL,
             keyframes: serialized.keyframes || null,

cvat-ui/package.json

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

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

@@ -126,6 +126,9 @@ export enum AnnotationActionTypes {
     COLLAPSE_APPEARANCE = 'COLLAPSE_APPEARANCE',
     COLLAPSE_OBJECT_ITEMS = 'COLLAPSE_OBJECT_ITEMS',
     ACTIVATE_OBJECT = 'ACTIVATE_OBJECT',
+    UPDATE_EDITED_STATE = 'UPDATE_EDITED_STATE',
+    HIDE_EDITED_STATE = 'HIDE_EDITED_STATE',
+    RESET_EDITED_STATE = 'RESET_EDITED_STATE',
     REMOVE_OBJECT = 'REMOVE_OBJECT',
     REMOVE_OBJECT_SUCCESS = 'REMOVE_OBJECT_SUCCESS',
     REMOVE_OBJECT_FAILED = 'REMOVE_OBJECT_FAILED',
@@ -1608,3 +1611,84 @@ export function restoreFrameAsync(frame: number): ThunkAction {
         }
     };
 }
+
+export function updateEditedStateAsync(
+    shapeType: ShapeType | null,
+    editedStateInstance: ObjectState | null,
+): ThunkAction {
+    return async (dispatch: ThunkDispatch, getState): Promise<void> => {
+        if (editedStateInstance) {
+            const state = getState();
+            const { instance: canvas } = state.annotation.canvas;
+            if (canvas) {
+                (canvas as Canvas).configure({
+                    hideEditedObject: editedStateInstance.hidden,
+                });
+            }
+
+            dispatch({
+                type: AnnotationActionTypes.HIDE_EDITED_STATE,
+                payload: {
+                    hide: editedStateInstance.hidden,
+                },
+            });
+        }
+        dispatch({
+            type: AnnotationActionTypes.UPDATE_EDITED_STATE,
+            payload: {
+                shapeType,
+                editedStateInstance,
+            },
+        });
+    };
+}
+
+export function resetEditedStateAsync(): ThunkAction {
+    return async (dispatch: ThunkDispatch, getState): Promise<void> => {
+        const state = getState();
+        const { instance: canvas } = state.annotation.canvas;
+        const { editedStateHidden } = state.annotation.editing;
+        if (canvas && editedStateHidden) {
+            (canvas as Canvas).configure({
+                hideEditedObject: false,
+            });
+        }
+
+        dispatch({
+            type: AnnotationActionTypes.RESET_EDITED_STATE,
+            payload: {},
+        });
+    };
+}
+
+export function resetEditedState(): AnyAction {
+    return {
+        type: AnnotationActionTypes.RESET_EDITED_STATE,
+        payload: {},
+    };
+}
+
+export function changeHideEditedStateAsync(hide: boolean): ThunkAction {
+    return async (dispatch: ThunkDispatch, getState): Promise<void> => {
+        const state = getState();
+        const { instance: canvas } = state.annotation.canvas;
+        if (canvas) {
+            (canvas as Canvas).configure({
+                hideEditedObject: hide,
+            });
+
+            dispatch({
+                type: AnnotationActionTypes.HIDE_EDITED_STATE,
+                payload: {
+                    hide,
+                },
+            });
+
+            const { editedStateInstance } = state.annotation.editing;
+            if (editedStateInstance) {
+                editedStateInstance.hidden = hide;
+                await dispatch(updateAnnotationsAsync([editedStateInstance]));
+            }
+        }
+    };
+}