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, ptCtx.mainViewInstance]);
 
   /**
    *  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/components/UnifyParamsModal/index.tsx

@@ -18,7 +18,7 @@ interface IProps {
   onCancel: () => void;
   config: IPointCloudConfig;
   imgList: AnnotationFileList;
-  imgIndex: number;
+  imgIndex?: number;
 }
 
 const layout = {
@@ -77,8 +77,10 @@ const UnifyParamsModal = ({ id, visible, onCancel, config, imgList, imgIndex }:
       message.info('该范围不存在更改数据, 请更改统一范围');
       return;
     }
-
-    dispatch(ToSubmitFileData(ESubmitType.SyncImgList));
+    /**
+     * Previously, imgList was retrieved from the state in dispatch(ToSubmitFileData(ESubmitType.SyncImgList)), but it was not the most up-to-date imgList.
+     * To fix this, the dispatch method was removed, and imgList is now passed through props to BatchUpdateResultByTrackID to ensure the latest data is used.
+     */
     const newData = {
       attribute: values.attribute,
     };
@@ -101,7 +103,9 @@ const UnifyParamsModal = ({ id, visible, onCancel, config, imgList, imgIndex }:
       Object.assign(newData, size);
     }
 
-    dispatch(BatchUpdateResultByTrackID(id, newData, [values.prevPage - 1, values.nextPage - 1]));
+    dispatch(
+      BatchUpdateResultByTrackID(id, newData, [values.prevPage - 1, values.nextPage - 1], imgList),
+    );
     onCancel();
   };
 
@@ -190,7 +194,7 @@ const UnifyParamsModal = ({ id, visible, onCancel, config, imgList, imgIndex }:
             rules={defaultNumberRules}
             name='prevPage'
             noStyle={true}
-            initialValue={1} // First Page 
+            initialValue={1} // First Page
           >
             <InputNumber
               precision={0}
@@ -213,7 +217,7 @@ const UnifyParamsModal = ({ id, visible, onCancel, config, imgList, imgIndex }:
             rules={defaultNumberRules}
             name='nextPage'
             noStyle={true}
-            initialValue={imgList.length}  // Last Page 
+            initialValue={imgList.length} // Last Page
           >
             <InputNumber
               precision={0}
@@ -275,6 +279,7 @@ const UnifyParamsModal = ({ id, visible, onCancel, config, imgList, imgIndex }:
 const mapStateToProps = (state: AppState) => {
   return {
     imgIndex: state.annotation.imgIndex,
+    ...state,
   };
 };
 

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/actionCreators.ts

@@ -249,13 +249,15 @@ export function BatchUpdateResultByTrackID(
   id: number, // originData
   newData: Partial<IPointCloudBox>,
   rangeIndex: [number, number],
+  imgList: IFileItem[],
 ): AnnotationActionTypes {
   return {
     type: ANNOTATION_ACTIONS.BATCH_UPDATE_RESULT_BY_TRACK_ID,
     payload: {
       id,
       newData,
       rangeIndex,
+      imgList,
     },
   };
 }

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) => {

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

@@ -16,7 +16,7 @@ import { Modal } from 'antd';
 import { message } from 'antd/es';
 import _ from 'lodash';
 import { SetAnnotationLoading } from './actionCreators';
-import { AnnotationActionTypes, AnnotationState } from './types';
+import { AnnotationActionTypes, AnnotationState, BatchUpdateResultByTrackID } from './types';
 import { EToolName } from '@/data/enums/ToolType';
 
 export const getStepConfig = (stepList: any[], step: number) =>
@@ -874,8 +874,9 @@ export const annotationReducer = (
     }
 
     case ANNOTATION_ACTIONS.BATCH_UPDATE_RESULT_BY_TRACK_ID: {
-      const { id, newData, rangeIndex } = action.payload;
-      const { imgList, imgIndex, onSubmit } = state;
+      const actionNew = action as BatchUpdateResultByTrackID;
+      const { id, newData, rangeIndex, imgList } = actionNew.payload;
+      const { imgIndex, onSubmit } = state;
       // Record the updated list.
       const updateImgList: Array<{ newInfo: IFileItem; imgIndex: number }> = [];
       const newImgList = imgList.map((v, i) => {

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

@@ -198,12 +198,13 @@ interface BatchUpdateTrackID {
   };
 }
 
-interface BatchUpdateResultByTrackID {
+export interface BatchUpdateResultByTrackID {
   type: typeof ANNOTATION_ACTIONS.BATCH_UPDATE_RESULT_BY_TRACK_ID;
   payload: {
     id: number;
     newData: Partial<IPointCloudBox>;
-    range: [number, number];
+    rangeIndex: [number, number];
+    imgList: IFileItem[];
   };
 }