feat: Unified parameter submission

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<IA2MapStateProps> = ({ currentData, config, highlightAttribute }) => {
+const PointCloud3D: React.FC<IA2MapStateProps> = ({
+  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<IA2MapStateProps> = ({ 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<IA2MapStateProps> = ({ 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<IA2MapStateProps> = ({ 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<IA2MapStateProps> = ({ currentData, config, highlig
     if (!needUpdateCenter) {
       setNeedUpdateCenter(true);
       return;
-    };
+    }
     if (selectedId !== undefined) {
       setTarget3DView(EPerspectiveView.Top);
 
@@ -254,7 +254,6 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ 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(() => {

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,
+  };
+};

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

@@ -173,7 +173,7 @@ const PointCloudView: React.FC<IProps> = (props) => {
 
           <div className={getClassName('point-cloud-content')}>
             <div className={getClassName('point-cloud-container', 'left')}>
-              <PointCloud3DView />
+              <PointCloud3DView setResourceLoading={setResourceLoading} />
               {backAndSideView}
             </div>
             <div

packages/lb-components/src/store/annotation/map.ts

@@ -32,6 +32,7 @@ export interface IA2MapStateProps extends IAnnotationStateProps {
   configString: string; // Easy for users to listener.
   highlightAttribute: string;
   loadPCDFileLoading: boolean;
+  setResourceLoading?: (loading: boolean) => void;
 }
 
 export const a2MapStateToProps = (state: AppState) => {