feat(remark): PointCloud support the checkMode

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

@@ -23,6 +23,8 @@ interface IPointCloudAnnotationProps {
   polygonOperationProps?: IPointCloud2dOperationProps;
 
   config: IPointCloudConfig;
+
+  checkMode?: boolean;
 }
 
 const createEmptyImage = (size: { width: number; height: number }) => {
@@ -47,7 +49,7 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
 
   public config: IPointCloudConfig;
 
-  constructor({ size, container, pcdPath, polygonOperationProps, config }: IPointCloudAnnotationProps) {
+  constructor({ size, container, pcdPath, polygonOperationProps, config, checkMode }: IPointCloudAnnotationProps) {
     const defaultOrthographic = this.getDefaultOrthographic(size);
 
     const imgSrc = createEmptyImage(size);
@@ -76,6 +78,9 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
       config: JSON.stringify(config),
       imgNode: image,
       isAppend: false,
+      checkMode,
+      // forbidOperation: true,
+      // forbidOperation: !!checkMode,
     };
     if (polygonOperationProps) {
       Object.assign(defaultPolygonProps, polygonOperationProps);
@@ -99,6 +104,11 @@ export class PointCloudAnnotation implements IPointCloudAnnotationOperation {
     this.config = config;
   }
 
+  public updateConfig(config: IPointCloudConfig) {
+    this.config = config;
+    this.pointCloud2dOperation.setConfig(JSON.stringify(config));
+  }
+
   /**
    * Get default boundary by size.
    * @param size

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

@@ -156,6 +156,10 @@ export class PointCloud {
     this.initCameraPosition = vector;
   }
 
+  public setConfig(config: IPointCloudConfig) {
+    this.config = config;
+  }
+
   /**
    * Init OrthographicCamera to default config by size
    * @param orthographicParams
@@ -554,8 +558,7 @@ export class PointCloud {
 
     if (radius) {
       // @ts-ignore
-      const circle = this.createRange(radius);
-      this.scene.add(circle);
+      this.generateRange(radius);
     }
 
     this.pointsUuid = points.uuid;
@@ -679,6 +682,11 @@ export class PointCloud {
     this.render();
   }
 
+  public generateRange = (radius: number) => {
+    const circle = this.createRange(radius);
+    this.scene.add(circle);
+  };
+
   public generateBoxArrow = ({ width }: IPointCloudBox) => {
     const dir = new THREE.Vector3(1, 0, 0);
     const origin = new THREE.Vector3(width / 2, 0, 0);

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

@@ -20,6 +20,7 @@ import PolygonOperation, { IPolygonOperationProps } from './polygonOperation';
 interface IPointCloud2dOperationProps {
   showDirectionLine?: boolean;
   forbidAddNew?: boolean;
+  checkMode?: boolean; // Judgement of check Mode
 }
 
 class PointCloud2dOperation extends PolygonOperation {
@@ -29,6 +30,8 @@ class PointCloud2dOperation extends PolygonOperation {
 
   public pointCloudConfig: IPointCloudConfig;
 
+  private checkMode: boolean;
+
   private selectedIDs: string[] = [];
 
   constructor(props: IPolygonOperationProps & IPointCloud2dOperationProps) {
@@ -37,6 +40,12 @@ class PointCloud2dOperation extends PolygonOperation {
     this.showDirectionLine = props.showDirectionLine ?? true;
     this.forbidAddNew = props.forbidAddNew ?? false;
     this.pointCloudConfig = CommonToolUtils.jsonParser(props.config) ?? {};
+    this.checkMode = props.checkMode ?? false;
+
+    // Check Mode automatically opens forbidAddNew.
+    if (this.forbidAddNew === false && props.checkMode === true) {
+      this.forbidAddNew = true;
+    }
 
     // Set the default
     this.config = {
@@ -51,6 +60,39 @@ class PointCloud2dOperation extends PolygonOperation {
     return this.selectedIDs;
   }
 
+  public setConfig(config: string) {
+    const newConfig = CommonToolUtils.jsonParser(config);
+    this.pointCloudConfig = newConfig;
+    this.config = {
+      ...this.config,
+      attributeList: newConfig?.attributeList ?? [],
+    };
+  }
+
+  public dragMouseDown(e: MouseEvent) {
+    if (this.checkMode) {
+      return;
+    }
+
+    super.dragMouseDown(e);
+  }
+
+  public deletePolygon(id?: string) {
+    if (this.checkMode) {
+      return;
+    }
+
+    super.deletePolygon(id);
+  }
+
+  public deletePolygonPoint(index: number) {
+    if (this.checkMode) {
+      return;
+    }
+
+    super.deletePolygonPoint(index);
+  }
+
   /**
    * Update selectedIDs and rerender
    * @param selectedIDs

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

@@ -924,6 +924,16 @@ class PolygonOperation extends BasicToolOperation {
       return;
     }
 
+    this.dragMouseDown(e);
+    return true;
+  }
+
+  /**
+   * Judgment of drag information during mousedown
+   * @param e 
+   * @returns 
+   */
+  public dragMouseDown(e: MouseEvent) {
     const firstPolygon = this.selectedPolygon;
 
     if (!firstPolygon || e.button !== 0) {
@@ -961,8 +971,6 @@ class PolygonOperation extends BasicToolOperation {
       changePointIndex,
       originPolygon: this.selectedPolygon,
     };
-
-    return true;
   }
 
   public segment() {

packages/lb-components/src/App.tsx

@@ -83,6 +83,8 @@ export interface AppProps {
     creatingRender?: (canvas: HTMLCanvasElement, data: any, style: IAnnotationStyle) => void;
   };
   customRenderStyle?: (data: any) => IAnnotationStyle;
+
+  checkMode?: boolean;
 }
 
 const App: React.FC<AppProps> = (props) => {

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

@@ -76,7 +76,11 @@ const updateBackViewByCanvas2D = (
   backPointCloud.render();
 };
 
-const PointCloudSideView = ({ currentData, config }: IA2MapStateProps) => {
+interface IProps {
+  checkMode?: boolean
+}
+
+const PointCloudSideView = ({ currentData, config, checkMode }: IA2MapStateProps & IProps) => {
   const ptCtx = React.useContext(PointCloudContext);
   const ref = useRef<HTMLDivElement>(null);
   const size = useSize(ref);
@@ -95,6 +99,7 @@ const PointCloudSideView = ({ currentData, config }: IA2MapStateProps) => {
         size,
         polygonOperationProps: { showDirectionLine: false, forbidAddNew: true },
         config,
+        checkMode
       });
       ptCtx.setBackViewInstance(pointCloudAnnotation);
     }

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

@@ -14,6 +14,7 @@ import { usePointCloudViews } from './hooks/usePointCloudViews';
 import { LabelBeeContext } from '@/store/ctx';
 import { useHistory } from './hooks/useHistory';
 import { useAttribute } from './hooks/useAttribute';
+import { useConfig } from './hooks/useConfig';
 
 const { EPolygonPattern } = cTool;
 
@@ -29,6 +30,7 @@ const PointCloudListener: React.FC<IA2MapStateProps> = ({ currentData, config })
   const { updatePointCloudData } = usePointCloudViews();
   const { redo, undo, pushHistoryWithList } = useHistory();
   const { syncThreeViewsAttribute, reRenderPointCloud3DBox } = useAttribute();
+  const { syncAllViewsConfig, reRenderTopViewRange } = useConfig();
 
   const keydownEvents = (lowerCaseKey: string, e: KeyboardEvent) => {
     const { topViewInstance, mainViewInstance } = ptCtx;
@@ -173,6 +175,16 @@ const PointCloudListener: React.FC<IA2MapStateProps> = ({ currentData, config })
     };
   }, [ptCtx, copiedBoxes, config]);
 
+  useEffect(() => {
+    syncAllViewsConfig(config);
+  }, [config]);
+
+  useEffect(() => {
+    if (config?.radius) {
+      reRenderTopViewRange(config?.radius);
+    }
+  }, [config?.radius]);
+
   // Page switch data initialization
   useEffect(() => {
     updatePointCloudData?.();

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

@@ -69,7 +69,11 @@ const updateSideViewByCanvas2D = (
   SidePointCloud.render();
 };
 
-const PointCloudSideView: React.FC<IA2MapStateProps> = ({ config }) => {
+interface IProps {
+  checkMode?: boolean
+}
+
+const PointCloudSideView: React.FC<IA2MapStateProps & IProps> = ({ config, checkMode }) => {
   const ptCtx = React.useContext(PointCloudContext);
   const { sideViewUpdateBox } = usePointCloudViews();
   const { selectedBox } = useSingleBox();
@@ -89,6 +93,7 @@ const PointCloudSideView: React.FC<IA2MapStateProps> = ({ config }) => {
         size,
         polygonOperationProps: { showDirectionLine: false, forbidAddNew: true },
         config,
+        checkMode
       });
       ptCtx.setSideViewInstance(pointCloudAnnotation);
       // };

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

@@ -137,9 +137,10 @@ const ZAxisSlider = ({
 
 interface IProps extends IA2MapStateProps {
   drawLayerSlot?: TDrawLayerSlot
+  checkMode?: boolean;
 }
 
-const PointCloudTopView: React.FC<IProps> = ({ currentData, imgList, stepInfo, drawLayerSlot }) => {
+const PointCloudTopView: React.FC<IProps> = ({ currentData, imgList, stepInfo, drawLayerSlot, checkMode }) => {
   const [annotationPos, setAnnotationPos] = useState({ zoom: 1, currentPos: { x: 0, y: 0 } });
   const ref = useRef<HTMLDivElement>(null);
   const ptCtx = React.useContext(PointCloudContext);
@@ -169,7 +170,9 @@ const PointCloudTopView: React.FC<IProps> = ({ currentData, imgList, stepInfo, d
         size,
         pcdPath: currentData.url,
         config,
+        checkMode
       });
+
       ptCtx.setTopViewInstance(pointCloudAnnotation);
     }
   }, [currentData]);

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

@@ -0,0 +1,25 @@
+import { PointCloudContext } from '../PointCloudContext';
+import { useContext } from 'react';
+import { IPointCloudConfig } from '@labelbee/lb-utils';
+
+export const useConfig = () => {
+  const { topViewInstance, sideViewInstance, backViewInstance, mainViewInstance } =
+    useContext(PointCloudContext);
+
+  const syncAllViewsConfig = (config: IPointCloudConfig) => {
+    [topViewInstance, sideViewInstance, backViewInstance].forEach((instance) => {
+      instance?.updateConfig(config);
+    });
+    mainViewInstance?.setConfig(config);
+  };
+
+  const reRenderTopViewRange = (radius: number) => {
+    topViewInstance?.pointCloudInstance?.generateRange?.(radius);
+    topViewInstance?.pointCloudInstance?.render();
+  }
+
+  return {
+    syncAllViewsConfig,
+    reRenderTopViewRange,
+  };
+};

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

@@ -28,9 +28,10 @@ import { TDrawLayerSlot } from '@/types/main';
 interface IProps {
   imgList: IFileItem[];
   drawLayerSlot?: TDrawLayerSlot;
+  checkMode?: boolean;
 }
 
-const PointCloudView: React.FC<IProps> = ({ imgList, drawLayerSlot }) => {
+const PointCloudView: React.FC<IProps> = ({ imgList, drawLayerSlot, checkMode }) => {
   if (imgList.length === 0) {
     return null;
   }
@@ -46,10 +47,10 @@ const PointCloudView: React.FC<IProps> = ({ imgList, drawLayerSlot }) => {
           </div>
 
           <div className={getClassName('point-cloud-container', 'right')}>
-            <PointCloudTopView drawLayerSlot={drawLayerSlot} />
+            <PointCloudTopView drawLayerSlot={drawLayerSlot} checkMode={checkMode} />
             <div className={getClassName('point-cloud-container', 'right-bottom')}>
-              <PointCloudSideView />
-              <PointCloudBackView />
+              <PointCloudSideView checkMode={checkMode} />
+              <PointCloudBackView checkMode={checkMode} />
             </div>
           </div>
         </div>

packages/lb-components/src/hooks/annotation.ts

@@ -32,6 +32,8 @@ export interface ICustomToolInstance {
 
   undo: () => void,
   redo: () => void,
+
+  [str: string]: any;
 }
 
 export interface ICustomToolInstanceProps {

packages/lb-components/src/index.scss

@@ -1424,7 +1424,7 @@ $headerHeight: 40px;
 .#{$ptPrefix}-wrapper {
   display: flex;
   height: 100%;
-  width: 100;
+  width: 100%;
   overflow: hidden;
   flex: 1;
 

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

@@ -43,7 +43,7 @@ const ImageAnnotate: React.FC<AppProps & IProps> = (props) => {
 const PointCloudAnnotate: React.FC<AppProps & IProps> = (props) => {
   return (
     <>
-      <PointCloudView drawLayerSlot={props.drawLayerSlot}/>
+      <PointCloudView drawLayerSlot={props.drawLayerSlot} checkMode={props.checkMode}/>
       <ToolFooter style={props.style?.footer} mode={props.mode} footer={props?.footer} />
     </>
   );
@@ -89,7 +89,7 @@ const MainView: React.FC<AppProps & IProps> = (props) => {
             </Content>
             <Sider
               className={`${layoutCls}__side`}
-              width={siderWidth ? siderWidth : 240}
+              width={siderWidth ?? 240}
               style={props.style?.sider}
             >
               <Sidebar sider={props?.sider} />