Merge pull request #479 from lihqi/lhq-alpha-0607

feat: add RectRotateSensitivitySlider to siderbar

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

@@ -150,6 +150,8 @@ export interface IPointCloudContext
     idField?: keyof IPointCloudBoxRect,
   ) => boolean;
   removeRectByPointCloudBoxId: (imageName: string) => boolean;
+  rectRotateSensitivity: number; // Rect Rotate Sensitivity
+  setRectRotateSensitivity: (sensitivity: number) => void;
 }
 
 const pickRectObject = (rect: IPointCloud2DRectOperationViewRect) => {
@@ -235,6 +237,8 @@ export const PointCloudContext = React.createContext<IPointCloudContext>({
   removeRectBySpecifyId: (imageName: string, ids: string[], idField?: keyof IPointCloudBoxRect) =>
     false,
   removeRectByPointCloudBoxId: (imageName: string) => false,
+  rectRotateSensitivity: 2,
+  setRectRotateSensitivity: () => {},
 });
 
 export const PointCloudProvider: React.FC<{}> = ({ children }) => {
@@ -246,6 +250,7 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
   const [selectedIDs, setSelectedIDsState] = useState<string[]>([]);
   const [highlightIDs, setHighlightIDs] = useState<number[]>([]);
   const [valid, setValid] = useState<boolean>(true);
+  const [rectRotateSensitivity, setRectRotateSensitivity] = useState<number>(2);
   const [cuboidBoxIn2DView, setCuboidBoxIn2DView] = useState<boolean>(true);
   const [zoom, setZoom] = useState<number>(1);
   const [topViewInstance, setTopViewInstance] = useState<PointCloudAnnotation>();
@@ -650,6 +655,8 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
       removeRectByPointCloudBoxId,
       removeRectBySpecifyId,
       addRectFromPointCloudBoxByImageName,
+      rectRotateSensitivity,
+      setRectRotateSensitivity,
     };
   }, [
     valid,
@@ -678,6 +685,7 @@ export const PointCloudProvider: React.FC<{}> = ({ children }) => {
     removeRectByPointCloudBoxId,
     removeRectBySpecifyId,
     addRectFromPointCloudBoxByImageName,
+    rectRotateSensitivity
   ]);
 
   useEffect(() => {

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

@@ -90,14 +90,13 @@ const PointCloudListener: React.FC<IProps> = ({
     switch (lowerCaseKey) {
       case 'q': {
         // Q - anticlockwise
-        updateRotate(2);
+        updateRotate(ptCtx.rectRotateSensitivity);
         break;
       }
 
       case 'e':
-        // E - closewise
-        updateRotate(-2);
-
+        // E - clockwise
+        updateRotate(-Number(ptCtx.rectRotateSensitivity));
         break;
 
       case 'g':

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

@@ -89,13 +89,11 @@ const TopViewToolbar = ({ currentData }: IAnnotationStateProps) => {
 
   const currentToolName = ptCtx?.topViewInstance?.toolScheduler?.getCurrentToolName();
 
-  const ratio = 2;
-
   const clockwiseRotate = () => {
-    updateRotate(-ratio);
+    updateRotate(-Number(ptCtx.rectRotateSensitivity));
   };
   const anticlockwiseRotate = () => {
-    updateRotate(ratio);
+    updateRotate(ptCtx.rectRotateSensitivity);
   };
 
   const reverseRotate = () => {

packages/lb-components/src/index.scss

@@ -390,6 +390,7 @@ $prefix: bee;
   #style-width,
   #style-color,
   #style-fillOpacity,
+  #style-rectRotateSensitivity,
   #style-borderOpacity {
     .ant-slider {
       .ant-slider-track {
@@ -463,7 +464,8 @@ $prefix: bee;
   }
 
   #style-radius,
-  #style-width {
+  #style-width,
+  #style-rectRotateSensitivity {
     .ant-slider-step {
       .ant-slider-dot {
         height: 12px;

packages/lb-components/src/index.tsx

@@ -22,6 +22,7 @@ import LLMToolView from '@/components/LLMToolView';
 import SwitchCuboidBoxIn2DView from '@/views/MainView/toolFooter/SwitchCuboidBoxIn2DView';
 import MeasureCanvas from './components/measureCanvas';
 import AnnotatedBox from './views/MainView/sidebar/PointCloudToolSidebar/components/annotatedBox';
+import RectRotateSensitivitySlider from './views/MainView/sidebar/PointCloudToolSidebar/components/rectRotateSensitivitySlider';
 import { FindTrackIDIndexInCheckMode as FindTrackIDIndex } from './views/MainView/sidebar/PointCloudToolSidebar/components/findTrackIDIndex';
 import { WrapAudioPlayer as AudioPlayer } from './components/audioPlayer';
 import { generatePointCloudBoxRects } from './utils';
@@ -81,6 +82,7 @@ export {
   SwitchCuboidBoxIn2DView,
   MeasureCanvas,
   AnnotatedBox,
+  RectRotateSensitivitySlider,
   FindTrackIDIndex,
   AudioPlayer,
   generatePointCloudBoxRects,

packages/lb-components/src/store/annotatedBox/index.tsx

@@ -17,6 +17,8 @@ interface Store {
   setHighlightIDs: (highlightIDs: number[]) => void;
   selectedIDs: string[];
   setSelectedIDs: (selectedIDs: string[]) => void;
+  rectRotateSensitivity: number;
+  setRectRotateSensitivity: (sensitivity: number) => void;
   setPtCtx: (ptCtx: IPointCloudContext) => void;
 }
 
@@ -27,7 +29,13 @@ const useAnnotatedBoxStore = create<Store>((set) => ({
   highlightIDs: [],
   setHighlightIDs: (highlightIDs) => set((state) => ({ highlightIDs })),
   selectedIDs: [],
-  setSelectedIDs: (selectedIDs) => set((state) => ({ selectedIDs })),
+  setSelectedIDs: (selectedIDs) =>
+    set((state) => {
+      return { selectedIDs };
+    }),
+  rectRotateSensitivity: 2,
+  setRectRotateSensitivity: (sensitivity) =>
+    set((state) => ({ rectRotateSensitivity: sensitivity })),
   setPtCtx: (ptCtx) => set((state) => ({ ptCtx })),
 }));
 

packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/components/findTrackIDIndex/index.module.scss

@@ -3,6 +3,6 @@
   .content {
     display: flex;
     justify-content: space-between;
-    margin-top: 4px;
+    margin-top: 16px;
   }
 }

packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/components/rectRotateSensitivitySlider/index.module.scss

@@ -0,0 +1,6 @@
+.rectRotateSensitivitySlider {
+  padding: 12px 20px;
+  .title{
+    margin-bottom: 16px;
+  }
+}

packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/components/rectRotateSensitivitySlider/index.tsx

@@ -0,0 +1,48 @@
+/*
+ * @file Provides a slider component for adjusting the rotation angle sensitivity in a point cloud context.
+ *       The slider allows values between 1 and 5, with marks at 0.5, 1, 2, 3, and 4.
+ *       The current sensitivity value is managed via the PointCloudContext.
+ * @author Vincent He <[email protected]>
+ * @date 2024-06-05
+ */
+import React from 'react';
+import { Slider } from 'antd';
+import { PointCloudContext } from '@/components/pointCloudView/PointCloudContext';
+import { i18n } from '@labelbee/lb-utils';
+import styles from './index.module.scss';
+
+const marks = {
+  0.5: 0.5,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+};
+
+const RectRotateSensitivitySlider = () => {
+  const ptCtx = React.useContext(PointCloudContext);
+
+  const handleSliderChange = (value: number) => {
+    ptCtx.setRectRotateSensitivity(value);
+  };
+
+  return (
+    <div className={styles.rectRotateSensitivitySlider}>
+      <div className={styles.title}>{i18n.t('RotationAngleSensitivity')}</div>
+      <div className='toolStyle'>
+        <div id='style-rectRotateSensitivity'>
+          <Slider
+            min={0.5}
+            max={4}
+            step={null}
+            value={ptCtx.rectRotateSensitivity}
+            onChange={handleSliderChange}
+            marks={marks}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RectRotateSensitivitySlider;

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

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { LabelBeeContext, useDispatch } from '@/store/ctx';
 import BatchUpdateModal from './components/batchUpdateModal';
 import AnnotatedBox from './components/annotatedBox';
+import RectRotateSensitivitySlider from './components/rectRotateSensitivitySlider';
 import FindTrackIDIndex from './components/findTrackIDIndex';
 import { IFileItem } from '@/types/data';
 import {
@@ -476,6 +477,8 @@ const PointCloudToolSidebar: React.FC<IProps> = ({
           <AnnotatedBox imgList={imgList} imgIndex={imgIndex} />
           <Divider style={{ margin: 0 }} />
           <FindTrackIDIndex imgList={imgList} imgIndex={imgIndex} />
+          <Divider style={{ margin: 0 }} />
+          <RectRotateSensitivitySlider />
         </div>
       )}
     </>

packages/lb-utils/src/i18n/resources.json

@@ -361,7 +361,8 @@
     "InvalidQuestionAndSkip": "Invalid question, please skip this question",
     "ProjectionFrameCannotBeDeleted": "Projection frame cannot be deleted",
     "FailedToCopyResults": "Failed to copy results",
-    "PartialResultsReplicationFailure": "Partial results replication failure"
+    "PartialResultsReplicationFailure": "Partial results replication failure",
+    "RotationAngleSensitivity": "Rotation angle sensitivity"
   },
   "cn": {
     "TextInput": "文本输入",
@@ -725,6 +726,7 @@
     "InvalidQuestionAndSkip": "无效题目，请跳过此题",
     "ProjectionFrameCannotBeDeleted": "投射框无法删除",
     "FailedToCopyResults": "复制结果失败",
-    "PartialResultsReplicationFailure": "部分结果复制失败"
+    "PartialResultsReplicationFailure": "部分结果复制失败",
+    "RotationAngleSensitivity": "旋转微调角度"
   }
 }