From 50ab2c1bd36d5fcf8d32c1ff6e1d17b7c25796a8 Mon Sep 17 00:00:00 2001 From: zhangyang Date: Fri, 25 Oct 2024 10:10:16 +0800 Subject: [PATCH 1/2] fix: Fixed 3D view highlightColor issue --- packages/lb-annotation/src/core/pointCloud/index.ts | 4 ++-- .../src/components/pointCloudView/PointCloud3DView.tsx | 5 ++++- .../src/components/pointCloudView/PointCloudListener.tsx | 1 + .../pointCloudView/hooks/useUpdatePointCloudColor.ts | 6 +++++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/lb-annotation/src/core/pointCloud/index.ts b/packages/lb-annotation/src/core/pointCloud/index.ts index 50ed0faf..5d7d2dcf 100644 --- a/packages/lb-annotation/src/core/pointCloud/index.ts +++ b/packages/lb-annotation/src/core/pointCloud/index.ts @@ -267,10 +267,10 @@ 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); }); diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx index bf5e79bb..8c780b68 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx @@ -250,8 +250,11 @@ const PointCloud3D: React.FC = ({ 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. + setTimeout(() => { + ptCtx.mainViewInstance?.setHighlightColor(selectedId); + }, 100); }, [selectedBox?.info?.id]); useEffect(() => { diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx index facacdab..08825aa1 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx @@ -322,6 +322,7 @@ const PointCloudListener: React.FC = ({ updateSelectedBox(selectBox); if (ptCtx.mainViewInstance && ptCtx.selectedPointCloudBox) { ptCtx.mainViewInstance.generateBox(ptCtx.selectedPointCloudBox); + ptCtx.mainViewInstance.setHighlightColor(selectBox.id); } } }; diff --git a/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts b/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts index 4f81f2f7..3dbb5229 100644 --- a/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts +++ b/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts @@ -125,14 +125,18 @@ 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); + } } /** From a279f0647131ad158b282897e563857ba771e7c5 Mon Sep 17 00:00:00 2001 From: zhangyang Date: Fri, 25 Oct 2024 11:14:26 +0800 Subject: [PATCH 2/2] fix: Fixed 3D view highlightColor issue --- packages/lb-annotation/src/core/pointCloud/index.ts | 1 - .../src/components/pointCloudView/PointCloud3DView.tsx | 6 +++--- .../src/components/pointCloudView/PointCloudListener.tsx | 1 + .../components/pointCloudView/hooks/usePointCloudViews.ts | 1 + .../pointCloudView/hooks/useUpdatePointCloudColor.ts | 1 + 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/lb-annotation/src/core/pointCloud/index.ts b/packages/lb-annotation/src/core/pointCloud/index.ts index 5d7d2dcf..e11da6e2 100644 --- a/packages/lb-annotation/src/core/pointCloud/index.ts +++ b/packages/lb-annotation/src/core/pointCloud/index.ts @@ -275,7 +275,6 @@ export class PointCloud extends EventListener { this.updateMaterialColor(grandson, color); }); }); - this.render(); } private updateMaterialColor(child: THREE.Object3D, color: THREE.ColorRepresentation) { diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx index 8c780b68..ae3a0e81 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx @@ -252,9 +252,9 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig ptCtx.mainViewInstance?.updateCameraZoom(zoom); } // when create new box, need to wait for a moment to init box. - setTimeout(() => { - ptCtx.mainViewInstance?.setHighlightColor(selectedId); - }, 100); + ptCtx.mainViewInstance?.setHighlightColor(selectedId); + ptCtx.mainViewInstance?.render(); + }, [selectedBox?.info?.id]); useEffect(() => { diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx index 08825aa1..7ab0e4a9 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx @@ -323,6 +323,7 @@ const PointCloudListener: React.FC = ({ if (ptCtx.mainViewInstance && ptCtx.selectedPointCloudBox) { ptCtx.mainViewInstance.generateBox(ptCtx.selectedPointCloudBox); ptCtx.mainViewInstance.setHighlightColor(selectBox.id); + ptCtx.mainViewInstance.render(); } } }; diff --git a/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts b/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts index 2b366dd4..870e830f 100644 --- a/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts +++ b/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; diff --git a/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts b/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts index 3dbb5229..260f187e 100644 --- a/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts +++ b/packages/lb-components/src/components/pointCloudView/hooks/useUpdatePointCloudColor.ts @@ -136,6 +136,7 @@ const useUpdatePointCloudColor = (setResourceLoading: any, config: any) => { mainViewInstance.generateBoxes(pointCloudBoxList); if (newSelectedBox) { mainViewInstance.setHighlightColor(newSelectedBox.id); + mainViewInstance.render(); } }