diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx index 74cd0bec..9cf839c1 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import React, { useState, useEffect } from 'react'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import { Action } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -32,6 +32,8 @@ interface StateToProps { states: any[]; labels: any[]; jobInstance: any; + keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -56,6 +58,10 @@ function mapStateToProps(state: CombinedState): StateToProps { labels, }, }, + shortcuts: { + keyMap, + normalizedKeyMap, + }, } = state; return { @@ -64,6 +70,8 @@ function mapStateToProps(state: CombinedState): StateToProps { activatedStateID, activatedAttributeID, states, + keyMap, + normalizedKeyMap, }; } @@ -87,6 +95,8 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. jobInstance, updateAnnotations, activateObject, + keyMap, + normalizedKeyMap, } = props; const [labelAttrMap, setLabelAttrMap] = useState( @@ -167,31 +177,11 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. trigger: null, }; - const keyMap = { - NEXT_ATTRIBUTE: { - name: 'Next attribute', - description: 'Go to the next attribute', - sequence: 'ArrowDown', - action: 'keydown', - }, - PREVIOUS_ATTRIBUTE: { - name: 'Previous attribute', - description: 'Go to the previous attribute', - sequence: 'ArrowUp', - action: 'keydown', - }, - NEXT_OBJECT: { - name: 'Next object', - description: 'Go to the next object', - sequence: 'Tab', - action: 'keydown', - }, - PREVIOUS_OBJECT: { - name: 'Previous object', - description: 'Go to the previous object', - sequence: 'Shift+Tab', - action: 'keydown', - }, + const subKeyMap = { + NEXT_ATTRIBUTE: keyMap.NEXT_ATTRIBUTE, + PREVIOUS_ATTRIBUTE: keyMap.PREVIOUS_ATTRIBUTE, + NEXT_OBJECT: keyMap.NEXT_OBJECT, + PREVIOUS_OBJECT: keyMap.PREVIOUS_OBJECT, }; const handlers = { @@ -228,7 +218,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. if (activeObjectState) { return ( - + @@ -240,6 +230,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. occluded={activeObjectState.occluded} objectsCount={states.length} currentIndex={states.indexOf(activeObjectState)} + normalizedKeyMap={normalizedKeyMap} nextObject={nextObject} /> ; nextAttribute(step: number): void; } @@ -21,21 +22,26 @@ function AttributeSwitcher(props: Props): JSX.Element { currentIndex, attributesCount, nextAttribute, + normalizedKeyMap, } = props; const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`; return (
- + + + {currentAttribute} {` [${currentIndex + 1}/${attributesCount}]`} - + + +
); } diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx index 9341396f..97e77d0b 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx @@ -14,6 +14,7 @@ interface Props { occluded: boolean; objectsCount: number; currentIndex: number; + normalizedKeyMap: Record; nextObject(step: number): void; } @@ -24,23 +25,28 @@ function ObjectSwitcher(props: Props): JSX.Element { objectsCount, currentIndex, nextObject, + normalizedKeyMap, } = props; const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`; return (
- + + + {currentLabel} {` ${clientID} `} {`[${currentIndex + 1}/${objectsCount}]`} - + + +
); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx index 4cf77599..038157e2 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import Tooltip from 'antd/lib/tooltip'; import Icon from 'antd/lib/icon'; @@ -59,6 +59,7 @@ interface Props { contextType: ContextMenuType; aamZoomMargin: number; workspace: Workspace; + keyMap: Record; onSetupCanvas: () => void; onDragCanvas: (enabled: boolean) => void; onZoomCanvas: (enabled: boolean) => void; @@ -683,6 +684,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { onChangeGridColor, onChangeGridOpacity, onSwitchGrid, + keyMap, } = this.props; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -691,61 +693,16 @@ export default class CanvasWrapperComponent extends React.PureComponent { } }; - const keyMap = { - INCREASE_BRIGHTNESS: { - name: 'Brightness+', - description: 'Increase brightness level for the image', - sequence: 'shift+b+=', - action: 'keypress', - }, - DECREASE_BRIGHTNESS: { - name: 'Brightness-', - description: 'Decrease brightness level for the image', - sequence: 'shift+b+-', - action: 'keydown', - }, - INCREASE_CONTRAST: { - name: 'Contrast+', - description: 'Increase contrast level for the image', - sequence: 'shift+c+=', - action: 'keydown', - }, - DECREASE_CONTRAST: { - name: 'Contrast-', - description: 'Decrease contrast level for the image', - sequence: 'shift+c+-', - action: 'keydown', - }, - INCREASE_SATURATION: { - name: 'Saturation+', - description: 'Increase saturation level for the image', - sequence: 'shift+s+=', - action: 'keydown', - }, - DECREASE_SATURATION: { - name: 'Saturation-', - description: 'Increase contrast level for the image', - sequence: 'shift+s+-', - action: 'keydown', - }, - INCREASE_GRID_OPACITY: { - name: 'Grid opacity+', - description: 'Make the grid more visible', - sequence: 'shift+g+=', - action: 'keydown', - }, - DECREASE_GRID_OPACITY: { - name: 'Grid opacity-', - description: 'Make the grid less visible', - sequences: 'shift+g+-', - action: 'keydown', - }, - CHANGE_GRID_COLOR: { - name: 'Grid color', - description: 'Set another color for the image grid', - sequence: 'shift+g+enter', - action: 'keydown', - }, + const subKeyMap = { + INCREASE_BRIGHTNESS: keyMap.INCREASE_BRIGHTNESS, + DECREASE_BRIGHTNESS: keyMap.DECREASE_BRIGHTNESS, + INCREASE_CONTRAST: keyMap.INCREASE_CONTRAST, + DECREASE_CONTRAST: keyMap.DECREASE_CONTRAST, + INCREASE_SATURATION: keyMap.INCREASE_SATURATION, + DECREASE_SATURATION: keyMap.DECREASE_SATURATION, + INCREASE_GRID_OPACITY: keyMap.INCREASE_GRID_OPACITY, + DECREASE_GRID_OPACITY: keyMap.DECREASE_GRID_OPACITY, + CHANGE_GRID_COLOR: keyMap.CHANGE_GRID_COLOR, }; const step = 10; @@ -826,7 +783,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { return ( - + {/* This element doesn't have any props So, React isn't going to rerender it diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx index bf151997..16063fbb 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx @@ -3,20 +3,11 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; +import Layout from 'antd/lib/layout'; -import { - Layout, -} from 'antd'; - -import { - ActiveControl, - Rotation, -} from 'reducers/interfaces'; - -import { - Canvas, -} from 'cvat-canvas'; +import { ActiveControl, Rotation } from 'reducers/interfaces'; +import { Canvas } from 'cvat-canvas'; import RotateControl from './rotate-control'; import CursorControl from './cursor-control'; @@ -35,6 +26,8 @@ import SplitControl from './split-control'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; + keyMap: Record; + normalizedKeyMap: Record; mergeObjects(enabled: boolean): void; groupObjects(enabled: boolean): void; @@ -57,6 +50,8 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { repeatDrawShape, pasteShape, resetGroup, + normalizedKeyMap, + keyMap, } = props; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -65,55 +60,15 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { } }; - const keyMap = { - PASTE_SHAPE: { - name: 'Paste shape', - description: 'Paste a shape from internal CVAT clipboard', - sequence: 'ctrl+v', - action: 'keydown', - }, - SWITCH_DRAW_MODE: { - name: 'Draw mode', - description: 'Repeat the latest procedure of drawing with the same parameters', - sequence: 'n', - action: 'keydown', - }, - SWITCH_MERGE_MODE: { - name: 'Merge mode', - description: 'Activate or deactivate mode to merging shapes', - sequence: 'm', - action: 'keydown', - }, - SWITCH_GROUP_MODE: { - name: 'Group mode', - description: 'Activate or deactivate mode to grouping shapes', - sequence: 'g', - action: 'keydown', - }, - RESET_GROUP: { - name: 'Reset group', - description: 'Reset group for selected shapes (in group mode)', - sequence: 'shift+g', - action: 'keyup', - }, - CANCEL: { - name: 'Cancel', - description: 'Cancel any active canvas mode', - sequence: 'esc', - action: 'keydown', - }, - CLOCKWISE_ROTATION: { - name: 'Rotate clockwise', - description: 'Change image angle (add 90 degrees)', - sequence: 'ctrl+r', - action: 'keydown', - }, - ANTICLOCKWISE_ROTATION: { - name: 'Rotate anticlockwise', - description: 'Change image angle (substract 90 degrees)', - sequence: 'ctrl+shift+r', - action: 'keydown', - }, + const subKeyMap = { + PASTE_SHAPE: keyMap.PASTE_SHAPE, + SWITCH_DRAW_MODE: keyMap.SWITCH_DRAW_MODE, + SWITCH_MERGE_MODE: keyMap.SWITCH_MERGE_MODE, + SWITCH_GROUP_MODE: keyMap.SWITCH_GROUP_MODE, + RESET_GROUP: keyMap.RESET_GROUP, + CANCEL: keyMap.CANCEL, + CLOCKWISE_ROTATION: keyMap.CLOCKWISE_ROTATION, + ANTICLOCKWISE_ROTATION: keyMap.ANTICLOCKWISE_ROTATION, }; const handlers = { @@ -186,11 +141,18 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { theme='light' width={44} > - - - + + - +
@@ -224,11 +186,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
+ + )} > - + + + - + + + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx index bee90af8..049e37a8 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx @@ -3,19 +3,11 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Icon from 'antd/lib/icon'; +import Tooltip from 'antd/lib/tooltip'; -import { - Icon, - Tooltip, -} from 'antd'; - -import { - FitIcon, -} from 'icons'; - -import { - Canvas, -} from 'cvat-canvas'; +import { FitIcon } from 'icons'; +import { Canvas } from 'cvat-canvas'; interface Props { canvasInstance: Canvas; @@ -27,7 +19,7 @@ function FitControl(props: Props): JSX.Element { } = props; return ( - + canvasInstance.fit()} /> ); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx index 5fc2c40e..8143caf1 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx @@ -3,28 +3,25 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Tooltip from 'antd/lib/tooltip'; +import Icon from 'antd/lib/icon'; -import { - Tooltip, - Icon, -} from 'antd'; - -import { - GroupIcon, -} from 'icons'; - +import { GroupIcon } from 'icons'; import { Canvas } from 'cvat-canvas'; import { ActiveControl } from 'reducers/interfaces'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; - + switchGroupShortcut: string; + resetGroupShortcut: string; groupObjects(enabled: boolean): void; } function GroupControl(props: Props): JSX.Element { const { + switchGroupShortcut, + resetGroupShortcut, activeControl, canvasInstance, groupObjects, @@ -45,8 +42,10 @@ function GroupControl(props: Props): JSX.Element { }, }; + const title = `Group shapes/tracks ${switchGroupShortcut}.` + + ` Select and press ${resetGroupShortcut} to reset a group`; return ( - + ); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx index 3bccdd4b..140f6420 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx @@ -19,12 +19,13 @@ import { ActiveControl } from 'reducers/interfaces'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; - + switchMergeShortcut: string; mergeObjects(enabled: boolean): void; } function MergeControl(props: Props): JSX.Element { const { + switchMergeShortcut, activeControl, canvasInstance, mergeObjects, @@ -46,7 +47,7 @@ function MergeControl(props: Props): JSX.Element { }; return ( - + ); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx index b62ff354..89c5a8d6 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx @@ -3,23 +3,12 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Icon from 'antd/lib/icon'; +import Tooltip from 'antd/lib/tooltip'; -import { - Icon, - Tooltip, -} from 'antd'; - -import { - MoveIcon, -} from 'icons'; - -import { - ActiveControl, -} from 'reducers/interfaces'; - -import { - Canvas, -} from 'cvat-canvas'; +import { MoveIcon } from 'icons'; +import { ActiveControl } from 'reducers/interfaces'; +import { Canvas } from 'cvat-canvas'; interface Props { canvasInstance: Canvas; @@ -27,10 +16,7 @@ interface Props { } function MoveControl(props: Props): JSX.Element { - const { - canvasInstance, - activeControl, - } = props; + const { canvasInstance, activeControl } = props; return ( diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx index 8b3343b6..ab036a1e 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx @@ -3,23 +3,12 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Icon from 'antd/lib/icon'; +import Tooltip from 'antd/lib/tooltip'; -import { - Icon, - Tooltip, -} from 'antd'; - -import { - ZoomIcon, -} from 'icons'; - -import { - ActiveControl, -} from 'reducers/interfaces'; - -import { - Canvas, -} from 'cvat-canvas'; +import { ZoomIcon } from 'icons'; +import { ActiveControl } from 'reducers/interfaces'; +import { Canvas } from 'cvat-canvas'; interface Props { canvasInstance: Canvas; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx index 139bff15..df9d4c15 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx @@ -3,27 +3,23 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Icon from 'antd/lib/icon'; +import Tooltip from 'antd/lib/tooltip'; +import Popover from 'antd/lib/popover'; -import { - Icon, - Tooltip, - Popover, -} from 'antd'; - -import { - RotateIcon, -} from 'icons'; - -import { - Rotation, -} from 'reducers/interfaces'; +import { RotateIcon } from 'icons'; +import { Rotation } from 'reducers/interfaces'; interface Props { + clockwiseShortcut: string; + anticlockwiseShortcut: string; rotateFrame(rotation: Rotation): void; } function RotateControl(props: Props): JSX.Element { const { + anticlockwiseShortcut, + clockwiseShortcut, rotateFrame, } = props; @@ -33,14 +29,14 @@ function RotateControl(props: Props): JSX.Element { placement='right' content={( <> - + rotateFrame(Rotation.ANTICLOCKWISE90)} component={RotateIcon} /> - + rotateFrame(Rotation.CLOCKWISE90)} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx index 0f711ba1..4b6703ba 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx @@ -3,10 +3,8 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { - Popover, - Icon, -} from 'antd'; +import Popover from 'antd/lib/popover'; +import Icon from 'antd/lib/icon'; import { Canvas } from 'cvat-canvas'; import { TagIcon } from 'icons'; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index 3edaa2aa..3366079d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx @@ -3,29 +3,27 @@ // SPDX-License-Identifier: MIT import React from 'react'; - -import { - Row, - Col, - Select, - Button, -} from 'antd'; - +import { Row, Col } from 'antd/lib/grid'; +import Select from 'antd/lib/select'; +import Button from 'antd/lib/button'; +import Tooltip from 'antd/lib/tooltip'; import Text from 'antd/lib/typography/Text'; interface Props { labels: any[]; selectedLabeID: number; + repeatShapeShortcut: string; onChangeLabel(value: string): void; onSetup( labelID: number, ): void; } -function setupTagPopover(props: Props): JSX.Element { +function SetupTagPopover(props: Props): JSX.Element { const { labels, selectedLabeID, + repeatShapeShortcut, onChangeLabel, onSetup, } = props; @@ -63,13 +61,15 @@ function setupTagPopover(props: Props): JSX.Element { - + + + ); } -export default React.memo(setupTagPopover); +export default React.memo(SetupTagPopover); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx index 7f434d3a..5d7be5f7 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx @@ -3,16 +3,10 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import Tooltip from 'antd/lib/tooltip'; +import Icon from 'antd/lib/icon'; -import { - Tooltip, - Icon, -} from 'antd'; - -import { - SplitIcon, -} from 'icons'; - +import { SplitIcon } from 'icons'; import { Canvas } from 'cvat-canvas'; import { ActiveControl } from 'reducers/interfaces'; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index 12ccd044..fcf0fe38 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -3,7 +3,6 @@ // SPDX-License-Identifier: MIT import React from 'react'; - import { Row, Col } from 'antd/lib/grid'; import Icon from 'antd/lib/icon'; import Select from 'antd/lib/select'; @@ -18,6 +17,7 @@ import Button from 'antd/lib/button'; import Modal from 'antd/lib/modal'; import Popover from 'antd/lib/popover'; import Text from 'antd/lib/typography/Text'; +import Tooltip from 'antd/lib/tooltip'; import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer'; @@ -38,6 +38,12 @@ function ItemMenu( serverID: number | undefined, locked: boolean, objectType: ObjectType, + copyShortcut: string, + pasteShortcut: string, + propagateShortcut: string, + toBackgroundShortcut: string, + toForegroundShortcut: string, + removeShortcut: string, copy: (() => void), remove: (() => void), propagate: (() => void), @@ -46,58 +52,68 @@ function ItemMenu( toForeground: (() => void), ): JSX.Element { return ( - + - + + + - + + + { objectType !== ObjectType.TAG && ( - <> - + + - - + + + )} + { objectType !== ObjectType.TAG && ( + + - - + + )} - + + + ); @@ -111,6 +127,12 @@ interface ItemTopComponentProps { objectType: ObjectType; type: string; locked: boolean; + copyShortcut: string; + pasteShortcut: string; + propagateShortcut: string; + toBackgroundShortcut: string; + toForegroundShortcut: string; + removeShortcut: string; changeLabel(labelID: string): void; copy(): void; remove(): void; @@ -129,6 +151,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element { objectType, type, locked, + copyShortcut, + pasteShortcut, + propagateShortcut, + toBackgroundShortcut, + toForegroundShortcut, + removeShortcut, changeLabel, copy, remove, @@ -146,13 +174,15 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element { {type} - + + + void); navigatePrevKeyframe: null | (() => void); @@ -217,6 +260,13 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { pinned, hidden, keyframe, + switchOccludedShortcut, + switchOutsideShortcut, + switchLockShortcut, + switchHiddenShortcut, + switchKeyFrameShortcut, + nextKeyFrameShortcut, + prevKeyFrameShortcut, navigateFirstKeyframe, navigatePrevKeyframe, @@ -249,12 +299,26 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { navigatePrevKeyframe - ? + ? ( + + + + ) : } { navigateNextKeyframe - ? + ? ( + + + + ) : } @@ -265,36 +329,48 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { outside - ? - : } + + { outside + ? + : } + - { locked - ? - : } + + { locked + ? + : } + - { occluded - ? - : } + + { occluded + ? + : } + - { hidden - ? - : } + - { keyframe - ? - : } + + { keyframe + ? + : } + { shapeType !== ShapeType.POINTS && ( - { pinned - ? - : } + + { pinned + ? + : } + ) } @@ -310,9 +386,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { locked - ? - : } + + { locked + ? + : } + @@ -325,26 +403,34 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { locked - ? - : } + + { locked + ? + : } + - { occluded - ? - : } + + { occluded + ? + : } + - { hidden - ? - : } + { shapeType !== ShapeType.POINTS && ( - { pinned - ? - : } + + { pinned + ? + : } + ) } @@ -587,6 +673,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame); interface Props { + normalizedKeyMap: Record; activated: boolean; objectType: ObjectType; shapeType: ShapeType; @@ -653,6 +740,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean { && nextProps.collapsed === prevProps.collapsed && nextProps.labels === prevProps.labels && nextProps.attributes === prevProps.attributes + && nextProps.normalizedKeyMap === prevProps.normalizedKeyMap && nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe && nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe && nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe @@ -681,6 +769,7 @@ function ObjectItemComponent(props: Props): JSX.Element { attributes, labels, collapsed, + normalizedKeyMap, navigateFirstKeyframe, navigatePrevKeyframe, navigateNextKeyframe, @@ -748,6 +837,12 @@ function ObjectItemComponent(props: Props): JSX.Element { objectType={objectType} type={type} locked={locked} + copyShortcut={normalizedKeyMap.COPY_SHAPE} + pasteShortcut={normalizedKeyMap.PASTE_SHAPE} + propagateShortcut={normalizedKeyMap.PROPAGATE_OBJECT} + toBackgroundShortcut={normalizedKeyMap.TO_BACKGROUND} + toForegroundShortcut={normalizedKeyMap.TO_FOREGROUND} + removeShortcut={normalizedKeyMap.DELETE_OBJECT} changeLabel={changeLabel} copy={copy} remove={remove} @@ -765,6 +860,13 @@ function ObjectItemComponent(props: Props): JSX.Element { pinned={pinned} hidden={hidden} keyframe={keyframe} + switchOccludedShortcut={normalizedKeyMap.SWITCH_OCCLUDED} + switchOutsideShortcut={normalizedKeyMap.SWITCH_OUTSIDE} + switchLockShortcut={normalizedKeyMap.SWITCH_LOCK} + switchHiddenShortcut={normalizedKeyMap.SWITCH_HIDDEN} + switchKeyFrameShortcut={normalizedKeyMap.SWITCH_KEYFRAME} + nextKeyFrameShortcut={normalizedKeyMap.NEXT_KEY_FRAME} + prevKeyFrameShortcut={normalizedKeyMap.PREV_KEY_FRAME} navigateFirstKeyframe={navigateFirstKeyframe} navigatePrevKeyframe={navigatePrevKeyframe} navigateNextKeyframe={navigateNextKeyframe} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx index 56b29a26..df150d9f 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx @@ -10,6 +10,7 @@ import Text from 'antd/lib/typography/Text'; import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input'; import { StatesOrdering } from 'reducers/interfaces'; +import { Tooltip } from 'antd'; interface StatesOrderingSelectorComponentProps { statesOrdering: StatesOrdering; @@ -56,6 +57,8 @@ interface Props { statesLocked: boolean; statesCollapsed: boolean; statesOrdering: StatesOrdering; + switchLockAllShortcut: string; + switchHiddenAllShortcut: string; changeStatesOrdering(value: StatesOrdering): void; lockAllStates(): void; unlockAllStates(): void; @@ -71,6 +74,8 @@ function ObjectListHeader(props: Props): JSX.Element { statesLocked, statesCollapsed, statesOrdering, + switchLockAllShortcut, + switchHiddenAllShortcut, changeStatesOrdering, lockAllStates, unlockAllStates, @@ -89,19 +94,25 @@ function ObjectListHeader(props: Props): JSX.Element { - { statesLocked - ? - : } + + { statesLocked + ? + : } + - { statesHidden - ? - : } + - { statesCollapsed - ? - : } + + { statesCollapsed + ? + : } + div:nth-child(3) > div > div { width: 100%; } - div:last-child > div > button { - width: 100%; - &:nth-child(1) { - border-radius: 3px 0px 0px 3px; + > div:last-child { + span { + width: 100%; } - &:nth-child(2) { - border-radius: 0px 3px 3px 0px; + + button { + width: 100%; + &:nth-child(1) { + border-radius: 3px 0px 0px 3px; + } + &:nth-child(2) { + border-radius: 0px 3px 3px 0px; + } } } } diff --git a/cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx b/cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx index 7b8d7aa1..85d057a6 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx @@ -3,12 +3,8 @@ // SPDX-License-Identifier: MIT import React from 'react'; - -import { - Menu, Modal, -} from 'antd'; - -import { ClickParam } from 'antd/lib/menu/index'; +import Menu, { ClickParam } from 'antd/lib/menu'; +import Modal from 'antd/lib/modal'; import DumpSubmenu from 'components/actions-menu/dump-submenu'; import LoadSubmenu from 'components/actions-menu/load-submenu'; diff --git a/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx b/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx index 36eee40b..536edc37 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx @@ -3,30 +3,29 @@ // SPDX-License-Identifier: MIT import React from 'react'; - -import { - Col, - Icon, - Modal, - Button, - Timeline, - Dropdown, -} from 'antd'; +import { Col } from 'antd/lib/grid'; +import Icon from 'antd/lib/icon'; +import Modal from 'antd/lib/modal'; +import Button from 'antd/lib/button'; +import Timeline from 'antd/lib/timeline'; +import Dropdown from 'antd/lib/dropdown'; import AnnotationMenuContainer from 'containers/annotation-page/top-bar/annotation-menu'; - import { MainMenuIcon, SaveIcon, UndoIcon, RedoIcon, -} from '../../../icons'; +} from 'icons'; interface Props { saving: boolean; savingStatuses: string[]; undoAction?: string; redoAction?: string; + saveShortcut: string; + undoShortcut: string; + redoShortcut: string; onSaveAnnotation(): void; onUndoClick(): void; onRedoClick(): void; @@ -38,6 +37,9 @@ function LeftGroup(props: Props): JSX.Element { savingStatuses, undoAction, redoAction, + saveShortcut, + undoShortcut, + redoShortcut, onSaveAnnotation, onUndoClick, onRedoClick, @@ -52,6 +54,7 @@ function LeftGroup(props: Props): JSX.Element {