React UI: Improved mouse behaviour during draw/merge/edit/group/split (#1130)

* Moving image with mouse during drawing, paste, group, split, merge

* Babel plugin to dev deps

* Move mouse during editing

* Minor issues

cvat-canvas/src/typescript/canvasView.ts

@@ -615,11 +615,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.content.addEventListener('mousedown', (event): void => {
             if ([1, 2].includes(event.which)) {
-                if ([Mode.DRAG_CANVAS, Mode.IDLE].includes(this.mode)) {
+                self.controller.enableDrag(event.clientX, event.clientY);
-                    self.controller.enableDrag(event.clientX, event.clientY);
-                } else if ([Mode.ZOOM_CANVAS, Mode.DRAW].includes(this.mode) && event.which === 2) {
-                    self.controller.enableDrag(event.clientX, event.clientY);
-                }
                 event.preventDefault();
             }
         });

cvat-canvas/src/typescript/drawHandler.ts

@@ -115,6 +115,7 @@ export class DrawHandlerImpl implements DrawHandler {
 
     private release(): void {
         this.canvas.off('mousedown.draw');
+        this.canvas.off('mouseup.draw');
         this.canvas.off('mousemove.draw');
         this.canvas.off('click.draw');
 
@@ -179,14 +180,7 @@ export class DrawHandlerImpl implements DrawHandler {
 
     private drawBox(): void {
         this.drawInstance = this.canvas.rect();
-        this.drawInstance.draw({
+        this.drawInstance.on('drawstop', (e: Event): void => {
-            snapToGrid: 0.1,
-        }).addClass('cvat_canvas_shape_drawing').attr({
-            'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            z_order: Number.MAX_SAFE_INTEGER,
-        }).on('drawupdate', (): void => {
-            this.shapeSizeElement.update(this.drawInstance);
-        }).on('drawstop', (e: Event): void => {
             const bbox = (e.target as SVGRectElement).getBBox();
             const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox);
 
@@ -198,6 +192,11 @@ export class DrawHandlerImpl implements DrawHandler {
             } else {
                 this.onDrawDone(null);
             }
+        }).on('drawupdate', (): void => {
+            this.shapeSizeElement.update(this.drawInstance);
+        }).addClass('cvat_canvas_shape_drawing').attr({
+            'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+            z_order: Number.MAX_SAFE_INTEGER,
         });
     }
 
@@ -213,25 +212,20 @@ export class DrawHandlerImpl implements DrawHandler {
             }
         }.bind(this);
 
-        const sizeIncrement = function sizeIncrement(): void {
-            size++;
-        };
-
         if (this.drawData.numberOfPoints) {
             this.drawInstance.on('drawstart', sizeDecrement);
             this.drawInstance.on('drawpoint', sizeDecrement);
-            this.drawInstance.on('undopoint', sizeIncrement);
+            this.drawInstance.on('undopoint', (): number => size++);
         }
 
         // Add ability to cancel the latest drawn point
-        const handleUndo = function handleUndo(e: MouseEvent): void {
+        this.canvas.on('mousedown.draw', (e: MouseEvent): void => {
             if (e.which === 3) {
                 e.stopPropagation();
                 e.preventDefault();
                 this.drawInstance.draw('undo');
             }
-        }.bind(this);
+        });
-        this.canvas.on('mousedown.draw', handleUndo);
 
         // Add ability to draw shapes by sliding
         // We need to remember last drawn point
@@ -244,7 +238,7 @@ export class DrawHandlerImpl implements DrawHandler {
             y: null,
         };
 
-        const handleSlide = function handleSlide(e: MouseEvent): void {
+        this.canvas.on('mousemove.draw', (e: MouseEvent): void => {
             // TODO: Use enumeration after typification cvat-core
             if (e.shiftKey && ['polygon', 'polyline'].includes(this.drawData.shapeType)) {
                 if (lastDrawnPoint.x === null || lastDrawnPoint.y === null) {
@@ -259,14 +253,15 @@ export class DrawHandlerImpl implements DrawHandler {
                         this.drawInstance.draw('point', e);
                     }
                 }
+
+                e.stopPropagation();
+                e.preventDefault();
             }
-        }.bind(this);
+        });
-        this.canvas.on('mousemove.draw', handleSlide);
 
         // We need scale just drawn points
-        const self = this;
         this.drawInstance.on('drawstart drawpoint', (e: CustomEvent): void => {
-            self.transform(self.geometry);
+            this.transform(this.geometry);
             lastDrawnPoint.x = e.detail.event.clientX;
             lastDrawnPoint.y = e.detail.event.clientY;
         });
@@ -307,39 +302,36 @@ export class DrawHandlerImpl implements DrawHandler {
     }
 
     private drawPolygon(): void {
-        this.drawInstance = (this.canvas as any).polygon().draw({
+        this.drawInstance = (this.canvas as any).polygon()
-            snapToGrid: 0.1,
+            .addClass('cvat_canvas_shape_drawing').attr({
-        }).addClass('cvat_canvas_shape_drawing').attr({
+                'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+            });
-        });
 
         this.drawPolyshape();
     }
 
     private drawPolyline(): void {
-        this.drawInstance = (this.canvas as any).polyline().draw({
+        this.drawInstance = (this.canvas as any).polyline()
-            snapToGrid: 0.1,
+            .addClass('cvat_canvas_shape_drawing').attr({
-        }).addClass('cvat_canvas_shape_drawing').attr({
+                'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': 0,
-            'fill-opacity': 0,
+            });
-        });
 
         this.drawPolyshape();
     }
 
     private drawPoints(): void {
-        this.drawInstance = (this.canvas as any).polygon().draw({
+        this.drawInstance = (this.canvas as any).polygon()
-            snapToGrid: 0.1,
+            .addClass('cvat_canvas_shape_drawing').attr({
-        }).addClass('cvat_canvas_shape_drawing').attr({
+                'stroke-width': 0,
-            'stroke-width': 0,
+                opacity: 0,
-            opacity: 0,
+            });
-        });
 
         this.drawPolyshape();
     }
 
     private pastePolyshape(): void {
-        this.canvas.on('click.draw', (e: MouseEvent): void => {
+        this.drawInstance.on('done', (e: CustomEvent): void => {
             const targetPoints = this.drawInstance
                 .attr('points')
                 .split(/[,\s]/g)
@@ -355,7 +347,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 attributes: { ...this.drawData.initialState.attributes },
                 label: this.drawData.initialState.label,
                 color: this.drawData.initialState.color,
-            }, e.ctrlKey);
+            }, e.detail.originalEvent.ctrlKey);
         });
     }
 
@@ -384,7 +376,7 @@ export class DrawHandlerImpl implements DrawHandler {
             });
         this.pasteShape();
 
-        this.canvas.on('click.draw', (e: MouseEvent): void => {
+        this.drawInstance.on('done', (e: CustomEvent): void => {
             const bbox = this.drawInstance.node.getBBox();
             const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox);
             this.release();
@@ -396,7 +388,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 attributes: { ...this.drawData.initialState.attributes },
                 label: this.drawData.initialState.label,
                 color: this.drawData.initialState.color,
-            }, e.ctrlKey);
+            }, e.detail.originalEvent.ctrlKey);
         });
     }
 
@@ -463,6 +455,60 @@ export class DrawHandlerImpl implements DrawHandler {
         this.pastePolyshape();
     }
 
+    private setupPasteEvents(): void {
+        let mouseX: number | null = null;
+        let mouseY: number | null = null;
+
+        this.canvas.on('mousedown.draw', (e: MouseEvent): void => {
+            if (e.which === 1) {
+                mouseX = e.clientX;
+                mouseY = e.clientY;
+            }
+        });
+
+        this.canvas.on('mouseup.draw', (e: MouseEvent): void => {
+            const threshold = 10; // px
+            if (e.which === 1) {
+                if (Math.sqrt( // l2 distance < threshold
+                    ((mouseX - e.clientX) ** 2)
+                    + ((mouseY - e.clientY) ** 2),
+                ) < threshold) {
+                    this.drawInstance.fire('done', { originalEvent: e });
+                }
+            }
+        });
+    }
+
+    private setupDrawEvents(): void {
+        let initialized = false;
+        let mouseX: number | null = null;
+        let mouseY: number | null = null;
+
+        this.canvas.on('mousedown.draw', (e: MouseEvent): void => {
+            if (e.which === 1) {
+                mouseX = e.clientX;
+                mouseY = e.clientY;
+            }
+        });
+
+        this.canvas.on('mouseup.draw', (e: MouseEvent): void => {
+            const threshold = 10; // px
+            if (e.which === 1) {
+                if (Math.sqrt( // l2 distance < threshold
+                    ((mouseX - e.clientX) ** 2)
+                    + ((mouseY - e.clientY) ** 2),
+                ) < threshold) {
+                    if (!initialized) {
+                        this.drawInstance.draw(e, { snapToGrid: 0.1 });
+                        initialized = true;
+                    } else {
+                        this.drawInstance.draw(e);
+                    }
+                }
+            }
+        });
+    }
+
     private startDraw(): void {
         // TODO: Use enums after typification cvat-core
         if (this.drawData.initialState) {
@@ -490,16 +536,22 @@ export class DrawHandlerImpl implements DrawHandler {
                     this.pastePoints(stringifiedPoints);
                 }
             }
-        } else if (this.drawData.shapeType === 'rectangle') {
+
-            this.drawBox();
+            this.setupPasteEvents();
-            // Draw instance was initialized after drawBox();
+        } else {
-            this.shapeSizeElement = displayShapeSize(this.canvas, this.text);
+            if (this.drawData.shapeType === 'rectangle') {
-        } else if (this.drawData.shapeType === 'polygon') {
+                this.drawBox();
-            this.drawPolygon();
+                // Draw instance was initialized after drawBox();
-        } else if (this.drawData.shapeType === 'polyline') {
+                this.shapeSizeElement = displayShapeSize(this.canvas, this.text);
-            this.drawPolyline();
+            } else if (this.drawData.shapeType === 'polygon') {
-        } else if (this.drawData.shapeType === 'points') {
+                this.drawPolygon();
-            this.drawPoints();
+            } else if (this.drawData.shapeType === 'polyline') {
+                this.drawPolyline();
+            } else if (this.drawData.shapeType === 'points') {
+                this.drawPoints();
+            }
+
+            this.setupDrawEvents();
         }
     }
 

cvat-canvas/src/typescript/editHandler.ts

@@ -38,6 +38,14 @@ export class EditHandlerImpl implements EditHandler {
             this.editedShape.attr('points').split(' ')[this.editData.pointID].split(','),
         );
 
+        // generate mouse event
+        const dummyEvent = new MouseEvent('mousedown', {
+            bubbles: true,
+            cancelable: true,
+            clientX,
+            clientY,
+        });
+
         // Add ability to edit shapes by sliding
         // We need to remember last drawn point
         // to implementation of slide drawing
@@ -49,10 +57,10 @@ export class EditHandlerImpl implements EditHandler {
             y: null,
         };
 
-        const handleSlide = function handleSlide(e: MouseEvent): void {
+        this.canvas.on('mousemove.edit', (e: MouseEvent): void => {
-            if (e.shiftKey) {
+            if (e.shiftKey && ['polygon', 'polyline'].includes(this.editData.state.shapeType)) {
                 if (lastDrawnPoint.x === null || lastDrawnPoint.y === null) {
-                    this.editLine.draw('point', e);
+                    (this.editLine as any).draw('point', e);
                 } else {
                     const deltaTreshold = 15;
                     const delta = Math.sqrt(
@@ -60,36 +68,52 @@ export class EditHandlerImpl implements EditHandler {
                         + ((e.clientY - lastDrawnPoint.y) ** 2),
                     );
                     if (delta > deltaTreshold) {
-                        this.editLine.draw('point', e);
+                        (this.editLine as any).draw('point', e);
                     }
                 }
             }
-        }.bind(this);
+        });
-        this.canvas.on('mousemove.draw', handleSlide);
 
-        this.editLine = (this.canvas as any).polyline().draw({
+        this.editLine = (this.canvas as any).polyline();
-            snapToGrid: 0.1,
+        (this.editLine as any).addClass('cvat_canvas_shape_drawing').style({
-        }).addClass('cvat_canvas_shape_drawing').style({
             'pointer-events': 'none',
             'fill-opacity': 0,
         }).on('drawstart drawpoint', (e: CustomEvent): void => {
             this.transform(this.geometry);
             lastDrawnPoint.x = e.detail.event.clientX;
             lastDrawnPoint.y = e.detail.event.clientY;
-        });
+        }).draw(dummyEvent, { snapToGrid: 0.1 });
 
         if (this.editData.state.shapeType === 'points') {
             this.editLine.style('stroke-width', 0);
-        } else {
+            (this.editLine as any).draw('undo');
-            // generate mouse event
-            const dummyEvent = new MouseEvent('mousedown', {
-                bubbles: true,
-                cancelable: true,
-                clientX,
-                clientY,
-            });
-            (this.editLine as any).draw('point', dummyEvent);
         }
+
+        this.setupEditEvents();
+    }
+
+    private setupEditEvents(): void {
+        let mouseX: number | null = null;
+        let mouseY: number | null = null;
+
+        this.canvas.on('mousedown.edit', (e: MouseEvent): void => {
+            if (e.which === 1) {
+                mouseX = e.clientX;
+                mouseY = e.clientY;
+            }
+        });
+
+        this.canvas.on('mouseup.edit', (e: MouseEvent): void => {
+            const threshold = 10; // px
+            if (e.which === 1) {
+                if (Math.sqrt( // l2 distance < threshold
+                    ((mouseX - e.clientX) ** 2)
+                    + ((mouseY - e.clientY) ** 2),
+                ) < threshold) {
+                    (this.editLine as any).draw('point', e);
+                }
+            }
+        });
     }
 
     private selectPolygon(shape: SVG.Polygon): void {
@@ -158,6 +182,11 @@ export class EditHandlerImpl implements EditHandler {
                 });
             }
 
+            // We do not need these events any more
+            this.canvas.off('mousedown.edit');
+            this.canvas.off('mouseup.edit');
+            this.canvas.off('mousemove.edit');
+
             (this.editLine as any).draw('stop');
             this.editLine.remove();
             this.editLine = null;
@@ -236,7 +265,9 @@ export class EditHandlerImpl implements EditHandler {
     }
 
     private release(): void {
-        this.canvas.off('mousemove.draw');
+        this.canvas.off('mousedown.edit');
+        this.canvas.off('mouseup.edit');
+        this.canvas.off('mousemove.edit');
 
         if (this.editedShape) {
             this.setupPoints(false);

cvat-canvas/src/typescript/svg.patch.ts

@@ -14,7 +14,9 @@ SVG.Element.prototype.draw = function constructor(...args: any): any {
     if (!handler) {
         originalDraw.call(this, ...args);
         handler = this.remember('_paintHandler');
-        handler.set = new SVG.Set();
+        if (!handler.set) {
+            handler.set = new SVG.Set();
+        }
     } else {
         originalDraw.call(this, ...args);
     }
@@ -27,7 +29,7 @@ for (const key of Object.keys(originalDraw)) {
 
 // Create undo for polygones and polylines
 function undo(): void {
-    if (this.set.length()) {
+    if (this.set && this.set.length()) {
         this.set.members.splice(-1, 1)[0].remove();
         this.el.array().value.splice(-2, 1);
         this.el.plot(this.el.array());

cvat-core/src/annotations-objects.js

@@ -1299,6 +1299,15 @@
                 return [processedSource, processedTarget];
             }
 
+            if (offset === 0) {
+                return {
+                    points: [...leftPosition.points],
+                    occluded: leftPosition.occluded,
+                    outside: leftPosition.outside,
+                    zOrder: leftPosition.zOrder,
+                };
+            }
+
             let leftBox = findBox(leftPosition.points);
             let rightBox = findBox(rightPosition.points);
 

cvat-ui/package-lock.json

@@ -39,6 +39,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
       "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+      "dev": true,
       "requires": {
         "@babel/highlight": "^7.0.0"
       }
@@ -69,6 +70,7 @@
       "version": "7.6.4",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.4.tgz",
       "integrity": "sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.6.3",
         "jsesc": "^2.5.1",
@@ -120,6 +122,7 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz",
       "integrity": "sha512-O1QWBko4fzGju6VoVvrZg0RROCVifcLxiApnGP3OWfWzvxRZFCoBD81K5ur5e3bVY2Vf/5rIJm8cqPKn8HUJng==",
+      "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.1.0",
         "@babel/helper-member-expression-to-functions": "^7.5.5",
@@ -154,6 +157,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
       "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
+      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.0.0",
         "@babel/template": "^7.1.0",
@@ -164,6 +168,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz",
       "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -181,6 +186,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz",
       "integrity": "sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.5.5"
       }
@@ -212,6 +218,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz",
       "integrity": "sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -219,7 +226,8 @@
     "@babel/helper-plugin-utils": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz",
-      "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA=="
+      "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==",
+      "dev": true
     },
     "@babel/helper-regex": {
       "version": "7.5.5",
@@ -247,6 +255,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz",
       "integrity": "sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==",
+      "dev": true,
       "requires": {
         "@babel/helper-member-expression-to-functions": "^7.5.5",
         "@babel/helper-optimise-call-expression": "^7.0.0",
@@ -268,6 +277,7 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
       "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.4.4"
       }
@@ -299,6 +309,7 @@
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
       "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
+      "dev": true,
       "requires": {
         "chalk": "^2.0.0",
         "esutils": "^2.0.2",
@@ -308,7 +319,8 @@
     "@babel/parser": {
       "version": "7.6.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
-      "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
+      "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A==",
+      "dev": true
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.2.0",
@@ -325,6 +337,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz",
       "integrity": "sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==",
+      "dev": true,
       "requires": {
         "@babel/helper-create-class-features-plugin": "^7.5.5",
         "@babel/helper-plugin-utils": "^7.0.0"
@@ -921,6 +934,7 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz",
       "integrity": "sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "@babel/parser": "^7.6.0",
@@ -931,6 +945,7 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.3.tgz",
       "integrity": "sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.5.5",
         "@babel/generator": "^7.6.3",
@@ -947,6 +962,7 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.3.tgz",
       "integrity": "sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==",
+      "dev": true,
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.13",
@@ -1499,6 +1515,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2486,6 +2503,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2669,6 +2687,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -2676,7 +2695,8 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "combined-stream": {
       "version": "1.0.8",
@@ -3222,6 +3242,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
       "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "dev": true,
       "requires": {
         "ms": "^2.1.1"
       }
@@ -3819,7 +3840,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "eslint-config-airbnb": {
       "version": "17.1.1",
@@ -4125,7 +4147,8 @@
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -5451,7 +5474,8 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
     },
     "globalyzer": {
       "version": "0.1.4",
@@ -5556,7 +5580,8 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.0",
@@ -6382,7 +6407,8 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -7119,7 +7145,8 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -10568,7 +10595,8 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
     },
     "source-map-resolve": {
       "version": "0.5.2",
@@ -10997,6 +11025,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -11220,7 +11249,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",

cvat-ui/package.json

@@ -14,6 +14,7 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "babel": "^6.23.0",
     "babel-loader": "^8.0.6",
@@ -41,7 +42,6 @@
     "webpack-dev-server": "^3.8.0"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.2",