Fixed: Issues disappear when using a zoom

CHANGELOG.md

@@ -57,9 +57,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Uncaught TypeError: this.el.node.getScreenCTM() is null in Firefox (<https://github.com/openvinotoolkit/cvat/pull/4175>)
 - Bug: canvas is busy when start playing, start resizing a shape and do not release the mouse cursor (<https://github.com/openvinotoolkit/cvat/pull/4151>)
 - Fixed tus upload error over https (<https://github.com/openvinotoolkit/cvat/pull/4154>)
+- Issues disappear when rescale a browser (<https://github.com/openvinotoolkit/cvat/pull/4189>)
 - Auth token key is not returned when registering without email verification (<https://github.com/openvinotoolkit/cvat/pull/4092>)
 
-
 ### Security
 - Updated ELK to 6.8.22 which uses log4j 2.17.0 (<https://github.com/openvinotoolkit/cvat/pull/4052>)
 

cvat-canvas/README.md

@@ -184,6 +184,7 @@ Standard JS events are used.
     - canvas.zoomstart
     - canvas.zoomstop
     - canvas.zoom
+    - canvas.reshape
     - canvas.fit
     - canvas.dragshape => {id: number}
     - canvas.roiselected => {points: number[]}

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -74,7 +74,6 @@ polyline.cvat_shape_drawing_opacity {
 }
 
 .cvat_canvas_issue_region {
-    display: none;
     stroke-width: 0;
 }
 

cvat-canvas/src/typescript/canvas.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -29,7 +29,7 @@ const CanvasVersion = pjson.version;
 interface Canvas {
     html(): HTMLDivElement;
     setup(frameData: any, objectStates: any[], zLayer?: number): void;
-    setupIssueRegions(issueRegions: Record<number, number[]>): void;
+    setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void;
     activate(clientID: number | null, attributeID?: number): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding?: number): void;
@@ -77,7 +77,7 @@ class CanvasImpl implements Canvas {
         this.model.setup(frameData, objectStates, zLayer);
     }
 
-    public setupIssueRegions(issueRegions: Record<number, number[]>): void {
+    public setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void {
         this.model.setupIssueRegions(issueRegions);
     }
 

cvat-canvas/src/typescript/canvasController.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2020 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -19,7 +19,7 @@ import {
 
 export interface CanvasController {
     readonly objects: any[];
-    readonly issueRegions: Record<number, number[]>;
+    readonly issueRegions: Record<number, { hidden: boolean; points: number[] }>;
     readonly zLayer: number | null;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
@@ -123,7 +123,7 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.zLayer;
     }
 
-    public get issueRegions(): Record<number, number[]> {
+    public get issueRegions(): Record<number, { hidden: boolean; points: number[] }> {
         return this.model.issueRegions;
     }
 

cvat-canvas/src/typescript/canvasModel.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -172,7 +172,7 @@ export enum Mode {
 export interface CanvasModel {
     readonly imageBitmap: boolean;
     readonly image: Image | null;
-    readonly issueRegions: Record<number, number[]>;
+    readonly issueRegions: Record<number, { hidden: boolean; points: number[] }>;
     readonly objects: any[];
     readonly zLayer: number | null;
     readonly gridSize: Size;
@@ -193,7 +193,7 @@ export interface CanvasModel {
     move(topOffset: number, leftOffset: number): void;
 
     setup(frameData: any, objectStates: any[], zLayer: number): void;
-    setupIssueRegions(issueRegions: Record<number, number[]>): void;
+    setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void;
     activate(clientID: number | null, attributeID: number | null): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding: number): void;
@@ -234,7 +234,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         gridSize: Size;
         left: number;
         objects: any[];
-        issueRegions: Record<number, number[]>;
+        issueRegions: Record<number, { hidden: boolean; points: number[] }>;
         scale: number;
         top: number;
         zLayer: number | null;
@@ -353,6 +353,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
 
         this.notify(UpdateReasons.FITTED_CANVAS);
         this.notify(UpdateReasons.OBJECTS_UPDATED);
+        this.notify(UpdateReasons.ISSUE_REGIONS_UPDATED);
     }
 
     public bitmap(enabled: boolean): void {
@@ -445,7 +446,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             });
     }
 
-    public setupIssueRegions(issueRegions: Record<number, number[]>): void {
+    public setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void {
         this.data.issueRegions = issueRegions;
         this.notify(UpdateReasons.ISSUE_REGIONS_UPDATED);
     }
@@ -756,7 +757,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         return this.data.image;
     }
 
-    public get issueRegions(): Record<number, number[]> {
+    public get issueRegions(): Record<number, { hidden: boolean; points: number[] }> {
         return { ...this.data.issueRegions };
     }
 

cvat-canvas/src/typescript/canvasView.ts

@@ -606,7 +606,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
     }
 
-    private setupIssueRegions(issueRegions: Record<number, number[]>): void {
+    private setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void {
         for (const issueRegion of Object.keys(this.drawnIssueRegions)) {
             if (!(issueRegion in issueRegions) || !+issueRegion) {
                 this.drawnIssueRegions[+issueRegion].remove();
@@ -616,7 +616,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         for (const issueRegion of Object.keys(issueRegions)) {
             if (issueRegion in this.drawnIssueRegions) continue;
-            const points = this.translateToCanvas(issueRegions[+issueRegion]);
+            const points = this.translateToCanvas(issueRegions[+issueRegion].points);
             if (points.length === 2) {
                 this.drawnIssueRegions[+issueRegion] = this.adoptedContent
                     .circle((consts.BASE_POINT_SIZE * 3 * 2) / this.geometry.scale)
@@ -656,6 +656,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         'stroke-width': `${consts.BASE_STROKE_WIDTH / this.geometry.scale}`,
                     });
             }
+
+            if (issueRegions[+issueRegion].hidden) {
+                this.drawnIssueRegions[+issueRegion].style({ display: 'none' });
+            }
         }
     }
 
@@ -1263,8 +1267,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
         } else if (reason === UpdateReasons.FITTED_CANVAS) {
             // Canvas geometry is going to be changed. Old object positions aren't valid any more
             this.setupObjects([]);
+            this.setupIssueRegions({});
             this.moveCanvas();
             this.resizeCanvas();
+            this.canvas.dispatchEvent(
+                new CustomEvent('canvas.reshape', {
+                    bubbles: false,
+                    cancelable: true,
+                }),
+            );
         } else if ([UpdateReasons.IMAGE_ZOOMED, UpdateReasons.IMAGE_FITTED].includes(reason)) {
             this.moveCanvas();
             this.transformCanvas();

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/canvas/canvas-context-menu.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -10,6 +10,7 @@ import { MenuInfo } from 'rc-menu/lib/interface';
 
 import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
 import { Workspace } from 'reducers/interfaces';
+import { rotatePoint } from 'utils/math';
 import consts from 'consts';
 
 interface Props {
@@ -106,7 +107,29 @@ export default function CanvasContextMenu(props: Props): JSX.Element | null {
                     );
                     if (param.key === ReviewContextMenuKeys.OPEN_ISSUE) {
                         if (state) {
-                            onStartIssue(state.points);
+                            let { points } = state;
+                            if (['ellipse', 'rectangle'].includes(state.shapeType)) {
+                                const [cx, cy] = state.shapeType === 'ellipse' ? state.points : [
+                                    (state.points[0] + state.points[2]) / 2,
+                                    (state.points[1] + state.points[3]) / 2,
+                                ];
+                                const [rx, ry] = [state.points[2] - cx, cy - state.points[3]];
+                                points = state.shapeType === 'ellipse' ? [
+                                    state.points[0] - rx,
+                                    state.points[1] - ry,
+                                    state.points[0] + rx,
+                                    state.points[1] + ry,
+                                ] : state.points;
+
+                                points = [
+                                    [points[0], points[1]],
+                                    [points[2], points[1]],
+                                    [points[2], points[3]],
+                                    [points[0], points[3]],
+                                ].map(([x, y]: number[]) => rotatePoint(x, y, state.rotation, cx, cy)).flat();
+                            }
+
+                            onStartIssue(points);
                         }
                     } else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_POSITION) {
                         if (state) {

cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx

@@ -32,7 +32,6 @@ interface Props {
     activatedStateID: number | null;
     activatedAttributeID: number | null;
     annotations: any[];
-    frameIssues: any[] | null;
     frameData: any;
     frameAngle: number;
     frameFetching: boolean;
@@ -136,7 +135,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         });
 
         this.initialSetup();
-        this.updateIssueRegions();
         this.updateCanvas();
     }
 
@@ -148,7 +146,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             outlined,
             outlineColor,
             showBitmap,
-            frameIssues,
             frameData,
             frameAngle,
             annotations,
@@ -256,10 +253,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             }
         }
 
-        if (prevProps.frameIssues !== frameIssues) {
-            this.updateIssueRegions();
-        }
-
         if (
             prevProps.annotations !== annotations ||
             prevProps.frameData !== frameData ||
@@ -684,23 +677,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         }
     }
 
-    private updateIssueRegions(): void {
-        const { frameIssues } = this.props;
-        const { canvasInstance } = this.props as { canvasInstance: Canvas };
-        if (frameIssues === null) {
-            canvasInstance.setupIssueRegions({});
-        } else {
-            const regions = frameIssues.reduce((acc: Record<number, number[]>, issue: any): Record<
-            number,
-            number[]
-            > => {
-                acc[issue.id] = issue.position;
-                return acc;
-            }, {});
-            canvasInstance.setupIssueRegions(regions);
-        }
-    }
-
     private updateCanvas(): void {
         const {
             curZLayer, annotations, frameData, canvasInstance,

cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -16,7 +16,7 @@ interface Props {
     selectIssuePosition(enabled: boolean): void;
 }
 
-function ResizeControl(props: Props): JSX.Element {
+function CreateIssueControl(props: Props): JSX.Element {
     const { activeControl, canvasInstance, selectIssuePosition } = props;
 
     return (
@@ -43,4 +43,4 @@ function ResizeControl(props: Props): JSX.Element {
     );
 }
 
-export default React.memo(ResizeControl);
+export default React.memo(CreateIssueControl);