React UI: Annotation view enhancements

cvat-canvas/README.md

@@ -111,11 +111,12 @@ Canvas itself handles:
 Standard JS events are used.
 ```js
     - canvas.setup
-    - canvas.activated => ObjectState
-    - canvas.deactivated
+    - canvas.activated => {state: ObjectState}
+    - canvas.clicked => {state: ObjectState}
     - canvas.moved => {states: ObjectState[], x: number, y: number}
     - canvas.find => {states: ObjectState[], x: number, y: number}
     - canvas.drawn => {state: DrawnData}
+    - canvas.editstart
     - canvas.edited => {state: ObjectState, points: number[]}
     - canvas.splitted => {state: ObjectState}
     - canvas.groupped => {states: ObjectState[]}

cvat-canvas/src/scss/canvas.scss

@@ -3,15 +3,35 @@
 }
 
 .cvat_canvas_shape {
-    fill-opacity: 0.03;
     stroke-opacity: 1;
 }
 
 polyline.cvat_canvas_shape {
     fill-opacity: 0;
+}
+
+.cvat_shape_action_opacity {
+    fill-opacity: 0.5;
+    stroke-opacity: 1;
+}
+
+polyline.cvat_shape_action_opacity {
+    fill-opacity: 0;
+}
+
+.cvat_shape_drawing_opacity {
+    fill-opacity: 0.2;
     stroke-opacity: 1;
 }
 
+polyline.cvat_shape_drawing_opacity {
+    fill-opacity: 0;
+}
+
+.cvat_shape_action_dasharray {
+    stroke-dasharray: 4 1 2 3;
+}
+
 .cvat_canvas_text {
     font-weight: bold;
     font-size: 1.2em;
@@ -27,51 +47,52 @@ polyline.cvat_canvas_shape {
     stroke: red;
 }
 
-.cvat_canvas_shape_activated {
-    fill-opacity: 0.3;
-}
-
 .cvat_canvas_shape_grouping {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
     fill: darkmagenta;
-    fill-opacity: 0.5;
 }
 
 polyline.cvat_canvas_shape_grouping {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
     stroke: darkmagenta;
-    stroke-opacity: 1;
 }
 
 .cvat_canvas_shape_merging {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
     fill: blue;
-    fill-opacity: 0.5;
+}
+
+polyline.cvat_canvas_shape_merging {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
+    stroke: blue;
 }
 
 polyline.cvat_canvas_shape_splitting {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
     stroke: dodgerblue;
-    stroke-opacity: 1;
 }
 
 .cvat_canvas_shape_splitting {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
     fill: dodgerblue;
-    fill-opacity: 0.5;
-}
-
-polyline.cvat_canvas_shape_merging {
-    stroke: blue;
-    stroke-opacity: 1;
 }
 
 .cvat_canvas_shape_drawing {
-    fill-opacity: 0.1;
-    stroke-opacity: 1;
+    @extend .cvat_shape_drawing_opacity;
     fill: white;
     stroke: black;
 }
 
 .cvat_canvas_zoom_selection {
+    @extend .cvat_shape_action_dasharray;
     stroke: #096dd9;
     fill-opacity: 0;
-    stroke-dasharray: 4;
 }
 
 .cvat_canvas_shape_occluded {

cvat-canvas/src/typescript/canvas.ts

@@ -32,7 +32,7 @@ import '../scss/canvas.scss';
 interface Canvas {
     html(): HTMLDivElement;
     setup(frameData: any, objectStates: any[]): void;
-    activate(clientID: number, attributeID?: number): void;
+    activate(clientID: number | null, attributeID?: number): void;
     rotate(rotation: Rotation, remember?: boolean): void;
     focus(clientID: number, padding?: number): void;
     fit(): void;
@@ -85,7 +85,7 @@ class CanvasImpl implements Canvas {
         this.model.zoomCanvas(enable);
     }
 
-    public activate(clientID: number, attributeID: number | null = null): void {
+    public activate(clientID: number | null, attributeID: number | null = null): void {
         this.model.activate(clientID, attributeID);
     }
 

cvat-canvas/src/typescript/canvasModel.ts

@@ -110,7 +110,7 @@ export enum Mode {
 }
 
 export interface CanvasModel {
-    readonly image: string;
+    readonly image: HTMLImageElement | null;
     readonly objects: any[];
     readonly gridSize: Size;
     readonly focusData: FocusData;
@@ -127,7 +127,7 @@ export interface CanvasModel {
     move(topOffset: number, leftOffset: number): void;
 
     setup(frameData: any, objectStates: any[]): void;
-    activate(clientID: number, attributeID: number | null): void;
+    activate(clientID: number | null, attributeID: number | null): void;
     rotate(rotation: Rotation, remember: boolean): void;
     focus(clientID: number, padding: number): void;
     fit(): void;
@@ -151,7 +151,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         activeElement: ActiveElement;
         angle: number;
         canvasSize: Size;
-        image: string;
+        image: HTMLImageElement | null;
         imageID: number | null;
         imageOffset: number;
         imageSize: Size;
@@ -183,7 +183,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 height: 0,
                 width: 0,
             },
-            image: '',
+            image: null,
             imageID: null,
             imageOffset: 0,
             imageSize: {
@@ -291,22 +291,33 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public setup(frameData: any, objectStates: any[]): void {
+        if (frameData.number === this.data.imageID) {
+            this.data.objects = objectStates;
+            this.notify(UpdateReasons.OBJECTS_UPDATED);
+            return;
+        }
+
+        this.data.imageID = frameData.number;
         frameData.data(
             (): void => {
-                this.data.image = '';
+                this.data.image = null;
                 this.notify(UpdateReasons.IMAGE_CHANGED);
             },
-        ).then((data: string): void => {
+        ).then((data: HTMLImageElement): void => {
+            if (frameData.number !== this.data.imageID) {
+                // already another image
+                return;
+            }
+
+            if (!this.data.rememberAngle) {
+                this.data.angle = 0;
+            }
+
             this.data.imageSize = {
                 height: (frameData.height as number),
                 width: (frameData.width as number),
             };
 
-            if (this.data.imageID !== frameData.number && !this.data.rememberAngle) {
-                this.data.angle = 0;
-            }
-            this.data.imageID = frameData.number;
-
             this.data.image = data;
             this.notify(UpdateReasons.IMAGE_CHANGED);
             this.data.objects = objectStates;
@@ -316,8 +327,8 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         });
     }
 
-    public activate(clientID: number, attributeID: number | null): void {
-        if (this.data.mode !== Mode.IDLE) {
+    public activate(clientID: number | null, attributeID: number | null): void {
+        if (this.data.mode !== Mode.IDLE && clientID !== null) {
             // Exception or just return?
             throw Error(`Canvas is busy. Action: ${this.data.mode}`);
         }
@@ -503,7 +514,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         ));
     }
 
-    public get image(): string {
+    public get image(): HTMLImageElement | null {
         return this.data.image;
     }