From bed93e2a6e1e45f303cac7357fe714729d4013ad Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 27 Mar 2020 11:41:36 +0300 Subject: [PATCH] Optimized patch --- .../attribute-annotation-sidebar.tsx | 8 +- .../attribute-switcher.tsx | 11 +- .../object-switcher.tsx | 11 +- .../controls-side-bar/controls-side-bar.tsx | 15 +- .../objects-side-bar/object-item.tsx | 34 +- .../controls-side-bar/controls-side-bar.tsx | 3 + .../controls-side-bar/draw-shape-popover.tsx | 12 +- .../controls-side-bar/setup-tag-popover.tsx | 12 +- .../objects-side-bar/object-item.tsx | 11 +- .../objects-side-bar/objects-list.tsx | 9 +- .../annotation-page/top-bar/top-bar.tsx | 23 +- cvat-ui/src/containers/header/header.tsx | 5 +- cvat-ui/src/reducers/interfaces.ts | 1 + cvat-ui/src/reducers/shortcuts-reducer.ts | 603 +++++++++--------- cvat-ui/src/utils/shortcuts.ts | 17 - 15 files changed, 389 insertions(+), 386 deletions(-) delete mode 100644 cvat-ui/src/utils/shortcuts.ts 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 9396ad5d..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 @@ -33,6 +33,7 @@ interface StateToProps { labels: any[]; jobInstance: any; keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -59,6 +60,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, shortcuts: { keyMap, + normalizedKeyMap, }, } = state; @@ -69,6 +71,7 @@ function mapStateToProps(state: CombinedState): StateToProps { activatedAttributeID, states, keyMap, + normalizedKeyMap, }; } @@ -93,6 +96,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. updateAnnotations, activateObject, keyMap, + normalizedKeyMap, } = props; const [labelAttrMap, setLabelAttrMap] = useState( @@ -226,7 +230,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. occluded={activeObjectState.occluded} objectsCount={states.length} currentIndex={states.indexOf(activeObjectState)} - keyMap={keyMap} + normalizedKeyMap={normalizedKeyMap} nextObject={nextObject} /> ; + normalizedKeyMap: Record; nextAttribute(step: number): void; } @@ -25,13 +22,13 @@ function AttributeSwitcher(props: Props): JSX.Element { currentIndex, attributesCount, nextAttribute, - keyMap, + normalizedKeyMap, } = props; const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`; return (
- + @@ -40,7 +37,7 @@ function AttributeSwitcher(props: Props): JSX.Element { {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 a796a933..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 @@ -3,21 +3,18 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { ExtendedKeyMapOptions } from 'react-hotkeys'; import Icon from 'antd/lib/icon'; import Text from 'antd/lib/typography/Text'; import Tooltip from 'antd/lib/tooltip'; import Button from 'antd/lib/button'; -import { formatShortcuts } from 'utils/shortcuts'; - interface Props { currentLabel: string; clientID: number; occluded: boolean; objectsCount: number; currentIndex: number; - keyMap: Record; + normalizedKeyMap: Record; nextObject(step: number): void; } @@ -28,14 +25,14 @@ function ObjectSwitcher(props: Props): JSX.Element { objectsCount, currentIndex, nextObject, - keyMap, + normalizedKeyMap, } = props; const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`; return (
- + @@ -45,7 +42,7 @@ function ObjectSwitcher(props: Props): JSX.Element { {` ${clientID} `} {`[${currentIndex + 1}/${objectsCount}]`} - + 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 3d7e9abf..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 @@ -8,7 +8,6 @@ import Layout from 'antd/lib/layout'; import { ActiveControl, Rotation } from 'reducers/interfaces'; import { Canvas } from 'cvat-canvas'; -import { formatShortcuts } from 'utils/shortcuts'; import RotateControl from './rotate-control'; import CursorControl from './cursor-control'; @@ -28,6 +27,7 @@ interface Props { canvasInstance: Canvas; activeControl: ActiveControl; keyMap: Record; + normalizedKeyMap: Record; mergeObjects(enabled: boolean): void; groupObjects(enabled: boolean): void; @@ -50,6 +50,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { repeatDrawShape, pasteShape, resetGroup, + normalizedKeyMap, keyMap, } = props; @@ -142,14 +143,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { > @@ -185,14 +186,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
; + normalizedKeyMap: Record; activated: boolean; objectType: ObjectType; shapeType: ShapeType; @@ -742,7 +740,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean { && nextProps.collapsed === prevProps.collapsed && nextProps.labels === prevProps.labels && nextProps.attributes === prevProps.attributes - && nextProps.keyMap === prevProps.keyMap + && nextProps.normalizedKeyMap === prevProps.normalizedKeyMap && nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe && nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe && nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe @@ -771,7 +769,7 @@ function ObjectItemComponent(props: Props): JSX.Element { attributes, labels, collapsed, - keyMap, + normalizedKeyMap, navigateFirstKeyframe, navigatePrevKeyframe, navigateNextKeyframe, @@ -839,12 +837,12 @@ function ObjectItemComponent(props: Props): JSX.Element { objectType={objectType} type={type} locked={locked} - copyShortcut={formatShortcuts(keyMap.COPY_SHAPE)} - pasteShortcut={formatShortcuts(keyMap.PASTE_SHAPE)} - propagateShortcut={formatShortcuts(keyMap.PROPAGATE_OBJECT)} - toBackgroundShortcut={formatShortcuts(keyMap.TO_BACKGROUND)} - toForegroundShortcut={formatShortcuts(keyMap.TO_FOREGROUND)} - removeShortcut={formatShortcuts(keyMap.DELETE_OBJECT)} + 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} @@ -862,13 +860,13 @@ function ObjectItemComponent(props: Props): JSX.Element { pinned={pinned} hidden={hidden} keyframe={keyframe} - switchOccludedShortcut={formatShortcuts(keyMap.SWITCH_OCCLUDED)} - switchOutsideShortcut={formatShortcuts(keyMap.SWITCH_OUTSIDE)} - switchLockShortcut={formatShortcuts(keyMap.SWITCH_LOCK)} - switchHiddenShortcut={formatShortcuts(keyMap.SWITCH_HIDDEN)} - switchKeyFrameShortcut={formatShortcuts(keyMap.SWITCH_KEYFRAME)} - nextKeyFrameShortcut={formatShortcuts(keyMap.NEXT_KEY_FRAME)} - prevKeyFrameShortcut={formatShortcuts(keyMap.PREV_KEY_FRAME)} + 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/containers/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx index 8b42df3b..324d0742 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx @@ -23,6 +23,7 @@ interface StateToProps { rotateAll: boolean; activeControl: ActiveControl; keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -50,6 +51,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, shortcuts: { keyMap, + normalizedKeyMap, }, } = state; @@ -57,6 +59,7 @@ function mapStateToProps(state: CombinedState): StateToProps { rotateAll, canvasInstance, activeControl, + normalizedKeyMap, keyMap, }; } diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 731d84be..27e83ecf 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -3,7 +3,6 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import { RadioChangeEvent } from 'antd/lib/radio'; @@ -11,7 +10,6 @@ import { CombinedState, ShapeType, ObjectType } from 'reducers/interfaces'; import { rememberObject } from 'actions/annotation-actions'; import { Canvas, RectDrawingMethod } from 'cvat-canvas'; import DrawShapePopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover'; -import { formatShortcuts } from 'utils/shortcuts'; interface OwnProps { shapeType: ShapeType; @@ -28,7 +26,7 @@ interface DispatchToProps { } interface StateToProps { - keyMap: Record; + normalizedKeyMap: Record; canvasInstance: Canvas; shapeType: ShapeType; labels: any[]; @@ -59,7 +57,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { }, }, shortcuts: { - keyMap, + normalizedKeyMap, }, } = state; @@ -67,7 +65,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { ...own, canvasInstance, labels, - keyMap, + normalizedKeyMap, }; } @@ -164,7 +162,7 @@ class DrawShapePopoverContainer extends React.PureComponent { } = this.state; const { - keyMap, + normalizedKeyMap, labels, shapeType, } = this.props; @@ -177,7 +175,7 @@ class DrawShapePopoverContainer extends React.PureComponent { selectedLabeID={selectedLabelID} numberOfPoints={numberOfPoints} rectDrawingMethod={rectDrawingMethod} - repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)} + repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE} onChangeLabel={this.onChangeLabel} onChangePoints={this.onChangePoints} onChangeRectDrawingMethod={this.onChangeRectDrawingMethod} diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index 99edf31e..3a0d1a7f 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx @@ -3,7 +3,6 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import { CombinedState, ObjectType } from 'reducers/interfaces'; @@ -11,7 +10,6 @@ import { createAnnotationsAsync, rememberObject } from 'actions/annotation-actio import SetupTagPopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover'; import { Canvas } from 'cvat-canvas'; -import { formatShortcuts } from 'utils/shortcuts'; import getCore from 'cvat-core'; const cvat = getCore(); @@ -21,7 +19,7 @@ interface DispatchToProps { } interface StateToProps { - keyMap: Record; + normalizedKeyMap: Record; canvasInstance: Canvas; jobInstance: any; labels: any[]; @@ -56,7 +54,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, }, shortcuts: { - keyMap, + normalizedKeyMap, }, } = state; @@ -65,7 +63,7 @@ function mapStateToProps(state: CombinedState): StateToProps { jobInstance, labels, frame, - keyMap, + normalizedKeyMap, }; } @@ -118,13 +116,13 @@ class DrawShapePopoverContainer extends React.PureComponent { public render(): JSX.Element { const { selectedLabelID } = this.state; - const { keyMap, labels } = this.props; + const { normalizedKeyMap, labels } = this.props; return ( diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index 20d941b0..b80fcbbc 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -5,7 +5,6 @@ import React from 'react'; import copy from 'copy-to-clipboard'; import { connect } from 'react-redux'; -import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { LogType } from 'cvat-logger'; import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces'; @@ -44,7 +43,7 @@ interface StateToProps { activeControl: ActiveControl; minZLayer: number; maxZLayer: number; - keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -94,7 +93,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { }, }, shortcuts: { - keyMap, + normalizedKeyMap, }, } = state; @@ -119,7 +118,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { activated: activatedStateID === own.clientID, minZLayer, maxZLayer, - keyMap, + normalizedKeyMap, }; } @@ -442,7 +441,7 @@ class ObjectItemContainer extends React.PureComponent { activated, colorBy, colors, - keyMap, + normalizedKeyMap, } = this.props; const { @@ -484,7 +483,7 @@ class ObjectItemContainer extends React.PureComponent { color={stateColor} colors={colors} attributes={attributes} - keyMap={keyMap} + normalizedKeyMap={normalizedKeyMap} labels={labels} collapsed={collapsed} navigateFirstKeyframe={ diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index eb2fdae5..49e61a27 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -6,7 +6,6 @@ import React from 'react'; import { connect } from 'react-redux'; import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; -import { formatShortcuts } from 'utils/shortcuts'; import ObjectsListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-list'; import { updateAnnotationsAsync, @@ -32,6 +31,7 @@ interface StateToProps { maxZLayer: number; annotationsFiltersHistory: string[]; keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -69,6 +69,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, shortcuts: { keyMap, + normalizedKeyMap, }, } = state; @@ -102,6 +103,7 @@ function mapStateToProps(state: CombinedState): StateToProps { maxZLayer, annotationsFiltersHistory, keyMap, + normalizedKeyMap, }; } @@ -251,6 +253,7 @@ class ObjectsListContainer extends React.PureComponent { maxZLayer, minZLayer, keyMap, + normalizedKeyMap, } = this.props; const { sortedStatesID, @@ -410,8 +413,8 @@ class ObjectsListContainer extends React.PureComponent { {...this.props} statesOrdering={statesOrdering} sortedStatesID={sortedStatesID} - switchHiddenAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_HIDDEN)} - switchLockAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_LOCK)} + switchHiddenAllShortcut={normalizedKeyMap.SWITCH_ALL_HIDDEN} + switchLockAllShortcut={normalizedKeyMap.SWITCH_ALL_LOCK} changeStatesOrdering={this.onChangeStatesOrdering} lockAllStates={this.onLockAllStates} unlockAllStates={this.onUnlockAllStates} diff --git a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx index 480b90c7..21226ce9 100644 --- a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx +++ b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx @@ -26,7 +26,6 @@ import { import AnnotationTopBarComponent from 'components/annotation-page/top-bar/top-bar'; import { CombinedState, FrameSpeed, Workspace } from 'reducers/interfaces'; -import { formatShortcuts } from 'utils/shortcuts'; interface StateToProps { jobInstance: any; @@ -45,6 +44,7 @@ interface StateToProps { autoSaveInterval: number; workspace: Workspace; keyMap: Record; + normalizedKeyMap: Record; } interface DispatchToProps { @@ -96,6 +96,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, shortcuts: { keyMap, + normalizedKeyMap, }, } = state; @@ -116,6 +117,7 @@ function mapStateToProps(state: CombinedState): StateToProps { autoSaveInterval, workspace, keyMap, + normalizedKeyMap, }; } @@ -469,6 +471,7 @@ class AnnotationTopBarContainer extends React.PureComponent { searchAnnotations, changeWorkspace, keyMap, + normalizedKeyMap, } = this.props; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -584,15 +587,15 @@ class AnnotationTopBarContainer extends React.PureComponent { inputFrameRef={this.inputFrameRef} undoAction={undoAction} redoAction={redoAction} - saveShortcut={formatShortcuts(keyMap.SAVE_JOB)} - undoShortcut={formatShortcuts(keyMap.UNDO)} - redoShortcut={formatShortcuts(keyMap.REDO)} - playPauseShortcut={formatShortcuts(keyMap.PLAY_PAUSE)} - nextFrameShortcut={formatShortcuts(keyMap.NEXT_FRAME)} - previousFrameShortcut={formatShortcuts(keyMap.PREV_FRAME)} - forwardShortcut={formatShortcuts(keyMap.FORWARD_FRAME)} - backwardShortcut={formatShortcuts(keyMap.BACKWARD_FRAME)} - focusFrameInputShortcut={formatShortcuts(keyMap.FOCUS_INPUT_FRAME)} + saveShortcut={normalizedKeyMap.SAVE_JOB} + undoShortcut={normalizedKeyMap.UNDO} + redoShortcut={normalizedKeyMap.REDO} + playPauseShortcut={normalizedKeyMap.PLAY_PAUSE} + nextFrameShortcut={normalizedKeyMap.NEXT_FRAME} + previousFrameShortcut={normalizedKeyMap.PREV_FRAME} + forwardShortcut={normalizedKeyMap.FORWARD_FRAME} + backwardShortcut={normalizedKeyMap.BACKWARD_FRAME} + focusFrameInputShortcut={normalizedKeyMap.FOCUS_INPUT_FRAME} onUndoClick={this.undo} onRedoClick={this.redo} /> diff --git a/cvat-ui/src/containers/header/header.tsx b/cvat-ui/src/containers/header/header.tsx index e42fa30a..a2954553 100644 --- a/cvat-ui/src/containers/header/header.tsx +++ b/cvat-ui/src/containers/header/header.tsx @@ -8,7 +8,6 @@ import getCore from 'cvat-core'; import HeaderComponent from 'components/header/header'; import { SupportedPlugins, CombinedState } from 'reducers/interfaces'; import { logoutAsync } from 'actions/auth-actions'; -import { formatShortcuts } from 'utils/shortcuts'; const core = getCore(); @@ -49,7 +48,7 @@ function mapStateToProps(state: CombinedState): StateToProps { packageVersion, }, shortcuts: { - keyMap, + normalizedKeyMap, }, } = state; @@ -67,7 +66,7 @@ function mapStateToProps(state: CombinedState): StateToProps { coreVersion: packageVersion.core, canvasVersion: packageVersion.canvas, uiVersion: packageVersion.ui, - switchSettingsShortcut: formatShortcuts(keyMap.OPEN_SETTINGS), + switchSettingsShortcut: normalizedKeyMap.OPEN_SETTINGS, }; } diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 2e5bdbf0..c99be219 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -445,6 +445,7 @@ export interface SettingsState { export interface ShortcutsState { visibleShortcutsHelp: boolean; keyMap: Record; + normalizedKeyMap: Record; } export interface CombinedState { diff --git a/cvat-ui/src/reducers/shortcuts-reducer.ts b/cvat-ui/src/reducers/shortcuts-reducer.ts index 24175934..83de3e71 100644 --- a/cvat-ui/src/reducers/shortcuts-reducer.ts +++ b/cvat-ui/src/reducers/shortcuts-reducer.ts @@ -9,304 +9,323 @@ import { AuthActions, AuthActionTypes } from 'actions/auth-actions'; import { ShortcutsActions, ShortcutsActionsTypes } from 'actions/shortcuts-actions'; import { ShortcutsState } from './interfaces'; +function formatShortcuts(shortcuts: ExtendedKeyMapOptions): string { + const list: string[] = shortcuts.sequences as string[]; + return `[${list.map((shortcut: string): string => { + let keys = shortcut.split('+'); + keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`); + keys = keys.join('+').split(/\s/g); + keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`); + return keys.join(' '); + }).join(', ')}]`; +} -const defaultState: ShortcutsState = { - visibleShortcutsHelp: false, - keyMap: { - SWITCH_SHORTCUTS: { - name: 'Show shortcuts', - description: 'Open/hide the list of available shortcuts', - sequences: ['f1'], - action: 'keydown', - }, - OPEN_SETTINGS: { - name: 'Open settings', - description: 'Go to the settings page or go back', - sequences: ['f2'], - action: 'keydown', - }, +const defaultKeyMap = { + SWITCH_SHORTCUTS: { + name: 'Show shortcuts', + description: 'Open/hide the list of available shortcuts', + sequences: ['f1'], + action: 'keydown', + }, + OPEN_SETTINGS: { + name: 'Open settings', + description: 'Go to the settings page or go back', + sequences: ['f2'], + action: 'keydown', + }, + + SWITCH_ALL_LOCK: { + name: 'Lock/unlock all objects', + description: 'Change locked state for all objects in the side bar', + sequences: ['t+l'], + action: 'keydown', + }, + SWITCH_LOCK: { + name: 'Lock/unlock an object', + description: 'Change locked state for an active object', + sequences: ['l'], + action: 'keydown', + }, + SWITCH_ALL_HIDDEN: { + name: 'Hide/show all objects', + description: 'Change hidden state for objects in the side bar', + sequences: ['t+h'], + action: 'keydown', + }, + SWITCH_HIDDEN: { + name: 'Hide/show an object', + description: 'Change hidden state for an active object', + sequences: ['h'], + action: 'keydown', + }, + SWITCH_OCCLUDED: { + name: 'Switch occluded', + description: 'Change occluded property for an active object', + sequences: ['q', '/'], + action: 'keydown', + }, + SWITCH_KEYFRAME: { + name: 'Switch keyframe', + description: 'Change keyframe property for an active track', + sequences: ['k'], + action: 'keydown', + }, + SWITCH_OUTSIDE: { + name: 'Switch outside', + description: 'Change outside property for an active track', + sequences: ['o'], + action: 'keydown', + }, + DELETE_OBJECT: { + name: 'Delete object', + description: 'Delete an active object. Use shift to force delete of locked objects', + sequences: ['del', 'shift+del'], + action: 'keydown', + }, + TO_BACKGROUND: { + name: 'To background', + description: 'Put an active object "farther" from the user (decrease z axis value)', + sequences: ['-', '_'], + action: 'keydown', + }, + TO_FOREGROUND: { + name: 'To foreground', + description: 'Put an active object "closer" to the user (increase z axis value)', + sequences: ['+', '='], + action: 'keydown', + }, + COPY_SHAPE: { + name: 'Copy shape', + description: 'Copy shape to CVAT internal clipboard', + sequences: ['ctrl+c'], + action: 'keydown', + }, + PROPAGATE_OBJECT: { + name: 'Propagate object', + description: 'Make a copy of the object on the following frames', + sequences: ['ctrl+b'], + action: 'keydown', + }, + NEXT_KEY_FRAME: { + name: 'Next keyframe', + description: 'Go to the next keyframe of an active track', + sequences: ['r'], + action: 'keydown', + }, + PREV_KEY_FRAME: { + name: 'Previous keyframe', + description: 'Go to the previous keyframe of an active track', + sequences: ['e'], + action: 'keydown', + }, - SWITCH_ALL_LOCK: { - name: 'Lock/unlock all objects', - description: 'Change locked state for all objects in the side bar', - sequences: ['t+l'], - action: 'keydown', - }, - SWITCH_LOCK: { - name: 'Lock/unlock an object', - description: 'Change locked state for an active object', - sequences: ['l'], - action: 'keydown', - }, - SWITCH_ALL_HIDDEN: { - name: 'Hide/show all objects', - description: 'Change hidden state for objects in the side bar', - sequences: ['t+h'], - action: 'keydown', - }, - SWITCH_HIDDEN: { - name: 'Hide/show an object', - description: 'Change hidden state for an active object', - sequences: ['h'], - action: 'keydown', - }, - SWITCH_OCCLUDED: { - name: 'Switch occluded', - description: 'Change occluded property for an active object', - sequences: ['q', '/'], - action: 'keydown', - }, - SWITCH_KEYFRAME: { - name: 'Switch keyframe', - description: 'Change keyframe property for an active track', - sequences: ['k'], - action: 'keydown', - }, - SWITCH_OUTSIDE: { - name: 'Switch outside', - description: 'Change outside property for an active track', - sequences: ['o'], - action: 'keydown', - }, - DELETE_OBJECT: { - name: 'Delete object', - description: 'Delete an active object. Use shift to force delete of locked objects', - sequences: ['del', 'shift+del'], - action: 'keydown', - }, - TO_BACKGROUND: { - name: 'To background', - description: 'Put an active object "farther" from the user (decrease z axis value)', - sequences: ['-', '_'], - action: 'keydown', - }, - TO_FOREGROUND: { - name: 'To foreground', - description: 'Put an active object "closer" to the user (increase z axis value)', - sequences: ['+', '='], - action: 'keydown', - }, - COPY_SHAPE: { - name: 'Copy shape', - description: 'Copy shape to CVAT internal clipboard', - sequences: ['ctrl+c'], - action: 'keydown', - }, - PROPAGATE_OBJECT: { - name: 'Propagate object', - description: 'Make a copy of the object on the following frames', - sequences: ['ctrl+b'], - action: 'keydown', - }, - NEXT_KEY_FRAME: { - name: 'Next keyframe', - description: 'Go to the next keyframe of an active track', - sequences: ['r'], - action: 'keydown', - }, - PREV_KEY_FRAME: { - name: 'Previous keyframe', - description: 'Go to the previous keyframe of an active track', - sequences: ['e'], - action: 'keydown', - }, + NEXT_ATTRIBUTE: { + name: 'Next attribute', + description: 'Go to the next attribute', + sequences: ['ArrowDown'], + action: 'keydown', + }, + PREVIOUS_ATTRIBUTE: { + name: 'Previous attribute', + description: 'Go to the previous attribute', + sequences: ['ArrowUp'], + action: 'keydown', + }, + NEXT_OBJECT: { + name: 'Next object', + description: 'Go to the next object', + sequences: ['Tab'], + action: 'keydown', + }, + PREVIOUS_OBJECT: { + name: 'Previous object', + description: 'Go to the previous object', + sequences: ['Shift+Tab'], + action: 'keydown', + }, - NEXT_ATTRIBUTE: { - name: 'Next attribute', - description: 'Go to the next attribute', - sequences: ['ArrowDown'], - action: 'keydown', - }, - PREVIOUS_ATTRIBUTE: { - name: 'Previous attribute', - description: 'Go to the previous attribute', - sequences: ['ArrowUp'], - action: 'keydown', - }, - NEXT_OBJECT: { - name: 'Next object', - description: 'Go to the next object', - sequences: ['Tab'], - action: 'keydown', - }, - PREVIOUS_OBJECT: { - name: 'Previous object', - description: 'Go to the previous object', - sequences: ['Shift+Tab'], - action: 'keydown', - }, + INCREASE_BRIGHTNESS: { + name: 'Brightness+', + description: 'Increase brightness level for the image', + sequences: ['shift+b+='], + action: 'keypress', + }, + DECREASE_BRIGHTNESS: { + name: 'Brightness-', + description: 'Decrease brightness level for the image', + sequences: ['shift+b+-'], + action: 'keydown', + }, + INCREASE_CONTRAST: { + name: 'Contrast+', + description: 'Increase contrast level for the image', + sequences: ['shift+c+='], + action: 'keydown', + }, + DECREASE_CONTRAST: { + name: 'Contrast-', + description: 'Decrease contrast level for the image', + sequences: ['shift+c+-'], + action: 'keydown', + }, + INCREASE_SATURATION: { + name: 'Saturation+', + description: 'Increase saturation level for the image', + sequences: ['shift+s+='], + action: 'keydown', + }, + DECREASE_SATURATION: { + name: 'Saturation-', + description: 'Increase contrast level for the image', + sequences: ['shift+s+-'], + action: 'keydown', + }, + INCREASE_GRID_OPACITY: { + name: 'Grid opacity+', + description: 'Make the grid more visible', + sequences: ['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', + sequences: ['shift+g+enter'], + action: 'keydown', + }, - INCREASE_BRIGHTNESS: { - name: 'Brightness+', - description: 'Increase brightness level for the image', - sequences: ['shift+b+='], - action: 'keypress', - }, - DECREASE_BRIGHTNESS: { - name: 'Brightness-', - description: 'Decrease brightness level for the image', - sequences: ['shift+b+-'], - action: 'keydown', - }, - INCREASE_CONTRAST: { - name: 'Contrast+', - description: 'Increase contrast level for the image', - sequences: ['shift+c+='], - action: 'keydown', - }, - DECREASE_CONTRAST: { - name: 'Contrast-', - description: 'Decrease contrast level for the image', - sequences: ['shift+c+-'], - action: 'keydown', - }, - INCREASE_SATURATION: { - name: 'Saturation+', - description: 'Increase saturation level for the image', - sequences: ['shift+s+='], - action: 'keydown', - }, - DECREASE_SATURATION: { - name: 'Saturation-', - description: 'Increase contrast level for the image', - sequences: ['shift+s+-'], - action: 'keydown', - }, - INCREASE_GRID_OPACITY: { - name: 'Grid opacity+', - description: 'Make the grid more visible', - sequences: ['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', - sequences: ['shift+g+enter'], - action: 'keydown', - }, + PASTE_SHAPE: { + name: 'Paste shape', + description: 'Paste a shape from internal CVAT clipboard', + sequences: ['ctrl+v'], + action: 'keydown', + }, + SWITCH_DRAW_MODE: { + name: 'Draw mode', + description: 'Repeat the latest procedure of drawing with the same parameters', + sequences: ['n'], + action: 'keydown', + }, + SWITCH_MERGE_MODE: { + name: 'Merge mode', + description: 'Activate or deactivate mode to merging shapes', + sequences: ['m'], + action: 'keydown', + }, + SWITCH_GROUP_MODE: { + name: 'Group mode', + description: 'Activate or deactivate mode to grouping shapes', + sequences: ['g'], + action: 'keydown', + }, + RESET_GROUP: { + name: 'Reset group', + description: 'Reset group for selected shapes (in group mode)', + sequences: ['shift+g'], + action: 'keyup', + }, + CANCEL: { + name: 'Cancel', + description: 'Cancel any active canvas mode', + sequences: ['esc'], + action: 'keydown', + }, + CLOCKWISE_ROTATION: { + name: 'Rotate clockwise', + description: 'Change image angle (add 90 degrees)', + sequences: ['ctrl+r'], + action: 'keydown', + }, + ANTICLOCKWISE_ROTATION: { + name: 'Rotate anticlockwise', + description: 'Change image angle (substract 90 degrees)', + sequences: ['ctrl+shift+r'], + action: 'keydown', + }, - PASTE_SHAPE: { - name: 'Paste shape', - description: 'Paste a shape from internal CVAT clipboard', - sequences: ['ctrl+v'], - action: 'keydown', - }, - SWITCH_DRAW_MODE: { - name: 'Draw mode', - description: 'Repeat the latest procedure of drawing with the same parameters', - sequences: ['n'], - action: 'keydown', - }, - SWITCH_MERGE_MODE: { - name: 'Merge mode', - description: 'Activate or deactivate mode to merging shapes', - sequences: ['m'], - action: 'keydown', - }, - SWITCH_GROUP_MODE: { - name: 'Group mode', - description: 'Activate or deactivate mode to grouping shapes', - sequences: ['g'], - action: 'keydown', - }, - RESET_GROUP: { - name: 'Reset group', - description: 'Reset group for selected shapes (in group mode)', - sequences: ['shift+g'], - action: 'keyup', - }, - CANCEL: { - name: 'Cancel', - description: 'Cancel any active canvas mode', - sequences: ['esc'], - action: 'keydown', - }, - CLOCKWISE_ROTATION: { - name: 'Rotate clockwise', - description: 'Change image angle (add 90 degrees)', - sequences: ['ctrl+r'], - action: 'keydown', - }, - ANTICLOCKWISE_ROTATION: { - name: 'Rotate anticlockwise', - description: 'Change image angle (substract 90 degrees)', - sequences: ['ctrl+shift+r'], - action: 'keydown', - }, + SAVE_JOB: { + name: 'Save the job', + description: 'Send all changes of annotations to the server', + sequences: ['ctrl+s'], + action: 'keydown', + }, + UNDO: { + name: 'Undo action', + description: 'Cancel the latest action related with objects', + sequences: ['ctrl+z'], + action: 'keydown', + }, + REDO: { + name: 'Redo action', + description: 'Cancel undo action', + sequences: ['ctrl+shift+z', 'ctrl+y'], + action: 'keydown', + }, + NEXT_FRAME: { + name: 'Next frame', + description: 'Go to the next frame', + sequences: ['f'], + action: 'keydown', + }, + PREV_FRAME: { + name: 'Previous frame', + description: 'Go to the previous frame', + sequences: ['d'], + action: 'keydown', + }, + FORWARD_FRAME: { + name: 'Forward frame', + description: 'Go forward with a step', + sequences: ['v'], + action: 'keydown', + }, + BACKWARD_FRAME: { + name: 'Backward frame', + description: 'Go backward with a step', + sequences: ['c'], + action: 'keydown', + }, + SEARCH_FORWARD: { + name: 'Search forward', + description: 'Search the next frame that satisfies to the filters', + sequences: ['right'], + action: 'keydown', + }, + SEARCH_BACKWARD: { + name: 'Search backward', + description: 'Search the previous frame that satisfies to the filters', + sequences: ['left'], + action: 'keydown', + }, + PLAY_PAUSE: { + name: 'Play/pause', + description: 'Start/stop automatic changing frames', + sequences: ['space'], + action: 'keydown', + }, + FOCUS_INPUT_FRAME: { + name: 'Focus input frame', + description: 'Focus on the element to change the current frame', + sequences: ['`', '~'], + action: 'keydown', + }, +} as any as Record; - SAVE_JOB: { - name: 'Save the job', - description: 'Send all changes of annotations to the server', - sequences: ['ctrl+s'], - action: 'keydown', - }, - UNDO: { - name: 'Undo action', - description: 'Cancel the latest action related with objects', - sequences: ['ctrl+z'], - action: 'keydown', - }, - REDO: { - name: 'Redo action', - description: 'Cancel undo action', - sequences: ['ctrl+shift+z', 'ctrl+y'], - action: 'keydown', - }, - NEXT_FRAME: { - name: 'Next frame', - description: 'Go to the next frame', - sequences: ['f'], - action: 'keydown', - }, - PREV_FRAME: { - name: 'Previous frame', - description: 'Go to the previous frame', - sequences: ['d'], - action: 'keydown', - }, - FORWARD_FRAME: { - name: 'Forward frame', - description: 'Go forward with a step', - sequences: ['v'], - action: 'keydown', - }, - BACKWARD_FRAME: { - name: 'Backward frame', - description: 'Go backward with a step', - sequences: ['c'], - action: 'keydown', - }, - SEARCH_FORWARD: { - name: 'Search forward', - description: 'Search the next frame that satisfies to the filters', - sequences: ['right'], - action: 'keydown', - }, - SEARCH_BACKWARD: { - name: 'Search backward', - description: 'Search the previous frame that satisfies to the filters', - sequences: ['left'], - action: 'keydown', - }, - PLAY_PAUSE: { - name: 'Play/pause', - description: 'Start/stop automatic changing frames', - sequences: ['space'], - action: 'keydown', - }, - FOCUS_INPUT_FRAME: { - name: 'Focus input frame', - description: 'Focus on the element to change the current frame', - sequences: ['`', '~'], - action: 'keydown', - }, - } as any as Record, + +const defaultState: ShortcutsState = { + visibleShortcutsHelp: false, + keyMap: defaultKeyMap, + normalizedKeyMap: Object.keys(defaultKeyMap) + .reduce((acc: Record, key: string) => { + const normalized = formatShortcuts(defaultKeyMap[key]); + acc[key] = normalized; + return acc; + }, {}), }; export default ( diff --git a/cvat-ui/src/utils/shortcuts.ts b/cvat-ui/src/utils/shortcuts.ts deleted file mode 100644 index f36d7ca1..00000000 --- a/cvat-ui/src/utils/shortcuts.ts +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (C) 2020 Intel Corporation -// -// SPDX-License-Identifier: MIT - -import { ExtendedKeyMapOptions } from 'react-hotkeys'; - -/* eslint-disable-next-line import/prefer-default-export */ -export function formatShortcuts(shortcuts: ExtendedKeyMapOptions): string { - const list: string[] = shortcuts.sequences as string[]; - return `[${list.map((shortcut: string): string => { - let keys = shortcut.split('+'); - keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`); - keys = keys.join('+').split(/\s/g); - keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`); - return keys.join(' '); - }).join(', ')}]`; -}