feat: PointCloud keyboard event: setPointCloudValid

open-mmlab · Aug 3, 2022 · d0fa1c1 · d0fa1c1
1 parent f186530
commit d0fa1c1
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx
@@ -15,6 +15,7 @@ const pointCloudID = 'LABELBEE-POINTCLOUD';
 import { PointCloudContext } from './PointCloudContext';
 import { aMapStateToProps, IAnnotationStateProps } from '@/store/annotation/map';
 import { connect } from 'react-redux';
+import { jsonParser } from '@/utils';
 
 const PointCloud3DContext = React.createContext<{
   isActive: boolean;
@@ -114,6 +115,7 @@ const PointCloud3D: React.FC<IAnnotationStateProps> = ({ currentData }) => {
         });
 
         ptCtx.setPointCloudResult(boxParamsList);
+        ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid);
       }
 
       pointCloud?.controls.update();

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudContext.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudContext.tsx
@@ -9,9 +9,11 @@ export interface IPointCloudContext {
   pointCloudBoxList: IPointCloudBoxList;
   selectedID: string;
   setSelectedID: (id: string) => void;
+  valid: boolean;
   setPointCloudResult: (resultList: IPointCloudBoxList) => void;
   selectedPointCloudBox?: IPointCloudBox;
   updateSelectedPointCloud: (id: string, newBox: IPointCloudBox) => void;
+  setPointCloudValid: (valid?: boolean) => void;
 
   topViewInstance?: PointCloudAnnotation;
   sideViewInstance?: PointCloudAnnotation;
@@ -29,10 +31,11 @@ export interface IPointCloudContext {
 export const PointCloudContext = React.createContext<IPointCloudContext>({
   pointCloudBoxList: [],
   selectedID: '',
+  valid: true,
   setSelectedID: () => {},
   setPointCloudResult: () => {},
   updateSelectedPointCloud: () => {},
-
+  setPointCloudValid: () => {},
   setTopViewInstance: () => {},
   setSideViewInstance: () => {},
   setBackViewInstance: () => {},
@@ -42,6 +45,7 @@ export const PointCloudContext = React.createContext<IPointCloudContext>({
 export const PointCloudProvider: React.FC<{}> = ({ children }) => {
   const [pointCloudBoxList, setPointCloudResult] = useState<IPointCloudBoxList>([]);
   const [selectedID, setSelectedID] = useState<string>('');
+  const [valid, setValid] = useState<boolean>(true);
   const [topViewInstance, setTopViewInstance] = useState<PointCloudAnnotation>();
   const [sideViewInstance, setSideViewInstance] = useState<PointCloudAnnotation>();
   const [backViewInstance, setBackViewInstance] = useState<PointCloudAnnotation>();
@@ -65,14 +69,20 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       setPointCloudResult(pointCloudBoxList.concat(box));
     };
 
+    const setPointCloudValid = (valid?: boolean) => {
+      setValid(valid === false ? false : true);
+    };
+
     return {
       pointCloudBoxList,
       selectedID,
       setPointCloudResult,
       setSelectedID,
       addBox,
+      valid,
       selectedPointCloudBox,
       updateSelectedPointCloud,
+      setPointCloudValid,
 
       topViewInstance,
       setTopViewInstance,
@@ -84,6 +94,7 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       setMainViewInstance,
     };
   }, [
+    valid,
     selectedID,
     pointCloudBoxList,
     topViewInstance,

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudInfos.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudInfos.tsx
@@ -101,3 +101,27 @@ export const BoxInfos = () => {
 
   return null;
 };
+
+export const PointCloudValidaty = () => {
+  const ptCtx = React.useContext(PointCloudContext);
+  console.log(ptCtx.valid);
+
+  if (ptCtx.valid === false) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          backgroundColor: 'red',
+          left: 0,
+          top: 0,
+          fontSize: 24,
+          padding: 8,
+          zIndex: 20,
+        }}
+      >
+        无效
+      </div>
+    );
+  }
+  return null;
+};
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudListener.tsx
@@ -18,26 +18,26 @@ const PointCloudListener = () => {
     const { pointCloud2dOpeartion: TopPointCloudPolygonOperation } = topViewInstance;
 
     const onKeyDown = (e: KeyboardEvent) => {
-      switch (e.keyCode) {
-        case 81: {
+      switch (e.key.toLocaleLowerCase()) {
+        case 'q': {
           // Q - anticlockwise
           updateRotate(2);
           break;
         }
 
-        case 69:
+        case 'e':
           // E - closewise
           updateRotate(-2);
 
           break;
 
-        case 71:
+        case 'g':
           // G ， overturn 180
           updateRotate(180);
 
           break;
 
-        case 85:
+        case 'u':
           {
             // U , change TopOpereation Pattern
             const newPattern =
@@ -59,15 +59,19 @@ const PointCloudListener = () => {
           break;
 
         // +: Increase points size
-        case 187:
+        case '+':
           mainViewInstance?.updatePointSize(true);
           break;
 
         // -: Reduce points size
-        case 189:
+        case '-':
           mainViewInstance?.updatePointSize(false);
           break;
 
+        case 'v':
+          ptCtx.setPointCloudValid(!ptCtx.valid);
+          break;
+
         default: {
           return;
         }

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx
@@ -20,7 +20,7 @@ import { EPerspectiveView, IPointCloudBox } from '@labelbee/lb-utils';
 import React, { useEffect, useRef, useState } from 'react';
 import { PointCloudContext, useRotate, useNextOne } from './PointCloudContext';
 import { PointCloudContainer } from './PointCloudLayout';
-import { BoxInfos } from './PointCloudInfos';
+import { BoxInfos, PointCloudValidaty } from './PointCloudInfos';
 import { Slider } from 'antd';
 import { aMapStateToProps, IAnnotationStateProps } from '@/store/annotation/map';
 import { connect } from 'react-redux';
@@ -270,7 +270,7 @@ const TopViewToolbar = () => {
 };
 
 /**
- * Z-axis points filter
+ * Slider for filtering Z-axis points
  */
 const ZAxisSlider = ({
   setZAxisLimit,
@@ -507,6 +507,7 @@ const PointCloudTopView: React.FC<IAnnotationStateProps> = ({ currentData }) =>
         <div style={{ width: '100%', height: '100%' }} ref={ref} />
         <BoxInfos />
         <ZAxisSlider zAxisLimit={zAxisLimit} setZAxisLimit={setZAxisLimit} />
+        <PointCloudValidaty />
       </div>
     </PointCloudContainer>
   );