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

Titles for objects in side menu

Browse Source
main
Boris Sekachev 6 years ago
parent ece8a7e18b
commit 52b34887ae
13 changed files with 242 additions and 134 deletions
Show Stats Download Patch File Download Diff File

4
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 // SPDX-License-Identifier: MIT
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Action } from 'redux'; import { Action } from 'redux';
import { ThunkDispatch } from 'redux-thunk'; import { ThunkDispatch } from 'redux-thunk';
@ -32,7 +32,7 @@ interface StateToProps {
states: any[]; states: any[];
labels: any[]; labels: any[];
jobInstance: any; jobInstance: any;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Tooltip from 'antd/lib/tooltip'; import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon'; import Icon from 'antd/lib/icon';
@ -59,7 +59,7 @@ interface Props {
contextType: ContextMenuType; contextType: ContextMenuType;
aamZoomMargin: number; aamZoomMargin: number;
workspace: Workspace; workspace: Workspace;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
onSetupCanvas: () => void; onSetupCanvas: () => void;
onDragCanvas: (enabled: boolean) => void; onDragCanvas: (enabled: boolean) => void;
onZoomCanvas: (enabled: boolean) => void; onZoomCanvas: (enabled: boolean) => void;

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import { import {
Layout, Layout,
@ -35,7 +35,7 @@ import SplitControl from './split-control';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
activeControl: ActiveControl; activeControl: ActiveControl;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
mergeObjects(enabled: boolean): void; mergeObjects(enabled: boolean): void;
groupObjects(enabled: boolean): void; groupObjects(enabled: boolean): void;

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

@ -3,7 +3,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon'; import Icon from 'antd/lib/icon';
import Select from 'antd/lib/select'; import Select from 'antd/lib/select';
@ -18,6 +18,7 @@ import Button from 'antd/lib/button';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text'; 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'; import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
@ -33,11 +34,18 @@ import {
import { ObjectType, ShapeType } from 'reducers/interfaces'; import { ObjectType, ShapeType } from 'reducers/interfaces';
import { clamp } from 'utils/math'; import { clamp } from 'utils/math';
import { formatShortcuts } from 'utils/shortcuts';
function ItemMenu( function ItemMenu(
serverID: number | undefined, serverID: number | undefined,
locked: boolean, locked: boolean,
objectType: ObjectType, objectType: ObjectType,
copyShortcut: string,
pasteShortcut: string,
propagateShortcut: string,
toBackgroundShortcut: string,
toForegroundShortcut: string,
removeShortcut: string,
copy: (() => void), copy: (() => void),
remove: (() => void), remove: (() => void),
propagate: (() => void), propagate: (() => void),
@ -53,51 +61,61 @@ function ItemMenu(
</Button> </Button>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<Button type='link' icon='copy' onClick={copy}> <Tooltip title={`${copyShortcut} and ${pasteShortcut}`}>
Make a copy <Button type='link' icon='copy' onClick={copy}>
</Button> Make a copy
</Button>
</Tooltip>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<Button type='link' icon='block' onClick={propagate}> <Tooltip title={`${propagateShortcut}`}>
Propagate <Button type='link' icon='block' onClick={propagate}>
</Button> Propagate
</Button>
</Tooltip>
</Menu.Item> </Menu.Item>
{ objectType !== ObjectType.TAG && ( { objectType !== ObjectType.TAG && (
<> <>
<Menu.Item> <Menu.Item>
<Button type='link' onClick={toBackground}> <Tooltip title={`${toBackgroundShortcut}`}>
<Icon component={BackgroundIcon} /> <Button type='link' onClick={toBackground}>
To background <Icon component={BackgroundIcon} />
</Button> To background
</Button>
</Tooltip>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<Button type='link' onClick={toForeground}> <Tooltip title={`${toForegroundShortcut}`}>
<Icon component={ForegroundIcon} /> <Button type='link' onClick={toForeground}>
To foreground <Icon component={ForegroundIcon} />
</Button> To foreground
</Button>
</Tooltip>
</Menu.Item> </Menu.Item>
</> </>
)} )}
<Menu.Item> <Menu.Item>
<Button <Tooltip title={`${removeShortcut}`}>
type='link' <Button
icon='delete' type='link'
onClick={(): void => { icon='delete'
if (locked) { onClick={(): void => {
Modal.confirm({ if (locked) {
title: 'Object is locked', Modal.confirm({
content: 'Are you sure you want to remove it?', title: 'Object is locked',
onOk() { content: 'Are you sure you want to remove it?',
remove(); onOk() {
}, remove();
}); },
} else { });
remove(); } else {
} remove();
}} }
> }}
Remove >
</Button> Remove
</Button>
</Tooltip>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
); );
@ -111,6 +129,12 @@ interface ItemTopComponentProps {
objectType: ObjectType; objectType: ObjectType;
type: string; type: string;
locked: boolean; locked: boolean;
copyShortcut: string;
pasteShortcut: string;
propagateShortcut: string;
toBackgroundShortcut: string;
toForegroundShortcut: string;
removeShortcut: string;
changeLabel(labelID: string): void; changeLabel(labelID: string): void;
copy(): void; copy(): void;
remove(): void; remove(): void;
@ -129,6 +153,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
objectType, objectType,
type, type,
locked, locked,
copyShortcut,
pasteShortcut,
propagateShortcut,
toBackgroundShortcut,
toForegroundShortcut,
removeShortcut,
changeLabel, changeLabel,
copy, copy,
remove, remove,
@ -146,13 +176,15 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
<Text type='secondary' style={{ fontSize: 10 }}>{type}</Text> <Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Select size='small' value={`${labelID}`} onChange={changeLabel}> <Tooltip title='Change current label'>
{ labels.map((label: any): JSX.Element => ( <Select size='small' value={`${labelID}`} onChange={changeLabel}>
<Select.Option key={label.id} value={`${label.id}`}> { labels.map((label: any): JSX.Element => (
{label.name} <Select.Option key={label.id} value={`${label.id}`}>
</Select.Option> {label.name}
))} </Select.Option>
</Select> ))}
</Select>
</Tooltip>
</Col> </Col>
<Col span={2}> <Col span={2}>
<Dropdown <Dropdown
@ -161,6 +193,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
serverID, serverID,
locked, locked,
objectType, objectType,
copyShortcut,
pasteShortcut,
propagateShortcut,
toBackgroundShortcut,
toForegroundShortcut,
removeShortcut,
copy, copy,
remove, remove,
propagate, propagate,
@ -187,6 +225,13 @@ interface ItemButtonsComponentProps {
pinned: boolean; pinned: boolean;
hidden: boolean; hidden: boolean;
keyframe: boolean | undefined; keyframe: boolean | undefined;
switchOccludedShortcut: string;
switchOutsideShortcut: string;
switchLockShortcut: string;
switchHiddenShortcut: string;
switchKeyFrameShortcut: string;
nextKeyFrameShortcut: string;
prevKeyFrameShortcut: string;
navigateFirstKeyframe: null | (() => void); navigateFirstKeyframe: null | (() => void);
navigatePrevKeyframe: null | (() => void); navigatePrevKeyframe: null | (() => void);
@ -217,6 +262,13 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
pinned, pinned,
hidden, hidden,
keyframe, keyframe,
switchOccludedShortcut,
switchOutsideShortcut,
switchLockShortcut,
switchHiddenShortcut,
switchKeyFrameShortcut,
nextKeyFrameShortcut,
prevKeyFrameShortcut,
navigateFirstKeyframe, navigateFirstKeyframe,
navigatePrevKeyframe, navigatePrevKeyframe,
@ -249,12 +301,26 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
</Col> </Col>
<Col> <Col>
{ navigatePrevKeyframe { 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' }} />} : <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
</Col> </Col>
<Col> <Col>
{ navigateNextKeyframe { 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' }} />} : <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
</Col> </Col>
<Col> <Col>
@ -265,29 +331,39 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
</Row> </Row>
<Row type='flex' justify='space-around'> <Row type='flex' justify='space-around'>
<Col> <Col>
{ outside <Tooltip title={`Switch outside property ${switchOutsideShortcut}`}>
? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} /> { outside
: <Icon type='select' onClick={setOutside} />} ? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} />
: <Icon type='select' onClick={setOutside} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ locked <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
? <Icon type='lock' onClick={unlock} /> { locked
: <Icon type='unlock' onClick={lock} />} ? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ occluded <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
? <Icon type='team' onClick={unsetOccluded} /> { occluded
: <Icon type='user' onClick={setOccluded} />} ? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ hidden <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
? <Icon type='eye-invisible' onClick={show} /> { hidden
: <Icon type='eye' onClick={hide} />} ? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ keyframe <Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
? <Icon type='star' theme='filled' onClick={unsetKeyframe} /> { keyframe
: <Icon type='star' onClick={setKeyframe} />} ? <Icon type='star' theme='filled' onClick={unsetKeyframe} />
: <Icon type='star' onClick={setKeyframe} />}
</Tooltip>
</Col> </Col>
{ {
shapeType !== ShapeType.POINTS && ( shapeType !== ShapeType.POINTS && (
@ -310,9 +386,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
<Col span={20} style={{ textAlign: 'center' }}> <Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'> <Row type='flex' justify='space-around'>
<Col> <Col>
{ locked <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
? <Icon type='lock' onClick={unlock} /> { locked
: <Icon type='unlock' onClick={lock} />} ? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col> </Col>
</Row> </Row>
</Col> </Col>
@ -325,19 +403,25 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
<Col span={20} style={{ textAlign: 'center' }}> <Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'> <Row type='flex' justify='space-around'>
<Col> <Col>
{ locked <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
? <Icon type='lock' onClick={unlock} /> { locked
: <Icon type='unlock' onClick={lock} />} ? <Icon type='lock' onClick={unlock} />
: <Icon type='unlock' onClick={lock} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ occluded <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
? <Icon type='team' onClick={unsetOccluded} /> { occluded
: <Icon type='user' onClick={setOccluded} />} ? <Icon type='team' onClick={unsetOccluded} />
: <Icon type='user' onClick={setOccluded} />}
</Tooltip>
</Col> </Col>
<Col> <Col>
{ hidden <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
? <Icon type='eye-invisible' onClick={show} /> { hidden
: <Icon type='eye' onClick={hide} />} ? <Icon type='eye-invisible' onClick={show} />
: <Icon type='eye' onClick={hide} />}
</Tooltip>
</Col> </Col>
{ {
shapeType !== ShapeType.POINTS && ( shapeType !== ShapeType.POINTS && (
@ -587,6 +671,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme
const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame); const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame);
interface Props { interface Props {
keyMap: Record<string, ExtendedKeyMapOptions>;
activated: boolean; activated: boolean;
objectType: ObjectType; objectType: ObjectType;
shapeType: ShapeType; shapeType: ShapeType;
@ -653,6 +738,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean {
&& nextProps.collapsed === prevProps.collapsed && nextProps.collapsed === prevProps.collapsed
&& nextProps.labels === prevProps.labels && nextProps.labels === prevProps.labels
&& nextProps.attributes === prevProps.attributes && nextProps.attributes === prevProps.attributes
&& nextProps.keyMap === prevProps.keyMap
&& nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe && nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe
&& nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe && nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe
&& nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe && nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe
@ -681,6 +767,7 @@ function ObjectItemComponent(props: Props): JSX.Element {
attributes, attributes,
labels, labels,
collapsed, collapsed,
keyMap,
navigateFirstKeyframe, navigateFirstKeyframe,
navigatePrevKeyframe, navigatePrevKeyframe,
navigateNextKeyframe, navigateNextKeyframe,
@ -748,6 +835,12 @@ function ObjectItemComponent(props: Props): JSX.Element {
objectType={objectType} objectType={objectType}
type={type} type={type}
locked={locked} locked={locked}
copyShortcut={formatShortcuts(keyMap.COPY_SHAPE)}
pasteShortcut={formatShortcuts(keyMap.PASTE_SHAPE)}
propagateShortcut={formatShortcuts(keyMap.PROPAGATE_OBJECT)}
toBackgroundShortcut={formatShortcuts(keyMap.TO_BACKGROUND)}
toForegroundShortcut={formatShortcuts(keyMap.TO_FOREGROUND)}
removeShortcut={formatShortcuts(keyMap.DELETE_OBJECT)}
changeLabel={changeLabel} changeLabel={changeLabel}
copy={copy} copy={copy}
remove={remove} remove={remove}
@ -765,6 +858,13 @@ function ObjectItemComponent(props: Props): JSX.Element {
pinned={pinned} pinned={pinned}
hidden={hidden} hidden={hidden}
keyframe={keyframe} keyframe={keyframe}
switchOccludedShortcut={formatShortcuts(keyMap.SWITCH_OCCLUDED)}
switchOutsideShortcut={formatShortcuts(keyMap.SWITCH_OUTSIDE)}
switchLockShortcut={formatShortcuts(keyMap.SWITCH_LOCK)}
switchHiddenShortcut={formatShortcuts(keyMap.SWITCH_HIDDEN)}
switchKeyFrameShortcut={formatShortcuts(keyMap.SWITCH_KEYFRAME)}
nextKeyFrameShortcut={formatShortcuts(keyMap.NEXT_KEY_FRAME)}
prevKeyFrameShortcut={formatShortcuts(keyMap.PREV_KEY_FRAME)}
navigateFirstKeyframe={navigateFirstKeyframe} navigateFirstKeyframe={navigateFirstKeyframe}
navigatePrevKeyframe={navigatePrevKeyframe} navigatePrevKeyframe={navigatePrevKeyframe}
navigateNextKeyframe={navigateNextKeyframe} navigateNextKeyframe={navigateNextKeyframe}

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

@ -7,7 +7,7 @@ import '../styles.scss';
import React from 'react'; import React from 'react';
import { Switch, Route, Redirect } from 'react-router'; import { Switch, Route, Redirect } from 'react-router';
import { withRouter, RouteComponentProps } from 'react-router-dom'; 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 Spin from 'antd/lib/spin';
import Layout from 'antd/lib/layout'; import Layout from 'antd/lib/layout';
import notification from 'antd/lib/notification'; import notification from 'antd/lib/notification';
@ -37,7 +37,7 @@ interface CVATAppProps {
resetErrors: () => void; resetErrors: () => void;
resetMessages: () => void; resetMessages: () => void;
switchShortcutsDialog: () => void; switchShortcutsDialog: () => void;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
userInitialized: boolean; userInitialized: boolean;
userFetching: boolean; userFetching: boolean;
pluginsInitialized: boolean; pluginsInitialized: boolean;

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

@ -2,7 +2,7 @@
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import { KeyMap } from 'react-hotkeys'; import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import CanvasWrapperComponent from 'components/annotation-page/standard-workspace/canvas-wrapper'; import CanvasWrapperComponent from 'components/annotation-page/standard-workspace/canvas-wrapper';
@ -79,7 +79,7 @@ interface StateToProps {
curZLayer: number; curZLayer: number;
contextVisible: boolean; contextVisible: boolean;
contextType: ContextMenuType; contextType: ContextMenuType;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

@ -2,7 +2,7 @@
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import { KeyMap } from 'react-hotkeys'; import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Canvas } from 'cvat-canvas'; import { Canvas } from 'cvat-canvas';
@ -22,7 +22,7 @@ interface StateToProps {
canvasInstance: Canvas; canvasInstance: Canvas;
rotateAll: boolean; rotateAll: boolean;
activeControl: ActiveControl; activeControl: ActiveControl;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

@ -5,6 +5,7 @@
import React from 'react'; import React from 'react';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { LogType } from 'cvat-logger'; import { LogType } from 'cvat-logger';
import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces'; import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces';
@ -43,6 +44,7 @@ interface StateToProps {
activeControl: ActiveControl; activeControl: ActiveControl;
minZLayer: number; minZLayer: number;
maxZLayer: number; maxZLayer: number;
keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {
@ -91,6 +93,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
colorBy, colorBy,
}, },
}, },
shortcuts: {
keyMap,
},
} = state; } = state;
const index = states const index = states
@ -114,6 +119,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
activated: activatedStateID === own.clientID, activated: activatedStateID === own.clientID,
minZLayer, minZLayer,
maxZLayer, maxZLayer,
keyMap,
}; };
} }
@ -436,6 +442,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
activated, activated,
colorBy, colorBy,
colors, colors,
keyMap,
} = this.props; } = this.props;
const { const {
@ -477,6 +484,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
color={stateColor} color={stateColor}
colors={colors} colors={colors}
attributes={attributes} attributes={attributes}
keyMap={keyMap}
labels={labels} labels={labels}
collapsed={collapsed} collapsed={collapsed}
navigateFirstKeyframe={ navigateFirstKeyframe={

4
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 React from 'react';
import { connect } from 'react-redux'; 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 ObjectsListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-list';
import { import {
@ -31,7 +31,7 @@ interface StateToProps {
minZLayer: number; minZLayer: number;
maxZLayer: number; maxZLayer: number;
annotationsFiltersHistory: string[]; annotationsFiltersHistory: string[];
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { RouteComponentProps } from 'react-router-dom'; 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 InputNumber from 'antd/lib/input-number';
import { SliderValue } from 'antd/lib/slider'; import { SliderValue } from 'antd/lib/slider';
@ -45,7 +45,7 @@ interface StateToProps {
autoSave: boolean; autoSave: boolean;
autoSaveInterval: number; autoSaveInterval: number;
workspace: Workspace; workspace: Workspace;
keyMap: KeyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

@ -5,7 +5,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux'; import { connect, Provider } from 'react-redux';
import { KeyMap } from 'react-hotkeys'; import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import CVATApplication from 'components/cvat-app'; import CVATApplication from 'components/cvat-app';
@ -49,7 +49,7 @@ interface StateToProps {
installedTFAnnotation: boolean; installedTFAnnotation: boolean;
notifications: NotificationsState; notifications: NotificationsState;
user: any; user: any;
keyMap: keyMap; keyMap: Record<string, ExtendedKeyMapOptions>;
} }
interface DispatchToProps { interface DispatchToProps {

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

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

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

@ -2,7 +2,7 @@
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import { KeyMap } from 'react-hotkeys'; import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { boundariesActions, BoundariesActionTypes } from 'actions/boundaries-actions'; import { boundariesActions, BoundariesActionTypes } from 'actions/boundaries-actions';
import { AuthActions, AuthActionTypes } from 'actions/auth-actions'; import { AuthActions, AuthActionTypes } from 'actions/auth-actions';
@ -16,38 +16,38 @@ const defaultState: ShortcutsState = {
SWITCH_SHORTCUTS: { SWITCH_SHORTCUTS: {
name: 'Show shortcuts', name: 'Show shortcuts',
description: 'Open/hide the list of available shortcuts', description: 'Open/hide the list of available shortcuts',
sequence: 'f1', sequences: ['f1'],
action: 'keydown', action: 'keydown',
}, },
OPEN_SETTINGS: { OPEN_SETTINGS: {
name: 'Open settings', name: 'Open settings',
description: 'Go to the settings page or go back', description: 'Go to the settings page or go back',
sequence: 'f2', sequences: ['f2'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_ALL_LOCK: { SWITCH_ALL_LOCK: {
name: 'Lock/unlock all objects', name: 'Lock/unlock all objects',
description: 'Change locked state for all objects in the side bar', description: 'Change locked state for all objects in the side bar',
sequence: 't+l', sequences: ['t+l'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_LOCK: { SWITCH_LOCK: {
name: 'Lock/unlock an object', name: 'Lock/unlock an object',
description: 'Change locked state for an active object', description: 'Change locked state for an active object',
sequence: 'l', sequences: ['l'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_ALL_HIDDEN: { SWITCH_ALL_HIDDEN: {
name: 'Hide/show all objects', name: 'Hide/show all objects',
description: 'Change hidden state for objects in the side bar', description: 'Change hidden state for objects in the side bar',
sequence: 't+h', sequences: ['t+h'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_HIDDEN: { SWITCH_HIDDEN: {
name: 'Hide/show an object', name: 'Hide/show an object',
description: 'Change hidden state for an active object', description: 'Change hidden state for an active object',
sequence: 'h', sequences: ['h'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_OCCLUDED: { SWITCH_OCCLUDED: {
@ -59,13 +59,13 @@ const defaultState: ShortcutsState = {
SWITCH_KEYFRAME: { SWITCH_KEYFRAME: {
name: 'Switch keyframe', name: 'Switch keyframe',
description: 'Change keyframe property for an active track', description: 'Change keyframe property for an active track',
sequence: 'k', sequences: ['k'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_OUTSIDE: { SWITCH_OUTSIDE: {
name: 'Switch outside', name: 'Switch outside',
description: 'Change outside property for an active track', description: 'Change outside property for an active track',
sequence: 'o', sequences: ['o'],
action: 'keydown', action: 'keydown',
}, },
DELETE_OBJECT: { DELETE_OBJECT: {
@ -89,167 +89,167 @@ const defaultState: ShortcutsState = {
COPY_SHAPE: { COPY_SHAPE: {
name: 'Copy shape', name: 'Copy shape',
description: 'Copy shape to CVAT internal clipboard', description: 'Copy shape to CVAT internal clipboard',
sequence: 'ctrl+c', sequences: ['ctrl+c'],
action: 'keydown', action: 'keydown',
}, },
PROPAGATE_OBJECT: { PROPAGATE_OBJECT: {
name: 'Propagate object', name: 'Propagate object',
description: 'Make a copy of the object on the following frames', description: 'Make a copy of the object on the following frames',
sequence: 'ctrl+b', sequences: ['ctrl+b'],
action: 'keydown', action: 'keydown',
}, },
NEXT_KEY_FRAME: { NEXT_KEY_FRAME: {
name: 'Next keyframe', name: 'Next keyframe',
description: 'Go to the next keyframe of an active track', description: 'Go to the next keyframe of an active track',
sequence: 'r', sequences: ['r'],
action: 'keydown', action: 'keydown',
}, },
PREV_KEY_FRAME: { PREV_KEY_FRAME: {
name: 'Previous keyframe', name: 'Previous keyframe',
description: 'Go to the previous keyframe of an active track', description: 'Go to the previous keyframe of an active track',
sequence: 'e', sequences: ['e'],
action: 'keydown', action: 'keydown',
}, },
NEXT_ATTRIBUTE: { NEXT_ATTRIBUTE: {
name: 'Next attribute', name: 'Next attribute',
description: 'Go to the next attribute', description: 'Go to the next attribute',
sequence: 'ArrowDown', sequences: ['ArrowDown'],
action: 'keydown', action: 'keydown',
}, },
PREVIOUS_ATTRIBUTE: { PREVIOUS_ATTRIBUTE: {
name: 'Previous attribute', name: 'Previous attribute',
description: 'Go to the previous attribute', description: 'Go to the previous attribute',
sequence: 'ArrowUp', sequences: ['ArrowUp'],
action: 'keydown', action: 'keydown',
}, },
NEXT_OBJECT: { NEXT_OBJECT: {
name: 'Next object', name: 'Next object',
description: 'Go to the next object', description: 'Go to the next object',
sequence: 'Tab', sequences: ['Tab'],
action: 'keydown', action: 'keydown',
}, },
PREVIOUS_OBJECT: { PREVIOUS_OBJECT: {
name: 'Previous object', name: 'Previous object',
description: 'Go to the previous object', description: 'Go to the previous object',
sequence: 'Shift+Tab', sequences: ['Shift+Tab'],
action: 'keydown', action: 'keydown',
}, },
INCREASE_BRIGHTNESS: { INCREASE_BRIGHTNESS: {
name: 'Brightness+', name: 'Brightness+',
description: 'Increase brightness level for the image', description: 'Increase brightness level for the image',
sequence: 'shift+b+=', sequences: ['shift+b+='],
action: 'keypress', action: 'keypress',
}, },
DECREASE_BRIGHTNESS: { DECREASE_BRIGHTNESS: {
name: 'Brightness-', name: 'Brightness-',
description: 'Decrease brightness level for the image', description: 'Decrease brightness level for the image',
sequence: 'shift+b+-', sequences: ['shift+b+-'],
action: 'keydown', action: 'keydown',
}, },
INCREASE_CONTRAST: { INCREASE_CONTRAST: {
name: 'Contrast+', name: 'Contrast+',
description: 'Increase contrast level for the image', description: 'Increase contrast level for the image',
sequence: 'shift+c+=', sequences: ['shift+c+='],
action: 'keydown', action: 'keydown',
}, },
DECREASE_CONTRAST: { DECREASE_CONTRAST: {
name: 'Contrast-', name: 'Contrast-',
description: 'Decrease contrast level for the image', description: 'Decrease contrast level for the image',
sequence: 'shift+c+-', sequences: ['shift+c+-'],
action: 'keydown', action: 'keydown',
}, },
INCREASE_SATURATION: { INCREASE_SATURATION: {
name: 'Saturation+', name: 'Saturation+',
description: 'Increase saturation level for the image', description: 'Increase saturation level for the image',
sequence: 'shift+s+=', sequences: ['shift+s+='],
action: 'keydown', action: 'keydown',
}, },
DECREASE_SATURATION: { DECREASE_SATURATION: {
name: 'Saturation-', name: 'Saturation-',
description: 'Increase contrast level for the image', description: 'Increase contrast level for the image',
sequence: 'shift+s+-', sequences: ['shift+s+-'],
action: 'keydown', action: 'keydown',
}, },
INCREASE_GRID_OPACITY: { INCREASE_GRID_OPACITY: {
name: 'Grid opacity+', name: 'Grid opacity+',
description: 'Make the grid more visible', description: 'Make the grid more visible',
sequence: 'shift+g+=', sequences: ['shift+g+='],
action: 'keydown', action: 'keydown',
}, },
DECREASE_GRID_OPACITY: { DECREASE_GRID_OPACITY: {
name: 'Grid opacity-', name: 'Grid opacity-',
description: 'Make the grid less visible', description: 'Make the grid less visible',
sequences: 'shift+g+-', sequences: ['shift+g+-'],
action: 'keydown', action: 'keydown',
}, },
CHANGE_GRID_COLOR: { CHANGE_GRID_COLOR: {
name: 'Grid color', name: 'Grid color',
description: 'Set another color for the image grid', description: 'Set another color for the image grid',
sequence: 'shift+g+enter', sequences: ['shift+g+enter'],
action: 'keydown', action: 'keydown',
}, },
PASTE_SHAPE: { PASTE_SHAPE: {
name: 'Paste shape', name: 'Paste shape',
description: 'Paste a shape from internal CVAT clipboard', description: 'Paste a shape from internal CVAT clipboard',
sequence: 'ctrl+v', sequences: ['ctrl+v'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_DRAW_MODE: { SWITCH_DRAW_MODE: {
name: 'Draw mode', name: 'Draw mode',
description: 'Repeat the latest procedure of drawing with the same parameters', description: 'Repeat the latest procedure of drawing with the same parameters',
sequence: 'n', sequences: ['n'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_MERGE_MODE: { SWITCH_MERGE_MODE: {
name: 'Merge mode', name: 'Merge mode',
description: 'Activate or deactivate mode to merging shapes', description: 'Activate or deactivate mode to merging shapes',
sequence: 'm', sequences: ['m'],
action: 'keydown', action: 'keydown',
}, },
SWITCH_GROUP_MODE: { SWITCH_GROUP_MODE: {
name: 'Group mode', name: 'Group mode',
description: 'Activate or deactivate mode to grouping shapes', description: 'Activate or deactivate mode to grouping shapes',
sequence: 'g', sequences: ['g'],
action: 'keydown', action: 'keydown',
}, },
RESET_GROUP: { RESET_GROUP: {
name: 'Reset group', name: 'Reset group',
description: 'Reset group for selected shapes (in group mode)', description: 'Reset group for selected shapes (in group mode)',
sequence: 'shift+g', sequences: ['shift+g'],
action: 'keyup', action: 'keyup',
}, },
CANCEL: { CANCEL: {
name: 'Cancel', name: 'Cancel',
description: 'Cancel any active canvas mode', description: 'Cancel any active canvas mode',
sequence: 'esc', sequences: ['esc'],
action: 'keydown', action: 'keydown',
}, },
CLOCKWISE_ROTATION: { CLOCKWISE_ROTATION: {
name: 'Rotate clockwise', name: 'Rotate clockwise',
description: 'Change image angle (add 90 degrees)', description: 'Change image angle (add 90 degrees)',
sequence: 'ctrl+r', sequences: ['ctrl+r'],
action: 'keydown', action: 'keydown',
}, },
ANTICLOCKWISE_ROTATION: { ANTICLOCKWISE_ROTATION: {
name: 'Rotate anticlockwise', name: 'Rotate anticlockwise',
description: 'Change image angle (substract 90 degrees)', description: 'Change image angle (substract 90 degrees)',
sequence: 'ctrl+shift+r', sequences: ['ctrl+shift+r'],
action: 'keydown', action: 'keydown',
}, },
SAVE_JOB: { SAVE_JOB: {
name: 'Save the job', name: 'Save the job',
description: 'Send all changes of annotations to the server', description: 'Send all changes of annotations to the server',
sequence: 'ctrl+s', sequences: ['ctrl+s'],
action: 'keydown', action: 'keydown',
}, },
UNDO: { UNDO: {
name: 'Undo action', name: 'Undo action',
description: 'Cancel the latest action related with objects', description: 'Cancel the latest action related with objects',
sequence: 'ctrl+z', sequences: ['ctrl+z'],
action: 'keydown', action: 'keydown',
}, },
REDO: { REDO: {
@ -261,43 +261,43 @@ const defaultState: ShortcutsState = {
NEXT_FRAME: { NEXT_FRAME: {
name: 'Next frame', name: 'Next frame',
description: 'Go to the next frame', description: 'Go to the next frame',
sequence: 'f', sequences: ['f'],
action: 'keydown', action: 'keydown',
}, },
PREV_FRAME: { PREV_FRAME: {
name: 'Previous frame', name: 'Previous frame',
description: 'Go to the previous frame', description: 'Go to the previous frame',
sequence: 'd', sequences: ['d'],
action: 'keydown', action: 'keydown',
}, },
FORWARD_FRAME: { FORWARD_FRAME: {
name: 'Forward frame', name: 'Forward frame',
description: 'Go forward with a step', description: 'Go forward with a step',
sequence: 'v', sequences: ['v'],
action: 'keydown', action: 'keydown',
}, },
BACKWARD_FRAME: { BACKWARD_FRAME: {
name: 'Backward frame', name: 'Backward frame',
description: 'Go backward with a step', description: 'Go backward with a step',
sequence: 'c', sequences: ['c'],
action: 'keydown', action: 'keydown',
}, },
SEARCH_FORWARD: { SEARCH_FORWARD: {
name: 'Search forward', name: 'Search forward',
description: 'Search the next frame that satisfies to the filters', description: 'Search the next frame that satisfies to the filters',
sequence: 'right', sequences: ['right'],
action: 'keydown', action: 'keydown',
}, },
SEARCH_BACKWARD: { SEARCH_BACKWARD: {
name: 'Search backward', name: 'Search backward',
description: 'Search the previous frame that satisfies to the filters', description: 'Search the previous frame that satisfies to the filters',
sequence: 'left', sequences: ['left'],
action: 'keydown', action: 'keydown',
}, },
PLAY_PAUSE: { PLAY_PAUSE: {
name: 'Play/pause', name: 'Play/pause',
description: 'Start/stop automatic changing frames', description: 'Start/stop automatic changing frames',
sequence: 'space', sequences: ['space'],
action: 'keydown', action: 'keydown',
}, },
FOCUS_INPUT_FRAME: { FOCUS_INPUT_FRAME: {
@ -306,7 +306,7 @@ const defaultState: ShortcutsState = {
sequences: ['`', '~'], sequences: ['`', '~'],
action: 'keydown', action: 'keydown',
}, },
} as any as KeyMap, } as any as Record<string, ExtendedKeyMapOptions>,
}; };
export default ( export default (

Write Preview
Loading…
Cancel
Save