From bf7216203116b1353d1388d3c137c388357851e8 Mon Sep 17 00:00:00 2001 From: Original-Recipe-Chicken Date: Wed, 30 Oct 2024 11:38:07 +0800 Subject: [PATCH] feat: Unified parameter submission --- .../pointCloudView/PointCloud3DView.tsx | 37 ++++++------- .../hooks/usePointCloudAttribute.ts | 55 +++++++++++++++++++ .../src/components/pointCloudView/index.tsx | 2 +- .../lb-components/src/store/annotation/map.ts | 1 + 4 files changed, 75 insertions(+), 20 deletions(-) create mode 100644 packages/lb-components/src/components/pointCloudView/hooks/usePointCloudAttribute.ts diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx index ae3a0e814..f9e44f8f1 100644 --- a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx +++ b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx @@ -31,6 +31,7 @@ import PointCloudSizeSlider from './components/PointCloudSizeSlider'; import TitleButton from './components/TitleButton'; import { LeftOutlined } from '@ant-design/icons'; import { useToolStyleContext } from '@/hooks/useToolStyle'; +import { usePointCloudAttribute } from './hooks/usePointCloudAttribute'; const EKeyCode = cKeyCode.default; const pointCloudID = 'LABELBEE-POINTCLOUD'; @@ -121,7 +122,12 @@ const PointCloud3DSideBar = ({ isEnlarge }: { isEnlarge?: boolean }) => { ); }; -const PointCloud3D: React.FC = ({ currentData, config, highlightAttribute }) => { +const PointCloud3D: React.FC = ({ + currentData, + config, + highlightAttribute, + setResourceLoading, +}) => { const ptCtx = useContext(PointCloudContext); const [showDirection, setShowDirection] = useState(true); const [isEnlarge, setIsEnlarge] = useState(false); @@ -131,6 +137,7 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig const { t } = useTranslation(); const { value: toolStyle } = useToolStyleContext(); const { hiddenText } = toolStyle || {}; + const { updatePointCloudAttribute } = usePointCloudAttribute(setResourceLoading, config); useEffect(() => { let pointCloud = ptCtx.mainViewInstance; @@ -194,7 +201,7 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig config, hiddenText, }); - pointCloud.setHandlerPipe({setSelectedIDs: ptCtx.setSelectedIDs, setNeedUpdateCenter}); + pointCloud.setHandlerPipe({ setSelectedIDs: ptCtx.setSelectedIDs, setNeedUpdateCenter }); ptCtx.setMainViewInstance(pointCloud); } } @@ -207,26 +214,19 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig if (ref.current && currentData?.url) { if (currentData.result && ptCtx.mainViewInstance) { let pointCloud = ptCtx.mainViewInstance; + const rectParamsList = PointCloudUtils.getRectParamsFromResultList(currentData.result); const boxParamsList = PointCloudUtils.getBoxParamsFromResultList(currentData.result); - - // Add Init Box - boxParamsList.forEach((v: IPointCloudBox) => { - const hex = toolStyleConverter.getColorFromConfig( - { attribute: v.attribute }, - { ...config, attributeConfigurable: true }, - {}, - )?.hex; - - pointCloud?.addBoxToSense(v, hex); - }); - pointCloud.render(); + const currentSelectInfo = boxParamsList.find((item) => item.id === ptCtx.selectedID); + if (currentSelectInfo) { + updatePointCloudAttribute(currentSelectInfo.attribute); + } + ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid); ptCtx.setPointCloudResult(boxParamsList); - const rectParamsList = PointCloudUtils.getRectParamsFromResultList(currentData.result); ptCtx.setRectList(rectParamsList); - ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid); + pointCloud.generateBoxes(boxParamsList); } } - }, [currentData, ptCtx.mainViewInstance]); + }, [currentData.result]); /** * Observe selectedID and reset camera to target top-view @@ -241,7 +241,7 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig if (!needUpdateCenter) { setNeedUpdateCenter(true); return; - }; + } if (selectedId !== undefined) { setTarget3DView(EPerspectiveView.Top); @@ -254,7 +254,6 @@ const PointCloud3D: React.FC = ({ currentData, config, highlig // when create new box, need to wait for a moment to init box. ptCtx.mainViewInstance?.setHighlightColor(selectedId); ptCtx.mainViewInstance?.render(); - }, [selectedBox?.info?.id]); useEffect(() => { diff --git a/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudAttribute.ts b/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudAttribute.ts new file mode 100644 index 000000000..6ce868ed2 --- /dev/null +++ b/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudAttribute.ts @@ -0,0 +1,55 @@ +import { useContext } from 'react'; +import { PointCloudContext } from '../PointCloudContext'; +import { useUpdatePointCloudColor } from './useUpdatePointCloudColor'; +import { useAttribute } from './useAttribute'; +import { usePolygon } from './usePolygon'; +import { useLine } from './useLine'; +import { useSphere } from './useSphere'; +import { useHistory } from './useHistory'; +import { usePointCloudViews } from './usePointCloudViews'; + +export const usePointCloudAttribute = (setResourceLoading: any, config: any) => { + const { updatePointCloudColor } = useUpdatePointCloudColor(setResourceLoading, config); + const { syncThreeViewsAttribute } = useAttribute(); + const { selectedPolygon } = usePolygon(); + const { selectedLine } = useLine(); + const { selectedSphere } = useSphere(); + const { updatePointCloudSphere } = useSphere(); + const { pushHistoryUnderUpdatePolygon, pushHistoryUnderUpdateLine } = useHistory(); + const { topViewSelectedChanged } = usePointCloudViews(); + const ptCtx = useContext(PointCloudContext); + + const updatePointCloudAttribute = (newAttribute: string) => { + syncThreeViewsAttribute(newAttribute); + + /** + * The logic for extracting the updated color of the original point cloud due to changes in the main attribute, + * which originally only supported single selection, now supports multiple selection, and merges to reduce the number of updates + */ + updatePointCloudColor(newAttribute); + + if (selectedPolygon) { + pushHistoryUnderUpdatePolygon({ ...selectedPolygon, attribute: newAttribute }); + } + if (selectedLine) { + pushHistoryUnderUpdateLine({ ...selectedLine, attribute: newAttribute }); + } + if (selectedSphere) { + const newSphereList = updatePointCloudSphere({ + ...selectedSphere, + attribute: newAttribute, + }); + if (ptCtx.mainViewInstance) { + ptCtx.mainViewInstance?.generateSpheres(newSphereList); + topViewSelectedChanged({ + newSelectedSphere: selectedSphere, + newSphereList: newSphereList, + }); + } + } + }; + + return { + updatePointCloudAttribute, + }; +}; diff --git a/packages/lb-components/src/components/pointCloudView/index.tsx b/packages/lb-components/src/components/pointCloudView/index.tsx index 7fd887cef..d4081267d 100644 --- a/packages/lb-components/src/components/pointCloudView/index.tsx +++ b/packages/lb-components/src/components/pointCloudView/index.tsx @@ -173,7 +173,7 @@ const PointCloudView: React.FC = (props) => {
- + {backAndSideView}
void; } export const a2MapStateToProps = (state: AppState) => {