From 495c6b04d4a3fd026a18daebe1d06fbd416e1185 Mon Sep 17 00:00:00 2001 From: glenfiddish Date: Mon, 18 Jul 2022 17:13:09 +0800 Subject: [PATCH] feat: PointCloudTool's hotkey UI --- .../pointCloudTool/changePointCloudValid.svg | 23 +++ .../assets/annotation/pointCloudTool/copy.svg | 4 + .../annotation/pointCloudTool/nextBox.svg | 3 + .../annotation/pointCloudTool/patse.svg | 5 + .../annotation/pointCloudTool/prevBox.svg | 3 + .../pointCloudTool/rotate180_black.svg | 5 + .../annotation/pointCloudTool/selectAll.svg | 5 + .../pointCloudTool/selectMultiple.svg | 4 + packages/lb-components/src/index.scss | 19 +-- packages/lb-components/src/types/tool.d.ts | 5 +- .../FooterTips/ToolHotKey/index.tsx | 51 +++--- .../ToolHotKey/pointCloud/index.tsx | 156 ++++++++++++++++++ 12 files changed, 247 insertions(+), 36 deletions(-) create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/changePointCloudValid.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/copy.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/nextBox.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/patse.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/prevBox.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/rotate180_black.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/selectAll.svg create mode 100644 packages/lb-components/src/assets/annotation/pointCloudTool/selectMultiple.svg create mode 100644 packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/pointCloud/index.tsx diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/changePointCloudValid.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/changePointCloudValid.svg new file mode 100644 index 000000000..d30b01270 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/changePointCloudValid.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/copy.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/copy.svg new file mode 100644 index 000000000..707f3e3b2 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/nextBox.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/nextBox.svg new file mode 100644 index 000000000..1ac054338 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/nextBox.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/patse.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/patse.svg new file mode 100644 index 000000000..9d4c04d69 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/patse.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/prevBox.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/prevBox.svg new file mode 100644 index 000000000..1436d589f --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/prevBox.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/rotate180_black.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/rotate180_black.svg new file mode 100644 index 000000000..de95a2929 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/rotate180_black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/selectAll.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/selectAll.svg new file mode 100644 index 000000000..9fa6afd40 --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/selectAll.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/lb-components/src/assets/annotation/pointCloudTool/selectMultiple.svg b/packages/lb-components/src/assets/annotation/pointCloudTool/selectMultiple.svg new file mode 100644 index 000000000..91b301d6a --- /dev/null +++ b/packages/lb-components/src/assets/annotation/pointCloudTool/selectMultiple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss index 4a1cf2e2f..76add7cb9 100644 --- a/packages/lb-components/src/index.scss +++ b/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; diff --git a/packages/lb-components/src/types/tool.d.ts b/packages/lb-components/src/types/tool.d.ts index 1686cd9ea..07ba7819b 100644 --- a/packages/lb-components/src/types/tool.d.ts +++ b/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; } diff --git a/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx b/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx index 24e13c16a..9433d1b6d 100644 --- a/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx +++ b/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 ; + } + + if (icon) { + return icon; + } + + return null; }; const ToolHotKey: React.FC = ({ style, title, toolName }) => { @@ -43,21 +57,11 @@ const ToolHotKey: React.FC = ({ style, title, toolName }) => { return null; } - const renderImg = (info: Element | string) => { - if (typeof info === 'string') { - return ; - } - 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 = ({ style, title, toolName }) => { const setHotKey = (info: any, index: number) => (
- {renderImg(info.icon)} - {t(info.name)} + + {t(info.name)} {info.noticeInfo && ( @@ -86,11 +90,16 @@ const ToolHotKey: React.FC = ({ style, title, toolName }) => {
); - 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 ( - + ); @@ -99,7 +108,7 @@ const ToolHotKey: React.FC = ({ style, title, toolName }) => { if (index < list.length - 1) { if (typeof item === 'number') { return ( - + {item} ~ @@ -108,7 +117,7 @@ const ToolHotKey: React.FC = ({ style, title, toolName }) => { if (item?.startsWith('data')) { return ( - + @@ -117,15 +126,15 @@ const ToolHotKey: React.FC = ({ style, title, toolName }) => { ); } return ( - + {item} - {linkSymbol || '+'} + {linkSymbol} ); } if (typeof item === 'number') { return ( - + {item} ); diff --git a/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/pointCloud/index.tsx b/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/pointCloud/index.tsx new file mode 100644 index 000000000..02f612c4d --- /dev/null +++ b/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: ( + + ), + shortCut: ['+', '-'], + linkSymbol: '', +}; + +const rotateRoundCenter: IShortcut = { + name: '绕中心点旋转画面', + icon: , + 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: , + shortCut: ['Q'], +}; + +const RightRotate = { + name: '向右旋转微调', + icon: , + 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;