Merge branch 'develop' into dk/cvat-ui

Author: ActiveChooN

.vscode/settings.json

@@ -32,4 +32,6 @@
         "-s",
         "./datumaro",
     ],
+    "licenser.license": "Custom",
+    "licenser.customHeader": "Copyright (C) @YEAR@ Intel Corporation\n\nSPDX-License-Identifier: MIT"
 }

CONTRIBUTING.md

@@ -15,7 +15,7 @@ Next steps should work on clear Ubuntu 18.04.
 - Install necessary dependencies:
 
 ```sh
-$ sudo apt-get install -y curl redis-server python3-dev python3-pip python3-venv libldap2-dev libsasl2-dev
+$ sudo apt update && apt install -y nodejs npm curl redis-server python3-dev python3-pip python3-venv libldap2-dev libsasl2-dev
 ```
 
 -   Install [Visual Studio Code](https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions)
@@ -45,23 +45,28 @@ Password: ***
 Password (again): ***
 ```
 
-- Install UI packages and start UI debug server:
+- Install npm packages for UI and start UI debug server (run the following command from CVAT root directory):
 ```sh
-cd cvat-core && npm install
-cd ../cvat-canvas && npm install
-cd ../cvat-ui && npm install
-npm start
+npm install && \
+cd cvat-core && npm install && \
+cd ../cvat-canvas && npm install && \
+cd ../cvat-ui && npm install && npm start
 ```
 
-- Run Visual Studio Code from the virtual environment
+- Open new terminal (Ctrl + Shift + T), run Visual Studio Code from the virtual environment
 
 ```sh
- code .
+ cd .. && source .env/bin/activate && code
 ```
 
--   Inside Visual Studio Code install [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) and [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) extensions
+-   Install followig vscode extensions:
+    - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
+    - [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
+    - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+    - [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
+    - [licenser](https://marketplace.visualstudio.com/items?itemName=ymotongpoo.licenser)
 
--   Reload Visual Studio Code
+-   Reload Visual Studio Code from virtual environment
 
 -   Select `server: debug` configuration and start it (F5) to run REST server and its workers
 

cvat-canvas/README.md

@@ -32,10 +32,15 @@ Canvas itself handles:
 ### API Methods
 
 ```ts
+    enum RectDrawingMethod {
+        CLASSIC = 'By 2 points',
+        EXTREME_POINTS = 'By 4 points'
+    }
+
     interface DrawData {
         enabled: boolean;
         shapeType?: string;
-        rectDrawingMethod?: string;
+        rectDrawingMethod?: RectDrawingMethod;
         numberOfPoints?: number;
         initialState?: any;
         crosshair?: boolean;
@@ -142,10 +147,10 @@ Standard JS events are used.
         enabled: true,
         shapeType: 'rectangle',
         crosshair: true,
+        rectDrawingMethod: window.Canvas.RectDrawingMethod.CLASSIC,
     });
 ```
 
-
 ## API Reaction
 
 |              | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING | DRAG | ZOOM |

cvat-canvas/postcss.config.js

@@ -1,3 +1,7 @@
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
 /* eslint-disable */
 module.exports = {
     parser: false,

cvat-canvas/src/scss/canvas.scss

@@ -1,3 +1,7 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
 .cvat_canvas_hidden {
     display: none;
 }
@@ -175,4 +179,4 @@ polyline.cvat_canvas_shape_splitting {
     0%   {stroke-dashoffset: 1; stroke: #09c;}
     50%  {stroke-dashoffset: 100; stroke: #f44;}
     100% {stroke-dashoffset: 300; stroke: #09c;}
-}
+}

cvat-canvas/src/typescript/canvas.ts

@@ -1,7 +1,6 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
 
 import {
     DrawData,
@@ -10,6 +9,7 @@ import {
     GroupData,
     CanvasModel,
     CanvasModelImpl,
+    RectDrawingMethod,
 } from './canvasModel';
 
 import {
@@ -140,4 +140,5 @@ class CanvasImpl implements Canvas {
 export {
     CanvasImpl as Canvas,
     CanvasVersion,
+    RectDrawingMethod,
 };

cvat-canvas/src/typescript/canvasController.ts

@@ -1,7 +1,6 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
 
 import {
     CanvasModel,

cvat-canvas/src/typescript/canvasModel.ts

@@ -1,11 +1,9 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
 
 import { MasterImpl } from './master';
 
-
 export interface Size {
     width: number;
     height: number;
@@ -37,10 +35,15 @@ export interface ActiveElement {
     attributeID: number | null;
 }
 
+export enum RectDrawingMethod {
+    CLASSIC = 'By 2 points',
+    EXTREME_POINTS = 'By 4 points'
+}
+
 export interface DrawData {
     enabled: boolean;
     shapeType?: string;
-    rectDrawingMethod?: string;
+    rectDrawingMethod?: RectDrawingMethod;
     numberOfPoints?: number;
     initialState?: any;
     crosshair?: boolean;

cvat-canvas/src/typescript/canvasView.ts

@@ -1,7 +1,6 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
 
 import * as SVG from 'svg.js';
 
@@ -107,11 +106,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 this.geometry,
             );
         } else {
+            this.mode = Mode.IDLE;
             this.controller.draw({
                 enabled: false,
             });
-
-            this.mode = Mode.IDLE;
         }
     }
 
@@ -552,7 +550,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.grid.setAttribute('version', '2');
         this.gridPath.setAttribute('d', 'M 1000 0 L 0 0 0 1000');
         this.gridPath.setAttribute('fill', 'none');
-        this.gridPath.setAttribute('stroke-width', '1.5');
+        this.gridPath.setAttribute('stroke-width', `${consts.BASE_GRID_WIDTH}`);
+        this.gridPath.setAttribute('opacity', 'inherit');
         this.gridPattern.setAttribute('id', 'cvat_canvas_grid_pattern');
         this.gridPattern.setAttribute('width', '100');
         this.gridPattern.setAttribute('height', '100');
@@ -627,7 +626,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.content.addEventListener('mousedown', (event): void => {
             if ([1, 2].includes(event.which)) {
-                self.controller.enableDrag(event.clientX, event.clientY);
+                if (![Mode.ZOOM_CANVAS, Mode.GROUP].includes(this.mode) || event.which === 2) {
+                    self.controller.enableDrag(event.clientX, event.clientY);
+                }
                 event.preventDefault();
             }
         });
@@ -761,13 +762,16 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
         } else if (reason === UpdateReasons.DRAW) {
             const data: DrawData = this.controller.drawData;
-            if (data.enabled) {
+            if (data.enabled && this.mode === Mode.IDLE) {
                 this.canvas.style.cursor = 'crosshair';
                 this.mode = Mode.DRAW;
+                this.drawHandler.draw(data, this.geometry);
             } else {
                 this.canvas.style.cursor = '';
+                if (this.mode !== Mode.IDLE) {
+                    this.drawHandler.draw(data, this.geometry);
+                }
             }
-            this.drawHandler.draw(data, this.geometry);
         } else if (reason === UpdateReasons.MERGE) {
             const data: MergeData = this.controller.mergeData;
             if (data.enabled) {
@@ -1061,24 +1065,18 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const [state] = this.controller.objects
             .filter((_state: any): boolean => _state.clientID === clientID);
 
-        if (!state) {
-            return;
-        }
-
-        if (state.shapeType === 'points') {
+        if (state && state.shapeType === 'points') {
             this.svgShapes[clientID].remember('_selectHandler').nested
                 .style('pointer-events', state.lock ? 'none' : '');
         }
 
-        if (state.hidden || state.lock) {
+        if (!state || state.hidden || state.outside) {
             return;
         }
 
         this.activeElement = { ...activeElement };
         const shape = this.svgShapes[clientID];
-        shape.addClass('cvat_canvas_shape_activated');
         let text = this.svgTexts[clientID];
-        // Draw text if it's hidden by default
         if (!text) {
             text = this.addText(state);
             this.svgTexts[state.clientID] = text;
@@ -1088,7 +1086,11 @@ export class CanvasViewImpl implements CanvasView, Listener {
             );
         }
 
-        const self = this;
+        if (state.lock) {
+            return;
+        }
+
+        shape.addClass('cvat_canvas_shape_activated');
         if (state.shapeType === 'points') {
             this.content.append(this.svgShapes[clientID]
                 .remember('_selectHandler').nested.node);
@@ -1104,7 +1106,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }).on('dragend', (e: CustomEvent): void => {
             if (text) {
                 text.removeClass('cvat_canvas_hidden');
-                self.updateTextPosition(
+                this.updateTextPosition(
                     text,
                     shape,
                 );
@@ -1123,6 +1125,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         + `${shape.attr('y') + shape.attr('height')}`,
                 ).map((x: number): number => x - offset);
 
+                this.drawnStates[state.clientID].points = points;
                 this.onEditDone(state, points);
             }
         });
@@ -1154,7 +1157,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
             if (text) {
                 text.removeClass('cvat_canvas_hidden');
-                self.updateTextPosition(
+                this.updateTextPosition(
                     text,
                     shape,
                 );
@@ -1171,6 +1174,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         + `${shape.attr('y') + shape.attr('height')}`,
                 ).map((x: number): number => x - offset);
 
+                this.drawnStates[state.clientID].points = points;
                 this.onEditDone(state, points);
             }
         });

cvat-canvas/src/typescript/consts.ts

@@ -1,10 +1,9 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
 
 const BASE_STROKE_WIDTH = 1.75;
-const BASE_GRID_WIDTH = 1;
+const BASE_GRID_WIDTH = 2;
 const BASE_POINT_SIZE = 5;
 const TEXT_MARGIN = 10;
 const AREA_THRESHOLD = 9;