feat(pointcloud): Support selecting polygons by attributes

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

@@ -36,6 +36,10 @@ export interface IPointCloudContext extends IPointCloudContextInstances {
   history: ActionsHistory; // Operation History
   hideAttributes: string[];
   toggleAttributesVisible: (attribute: string) => void;
+  reRender: (
+    _displayPointCloudList: IPointCloudBoxList = displayPointCloudList,
+    _polygonList: IPolygonData[],
+  ) => void;
 }
 
 export const PointCloudContext = React.createContext<IPointCloudContext>({
@@ -62,6 +66,7 @@ export const PointCloudContext = React.createContext<IPointCloudContext>({
   history: new ActionsHistory(),
   hideAttributes: [],
   toggleAttributesVisible: () => {},
+  reRender: () => {},
 });
 
 export const PointCloudProvider: React.FC<{}> = ({ children }) => {
@@ -136,6 +141,18 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       }
     };
 
+    const reRender = (
+      _displayPointCloudList: IPointCloudBoxList = displayPointCloudList,
+      _polygonList: IPolygonData[] = polygonList,
+    ) => {
+      _displayPointCloudList.forEach((v) => {
+        mainViewInstance?.removeObjectByName(v.id);
+      });
+
+      topViewInstance?.updatePolygonList(_displayPointCloudList, _polygonList);
+      mainViewInstance?.generateBoxes(_displayPointCloudList);
+    };
+
     return {
       selectedID,
       pointCloudBoxList,
@@ -164,6 +181,8 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       history,
       toggleAttributesVisible,
       hideAttributes,
+      setHideAttributes,
+      reRender,
     };
   }, [
     valid,
@@ -183,20 +202,15 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       hideAttributes.includes(i.attribute),
     );
 
-    const { displayPointCloudList, setSelectedIDs } = ptCtx;
+    const { setSelectedIDs, reRender } = ptCtx;
 
     const filteredIDs = pointCloudForFilteredList.map((i) => i.id);
 
     if (filteredIDs.length > 0) {
       setSelectedIDs(selectedIDs.filter((id) => !filteredIDs.includes(id)));
     }
 
-    pointCloudBoxList.forEach((v) => {
-      mainViewInstance?.removeObjectByName(v.id);
-    });
-
-    topViewInstance?.updatePolygonList(displayPointCloudList);
-    mainViewInstance?.generateBoxes(displayPointCloudList);
+    reRender();
   };
 
   useEffect(() => {

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

@@ -140,6 +140,7 @@ const PointCloudTopView: React.FC<IA2MapStateProps> = ({ currentData, imgList, s
   const size = useSize(ref);
   const config = jsonParser(stepInfo.config);
   const { setZoom } = useZoom();
+  const { hideAttributes } = ptCtx;
 
   const { addPolygon, deletePolygon } = usePolygon();
   const { deletePointCloudBox, changeBoxValidByID } = usePointCloudBoxes();
@@ -178,7 +179,8 @@ const PointCloudTopView: React.FC<IA2MapStateProps> = ({ currentData, imgList, s
     TopView2dOperation.singleOn('polygonCreated', (polygon: IPolygonData) => {
       if (TopView2dOperation.pattern === EPolygonPattern.Normal || !currentData?.url) {
         addPolygon(polygon);
-        ptCtx.setSelectedIDs(polygon.id);
+
+        ptCtx.setSelectedIDs(hideAttributes.includes(polygon.attribute) ? '' : polygon.id);
         return;
       }
 

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,19 @@ 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 })
-  }
-
+    const newPolygonList = polygonList.filter((v) => v.id !== id).map((v) => ({ ...v }));
+
+    setPolygonList(newPolygonList);
+    pushHistoryWithList({ polygonList: newPolygonList });
+  };
+
   return { addPolygon, deletePolygon, selectedPolygon };
 };

packages/lb-components/src/components/pointCloudView/hooks/useStatus.ts

@@ -47,11 +47,14 @@ export const useStatus = () => {
 
     polygon2dOperation.clearActiveStatus();
 
+    if (toolName === pointCloudPattern) {
+      return;
+    }
+
     switch (toolName) {
       case EToolName.Rect:
         polygon2dOperation.setPattern(EPolygonPattern.Rect);
         setPointCloudPattern(EToolName.Rect);
-
         break;
       case EToolName.Polygon:
         polygon2dOperation.setPattern(EPolygonPattern.Normal);

packages/lb-components/src/views/MainView/toolFooter/AnnotatedAttributes/index.tsx

@@ -6,12 +6,23 @@ import { useSelector } from '@/store/ctx';
 import { IPointCloudConfig } from '@labelbee/lb-utils';
 import { CaretDownFilled, DeleteOutlined, EyeFilled, EyeInvisibleFilled } from '@ant-design/icons';
 import { IInputList } from '@/types/main';
+import { useHistory } from '@/components/pointCloudView/hooks/useHistory';
 
 const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
   const pointCloudCtx = useContext(PointCloudContext);
-  const { pointCloudBoxList, hideAttributes, toggleAttributesVisible } = pointCloudCtx;
+  const {
+    pointCloudBoxList,
+    hideAttributes,
+    toggleAttributesVisible,
+    polygonList,
+    setPolygonList,
+    setPointCloudResult,
+    reRender,
+  } = pointCloudCtx;
 
-  const pointCloudListForSpecAttribute = pointCloudBoxList.filter(
+  const { pushHistoryWithList } = useHistory();
+
+  const pointCloudListForSpecAttribute = [...pointCloudBoxList, ...polygonList].filter(
     (i) => i.attribute === attribute.value,
   );
 
@@ -21,6 +32,25 @@ const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
 
   const isHidden = hideAttributes.includes(attribute.value);
 
+  const getBoxID = ({ trackID, order }: { trackID?: number; order?: number }) => {
+    return trackID ? trackID : order;
+  };
+
+  const deleteGraphByAttr = (attribute: string) => {
+    if (pointCloudListForSpecAttribute.length === 0) {
+      return;
+    }
+
+    const newPolygonList = polygonList.filter((i) => attribute !== i.attribute);
+    const newPointCloudList = pointCloudBoxList.filter((i) => attribute !== i.attribute);
+    setPolygonList(newPolygonList);
+    setPointCloudResult(newPointCloudList);
+
+    reRender(newPointCloudList, newPolygonList);
+
+    pushHistoryWithList({ pointCloudBoxList: newPointCloudList, polygonList: newPolygonList });
+  };
+
   return (
     <>
       {isHidden ? (
@@ -30,11 +60,11 @@ const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
       )}
       <CaretDownFilled />
       {attribute.key}
-      <DeleteOutlined />
+      <DeleteOutlined onClick={() => deleteGraphByAttr(attribute.value)} />
       {pointCloudListForSpecAttribute.map((box) => {
         return (
-          <div key={box.trackID}>
-            {box.trackID}
+          <div key={getBoxID(box)}>
+            {getBoxID(box)}
             {attribute.key}
           </div>
         );