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 (