3D Performance issue fixed: Multiple selection the same object or null (#5411)

Related #3438

CHANGELOG.md

@@ -85,6 +85,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Added force logout on CVAT app start if token is missing (<https://github.com/opencv/cvat/pull/5331>)
 - Drawing issues on 3D canvas (<https://github.com/opencv/cvat/pull/5410>)
 - Missed token with using social account authentication (<https://github.com/opencv/cvat/pull/5344>)
+- The same object on 3D scene or `null` selected each click (PERFORMANCE) (<https://github.com/opencv/cvat/pull/5411>)
 - An exception when run export for an empty task (<https://github.com/opencv/cvat/pull/5396>)
 - Fixed FBRS serverless function runtime error on images with alpha channel (<https://github.com/opencv/cvat/pull/5384>)
 - Attaching manifest with custom name (<https://github.com/opencv/cvat/pull/5377>)

cvat-canvas3d/package.json

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

cvat-canvas3d/src/typescript/canvas3dController.ts

@@ -4,14 +4,13 @@
 // SPDX-License-Identifier: MIT
 
 import {
-    Canvas3dModel, Mode, DrawData, ActiveElement, FocusData, GroupData, Configuration,
+    Canvas3dModel, Mode, DrawData, ActiveElement, GroupData, Configuration,
 } from './canvas3dModel';
 
 export interface Canvas3dController {
     readonly drawData: DrawData;
     readonly activeElement: ActiveElement;
     readonly selected: any;
-    readonly focused: FocusData;
     readonly groupData: GroupData;
     readonly configuration: Configuration;
     readonly imageIsDeleted: boolean;
@@ -46,10 +45,6 @@ export class Canvas3dControllerImpl implements Canvas3dController {
         return this.model.data.selected;
     }
 
-    public get focused(): any {
-        return this.model.data.focusData;
-    }
-
     public get imageIsDeleted(): any {
         return this.model.imageIsDeleted;
     }

cvat-canvas3d/src/typescript/canvas3dModel.ts

@@ -62,10 +62,6 @@ export enum MouseInteraction {
     HOVER = 'hover',
 }
 
-export interface FocusData {
-    clientID: string | null;
-}
-
 export interface ShapeProperties {
     opacity: number;
     outlined: boolean;
@@ -113,7 +109,6 @@ export interface Canvas3dDataModel {
     exception: Error | null;
     objects: any[];
     groupedObjects: any[];
-    focusData: FocusData;
     selected: any;
     shapeProperties: ShapeProperties;
     groupData: GroupData;
@@ -169,9 +164,6 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
             },
             mode: Mode.IDLE,
             exception: null,
-            focusData: {
-                clientID: null,
-            },
             groupData: {
                 enabled: false,
                 grouped: [],

cvat-canvas3d/src/typescript/canvas3dView.ts

@@ -225,13 +225,13 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         const canvasFrontView = this.views.front.renderer.domElement;
 
         canvasPerspectiveView.addEventListener('contextmenu', (e: MouseEvent): void => {
-            if (this.controller.focused.clientID !== null) {
+            if (this.model.data.activeElement.clientID !== null) {
                 this.dispatchEvent(
                     new CustomEvent('canvas.contextmenu', {
                         bubbles: false,
                         cancelable: true,
                         detail: {
-                            clientID: Number(this.controller.focused.clientID),
+                            clientID: Number(this.model.data.activeElement.clientID),
                             clientX: e.clientX,
                             clientY: e.clientY,
                         },
@@ -335,15 +335,18 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 if (intersects.length === 0) {
                     this.setHelperVisibility(false);
                 }
-                this.dispatchEvent(
+                const intersectedClientID = intersects[0]?.object?.name || null;
-                    new CustomEvent('canvas.selected', {
+                if (this.model.data.activeElement.clientID !== intersectedClientID) {
-                        bubbles: false,
+                    this.dispatchEvent(
-                        cancelable: true,
+                        new CustomEvent('canvas.selected', {
-                        detail: {
+                            bubbles: false,
-                            clientID: intersects.length !== 0 ? Number(intersects[0].object.name) : null,
+                            cancelable: true,
-                        },
+                            detail: {
-                    }),
+                                clientID: typeof intersectedClientID === 'string' ? +intersectedClientID : null,
-                );
+                            },
+                        }),
+                    );
+                }
             }
         });
 
@@ -356,7 +359,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                     this.views.perspective.scene.children[0].children,
                     false,
                 );
-                if (intersects.length !== 0 || this.controller.focused.clientID !== null) {
+                if (intersects.length !== 0 || this.model.data.activeElement.clientID !== null) {
                     this.setDefaultZoom();
                 } else {
                     const { x, y, z } = this.action.frameCoordinates;
@@ -1261,14 +1264,12 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
             const intersects = renderer.intersectObjects(children, false);
             if (intersects.length !== 0) {
                 const clientID = intersects[0].object.name;
-                if (clientID === undefined || clientID === '' || this.model.data.focusData.clientID === clientID) {
+                if (clientID === undefined || clientID === '' || this.model.data.activeElement.clientID === clientID) {
                     return;
                 }
                 if (!this.action.selectable) return;
-                this.resetColor();
                 const object = this.views.perspective.scene.getObjectByName(clientID);
                 if (object === undefined) return;
-                this.model.data.focusData.clientID = clientID;
                 this.dispatchEvent(
                     new CustomEvent('canvas.selected', {
                         bubbles: false,
@@ -1278,23 +1279,10 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                         },
                     }),
                 );
-            } else if (this.model.data.focusData.clientID !== null) {
-                this.resetColor();
-                this.model.data.focusData.clientID = null;
             }
         }
     };
 
-    private resetColor(): void {
-        this.model.data.objects.forEach((object: any): void => {
-            const { clientID } = object;
-            const target = this.views.perspective.scene.getObjectByName(String(clientID));
-            if (target) {
-                ((target as THREE.Mesh).material as THREE.MeshBasicMaterial).color.set((target as any).originalColor);
-            }
-        });
-    }
-
     public render(): void {
         Object.keys(this.views).forEach((view: string): void => {
             const viewType = this.views[view as keyof Views];