wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1323 from opencv/bs/ui_titles

Browse Source 
React UI: Added titles
main
Dmitry Kalinin 6 years ago committed by GitHub
parent 6c3b8b996c 69c51857b5
commit 65b1b5c7d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 964 additions and 730 deletions
Show Stats Download Patch File Download Diff File

46
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
Unescape Escape View File

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React, { useState, useEffect } from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux';
import { Action } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
@ -32,6 +32,8 @@ interface StateToProps {
states: any[];
labels: any[];
jobInstance: any;
keyMap: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
}
interface DispatchToProps {
@ -56,6 +58,10 @@ function mapStateToProps(state: CombinedState): StateToProps {
labels,
},
},
shortcuts: {
keyMap,
normalizedKeyMap,
},
} = state;
return {
@ -64,6 +70,8 @@ function mapStateToProps(state: CombinedState): StateToProps {
activatedStateID,
activatedAttributeID,
states,
keyMap,
normalizedKeyMap,
};
}
@ -87,6 +95,8 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
jobInstance,
updateAnnotations,
activateObject,
keyMap,
normalizedKeyMap,
} = props;
const [labelAttrMap, setLabelAttrMap] = useState(
@ -167,31 +177,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 +218,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
if (activeObjectState) {
return (
<Layout.Sider {...siderProps}>
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<Row>
<Col>
<AnnotationsFiltersInput />
@ -240,6 +230,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
occluded={activeObjectState.occluded}
objectsCount={states.length}
currentIndex={states.indexOf(activeObjectState)}
normalizedKeyMap={normalizedKeyMap}
nextObject={nextObject}
/>
<ObjectBasicsEditor
@ -267,6 +258,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
currentIndex={activeObjectState.label.attributes
.indexOf(activeAttribute)}
attributesCount={activeObjectState.label.attributes.length}
normalizedKeyMap={normalizedKeyMap}
nextAttribute={nextAttribute}
/>
<AttributeEditor

18
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ interface Props {
currentAttribute: string;
currentIndex: number;
attributesCount: number;
normalizedKeyMap: Record<string, string>;
nextAttribute(step: number): void;
}
@ -21,21 +22,26 @@ function AttributeSwitcher(props: Props): JSX.Element {
currentIndex,
attributesCount,
nextAttribute,
normalizedKeyMap,
} = props;
const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
return (
<div className='attribute-annotation-sidebar-switcher'>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
<Icon type='left' />
</Button>
<Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
<Icon type='left' />
</Button>
</Tooltip>
<Tooltip title={title}>
<Text className='cvat-text'>{currentAttribute}</Text>
<Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
</Tooltip>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
<Icon type='right' />
</Button>
<Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
<Icon type='right' />
</Button>
</Tooltip>
</div>
);
}

18
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
Unescape Escape View File

@ -14,6 +14,7 @@ interface Props {
occluded: boolean;
objectsCount: number;
currentIndex: number;
normalizedKeyMap: Record<string, string>;
nextObject(step: number): void;
}
@ -24,23 +25,28 @@ function ObjectSwitcher(props: Props): JSX.Element {
objectsCount,
currentIndex,
nextObject,
normalizedKeyMap,
} = props;
const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
return (
<div className='attribute-annotation-sidebar-switcher'>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
<Icon type='left' />
</Button>
<Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
<Icon type='left' />
</Button>
</Tooltip>
<Tooltip title={title}>
<Text className='cvat-text'>{currentLabel}</Text>
<Text className='cvat-text'>{` ${clientID} `}</Text>
<Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
</Tooltip>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
<Icon type='right' />
</Button>
<Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
<Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
<Icon type='right' />
</Button>
</Tooltip>
</div>
);
}

71
cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx
Unescape Escape View File

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
@ -59,6 +59,7 @@ interface Props {
contextType: ContextMenuType;
aamZoomMargin: number;
workspace: Workspace;
keyMap: Record<string, ExtendedKeyMapOptions>;
onSetupCanvas: () => void;
onDragCanvas: (enabled: boolean) => void;
onZoomCanvas: (enabled: boolean) => void;
@ -683,6 +684,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
onChangeGridColor,
onChangeGridOpacity,
onSwitchGrid,
keyMap,
} = this.props;
const preventDefault = (event: KeyboardEvent | undefined): void => {
@ -691,61 +693,16 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
}
};
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<Props> {
return (
<Layout.Content style={{ position: 'relative' }}>
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
{/*
This element doesn't have any props
So, React isn't going to rerender it

97
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
Unescape Escape View File

@ -3,20 +3,11 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
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 RotateControl from './rotate-control';
import CursorControl from './cursor-control';
@ -35,6 +26,8 @@ import SplitControl from './split-control';
interface Props {
canvasInstance: Canvas;
activeControl: ActiveControl;
keyMap: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
mergeObjects(enabled: boolean): void;
groupObjects(enabled: boolean): void;
@ -57,6 +50,8 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
repeatDrawShape,
pasteShape,
resetGroup,
normalizedKeyMap,
keyMap,
} = props;
const preventDefault = (event: KeyboardEvent | undefined): void => {
@ -65,55 +60,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,11 +141,18 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
theme='light'
width={44}
>
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
<CursorControl canvasInstance={canvasInstance} activeControl={activeControl} />
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<CursorControl
cursorShortkey={normalizedKeyMap.CANCEL}
canvasInstance={canvasInstance}
activeControl={activeControl}
/>
<MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
<RotateControl rotateFrame={rotateFrame} />
<RotateControl
anticlockwiseShortcut={normalizedKeyMap.ANTICLOCKWISE_ROTATION}
clockwiseShortcut={normalizedKeyMap.CLOCKWISE_ROTATION}
rotateFrame={rotateFrame}
/>
<hr />
@ -224,11 +186,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
<hr />
<MergeControl
switchMergeShortcut={normalizedKeyMap.SWITCH_MERGE_MODE}
canvasInstance={canvasInstance}
activeControl={activeControl}
mergeObjects={mergeObjects}
/>
<GroupControl
switchGroupShortcut={normalizedKeyMap.SWITCH_GROUP_MODE}
resetGroupShortcut={normalizedKeyMap.RESET_GROUP}
canvasInstance={canvasInstance}
activeControl={activeControl}
groupObjects={groupObjects}

25
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx
Unescape Escape View File

@ -3,26 +3,16 @@
// 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 {
CursorIcon,
} from 'icons';
import {
ActiveControl,
} from 'reducers/interfaces';
import {
Canvas,
} from 'cvat-canvas';
import { CursorIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas';
interface Props {
canvasInstance: Canvas;
cursorShortkey: string;
activeControl: ActiveControl;
}
@ -30,10 +20,11 @@ function CursorControl(props: Props): JSX.Element {
const {
canvasInstance,
activeControl,
cursorShortkey,
} = props;
return (
<Tooltip title='Cursor' placement='right'>
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon
component={CursorIcon}
className={activeControl === ActiveControl.CURSOR

11
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
Unescape Escape View File

@ -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: {

11
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
Unescape Escape View File

@ -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: {

11
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
Unescape Escape View File

@ -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: {

15
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
Unescape Escape View File

@ -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={(
<DrawShapePopoverContainer shapeType={ShapeType.RECTANGLE} />
<DrawShapePopoverContainer
shapeType={ShapeType.RECTANGLE}
/>
)}
>
<Icon

29
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -9,6 +9,7 @@ import Select from 'antd/lib/select';
import Button from 'antd/lib/button';
import InputNumber from 'antd/lib/input-number';
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text';
import { RectDrawingMethod } from 'cvat-canvas';
@ -22,6 +23,7 @@ interface Props {
rectDrawingMethod?: RectDrawingMethod;
numberOfPoints?: number;
selectedLabeID: number;
repeatShapeShortcut: string;
onChangeLabel(value: string): void;
onChangePoints(value: number | undefined): void;
onChangeRectDrawingMethod(event: RadioChangeEvent): void;
@ -37,6 +39,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
selectedLabeID,
numberOfPoints,
rectDrawingMethod,
repeatShapeShortcut,
onDrawTrack,
onDrawShape,
onChangeLabel,
@ -133,19 +136,23 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
}
<Row type='flex' justify='space-around'>
<Col span={12}>
<Button
onClick={onDrawShape}
>
Shape
</Button>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button
onClick={onDrawShape}
>
Shape
</Button>
</Tooltip>
</Col>
<Col span={12}>
<Button
onClick={onDrawTrack}
disabled={shapeType !== ShapeType.RECTANGLE}
>
Track
</Button>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button
onClick={onDrawTrack}
disabled={shapeType !== ShapeType.RECTANGLE}
>
Track
</Button>
</Tooltip>
</Col>
</Row>
</div>

18
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx
Unescape Escape View File

@ -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 (
<Tooltip title='Fit the image' placement='right'>
<Tooltip title='Fit the image [Double Click]' placement='right'>
<Icon component={FitIcon} onClick={(): void => canvasInstance.fit()} />
</Tooltip>
);

21
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx
Unescape Escape View File

@ -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 (
<Tooltip title='Group shapes/tracks' placement='right'>
<Tooltip title={title} placement='right'>
<Icon {...dynamicIconProps} component={GroupIcon} />
</Tooltip>
);

5
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx
Unescape Escape View File

@ -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 (
<Tooltip title='Merge shapes/tracks' placement='right'>
<Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right'>
<Icon {...dynamicIconProps} component={MergeIcon} />
</Tooltip>
);

26
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx
Unescape Escape View File

@ -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 (
<Tooltip title='Move the image' placement='right'>

21
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx
Unescape Escape View File

@ -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;

26
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
Unescape Escape View File

@ -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={(
<>
<Tooltip title='Rotate the image anticlockwise' placement='topRight'>
<Tooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight'>
<Icon
className='cvat-rotate-canvas-controls-left'
onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)}
component={RotateIcon}
/>
</Tooltip>
<Tooltip title='Rotate the image clockwise' placement='topRight'>
<Tooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight'>
<Icon
className='cvat-rotate-canvas-controls-right'
onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)}

6
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
Unescape Escape View File

@ -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';

26
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -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 {
</Row>
<Row type='flex' justify='space-around'>
<Col span={24}>
<Button onClick={() => onSetup(selectedLabeID)}>
Tag
</Button>
<Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`}>
<Button onClick={() => onSetup(selectedLabeID)}>
Tag
</Button>
</Tooltip>
</Col>
</Row>
</div>
);
}
export default React.memo(setupTagPopover);
export default React.memo(SetupTagPopover);

12
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
Unescape Escape View File

@ -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';

252
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
Unescape Escape View File

@ -3,7 +3,6 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Select from 'antd/lib/select';
@ -18,6 +17,7 @@ import Button from 'antd/lib/button';
import Modal from 'antd/lib/modal';
import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
@ -38,6 +38,12 @@ function ItemMenu(
serverID: number | undefined,
locked: boolean,
objectType: ObjectType,
copyShortcut: string,
pasteShortcut: string,
propagateShortcut: string,
toBackgroundShortcut: string,
toForegroundShortcut: string,
removeShortcut: string,
copy: (() => void),
remove: (() => void),
propagate: (() => void),
@ -46,58 +52,68 @@ function ItemMenu(
toForeground: (() => void),
): JSX.Element {
return (
<Menu key='unique' className='cvat-object-item-menu'>
<Menu className='cvat-object-item-menu'>
<Menu.Item>
<Button disabled={serverID === undefined} type='link' icon='link' onClick={createURL}>
Create object URL
</Button>
</Menu.Item>
<Menu.Item>
<Button type='link' icon='copy' onClick={copy}>
Make a copy
</Button>
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`}>
<Button type='link' icon='copy' onClick={copy}>
Make a copy
</Button>
</Tooltip>
</Menu.Item>
<Menu.Item>
<Button type='link' icon='block' onClick={propagate}>
Propagate
</Button>
<Tooltip title={`${propagateShortcut}`}>
<Button type='link' icon='block' onClick={propagate}>
Propagate
</Button>
</Tooltip>
</Menu.Item>
{ objectType !== ObjectType.TAG && (
<>
<Menu.Item>
<Menu.Item>
<Tooltip title={`${toBackgroundShortcut}`}>
<Button type='link' onClick={toBackground}>
<Icon component={BackgroundIcon} />
To background
</Button>
</Menu.Item>
<Menu.Item>
</Tooltip>
</Menu.Item>
)}
{ objectType !== ObjectType.TAG && (
<Menu.Item>
<Tooltip title={`${toForegroundShortcut}`}>
<Button type='link' onClick={toForeground}>
<Icon component={ForegroundIcon} />
To foreground
</Button>
</Menu.Item>
</>
</Tooltip>
</Menu.Item>
)}
<Menu.Item>
<Button
type='link'
icon='delete'
onClick={(): void => {
if (locked) {
Modal.confirm({
title: 'Object is locked',
content: 'Are you sure you want to remove it?',
onOk() {
remove();
},
});
} else {
remove();
}
}}
>
Remove
</Button>
<Tooltip title={`${removeShortcut}`}>
<Button
type='link'
icon='delete'
onClick={(): void => {
if (locked) {
Modal.confirm({
title: 'Object is locked',
content: 'Are you sure you want to remove it?',
onOk() {
remove();
},
});
} else {
remove();
}
}}
>
Remove
</Button>
</Tooltip>
</Menu.Item>
</Menu>
);
@ -111,6 +127,12 @@ interface ItemTopComponentProps {
objectType: ObjectType;
type: string;
locked: boolean;
copyShortcut: string;
pasteShortcut: string;
propagateShortcut: string;
toBackgroundShortcut: string;
toForegroundShortcut: string;
removeShortcut: string;
changeLabel(labelID: string): void;
copy(): void;
remove(): void;
@ -129,6 +151,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
objectType,
type,
locked,
copyShortcut,
pasteShortcut,
propagateShortcut,
toBackgroundShortcut,
toForegroundShortcut,
removeShortcut,
changeLabel,
copy,
remove,
@ -146,13 +174,15 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
<Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
</Col>
<Col span={12}>
<Select size='small' value={`${labelID}`} onChange={changeLabel}>
{ labels.map((label: any): JSX.Element => (
<Select.Option key={label.id} value={`${label.id}`}>
{label.name}
</Select.Option>
))}
</Select>
<Tooltip title='Change current label'>
<Select size='small' value={`${labelID}`} onChange={changeLabel}>
{ labels.map((label: any): JSX.Element => (
<Select.Option key={label.id} value={`${label.id}`}>
{label.name}
</Select.Option>
))}
</Select>
</Tooltip>
</Col>
<Col span={2}>
<Dropdown
@ -161,6 +191,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
serverID,
locked,
objectType,
copyShortcut,
pasteShortcut,
propagateShortcut,
toBackgroundShortcut,
toForegroundShortcut,
removeShortcut,
copy,
remove,
propagate,
@ -187,6 +223,13 @@ interface ItemButtonsComponentProps {
pinned: boolean;
hidden: boolean;
keyframe: boolean | undefined;
switchOccludedShortcut: string;
switchOutsideShortcut: string;
switchLockShortcut: string;
switchHiddenShortcut: string;
switchKeyFrameShortcut: string;
nextKeyFrameShortcut: string;
prevKeyFrameShortcut: string;
navigateFirstKeyframe: null | (() => void);
navigatePrevKeyframe: null | (() => void);
@ -217,6 +260,13 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
pinned,
hidden,
keyframe,
switchOccludedShortcut,
switchOutsideShortcut,
switchLockShortcut,
switchHiddenShortcut,
switchKeyFrameShortcut,
nextKeyFrameShortcut,
prevKeyFrameShortcut,
navigateFirstKeyframe,
navigatePrevKeyframe,
@ -249,12 +299,26 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
</Col>
<Col>
{ navigatePrevKeyframe
? <Icon component={PreviousIcon} onClick={navigatePrevKeyframe} />
? (
<Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
<Icon
component={PreviousIcon}
onClick={navigatePrevKeyframe}
/>
</Tooltip>
)
: <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
</Col>
<Col>
{ navigateNextKeyframe
? <Icon component={NextIcon} onClick={navigateNextKeyframe} />
? (
<Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
<Icon
component={NextIcon}
onClick={navigateNextKeyframe}
/>
</Tooltip>
)
: <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
</Col>
<Col>
@ -265,36 +329,48 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
</Row>
<Row type='flex' justify='space-around'>
<Col>
{ outside
? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} />
: <Icon type='select' onClick={setOutside} />}
<Tooltip title={`Switch outside property ${switchOutsideShortcut}`}>
{ outside
? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} />
: <Icon type='select' onClick={setOutside} />}
</Tooltip>
</Col>
<Col>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col>
<Col>
{ occluded
? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
{ occluded
? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
</Tooltip>
</Col>
<Col>
{ hidden
? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
{ hidden
? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
</Tooltip>
</Col>
<Col>
{ keyframe
? <Icon type='star' theme='filled' onClick={unsetKeyframe} />
: <Icon type='star' onClick={setKeyframe} />}
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
{ keyframe
? <Icon type='star' theme='filled' onClick={unsetKeyframe} />
: <Icon type='star' onClick={setKeyframe} />}
</Tooltip>
</Col>
{
shapeType !== ShapeType.POINTS && (
<Col>
{ pinned
? <Icon type='pushpin' theme='filled' onClick={unpin} />
: <Icon type='pushpin' onClick={pin} />}
<Tooltip title='Switch pinned property'>
{ pinned
? <Icon type='pushpin' theme='filled' onClick={unpin} />
: <Icon type='pushpin' onClick={pin} />}
</Tooltip>
</Col>
)
}
@ -310,9 +386,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
<Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'>
<Col>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col>
</Row>
</Col>
@ -325,26 +403,34 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
<Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'>
<Col>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
{ locked
? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col>
<Col>
{ occluded
? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
{ occluded
? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
</Tooltip>
</Col>
<Col>
{ hidden
? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
{ hidden
? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
</Tooltip>
</Col>
{
shapeType !== ShapeType.POINTS && (
<Col>
{ pinned
? <Icon type='pushpin' theme='filled' onClick={unpin} />
: <Icon type='pushpin' onClick={pin} />}
<Tooltip title='Switch pinned property'>
{ pinned
? <Icon type='pushpin' theme='filled' onClick={unpin} />
: <Icon type='pushpin' onClick={pin} />}
</Tooltip>
</Col>
)
}
@ -587,6 +673,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme
const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame);
interface Props {
normalizedKeyMap: Record<string, string>;
activated: boolean;
objectType: ObjectType;
shapeType: ShapeType;
@ -653,6 +740,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean {
&& nextProps.collapsed === prevProps.collapsed
&& nextProps.labels === prevProps.labels
&& nextProps.attributes === prevProps.attributes
&& nextProps.normalizedKeyMap === prevProps.normalizedKeyMap
&& nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe
&& nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe
&& nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe
@ -681,6 +769,7 @@ function ObjectItemComponent(props: Props): JSX.Element {
attributes,
labels,
collapsed,
normalizedKeyMap,
navigateFirstKeyframe,
navigatePrevKeyframe,
navigateNextKeyframe,
@ -748,6 +837,12 @@ function ObjectItemComponent(props: Props): JSX.Element {
objectType={objectType}
type={type}
locked={locked}
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}
@ -765,6 +860,13 @@ function ObjectItemComponent(props: Props): JSX.Element {
pinned={pinned}
hidden={hidden}
keyframe={keyframe}
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}

29
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
Unescape Escape View File

@ -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 {
</Row>
<Row type='flex' justify='space-between' align='middle'>
<Col span={2}>
{ statesLocked
? <Icon type='lock' onClick={unlockAllStates} />
: <Icon type='unlock' onClick={lockAllStates} />}
<Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`}>
{ statesLocked
? <Icon type='lock' onClick={unlockAllStates} />
: <Icon type='unlock' onClick={lockAllStates} />}
</Tooltip>
</Col>
<Col span={2}>
{ statesHidden
? <Icon type='eye-invisible' onClick={showAllStates} />
: <Icon type='eye' onClick={hideAllStates} />}
<Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`}>
{ statesHidden
? <Icon type='eye-invisible' onClick={showAllStates} />
: <Icon type='eye' onClick={hideAllStates} />}
</Tooltip>
</Col>
<Col span={2}>
{ statesCollapsed
? <Icon type='caret-down' onClick={expandAllStates} />
: <Icon type='caret-up' onClick={collapseAllStates} />}
<Tooltip title='Expand/collapse all'>
{ statesCollapsed
? <Icon type='caret-down' onClick={expandAllStates} />
: <Icon type='caret-up' onClick={collapseAllStates} />}
</Tooltip>
</Col>
<StatesOrderingSelector
statesOrdering={statesOrdering}

7
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx
Unescape Escape View File

@ -8,7 +8,6 @@ import { StatesOrdering } from 'reducers/interfaces';
import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
import ObjectListHeader from './objects-list-header';
interface Props {
listHeight: number;
statesHidden: boolean;
@ -16,6 +15,8 @@ interface Props {
statesCollapsed: boolean;
statesOrdering: StatesOrdering;
sortedStatesID: number[];
switchLockAllShortcut: string;
switchHiddenAllShortcut: string;
changeStatesOrdering(value: StatesOrdering): void;
lockAllStates(): void;
unlockAllStates(): void;
@ -33,6 +34,8 @@ function ObjectListComponent(props: Props): JSX.Element {
statesCollapsed,
statesOrdering,
sortedStatesID,
switchLockAllShortcut,
switchHiddenAllShortcut,
changeStatesOrdering,
lockAllStates,
unlockAllStates,
@ -49,6 +52,8 @@ function ObjectListComponent(props: Props): JSX.Element {
statesLocked={statesLocked}
statesCollapsed={statesCollapsed}
statesOrdering={statesOrdering}
switchLockAllShortcut={switchLockAllShortcut}
switchHiddenAllShortcut={switchHiddenAllShortcut}
changeStatesOrdering={changeStatesOrdering}
lockAllStates={lockAllStates}
unlockAllStates={unlockAllStates}

18
cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
Unescape Escape View File

@ -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;
}
}
}
}

8
cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx
Unescape Escape View File

@ -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';

29
cvat-ui/src/components/annotation-page/top-bar/left-group.tsx
Unescape Escape View File

@ -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 {
</Button>
</Dropdown>
<Button
title={`Save current changes ${saveShortcut}`}
onClick={saving ? undefined : onSaveAnnotation}
type='link'
className={saving
@ -79,7 +82,7 @@ function LeftGroup(props: Props): JSX.Element {
</Modal>
</Button>
<Button
title={undoAction}
title={`Undo: ${undoAction} ${undoShortcut}`}
disabled={!undoAction}
style={{ pointerEvents: undoAction ? 'initial' : 'none', opacity: undoAction ? 1 : 0.5 }}
type='link'
@ -90,7 +93,7 @@ function LeftGroup(props: Props): JSX.Element {
<span>Undo</span>
</Button>
<Button
title={redoAction}
title={`Redo: ${redoAction} ${redoShortcut}`}
disabled={!redoAction}
style={{ pointerEvents: redoAction ? 'initial' : 'none', opacity: redoAction ? 1 : 0.5 }}
type='link'

32
cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
Unescape Escape View File

@ -4,11 +4,9 @@
import React from 'react';
import {
Col,
Icon,
Tooltip,
} from 'antd';
import { Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Tooltip from 'antd/lib/tooltip';
import {
FirstIcon,
@ -19,10 +17,15 @@ import {
NextIcon,
ForwardJumpIcon,
LastIcon,
} from '../../../icons';
} from 'icons';
interface Props {
playing: boolean;
playPauseShortcut: string;
nextFrameShortcut: string;
previousFrameShortcut: string;
forwardShortcut: string;
backwardShortcut: string;
onSwitchPlay(): void;
onPrevFrame(): void;
onNextFrame(): void;
@ -35,6 +38,11 @@ interface Props {
function PlayerButtons(props: Props): JSX.Element {
const {
playing,
playPauseShortcut,
nextFrameShortcut,
previousFrameShortcut,
forwardShortcut,
backwardShortcut,
onSwitchPlay,
onPrevFrame,
onNextFrame,
@ -49,16 +57,16 @@ function PlayerButtons(props: Props): JSX.Element {
<Tooltip title='Go to the first frame'>
<Icon component={FirstIcon} onClick={onFirstFrame} />
</Tooltip>
<Tooltip title='Go back with a step'>
<Tooltip title={`Go back with a step ${backwardShortcut}`}>
<Icon component={BackJumpIcon} onClick={onBackward} />
</Tooltip>
<Tooltip title='Go back'>
<Tooltip title={`Go back ${previousFrameShortcut}`}>
<Icon component={PreviousIcon} onClick={onPrevFrame} />
</Tooltip>
{!playing
? (
<Tooltip title='Play'>
<Tooltip title={`Play ${playPauseShortcut}`}>
<Icon
component={PlayIcon}
onClick={onSwitchPlay}
@ -66,7 +74,7 @@ function PlayerButtons(props: Props): JSX.Element {
</Tooltip>
)
: (
<Tooltip title='Pause'>
<Tooltip title={`Pause ${playPauseShortcut}`}>
<Icon
component={PauseIcon}
onClick={onSwitchPlay}
@ -74,10 +82,10 @@ function PlayerButtons(props: Props): JSX.Element {
</Tooltip>
)}
<Tooltip title='Go next'>
<Tooltip title={`Go next ${nextFrameShortcut}`}>
<Icon component={NextIcon} onClick={onNextFrame} />
</Tooltip>
<Tooltip title='Go next with a step'>
<Tooltip title={`Go next with a step ${forwardShortcut}`}>
<Icon component={ForwardJumpIcon} onClick={onForward} />
</Tooltip>
<Tooltip title='Go to the last frame'>

43
cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
Unescape Escape View File

@ -18,6 +18,7 @@ interface Props {
stopFrame: number;
frameNumber: number;
frameFilename: string;
focusFrameInputShortcut: string;
inputFrameRef: React.RefObject<InputNumber>;
onSliderChange(value: SliderValue): void;
onInputChange(value: number): void;
@ -30,6 +31,7 @@ function PlayerNavigation(props: Props): JSX.Element {
stopFrame,
frameNumber,
frameFilename,
focusFrameInputShortcut,
inputFrameRef,
onSliderChange,
onInputChange,
@ -72,26 +74,27 @@ function PlayerNavigation(props: Props): JSX.Element {
</Row>
</Col>
<Col>
<InputNumber
className='cvat-player-frame-selector'
type='number'
value={frameInputValue}
// https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
onChange={(value: number | undefined) => {
if (typeof (value) === 'number') {
setFrameInputValue(Math.floor(
clamp(value, startFrame, stopFrame),
));
}
}}
onBlur={() => {
onInputChange(frameInputValue);
}}
onPressEnter={() => {
onInputChange(frameInputValue);
}}
ref={inputFrameRef}
/>
<Tooltip title={`Press ${focusFrameInputShortcut} to focus here`}>
<InputNumber
className='cvat-player-frame-selector'
type='number'
value={frameInputValue}
onChange={(value: number | undefined) => {
if (typeof (value) === 'number') {
setFrameInputValue(Math.floor(
clamp(value, startFrame, stopFrame),
));
}
}}
onBlur={() => {
onInputChange(frameInputValue);
}}
onPressEnter={() => {
onInputChange(frameInputValue);
}}
ref={inputFrameRef}
/>
</Tooltip>
</Col>
</>
);

13
cvat-ui/src/components/annotation-page/top-bar/right-group.tsx
Unescape Escape View File

@ -3,16 +3,13 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import {
Col,
Icon,
Select,
Button,
} from 'antd';
import { Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon';
import Select from 'antd/lib/select';
import Button from 'antd/lib/button';
import { Workspace } from 'reducers/interfaces';
import { InfoIcon, FullscreenIcon } from '../../../icons';
import { InfoIcon, FullscreenIcon } from 'icons';
interface Props {
workspace: Workspace;

19
cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
Unescape Escape View File

@ -3,18 +3,13 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import {
Tooltip,
Select,
Table,
Modal,
Spin,
Icon,
Row,
Col,
} from 'antd';
import { Row, Col } from 'antd/lib/grid';
import Tooltip from 'antd/lib/tooltip';
import Select from 'antd/lib/select';
import Table from 'antd/lib/table';
import Modal from 'antd/lib/modal';
import Spin from 'antd/lib/spin';
import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text';
interface Props {

29
cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
Unescape Escape View File

@ -26,6 +26,15 @@ interface Props {
undoAction?: string;
redoAction?: string;
workspace: Workspace;
saveShortcut: string;
undoShortcut: string;
redoShortcut: string;
playPauseShortcut: string;
nextFrameShortcut: string;
previousFrameShortcut: string;
forwardShortcut: string;
backwardShortcut: string;
focusFrameInputShortcut: string;
changeWorkspace(workspace: Workspace): void;
showStatistics(): void;
onSwitchPlay(): void;
@ -56,6 +65,15 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
startFrame,
stopFrame,
workspace,
saveShortcut,
undoShortcut,
redoShortcut,
playPauseShortcut,
nextFrameShortcut,
previousFrameShortcut,
forwardShortcut,
backwardShortcut,
focusFrameInputShortcut,
showStatistics,
changeWorkspace,
onSwitchPlay,
@ -78,9 +96,12 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
<LeftGroup
saving={saving}
savingStatuses={savingStatuses}
onSaveAnnotation={onSaveAnnotation}
undoAction={undoAction}
redoAction={redoAction}
saveShortcut={saveShortcut}
undoShortcut={undoShortcut}
redoShortcut={redoShortcut}
onSaveAnnotation={onSaveAnnotation}
onUndoClick={onUndoClick}
onRedoClick={onRedoClick}
/>
@ -88,6 +109,11 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
<Row type='flex' align='middle'>
<PlayerButtons
playing={playing}
playPauseShortcut={playPauseShortcut}
nextFrameShortcut={nextFrameShortcut}
previousFrameShortcut={previousFrameShortcut}
forwardShortcut={forwardShortcut}
backwardShortcut={backwardShortcut}
onPrevFrame={onPrevFrame}
onNextFrame={onNextFrame}
onForward={onForward}
@ -101,6 +127,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
stopFrame={stopFrame}
frameNumber={frameNumber}
frameFilename={frameFilename}
focusFrameInputShortcut={focusFrameInputShortcut}
inputFrameRef={inputFrameRef}
onSliderChange={onSliderChange}
onInputChange={onInputChange}

22
cvat-ui/src/components/cvat-app.tsx
Unescape Escape View File

@ -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,6 +37,7 @@ interface CVATAppProps {
resetErrors: () => void;
resetMessages: () => void;
switchShortcutsDialog: () => void;
keyMap: Record<string, ExtendedKeyMapOptions>;
userInitialized: boolean;
userFetching: boolean;
pluginsInitialized: boolean;
@ -209,6 +210,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
switchShortcutsDialog,
user,
history,
keyMap,
} = this.props;
const readyForRender = (userInitialized && user == null)
@ -218,19 +220,9 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
const withModels = installedAutoAnnotation
|| installedTFAnnotation || installedTFSegmentation;
const keyMap = {
SWITCH_SHORTCUTS: {
name: 'Show shortcuts',
description: 'Open/hide the list of available shortcuts',
sequence: 'f1',
action: 'keydown',
},
OPEN_SETTINGS: {
name: 'Open settings',
description: 'Go to the settings page or go back',
sequence: 'f2',
action: 'keydown',
},
const subKeyMap = {
SWITCH_SHORTCUTS: keyMap.SWITCH_SHORTCUTS,
OPEN_SETTINGS: keyMap.OPEN_SETTINGS,
};
const handlers = {
@ -262,7 +254,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
<HeaderContainer> </HeaderContainer>
<Layout.Content>
<ShorcutsDialog />
<GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers}>
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers}>
<Switch>
<Route exact path='/settings' component={SettingsPageContainer} />
<Route exact path='/tasks' component={TasksPageContainer} />

27
cvat-ui/src/components/header/header.tsx
Unescape Escape View File

@ -4,26 +4,18 @@
import './styles.scss';
import React from 'react';
import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import {
Layout,
Icon,
Button,
Menu,
Dropdown,
Modal,
Row,
Col,
} from 'antd';
import { Row, Col } from 'antd/lib/grid';
import Layout from 'antd/lib/layout';
import Icon from 'antd/lib/icon';
import Button from 'antd/lib/button';
import Menu from 'antd/lib/menu';
import Dropdown from 'antd/lib/dropdown';
import Modal from 'antd/lib/modal';
import Text from 'antd/lib/typography/Text';
import {
CVATLogo,
AccountIcon,
} from 'icons';
import { CVATLogo, AccountIcon } from 'icons';
interface HeaderContainerProps {
onLogout: () => void;
@ -40,6 +32,7 @@ interface HeaderContainerProps {
coreVersion: string;
canvasVersion: string;
uiVersion: string;
switchSettingsShortcut: string;
}
type Props = HeaderContainerProps & RouteComponentProps;
@ -60,6 +53,7 @@ function HeaderContainer(props: Props): JSX.Element {
uiVersion,
onLogout,
logoutFetching,
switchSettingsShortcut,
} = props;
const renderModels = installedAutoAnnotation
@ -131,6 +125,7 @@ function HeaderContainer(props: Props): JSX.Element {
const menu = (
<Menu className='cvat-header-menu' mode='vertical'>
<Menu.Item
title={`Press ${switchSettingsShortcut} to switch`}
onClick={
(): void => props.history.push('/settings')
}

6
cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx
Unescape Escape View File

@ -2,6 +2,7 @@
//
// SPDX-License-Identifier: MIT
import { ExtendedKeyMapOptions } 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: Record<string, ExtendedKeyMapOptions>;
}
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,
};
}

16
cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
Unescape Escape View File

@ -2,10 +2,10 @@
//
// SPDX-License-Identifier: MIT
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux';
import { Canvas } from 'cvat-canvas';
import {
mergeObjects,
groupObjects,
@ -16,16 +16,14 @@ 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: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
}
interface DispatchToProps {
@ -51,12 +49,18 @@ function mapStateToProps(state: CombinedState): StateToProps {
rotateAll,
},
},
shortcuts: {
keyMap,
normalizedKeyMap,
},
} = state;
return {
rotateAll,
canvasInstance,
activeControl,
normalizedKeyMap,
keyMap,
};
}

18
cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -6,15 +6,8 @@ import React from 'react';
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';
@ -33,6 +26,7 @@ interface DispatchToProps {
}
interface StateToProps {
normalizedKeyMap: Record<string, string>;
canvasInstance: Canvas;
shapeType: ShapeType;
labels: any[];
@ -62,12 +56,16 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
labels,
},
},
shortcuts: {
normalizedKeyMap,
},
} = state;
return {
...own,
canvasInstance,
labels,
normalizedKeyMap,
};
}
@ -164,6 +162,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
} = this.state;
const {
normalizedKeyMap,
labels,
shapeType,
} = this.props;
@ -176,6 +175,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
selectedLabeID={selectedLabelID}
numberOfPoints={numberOfPoints}
rectDrawingMethod={rectDrawingMethod}
repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE}
onChangeLabel={this.onChangeLabel}
onChangePoints={this.onChangePoints}
onChangeRectDrawingMethod={this.onChangeRectDrawingMethod}

32
cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -5,15 +5,8 @@
import React from 'react';
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';
@ -26,6 +19,7 @@ interface DispatchToProps {
}
interface StateToProps {
normalizedKeyMap: Record<string, string>;
canvasInstance: Canvas;
jobInstance: any;
labels: any[];
@ -59,6 +53,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
},
},
},
shortcuts: {
normalizedKeyMap,
},
} = state;
return {
@ -66,6 +63,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
jobInstance,
labels,
frame,
normalizedKeyMap,
};
}
@ -91,7 +89,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
});
};
private onSetup(): void {
private onSetup = (): void => {
const {
frame,
labels,
@ -114,23 +112,17 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
});
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 { normalizedKeyMap, labels } = this.props;
return (
<SetupTagPopoverComponent
labels={labels}
selectedLabeID={selectedLabelID}
repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE}
onChangeLabel={this.onChangeLabel}
onSetup={this.onSetup}
/>

15
cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
Unescape Escape View File

@ -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,
@ -47,6 +43,7 @@ interface StateToProps {
activeControl: ActiveControl;
minZLayer: number;
maxZLayer: number;
normalizedKeyMap: Record<string, string>;
}
interface DispatchToProps {
@ -95,6 +92,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
colorBy,
},
},
shortcuts: {
normalizedKeyMap,
},
} = state;
const index = states
@ -118,6 +118,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
activated: activatedStateID === own.clientID,
minZLayer,
maxZLayer,
normalizedKeyMap,
};
}
@ -411,7 +412,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
private changeAttribute = (id: number, value: string): void => {
const { objectState, jobInstance } = this.props;
jobInstance.logger.log(LogType.changeAttribute, {
id,
id,
value,
object_id: objectState.clientID,
});
@ -440,6 +441,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
activated,
colorBy,
colors,
normalizedKeyMap,
} = this.props;
const {
@ -481,6 +483,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
color={stateColor}
colors={colors}
attributes={attributes}
normalizedKeyMap={normalizedKeyMap}
labels={labels}
collapsed={collapsed}
navigateFirstKeyframe={

123
cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx
Unescape Escape View File

@ -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 {
@ -15,12 +15,7 @@ import {
copyShape as copyShapeAction,
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 +30,8 @@ interface StateToProps {
minZLayer: number;
maxZLayer: number;
annotationsFiltersHistory: string[];
keyMap: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
}
interface DispatchToProps {
@ -70,6 +67,10 @@ function mapStateToProps(state: CombinedState): StateToProps {
},
tabContentHeight: listHeight,
},
shortcuts: {
keyMap,
normalizedKeyMap,
},
} = state;
let statesHidden = true;
@ -101,6 +102,8 @@ function mapStateToProps(state: CombinedState): StateToProps {
minZLayer,
maxZLayer,
annotationsFiltersHistory,
keyMap,
normalizedKeyMap,
};
}
@ -249,97 +252,29 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
changeFrame,
maxZLayer,
minZLayer,
keyMap,
normalizedKeyMap,
} = 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,11 +408,13 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
return (
<>
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<ObjectsListComponent
{...this.props}
statesOrdering={statesOrdering}
sortedStatesID={sortedStatesID}
switchHiddenAllShortcut={normalizedKeyMap.SWITCH_ALL_HIDDEN}
switchLockAllShortcut={normalizedKeyMap.SWITCH_ALL_LOCK}
changeStatesOrdering={this.onChangeStatesOrdering}
lockAllStates={this.onLockAllStates}
unlockAllStates={this.onUnlockAllStates}

104
cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
Unescape Escape View File

@ -5,11 +5,9 @@
import React from 'react';
import copy from 'copy-to-clipboard';
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,6 +43,8 @@ interface StateToProps {
autoSave: boolean;
autoSaveInterval: number;
workspace: Workspace;
keyMap: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
}
interface DispatchToProps {
@ -94,6 +94,10 @@ function mapStateToProps(state: CombinedState): StateToProps {
autoSaveInterval,
},
},
shortcuts: {
keyMap,
normalizedKeyMap,
},
} = state;
return {
@ -112,6 +116,8 @@ function mapStateToProps(state: CombinedState): StateToProps {
autoSave,
autoSaveInterval,
workspace,
keyMap,
normalizedKeyMap,
};
}
@ -464,6 +470,8 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
canvasIsReady,
searchAnnotations,
changeWorkspace,
keyMap,
normalizedKeyMap,
} = this.props;
const preventDefault = (event: KeyboardEvent | undefined): void => {
@ -472,73 +480,18 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
}
};
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.NEXT_FRAME,
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 +561,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
return (
<>
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<AnnotationTopBarComponent
showStatistics={this.showStatistics}
onSwitchPlay={this.onSwitchPlay}
@ -634,6 +587,15 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
inputFrameRef={this.inputFrameRef}
undoAction={undoAction}
redoAction={redoAction}
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}
/>

11
cvat-ui/src/containers/header/header.tsx
Unescape Escape View File

@ -4,13 +4,9 @@
import { connect } from 'react-redux';
import {
SupportedPlugins,
CombinedState,
} from 'reducers/interfaces';
import getCore from 'cvat-core';
import HeaderComponent from 'components/header/header';
import { SupportedPlugins, CombinedState } from 'reducers/interfaces';
import { logoutAsync } from 'actions/auth-actions';
const core = getCore();
@ -29,6 +25,7 @@ interface StateToProps {
coreVersion: string;
canvasVersion: string;
uiVersion: string;
switchSettingsShortcut: string;
}
interface DispatchToProps {
@ -50,6 +47,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
server,
packageVersion,
},
shortcuts: {
normalizedKeyMap,
},
} = state;
return {
@ -66,6 +66,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
coreVersion: packageVersion.core,
canvasVersion: packageVersion.canvas,
uiVersion: packageVersion.ui,
switchSettingsShortcut: normalizedKeyMap.OPEN_SETTINGS,
};
}

4
cvat-ui/src/index.tsx
Unescape Escape View File

@ -5,6 +5,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux';
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { BrowserRouter } from 'react-router-dom';
import CVATApplication from 'components/cvat-app';
@ -48,6 +49,7 @@ interface StateToProps {
installedTFAnnotation: boolean;
notifications: NotificationsState;
user: any;
keyMap: Record<string, ExtendedKeyMapOptions>;
}
interface DispatchToProps {
@ -67,6 +69,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
const { formats } = state;
const { users } = state;
const { about } = state;
const { shortcuts } = state;
return {
userInitialized: auth.initialized,
@ -84,6 +87,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
installedTFAnnotation: plugins.list.TF_ANNOTATION,
notifications: state.notifications,
user: auth.user,
keyMap: shortcuts.keyMap,
};
}

3
cvat-ui/src/reducers/interfaces.ts
Unescape Escape View File

@ -2,6 +2,7 @@
//
// SPDX-License-Identifier: MIT
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { Canvas, RectDrawingMethod } from 'cvat-canvas';
export type StringObject = {
@ -443,6 +444,8 @@ export interface SettingsState {
export interface ShortcutsState {
visibleShortcutsHelp: boolean;
keyMap: Record<string, ExtendedKeyMapOptions>;
normalizedKeyMap: Record<string, string>;
}
export interface CombinedState {

321
cvat-ui/src/reducers/shortcuts-reducer.ts
Unescape Escape View File

@ -1,10 +1,331 @@
// Copyright (C) 2020 Intel Corporation
//
// SPDX-License-Identifier: MIT
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { boundariesActions, BoundariesActionTypes } from 'actions/boundaries-actions';
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 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',
},
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',
},
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<string, ExtendedKeyMapOptions>;
const defaultState: ShortcutsState = {
visibleShortcutsHelp: false,
keyMap: defaultKeyMap,
normalizedKeyMap: Object.keys(defaultKeyMap)
.reduce((acc: Record<string, string>, key: string) => {
const normalized = formatShortcuts(defaultKeyMap[key]);
acc[key] = normalized;
return acc;
}, {}),
};
export default (

Write Preview
Loading…
Cancel
Save