Merge pull request #578 from Suntgr/feat/auto-center

feat: Auto-centering after changing the selectId
open-mmlab · Oct 10, 2024 · 8099ea8 · 8099ea8
2 parents 5fcdf00 + 59dd9f6
commit 8099ea8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/packages/lb-annotation/src/utils/MathUtils.ts b/packages/lb-annotation/src/utils/MathUtils.ts
@@ -785,4 +785,16 @@ export default class MathUtils {
     }
     return false;
   }
+
+  // Determine the required position to center the rectangle on the canvas
+  public static getCurrentPosFromRectCenter(
+    size: { width: number; height: number },
+    centerPoint: IPolygonPoint,
+    zoom: number,
+  ) {
+    return {
+      x: size.width / 2 - centerPoint.x * zoom,
+      y: size.height / 2 - centerPoint.y * zoom,
+    };
+  }
 }
diff --git a/packages/lb-components/src/components/pointCloud2DRectOperationView/index.tsx b/packages/lb-components/src/components/pointCloud2DRectOperationView/index.tsx
@@ -15,7 +15,7 @@ import { PointCloudContext } from '@/components/pointCloudView/PointCloudContext
 import { a2MapStateToProps } from '@/store/annotation/map';
 import { LabelBeeContext } from '@/store/ctx';
 import { IMappingImg } from '@/types/data';
-import { ImgUtils, PointCloud2DRectOperation, uuid } from '@labelbee/lb-annotation';
+import { ImgUtils, PointCloud2DRectOperation, uuid, MathUtils } from '@labelbee/lb-annotation';
 import {
   IPointCloudBoxRect,
   IPointCloud2DRectOperationViewRect,
@@ -67,6 +67,7 @@ const PointCloud2DRectOperationView = (props: IPointCloud2DRectOperationViewProp
     updateRectListByReducer,
     selectedIDs,
     setSelectedIDs,
+    selectedID
   } = useContext(PointCloudContext);
 
   const { value: toolStyle } = useToolStyleContext();
@@ -85,6 +86,7 @@ const PointCloud2DRectOperationView = (props: IPointCloud2DRectOperationViewProp
   const [rightClickRectId, setRightClickRectId] = useState<string>('');
   // Peugeot used to record the status of boxes that need to be updated
   const [isMemoryChange, setIsMemoryChange] = useState<boolean>(false);
+  const [needUpdateCenter, setNeedUpdateCenter] = useState(true);
 
   const rectListInImage = useMemo(
     () => rectList?.filter((item: IPointCloudBoxRect) => item.imageName === mappingData?.path),
@@ -266,6 +268,7 @@ const PointCloud2DRectOperationView = (props: IPointCloud2DRectOperationViewProp
   });
 
   const onRightClick = ({ targetId, id }: { targetId: string; id: string }) => {
+    setNeedUpdateCenter(false);
     setSelectedIDs(targetId);
     setRightClickRectId(id);
   };
@@ -407,6 +410,27 @@ const PointCloud2DRectOperationView = (props: IPointCloud2DRectOperationViewProp
     updateRectList();
   }, [selectedIDs]);
 
+  useEffect(() => {
+    // Center the view by selectedID
+    if (!selectedID || !needUpdateCenter) {
+      setNeedUpdateCenter(true);
+      return;
+    } 
+    const {rectList, size, zoom} = operation.current
+    const rect = rectList.find((el: any) => el.boxID === selectedID)
+    if (!rect) {
+      setNeedUpdateCenter(true);
+      return;
+    }
+    const centerPoint = {
+      x: rect.x + rect.width / 2,
+      y: rect.y + rect.height / 2
+    }
+    const currentPos = MathUtils.getCurrentPosFromRectCenter(size, centerPoint, zoom)
+    operation.current.setCurrentPos(currentPos)
+    operation.current.render()
+  }, [selectedID]);
+
   useEffect(() => {
     const { hiddenText } = toolStyle || {};
     if (hiddenText === undefined) {

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx
@@ -13,6 +13,7 @@ import {
   PointCloudAnnotation,
   THybridToolName,
   cKeyCode,
+  MathUtils,
 } from '@labelbee/lb-annotation';
 import {
   IPolygonData,
@@ -216,7 +217,8 @@ const PointCloudTopView: React.FC<IProps> = ({
   const { t } = useTranslation();
   const pointCloudViews = usePointCloudViews();
   const { pushHistoryWithList } = useHistory();
-
+  const [needUpdateCenter, setNeedUpdateCenter] = useState(true);
+
   useLayoutEffect(() => {
     if (ptCtx.topViewInstance) {
       return;
@@ -300,6 +302,7 @@ const PointCloudTopView: React.FC<IProps> = ({
         return;
       }
 
+      setNeedUpdateCenter(false);
       pointCloudViews.topViewAddBox({
         polygon,
         size,
@@ -324,6 +327,7 @@ const PointCloudTopView: React.FC<IProps> = ({
     });
 
     TopView2dOperation.singleOn('setSelectedIDs', (selectedIDs: string[]) => {
+      setNeedUpdateCenter(false);
       ptCtx.setSelectedIDs(selectedIDs);
     });
 
@@ -425,6 +429,31 @@ const PointCloudTopView: React.FC<IProps> = ({
     ptCtx.topViewInstance?.toolInstance?.selection?.hardSetSelectedIDs?.(ptCtx.selectedIDs);
   }, [ptCtx.selectedIDs]);
 
+  useEffect(() => {
+    // Center the view by selectedID
+    const {topViewInstance, selectedID, selectedPointCloudBox, zoom} = ptCtx
+    if (!topViewInstance || !selectedID || !selectedPointCloudBox || !needUpdateCenter) {
+      setNeedUpdateCenter(true);
+      return;
+    }
+    const { center } = selectedPointCloudBox;
+    const { pointCloudInstance: pointCloud, toolInstance } = topViewInstance
+    const basicResult = toolInstance.polygonList.find((el: { id: string; }) => el.id === ptCtx.selectedID);
+    if (!basicResult) {
+      setNeedUpdateCenter(true);
+      return;
+    };
+    const centerPoint = MathUtils.getRectCenterPoint(basicResult.pointList);
+    const currentPos = MathUtils.getCurrentPosFromRectCenter(toolInstance.size, centerPoint, zoom)
+    toolInstance.setCurrentPos(currentPos);
+    toolInstance.render();
+    const { x, y, z } = pointCloud.initCameraPosition;
+    pointCloud.camera.position.set(center.x, center.y, z);
+    pointCloud.render();
+    syncTopviewToolZoom(currentPos, zoom, size);
+    setAnnotationPos({ zoom, currentPos });
+  }, [ptCtx.selectedID]);
+
   useEffect(() => {
     window.addEventListener('keydown', onKeyDown);
     return () => {