CVAT 3D Milestone-5 (cvat-ai#3079)

3D bounding box manipulation: side view, top view, front view surrounding the object.
Allow user to place 3D bounding boxes & tag labels on specific area using point cloud.

Co-authored-by: cdp <cdp123>
Co-authored-by: Jayraj <[email protected]>

Author: manasars

.github/workflows/main.yml

@@ -168,7 +168,11 @@ jobs:
             npx cypress run --headless --browser chrome --spec 'cypress/integration/${{ matrix.specs }}/**/*.js'
             mv ./.nyc_output/out.json ./.nyc_output/out_${{ matrix.specs }}.json
           else
-            npx cypress run --headless --browser chrome --env coverage=false --spec 'cypress/integration/${{ matrix.specs }}/**/*.js'
+            if [[ ${{ matrix.specs }} != 'canvas3d_functionality' ]]; then
+              npx cypress run --headless --browser chrome --env coverage=false --spec 'cypress/integration/${{ matrix.specs }}/**/*.js'
+            else
+              npx cypress run --browser chrome --env coverage=false --spec 'cypress/integration/${{ matrix.specs }}/**/*.js'
+            fi
           fi
       - name: Creating a log file from "cvat" container logs
         if: failure()

README.md

@@ -164,7 +164,7 @@ Other ways to ask questions and get our support:
   vision AI platform that fully integrates CVAT with scalable data processing
   and parallelized training pipelines.
 - [DataIsKey](https://dataiskey.eu/annotation-tool/) uses CVAT as their prime data labeling tool
-to offer annotation services for projects of any size. 
+  to offer annotation services for projects of any size.
 
 <!-- prettier-ignore-start -->
 <!-- Badges -->

cvat-canvas3d/README.md

@@ -26,11 +26,20 @@ npm run build -- --mode=development     # without a minification
 
 ```ts
 interface Canvas3d {
-  html(): HTMLDivElement;
-  setup(frameData: any): void;
-  mode(): Mode;
+  html(): ViewsDOM;
+  setup(frameData: any, objectStates: any[]): void;
   isAbleToChangeFrame(): boolean;
+  mode(): Mode;
   render(): void;
+  keyControls(keys: KeyboardEvent): void;
+  draw(drawData: DrawData): void;
+  cancel(): void;
+  dragCanvas(enable: boolean): void;
+  activate(clientID: number | null, attributeID?: number): void;
+  configureShapes(shapeProperties: ShapeProperties): void;
+  fitCanvas(): void;
+  fit(): void;
+  group(groupData: GroupData): void;
 }
 ```
 
@@ -44,5 +53,9 @@ console.log('Version ', window.canvas.CanvasVersion);
 console.log('Current mode is ', window.canvas.mode());
 
 // Put canvas to a html container
-htmlContainer.appendChild(canvas.html());
+const views = canvas.html();
+htmlContainer.appendChild(views.perspective);
+htmlContainer.appendChild(views.top);
+htmlContainer.appendChild(views.side);
+htmlContainer.appendChild(views.front);
 ```

cvat-canvas3d/src/typescript/canvas3d.ts

@@ -5,30 +5,42 @@
 import pjson from '../../package.json';
 import { Canvas3dController, Canvas3dControllerImpl } from './canvas3dController';
 import {
-    Canvas3dModel, Canvas3dModelImpl, Mode, DrawData, ViewType, MouseInteraction,
+    Canvas3dModel,
+    Canvas3dModelImpl,
+    Mode,
+    DrawData,
+    ViewType,
+    MouseInteraction,
+    ShapeProperties,
+    GroupData,
 } from './canvas3dModel';
 import {
-    Canvas3dView, Canvas3dViewImpl, ViewsDOM, CAMERA_ACTION,
+    Canvas3dView, Canvas3dViewImpl, ViewsDOM, CameraAction,
 } from './canvas3dView';
 import { Master } from './master';
 
 const Canvas3dVersion = pjson.version;
 
 interface Canvas3d {
     html(): ViewsDOM;
-    setup(frameData: any): void;
+    setup(frameData: any, objectStates: any[]): void;
     isAbleToChangeFrame(): boolean;
     mode(): Mode;
     render(): void;
     keyControls(keys: KeyboardEvent): void;
-    mouseControls(type: string, event: MouseEvent): void;
     draw(drawData: DrawData): void;
     cancel(): void;
+    dragCanvas(enable: boolean): void;
+    activate(clientID: number | null, attributeID?: number): void;
+    configureShapes(shapeProperties: ShapeProperties): void;
+    fitCanvas(): void;
+    fit(): void;
+    group(groupData: GroupData): void;
 }
 
 class Canvas3dImpl implements Canvas3d {
-    private model: Canvas3dModel & Master;
-    private controller: Canvas3dController;
+    private readonly model: Canvas3dModel & Master;
+    private readonly controller: Canvas3dController;
     private view: Canvas3dView;
 
     public constructor() {
@@ -45,10 +57,6 @@ class Canvas3dImpl implements Canvas3d {
         this.view.keyControls(keys);
     }
 
-    public mouseControls(type: MouseInteraction, event: MouseEvent): void {
-        this.view.mouseControls(type, event);
-    }
-
     public render(): void {
         this.view.render();
     }
@@ -57,23 +65,47 @@ class Canvas3dImpl implements Canvas3d {
         this.model.draw(drawData);
     }
 
-    public setup(frameData: any): void {
-        this.model.setup(frameData);
+    public setup(frameData: any, objectStates: any[]): void {
+        this.model.setup(frameData, objectStates);
     }
 
     public mode(): Mode {
         return this.model.mode;
     }
 
+    public group(groupData: GroupData): void {
+        this.model.group(groupData);
+    }
+
     public isAbleToChangeFrame(): boolean {
         return this.model.isAbleToChangeFrame();
     }
 
     public cancel(): void {
         this.model.cancel();
     }
+
+    public dragCanvas(enable: boolean): void {
+        this.model.dragCanvas(enable);
+    }
+
+    public configureShapes(shapeProperties: ShapeProperties): void {
+        this.model.configureShapes(shapeProperties);
+    }
+
+    public activate(clientID: number | null, attributeID: number | null = null): void {
+        this.model.activate(String(clientID), attributeID);
+    }
+
+    public fit(): void {
+        this.model.fit();
+    }
+
+    public fitCanvas(): void {
+        this.model.fit();
+    }
 }
 
 export {
-    Canvas3dImpl as Canvas3d, Canvas3dVersion, ViewType, MouseInteraction, CAMERA_ACTION,
+    Canvas3dImpl as Canvas3d, Canvas3dVersion, ViewType, MouseInteraction, CameraAction, ViewsDOM,
 };

cvat-canvas3d/src/typescript/canvas3dController.ts

@@ -2,11 +2,18 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { Canvas3dModel, Mode, DrawData } from './canvas3dModel';
+import {
+    Canvas3dModel, Mode, DrawData, ActiveElement, FocusData, GroupData,
+} from './canvas3dModel';
 
 export interface Canvas3dController {
     readonly drawData: DrawData;
+    readonly activeElement: ActiveElement;
+    readonly selected: any;
+    readonly focused: FocusData;
+    readonly groupData: GroupData;
     mode: Mode;
+    group(groupData: GroupData): void;
 }
 
 export class Canvas3dControllerImpl implements Canvas3dController {
@@ -27,4 +34,24 @@ export class Canvas3dControllerImpl implements Canvas3dController {
     public get drawData(): DrawData {
         return this.model.data.drawData;
     }
+
+    public get activeElement(): ActiveElement {
+        return this.model.data.activeElement;
+    }
+
+    public get selected(): any {
+        return this.model.data.selected;
+    }
+
+    public get focused(): any {
+        return this.model.data.focusData;
+    }
+
+    public get groupData(): GroupData {
+        return this.model.groupData;
+    }
+
+    public group(groupData: GroupData): void {
+        this.model.group(groupData);
+    }
 }