fix: Fixed 3D view highlightColor issue

packages/lb-annotation/src/core/pointCloud/index.ts

@@ -267,15 +267,14 @@ export class PointCloud extends EventListener {
     });
   }
 
-  public setHighlightColor(selectedId: string) {
+  public setHighlightColor(selectedId?: string) {
     this.scene.children.forEach((child) => {
       if (!(child instanceof THREE.Group)) return;
-      const color = child.name === `box${selectedId}` ? this.highlightColor : child.userData.defaultColor;
+      const color = selectedId && child.name === `box${selectedId}` ? this.highlightColor : child.userData.defaultColor;
       child.children.forEach((grandson) => {
         this.updateMaterialColor(grandson, color);
       });
     });
-    this.render();
   }
 
   private updateMaterialColor(child: THREE.Object3D<THREE.Event>, color: THREE.ColorRepresentation) {

packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx

@@ -250,8 +250,11 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config, highlig
        */
       const zoom = ptCtx.topViewInstance?.pointCloudInstance?.camera.zoom ?? 1;
       ptCtx.mainViewInstance?.updateCameraZoom(zoom);
-      ptCtx.mainViewInstance?.setHighlightColor(selectedId);
     }
+    // when create new box, need to wait for a moment to init box.
+    ptCtx.mainViewInstance?.setHighlightColor(selectedId);
+    ptCtx.mainViewInstance?.render();
+
   }, [selectedBox?.info?.id]);
 
   useEffect(() => {

packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx

@@ -322,6 +322,8 @@ const PointCloudListener: React.FC<IProps> = ({
         updateSelectedBox(selectBox);
         if (ptCtx.mainViewInstance && ptCtx.selectedPointCloudBox) {
           ptCtx.mainViewInstance.generateBox(ptCtx.selectedPointCloudBox);
+          ptCtx.mainViewInstance.setHighlightColor(selectBox.id);
+          ptCtx.mainViewInstance.render();
         }
       }
     };

packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts

@@ -581,6 +581,7 @@ export const synchronizeTopView = (
 
   // Control the 3D view data to create box
   mainViewInstance.generateBox(newBoxParams);
+  mainViewInstance.setHighlightColor(newBoxParams.id);
   mainViewInstance.render();
 
   const { pointCloud2dOperation, pointCloudInstance } = topViewInstance;

packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts

@@ -125,14 +125,19 @@ const useUpdatePointCloudColor = (setResourceLoading: any, config: any) => {
        * Update the relevant content of the original point cloud again
        * This method maintains the same judgment logic as the original topViewSlectedChanged, and only triggers an update when one box is selected
        */
+      let newSelectedBox;
       if (selectedIDs && selectedIDs.length === 1) {
-        const newSelectedBox = pointCloudBoxList.find((item) => item.id === selectedIDs[0]);
+        newSelectedBox = pointCloudBoxList.find((item) => item.id === selectedIDs[0]);
         topViewSelectedChanged({
           trigger,
           newSelectedBox,
         });
       }
       mainViewInstance.generateBoxes(pointCloudBoxList);
+      if (newSelectedBox) {
+        mainViewInstance.setHighlightColor(newSelectedBox.id);
+        mainViewInstance.render();
+      }
     }
 
     /**