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 8a1b2781..6057a199 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,7 +32,7 @@ interface StateToProps { states: any[]; labels: any[]; jobInstance: any; - keyMap: KeyMap; + keyMap: Record; } interface DispatchToProps { 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 ee2af8d8..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,7 +59,7 @@ interface Props { contextType: ContextMenuType; aamZoomMargin: number; workspace: Workspace; - keyMap: KeyMap; + keyMap: Record; onSetupCanvas: () => void; onDragCanvas: (enabled: boolean) => void; onZoomCanvas: (enabled: boolean) => void; 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 18a1b3b2..daa44cb5 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,7 +3,7 @@ // SPDX-License-Identifier: MIT import React from 'react'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import { Layout, @@ -35,7 +35,7 @@ import SplitControl from './split-control'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; - keyMap: KeyMap; + keyMap: Record; mergeObjects(enabled: boolean): void; groupObjects(enabled: boolean): void; 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..e88ede20 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,7 @@ // SPDX-License-Identifier: MIT import React from 'react'; - +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { Row, Col } from 'antd/lib/grid'; import Icon from 'antd/lib/icon'; import Select from 'antd/lib/select'; @@ -18,6 +18,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'; @@ -33,11 +34,18 @@ import { import { ObjectType, ShapeType } from 'reducers/interfaces'; import { clamp } from 'utils/math'; +import { formatShortcuts } from 'utils/shortcuts'; 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), @@ -53,51 +61,61 @@ function ItemMenu( - + + + - + + + { objectType !== ObjectType.TAG && ( <> - + + + - + + + )} - + + + ); @@ -111,6 +129,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 +153,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element { objectType, type, locked, + copyShortcut, + pasteShortcut, + propagateShortcut, + toBackgroundShortcut, + toForegroundShortcut, + removeShortcut, changeLabel, copy, remove, @@ -146,13 +176,15 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element { {type} - + + + void); navigatePrevKeyframe: null | (() => void); @@ -217,6 +262,13 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { pinned, hidden, keyframe, + switchOccludedShortcut, + switchOutsideShortcut, + switchLockShortcut, + switchHiddenShortcut, + switchKeyFrameShortcut, + nextKeyFrameShortcut, + prevKeyFrameShortcut, navigateFirstKeyframe, navigatePrevKeyframe, @@ -249,12 +301,26 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { navigatePrevKeyframe - ? + ? ( + + + + ) : } { navigateNextKeyframe - ? + ? ( + + + + ) : } @@ -265,29 +331,39 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { outside - ? - : } + + { outside + ? + : } + - { locked - ? - : } + + { locked + ? + : } + - { occluded - ? - : } + + { occluded + ? + : } + - { hidden - ? - : } + - { keyframe - ? - : } + + { keyframe + ? + : } + { shapeType !== ShapeType.POINTS && ( @@ -310,9 +386,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { locked - ? - : } + + { locked + ? + : } + @@ -325,19 +403,25 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { - { locked - ? - : } + + { locked + ? + : } + - { occluded - ? - : } + + { occluded + ? + : } + - { hidden - ? - : } + { shapeType !== ShapeType.POINTS && ( @@ -587,6 +671,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame); interface Props { + keyMap: Record; activated: boolean; objectType: ObjectType; shapeType: ShapeType; @@ -653,6 +738,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.navigateFirstKeyframe === prevProps.navigateFirstKeyframe && nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe && nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe @@ -681,6 +767,7 @@ function ObjectItemComponent(props: Props): JSX.Element { attributes, labels, collapsed, + keyMap, navigateFirstKeyframe, navigatePrevKeyframe, navigateNextKeyframe, @@ -748,6 +835,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)} changeLabel={changeLabel} copy={copy} remove={remove} @@ -765,6 +858,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)} navigateFirstKeyframe={navigateFirstKeyframe} navigatePrevKeyframe={navigatePrevKeyframe} navigateNextKeyframe={navigateNextKeyframe} diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 6c5d24cb..f5a76fdb 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -7,7 +7,7 @@ import '../styles.scss'; import React from 'react'; import { Switch, Route, Redirect } from 'react-router'; import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { GlobalHotKeys, KeyMap, configure } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions, configure } from 'react-hotkeys'; import Spin from 'antd/lib/spin'; import Layout from 'antd/lib/layout'; import notification from 'antd/lib/notification'; @@ -37,7 +37,7 @@ interface CVATAppProps { resetErrors: () => void; resetMessages: () => void; switchShortcutsDialog: () => void; - keyMap: KeyMap; + keyMap: Record; userInitialized: boolean; userFetching: boolean; pluginsInitialized: boolean; diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx index ffc20a27..e5b74d9b 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import { KeyMap } from 'react-hotkeys'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import CanvasWrapperComponent from 'components/annotation-page/standard-workspace/canvas-wrapper'; @@ -79,7 +79,7 @@ interface StateToProps { curZLayer: number; contextVisible: boolean; contextType: ContextMenuType; - keyMap: KeyMap; + keyMap: Record; } interface DispatchToProps { 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 16292cd9..8b42df3b 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 @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import { KeyMap } from 'react-hotkeys'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import { Canvas } from 'cvat-canvas'; @@ -22,7 +22,7 @@ interface StateToProps { canvasInstance: Canvas; rotateAll: boolean; activeControl: ActiveControl; - keyMap: KeyMap; + keyMap: Record; } interface DispatchToProps { 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 d51ec34e..20d941b0 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,6 +5,7 @@ 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'; @@ -43,6 +44,7 @@ interface StateToProps { activeControl: ActiveControl; minZLayer: number; maxZLayer: number; + keyMap: Record; } interface DispatchToProps { @@ -91,6 +93,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { colorBy, }, }, + shortcuts: { + keyMap, + }, } = state; const index = states @@ -114,6 +119,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { activated: activatedStateID === own.clientID, minZLayer, maxZLayer, + keyMap, }; } @@ -436,6 +442,7 @@ class ObjectItemContainer extends React.PureComponent { activated, colorBy, colors, + keyMap, } = this.props; const { @@ -477,6 +484,7 @@ class ObjectItemContainer extends React.PureComponent { color={stateColor} colors={colors} attributes={attributes} + keyMap={keyMap} 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 98b5a844..fd549e04 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 @@ -4,7 +4,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import ObjectsListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-list'; import { @@ -31,7 +31,7 @@ interface StateToProps { minZLayer: number; maxZLayer: number; annotationsFiltersHistory: string[]; - keyMap: KeyMap; + keyMap: Record; } interface DispatchToProps { 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 2e92f3ef..44b946fe 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 @@ -8,7 +8,7 @@ import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { RouteComponentProps } from 'react-router-dom'; -import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; +import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import InputNumber from 'antd/lib/input-number'; import { SliderValue } from 'antd/lib/slider'; @@ -45,7 +45,7 @@ interface StateToProps { autoSave: boolean; autoSaveInterval: number; workspace: Workspace; - keyMap: KeyMap; + keyMap: Record; } interface DispatchToProps { diff --git a/cvat-ui/src/index.tsx b/cvat-ui/src/index.tsx index 62fb56a3..e9445971 100644 --- a/cvat-ui/src/index.tsx +++ b/cvat-ui/src/index.tsx @@ -5,7 +5,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { connect, Provider } from 'react-redux'; -import { KeyMap } from 'react-hotkeys'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { BrowserRouter } from 'react-router-dom'; import CVATApplication from 'components/cvat-app'; @@ -49,7 +49,7 @@ interface StateToProps { installedTFAnnotation: boolean; notifications: NotificationsState; user: any; - keyMap: keyMap; + keyMap: Record; } interface DispatchToProps { diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 6a603ed9..2e5bdbf0 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import { KeyMap } from 'react-hotkeys'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { Canvas, RectDrawingMethod } from 'cvat-canvas'; export type StringObject = { @@ -444,7 +444,7 @@ export interface SettingsState { export interface ShortcutsState { visibleShortcutsHelp: boolean; - keyMap: KeyMap; + keyMap: Record; } export interface CombinedState { diff --git a/cvat-ui/src/reducers/shortcuts-reducer.ts b/cvat-ui/src/reducers/shortcuts-reducer.ts index 0db41d79..24175934 100644 --- a/cvat-ui/src/reducers/shortcuts-reducer.ts +++ b/cvat-ui/src/reducers/shortcuts-reducer.ts @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import { KeyMap } from 'react-hotkeys'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { boundariesActions, BoundariesActionTypes } from 'actions/boundaries-actions'; import { AuthActions, AuthActionTypes } from 'actions/auth-actions'; @@ -16,38 +16,38 @@ const defaultState: ShortcutsState = { SWITCH_SHORTCUTS: { name: 'Show shortcuts', description: 'Open/hide the list of available shortcuts', - sequence: 'f1', + sequences: ['f1'], action: 'keydown', }, OPEN_SETTINGS: { name: 'Open settings', description: 'Go to the settings page or go back', - sequence: 'f2', + sequences: ['f2'], action: 'keydown', }, SWITCH_ALL_LOCK: { name: 'Lock/unlock all objects', description: 'Change locked state for all objects in the side bar', - sequence: 't+l', + sequences: ['t+l'], action: 'keydown', }, SWITCH_LOCK: { name: 'Lock/unlock an object', description: 'Change locked state for an active object', - sequence: 'l', + sequences: ['l'], action: 'keydown', }, SWITCH_ALL_HIDDEN: { name: 'Hide/show all objects', description: 'Change hidden state for objects in the side bar', - sequence: 't+h', + sequences: ['t+h'], action: 'keydown', }, SWITCH_HIDDEN: { name: 'Hide/show an object', description: 'Change hidden state for an active object', - sequence: 'h', + sequences: ['h'], action: 'keydown', }, SWITCH_OCCLUDED: { @@ -59,13 +59,13 @@ const defaultState: ShortcutsState = { SWITCH_KEYFRAME: { name: 'Switch keyframe', description: 'Change keyframe property for an active track', - sequence: 'k', + sequences: ['k'], action: 'keydown', }, SWITCH_OUTSIDE: { name: 'Switch outside', description: 'Change outside property for an active track', - sequence: 'o', + sequences: ['o'], action: 'keydown', }, DELETE_OBJECT: { @@ -89,167 +89,167 @@ const defaultState: ShortcutsState = { COPY_SHAPE: { name: 'Copy shape', description: 'Copy shape to CVAT internal clipboard', - sequence: 'ctrl+c', + sequences: ['ctrl+c'], action: 'keydown', }, PROPAGATE_OBJECT: { name: 'Propagate object', description: 'Make a copy of the object on the following frames', - sequence: 'ctrl+b', + sequences: ['ctrl+b'], action: 'keydown', }, NEXT_KEY_FRAME: { name: 'Next keyframe', description: 'Go to the next keyframe of an active track', - sequence: 'r', + sequences: ['r'], action: 'keydown', }, PREV_KEY_FRAME: { name: 'Previous keyframe', description: 'Go to the previous keyframe of an active track', - sequence: 'e', + sequences: ['e'], action: 'keydown', }, NEXT_ATTRIBUTE: { name: 'Next attribute', description: 'Go to the next attribute', - sequence: 'ArrowDown', + sequences: ['ArrowDown'], action: 'keydown', }, PREVIOUS_ATTRIBUTE: { name: 'Previous attribute', description: 'Go to the previous attribute', - sequence: 'ArrowUp', + sequences: ['ArrowUp'], action: 'keydown', }, NEXT_OBJECT: { name: 'Next object', description: 'Go to the next object', - sequence: 'Tab', + sequences: ['Tab'], action: 'keydown', }, PREVIOUS_OBJECT: { name: 'Previous object', description: 'Go to the previous object', - sequence: 'Shift+Tab', + sequences: ['Shift+Tab'], action: 'keydown', }, INCREASE_BRIGHTNESS: { name: 'Brightness+', description: 'Increase brightness level for the image', - sequence: 'shift+b+=', + sequences: ['shift+b+='], action: 'keypress', }, DECREASE_BRIGHTNESS: { name: 'Brightness-', description: 'Decrease brightness level for the image', - sequence: 'shift+b+-', + sequences: ['shift+b+-'], action: 'keydown', }, INCREASE_CONTRAST: { name: 'Contrast+', description: 'Increase contrast level for the image', - sequence: 'shift+c+=', + sequences: ['shift+c+='], action: 'keydown', }, DECREASE_CONTRAST: { name: 'Contrast-', description: 'Decrease contrast level for the image', - sequence: 'shift+c+-', + sequences: ['shift+c+-'], action: 'keydown', }, INCREASE_SATURATION: { name: 'Saturation+', description: 'Increase saturation level for the image', - sequence: 'shift+s+=', + sequences: ['shift+s+='], action: 'keydown', }, DECREASE_SATURATION: { name: 'Saturation-', description: 'Increase contrast level for the image', - sequence: 'shift+s+-', + sequences: ['shift+s+-'], action: 'keydown', }, INCREASE_GRID_OPACITY: { name: 'Grid opacity+', description: 'Make the grid more visible', - sequence: 'shift+g+=', + sequences: ['shift+g+='], action: 'keydown', }, DECREASE_GRID_OPACITY: { name: 'Grid opacity-', description: 'Make the grid less visible', - sequences: 'shift+g+-', + sequences: ['shift+g+-'], action: 'keydown', }, CHANGE_GRID_COLOR: { name: 'Grid color', description: 'Set another color for the image grid', - sequence: 'shift+g+enter', + sequences: ['shift+g+enter'], action: 'keydown', }, PASTE_SHAPE: { name: 'Paste shape', description: 'Paste a shape from internal CVAT clipboard', - sequence: 'ctrl+v', + sequences: ['ctrl+v'], action: 'keydown', }, SWITCH_DRAW_MODE: { name: 'Draw mode', description: 'Repeat the latest procedure of drawing with the same parameters', - sequence: 'n', + sequences: ['n'], action: 'keydown', }, SWITCH_MERGE_MODE: { name: 'Merge mode', description: 'Activate or deactivate mode to merging shapes', - sequence: 'm', + sequences: ['m'], action: 'keydown', }, SWITCH_GROUP_MODE: { name: 'Group mode', description: 'Activate or deactivate mode to grouping shapes', - sequence: 'g', + sequences: ['g'], action: 'keydown', }, RESET_GROUP: { name: 'Reset group', description: 'Reset group for selected shapes (in group mode)', - sequence: 'shift+g', + sequences: ['shift+g'], action: 'keyup', }, CANCEL: { name: 'Cancel', description: 'Cancel any active canvas mode', - sequence: 'esc', + sequences: ['esc'], action: 'keydown', }, CLOCKWISE_ROTATION: { name: 'Rotate clockwise', description: 'Change image angle (add 90 degrees)', - sequence: 'ctrl+r', + sequences: ['ctrl+r'], action: 'keydown', }, ANTICLOCKWISE_ROTATION: { name: 'Rotate anticlockwise', description: 'Change image angle (substract 90 degrees)', - sequence: 'ctrl+shift+r', + sequences: ['ctrl+shift+r'], action: 'keydown', }, SAVE_JOB: { name: 'Save the job', description: 'Send all changes of annotations to the server', - sequence: 'ctrl+s', + sequences: ['ctrl+s'], action: 'keydown', }, UNDO: { name: 'Undo action', description: 'Cancel the latest action related with objects', - sequence: 'ctrl+z', + sequences: ['ctrl+z'], action: 'keydown', }, REDO: { @@ -261,43 +261,43 @@ const defaultState: ShortcutsState = { NEXT_FRAME: { name: 'Next frame', description: 'Go to the next frame', - sequence: 'f', + sequences: ['f'], action: 'keydown', }, PREV_FRAME: { name: 'Previous frame', description: 'Go to the previous frame', - sequence: 'd', + sequences: ['d'], action: 'keydown', }, FORWARD_FRAME: { name: 'Forward frame', description: 'Go forward with a step', - sequence: 'v', + sequences: ['v'], action: 'keydown', }, BACKWARD_FRAME: { name: 'Backward frame', description: 'Go backward with a step', - sequence: 'c', + sequences: ['c'], action: 'keydown', }, SEARCH_FORWARD: { name: 'Search forward', description: 'Search the next frame that satisfies to the filters', - sequence: 'right', + sequences: ['right'], action: 'keydown', }, SEARCH_BACKWARD: { name: 'Search backward', description: 'Search the previous frame that satisfies to the filters', - sequence: 'left', + sequences: ['left'], action: 'keydown', }, PLAY_PAUSE: { name: 'Play/pause', description: 'Start/stop automatic changing frames', - sequence: 'space', + sequences: ['space'], action: 'keydown', }, FOCUS_INPUT_FRAME: { @@ -306,7 +306,7 @@ const defaultState: ShortcutsState = { sequences: ['`', '~'], action: 'keydown', }, - } as any as KeyMap, + } as any as Record, }; export default (