From ece8a7e18ba112622a9afb1a3683d411f819b9f3 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 26 Mar 2020 21:35:07 +0300 Subject: [PATCH 01/11] Shortcuts keymaps moved to state --- .../attribute-annotation-sidebar.tsx | 38 +-- .../standard-workspace/canvas-wrapper.tsx | 69 +--- .../controls-side-bar/controls-side-bar.tsx | 62 +--- cvat-ui/src/components/cvat-app.tsx | 20 +- .../standard-workspace/canvas-wrapper.tsx | 6 + .../controls-side-bar/controls-side-bar.tsx | 13 +- .../objects-side-bar/object-item.tsx | 8 +- .../objects-side-bar/objects-list.tsx | 114 ++----- .../annotation-page/top-bar/top-bar.tsx | 87 ++--- cvat-ui/src/index.tsx | 4 + cvat-ui/src/reducers/interfaces.ts | 2 + cvat-ui/src/reducers/shortcuts-reducer.ts | 302 ++++++++++++++++++ 12 files changed, 408 insertions(+), 317 deletions(-) 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..8a1b2781 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 @@ -32,6 +32,7 @@ interface StateToProps { states: any[]; labels: any[]; jobInstance: any; + keyMap: KeyMap; } interface DispatchToProps { @@ -56,6 +57,9 @@ function mapStateToProps(state: CombinedState): StateToProps { labels, }, }, + shortcuts: { + keyMap, + }, } = state; return { @@ -64,6 +68,7 @@ function mapStateToProps(state: CombinedState): StateToProps { activatedStateID, activatedAttributeID, states, + keyMap, }; } @@ -87,6 +92,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. jobInstance, updateAnnotations, activateObject, + keyMap, } = props; const [labelAttrMap, setLabelAttrMap] = useState( @@ -167,31 +173,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 +214,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. if (activeObjectState) { return ( - + 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..ee2af8d8 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 @@ -59,6 +59,7 @@ interface Props { contextType: ContextMenuType; aamZoomMargin: number; workspace: Workspace; + keyMap: KeyMap; 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..18a1b3b2 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 @@ -35,6 +35,7 @@ import SplitControl from './split-control'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; + keyMap: KeyMap; mergeObjects(enabled: boolean): void; groupObjects(enabled: boolean): void; @@ -57,6 +58,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { repeatDrawShape, pasteShape, resetGroup, + keyMap, } = props; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -65,55 +67,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,7 +148,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { theme='light' width={44} > - + diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 0bfc29c5..6c5d24cb 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -37,6 +37,7 @@ interface CVATAppProps { resetErrors: () => void; resetMessages: () => void; switchShortcutsDialog: () => void; + keyMap: KeyMap; userInitialized: boolean; userFetching: boolean; pluginsInitialized: boolean; @@ -209,6 +210,7 @@ class CVATApplication extends React.PureComponent - + 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 75845dc8..ffc20a27 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,6 +2,7 @@ // // SPDX-License-Identifier: MIT +import { KeyMap } from 'react-hotkeys'; import { connect } from 'react-redux'; import CanvasWrapperComponent from 'components/annotation-page/standard-workspace/canvas-wrapper'; @@ -78,6 +79,7 @@ interface StateToProps { curZLayer: number; contextVisible: boolean; contextType: ContextMenuType; + keyMap: KeyMap; } interface DispatchToProps { @@ -169,6 +171,9 @@ function mapStateToProps(state: CombinedState): StateToProps { blackBorders, }, }, + shortcuts: { + keyMap, + }, } = state; return { @@ -204,6 +209,7 @@ function mapStateToProps(state: CombinedState): StateToProps { contextVisible, contextType, workspace, + keyMap, }; } 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 1f0b1f31..16292cd9 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,10 +2,10 @@ // // SPDX-License-Identifier: MIT +import { KeyMap } from 'react-hotkeys'; import { connect } from 'react-redux'; import { Canvas } from 'cvat-canvas'; - import { mergeObjects, groupObjects, @@ -16,16 +16,13 @@ import { resetAnnotationsGroup, } from 'actions/annotation-actions'; import ControlsSideBarComponent from 'components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar'; -import { - ActiveControl, - CombinedState, - Rotation, -} from 'reducers/interfaces'; +import { ActiveControl, CombinedState, Rotation } from 'reducers/interfaces'; interface StateToProps { canvasInstance: Canvas; rotateAll: boolean; activeControl: ActiveControl; + keyMap: KeyMap; } interface DispatchToProps { @@ -51,12 +48,16 @@ function mapStateToProps(state: CombinedState): StateToProps { rotateAll, }, }, + shortcuts: { + keyMap, + }, } = state; return { rotateAll, canvasInstance, activeControl, + keyMap, }; } 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 b7a18933..d51ec34e 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 @@ -7,11 +7,7 @@ import copy from 'copy-to-clipboard'; import { connect } from 'react-redux'; import { LogType } from 'cvat-logger'; -import { - ActiveControl, - CombinedState, - ColorBy, -} from 'reducers/interfaces'; +import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces'; import { collapseObjectItems, changeLabelColorAsync, @@ -411,7 +407,7 @@ class ObjectItemContainer extends React.PureComponent { private changeAttribute = (id: number, value: string): void => { const { objectState, jobInstance } = this.props; jobInstance.logger.log(LogType.changeAttribute, { - id, + id, value, object_id: objectState.clientID, }); 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 5279620f..98b5a844 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 @@ -16,11 +16,7 @@ import { propagateObject as propagateObjectAction, } from 'actions/annotation-actions'; -import { - CombinedState, - StatesOrdering, - ObjectType, -} from 'reducers/interfaces'; +import { CombinedState, StatesOrdering, ObjectType } from 'reducers/interfaces'; interface StateToProps { jobInstance: any; @@ -35,6 +31,7 @@ interface StateToProps { minZLayer: number; maxZLayer: number; annotationsFiltersHistory: string[]; + keyMap: KeyMap; } interface DispatchToProps { @@ -70,6 +67,9 @@ function mapStateToProps(state: CombinedState): StateToProps { }, tabContentHeight: listHeight, }, + shortcuts: { + keyMap, + }, } = state; let statesHidden = true; @@ -101,6 +101,7 @@ function mapStateToProps(state: CombinedState): StateToProps { minZLayer, maxZLayer, annotationsFiltersHistory, + keyMap, }; } @@ -249,97 +250,28 @@ class ObjectsListContainer extends React.PureComponent { changeFrame, maxZLayer, minZLayer, + keyMap, } = this.props; const { sortedStatesID, statesOrdering, } = this.state; - const keyMap = { - SWITCH_ALL_LOCK: { - name: 'Lock/unlock all objects', - description: 'Change locked state for all objects in the side bar', - sequence: 't+l', - action: 'keydown', - }, - SWITCH_LOCK: { - name: 'Lock/unlock an object', - description: 'Change locked state for an active object', - sequence: 'l', - action: 'keydown', - }, - SWITCH_ALL_HIDDEN: { - name: 'Hide/show all objects', - description: 'Change hidden state for objects in the side bar', - sequence: 't+h', - action: 'keydown', - }, - SWITCH_HIDDEN: { - name: 'Hide/show an object', - description: 'Change hidden state for an active object', - sequence: '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', - sequence: 'k', - action: 'keydown', - }, - SWITCH_OUTSIDE: { - name: 'Switch outside', - description: 'Change outside property for an active track', - sequence: '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', - sequence: 'ctrl+c', - action: 'keydown', - }, - PROPAGATE_OBJECT: { - name: 'Propagate object', - description: 'Make a copy of the object on the following frames', - sequence: 'ctrl+b', - action: 'keydown', - }, - NEXT_KEY_FRAME: { - name: 'Next keyframe', - description: 'Go to the next keyframe of an active track', - sequence: 'r', - action: 'keydown', - }, - PREV_KEY_FRAME: { - name: 'Previous keyframe', - description: 'Go to the previous keyframe of an active track', - sequence: 'e', - action: 'keydown', - }, + const subKeyMap = { + SWITCH_ALL_LOCK: keyMap.SWITCH_ALL_LOCK, + SWITCH_LOCK: keyMap.SWITCH_LOCK, + SWITCH_ALL_HIDDEN: keyMap.SWITCH_ALL_HIDDEN, + SWITCH_HIDDEN: keyMap.SWITCH_HIDDEN, + SWITCH_OCCLUDED: keyMap.SWITCH_OCCLUDED, + SWITCH_KEYFRAME: keyMap.SWITCH_KEYFRAME, + SWITCH_OUTSIDE: keyMap.SWITCH_OUTSIDE, + DELETE_OBJECT: keyMap.DELETE_OBJECT, + TO_BACKGROUND: keyMap.TO_BACKGROUND, + TO_FOREGROUND: keyMap.TO_FOREGROUND, + COPY_SHAPE: keyMap.COPY_SHAPE, + PROPAGATE_OBJECT: keyMap.PROPAGATE_OBJECT, + NEXT_KEY_FRAME: keyMap.NEXT_KEY_FRAME, + PREV_KEY_FRAME: keyMap.PREV_KEY_FRAME, }; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -473,7 +405,7 @@ class ObjectsListContainer extends React.PureComponent { return ( <> - + { canvasIsReady, searchAnnotations, changeWorkspace, + keyMap, } = this.props; const preventDefault = (event: KeyboardEvent | undefined): void => { @@ -472,73 +478,18 @@ class AnnotationTopBarContainer extends React.PureComponent { } }; - const keyMap = { - SAVE_JOB: { - name: 'Save the job', - description: 'Send all changes of annotations to the server', - sequence: 'ctrl+s', - action: 'keydown', - }, - UNDO: { - name: 'Undo action', - description: 'Cancel the latest action related with objects', - sequence: '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', - sequence: 'f', - action: 'keydown', - }, - PREV_FRAME: { - name: 'Previous frame', - description: 'Go to the previous frame', - sequence: 'd', - action: 'keydown', - }, - FORWARD_FRAME: { - name: 'Forward frame', - description: 'Go forward with a step', - sequence: 'v', - action: 'keydown', - }, - BACKWARD_FRAME: { - name: 'Backward frame', - description: 'Go backward with a step', - sequence: 'c', - action: 'keydown', - }, - SEARCH_FORWARD: { - name: 'Search forward', - description: 'Search the next frame that satisfies to the filters', - sequence: 'right', - action: 'keydown', - }, - SEARCH_BACKWARD: { - name: 'Search backward', - description: 'Search the previous frame that satisfies to the filters', - sequence: 'left', - action: 'keydown', - }, - PLAY_PAUSE: { - name: 'Play/pause', - description: 'Start/stop automatic changing frames', - sequence: 'space', - action: 'keydown', - }, - FOCUS_INPUT_FRAME: { - name: 'Focus input frame', - description: 'Focus on the element to change the current frame', - sequences: ['`', '~'], - action: 'keydown', - }, + const subKeyMap = { + SAVE_JOB: keyMap.SAVE_JOB, + UNDO: keyMap.UNDO, + REDO: keyMap.REDO, + NEXT_FRAME: keyMap.SAVE_JOB, + PREV_FRAME: keyMap.PREV_FRAME, + FORWARD_FRAME: keyMap.FORWARD_FRAME, + BACKWARD_FRAME: keyMap.BACKWARD_FRAME, + SEARCH_FORWARD: keyMap.SEARCH_FORWARD, + SEARCH_BACKWARD: keyMap.SEARCH_BACKWARD, + PLAY_PAUSE: keyMap.PLAY_PAUSE, + FOCUS_INPUT_FRAME: keyMap.FOCUS_INPUT_FRAME, }; const handlers = { @@ -608,7 +559,7 @@ class AnnotationTopBarContainer extends React.PureComponent { return ( <> - + - { 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 ( From 6d3b53876e92de3d7456600d71b1d2a21b6d905d Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 26 Mar 2020 23:11:49 +0300 Subject: [PATCH 03/11] Fixed bug in menu --- .../objects-side-bar/object-item.tsx | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) 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 e88ede20..3be155aa 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 @@ -54,7 +54,7 @@ function ItemMenu( toForeground: (() => void), ): JSX.Element { return ( - + - - - - - - - - + + + + + + )} + { objectType !== ObjectType.TAG && ( + + + + + )} From 609f0bd1e4be3b68ebfe188bc0ce2e46c4248500 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 26 Mar 2020 23:18:36 +0300 Subject: [PATCH 04/11] Titles in attribute annotations mode --- .../attribute-annotation-sidebar.tsx | 2 ++ .../attribute-switcher.tsx | 21 +++++++++++++------ .../object-switcher.tsx | 21 +++++++++++++------ 3 files changed, 32 insertions(+), 12 deletions(-) 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 6057a199..9396ad5d 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 @@ -226,6 +226,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. occluded={activeObjectState.occluded} objectsCount={states.length} currentIndex={states.indexOf(activeObjectState)} + keyMap={keyMap} nextObject={nextObject} /> ; nextAttribute(step: number): void; } @@ -21,21 +25,26 @@ function AttributeSwitcher(props: Props): JSX.Element { currentIndex, attributesCount, nextAttribute, + keyMap, } = 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..a796a933 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,17 +3,21 @@ // 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; nextObject(step: number): void; } @@ -24,23 +28,28 @@ function ObjectSwitcher(props: Props): JSX.Element { objectsCount, currentIndex, nextObject, + keyMap, } = props; const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`; return (
- + + + {currentLabel} {` ${clientID} `} {`[${currentIndex + 1}/${objectsCount}]`} - + + +
); } From 3ec2fc42ea986078c5f19ccab02a205f503b64dc Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 27 Mar 2020 00:08:43 +0300 Subject: [PATCH 05/11] Controls panel titles --- .../controls-side-bar/controls-side-bar.tsx | 32 +++++++++-------- .../controls-side-bar/cursor-control.tsx | 27 +++++---------- .../controls-side-bar/draw-points-control.tsx | 11 ++---- .../draw-polygon-control.tsx | 11 ++---- .../draw-polyline-control.tsx | 11 ++---- .../draw-rectangle-control.tsx | 15 ++++---- .../controls-side-bar/draw-shape-popover.tsx | 29 ++++++++++------ .../controls-side-bar/fit-control.tsx | 18 +++------- .../controls-side-bar/group-control.tsx | 21 ++++++------ .../controls-side-bar/merge-control.tsx | 5 +-- .../controls-side-bar/move-control.tsx | 26 ++++---------- .../controls-side-bar/resize-control.tsx | 21 +++--------- .../controls-side-bar/rotate-control.tsx | 26 ++++++-------- .../controls-side-bar/setup-tag-control.tsx | 6 ++-- .../controls-side-bar/setup-tag-popover.tsx | 26 +++++++------- .../controls-side-bar/split-control.tsx | 12 ++----- .../controls-side-bar/draw-shape-popover.tsx | 20 ++++++----- .../controls-side-bar/setup-tag-popover.tsx | 34 ++++++++----------- 18 files changed, 142 insertions(+), 209 deletions(-) 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 daa44cb5..3d7e9abf 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 @@ -4,19 +4,11 @@ import React from 'react'; 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 { formatShortcuts } from 'utils/shortcuts'; import RotateControl from './rotate-control'; import CursorControl from './cursor-control'; @@ -149,10 +141,17 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element { width={44} > - - + - +
@@ -186,11 +185,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
+ - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx index cce985d0..b75679a3 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-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 { PointIcon } from 'icons'; @@ -20,10 +18,7 @@ interface Props { } function DrawPointsControl(props: Props): JSX.Element { - const { - canvasInstance, - isDrawing, - } = props; + const { canvasInstance, isDrawing } = props; const dynamcPopoverPros = isDrawing ? { overlayStyle: { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx index 77f2da28..ab2d4fb5 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-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 { PolygonIcon } from 'icons'; @@ -20,10 +18,7 @@ interface Props { } function DrawPolygonControl(props: Props): JSX.Element { - const { - canvasInstance, - isDrawing, - } = props; + const { canvasInstance, isDrawing } = props; const dynamcPopoverPros = isDrawing ? { overlayStyle: { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx index 1018c1f6..59030d32 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-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 { PolylineIcon } from 'icons'; @@ -20,10 +18,7 @@ interface Props { } function DrawPolylineControl(props: Props): JSX.Element { - const { - canvasInstance, - isDrawing, - } = props; + const { canvasInstance, isDrawing } = props; const dynamcPopoverPros = isDrawing ? { overlayStyle: { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx index 5a8b7c5a..0a55269a 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-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 { RectangleIcon } from 'icons'; @@ -20,10 +18,7 @@ interface Props { } function DrawRectangleControl(props: Props): JSX.Element { - const { - canvasInstance, - isDrawing, - } = props; + const { canvasInstance, isDrawing } = props; const dynamcPopoverPros = isDrawing ? { overlayStyle: { @@ -44,7 +39,9 @@ function DrawRectangleControl(props: Props): JSX.Element { overlayClassName='cvat-draw-shape-popover' placement='right' content={( - + )} > - + + + - + + + 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/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 e92c0f26..731d84be 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,20 +3,15 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; import { RadioChangeEvent } from 'antd/lib/radio'; -import { - CombinedState, - ShapeType, - ObjectType, -} from 'reducers/interfaces'; - -import { - rememberObject, -} from 'actions/annotation-actions'; +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; @@ -33,6 +28,7 @@ interface DispatchToProps { } interface StateToProps { + keyMap: Record; canvasInstance: Canvas; shapeType: ShapeType; labels: any[]; @@ -62,12 +58,16 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { labels, }, }, + shortcuts: { + keyMap, + }, } = state; return { ...own, canvasInstance, labels, + keyMap, }; } @@ -164,6 +164,7 @@ class DrawShapePopoverContainer extends React.PureComponent { } = this.state; const { + keyMap, labels, shapeType, } = this.props; @@ -176,6 +177,7 @@ class DrawShapePopoverContainer extends React.PureComponent { selectedLabeID={selectedLabelID} numberOfPoints={numberOfPoints} rectDrawingMethod={rectDrawingMethod} + repeatShapeShortcut={formatShortcuts(keyMap.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 4ba675c8..99edf31e 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,20 +3,15 @@ // SPDX-License-Identifier: MIT import React from 'react'; +import { ExtendedKeyMapOptions } from 'react-hotkeys'; import { connect } from 'react-redux'; -import { - CombinedState, - ObjectType, -} from 'reducers/interfaces'; - -import { - createAnnotationsAsync, - rememberObject, -} from 'actions/annotation-actions'; +import { CombinedState, ObjectType } from 'reducers/interfaces'; +import { createAnnotationsAsync, rememberObject } from 'actions/annotation-actions'; 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(); @@ -26,6 +21,7 @@ interface DispatchToProps { } interface StateToProps { + keyMap: Record; canvasInstance: Canvas; jobInstance: any; labels: any[]; @@ -59,6 +55,9 @@ function mapStateToProps(state: CombinedState): StateToProps { }, }, }, + shortcuts: { + keyMap, + }, } = state; return { @@ -66,6 +65,7 @@ function mapStateToProps(state: CombinedState): StateToProps { jobInstance, labels, frame, + keyMap, }; } @@ -91,7 +91,7 @@ class DrawShapePopoverContainer extends React.PureComponent { }); }; - private onSetup(): void { + private onSetup = (): void => { const { frame, labels, @@ -114,23 +114,17 @@ class DrawShapePopoverContainer extends React.PureComponent { }); onAnnotationCreate(jobInstance, frame, [objectState]); - } + }; public render(): JSX.Element { - const { - selectedLabelID, - } = this.state; - - const { - labels, - } = this.props; - - this.onSetup = this.onSetup.bind(this); + const { selectedLabelID } = this.state; + const { keyMap, labels } = this.props; return ( From 251d38db5bafc6aabfd7c3aeed1deb3c68115f59 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 27 Mar 2020 00:20:46 +0300 Subject: [PATCH 06/11] Titles for object list header --- .../objects-side-bar/objects-list-header.tsx | 29 +++++++++++++------ .../objects-side-bar/objects-list.tsx | 7 ++++- .../objects-side-bar/objects-list.tsx | 4 ++- 3 files changed, 29 insertions(+), 11 deletions(-) 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 + ? + : } + { {...this.props} statesOrdering={statesOrdering} sortedStatesID={sortedStatesID} + switchHiddenAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_HIDDEN)} + switchLockAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_LOCK)} changeStatesOrdering={this.onChangeStatesOrdering} lockAllStates={this.onLockAllStates} unlockAllStates={this.onUnlockAllStates} From ff0a5659c7ab208dbab446452da47edfcbba0190 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 27 Mar 2020 00:34:58 +0300 Subject: [PATCH 07/11] Minor fixes --- .../objects-side-bar/object-item.tsx | 16 ++++++++++------ .../standard-workspace/styles.scss | 18 ++++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) 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 3be155aa..067ba014 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 @@ -368,9 +368,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { shapeType !== ShapeType.POINTS && ( - { pinned - ? - : } + + { pinned + ? + : } + ) } @@ -426,9 +428,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { shapeType !== ShapeType.POINTS && ( - { pinned - ? - : } + + { pinned + ? + : } + ) } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss index e731a27f..96c10588 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -102,13 +102,19 @@ > 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; + } } } } From 0fda72bb99196038e635aee8654cb6811e5a1a61 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 27 Mar 2020 11:14:33 +0300 Subject: [PATCH 08/11] Added tooltips in top bar --- .../top-bar/annotation-menu.tsx | 8 +--- .../annotation-page/top-bar/left-group.tsx | 29 +++++++------ .../top-bar/player-buttons.tsx | 32 ++++++++------ .../top-bar/player-navigation.tsx | 43 ++++++++++--------- .../annotation-page/top-bar/right-group.tsx | 13 +++--- .../top-bar/statistics-modal.tsx | 19 +++----- .../annotation-page/top-bar/top-bar.tsx | 29 ++++++++++++- .../annotation-page/top-bar/top-bar.tsx | 14 ++++-- cvat-ui/src/utils/shortcuts.ts | 17 ++++++++ 9 files changed, 129 insertions(+), 75 deletions(-) create mode 100644 cvat-ui/src/utils/shortcuts.ts 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 { @@ -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(', ')}]`; -} From 69c51857b549630b69b87d8e39b12c8ade188678 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Mon, 30 Mar 2020 10:25:23 +0300 Subject: [PATCH 11/11] Typos --- .../standard-workspace/controls-side-bar/cursor-control.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx index a53badd1..59fc0a87 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx @@ -4,7 +4,7 @@ import React from 'react'; import Icon from 'antd/lib/icon'; -import Tooltop from 'antd/lib/tooltip'; +import Tooltip from 'antd/lib/tooltip'; import { CursorIcon } from 'icons'; import { ActiveControl } from 'reducers/interfaces'; @@ -24,7 +24,7 @@ function CursorControl(props: Props): JSX.Element { } = props; return ( - + - + ); }