React UI: Player in annotation view & settings page

.dockerignore

@@ -6,6 +6,5 @@
 /.vscode
 /db.sqlite3
 /keys
-/cvat-canvas
 **/node_modules
 

Dockerfile.ui

@@ -22,22 +22,28 @@ RUN apt update && apt install -yq nodejs npm curl && \
  npm install -g n && n 10.16.3
 
 # Create output directories
-RUN mkdir /tmp/cvat-ui /tmp/cvat-core
+RUN mkdir /tmp/cvat-ui /tmp/cvat-core /tmp/cvat-canvas
 
 # Install dependencies
 COPY cvat-core/package*.json /tmp/cvat-core/
+COPY cvat-canvas/package*.json /tmp/cvat-canvas/
 COPY cvat-ui/package*.json /tmp/cvat-ui/
 
 # Install cvat-core dependencies
 WORKDIR /tmp/cvat-core/
 RUN npm install
 
+# Install cvat-canvas dependencies
+WORKDIR /tmp/cvat-canvas/
+RUN npm install
+
 # Install cvat-ui dependencies
 WORKDIR /tmp/cvat-ui/
 RUN npm install
 
 # Build source code
 COPY cvat-core/ /tmp/cvat-core/
+COPY cvat-canvas/ /tmp/cvat-canvas/
 COPY cvat-ui/ /tmp/cvat-ui/
 RUN npm run build
 

cvat-canvas/README.md

@@ -74,6 +74,7 @@ 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;
 
@@ -99,7 +100,7 @@ Canvas itself handles:
 - Drawn texts have the class ```cvat_canvas_text```
 - Tags have the class ```cvat_canvas_tag```
 - Canvas image has ID ```cvat_canvas_image```
-- Grid on the canvas has ID ```cvat_canvas_grid_pattern```
+- Grid on the canvas has ID ```cvat_canvas_grid``` and ```cvat_canvas_grid_pattern```
 - Crosshair during a draw has class ```cvat_canvas_crosshair```
 
 ### Events
@@ -126,6 +127,7 @@ Standard JS events are used.
 
  // Put canvas to a html container
  htmlContainer.appendChild(canvas.html());
+ canvas.fitCanvas();
 
  // Next you can use its API methods. For example:
  canvas.rotate(window.Canvas.Rotation.CLOCKWISE90);
@@ -182,17 +184,18 @@ Than you can use it in TypeScript:
 
 ## API Reaction
 
-| | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
-|------------|------|----------|-----------|---------|---------|---------|
-| html() | + | + | + | + | + | + |
-| setup() | + | + | + | + | + | - |
-| activate() | + | - | - | - | - | - |
-| rotate() | + | + | + | + | + | + |
-| focus() | + | + | + | + | + | + |
-| fit() | + | + | + | + | + | + |
-| grid() | + | + | + | + | + | + |
-| draw() | + | - | - | - | - | - |
-| split() | + | - | + | - | - | - |
-| group | + | + | - | - | - | - |
-| merge() | + | - | - | - | + | - |
-| cancel() | - | + | + | + | + | + |
+| | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
+|-------------|------|----------|-----------|---------|---------|---------|
+| html() | + | + | + | + | + | + |
+| setup() | + | + | + | + | + | - |
+| activate() | + | - | - | - | - | - |
+| rotate() | + | + | + | + | + | + |
+| focus() | + | + | + | + | + | + |
+| fit() | + | + | + | + | + | + |
+| fitCanvas() | + | + | + | + | + | + |
+| grid() | + | + | + | + | + | + |
+| draw() | + | - | - | - | - | - |
+| split() | + | - | + | - | - | - |
+| group | + | + | - | - | - | - |
+| merge() | + | - | - | - | + | - |
+| cancel() | - | + | + | + | + | + |