Improved interface of interactors on UI (#2054)
Boris Sekachev
6 years ago
committed by
GitHub
parent
174fe1690b
commit
908e0569d8
@ -0,0 +1,70 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import * as SVG from 'svg.js';
|
||||
import consts from './consts';
|
||||
|
||||
export default class Crosshair {
|
||||
private x: SVG.Line | null;
|
||||
private y: SVG.Line | null;
|
||||
private canvas: SVG.Container | null;
|
||||
|
||||
public constructor() {
|
||||
this.x = null;
|
||||
this.y = null;
|
||||
this.canvas = null;
|
||||
}
|
||||
|
||||
public show(canvas: SVG.Container, x: number, y: number, scale: number): void {
|
||||
if (this.canvas && this.canvas !== canvas) {
|
||||
if (this.x) this.x.remove();
|
||||
if (this.y) this.y.remove();
|
||||
this.x = null;
|
||||
this.y = null;
|
||||
}
|
||||
|
||||
this.canvas = canvas;
|
||||
this.x = this.canvas.line(0, y, this.canvas.node.clientWidth, y).attr({
|
||||
'stroke-width': consts.BASE_STROKE_WIDTH / (2 * scale),
|
||||
}).addClass('cvat_canvas_crosshair');
|
||||
|
||||
this.y = this.canvas.line(x, 0, x, this.canvas.node.clientHeight).attr({
|
||||
'stroke-width': consts.BASE_STROKE_WIDTH / (2 * scale),
|
||||
}).addClass('cvat_canvas_crosshair');
|
||||
}
|
||||
|
||||
public hide(): void {
|
||||
if (this.x) {
|
||||
this.x.remove();
|
||||
this.x = null;
|
||||
}
|
||||
|
||||
if (this.y) {
|
||||
this.y.remove();
|
||||
this.y = null;
|
||||
}
|
||||
|
||||
this.canvas = null;
|
||||
}
|
||||
|
||||
public move(x: number, y: number): void {
|
||||
if (this.x) {
|
||||
this.x.attr({ y1: y, y2: y });
|
||||
}
|
||||
|
||||
if (this.y) {
|
||||
this.y.attr({ x1: x, x2: x });
|
||||
}
|
||||
}
|
||||
|
||||
public scale(scale: number): void {
|
||||
if (this.x) {
|
||||
this.x.attr('stroke-width', consts.BASE_STROKE_WIDTH / (2 * scale));
|
||||
}
|
||||
|
||||
if (this.y) {
|
||||
this.y.attr('stroke-width', consts.BASE_STROKE_WIDTH / (2 * scale));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,281 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import * as SVG from 'svg.js';
|
||||
import consts from './consts';
|
||||
import Crosshair from './crosshair';
|
||||
import { translateToSVG } from './shared';
|
||||
import { InteractionData, InteractionResult, Geometry } from './canvasModel';
|
||||
|
||||
export interface InteractionHandler {
|
||||
transform(geometry: Geometry): void;
|
||||
interact(interactData: InteractionData): void;
|
||||
cancel(): void;
|
||||
}
|
||||
|
||||
export class InteractionHandlerImpl implements InteractionHandler {
|
||||
private onInteraction: (
|
||||
shapes: InteractionResult[] | null,
|
||||
shapesUpdated?: boolean,
|
||||
isDone?: boolean,
|
||||
) => void;
|
||||
private geometry: Geometry;
|
||||
private canvas: SVG.Container;
|
||||
private interactionData: InteractionData;
|
||||
private cursorPosition: { x: number; y: number };
|
||||
private shapesWereUpdated: boolean;
|
||||
private interactionShapes: SVG.Shape[];
|
||||
private currentInteractionShape: SVG.Shape | null;
|
||||
private crosshair: Crosshair;
|
||||
|
||||
private prepareResult(): InteractionResult[] {
|
||||
return this.interactionShapes.map((shape: SVG.Shape): InteractionResult => {
|
||||
if (shape.type === 'circle') {
|
||||
const points = [(shape as SVG.Circle).cx(), (shape as SVG.Circle).cy()];
|
||||
return {
|
||||
points: points.map((coord: number): number => coord - this.geometry.offset),
|
||||
shapeType: 'points',
|
||||
button: shape.attr('stroke') === 'green' ? 0 : 2,
|
||||
};
|
||||
}
|
||||
|
||||
const bbox = (shape.node as any as SVGRectElement).getBBox();
|
||||
const points = [bbox.x, bbox.y, bbox.x + bbox.width, bbox.y + bbox.height];
|
||||
return {
|
||||
points: points.map((coord: number): number => coord - this.geometry.offset),
|
||||
shapeType: 'rectangle',
|
||||
button: 0,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private shouldRaiseEvent(ctrlKey: boolean): boolean {
|
||||
const { interactionData, interactionShapes, shapesWereUpdated } = this;
|
||||
const { minPosVertices, minNegVertices, enabled } = interactionData;
|
||||
|
||||
const positiveShapes = interactionShapes
|
||||
.filter((shape: SVG.Shape): boolean => (shape as any).attr('stroke') === 'green');
|
||||
const negativeShapes = interactionShapes
|
||||
.filter((shape: SVG.Shape): boolean => (shape as any).attr('stroke') !== 'green');
|
||||
|
||||
if (interactionData.shapeType === 'rectangle') {
|
||||
return enabled && !ctrlKey && !!interactionShapes.length;
|
||||
}
|
||||
|
||||
const minimumVerticesAchieved = (typeof (minPosVertices) === 'undefined'
|
||||
|| minPosVertices <= positiveShapes.length) && (typeof (minNegVertices) === 'undefined'
|
||||
|| minPosVertices <= negativeShapes.length);
|
||||
return enabled && !ctrlKey && minimumVerticesAchieved && shapesWereUpdated;
|
||||
}
|
||||
|
||||
private addCrosshair(): void {
|
||||
const { x, y } = this.cursorPosition;
|
||||
this.crosshair.show(this.canvas, x, y, this.geometry.scale);
|
||||
}
|
||||
|
||||
private removeCrosshair(): void {
|
||||
this.crosshair.hide();
|
||||
}
|
||||
|
||||
private interactPoints(): void {
|
||||
const eventListener = (e: MouseEvent): void => {
|
||||
if ((e.button === 0 || e.button === 2) && !e.altKey) {
|
||||
e.preventDefault();
|
||||
const [cx, cy] = translateToSVG(
|
||||
this.canvas.node as any as SVGSVGElement,
|
||||
[e.clientX, e.clientY],
|
||||
);
|
||||
this.currentInteractionShape = this.canvas
|
||||
.circle(consts.BASE_POINT_SIZE * 2 / this.geometry.scale).center(cx, cy)
|
||||
.fill('white')
|
||||
.stroke(e.button === 0 ? 'green' : 'red')
|
||||
.addClass('cvat_interaction_point')
|
||||
.attr({
|
||||
'stroke-width': consts.POINTS_STROKE_WIDTH / this.geometry.scale,
|
||||
});
|
||||
|
||||
this.interactionShapes.push(this.currentInteractionShape);
|
||||
this.shapesWereUpdated = true;
|
||||
if (this.shouldRaiseEvent(e.ctrlKey)) {
|
||||
this.onInteraction(this.prepareResult(), true, false);
|
||||
}
|
||||
|
||||
const self = this.currentInteractionShape;
|
||||
self.on('mouseenter', (): void => {
|
||||
self.attr({
|
||||
'stroke-width': consts.POINTS_SELECTED_STROKE_WIDTH / this.geometry.scale,
|
||||
});
|
||||
|
||||
self.on('mousedown', (_e: MouseEvent): void => {
|
||||
_e.preventDefault();
|
||||
_e.stopPropagation();
|
||||
self.remove();
|
||||
this.interactionShapes = this.interactionShapes.filter(
|
||||
(shape: SVG.Shape): boolean => shape !== self,
|
||||
);
|
||||
this.shapesWereUpdated = true;
|
||||
if (this.shouldRaiseEvent(_e.ctrlKey)) {
|
||||
this.onInteraction(this.prepareResult(), true, false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.on('mouseleave', (): void => {
|
||||
self.attr({
|
||||
'stroke-width': consts.POINTS_STROKE_WIDTH / this.geometry.scale,
|
||||
});
|
||||
|
||||
self.off('mousedown');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// clear this listener in relese()
|
||||
this.canvas.on('mousedown.interaction', eventListener);
|
||||
}
|
||||
|
||||
private interactRectangle(): void {
|
||||
let initialized = false;
|
||||
const eventListener = (e: MouseEvent): void => {
|
||||
if (e.button === 0 && !e.altKey) {
|
||||
if (!initialized) {
|
||||
(this.currentInteractionShape as any).draw(e, { snapToGrid: 0.1 });
|
||||
initialized = true;
|
||||
} else {
|
||||
(this.currentInteractionShape as any).draw(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.currentInteractionShape = this.canvas.rect();
|
||||
this.canvas.on('mousedown.interaction', eventListener);
|
||||
this.currentInteractionShape.on('drawstop', (): void => {
|
||||
this.interactionShapes.push(this.currentInteractionShape);
|
||||
this.shapesWereUpdated = true;
|
||||
|
||||
this.canvas.off('mousedown.interaction', eventListener);
|
||||
if (this.shouldRaiseEvent(false)) {
|
||||
this.onInteraction(this.prepareResult(), true, false);
|
||||
}
|
||||
|
||||
this.interact({ enabled: false });
|
||||
}).addClass('cvat_canvas_shape_drawing').attr({
|
||||
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
|
||||
});
|
||||
}
|
||||
|
||||
private initInteraction(): void {
|
||||
if (this.interactionData.crosshair) {
|
||||
this.addCrosshair();
|
||||
}
|
||||
}
|
||||
|
||||
private startInteraction(): void {
|
||||
if (this.interactionData.shapeType === 'rectangle') {
|
||||
this.interactRectangle();
|
||||
} else if (this.interactionData.shapeType === 'points') {
|
||||
this.interactPoints();
|
||||
} else {
|
||||
throw new Error('Interactor implementation supports only rectangle and points');
|
||||
}
|
||||
}
|
||||
|
||||
private release(): void {
|
||||
if (this.crosshair) {
|
||||
this.removeCrosshair();
|
||||
}
|
||||
|
||||
this.canvas.off('mousedown.interaction');
|
||||
this.interactionShapes.forEach((shape: SVG.Shape): SVG.Shape => shape.remove());
|
||||
this.interactionShapes = [];
|
||||
if (this.currentInteractionShape) {
|
||||
this.currentInteractionShape.remove();
|
||||
this.currentInteractionShape = null;
|
||||
}
|
||||
}
|
||||
|
||||
public constructor(
|
||||
onInteraction: (
|
||||
shapes: InteractionResult[] | null,
|
||||
shapesUpdated?: boolean,
|
||||
isDone?: boolean,
|
||||
) => void,
|
||||
canvas: SVG.Container,
|
||||
geometry: Geometry,
|
||||
) {
|
||||
this.onInteraction = (
|
||||
shapes: InteractionResult[] | null,
|
||||
shapesUpdated?: boolean,
|
||||
isDone?: boolean,
|
||||
): void => {
|
||||
this.shapesWereUpdated = false;
|
||||
onInteraction(shapes, shapesUpdated, isDone);
|
||||
};
|
||||
this.canvas = canvas;
|
||||
this.geometry = geometry;
|
||||
this.shapesWereUpdated = false;
|
||||
this.interactionShapes = [];
|
||||
this.interactionData = { enabled: false };
|
||||
this.currentInteractionShape = null;
|
||||
this.crosshair = new Crosshair();
|
||||
this.cursorPosition = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
this.canvas.on('mousemove.interaction', (e: MouseEvent): void => {
|
||||
const [x, y] = translateToSVG(
|
||||
this.canvas.node as any as SVGSVGElement,
|
||||
[e.clientX, e.clientY],
|
||||
);
|
||||
this.cursorPosition = { x, y };
|
||||
if (this.crosshair) {
|
||||
this.crosshair.move(x, y);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('keyup', (e: KeyboardEvent): void => {
|
||||
if (e.keyCode === 17 && this.shouldRaiseEvent(false)) { // 17 is ctrl
|
||||
this.onInteraction(this.prepareResult(), true, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public transform(geometry: Geometry): void {
|
||||
this.geometry = geometry;
|
||||
|
||||
if (this.crosshair) {
|
||||
this.crosshair.scale(this.geometry.scale);
|
||||
}
|
||||
|
||||
const shapesToBeScaled = this.currentInteractionShape
|
||||
? [...this.interactionShapes, this.currentInteractionShape]
|
||||
: [...this.interactionShapes];
|
||||
for (const shape of shapesToBeScaled) {
|
||||
if (shape.type === 'circle') {
|
||||
(shape as SVG.Circle).radius(consts.BASE_POINT_SIZE / this.geometry.scale);
|
||||
shape.attr('stroke-width', consts.POINTS_STROKE_WIDTH / this.geometry.scale);
|
||||
} else {
|
||||
shape.attr('stroke-width', consts.BASE_STROKE_WIDTH / this.geometry.scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public interact(interactionData: InteractionData): void {
|
||||
if (interactionData.enabled) {
|
||||
this.interactionData = interactionData;
|
||||
this.initInteraction();
|
||||
this.startInteraction();
|
||||
} else {
|
||||
this.onInteraction(this.prepareResult(), this.shouldRaiseEvent(false), true);
|
||||
this.release();
|
||||
this.interactionData = interactionData;
|
||||
}
|
||||
}
|
||||
|
||||
public cancel(): void {
|
||||
this.release();
|
||||
this.onInteraction(null);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<g>
|
||||
<path d="M509.2,455.7L183.4,128.9c-3.7-3.7-11.2-3.7-14.9,0l-38.2,38.2c-3.7,3.7-3.7,11.2,0,14.9l325.8,326.7
|
||||
c3.7,3.7,11.2,3.7,14.9,0l38.2-38.2C512.9,466.9,512.9,460.3,509.2,455.7L509.2,455.7z M474.8,475.2L474.8,475.2
|
||||
c-4.7,4.7-11.2,4.7-14.9,0L206.7,221.1c-3.7-3.7-3.7-11.2,0-14.9l0,0c3.7-3.7,11.2-3.7,14.9,0l253.2,254.1
|
||||
C479.4,464.1,479.4,470.6,474.8,475.2L474.8,475.2z M171.3,74.9c8.4,0,15.8-7.4,15.8-15.8V16.3c0-8.4-7.4-15.8-15.8-15.8
|
||||
c-8.4,0-15.8,7.4-15.8,15.8v42.8C155.5,68.4,162.9,74.9,171.3,74.9z M171.3,265.8c-8.4,0-15.8,7.4-15.8,15.8v42.8
|
||||
c0,8.4,7.4,15.8,15.8,15.8c8.4,0,15.8-7.4,15.8-15.8v-42.8C188,273.2,180.6,265.8,171.3,265.8z M275.5,169
|
||||
c0,8.4,7.4,15.8,15.8,15.8h42.8c8.4,0,15.8-7.4,15.8-15.8c0-8.4-7.4-15.8-15.8-15.8h-42.8C283,153.1,275.5,159.7,275.5,169z
|
||||
M74.5,169c0-8.4-7.4-15.8-15.8-15.8H15.8C7.4,153.1,0,160.6,0,169c0,8.4,7.4,15.8,15.8,15.8h42.8C67,184.8,74.5,177.3,74.5,169z
|
||||
M81,102.9c2.8,2.8,7.4,4.7,11.2,4.7c4.7,0,8.4-1.9,11.2-4.7c6.5-6.5,6.5-16.8,0-22.3L75.4,52.6c-2.8-2.8-7.4-4.7-11.2-4.7
|
||||
c-4.7,0-8.4,1.9-11.2,4.7c-6.5,6.5-6.5,16.8,0,22.3L81,102.9z M92.2,235.1c-4.7,0-8.4,1.9-11.2,4.7l-27.9,27.9
|
||||
c-2.8,2.8-4.7,7.4-4.7,11.2c0,4.7,1.9,8.4,4.7,11.2s7.4,4.7,11.2,4.7c4.7,0,8.4-1.9,11.2-4.7l27.9-27.9c6.5-6.5,6.5-16.8,0-22.3
|
||||
C100.5,236.9,96.8,235.1,92.2,235.1z M251.3,107.5c4.7,0,8.4-1.9,11.2-4.7l27.9-27.9c6.5-6.5,6.5-16.8,0-22.3
|
||||
c-2.8-2.8-7.4-4.7-11.2-4.7c-3.7,0-8.4,1.9-11.2,4.7l-27.9,27.9c-2.8,2.8-4.7,7.4-4.7,11.2c0,3.7,1.9,8.4,4.7,11.2
|
||||
C243,105.7,246.7,107.5,251.3,107.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -1,90 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { activate as activatePlugin, deactivate as deactivatePlugin } from 'utils/dextr-utils';
|
||||
|
||||
|
||||
interface StateToProps {
|
||||
pluginEnabled: boolean;
|
||||
canvasInstance: Canvas;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
activate(canvasInstance: Canvas): void;
|
||||
deactivate(canvasInstance: Canvas): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
plugins: {
|
||||
list,
|
||||
},
|
||||
annotation: {
|
||||
canvas: {
|
||||
instance: canvasInstance,
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
canvasInstance,
|
||||
pluginEnabled: list.DEXTR_SEGMENTATION,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(): DispatchToProps {
|
||||
return {
|
||||
activate(canvasInstance: Canvas): void {
|
||||
activatePlugin(canvasInstance);
|
||||
},
|
||||
deactivate(canvasInstance: Canvas): void {
|
||||
deactivatePlugin(canvasInstance);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function DEXTRPlugin(props: StateToProps & DispatchToProps): JSX.Element | null {
|
||||
const {
|
||||
pluginEnabled,
|
||||
canvasInstance,
|
||||
activate,
|
||||
deactivate,
|
||||
} = props;
|
||||
const [pluginActivated, setActivated] = useState(false);
|
||||
|
||||
return (
|
||||
pluginEnabled ? (
|
||||
<Tooltip title='Make AI polygon from at least 4 extreme points using deep extreme cut' mouseLeaveDelay={0}>
|
||||
<Checkbox
|
||||
style={{ marginTop: 5 }}
|
||||
checked={pluginActivated}
|
||||
onChange={(event: CheckboxChangeEvent): void => {
|
||||
setActivated(event.target.checked);
|
||||
if (event.target.checked) {
|
||||
activate(canvasInstance);
|
||||
} else {
|
||||
deactivate(canvasInstance);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Make AI polygon
|
||||
</Checkbox>
|
||||
</Tooltip>
|
||||
) : null
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(DEXTRPlugin);
|
||||
|
||||
// TODO: Add dialog window with cancel button
|
||||
@ -0,0 +1,472 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Popover from 'antd/lib/popover';
|
||||
import Select, { OptionProps } from 'antd/lib/select';
|
||||
import Button from 'antd/lib/button';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import notification from 'antd/lib/notification';
|
||||
|
||||
import { AIToolsIcon } from 'icons';
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
import {
|
||||
CombinedState,
|
||||
ActiveControl,
|
||||
Model,
|
||||
ObjectType,
|
||||
ShapeType,
|
||||
} from 'reducers/interfaces';
|
||||
import { interactWithCanvas, fetchAnnotationsAsync, updateAnnotationsAsync } from 'actions/annotation-actions';
|
||||
import { InteractionResult } from 'cvat-canvas/src/typescript/canvas';
|
||||
|
||||
interface StateToProps {
|
||||
canvasInstance: Canvas;
|
||||
labels: any[];
|
||||
states: any[];
|
||||
activeLabelID: number;
|
||||
jobInstance: any;
|
||||
isInteraction: boolean;
|
||||
frame: number;
|
||||
interactors: Model[];
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
onInteractionStart(activeInteractor: Model, activeLabelID: number): void;
|
||||
updateAnnotations(statesToUpdate: any[]): void;
|
||||
fetchAnnotations(): void;
|
||||
}
|
||||
|
||||
const core = getCore();
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const { annotation } = state;
|
||||
const { number: frame } = annotation.player.frame;
|
||||
const { instance: jobInstance } = annotation.job;
|
||||
const { instance: canvasInstance, activeControl } = annotation.canvas;
|
||||
const { models } = state;
|
||||
const { interactors } = models;
|
||||
|
||||
return {
|
||||
interactors,
|
||||
isInteraction: activeControl === ActiveControl.INTERACTION,
|
||||
activeLabelID: annotation.drawing.activeLabelID,
|
||||
labels: annotation.job.labels,
|
||||
states: annotation.annotations.states,
|
||||
canvasInstance,
|
||||
jobInstance,
|
||||
frame,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
onInteractionStart(activeInteractor: Model, activeLabelID: number): void {
|
||||
dispatch(interactWithCanvas(activeInteractor, activeLabelID));
|
||||
},
|
||||
updateAnnotations(statesToUpdate: any[]): void {
|
||||
dispatch(updateAnnotationsAsync(statesToUpdate));
|
||||
},
|
||||
fetchAnnotations(): void {
|
||||
dispatch(fetchAnnotationsAsync());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function convertShapesForInteractor(shapes: InteractionResult[]): number[][] {
|
||||
const reducer = (acc: number[][], _: number, index: number, array: number[]): number[][] => {
|
||||
if (!(index % 2)) { // 0, 2, 4
|
||||
acc.push([
|
||||
array[index],
|
||||
array[index + 1],
|
||||
]);
|
||||
}
|
||||
return acc;
|
||||
};
|
||||
|
||||
return shapes.filter((shape: InteractionResult): boolean => shape.shapeType === 'points' && shape.button === 0)
|
||||
.map((shape: InteractionResult): number[] => shape.points)
|
||||
.flat().reduce(reducer, []);
|
||||
}
|
||||
|
||||
type Props = StateToProps & DispatchToProps;
|
||||
interface State {
|
||||
activeInteractor: Model | null;
|
||||
activeLabelID: number;
|
||||
interactiveStateID: number | null;
|
||||
fetching: boolean;
|
||||
}
|
||||
|
||||
class ToolsControlComponent extends React.PureComponent<Props, State> {
|
||||
private interactionIsAborted: boolean;
|
||||
private interactionIsDone: boolean;
|
||||
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeInteractor: props.interactors.length ? props.interactors[0] : null,
|
||||
activeLabelID: props.labels[0].id,
|
||||
interactiveStateID: null,
|
||||
fetching: false,
|
||||
};
|
||||
|
||||
this.interactionIsAborted = false;
|
||||
this.interactionIsDone = false;
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
const { canvasInstance } = this.props;
|
||||
canvasInstance.html().addEventListener('canvas.interacted', this.interactionListener);
|
||||
canvasInstance.html().addEventListener('canvas.canceled', this.cancelListener);
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: Props): void {
|
||||
const { isInteraction } = this.props;
|
||||
if (prevProps.isInteraction && !isInteraction) {
|
||||
window.removeEventListener('contextmenu', this.contextmenuDisabler);
|
||||
} else if (!prevProps.isInteraction && isInteraction) {
|
||||
this.interactionIsDone = false;
|
||||
this.interactionIsAborted = false;
|
||||
window.addEventListener('contextmenu', this.contextmenuDisabler);
|
||||
}
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
const { canvasInstance } = this.props;
|
||||
canvasInstance.html().removeEventListener('canvas.interacted', this.interactionListener);
|
||||
canvasInstance.html().removeEventListener('canvas.canceled', this.cancelListener);
|
||||
}
|
||||
|
||||
private getInteractiveState(): any | null {
|
||||
const { states } = this.props;
|
||||
const { interactiveStateID } = this.state;
|
||||
return states
|
||||
.filter((_state: any): boolean => _state.clientID === interactiveStateID)[0] || null;
|
||||
}
|
||||
|
||||
private contextmenuDisabler = (e: MouseEvent): void => {
|
||||
if (e.target && (e.target as Element).classList
|
||||
&& (e.target as Element).classList.toString().includes('ant-modal')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
private cancelListener = async (): Promise<void> => {
|
||||
const {
|
||||
isInteraction,
|
||||
jobInstance,
|
||||
frame,
|
||||
fetchAnnotations,
|
||||
} = this.props;
|
||||
const { interactiveStateID, fetching } = this.state;
|
||||
|
||||
if (isInteraction) {
|
||||
if (fetching && !this.interactionIsDone) {
|
||||
// user pressed ESC
|
||||
this.setState({ fetching: false });
|
||||
this.interactionIsAborted = true;
|
||||
}
|
||||
|
||||
if (interactiveStateID !== null) {
|
||||
const state = this.getInteractiveState();
|
||||
this.setState({ interactiveStateID: null });
|
||||
await state.delete(frame);
|
||||
fetchAnnotations();
|
||||
}
|
||||
|
||||
await jobInstance.actions.freeze(false);
|
||||
}
|
||||
};
|
||||
|
||||
private interactionListener = async (e: Event): Promise<void> => {
|
||||
const {
|
||||
frame,
|
||||
labels,
|
||||
jobInstance,
|
||||
isInteraction,
|
||||
activeLabelID,
|
||||
fetchAnnotations,
|
||||
updateAnnotations,
|
||||
} = this.props;
|
||||
const { activeInteractor, interactiveStateID, fetching } = this.state;
|
||||
|
||||
try {
|
||||
if (!isInteraction) {
|
||||
throw Error('Canvas raises event "canvas.interacted" when interaction is off');
|
||||
}
|
||||
|
||||
if (fetching) {
|
||||
this.interactionIsDone = (e as CustomEvent).detail.isDone;
|
||||
return;
|
||||
}
|
||||
|
||||
const interactor = activeInteractor as Model;
|
||||
|
||||
let result = [];
|
||||
if ((e as CustomEvent).detail.shapesUpdated) {
|
||||
this.setState({ fetching: true });
|
||||
try {
|
||||
result = await core.lambda.call(jobInstance.task, interactor, {
|
||||
task: jobInstance.task,
|
||||
frame,
|
||||
points: convertShapesForInteractor((e as CustomEvent).detail.shapes),
|
||||
});
|
||||
|
||||
if (this.interactionIsAborted) {
|
||||
// while the server request
|
||||
// user has cancelled interaction (for example pressed ESC)
|
||||
return;
|
||||
}
|
||||
} finally {
|
||||
this.setState({ fetching: false });
|
||||
}
|
||||
}
|
||||
|
||||
if (this.interactionIsDone) {
|
||||
// while the server request, user has done interaction (for example pressed N)
|
||||
const object = new core.classes.ObjectState({
|
||||
frame,
|
||||
objectType: ObjectType.SHAPE,
|
||||
label: labels
|
||||
.filter((label: any) => label.id === activeLabelID)[0],
|
||||
shapeType: ShapeType.POLYGON,
|
||||
points: result.flat(),
|
||||
occluded: false,
|
||||
zOrder: (e as CustomEvent).detail.zOrder,
|
||||
});
|
||||
|
||||
await jobInstance.annotations.put([object]);
|
||||
fetchAnnotations();
|
||||
} else {
|
||||
// no shape yet, then create it and save to collection
|
||||
if (interactiveStateID === null) {
|
||||
// freeze history for interaction time
|
||||
// (points updating shouldn't cause adding new actions to history)
|
||||
await jobInstance.actions.freeze(true);
|
||||
const object = new core.classes.ObjectState({
|
||||
frame,
|
||||
objectType: ObjectType.SHAPE,
|
||||
label: labels
|
||||
.filter((label: any) => label.id === activeLabelID)[0],
|
||||
shapeType: ShapeType.POLYGON,
|
||||
points: result.flat(),
|
||||
occluded: false,
|
||||
zOrder: (e as CustomEvent).detail.zOrder,
|
||||
});
|
||||
// need a clientID of a created object to interact with it further
|
||||
// so, we do not use createAnnotationAction
|
||||
const [clientID] = await jobInstance.annotations.put([object]);
|
||||
|
||||
// update annotations on a canvas
|
||||
fetchAnnotations();
|
||||
this.setState({ interactiveStateID: clientID });
|
||||
return;
|
||||
}
|
||||
|
||||
const state = this.getInteractiveState();
|
||||
if ((e as CustomEvent).detail.isDone) {
|
||||
const finalObject = new core.classes.ObjectState({
|
||||
frame: state.frame,
|
||||
objectType: state.objectType,
|
||||
label: state.label,
|
||||
shapeType: state.shapeType,
|
||||
points: result.length ? result.flat() : state.points,
|
||||
occluded: state.occluded,
|
||||
zOrder: state.zOrder,
|
||||
});
|
||||
this.setState({ interactiveStateID: null });
|
||||
await state.delete(frame);
|
||||
await jobInstance.actions.freeze(false);
|
||||
await jobInstance.annotations.put([finalObject]);
|
||||
fetchAnnotations();
|
||||
} else {
|
||||
state.points = result.flat();
|
||||
updateAnnotations([state]);
|
||||
fetchAnnotations();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
notification.error({
|
||||
description: err.toString(),
|
||||
message: 'Interaction error occured',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private setActiveInteractor = (key: string): void => {
|
||||
const { interactors } = this.props;
|
||||
this.setState({
|
||||
activeInteractor: interactors.filter(
|
||||
(interactor: Model) => interactor.id === key,
|
||||
)[0],
|
||||
});
|
||||
};
|
||||
|
||||
private renderLabelBlock(): JSX.Element {
|
||||
const { labels } = this.props;
|
||||
const { activeLabelID } = this.state;
|
||||
return (
|
||||
<>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col>
|
||||
<Text className='cvat-text-color'>Label</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='center'>
|
||||
<Col span={24}>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
showSearch
|
||||
filterOption={
|
||||
(input: string, option: React.ReactElement<OptionProps>) => {
|
||||
const { children } = option.props;
|
||||
if (typeof (children) === 'string') {
|
||||
return children.toLowerCase().includes(input.toLowerCase());
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
value={`${activeLabelID}`}
|
||||
onChange={(value: string) => {
|
||||
this.setState({ activeLabelID: +value });
|
||||
}}
|
||||
>
|
||||
{
|
||||
labels.map((label: any) => (
|
||||
<Select.Option key={label.id} value={`${label.id}`}>
|
||||
{label.name}
|
||||
</Select.Option>
|
||||
))
|
||||
}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
private renderInteractorBlock(): JSX.Element {
|
||||
const { interactors, canvasInstance, onInteractionStart } = this.props;
|
||||
const { activeInteractor, activeLabelID, fetching } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col>
|
||||
<Text className='cvat-text-color'>Interactor</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' align='middle' justify='center'>
|
||||
<Col span={24}>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
defaultValue={interactors[0].name}
|
||||
onChange={this.setActiveInteractor}
|
||||
>
|
||||
{interactors.map((interactor: Model): JSX.Element => (
|
||||
<Select.Option title={interactor.description} key={interactor.id}>
|
||||
{interactor.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' align='middle' justify='center'>
|
||||
<Col offset={4} span={16}>
|
||||
<Button
|
||||
loading={fetching}
|
||||
className='cvat-tools-interact-button'
|
||||
disabled={!activeInteractor || fetching}
|
||||
onClick={() => {
|
||||
if (activeInteractor) {
|
||||
canvasInstance.cancel();
|
||||
canvasInstance.interact({
|
||||
shapeType: 'points',
|
||||
minPosVertices: 4, // TODO: Add parameter to interactor
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
onInteractionStart(activeInteractor, activeLabelID);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Interact
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
private renderPopoverContent(): JSX.Element {
|
||||
return (
|
||||
<div className='cvat-tools-control-popover-content'>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col>
|
||||
<Text className='cvat-text-color' strong>AI Tools</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
{ this.renderLabelBlock() }
|
||||
{ this.renderInteractorBlock() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public render(): JSX.Element | null {
|
||||
const { interactors, isInteraction, canvasInstance } = this.props;
|
||||
const { fetching } = this.state;
|
||||
|
||||
if (!interactors.length) return null;
|
||||
|
||||
const dynamcPopoverPros = isInteraction ? {
|
||||
overlayStyle: {
|
||||
display: 'none',
|
||||
},
|
||||
} : {};
|
||||
|
||||
const dynamicIconProps = isInteraction ? {
|
||||
className: 'cvat-active-canvas-control cvat-tools-control',
|
||||
onClick: (): void => {
|
||||
canvasInstance.interact({ enabled: false });
|
||||
},
|
||||
} : {
|
||||
className: 'cvat-tools-control',
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title='Interaction request'
|
||||
zIndex={Number.MAX_SAFE_INTEGER}
|
||||
visible={fetching}
|
||||
closable={false}
|
||||
footer={[]}
|
||||
|
||||
>
|
||||
<Text>Waiting for a server response..</Text>
|
||||
<Icon style={{ marginLeft: '10px' }} type='loading' />
|
||||
</Modal>
|
||||
<Popover
|
||||
{...dynamcPopoverPros}
|
||||
placement='right'
|
||||
overlayClassName='cvat-tools-control-popover'
|
||||
content={interactors.length && this.renderPopoverContent()}
|
||||
>
|
||||
<Icon {...dynamicIconProps} component={AIToolsIcon} />
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ToolsControlComponent);
|
||||
@ -1,49 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Tag from 'antd/lib/tag';
|
||||
import Select from 'antd/lib/select';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
import { Model } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
model: Model;
|
||||
}
|
||||
|
||||
export default function BuiltModelItemComponent(props: Props): JSX.Element {
|
||||
const { model } = props;
|
||||
|
||||
return (
|
||||
<Row className='cvat-models-list-item' type='flex'>
|
||||
<Col span={4} xxl={3}>
|
||||
<Tag color='orange'>{model.framework}</Tag>
|
||||
</Col>
|
||||
<Col span={6} xxl={7}>
|
||||
<Text className='cvat-text-color'>
|
||||
{model.name}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={5} offset={7}>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder='Supported labels'
|
||||
style={{ width: '90%' }}
|
||||
value='Supported labels'
|
||||
>
|
||||
{model.labels.map(
|
||||
(label): JSX.Element => (
|
||||
<Select.Option key={label}>
|
||||
{label}
|
||||
</Select.Option>
|
||||
),
|
||||
)}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={2} />
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@ -1,214 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import { ShapeType, CombinedState } from 'reducers/interfaces';
|
||||
import { getCVATStore } from 'cvat-store';
|
||||
|
||||
const core = getCore();
|
||||
|
||||
interface DEXTRPlugin {
|
||||
name: string;
|
||||
description: string;
|
||||
cvat: {
|
||||
classes: {
|
||||
Job: {
|
||||
prototype: {
|
||||
annotations: {
|
||||
put: {
|
||||
enter(self: any, objects: any[]): Promise<void>;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
data: {
|
||||
canceled: boolean;
|
||||
enabled: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
const antModalRoot = document.createElement('div');
|
||||
const antModalMask = document.createElement('div');
|
||||
antModalMask.classList.add('ant-modal-mask');
|
||||
const antModalWrap = document.createElement('div');
|
||||
antModalWrap.classList.add('ant-modal-wrap');
|
||||
antModalWrap.setAttribute('role', 'dialog');
|
||||
const antModal = document.createElement('div');
|
||||
antModal.classList.add('ant-modal');
|
||||
antModal.style.width = '300px';
|
||||
antModal.style.top = '40%';
|
||||
antModal.setAttribute('role', 'document');
|
||||
const antModalContent = document.createElement('div');
|
||||
antModalContent.classList.add('ant-modal-content');
|
||||
const antModalBody = document.createElement('div');
|
||||
antModalBody.classList.add('ant-modal-body');
|
||||
antModalBody.style.textAlign = 'center';
|
||||
const antModalSpan = document.createElement('span');
|
||||
antModalSpan.innerText = 'Segmentation request is being processed';
|
||||
antModalSpan.style.display = 'block';
|
||||
const antModalButton = document.createElement('button');
|
||||
antModalButton.disabled = true;
|
||||
antModalButton.classList.add('ant-btn', 'ant-btn-primary');
|
||||
antModalButton.style.width = '100px';
|
||||
antModalButton.style.margin = '10px auto';
|
||||
const antModalButtonSpan = document.createElement('span');
|
||||
antModalButtonSpan.innerText = 'Cancel';
|
||||
|
||||
antModalBody.append(antModalSpan, antModalButton);
|
||||
antModalButton.append(antModalButtonSpan);
|
||||
antModalContent.append(antModalBody);
|
||||
antModal.append(antModalContent);
|
||||
antModalWrap.append(antModal);
|
||||
antModalRoot.append(antModalMask, antModalWrap);
|
||||
|
||||
async function serverRequest(
|
||||
taskInstance: any,
|
||||
frame: number,
|
||||
points: number[],
|
||||
): Promise<number[]> {
|
||||
const reducer = (acc: number[][],
|
||||
_: number, index: number,
|
||||
array: number[]): number[][] => {
|
||||
if (!(index % 2)) { // 0, 2, 4
|
||||
acc.push([
|
||||
array[index],
|
||||
array[index + 1],
|
||||
]);
|
||||
}
|
||||
return acc;
|
||||
};
|
||||
|
||||
const reducedPoints = points.reduce(reducer, []);
|
||||
const models = await core.lambda.list();
|
||||
const model = models.filter((func: any): boolean => func.id === 'openvino.dextr')[0];
|
||||
const result = await core.lambda.call(taskInstance, model, {
|
||||
task: taskInstance,
|
||||
frame,
|
||||
points: reducedPoints,
|
||||
});
|
||||
|
||||
return result.flat();
|
||||
}
|
||||
|
||||
async function enter(this: any, self: DEXTRPlugin, objects: any[]): Promise<void> {
|
||||
try {
|
||||
if (self.data.enabled && objects.length === 1) {
|
||||
const state = (getCVATStore().getState() as CombinedState);
|
||||
const isPolygon = state.annotation
|
||||
.drawing.activeShapeType === ShapeType.POLYGON;
|
||||
if (!isPolygon) return;
|
||||
|
||||
document.body.append(antModalRoot);
|
||||
const promises: Record<number, Promise<number[]>> = {};
|
||||
for (let i = 0; i < objects.length; i++) {
|
||||
if (objects[i].points.length >= 8) {
|
||||
promises[i] = serverRequest(
|
||||
this.task,
|
||||
objects[i].frame,
|
||||
objects[i].points,
|
||||
);
|
||||
} else {
|
||||
promises[i] = new Promise((resolve) => {
|
||||
resolve(objects[i].points);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const transformed = await Promise
|
||||
.all(Object.values(promises));
|
||||
for (let i = 0; i < objects.length; i++) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
objects[i] = new core.classes.ObjectState({
|
||||
frame: objects[i].frame,
|
||||
objectType: objects[i].objectType,
|
||||
label: objects[i].label,
|
||||
shapeType: ShapeType.POLYGON,
|
||||
points: transformed[i],
|
||||
occluded: objects[i].occluded,
|
||||
zOrder: objects[i].zOrder,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
} catch (error) {
|
||||
throw new core.exceptions.PluginError(error.toString());
|
||||
} finally {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
self.data.canceled = false;
|
||||
antModalButton.disabled = true;
|
||||
if (antModalRoot.parentElement === document.body) {
|
||||
document.body.removeChild(antModalRoot);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const plugin: DEXTRPlugin = {
|
||||
name: 'Deep extreme cut',
|
||||
description: 'Plugin allows to get a polygon from extreme points using AI',
|
||||
cvat: {
|
||||
classes: {
|
||||
Job: {
|
||||
prototype: {
|
||||
annotations: {
|
||||
put: {
|
||||
enter,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: {
|
||||
canceled: false,
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
antModalButton.onclick = () => {
|
||||
plugin.data.canceled = true;
|
||||
};
|
||||
|
||||
export function activate(canvasInstance: Canvas): void {
|
||||
if (!plugin.data.enabled) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
canvasInstance.draw = (drawData: any): void => {
|
||||
if (drawData.enabled && drawData.shapeType === ShapeType.POLYGON
|
||||
&& (typeof (drawData.numberOfPoints) === 'undefined' || drawData.numberOfPoints >= 4)
|
||||
&& (typeof (drawData.initialState) === 'undefined')
|
||||
) {
|
||||
const patchedData = { ...drawData };
|
||||
patchedData.shapeType = ShapeType.POINTS;
|
||||
patchedData.crosshair = true;
|
||||
Object.getPrototypeOf(canvasInstance)
|
||||
.draw.call(canvasInstance, patchedData);
|
||||
} else {
|
||||
Object.getPrototypeOf(canvasInstance)
|
||||
.draw.call(canvasInstance, drawData);
|
||||
}
|
||||
};
|
||||
plugin.data.enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
export function deactivate(canvasInstance: Canvas): void {
|
||||
if (plugin.data.enabled) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
canvasInstance.draw = Object.getPrototypeOf(canvasInstance).draw;
|
||||
plugin.data.enabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function registerDEXTRPlugin(): void {
|
||||
core.plugins.register(plugin);
|
||||
}
|
||||
Loading…
Reference in New Issue