Grid view and multiple context images supported

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>)
 - \[SDK\] A PyTorch adapter setting to disable cache updates
  (<https://github.com/opencv/cvat/pull/5549>)
 

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": {

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;

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;
  });
  }
 

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`);

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": {

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;
+ }
  });
  }
 

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();
@@ -1385,7 +1402,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) {

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
  "name": "cvat-core",
- "version": "7.4.0",
+ "version": "8.4.0",
  "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
  "main": "src/api.ts",
  "scripts": {