feat: PointCloudTool's hotkey UI

packages/lb-components/src/index.scss

@@ -96,11 +96,6 @@ $prefix: bee;
     padding: 4px;
     border: 1px solid #cccccc;
   }
-
-  &__hotkey-content {
-    max-height: 70vh;
-    overflow-y: auto;
-  }
 }
 
 .#{$prefix}-page-input {
@@ -128,7 +123,6 @@ $prefix: bee;
 }
 
 // 头部
-
 .#{$prefix}-header {
   &__title {
     color: rgba(153, 153, 153, 1);
@@ -707,17 +701,16 @@ $prefix: bee;
 $hotkey-item-height: 46px;
 $hotkey-container-padding: 7px;
 
+.ant-popover.tool-hotkeys-popover .ant-popover-inner-content {
+  max-height: 70vh;
+  overflow-y: scroll;
+  padding: 0;
+}
+
 .tipsBar {
   display: flex;
   height: 100%;
 
-  :global {
-    .ant-popover.tool-hotkeys-popover .ant-popover-inner-content {
-      max-height: $hotkey-item-height * 10 + $hotkey-container-padding * 2;
-      overflow-y: auto;
-    }
-  }
-
   .hotKeyIconGray,
   .helpIconGray {
     width: 15px;

packages/lb-components/src/types/tool.d.ts

@@ -1,6 +1,7 @@
 export interface IShortcut {
   name: string;
-  icon: any;
-  shortCut: string[];
+  icon?: any;
+  shortCut?: string[];
   noticeInfo?: string;
+  linkSymbol?: string;
 }

packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx

@@ -12,12 +12,13 @@ import lineToolShortCutTable from './line';
 import tagToolSingleShortCutTable from './tag';
 import textToolShortCutTable from './text';
 import videoToolShortCutTable from './videoTag';
+import pointCloudShortCutTable from './pointCloud';
 
 import { footerCls } from '../../index';
 import { useTranslation } from 'react-i18next';
 import { cTool } from '@labelbee/lb-annotation';
 
-const { EVideoToolName } = cTool;
+const { EVideoToolName, EPointCloudName } = cTool;
 
 interface IProps {
   style?: any;
@@ -33,6 +34,19 @@ const shortCutTable: any = {
   [EToolName.Line]: lineToolShortCutTable,
   [EToolName.Text]: textToolShortCutTable,
   [EVideoToolName.VideoTagTool]: videoToolShortCutTable,
+  [EPointCloudName.PointCloud]: pointCloudShortCutTable,
+};
+
+const ToolHotKeyIcon = ({ icon }: { icon: React.ReactElement | string }) => {
+  if (typeof icon === 'string') {
+    return <img width={16} height={16} src={icon} />;
+  }
+
+  if (icon) {
+    return icon;
+  }
+
+  return null;
 };
 
 const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
@@ -43,21 +57,11 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
     return null;
   }
 
-  const renderImg = (info: Element | string) => {
-    if (typeof info === 'string') {
-      return <img width={16} height={16} src={info} style={iconStyle} />;
-    }
-    return info;
-  };
   const shortCutStyle = {
     width: 320,
     display: 'flex',
     justifyContent: 'space-between',
-    margin: '23px 21px',
-  };
-
-  const iconStyle = {
-    marginRight: 10,
+    margin: 16,
   };
 
   const shortCutNameStyles: React.CSSProperties = {
@@ -74,8 +78,8 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
   const setHotKey = (info: any, index: number) => (
     <div style={shortCutStyle} key={index}>
       <span style={{ display: 'flex', alignItems: 'center' }}>
-        {renderImg(info.icon)}
-        {t(info.name)}
+        <ToolHotKeyIcon icon={info.icon} />
+        <span style={{ marginLeft: info.icon ? 16 : 0 }}>{t(info.name)}</span>
       </span>
       <span style={{ display: 'flex', alignItems: 'center' }}>
         {info.noticeInfo && (
@@ -86,11 +90,16 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
     </div>
   );
 
-  const setSVG = (list: any[], useDangerInnerHtml = false, linkSymbol?: string) => {
+  const setSVG = (list: any[], useDangerInnerHtml = false, linkSymbol = '+') => {
+    if (!list) {
+      return null;
+    }
     const listDom = list.map((item, index) => {
+      const wrapperStyle = { display: 'flex', alignItems: 'center' };
+
       if (useDangerInnerHtml) {
         return (
-          <span key={index} style={{ display: 'flex' }}>
+          <span key={index} style={wrapperStyle}>
             <span style={shortCutNameStyles} dangerouslySetInnerHTML={{ __html: item }} />
           </span>
         );
@@ -99,7 +108,7 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
       if (index < list.length - 1) {
         if (typeof item === 'number') {
           return (
-            <span key={index} style={{ display: 'flex' }}>
+            <span key={index} style={wrapperStyle}>
               <span style={shortCutNameStyles}>{item}</span>
               <span style={{ marginRight: '3px' }}>~</span>
             </span>
@@ -108,7 +117,7 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
 
         if (item?.startsWith('data')) {
           return (
-            <span key={index} style={{ display: 'flex' }}>
+            <span key={index} style={wrapperStyle}>
               <span className='shortCutButton' style={{ marginRight: '3px' }}>
                 <img width={16} height={23} src={item} />
               </span>
@@ -117,15 +126,15 @@ const ToolHotKey: React.FC<IProps> = ({ style, title, toolName }) => {
           );
         }
         return (
-          <span key={index} style={{ display: 'flex' }}>
+          <span key={index} style={wrapperStyle}>
             <span style={shortCutNameStyles}>{item}</span>
-            <span style={{ marginRight: '3px' }}>{linkSymbol || '+'}</span>
+            <span style={{ marginRight: '3px' }}>{linkSymbol}</span>
           </span>
         );
       }
       if (typeof item === 'number') {
         return (
-          <span key={index} style={{ display: 'flex' }}>
+          <span key={index} style={wrapperStyle}>
             <span style={shortCutNameStyles}>{item}</span>
           </span>
         );

packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/pointCloud/index.tsx

@@ -0,0 +1,156 @@
+import _ from 'lodash';
+import { backward, forward, fullScreen, scale } from '../common';
+import dragIcon from '@/assets/annotation/toolHotKeyIcon/icon_move_kj.svg';
+import leftClick from '@/assets/annotation/toolHotKeyIcon/icon_mouse_left_kj.svg';
+import rightClick from '@/assets/annotation/toolHotKeyIcon/icon_mouse_right_kj.svg';
+import changePointCloudValid from '@/assets/annotation/pointCloudTool/changePointCloudValid.svg';
+import copy from '@/assets/annotation/pointCloudTool/copy.svg';
+import nextBox from '@/assets/annotation/pointCloudTool/nextBox.svg';
+import patse from '@/assets/annotation/pointCloudTool/patse.svg';
+import prevBox from '@/assets/annotation/pointCloudTool/prevBox.svg';
+import rotate180_black from '@/assets/annotation/pointCloudTool/rotate180_black.svg';
+import selectAll from '@/assets/annotation/pointCloudTool/selectAll.svg';
+import selectMultiple from '@/assets/annotation/pointCloudTool/selectMultiple.svg';
+import TabChangeSelectedSvg from '@/assets/annotation/toolHotKeyIcon/icon_tab_kj.svg';
+
+import { IShortcut } from '@/types/tool';
+import React from 'react';
+import { ReloadOutlined, RotateLeftOutlined, RotateRightOutlined } from '@ant-design/icons';
+
+const changePointSize: IShortcut = {
+  name: '点的显示粗细',
+  icon: (
+    <span
+      style={{
+        display: ' inline-block',
+        width: 14,
+        height: 14,
+        borderRadius: '50%',
+        border: '1px solid',
+      }}
+    />
+  ),
+  shortCut: ['+', '-'],
+  linkSymbol: '',
+};
+
+const rotateRoundCenter: IShortcut = {
+  name: '绕中心点旋转画面',
+  icon: <ReloadOutlined />,
+  shortCut: [leftClick],
+  noticeInfo: '拖动',
+};
+
+const Drag3D = {
+  name: '点云平移',
+  icon: dragIcon,
+  shortCut: ['Shift', leftClick],
+};
+
+const DragTopView = {
+  name: '俯视图平移',
+  icon: dragIcon,
+  shortCut: [rightClick],
+  noticeInfo: '拖动',
+};
+
+const ChangeInvalid = {
+  name: '切换点云有效性',
+  icon: changePointCloudValid,
+  shortCut: ['V'],
+};
+
+const CopyBox = {
+  name: '复制框',
+  icon: copy,
+  shortCut: ['Ctrl', 'C'],
+};
+
+const PasteBox = {
+  name: '粘贴框',
+  icon: patse,
+  shortCut: ['Ctrl', 'V'],
+};
+
+const LeftRotate = {
+  name: '向左旋转微调',
+  icon: <RotateLeftOutlined />,
+  shortCut: ['Q'],
+};
+
+const RightRotate = {
+  name: '向右旋转微调',
+  icon: <RotateRightOutlined />,
+  shortCut: ['E'],
+};
+
+const PrevBox = {
+  name: '上一框',
+  icon: prevBox,
+  shortCut: ['Z'],
+};
+
+const NextBox = {
+  name: '下一框',
+  icon: nextBox,
+  shortCut: ['C'],
+};
+
+const Rotate180 = {
+  name: '旋转180°',
+  icon: rotate180_black,
+  shortCut: ['G'],
+  noticeInfo: '选中时',
+};
+
+const CopyPrevPage = {
+  name: '复制上一页',
+  icon: copy,
+  shortCut: ['Alt', 'C'],
+};
+
+const ChangeBoxInvalid = {
+  name: '切换标注框有效性',
+  icon: TabChangeSelectedSvg,
+  shortCut: ['F'],
+  noticeInfo: '选中时',
+};
+
+const SelectMulti = {
+  name: '多选',
+  icon: selectMultiple,
+  shortCut: ['Ctrl', rightClick],
+};
+
+const SelectAll = {
+  name: '全选',
+  icon: selectAll,
+  shortCut: ['Ctrl', 'A'],
+};
+
+const pointCloudShortCutTable: IShortcut[] = [
+  { name: '通用' },
+  backward,
+  forward,
+  changePointSize,
+  scale,
+  rotateRoundCenter,
+  Drag3D,
+  DragTopView,
+  ChangeInvalid,
+  { name: '拉框模式' },
+  CopyBox,
+  PasteBox,
+  LeftRotate,
+  RightRotate,
+  PrevBox,
+  NextBox,
+  Rotate180,
+  CopyPrevPage,
+  ChangeBoxInvalid,
+  SelectMulti,
+  SelectAll,
+  fullScreen,
+];
+
+export default pointCloudShortCutTable;