Fixed dextr, fixed moving of the canvas (#1573)

* Fixed dextr, fixed moving of the canvas

* Updated CONTRIBUTUNG.md, updated version

Co-authored-by: Nikita Manovich <40690625+nmanovic@users.noreply.github.com>

CHANGELOG.md

@@ -44,13 +44,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Task/Job buttons has no "Open in new tab" option (<https://github.com/opencv/cvat/pull/1419>)
 - Delete point context menu option has no shortcut hint (<https://github.com/opencv/cvat/pull/1416>)
 - Fixed issue with unnecessary tag activation in cvat-canvas (<https://github.com/opencv/cvat/issues/1540>)
-- Fixed an issue with large number of instances in instance mask (https://github.com/opencv/cvat/issues/1539)
+- Fixed an issue with large number of instances in instance mask (<https://github.com/opencv/cvat/issues/1539>)
-- Fixed full COCO dataset import error with conflicting labels in keypoints and detection (https://github.com/opencv/cvat/pull/1548)
+- Fixed full COCO dataset import error with conflicting labels in keypoints and detection (<https://github.com/opencv/cvat/pull/1548>)
-- Fixed COCO keypoints skeleton parsing and saving (https://github.com/opencv/cvat/issues/1539)
+- Fixed COCO keypoints skeleton parsing and saving (<https://github.com/opencv/cvat/issues/1539>)
-- Fixed an error when exporting a task with cuboids to any format except CVAT (https://github.com/opencv/cvat/pull/1577)
+- `tf.placeholder() is not compatible with eager execution` exception for auto_segmentation (<https://github.com/opencv/cvat/pull/1562>)
-- `tf.placeholder() is not compatible with eager execution` exception for auto_segmentation (https://github.com/opencv/cvat/pull/1562)
+- Canvas cannot be moved with move functionality on left mouse key (<https://github.com/opencv/cvat/pull/1573>)
-- Synchronization with remote git repo (https://github.com/opencv/cvat/pull/1582)
+- Deep extreme cut request is sent when draw any shape with Make AI polygon option enabled  (<https://github.com/opencv/cvat/pull/1573>)
-- A problem with mask to polygons conversion when polygons are too small (https://github.com/opencv/cvat/pull/1581)
+- Fixed an error when exporting a task with cuboids to any format except CVAT (<https://github.com/opencv/cvat/pull/1577>)
+- Synchronization with remote git repo (<https://github.com/opencv/cvat/pull/1582>)
+- A problem with mask to polygons conversion when polygons are too small (<https://github.com/opencv/cvat/pull/1581>)
 
 ### Security
 -

cvat-canvas/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/typescript/canvasView.ts

@@ -451,7 +451,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         self.onEditDone(
                             state,
                             points,
-                        )
+                        );
                         e.preventDefault();
                         return;
                     }
@@ -687,7 +687,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.content.addEventListener('mousedown', (event): void => {
             if ([0, 1].includes(event.button)) {
-                if ([Mode.IDLE, Mode.DRAG, Mode.MERGE, Mode.SPLIT].includes(this.mode)
+                if ([Mode.IDLE, Mode.DRAG_CANVAS, Mode.MERGE, Mode.SPLIT].includes(this.mode)
                     || event.button === 1 || event.altKey
                 ) {
                     self.controller.enableDrag(event.clientX, event.clientY);

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -51,7 +51,8 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
         onChangeCuboidDrawingMethod,
     } = props;
 
-    const trackDisabled = shapeType === ShapeType.POLYGON || shapeType === ShapeType.POLYLINE
+    const trackDisabled = shapeType === ShapeType.POLYGON
+        || shapeType === ShapeType.POLYLINE
         || (shapeType === ShapeType.POINTS && numberOfPoints !== 1);
 
     return (
@@ -85,9 +86,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                     </Select>
                 </Col>
             </Row>
-            {
+            { shapeType === ShapeType.POLYGON && <DEXTRPlugin /> }
-                shapeType === ShapeType.POLYGON && <DEXTRPlugin />
-            }
             {
                 shapeType === ShapeType.RECTANGLE && (
                     <>
@@ -183,19 +182,14 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
             <Row type='flex' justify='space-around'>
                 <Col span={12}>
                     <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                        <Button
+                        <Button onClick={onDrawShape}>
-                            onClick={onDrawShape}
-                        >
                             Shape
                         </Button>
                     </Tooltip>
                 </Col>
                 <Col span={12}>
                     <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                        <Button
+                        <Button onClick={onDrawTrack} disabled={trackDisabled}>
-                            onClick={onDrawTrack}
-                            disabled={trackDisabled}
-                        >
                             Track
                         </Button>
                     </Tooltip>

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -107,11 +107,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
     }
 
     private onDraw(objectType: ObjectType): void {
-        const {
+        const { canvasInstance, shapeType, onDrawStart } = this.props;
-            canvasInstance,
-            shapeType,
-            onDrawStart,
-        } = this.props;
 
         const {
             rectDrawingMethod,
@@ -143,8 +139,8 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
     private onChangeCuboidDrawingMethod = (event: RadioChangeEvent): void => {
         this.setState({
             cuboidDrawingMethod: event.target.value,
-        })
+        });
-    }
+    };
 
     private onDrawShape = (): void => {
         this.onDraw(ObjectType.SHAPE);

cvat-ui/src/cvat-store.ts

@@ -10,7 +10,7 @@ import {
     Reducer,
 } from 'redux';
 import { createLogger } from 'redux-logger';
-import {isDev} from 'utils/enviroment';
+import { isDev } from 'utils/enviroment';
 
 
 const logger = createLogger({

cvat-ui/src/utils/dextr-utils.ts

@@ -4,7 +4,8 @@
 
 import getCore from 'cvat-core-wrapper';
 import { Canvas } from 'cvat-canvas-wrapper';
-import { ShapeType, RQStatus } from 'reducers/interfaces';
+import { ShapeType, RQStatus, CombinedState } from 'reducers/interfaces';
+import { getCVATStore } from 'cvat-store';
 
 const core = getCore();
 const baseURL = core.config.backendAPI.slice(0, -7);
@@ -145,6 +146,60 @@ function serverRequest(
     });
 }
 
+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(
+                        self,
+                        this.id,
+                        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',
@@ -154,54 +209,7 @@ const plugin: DEXTRPlugin = {
                 prototype: {
                     annotations: {
                         put: {
-                            async enter(self: DEXTRPlugin, objects: any[]): Promise<void> {
+                            enter,
-                                try {
-                                    if (self.data.enabled) {
-                                        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(
-                                                    self,
-                                                    (this as any).id,
-                                                    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);
-                                    }
-                                }
-                            },
                         },
                     },
                 },