React UI: Player updates (cvat-ai#1058)

* Move, zoom integration
* Moving, zooming, additional canvas handler
* Activating & changing for objects
* Improved colors
* Saving annotations on the server
* Fixed size
* Refactoring
* Added couple of notifications
* Basic shape drawing
* Cancel previous drawing
* Refactoring
* Minor draw improvings
* Merge, group, split
* Improved colors

Author: bsekachev

cvat-canvas/README.md

@@ -74,7 +74,6 @@ Canvas itself handles:
         activate(clientID: number, attributeID?: number): void;
         rotate(rotation: Rotation, remember?: boolean): void;
         focus(clientID: number, padding?: number): void;
-        fitCanvas(): void;
         fit(): void;
         grid(stepX: number, stepY: number): void;
 
@@ -84,6 +83,10 @@ Canvas itself handles:
         merge(mergeData: MergeData): void;
         select(objectState: any): void;
 
+        fitCanvas(): void;
+        dragCanvas(enable: boolean): void;
+        zoomCanvas(enable: boolean): void;
+
         cancel(): void;
     }
 ```
@@ -118,6 +121,10 @@ Standard JS events are used.
     - canvas.groupped => {states: ObjectState[]}
     - canvas.merged => {states: ObjectState[]}
     - canvas.canceled
+    - canvas.dragstart
+    - canvas.dragstop
+    - canvas.zoomstart
+    - canvas.zoomstop
 ```
 
 ### WEB
@@ -138,64 +145,26 @@ Standard JS events are used.
     });
 ```
 
-### TypeScript
-- Add to ```tsconfig.json```:
-```json
-    "compilerOptions": {
-        "paths": {
-            "cvat-canvas.node": ["3rdparty/cvat-canvas.node"]
-        }
-    }
-```
-
-- ```3rdparty``` directory contains both ```cvat-canvas.node.js``` and ```cvat-canvas.node.d.ts```.
-- Add alias to ```webpack.config.js```:
-```js
-module.exports = {
-    resolve: {
-        alias: {
-            'cvat-canvas.node': path.resolve(__dirname, '3rdparty/cvat-canvas.node.js'),
-        }
-    }
-}
-```
-
-Than you can use it in TypeScript:
-```ts
-    import * as CANVAS from 'cvat-canvas.node';
-    // Create an instance of a canvas
-    const canvas = new CANVAS.Canvas();
-
-    // Put canvas to a html container
-    htmlContainer.appendChild(canvas.html());
-
-    // Next you can use its API methods. For example:
-    canvas.rotate(CANVAS.Rotation.CLOCKWISE90);
-    canvas.draw({
-        enabled: true,
-        shapeType: 'rectangle',
-        crosshair: true,
-    });
-```
-
 ## States
 
  ![](images/states.svg)
 
 ## API Reaction
 
-|             | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
-|-------------|------|----------|-----------|---------|---------|---------|
-| html()      | +    | +        | +         | +       | +       | +       |
-| setup()     | +    | +        | +         | +       | +       | -       |
-| activate()  | +    | -        | -         | -       | -       | -       |
-| rotate()    | +    | +        | +         | +       | +       | +       |
-| focus()     | +    | +        | +         | +       | +       | +       |
-| fit()       | +    | +        | +         | +       | +       | +       |
-| fitCanvas() | +    | +        | +         | +       | +       | +       |
-| grid()      | +    | +        | +         | +       | +       | +       |
-| draw()      | +    | -        | -         | -       | -       | -       |
-| split()     | +    | -        | +         | -       | -       | -       |
-| group       | +    | +        | -         | -       | -       | -       |
-| merge()     | +    | -        | -         | -       | +       | -       |
-| cancel()    | -    | +        | +         | +       | +       | +       |
+|              | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING | DRAG | ZOOM |
+|--------------|------|----------|-----------|---------|---------|---------|------|------|
+| html()       | +    | +        | +         | +       | +       | +       | +    | +    |
+| setup()      | +    | +        | +         | +       | +       | -       | +    | +    |
+| activate()   | +    | -        | -         | -       | -       | -       | -    | -    |
+| rotate()     | +    | +        | +         | +       | +       | +       | +    | +    |
+| focus()      | +    | +        | +         | +       | +       | +       | +    | +    |
+| fit()        | +    | +        | +         | +       | +       | +       | +    | +    |
+| grid()       | +    | +        | +         | +       | +       | +       | +    | +    |
+| draw()       | +    | -        | -         | -       | -       | -       | -    | -    |
+| split()      | +    | -        | +         | -       | -       | -       | -    | -    |
+| group()      | +    | +        | -         | -       | -       | -       | -    | -    |
+| merge()      | +    | -        | -         | -       | +       | -       | -    | -    |
+| fitCanvas()  | +    | +        | +         | +       | +       | +       | +    | +    |
+| dragCanvas() | +    | -        | -         | -       | -       | -       | +    | -    |
+| zoomCanvas() | +    | -        | -         | -       | -       | -       | -    | +    |
+| cancel()     | -    | +        | +         | +       | +       | +       | +    | +    |

cvat-canvas/src/scss/canvas.scss

@@ -3,7 +3,7 @@
 }
 
 .cvat_canvas_shape {
-    fill-opacity: 0.05;
+    fill-opacity: 0.03;
     stroke-opacity: 1;
 }
 
@@ -68,6 +68,12 @@ polyline.cvat_canvas_shape_merging {
     stroke: black;
 }
 
+.cvat_canvas_zoom_selection {
+    stroke: #096dd9;
+    fill-opacity: 0;
+    stroke-dasharray: 4;
+}
+
 .cvat_canvas_shape_occluded {
     stroke-dasharray: 5;
 }
@@ -78,9 +84,9 @@ polyline.cvat_canvas_shape_merging {
 }
 
 #cvat_canvas_wrapper {
-    width: 98%;
-    height: 98%;
-    margin: 10px;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+    margin: 5px;
     border-radius: 5px;
     background-color: white;
     overflow: hidden;
@@ -103,6 +109,7 @@ polyline.cvat_canvas_shape_merging {
 }
 
 #cvat_canvas_text_content {
+    text-rendering: optimizeSpeed;
     position: absolute;
     z-index: 3;
     pointer-events: none;
@@ -135,6 +142,7 @@ polyline.cvat_canvas_shape_merging {
 }
 
 #cvat_canvas_content {
+    filter: contrast(120%) saturate(150%);
     position: absolute;
     z-index: 2;
     outline: 10px solid black;

cvat-canvas/src/typescript/canvas.ts

@@ -44,6 +44,10 @@ interface Canvas {
     merge(mergeData: MergeData): void;
     select(objectState: any): void;
 
+    fitCanvas(): void;
+    dragCanvas(enable: boolean): void;
+    zoomCanvas(enable: boolean): void;
+
     cancel(): void;
 }
 
@@ -73,7 +77,15 @@ class CanvasImpl implements Canvas {
         );
     }
 
-    public activate(clientID: number, attributeID: number = null): void {
+    public dragCanvas(enable: boolean): void {
+        this.model.dragCanvas(enable);
+    }
+
+    public zoomCanvas(enable: boolean): void {
+        this.model.zoomCanvas(enable);
+    }
+
+    public activate(clientID: number, attributeID: number | null = null): void {
         this.model.activate(clientID, attributeID);
     }