feat(pointcloud): Polygon mode alse supports the validUpdate

open-mmlab · Feb 20, 2023 · d93d8da · d93d8da
1 parent 6bbd1da
commit d93d8da
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts b/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts
@@ -1317,15 +1317,24 @@ class PolygonOperation extends BasicToolOperation {
     }
   }
 
-  public leftMouseUp(e: MouseEvent) {
+  public leftMouseUpdateValid(e: MouseEvent) {
     const hoverID = this.getHoverID(e);
     if (this.drawingPointList.length === 0 && e.ctrlKey === true && hoverID) {
       // ctrl + 左键 + hover存在，更改框属性
       this.setPolygonValidAndRender(hoverID);
+      return true;
+    }
+    return false;
+  }
+
+  public leftMouseUp(e: MouseEvent) {
+    const isCtrl = this.leftMouseUpdateValid(e);
+
+    if (isCtrl) {
       return;
     }
 
-    // 创建多边形
+    // Create New Polygon
     this.addPointInDrawing(e);
   }
 

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx
@@ -161,7 +161,7 @@ const PointCloudTopView: React.FC<IProps> = ({
   const { setZoom } = useZoom();
 
   const { addPolygon, deletePolygon } = usePolygon();
-  const { deletePointCloudBox, changeBoxValidByID } = useSingleBox();
+  const { deletePointCloudBox, changeValidByID } = useSingleBox();
   const [zAxisLimit, setZAxisLimit] = useState<number>(10);
   const { t } = useTranslation();
   const pointCloudViews = usePointCloudViews();
@@ -242,19 +242,25 @@ const PointCloudTopView: React.FC<IProps> = ({
     });
 
     const validUpdate = (id: string) => {
-      const newPointCloudList = changeBoxValidByID(id);
-      // Update Highlight;
+      // UpdateData.
+      const newPointCloudList = changeValidByID(id);
+
+      // HighLight
       if (newPointCloudList) {
         ptCtx.syncAllViewPointCloudColor(newPointCloudList);
       }
+      if (ptCtx.polygonList.find(v => v.id === id)) {
+        ptCtx.topViewInstance?.pointCloud2dOperation.setPolygonValidAndRender(id, true);
+      }
+
     };
 
     TopView2dOperation.on('validUpdate', validUpdate);
 
     return () => {
       TopView2dOperation.unbind('validUpdate', validUpdate);
     };
-  }, [ptCtx, size, currentData, pointCloudViews]);
+  }, [ptCtx, size, currentData, pointCloudViews, ptCtx.polygonList]);
 
   useEffect(() => {
     if (!size?.width || !ptCtx.topViewInstance) {

diff --git a/packages/lb-components/src/components/pointCloudView/hooks/usePolygon.ts b/packages/lb-components/src/components/pointCloudView/hooks/usePolygon.ts
@@ -3,7 +3,6 @@ import { useContext } from 'react';
 import { PointCloudContext } from '../PointCloudContext';
 import { useHistory } from './useHistory';
 
-
 /**
  * PointCloud Polygon Hook
  * @returns
@@ -12,18 +11,48 @@ export const usePolygon = () => {
   const { polygonList, setPolygonList, selectedID } = useContext(PointCloudContext);
   const { addHistory, pushHistoryWithList } = useHistory();
 
-  const selectedPolygon = polygonList.find(v => v.id === selectedID)
-  
+  const selectedPolygon = polygonList.find((v) => v.id === selectedID);
+
   const addPolygon = (polygon: IPolygonData) => {
     setPolygonList(polygonList.concat(polygon));
-    addHistory({ newPolygon: polygon })
-  }
+    addHistory({ newPolygon: polygon });
+  };
 
   const deletePolygon = (id: string) => {
-    const newPolygonList = polygonList.filter(v => v.id !== id).map(v => ({...v}));
-    setPolygonList(newPolygonList)
-    pushHistoryWithList({ polygonList: newPolygonList })
-  }
-
-  return { addPolygon, deletePolygon, selectedPolygon };
+    const newPolygonList = polygonList.filter((v) => v.id !== id).map((v) => ({ ...v }));
+    setPolygonList(newPolygonList);
+    pushHistoryWithList({ polygonList: newPolygonList });
+  };
+
+  const updateSelectedPolygon = (polygon: IPolygonData) => {
+    if (selectedPolygon) {
+      setPolygonList(
+        polygonList.map((v) => {
+          if (v.id === selectedID) {
+            return polygon;
+          }
+          return v;
+        }),
+      );
+    }
+  };
+
+  const updatePolygonValidByID = (id: string) => {
+    const polygon = polygonList.find((v) => v.id === id);
+    if (polygon) {
+      setPolygonList(
+        polygonList.map((v) => {
+          if (v.id === id) {
+            return {
+              ...v,
+              valid: !v.valid,
+            };
+          }
+          return v;
+        }),
+      );
+    }
+  };
+
+  return { addPolygon, deletePolygon, selectedPolygon, updateSelectedPolygon, updatePolygonValidByID };
 };
diff --git a/packages/lb-components/src/components/pointCloudView/hooks/useSingleBox.ts b/packages/lb-components/src/components/pointCloudView/hooks/useSingleBox.ts
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import { PointCloudContext } from '../PointCloudContext';
 import { cAnnotation } from '@labelbee/lb-annotation';
 import { useHistory } from './useHistory';
+import { usePolygon } from './usePolygon';
 
 const { ESortDirection } = cAnnotation;
 
@@ -20,7 +21,9 @@ export const useSingleBox = () => {
     mainViewInstance,
     setSelectedIDs,
     syncAllViewPointCloudColor,
+    polygonList,
   } = useContext(PointCloudContext);
+  const { selectedPolygon, updateSelectedPolygon, updatePolygonValidByID } = usePolygon();
 
   const { pushHistoryWithList } = useHistory();
 
@@ -86,12 +89,16 @@ export const useSingleBox = () => {
 
       // Async
       syncAllViewPointCloudColor(newPointCloudList);
-
       changePolygonViewValid(id);
     }
-  }, [changePolygonViewValid, selectedBox]);
 
-  const changeBoxValidByID = useCallback(
+    if (selectedPolygon) {
+      updateSelectedPolygon({ ...selectedPolygon, valid: !selectedPolygon.valid });
+      topViewInstance?.pointCloud2dOperation.setPolygonValidAndRender(selectedPolygon.id, true);
+    }
+  }, [changePolygonViewValid, selectedBox, selectedPolygon]);
+
+  const changeValidByID = useCallback(
     (id: string) => {
       const boxInfo = pointCloudBoxList.find((v) => v.id === id);
 
@@ -105,8 +112,9 @@ export const useSingleBox = () => {
 
         return newPointCloudBoxList;
       }
+      updatePolygonValidByID(id);
     },
-    [changePolygonViewValid, pointCloudBoxList],
+    [changePolygonViewValid, pointCloudBoxList, polygonList],
   );
 
   /** PointCloud select next/prev one */
@@ -142,7 +150,7 @@ export const useSingleBox = () => {
     selectedBox,
     updateSelectedBox,
     changeSelectedBoxValid,
-    changeBoxValidByID,
+    changeValidByID,
     selectNextBox: switchToNextBox,
     selectPrevBox,
     deletePointCloudBox,