feat: LB-components use shortcut to change Pattern

open-mmlab · Jul 18, 2022 · 049f665 · 049f665
1 parent 06b9760
commit 049f665
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 32 deletions.
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx
@@ -371,10 +371,9 @@ const PointCloudTopView = () => {
           isAppend: false,
         });
 
-        plgOpraRef.current = polygonOperation;
-
         polygonOperation.eventBinding();
         polygonOperation.setPattern(EPolygonPattern.Rect);
+        plgOpraRef.current = polygonOperation;
         TopPointCloudPolygonOperation = polygonOperation;
 
         /**
@@ -414,16 +413,16 @@ const PointCloudTopView = () => {
     }
 
     if (plgOpraRef.current) {
-      plgOpraRef.current.singleOn('polygonCreated', (polygon: any) => {
-        if (pointCloudRef.current && ref.current) {
-          const { boxParams } = afterPolygonCreated(polygon, TopPointCloud, {
-            width: ref.current.clientWidth,
-            height: ref.current.clientHeight,
-          });
-          pointCloudMain.hightLightOriginPointCloud(boxParams);
-          synchronizeSideView(boxParams, polygon);
-          synchronizeBackView(boxParams, polygon);
+      TopPointCloudPolygonOperation.singleOn('polygonCreated', (polygon: any) => {
+        if (TopPointCloudPolygonOperation.pattern === EPolygonPattern.Normal) {
+          return;
         }
+
+        const { boxParams } = afterPolygonCreated(polygon, TopPointCloud, size);
+        pointCloudMain.hightLightOriginPointCloud(boxParams);
+        synchronizeSideView(boxParams, polygon);
+        synchronizeBackView(boxParams, polygon);
+        // }
       });
 
       plgOpraRef.current.singleOn('selectedChange', () => {

diff --git a/packages/lb-components/src/components/pointCloudView/index.tsx b/packages/lb-components/src/components/pointCloudView/index.tsx
@@ -24,7 +24,10 @@ import PointCloudSideView from './PointCloudSideView';
 import PointCloud2DView from './PointCloud2DView';
 import { PointCloudContext } from './PointCloudContext';
 import { IPointCloudBoxList, IPointCloudBox } from '@labelbee/lb-utils';
-import { cAnnotation } from '@labelbee/lb-annotation';
+import { cAnnotation, cTool } from '@labelbee/lb-annotation';
+import { message } from 'antd';
+
+const { EPolygonPattern } = cTool;
 const { ERotateDirection } = cAnnotation;
 
 const PointCloudView = () => {
@@ -81,8 +84,25 @@ const PointCloudView = () => {
 
           break;
 
-        case 9:
-          // TAB
+        case 85:
+          {
+            // U , change TopOpereation Pattern
+            const newPattern =
+              TopPointCloudPolygonOperation.pattern === EPolygonPattern.Normal
+                ? EPolygonPattern.Rect
+                : EPolygonPattern.Normal;
+            TopPointCloudPolygonOperation.setPattern(newPattern);
+            const POLYGON_PATTERN = {
+              [EPolygonPattern.Normal]: 'Normal Pattern',
+              [EPolygonPattern.Rect]: 'Rect Pattern',
+            };
+
+            message.success(`Change Pattern to ${POLYGON_PATTERN[newPattern]} successfully`);
+
+            // Clear Status
+            TopPointCloudPolygonOperation.clearActiveStatus();
+            TopPointCloudPolygonOperation.clearDrawingStatus();
+          }
 
           break;
 

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -304,6 +304,9 @@ $prefix: bee;
     align-items: center;
     color: #999;
     cursor: pointer;
+    &__selected {
+      color: #666fff;
+    }
   }
 
   &__toolOption + &__toolOption {
@@ -314,10 +317,6 @@ $prefix: bee;
     max-width: 20px;
     max-height: 20px;
     margin: 0 10px;
-
-    &.selected {
-      color: #666fff;
-    }
   }
 
   &__horizontal {
@@ -1392,6 +1391,8 @@ $ptPrefix: #{$prefix}-point-cloud;
   flex: 1;
 
   .#{$ptPrefix}-container {
+    position: relative;
+
     &__header {
       background-color: #444;
       color: white;

diff --git a/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx b/packages/lb-components/src/views/MainView/sidebar/PointCloudToolSidebar/index.tsx
@@ -3,6 +3,7 @@ import { ToolIcons } from '../ToolIcons';
 import { cTool } from '@labelbee/lb-annotation';
 import { Input, Tag } from 'antd';
 import { EditFilled } from '@ant-design/icons';
+const { EToolName } = cTool;
 
 const SELECTED_BOX_ID = [1, 2, 3, 7, 8, 10, 101, 1002, 9999, 99999];
 
@@ -83,9 +84,15 @@ const BoxIdInput = () => {
 };
 
 const PointCloudToolSidebar = () => {
+  const onChange = () => {};
+
   return (
     <>
-      <ToolIcons toolName={cTool.EPointCloudName.PointCloud} />
+      <ToolIcons
+        toolName={cTool.EPointCloudName.PointCloud}
+        selectedToolName={EToolName.Rect}
+        onChange={onChange}
+      />
       <AnnotatedBox />
       <BoxIdInput />
     </>

diff --git a/packages/lb-components/src/views/MainView/sidebar/ToolIcons.tsx b/packages/lb-components/src/views/MainView/sidebar/ToolIcons.tsx
@@ -16,6 +16,7 @@ import PolygonSvg from '@/assets/annotation/polygonTool/icon_polygon.svg';
 import rectSvg from '@/assets/annotation/rectTool/icon_rect.svg';
 import rectASvg from '@/assets/annotation/rectTool/icon_rect_a.svg';
 import { cTool } from '@labelbee/lb-annotation';
+import classnames from 'classnames';
 
 const { EPointCloudName, TOOL_NAME } = cTool;
 
@@ -45,9 +46,11 @@ const toolList = [
 export const ToolIcons = ({
   toolName,
   selectedToolName,
+  onChange,
 }: {
   toolName: string;
   selectedToolName?: string;
+  onChange: (toolName: EToolName) => void;
 }) => {
   const renderTools = toolList?.filter((item) => {
     if (toolName === (EPointCloudName.PointCloud as unknown as EToolName)) {
@@ -61,19 +64,28 @@ export const ToolIcons = ({
 
   return (
     <div className={`${sidebarCls}__level`}>
-      {renderTools.map((tool) => (
-        <span className={`${sidebarCls}__toolOption`} key={tool.toolName}>
-          <img
-            className={`${sidebarCls}__singleTool`}
-            src={
-              hasMultiTools && selectedToolName === tool.toolName
-                ? tool?.selectedSvg
-                : tool?.commonSvg
-            }
-          />
-          <span>{TOOL_NAME[tool.toolName]}</span>
-        </span>
-      ))}
+      {renderTools.map((tool) => {
+        const isSelected = hasMultiTools && selectedToolName === tool.toolName;
+        return (
+          <span
+            className={`${sidebarCls}__toolOption`}
+            key={tool.toolName}
+            onChange={() => onChange(tool.toolName)}
+          >
+            <img
+              className={`${sidebarCls}__singleTool`}
+              src={isSelected ? tool?.selectedSvg : tool?.commonSvg}
+            />
+            <span
+              className={classnames({
+                [`${sidebarCls}__toolOption__selected`]: isSelected,
+              })}
+            >
+              {TOOL_NAME[tool.toolName]}
+            </span>
+          </span>
+        );
+      })}
     </div>
   );
 };