diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index 9cd354a9b5d8..40b43e42ef16 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/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); - } else if ([Mode.ZOOM_CANVAS, Mode.DRAW].includes(this.mode) && event.which === 2) { - self.controller.enableDrag(event.clientX, event.clientY); - } + self.controller.enableDrag(event.clientX, event.clientY); event.preventDefault(); } }); diff --git a/cvat-canvas/src/typescript/drawHandler.ts b/cvat-canvas/src/typescript/drawHandler.ts index ed27cf7c3700..1d999d9f8b88 100644 --- a/cvat-canvas/src/typescript/drawHandler.ts +++ b/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({ - 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 => { + 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({ - snapToGrid: 0.1, - }).addClass('cvat_canvas_shape_drawing').attr({ - 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, - }); + this.drawInstance = (this.canvas as any).polygon() + .addClass('cvat_canvas_shape_drawing').attr({ + 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, + }); this.drawPolyshape(); } private drawPolyline(): void { - this.drawInstance = (this.canvas as any).polyline().draw({ - snapToGrid: 0.1, - }).addClass('cvat_canvas_shape_drawing').attr({ - 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, - 'fill-opacity': 0, - }); + this.drawInstance = (this.canvas as any).polyline() + .addClass('cvat_canvas_shape_drawing').attr({ + 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, + 'fill-opacity': 0, + }); this.drawPolyshape(); } private drawPoints(): void { - this.drawInstance = (this.canvas as any).polygon().draw({ - snapToGrid: 0.1, - }).addClass('cvat_canvas_shape_drawing').attr({ - 'stroke-width': 0, - opacity: 0, - }); + this.drawInstance = (this.canvas as any).polygon() + .addClass('cvat_canvas_shape_drawing').attr({ + 'stroke-width': 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(); - // Draw instance was initialized after drawBox(); - this.shapeSizeElement = displayShapeSize(this.canvas, this.text); - } else if (this.drawData.shapeType === 'polygon') { - this.drawPolygon(); - } else if (this.drawData.shapeType === 'polyline') { - this.drawPolyline(); - } else if (this.drawData.shapeType === 'points') { - this.drawPoints(); + + this.setupPasteEvents(); + } else { + if (this.drawData.shapeType === 'rectangle') { + this.drawBox(); + // Draw instance was initialized after drawBox(); + this.shapeSizeElement = displayShapeSize(this.canvas, this.text); + } else if (this.drawData.shapeType === 'polygon') { + this.drawPolygon(); + } else if (this.drawData.shapeType === 'polyline') { + this.drawPolyline(); + } else if (this.drawData.shapeType === 'points') { + this.drawPoints(); + } + + this.setupDrawEvents(); } } diff --git a/cvat-canvas/src/typescript/editHandler.ts b/cvat-canvas/src/typescript/editHandler.ts index 8daf9055f16d..242382f7a50e 100644 --- a/cvat-canvas/src/typescript/editHandler.ts +++ b/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 { - if (e.shiftKey) { + this.canvas.on('mousemove.edit', (e: MouseEvent): void => { + 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({ - snapToGrid: 0.1, - }).addClass('cvat_canvas_shape_drawing').style({ + this.editLine = (this.canvas as any).polyline(); + (this.editLine as any).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 { - // generate mouse event - const dummyEvent = new MouseEvent('mousedown', { - bubbles: true, - cancelable: true, - clientX, - clientY, - }); - (this.editLine as any).draw('point', dummyEvent); + (this.editLine as any).draw('undo'); } + + 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); diff --git a/cvat-canvas/src/typescript/svg.patch.ts b/cvat-canvas/src/typescript/svg.patch.ts index 98cacbf3a510..ee8d026a144b 100644 --- a/cvat-canvas/src/typescript/svg.patch.ts +++ b/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()); diff --git a/cvat-core/src/annotations-objects.js b/cvat-core/src/annotations-objects.js index b689f372147a..6248ab70f659 100644 --- a/cvat-core/src/annotations-objects.js +++ b/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); diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 255e584f7074..1e760c836160 100644 --- a/cvat-ui/package-lock.json +++ b/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", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 5059ae7f9e4c..87ec06159890 100644 --- a/cvat-ui/package.json +++ b/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",