Hide mask during editing

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/drawHandler.ts

@@ -5,7 +5,7 @@
 
 import * as SVG from 'svg.js';
 import 'svg.draw.js';
-import './svg.patch';
+import { CIRCLE_STROKE } from './svg.patch';
 
 import { AutoborderHandler } from './autoborderHandler';
 import {
@@ -104,6 +104,7 @@
     private controlPointsSize: number;
     private selectedShapeOpacity: number;
     private outlinedBorders: string;
+    private isHidden: boolean;
 
     // we should use any instead of SVG.Shape because svg plugins cannot change declared interface
     // so, methods like draw() just undefined for SVG.Shape, but nevertheless they exist
@@ -579,7 +580,10 @@
 
         this.drawInstance.on('drawstart', sizeDecrement);
         this.drawInstance.on('drawpoint', sizeDecrement);
-        this.drawInstance.on('drawupdate', (): void => this.transform(this.geometry));
+        this.drawInstance.on('drawupdate', (): void => {
+            this.transform(this.geometry);
+            this.updateInnerCircles(!this.isHidden);
+        });
         this.drawInstance.on('undopoint', (): number => size++);
 
         // Add ability to cancel the latest drawn point
@@ -1276,6 +1280,7 @@
         this.selectedShapeOpacity = configuration.selectedShapeOpacity;
         this.outlinedBorders = configuration.outlinedBorders || 'black';
         this.autobordersEnabled = false;
+        this.isHidden = false;
         this.startTimestamp = Date.now();
         this.onDrawDoneDefault = onDrawDone;
         this.canvas = canvas;
@@ -1301,11 +1306,17 @@
         });
     }
 
-    public configurate(configuration: Configuration): void {
-        this.controlPointsSize = configuration.controlPointsSize;
-        this.selectedShapeOpacity = configuration.selectedShapeOpacity;
-        this.outlinedBorders = configuration.outlinedBorders || 'black';
+    private updateInnerCircles(shown: boolean) {
+        const paintHandler = this.drawInstance.remember('_paintHandler');
+        if (paintHandler) {
+            for (const point of (paintHandler as any).set.members) {
+                point.attr('stroke', shown ? CIRCLE_STROKE : 'none');
+                point.fill({ opacity: shown ? 1 : 0 });
+            }
+        }
+    }
 
+    private updateDrawInstance(opacity: number) {
         const isFillableRect = this.drawData &&
             this.drawData.shapeType === 'rectangle' &&
             (this.drawData.rectDrawingMethod === RectDrawingMethod.CLASSIC || this.drawData.initialState);
@@ -1315,23 +1326,45 @@
         const isFilalblePolygon = this.drawData && this.drawData.shapeType === 'polygon';
 
         if (this.drawInstance && (isFillableRect || isFillableCuboid || isFilalblePolygon)) {
-            this.drawInstance.fill({ opacity: configuration.selectedShapeOpacity });
+            this.drawInstance.fill({ opacity });
         }
 
         if (this.drawInstance && this.drawInstance.attr('stroke')) {
-            this.drawInstance.attr('stroke', this.outlinedBorders);
+            this.drawInstance.attr('stroke', opacity ? this.outlinedBorders : 'none');
+        }
+
+        if (this.drawInstance && (isFilalblePolygon)) {
+            this.updateInnerCircles(!this.isHidden);
         }
 
         if (this.pointsGroup && this.pointsGroup.attr('stroke')) {
-            this.pointsGroup.attr('stroke', this.outlinedBorders);
+            this.pointsGroup.attr('stroke', opacity ? this.outlinedBorders : 'none');
         }
+    }
 
-        this.autobordersEnabled = configuration.autoborders;
-        if (this.drawInstance && !this.drawData.initialState) {
-            if (this.autobordersEnabled) {
-                this.autoborderHandler.autoborder(true, this.drawInstance, this.drawData.redraw);
-            } else {
-                this.autoborderHandler.autoborder(false);
+    private updateHidden(value: boolean) {
+        this.isHidden = value;
+        if (value) {
+            this.updateDrawInstance(0);
+        }
+    }
+
+    public configurate(configuration: Configuration): void {
+        this.controlPointsSize = configuration.controlPointsSize;
+        this.selectedShapeOpacity = configuration.selectedShapeOpacity;
+        this.outlinedBorders = configuration.outlinedBorders || 'black';
+
+        if (this.isHidden !== configuration.hideEditedObject) {
+            this.updateHidden(configuration.hideEditedObject);
+        } else if (!this.isHidden) {
+            this.updateDrawInstance(configuration.selectedShapeOpacity);
+            this.autobordersEnabled = configuration.autoborders;
+            if (this.drawInstance && !this.drawData.initialState) {
+                if (this.autobordersEnabled) {
+                    this.autoborderHandler.autoborder(true, this.drawInstance, this.drawData.redraw);
+                } else {
+                    this.autoborderHandler.autoborder(false);
+                }
             }
         }
     }

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,29 @@
     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 updateHidden(value: boolean) {
+        this.isHidden = value;
+        // Need to update style of upper canvas explicilty because update of default cursor is not applied immideately
+        // https://github.com/fabricjs/fabric.js/issues/1456
+        if (value) {
+            this.canvas.getElement().parentElement.style.opacity = '0';
+            (this.canvas.getElement().parentElement.querySelector('.upper-canvas') as HTMLElement).style.cursor = 'inherit';
+            this.canvas.defaultCursor = 'inherit';
+        } else {
+            this.canvas.getElement().parentElement.style.opacity = '';
+            (this.canvas.getElement().parentElement.querySelector('.upper-canvas') as HTMLElement).style.cursor = 'none';
+            this.canvas.defaultCursor = 'none';
+        }
+    }
+
     private updateBrushTools(brushTool?: BrushTool, opts: Partial<BrushTool> = {}): void {
         if (this.isPolygonDrawing) {
             // tool was switched from polygon to brush for example
@@ -350,6 +368,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 +471,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 +549,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 +586,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 +680,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-canvas/src/typescript/svg.patch.ts

@@ -86,6 +86,7 @@ SVG.Element.prototype.draw.extend(
     }),
 );
 
+export const CIRCLE_STROKE = '#000';
 // Fix method drawCircles
 function drawCircles(): void {
     const array = this.el.array().valueOf();

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,83 @@ 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;
+        if (canvas) {
+            (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.annotations.editedState;
+            if (editedStateInstance) {
+                editedStateInstance.hidden = hide;
+                await dispatch(updateAnnotationsAsync([editedStateInstance]));
+            }
+        }
+    };
+}