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

Controls panel titles

Browse Source
main
Boris Sekachev 6 years ago
parent 609f0bd1e4
commit 3ec2fc42ea
18 changed files with 142 additions and 209 deletions
Show Stats Download Patch File Download Diff File

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

@ -4,19 +4,11 @@
import React from 'react';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Layout from 'antd/lib/layout';
import {
Layout,
} from 'antd';
import {
ActiveControl,
Rotation,
} from 'reducers/interfaces';
import {
Canvas,
} from 'cvat-canvas';
import { ActiveControl, Rotation } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas';
import { formatShortcuts } from 'utils/shortcuts';
import RotateControl from './rotate-control';
import CursorControl from './cursor-control';
@ -149,10 +141,17 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
width={44}
>
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<CursorControl canvasInstance={canvasInstance} activeControl={activeControl} />
<CursorControl
cursorShortkey={formatShortcuts(keyMap.CANCEL)}
canvasInstance={canvasInstance}
activeControl={activeControl}
/>
<MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
<RotateControl rotateFrame={rotateFrame} />
<RotateControl
anticlockwiseShortcut={formatShortcuts(keyMap.ANTICLOCKWISE_ROTATION)}
clockwiseShortcut={formatShortcuts(keyMap.CLOCKWISE_ROTATION)}
rotateFrame={rotateFrame}
/>
<hr />
@ -186,11 +185,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
<hr />
<MergeControl
switchMergeShortcut={formatShortcuts(keyMap.SWITCH_MERGE_MODE)}
canvasInstance={canvasInstance}
activeControl={activeControl}
mergeObjects={mergeObjects}
/>
<GroupControl
switchGroupShortcut={formatShortcuts(keyMap.SWITCH_GROUP_MODE)}
resetGroupShortcut={formatShortcuts(keyMap.RESET_GROUP)}
canvasInstance={canvasInstance}
activeControl={activeControl}
groupObjects={groupObjects}

27
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 Tooltop 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'>
<Tooltop title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon
component={CursorIcon}
className={activeControl === ActiveControl.CURSOR
@ -44,7 +35,7 @@ function CursorControl(props: Props): JSX.Element {
: undefined
}
/>
</Tooltip>
</Tooltop>
);
}

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

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

@ -3,20 +3,15 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux';
import { RadioChangeEvent } from 'antd/lib/radio';
import {
CombinedState,
ShapeType,
ObjectType,
} from 'reducers/interfaces';
import {
rememberObject,
} from 'actions/annotation-actions';
import { CombinedState, ShapeType, ObjectType } from 'reducers/interfaces';
import { rememberObject } from 'actions/annotation-actions';
import { Canvas, RectDrawingMethod } from 'cvat-canvas';
import DrawShapePopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
import { formatShortcuts } from 'utils/shortcuts';
interface OwnProps {
shapeType: ShapeType;
@ -33,6 +28,7 @@ interface DispatchToProps {
}
interface StateToProps {
keyMap: Record<string, ExtendedKeyMapOptions>;
canvasInstance: Canvas;
shapeType: ShapeType;
labels: any[];
@ -62,12 +58,16 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
labels,
},
},
shortcuts: {
keyMap,
},
} = state;
return {
...own,
canvasInstance,
labels,
keyMap,
};
}
@ -164,6 +164,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
} = this.state;
const {
keyMap,
labels,
shapeType,
} = this.props;
@ -176,6 +177,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
selectedLabeID={selectedLabelID}
numberOfPoints={numberOfPoints}
rectDrawingMethod={rectDrawingMethod}
repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
onChangeLabel={this.onChangeLabel}
onChangePoints={this.onChangePoints}
onChangeRectDrawingMethod={this.onChangeRectDrawingMethod}

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

@ -3,20 +3,15 @@
// SPDX-License-Identifier: MIT
import React from 'react';
import { ExtendedKeyMapOptions } from 'react-hotkeys';
import { connect } from 'react-redux';
import {
CombinedState,
ObjectType,
} from 'reducers/interfaces';
import {
createAnnotationsAsync,
rememberObject,
} from 'actions/annotation-actions';
import { CombinedState, ObjectType } from 'reducers/interfaces';
import { createAnnotationsAsync, rememberObject } from 'actions/annotation-actions';
import SetupTagPopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
import { Canvas } from 'cvat-canvas';
import { formatShortcuts } from 'utils/shortcuts';
import getCore from 'cvat-core';
const cvat = getCore();
@ -26,6 +21,7 @@ interface DispatchToProps {
}
interface StateToProps {
keyMap: Record<string, ExtendedKeyMapOptions>;
canvasInstance: Canvas;
jobInstance: any;
labels: any[];
@ -59,6 +55,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
},
},
},
shortcuts: {
keyMap,
},
} = state;
return {
@ -66,6 +65,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
jobInstance,
labels,
frame,
keyMap,
};
}
@ -91,7 +91,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
});
};
private onSetup(): void {
private onSetup = (): void => {
const {
frame,
labels,
@ -114,23 +114,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 { keyMap, labels } = this.props;
return (
<SetupTagPopoverComponent
labels={labels}
selectedLabeID={selectedLabelID}
repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
onChangeLabel={this.onChangeLabel}
onSetup={this.onSetup}
/>

Write Preview
Loading…
Cancel
Save