React UI: Player updates

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);
  }