feat(pointcloud): Support switching attributes in pointTool

packages/lb-annotation/src/core/pointCloud/annotation.ts

@@ -90,7 +90,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
     // 2. PointCloud2dOperation initialization
     const defaultPolygonProps = {
       size,
-      config: JSON.stringify(config),
+      config: JSON.stringify({...config, attributeConfigurable: true, hideAttribute: true }),
       imgNode: image,
       checkMode,
       // forbidOperation: true,
@@ -116,9 +116,10 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
         pointCloudPolygonOperation.setPattern(EPolygonPattern.Rect);
         this.toolInstance = pointCloudPolygonOperation;
         this.toolInstance.eventBinding();
+        // need to be deleted
         this.pointCloud2dOperation = pointCloudPolygonOperation;
       } else {
-        toolInstance = toolScheduler.createOperation(tool, image, config);
+        toolInstance = toolScheduler.createOperation(tool, image, defaultPolygonProps);
       }
       if (i === toolList.length - 1) {
         if (!this.toolInstance) {

packages/lb-annotation/src/core/pointCloud/index.ts

@@ -417,6 +417,13 @@ export class PointCloud {
     return cameraPositionVector;
   }
 
+  public updateCameraBySphere(sphereParams: IPointCloudSphere, perspectiveView: EPerspectiveView) {
+    const { center, radius } = sphereParams;
+    const cameraPositionVector = this.getCameraVector(center, 0, { width: radius * 2, height: radius * 2, depth: radius * 2 }, perspectiveView);
+    this.updateCamera(cameraPositionVector, center);
+    return cameraPositionVector;
+  }
+
   public updateOrthoCamera(boxParams: IPointCloudBox, perspectiveView: EPerspectiveView) {
     const cameraPositionVector = this.updateCameraByBox(boxParams, perspectiveView);
 
@@ -1126,6 +1133,7 @@ export class PointCloud {
   }
 
   public getSpherePoint2DCoordinate(sphereParams: IPointCloudSphere, perspectiveView: EPerspectiveView) {
+    // whq todo: maybe wrong params
     const { center, radius } = sphereParams
     const transParams = { center, width: radius * 2, height: radius * 2, depth: radius * 2, rotation: 0 }
     const projectMatrix = new THREE.Matrix4()

packages/lb-annotation/src/core/toolOperation/pointOperation.ts

@@ -606,6 +606,7 @@ class PointOperation extends BasicToolOperation {
       const pointList = this.pointList.filter((point) => point.id !== this.selectedID);
       this.setPointList(pointList);
       this.history.pushHistory(pointList);
+      this.emit('pointDeleted', this.selectedID)
       this.setSelectedID('');
       this.hoverID = '';
       return;
@@ -701,6 +702,7 @@ class PointOperation extends BasicToolOperation {
       this.history.pushHistory(this.pointList);
       this._textAttributInstance?.clearTextAttribute();
       this.emit('selectedChange');
+      this.emit('pointDeleted', this.selectedID)
       this.render();
     }
   }
@@ -838,7 +840,7 @@ class PointOperation extends BasicToolOperation {
       showText = `${order}_${MarkerUtils.getMarkerShowText(point.label, this.config.markerList)}`;
     }
 
-    if (point.attribute) {
+    if (point.attribute && !this.config.hideAttribute) {
       showText = `${showText}  ${AttributeUtils.getAttributeShowText(point.attribute, this.config?.attributeList)}`;
     }
 

packages/lb-annotation/src/index.ts

@@ -42,6 +42,7 @@ import DblClickEventListener from './utils/tool/DblClickEventListener'; // tempo
 import AnnotationEngine from './core';
 
 import UnitUtils from './utils/tool/UnitUtils';
+import StyleUtils from './utils/tool/StyleUtils';
 
 const CommonToolUtils = EnhanceCommonToolUtils;
 const toolUtils = EnhanceCommonToolUtils; // Compatible with the old version of the definition
@@ -80,6 +81,7 @@ export {
   AnnotationEngine,
   ScribbleTool,
   UnitUtils,
+  StyleUtils,
   // 其他特殊基础功能
   ActionsHistory,
 };

packages/lb-annotation/src/types/tool/pointTool.d.ts

@@ -32,4 +32,5 @@ declare interface IPointToolConfig extends IToolConfig {
   showOrder?: boolean; // 兼容旧 order 的配置
   drawPointOut?: boolean; // 兼容旧的目标外标注
   edgeAdsorption?: boolean; // 是否开启边缘吸附
+  hideAttribute?: boolean;
 }

packages/lb-annotation/src/utils/tool/AxisUtils.ts

@@ -138,7 +138,7 @@ export default class AxisUtils {
     zoom: number,
     currentPos: ICoordinate = { x: 0, y: 0 },
   ) {
-    return pointList.map((point: IPolygonPoint | IPoint) => {
+    return pointList?.map((point: IPolygonPoint | IPoint) => {
       return this.changePointByZoom(point, zoom, currentPos);
     });
   }

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

@@ -21,6 +21,7 @@ import { a2MapStateToProps, IA2MapStateProps } from '@/store/annotation/map';
 import { connect } from 'react-redux';
 import { jsonParser } from '@/utils';
 import { useSingleBox } from './hooks/useSingleBox';
+import { useSphere } from './hooks/useSphere'
 import { Switch } from 'antd';
 import useSize from '@/hooks/useSize';
 import { usePointCloudViews } from './hooks/usePointCloudViews';
@@ -108,13 +109,17 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
     initPointCloud3d?.(size);
   }, [size]);
   const { selectedBox } = useSingleBox();
+  const { selectedSphere } = useSphere()
 
   const setTarget3DView = (perspectiveView: EPerspectiveView) => {
     const box = selectedBox?.info;
 
     if (box) {
       ptCtx.mainViewInstance?.updateCameraByBox(box, perspectiveView);
     }
+    if (selectedSphere) {
+      ptCtx.mainViewInstance?.updateCameraBySphere(selectedSphere, perspectiveView)
+    }
   };
 
   const reset3DView = () => {
@@ -189,6 +194,18 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
     }
   }, [selectedBox]);
 
+  useEffect(() => {
+    if (selectedSphere) {
+      setTarget3DView(EPerspectiveView.Top);
+
+      /**
+       * 3DView's zoom synchronizes with topView' zoom.
+       */
+      const zoom = ptCtx.topViewInstance?.pointCloudInstance?.camera.zoom ?? 1;
+      ptCtx.mainViewInstance?.updateCameraZoom(zoom);
+    }
+  }, [selectedSphere]);
+
   const ptCloud3DCtx = useMemo(() => {
     return { reset3DView, setTarget3DView, isActive: !!selectedBox, followTopView };
   }, [selectedBox, ptCtx.mainViewInstance]);

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

@@ -17,7 +17,7 @@ import React, { useEffect, useRef } from 'react';
 import { PointCloudContext } from './PointCloudContext';
 import {
   EPerspectiveView,
-  IPointCloudBox, IPointUnit,
+  IPointUnit,
   IPolygonData,
   IPolygonPoint,
   UpdatePolygonByDragList,
@@ -74,14 +74,14 @@ const updateBackViewByCanvas2D = (
   currentPos: { x: number; y: number },
   zoom: number,
   size: { width: number; height: number },
-  selectedPointCloudBox: IPointCloudBox | IPointCloudSphere,
+  rotation: number,
   backPointCloud: PointCloud,
 ) => {
   const { offsetX, offsetY } = TransferCanvas2WorldOffset(currentPos, size, zoom);
   backPointCloud.camera.zoom = zoom;
   if (currentPos) {
-    const cos = Math.cos(selectedPointCloudBox.rotation ?? 0);
-    const sin = Math.sin(selectedPointCloudBox.rotation ?? 0);
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
     const offsetXX = offsetX * cos;
     const offsetXY = offsetX * sin;
     const { x, y, z } = backPointCloud.initCameraPosition;
@@ -217,23 +217,30 @@ const PointCloudBackView = ({ currentData, config, checkMode }: IA2MapStateProps
      * Change Orthographic Camera size
      */
     backPointCloudPolygonOperation.singleOn('renderZoom', (zoom: number, currentPos: any) => {
-      if (!ptCtx.selectedPointCloudBox && !selectedSphere) {
-        return;
+      if (ptCtx.selectedPointCloudBox) {
+        updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox.rotation, backPointCloud);
+        syncBackviewToolZoom(currentPos, zoom, size);
+        return
+      }
+      if (selectedSphere) {
+        updateBackViewByCanvas2D(currentPos, zoom, size, 0, backPointCloud);
+        syncBackviewToolZoom(currentPos, zoom, size);
+        return
       }
-      updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox ?? selectedSphere, backPointCloud);
-      syncBackviewToolZoom(currentPos, zoom, size);
     });
 
     // Synchronized 3d point cloud view displacement operations
     backPointCloudPolygonOperation.singleOn('dragMove', ({ currentPos, zoom }: any) => {
       if (!ptCtx.selectedPointCloudBox && !selectedSphere) {
         return;
       }
-      updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox ?? selectedSphere, backPointCloud);
+      updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox ? ptCtx.selectedPointCloudBox.rotation : 0 , backPointCloud);
     });
 
     backPointCloudPolygonOperation.singleOn('updatePointByDrag', (updatePoint: IPointUnit, oldList: IPointUnit[]) => {
-      backViewUpdatePoint?.(updatePoint, selectedPoint)
+      if (selectedPoint) {
+        backViewUpdatePoint?.(updatePoint, selectedPoint)
+      }
     })
     backPointCloudPolygonOperation.singleOn(
       'updatePolygonByDrag',

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

@@ -7,7 +7,7 @@ import { PointCloud, PointCloudAnnotation, THybridToolName } from '@labelbee/lb-
 import { getClassName } from '@/utils/dom';
 import { PointCloudContainer } from './PointCloudLayout';
 import React, { useEffect, useRef } from 'react';
-import { EPerspectiveView, IPointCloudBox, IPointUnit, UpdatePolygonByDragList } from '@labelbee/lb-utils';
+import { EPerspectiveView, IPointUnit, UpdatePolygonByDragList } from '@labelbee/lb-utils';
 import { PointCloudContext } from './PointCloudContext';
 import { SizeInfoForView } from './PointCloudInfos';
 import { connect } from 'react-redux';
@@ -57,14 +57,14 @@ const updateSideViewByCanvas2D = (
   currentPos: { x: number; y: number },
   zoom: number,
   size: { width: number; height: number },
-  selectedPointCloudBox: IPointCloudBox | IPointCloudSphere,
+  rotation: number,
   SidePointCloud: PointCloud,
 ) => {
   const { offsetX, offsetY } = TransferCanvas2WorldOffset(currentPos, size, zoom);
   SidePointCloud.camera.zoom = zoom;
   if (currentPos) {
-    const cos = Math.cos(selectedPointCloudBox?.rotation ?? 0);
-    const sin = Math.sin(selectedPointCloudBox?.rotation ?? 0);
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
     const offsetXX = offsetX * cos;
     const offsetXY = offsetX * sin;
     const { x, y, z } = SidePointCloud.initCameraPosition;
@@ -123,17 +123,28 @@ const PointCloudSideView: React.FC<IA2MapStateProps & IProps> = ({ config, check
      * Change Orthographic Camera size
      */
     toolInstance.singleOn('renderZoom', (zoom: number, currentPos: any) => {
-      if (!ptCtx.selectedPointCloudBox && !selectedSphere) {
-        return;
+      if (ptCtx.selectedPointCloudBox) {
+        updateSideViewByCanvas2D(
+          currentPos,
+          zoom,
+          size,
+          ptCtx.selectedPointCloudBox.rotation,
+          pointCloudInstance,
+        );
+        syncSideviewToolZoom(currentPos, zoom, size);
+        return
       }
-      updateSideViewByCanvas2D(
-        currentPos,
-        zoom,
-        size,
-        ptCtx.selectedPointCloudBox ?? selectedSphere,
-        pointCloudInstance,
-      );
-      syncSideviewToolZoom(currentPos, zoom, size);
+      if (selectedSphere) {
+        updateSideViewByCanvas2D(
+          currentPos,
+          zoom,
+          size,
+          0,
+          pointCloudInstance,
+        );
+        syncSideviewToolZoom(currentPos, zoom, size);
+      }
+
     });
 
     // Synchronized 3d point cloud view displacement operations
@@ -145,13 +156,15 @@ const PointCloudSideView: React.FC<IA2MapStateProps & IProps> = ({ config, check
         currentPos,
         zoom,
         size,
-        ptCtx.selectedPointCloudBox ?? selectedSphere,
+        ptCtx.selectedPointCloudBox ? ptCtx.selectedPointCloudBox.rotation : 0,
         pointCloudInstance,
       );
     });
 
     toolInstance.singleOn('updatePointByDrag', (updatePoint: IPointUnit, oldList: IPointUnit[]) => {
-      sideViewUpdatePoint?.(updatePoint, selectedPoint)
+      if (selectedPoint) {
+        sideViewUpdatePoint?.(updatePoint, selectedPoint)
+      }
     })
 
     toolInstance.singleOn('updatePolygonByDrag', (updateList: UpdatePolygonByDragList) => {

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

@@ -17,6 +17,7 @@ import { PointCloudContainer } from './PointCloudLayout';
 import { BoxInfos, PointCloudValidity } from './PointCloudInfos';
 import { usePolygon } from './hooks/usePolygon';
 import { usePoint } from './hooks/usePoint';
+import { useSphere } from './hooks/useSphere';
 import { useZoom } from './hooks/useZoom';
 import { Slider } from 'antd';
 import { a2MapStateToProps, IA2MapStateProps, IAnnotationStateProps } from '@/store/annotation/map';
@@ -165,6 +166,7 @@ const PointCloudTopView: React.FC<IProps> = ({
 
   const { addPolygon, deletePolygon } = usePolygon();
   const { addPoint, deletePoint } = usePoint();
+  const { deletePointCloudSphere } = useSphere();
   const { deletePointCloudBox, changeValidByID } = useSingleBox();
   const [zAxisLimit, setZAxisLimit] = useState<number>(10);
   const { t } = useTranslation();
@@ -203,9 +205,7 @@ const PointCloudTopView: React.FC<IProps> = ({
 
     // point tool events
     TopView2dOperation.singleOn('pointCreated', (point: IPointUnit, zoom: number) => {
-      const { x: realX, y: realY } = PointCloudUtils.transferCanvas2World(point, size)
       addPoint(point)
-      ptCtx.setSelectedIDs(point.id)
       pointCloudViews.topViewAddSphere({
         newPoint: point,
         size,
@@ -214,6 +214,11 @@ const PointCloudTopView: React.FC<IProps> = ({
       })
     })
 
+    TopView2dOperation.singleOn('pointDeleted', (selectedID: string) => {
+      deletePoint(selectedID)
+      deletePointCloudSphere(selectedID)
+    })
+
     TopView2dOperation.singleOn('updatePointByDrag', (updatePoint: IPointUnit, oldList: IPointUnit[]) => {
       pointCloudViews.topViewUpdatePoint?.(updatePoint, size)
     })
@@ -327,7 +332,7 @@ const PointCloudTopView: React.FC<IProps> = ({
     });
 
     // Synchronized 3d point cloud view displacement operations
-    toolInstance.singleOn('dragMove', ({ currentPos, zoom }) => {
+    toolInstance.singleOn('dragMove', ({ currentPos, zoom }: any) => {
       const { offsetX, offsetY } = TransferCanvas2WorldOffset(currentPos, size, zoom);
       pointCloud.camera.zoom = zoom;
       const { x, y, z } = pointCloud.initCameraPosition;

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

@@ -13,23 +13,23 @@ export const useAttribute = () => {
   } = useContext(PointCloudContext);
 
   useEffect(() => {
-    if (!topViewInstance?.pointCloud2dOperation) {
+    if (!topViewInstance?.toolInstance) {
       return;
     }
 
     const updateDefaultAttribute = () => {
-      setDefaultAttribute(topViewInstance?.pointCloud2dOperation.defaultAttribute);
+      setDefaultAttribute(topViewInstance?.toolInstance.defaultAttribute);
     };
 
-    topViewInstance?.pointCloud2dOperation.on('changeAttributeSidebar', updateDefaultAttribute);
+    topViewInstance?.toolInstance.on('changeAttributeSidebar', updateDefaultAttribute);
 
     return () => {
-      topViewInstance?.pointCloud2dOperation.unbind(
+      topViewInstance?.toolInstance.unbind(
         'changeAttributeSidebar',
         updateDefaultAttribute,
       );
     };
-  }, [topViewInstance?.pointCloud2dOperation]);
+  }, [topViewInstance?.toolInstance]);
 
   const syncThreeViewsAttribute = (attribute?: string) => {
     [
@@ -42,7 +42,7 @@ export const useAttribute = () => {
   };
 
   const updateDefaultAttribute = (attribute?: string) => {
-    topViewInstance?.pointCloud2dOperation.setDefaultAttribute(attribute);
+    topViewInstance?.toolInstance.setDefaultAttribute(attribute);
   };
 
   const reRenderPointCloud3DBox = (newBox: IPointCloudBox) => {

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

@@ -6,15 +6,18 @@ import { PointCloudContext } from '../PointCloudContext';
  * PointCloud Point Hook
  */
 export const usePoint = () => {
-  const { pointList, setPointList, selectedID } = useContext(PointCloudContext);
+  const { pointList, setPointList, selectedID, setSelectedIDs } = useContext(PointCloudContext);
 
   const selectedPoint = pointList.find((v) => v.id === selectedID)
 
   const addPoint = (point: IPointUnit) => {
     setPointList([...pointList, point])
+    setSelectedIDs([point.id])
   }
 
-  const deletePoint = () => {
+  const deletePoint = (id: string) => {
+    setPointList(pointList.filter((v) => v.id === id))
+    setSelectedIDs([])
   }
 
   return {