React UI: Added annotation menus, added shape context menu, added some confirmations before dangerous actions (#1123)
* Annotation menu, modified tasks menu * Removed extra styles * Context menu using side panel * Mousewheel on draw * Added more cursor icons * Do not check .svg & .scss by eslintmain
Boris Sekachev
6 years ago
committed by
GitHub
parent
42614c28a1
commit
939de868a9
@ -0,0 +1,51 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
Icon,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
function isDefaultFormat(dumperName: string, taskMode: string): boolean {
|
||||||
|
return (dumperName === 'CVAT XML 1.1 for videos' && taskMode === 'interpolation')
|
||||||
|
|| (dumperName === 'CVAT XML 1.1 for images' && taskMode === 'annotation');
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
taskMode: string;
|
||||||
|
menuKey: string;
|
||||||
|
dumpers: string[];
|
||||||
|
dumpActivities: string[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DumpSubmenu(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
taskMode,
|
||||||
|
menuKey,
|
||||||
|
dumpers,
|
||||||
|
dumpActivities,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu.SubMenu key={menuKey} title='Dump annotations'>
|
||||||
|
{
|
||||||
|
dumpers.map((dumper: string): JSX.Element => {
|
||||||
|
const pending = (dumpActivities || []).includes(dumper);
|
||||||
|
const isDefault = isDefaultFormat(dumper, taskMode);
|
||||||
|
return (
|
||||||
|
<Menu.Item
|
||||||
|
key={dumper}
|
||||||
|
disabled={pending}
|
||||||
|
className='cvat-menu-dump-submenu-item'
|
||||||
|
>
|
||||||
|
<Icon type='download' />
|
||||||
|
<Text strong={isDefault}>{dumper}</Text>
|
||||||
|
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Menu,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
} from 'antd';
|
|
||||||
|
|
||||||
import Text from 'antd/lib/typography/Text';
|
|
||||||
|
|
||||||
interface DumperItemComponentProps {
|
|
||||||
taskInstance: any;
|
|
||||||
dumper: any;
|
|
||||||
dumpActivity: string | null;
|
|
||||||
onDumpAnnotation: (task: any, dumper: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isDefaultFormat(dumperName: string, taskMode: string): boolean {
|
|
||||||
return (dumperName === 'CVAT XML 1.1 for videos' && taskMode === 'interpolation')
|
|
||||||
|| (dumperName === 'CVAT XML 1.1 for images' && taskMode === 'annotation');
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DumperItemComponent(props: DumperItemComponentProps): JSX.Element {
|
|
||||||
const {
|
|
||||||
taskInstance,
|
|
||||||
dumpActivity,
|
|
||||||
} = props;
|
|
||||||
const { mode } = taskInstance;
|
|
||||||
const { dumper } = props;
|
|
||||||
const pending = !!dumpActivity;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Item className='cvat-actions-menu-dump-submenu-item' key={dumper.name}>
|
|
||||||
<Button
|
|
||||||
block
|
|
||||||
type='link'
|
|
||||||
disabled={pending}
|
|
||||||
onClick={(): void => {
|
|
||||||
props.onDumpAnnotation(taskInstance, dumper);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon type='download' />
|
|
||||||
<Text strong={isDefaultFormat(dumper.name, mode)}>
|
|
||||||
{dumper.name}
|
|
||||||
</Text>
|
|
||||||
{pending && <Icon type='loading' />}
|
|
||||||
</Button>
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Menu,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
} from 'antd';
|
|
||||||
|
|
||||||
import Text from 'antd/lib/typography/Text';
|
|
||||||
|
|
||||||
interface DumperItemComponentProps {
|
|
||||||
taskInstance: any;
|
|
||||||
exporter: any;
|
|
||||||
exportActivity: string | null;
|
|
||||||
onExportDataset: (task: any, exporter: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DumperItemComponent(props: DumperItemComponentProps): JSX.Element {
|
|
||||||
const {
|
|
||||||
taskInstance,
|
|
||||||
exporter,
|
|
||||||
exportActivity,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const pending = !!exportActivity;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Item className='cvat-actions-menu-export-submenu-item' key={exporter.name}>
|
|
||||||
<Button
|
|
||||||
block
|
|
||||||
type='link'
|
|
||||||
disabled={pending}
|
|
||||||
onClick={(): void => {
|
|
||||||
props.onExportDataset(taskInstance, exporter);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon type='export' />
|
|
||||||
<Text strong={exporter.is_default}>
|
|
||||||
{exporter.name}
|
|
||||||
</Text>
|
|
||||||
{pending && <Icon type='loading' />}
|
|
||||||
</Button>
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
Icon,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
menuKey: string;
|
||||||
|
exporters: string[];
|
||||||
|
exportActivities: string[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ExportSubmenu(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
menuKey,
|
||||||
|
exporters,
|
||||||
|
exportActivities,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu.SubMenu key={menuKey} title='Export as a dataset'>
|
||||||
|
{
|
||||||
|
exporters.map((exporter: string): JSX.Element => {
|
||||||
|
const pending = (exportActivities || []).includes(exporter);
|
||||||
|
return (
|
||||||
|
<Menu.Item
|
||||||
|
key={exporter}
|
||||||
|
disabled={pending}
|
||||||
|
className='cvat-menu-export-submenu-item'
|
||||||
|
>
|
||||||
|
<Icon type='export' />
|
||||||
|
<Text>{exporter}</Text>
|
||||||
|
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
Icon,
|
||||||
|
Upload,
|
||||||
|
Button,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
menuKey: string;
|
||||||
|
loaders: string[];
|
||||||
|
loadActivity: string | null;
|
||||||
|
onFileUpload(file: File): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LoadSubmenu(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
menuKey,
|
||||||
|
loaders,
|
||||||
|
loadActivity,
|
||||||
|
onFileUpload,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu.SubMenu key={menuKey} title='Upload annotations'>
|
||||||
|
{
|
||||||
|
loaders.map((_loader: string): JSX.Element => {
|
||||||
|
const [loader, accept] = _loader.split('::');
|
||||||
|
const pending = loadActivity === loader;
|
||||||
|
return (
|
||||||
|
<Menu.Item
|
||||||
|
key={loader}
|
||||||
|
disabled={!!loadActivity}
|
||||||
|
className='cvat-menu-load-submenu-item'
|
||||||
|
>
|
||||||
|
<Upload
|
||||||
|
accept={accept}
|
||||||
|
multiple={false}
|
||||||
|
showUploadList={false}
|
||||||
|
beforeUpload={(file: File): boolean => {
|
||||||
|
onFileUpload(file);
|
||||||
|
return false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button block type='link' disabled={!!loadActivity}>
|
||||||
|
<Icon type='upload' />
|
||||||
|
<Text>{loader}</Text>
|
||||||
|
{pending && <Icon style={{ marginLeft: 10 }} type='loading' />}
|
||||||
|
</Button>
|
||||||
|
</Upload>
|
||||||
|
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Menu,
|
|
||||||
Button,
|
|
||||||
Icon,
|
|
||||||
Upload,
|
|
||||||
} from 'antd';
|
|
||||||
|
|
||||||
import { RcFile } from 'antd/lib/upload';
|
|
||||||
import Text from 'antd/lib/typography/Text';
|
|
||||||
|
|
||||||
interface LoaderItemComponentProps {
|
|
||||||
taskInstance: any;
|
|
||||||
loader: any;
|
|
||||||
loadActivity: string | null;
|
|
||||||
onLoadAnnotation: (taskInstance: any, loader: any, file: File) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LoaderItemComponent(props: LoaderItemComponentProps): JSX.Element {
|
|
||||||
const {
|
|
||||||
loader,
|
|
||||||
loadActivity,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const loadingWithThisLoader = loadActivity
|
|
||||||
&& loadActivity === loader.name
|
|
||||||
? loadActivity : null;
|
|
||||||
|
|
||||||
const pending = !!loadingWithThisLoader;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Item className='cvat-actions-menu-load-submenu-item' key={loader.name}>
|
|
||||||
<Upload
|
|
||||||
accept={`.${loader.format}`}
|
|
||||||
multiple={false}
|
|
||||||
showUploadList={false}
|
|
||||||
beforeUpload={(file: RcFile): boolean => {
|
|
||||||
props.onLoadAnnotation(
|
|
||||||
props.taskInstance,
|
|
||||||
loader,
|
|
||||||
file as File,
|
|
||||||
);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button block type='link' disabled={!!loadActivity}>
|
|
||||||
<Icon type='upload' />
|
|
||||||
<Text>{loader.name}</Text>
|
|
||||||
{pending && <Icon type='loading' />}
|
|
||||||
</Button>
|
|
||||||
</Upload>
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
activatedStateID: number | null;
|
||||||
|
visible: boolean;
|
||||||
|
left: number;
|
||||||
|
top: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CanvasContextMenu(props: Props): JSX.Element | null {
|
||||||
|
const {
|
||||||
|
activatedStateID,
|
||||||
|
visible,
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
if (!visible || activatedStateID === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return ReactDOM.createPortal(
|
||||||
|
<div className='cvat-canvas-context-menu' style={{ top, left }}>
|
||||||
|
<ObjectItemContainer clientID={activatedStateID} />
|
||||||
|
</div>,
|
||||||
|
window.document.body,
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Menu, Modal,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import { ClickParam } from 'antd/lib/menu/index';
|
||||||
|
|
||||||
|
import DumpSubmenu from 'components/actions-menu/dump-submenu';
|
||||||
|
import LoadSubmenu from 'components/actions-menu/load-submenu';
|
||||||
|
import ExportSubmenu from 'components/actions-menu/export-submenu';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
taskMode: string;
|
||||||
|
loaders: string[];
|
||||||
|
dumpers: string[];
|
||||||
|
exporters: string[];
|
||||||
|
loadActivity: string | null;
|
||||||
|
dumpActivities: string[] | null;
|
||||||
|
exportActivities: string[] | null;
|
||||||
|
onClickMenu(params: ClickParam, file?: File): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum Actions {
|
||||||
|
DUMP_TASK_ANNO = 'dump_task_anno',
|
||||||
|
LOAD_JOB_ANNO = 'load_job_anno',
|
||||||
|
EXPORT_TASK_DATASET = 'export_task_dataset',
|
||||||
|
REMOVE_ANNO = 'remove_anno',
|
||||||
|
OPEN_TASK = 'open_task',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AnnotationMenuComponent(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
taskMode,
|
||||||
|
loaders,
|
||||||
|
dumpers,
|
||||||
|
exporters,
|
||||||
|
onClickMenu,
|
||||||
|
loadActivity,
|
||||||
|
dumpActivities,
|
||||||
|
exportActivities,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
let latestParams: ClickParam | null = null;
|
||||||
|
function onClickMenuWrapper(params: ClickParam | null, file?: File): void {
|
||||||
|
const copyParams = params || latestParams;
|
||||||
|
if (!copyParams) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
latestParams = params;
|
||||||
|
|
||||||
|
if (copyParams.keyPath.length === 2) {
|
||||||
|
const [, action] = copyParams.keyPath;
|
||||||
|
if (action === Actions.LOAD_JOB_ANNO) {
|
||||||
|
if (file) {
|
||||||
|
Modal.confirm({
|
||||||
|
title: 'Current annotation will be lost',
|
||||||
|
content: 'You are going to upload new annotations to this job. Continue?',
|
||||||
|
onOk: () => {
|
||||||
|
onClickMenu(copyParams, file);
|
||||||
|
},
|
||||||
|
okButtonProps: {
|
||||||
|
type: 'danger',
|
||||||
|
},
|
||||||
|
okText: 'Update',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onClickMenu(copyParams);
|
||||||
|
}
|
||||||
|
} else if (copyParams.key === Actions.REMOVE_ANNO) {
|
||||||
|
Modal.confirm({
|
||||||
|
title: 'All annotations will be removed',
|
||||||
|
content: 'You are goung to remove all annotations from the client. '
|
||||||
|
+ 'It will stay on the server till you save a job. Continue?',
|
||||||
|
onOk: () => {
|
||||||
|
onClickMenu(copyParams);
|
||||||
|
},
|
||||||
|
okButtonProps: {
|
||||||
|
type: 'danger',
|
||||||
|
},
|
||||||
|
okText: 'Delete',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
onClickMenu(copyParams);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu onClick={onClickMenuWrapper} className='cvat-annotation-menu' selectable={false}>
|
||||||
|
{
|
||||||
|
DumpSubmenu({
|
||||||
|
taskMode,
|
||||||
|
dumpers,
|
||||||
|
dumpActivities,
|
||||||
|
menuKey: Actions.DUMP_TASK_ANNO,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
{
|
||||||
|
LoadSubmenu({
|
||||||
|
loaders,
|
||||||
|
loadActivity,
|
||||||
|
onFileUpload: (file: File): void => {
|
||||||
|
onClickMenuWrapper(null, file);
|
||||||
|
},
|
||||||
|
menuKey: Actions.LOAD_JOB_ANNO,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
{
|
||||||
|
ExportSubmenu({
|
||||||
|
exporters,
|
||||||
|
exportActivities,
|
||||||
|
menuKey: Actions.EXPORT_TASK_DATASET,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
<Menu.Item key={Actions.REMOVE_ANNO}>
|
||||||
|
Remove annotations
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key={Actions.OPEN_TASK}>
|
||||||
|
Open the task
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
import CanvasContextMenuComponent from 'components/annotation-page/standard-workspace/canvas-context-menu';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
activatedStateID: number | null;
|
||||||
|
visible: boolean;
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
collapsed: boolean | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
annotations: {
|
||||||
|
activatedStateID,
|
||||||
|
collapsed,
|
||||||
|
},
|
||||||
|
canvas: {
|
||||||
|
contextMenu: {
|
||||||
|
visible,
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
activatedStateID,
|
||||||
|
collapsed: activatedStateID !== null ? collapsed[activatedStateID] : undefined,
|
||||||
|
visible,
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = StateToProps;
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
latestLeft: number;
|
||||||
|
latestTop: number;
|
||||||
|
left: number;
|
||||||
|
top: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
class CanvasContextMenuContainer extends React.PureComponent<Props, State> {
|
||||||
|
private initialized: HTMLDivElement | null;
|
||||||
|
private dragging: boolean;
|
||||||
|
private dragInitPosX: number;
|
||||||
|
private dragInitPosY: number;
|
||||||
|
public constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.initialized = null;
|
||||||
|
this.dragging = false;
|
||||||
|
this.dragInitPosX = 0;
|
||||||
|
this.dragInitPosY = 0;
|
||||||
|
this.state = {
|
||||||
|
latestLeft: 0,
|
||||||
|
latestTop: 0,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromProps(props: Props, state: State): State | null {
|
||||||
|
if (props.left === state.latestLeft
|
||||||
|
&& props.top === state.latestTop) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
latestLeft: props.left,
|
||||||
|
latestTop: props.top,
|
||||||
|
top: props.top,
|
||||||
|
left: props.left,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidMount(): void {
|
||||||
|
this.updatePositionIfOutOfScreen();
|
||||||
|
window.addEventListener('mousemove', this.moveContextMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidUpdate(prevProps: Props): void {
|
||||||
|
const { collapsed } = this.props;
|
||||||
|
|
||||||
|
const [element] = window.document.getElementsByClassName('cvat-canvas-context-menu');
|
||||||
|
if (collapsed !== prevProps.collapsed && element) {
|
||||||
|
element.addEventListener('transitionend', () => {
|
||||||
|
this.updatePositionIfOutOfScreen();
|
||||||
|
}, { once: true });
|
||||||
|
} else if (element) {
|
||||||
|
this.updatePositionIfOutOfScreen();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element && (!this.initialized || this.initialized !== element)) {
|
||||||
|
this.initialized = element as HTMLDivElement;
|
||||||
|
|
||||||
|
this.initialized.addEventListener('mousedown', (e: MouseEvent): any => {
|
||||||
|
this.dragging = true;
|
||||||
|
this.dragInitPosX = e.clientX;
|
||||||
|
this.dragInitPosY = e.clientY;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.initialized.addEventListener('mouseup', () => {
|
||||||
|
this.dragging = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillUnmount(): void {
|
||||||
|
window.removeEventListener('mousemove', this.moveContextMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
private moveContextMenu = (e: MouseEvent): void => {
|
||||||
|
if (this.dragging) {
|
||||||
|
this.setState((state) => {
|
||||||
|
const value = {
|
||||||
|
left: state.left + e.clientX - this.dragInitPosX,
|
||||||
|
top: state.top + e.clientY - this.dragInitPosY,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dragInitPosX = e.clientX;
|
||||||
|
this.dragInitPosY = e.clientY;
|
||||||
|
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private updatePositionIfOutOfScreen(): void {
|
||||||
|
const {
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
innerWidth,
|
||||||
|
innerHeight,
|
||||||
|
} = window;
|
||||||
|
|
||||||
|
const [element] = window.document.getElementsByClassName('cvat-canvas-context-menu');
|
||||||
|
if (element) {
|
||||||
|
const height = element.clientHeight;
|
||||||
|
const width = element.clientWidth;
|
||||||
|
|
||||||
|
if (top + height > innerHeight || left + width > innerWidth) {
|
||||||
|
this.setState({
|
||||||
|
top: top - Math.max(top + height - innerHeight, 0),
|
||||||
|
left: left - Math.max(left + width - innerWidth, 0),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
const {
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
visible,
|
||||||
|
activatedStateID,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CanvasContextMenuComponent
|
||||||
|
left={left}
|
||||||
|
top={top}
|
||||||
|
visible={visible}
|
||||||
|
activatedStateID={activatedStateID}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
)(CanvasContextMenuContainer);
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { withRouter, RouteComponentProps } from 'react-router';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { ClickParam } from 'antd/lib/menu/index';
|
||||||
|
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import AnnotationMenuComponent, { Actions } from 'components/annotation-page/top-bar/annotation-menu';
|
||||||
|
|
||||||
|
import {
|
||||||
|
dumpAnnotationsAsync,
|
||||||
|
exportDatasetAsync,
|
||||||
|
} from 'actions/tasks-actions';
|
||||||
|
|
||||||
|
import {
|
||||||
|
uploadJobAnnotationsAsync,
|
||||||
|
removeAnnotationsAsync,
|
||||||
|
} from 'actions/annotation-actions';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
annotationFormats: any[];
|
||||||
|
exporters: any[];
|
||||||
|
jobInstance: any;
|
||||||
|
loadActivity: string | null;
|
||||||
|
dumpActivities: string[] | null;
|
||||||
|
exportActivities: string[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
loadAnnotations(job: any, loader: any, file: File): void;
|
||||||
|
dumpAnnotations(task: any, dumper: any): void;
|
||||||
|
exportDataset(task: any, exporter: any): void;
|
||||||
|
removeAnnotations(sessionInstance: any): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
activities: {
|
||||||
|
loads: jobLoads,
|
||||||
|
},
|
||||||
|
job: {
|
||||||
|
instance: jobInstance,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formats: {
|
||||||
|
annotationFormats,
|
||||||
|
datasetFormats: exporters,
|
||||||
|
},
|
||||||
|
tasks: {
|
||||||
|
activities: {
|
||||||
|
dumps,
|
||||||
|
loads,
|
||||||
|
exports: activeExports,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
const taskID = jobInstance.task.id;
|
||||||
|
const jobID = jobInstance.id;
|
||||||
|
|
||||||
|
return {
|
||||||
|
dumpActivities: taskID in dumps ? dumps[taskID] : null,
|
||||||
|
exportActivities: taskID in activeExports ? activeExports[taskID] : null,
|
||||||
|
loadActivity: taskID in loads || jobID in jobLoads
|
||||||
|
? loads[taskID] || jobLoads[jobID] : null,
|
||||||
|
jobInstance,
|
||||||
|
annotationFormats,
|
||||||
|
exporters,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
loadAnnotations(job: any, loader: any, file: File): void {
|
||||||
|
dispatch(uploadJobAnnotationsAsync(job, loader, file));
|
||||||
|
},
|
||||||
|
dumpAnnotations(task: any, dumper: any): void {
|
||||||
|
dispatch(dumpAnnotationsAsync(task, dumper));
|
||||||
|
},
|
||||||
|
exportDataset(task: any, exporter: any): void {
|
||||||
|
dispatch(exportDatasetAsync(task, exporter));
|
||||||
|
},
|
||||||
|
removeAnnotations(sessionInstance: any): void {
|
||||||
|
dispatch(removeAnnotationsAsync(sessionInstance));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = StateToProps & DispatchToProps & RouteComponentProps;
|
||||||
|
|
||||||
|
function AnnotationMenuContainer(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
jobInstance,
|
||||||
|
annotationFormats,
|
||||||
|
exporters,
|
||||||
|
loadAnnotations,
|
||||||
|
dumpAnnotations,
|
||||||
|
exportDataset,
|
||||||
|
removeAnnotations,
|
||||||
|
history,
|
||||||
|
loadActivity,
|
||||||
|
dumpActivities,
|
||||||
|
exportActivities,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const loaders = annotationFormats
|
||||||
|
.map((format: any): any[] => format.loaders).flat();
|
||||||
|
|
||||||
|
const dumpers = annotationFormats
|
||||||
|
.map((format: any): any[] => format.dumpers).flat();
|
||||||
|
|
||||||
|
const onClickMenu = (params: ClickParam, file?: File): void => {
|
||||||
|
if (params.keyPath.length > 1) {
|
||||||
|
const [additionalKey, action] = params.keyPath;
|
||||||
|
if (action === Actions.DUMP_TASK_ANNO) {
|
||||||
|
const format = additionalKey;
|
||||||
|
const [dumper] = dumpers
|
||||||
|
.filter((_dumper: any): boolean => _dumper.name === format);
|
||||||
|
if (dumper) {
|
||||||
|
dumpAnnotations(jobInstance.task, dumper);
|
||||||
|
}
|
||||||
|
} else if (action === Actions.LOAD_JOB_ANNO) {
|
||||||
|
const [format] = additionalKey.split('::');
|
||||||
|
const [loader] = loaders
|
||||||
|
.filter((_loader: any): boolean => _loader.name === format);
|
||||||
|
if (loader && file) {
|
||||||
|
loadAnnotations(jobInstance, loader, file);
|
||||||
|
}
|
||||||
|
} else if (action === Actions.EXPORT_TASK_DATASET) {
|
||||||
|
const format = additionalKey;
|
||||||
|
const [exporter] = exporters
|
||||||
|
.filter((_exporter: any): boolean => _exporter.name === format);
|
||||||
|
if (exporter) {
|
||||||
|
exportDataset(jobInstance.task, exporter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const [action] = params.keyPath;
|
||||||
|
if (action === Actions.REMOVE_ANNO) {
|
||||||
|
removeAnnotations(jobInstance);
|
||||||
|
} else if (action === Actions.OPEN_TASK) {
|
||||||
|
history.push(`/tasks/${jobInstance.task.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnnotationMenuComponent
|
||||||
|
taskMode={jobInstance.task.mode}
|
||||||
|
loaders={loaders.map((loader: any): string => loader.name)}
|
||||||
|
dumpers={dumpers.map((dumper: any): string => dumper.name)}
|
||||||
|
exporters={exporters.map((exporter: any): string => exporter.name)}
|
||||||
|
loadActivity={loadActivity}
|
||||||
|
dumpActivities={dumpActivities}
|
||||||
|
exportActivities={exportActivities}
|
||||||
|
onClickMenu={onClickMenu}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(
|
||||||
|
connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(AnnotationMenuContainer),
|
||||||
|
);
|
||||||
Loading…
Reference in New Issue