Grid view and multiple context images supported (cvat-ai#5542)

### Motivation and context <img width="1918" alt="image" src="https://user-images.githubusercontent.com/40690378/210207552-7a7dcb0b-4f0c-4cb6-a030-9522ff68a710.png"> <img width="1920" alt="image" src="https://user-images.githubusercontent.com/40690378/210207577-d05503e8-71d5-4e5c-aecd-03e5a762d7b1.png">
retailnext · Jul 1, 2023 · bf11a60 · bf11a60
1 parent e619a24
commit bf11a60
Show file tree

Hide file tree

Showing 80 changed files with 2,571 additions and 2,353 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   (<https://github.com/opencv/cvat/pull/5535>)
 - \[SDK\] Class to represent a project as a PyTorch dataset
   (<https://github.com/opencv/cvat/pull/5523>)
+- Grid view and multiple context images supported (<https://github.com/opencv/cvat/pull/5542>)
 - Support for custom file to job splits in tasks (server API & SDK only)
   (<https://github.com/opencv/cvat/pull/5536>)
 - \[SDK\] A PyTorch adapter setting to disable cache updates

diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

diff --git a/cvat-canvas/src/scss/canvas.scss b/cvat-canvas/src/scss/canvas.scss
@@ -1,5 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -290,21 +290,6 @@ g.cvat_canvas_shape_occluded {
     position: relative;
 }
 
-#cvat_canvas_loading_animation {
-    z-index: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-#cvat_canvas_loading_circle {
-    fill-opacity: 0;
-    stroke: #09c;
-    stroke-width: 3px;
-    stroke-dasharray: 50;
-    animation: loadingAnimation 1s linear infinite;
-}
-
 #cvat_canvas_text_content {
     text-rendering: optimizeSpeed;
     position: absolute;

diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
@@ -527,7 +527,6 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 if (typeof exception !== 'number' || exception === this.data.imageID) {
                     this.notify(UpdateReasons.DATA_FAILED);
                 }
-                throw exception;
             });
     }
 

diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -1,5 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -66,7 +66,6 @@ export interface CanvasView {
 }
 
 export class CanvasViewImpl implements CanvasView, Listener {
-    private loadingAnimation: SVGSVGElement;
     private text: SVGSVGElement;
     private adoptedText: SVG.Container;
     private background: HTMLCanvasElement;
@@ -1082,7 +1081,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
         };
 
         // Create HTML elements
-        this.loadingAnimation = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         this.text = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         this.adoptedText = SVG.adopt((this.text as any) as HTMLElement) as SVG.Container;
         this.background = window.document.createElement('canvas');
@@ -1101,8 +1099,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.canvas = window.document.createElement('div');
 
-        const loadingCircle: SVGCircleElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-
         const gridDefs: SVGDefsElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'defs');
         const gridRect: SVGRectElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 
@@ -1129,13 +1125,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 patternUnits: 'userSpaceOnUse',
             });
 
-        // Setup loading animation
-        this.loadingAnimation.setAttribute('id', 'cvat_canvas_loading_animation');
-        loadingCircle.setAttribute('id', 'cvat_canvas_loading_circle');
-        loadingCircle.setAttribute('r', '30');
-        loadingCircle.setAttribute('cx', '50%');
-        loadingCircle.setAttribute('cy', '50%');
-
         // Setup grid
         this.grid.setAttribute('id', 'cvat_canvas_grid');
         this.grid.setAttribute('version', '2');
@@ -1166,14 +1155,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.canvas.setAttribute('id', 'cvat_canvas_wrapper');
 
         // Unite created HTML elements together
-        this.loadingAnimation.appendChild(loadingCircle);
         this.grid.appendChild(gridDefs);
         this.grid.appendChild(gridRect);
 
         gridDefs.appendChild(this.gridPattern);
         this.gridPattern.appendChild(this.gridPath);
 
-        this.canvas.appendChild(this.loadingAnimation);
         this.canvas.appendChild(this.text);
         this.canvas.appendChild(this.background);
         this.canvas.appendChild(this.masksContent);
@@ -1412,10 +1399,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
         } else if (reason === UpdateReasons.IMAGE_CHANGED) {
             const { image } = model;
-            if (!image) {
-                this.loadingAnimation.classList.remove('cvat_canvas_hidden');
-            } else {
-                this.loadingAnimation.classList.add('cvat_canvas_hidden');
+            if (image) {
                 const ctx = this.background.getContext('2d');
                 this.background.setAttribute('width', `${image.renderWidth}px`);
                 this.background.setAttribute('height', `${image.renderHeight}px`);

diff --git a/cvat-canvas3d/package.json b/cvat-canvas3d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas3d",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas3D library",
   "main": "src/canvas3d.ts",
   "scripts": {

diff --git a/cvat-canvas3d/src/typescript/canvas3dModel.ts b/cvat-canvas3d/src/typescript/canvas3dModel.ts
@@ -238,7 +238,10 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
             })
             .catch((exception: any): void => {
                 this.data.isFrameUpdating = false;
-                throw exception;
+                // don't notify when the frame is no longer needed
+                if (typeof exception !== 'number' || exception === this.data.imageID) {
+                    throw exception;
+                }
             });
     }
 

diff --git a/cvat-canvas3d/src/typescript/canvas3dView.ts b/cvat-canvas3d/src/typescript/canvas3dView.ts
@@ -1,5 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -107,6 +107,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
     private cube: CuboidModel;
     private isPerspectiveBeingDragged: boolean;
     private activatedElementID: number | null;
+    private isCtrlDown: boolean;
     private drawnObjects: Record<number, {
         data: DrawnObjectData;
         cuboid: CuboidModel;
@@ -184,6 +185,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
             },
         };
 
+        this.isCtrlDown = false;
         this.action = {
             scan: null,
             frameCoordinates: {
@@ -263,6 +265,20 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         const canvasSideView = this.views.side.renderer.domElement;
         const canvasFrontView = this.views.front.renderer.domElement;
 
+        [
+            [canvasPerspectiveView, this.views.perspective.scene],
+            [canvasTopView, this.views.top.scene],
+            [canvasSideView, this.views.side.scene],
+            [canvasFrontView, this.views.front.scene],
+        ].forEach(([view, scene]) => {
+            Object.defineProperty(view, 'scene', {
+                value: scene,
+                enumerable: false,
+                configurable: false,
+                writable: false,
+            });
+        });
+
         canvasPerspectiveView.addEventListener('contextmenu', (e: MouseEvent): void => {
             if (this.model.data.activeElement.clientID !== null) {
                 this.dispatchEvent(
@@ -330,6 +346,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
 
         canvasPerspectiveView.addEventListener('mousemove', (event: MouseEvent): void => {
             event.preventDefault();
+            this.isCtrlDown = event.ctrlKey;
             if (this.mode === Mode.DRAG_CANVAS) return;
             const canvas = this.views.perspective.renderer.domElement;
             const rect = canvas.getBoundingClientRect();
@@ -539,7 +556,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
     }
 
     private setDefaultZoom(): void {
-        if (this.model.data.activeElement === null) {
+        if (this.model.data.activeElement.clientID === null) {
             Object.keys(this.views).forEach((view: string): void => {
                 const viewType = this.views[view as keyof Views];
                 if (view !== ViewType.PERSPECTIVE) {
@@ -554,7 +571,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 canvasTop.offsetWidth / (bboxtop.max.x - bboxtop.min.x),
                 canvasTop.offsetHeight / (bboxtop.max.y - bboxtop.min.y),
             ) * 0.4;
-            this.views.top.camera.zoom = x1 / 100;
+            this.views.top.camera.zoom = x1 / 50;
             this.views.top.camera.updateProjectionMatrix();
             this.views.top.camera.updateMatrix();
             this.updateHelperPointsSize(ViewType.TOP);
@@ -565,7 +582,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 canvasFront.offsetWidth / (bboxfront.max.y - bboxfront.min.y),
                 canvasFront.offsetHeight / (bboxfront.max.z - bboxfront.min.z),
             ) * 0.4;
-            this.views.front.camera.zoom = x2 / 100;
+            this.views.front.camera.zoom = x2 / 50;
             this.views.front.camera.updateProjectionMatrix();
             this.views.front.camera.updateMatrix();
             this.updateHelperPointsSize(ViewType.FRONT);
@@ -576,7 +593,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 canvasSide.offsetWidth / (bboxside.max.x - bboxside.min.x),
                 canvasSide.offsetHeight / (bboxside.max.z - bboxside.min.z),
             ) * 0.4;
-            this.views.side.camera.zoom = x3 / 100;
+            this.views.side.camera.zoom = x3 / 50;
             this.views.side.camera.updateProjectionMatrix();
             this.views.side.camera.updateMatrix();
             this.updateHelperPointsSize(ViewType.SIDE);
@@ -842,7 +859,8 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
             this.activatedElementID = +clientID;
             this.rotatePlane(null, null);
             this.detachCamera(null);
-            this.setDefaultZoom();
+            [ViewType.TOP, ViewType.SIDE, ViewType.FRONT]
+                .forEach((type) => this.updateHelperPointsSize(type));
         }
     }
 
@@ -1030,6 +1048,9 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         } else if (reason === UpdateReasons.SHAPE_ACTIVATED) {
             this.deactivateObject();
             this.activateObject();
+            if (this.activatedElementID) {
+                this.setDefaultZoom();
+            }
         } else if (reason === UpdateReasons.DRAW) {
             const data: DrawData = this.controller.drawData;
             if (Number.isInteger(data.redraw)) {
@@ -1385,7 +1406,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 const { x, y, z } = intersection.point;
                 object.position.set(x, y, z);
             }
-        } else if (this.mode === Mode.IDLE && !this.isPerspectiveBeingDragged) {
+        } else if (this.mode === Mode.IDLE && !this.isPerspectiveBeingDragged && !this.isCtrlDown) {
             const { renderer } = this.views.perspective.rayCaster;
             const intersects = renderer.intersectObjects(this.getAllVisibleCuboids(), false);
             if (intersects.length !== 0) {

diff --git a/cvat-core/package.json b/cvat-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "7.5.0",
+  "version": "8.0.0",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "src/api.ts",
   "scripts": {