React UI: Player in annotation view & settings page (cvat-ai#1018)

* Active player controls * Setup packages * Playing * Fold/unfold sidebar, minor issues * Improved cvat-canvas integration * Resolved some issues * Added cvat-canvas to Dockerfile.ui * Fit canvas method * Added annotation reducer * Added annotation actions * Added containers * Added components * cvat-canvas removed from dockerignore * Added settings page * Minor improvements * Container for canvas wrapper * Configurable grid * Rotation * fitCanvas added to readme * Aligned table
jasgnft · Jan 13, 2020 · 0277547 · 0277547
1 parent 67239b6
commit 0277547
Show file tree

Hide file tree

Showing 50 changed files with 3,672 additions and 191 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -6,6 +6,5 @@
 /.vscode
 /db.sqlite3
 /keys
-/cvat-canvas
 **/node_modules
 
diff --git a/Dockerfile.ui b/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
 

diff --git a/cvat-canvas/README.md b/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()    | -    | +        | +         | +       | +       | +       |