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 (