[Dependent] Simple Review Pipeline (Client)

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Manual review pipeline: issues/comments/workspace (<https://github.com/openvinotoolkit/cvat/pull/2357>)
 - Added basic projects implementation (<https://github.com/openvinotoolkit/cvat/pull/2255>)
 
 ### Changed

cvat-canvas/README.md

@@ -50,12 +50,13 @@ Canvas itself handles:
         IDLE = 'idle',
         DRAG = 'drag',
         RESIZE = 'resize',
-        INTERACT = 'interact',
         DRAW = 'draw',
         EDIT = 'edit',
         MERGE = 'merge',
         SPLIT = 'split',
         GROUP = 'group',
+        INTERACT = 'interact',
+        SELECT_ROI = 'select_roi',
         DRAG_CANVAS = 'drag_canvas',
         ZOOM_CANVAS = 'zoom_canvas',
     }
@@ -111,30 +112,33 @@ Canvas itself handles:
 
     interface Canvas {
         html(): HTMLDivElement;
-        setZLayer(zLayer: number | null): void;
-        setup(frameData: any, objectStates: any[]): void;
-        activate(clientID: number, attributeID?: number): void;
-        rotate(frameAngle: number): void;
+        setup(frameData: any, objectStates: any[], zLayer?: number): void;
+        setupReviewROIs(reviewROIs: Record<number, number[]>): void;
+        activate(clientID: number | null, attributeID?: number): void;
+        rotate(rotationAngle: number): void;
         focus(clientID: number, padding?: number): void;
         fit(): void;
         grid(stepX: number, stepY: number): void;
 
-        draw(drawData: DrawData): void;
         interact(interactionData: InteractionData): void;
+        draw(drawData: DrawData): void;
         group(groupData: GroupData): void;
         split(splitData: SplitData): void;
         merge(mergeData: MergeData): void;
         select(objectState: any): void;
 
         fitCanvas(): void;
-        bitmap(enabled: boolean): void;
+        bitmap(enable: boolean): void;
+        selectROI(enable: boolean): void;
         dragCanvas(enable: boolean): void;
         zoomCanvas(enable: boolean): void;
 
         mode(): Mode;
         cancel(): void;
         configure(configuration: Configuration): void;
         isAbleToChangeFrame(): boolean;
+
+        readonly geometry: Geometry;
     }
 ```
 
@@ -147,11 +151,14 @@ Canvas itself handles:
   `cvat_canvas_shape_merging`,
   `cvat_canvas_shape_drawing`,
   `cvat_canvas_shape_occluded`
+- Drawn review ROIs have an id `cvat_canvas_issue_region_{issue.id}`
+- Drawn review roi has the class `cvat_canvas_issue_region`
 - 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` and `cvat_canvas_grid_pattern`
 - Crosshair during a draw has class `cvat_canvas_crosshair`
+- To stick something to a specific position you can use an element with id `cvat_canvas_attachment_board`
 
 ### Events
 
@@ -178,6 +185,7 @@ Standard JS events are used.
     - canvas.zoom
     - canvas.fit
     - canvas.dragshape => {id: number}
+    - canvas.roiselected => {points: number[]}
     - canvas.resizeshape => {id: number}
     - canvas.contextmenu => { mouseEvent: MouseEvent, objectState: ObjectState,  pointID: number }
 ```
@@ -205,28 +213,33 @@ canvas.draw({
 });
 ```
 
+<!--lint disable maximum-line-length-->
+
 ## API Reaction
 
-|              | IDLE | GROUP | SPLIT | DRAW | MERGE | EDIT | DRAG | RESIZE | ZOOM_CANVAS | DRAG_CANVAS | INTERACT |
-| ------------ | ---- | ----- | ----- | ---- | ----- | ---- | ---- | ------ | ----------- | ----------- | -------- |
-| setup()      | +    | +     | +     | +/-  | +     | +/-  | +/-  | +/-    | +           | +           | +        |
-| activate()   | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           | -        |
-| rotate()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| focus()      | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| fit()        | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| grid()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| draw()       | +    | -     | -     | +    | -     | -    | -    | -      | -           | -           | -        |
-| interact()   | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           | +        |
-| split()      | +    | -     | +     | -    | -     | -    | -    | -      | -           | -           | -        |
-| group()      | +    | +     | -     | -    | -     | -    | -    | -      | -           | -           | -        |
-| merge()      | +    | -     | -     | -    | +     | -    | -    | -      | -           | -           | -        |
-| fitCanvas()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| dragCanvas() | +    | -     | -     | -    | -     | -    | +    | -      | -           | +           | -        |
-| zoomCanvas() | +    | -     | -     | -    | -     | -    | -    | +      | +           | -           | -        |
-| cancel()     | -    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| configure()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| bitmap()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
-| setZLayer()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+|                   | IDLE | GROUP | SPLIT | DRAW | MERGE | EDIT | DRAG | RESIZE | ZOOM_CANVAS | DRAG_CANVAS | INTERACT |
+| ----------------- | ---- | ----- | ----- | ---- | ----- | ---- | ---- | ------ | ----------- | ----------- | -------- |
+| setup()           | +    | +     | +     | +/-  | +     | +/-  | +/-  | +/-    | +           | +           | +        |
+| activate()        | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           | -        |
+| rotate()          | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| focus()           | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| fit()             | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| grid()            | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| draw()            | +    | -     | -     | +    | -     | -    | -    | -      | -           | -           | -        |
+| interact()        | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           | +        |
+| split()           | +    | -     | +     | -    | -     | -    | -    | -      | -           | -           | -        |
+| group()           | +    | +     | -     | -    | -     | -    | -    | -      | -           | -           | -        |
+| merge()           | +    | -     | -     | -    | +     | -    | -    | -      | -           | -           | -        |
+| fitCanvas()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| dragCanvas()      | +    | -     | -     | -    | -     | -    | +    | -      | -           | +           | -        |
+| zoomCanvas()      | +    | -     | -     | -    | -     | -    | -    | +      | +           | -           | -        |
+| cancel()          | -    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| configure()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| bitmap()          | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| setZLayer()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+| setupReviewROIs() | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           | +        |
+
+<!--lint enable maximum-line-length-->
 
 You can call setup() during editing, dragging, and resizing only to update objects, not to change a frame.
 You can change frame during draw only when you do not redraw an existing object

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/scss/canvas.scss

@@ -58,6 +58,23 @@ polyline.cvat_shape_drawing_opacity {
     fill: darkmagenta;
 }
 
+.cvat_canvas_shape_region_selection {
+    @extend .cvat_shape_action_dasharray;
+    @extend .cvat_shape_action_opacity;
+
+    fill: white;
+    stroke: white;
+}
+
+.cvat_canvas_issue_region {
+    display: none;
+    stroke-width: 0;
+}
+
+circle.cvat_canvas_issue_region {
+    opacity: 1 !important;
+}
+
 polyline.cvat_canvas_shape_grouping {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
@@ -258,6 +275,15 @@ polyline.cvat_canvas_shape_splitting {
     height: 100%;
 }
 
+#cvat_canvas_attachment_board {
+    position: absolute;
+    z-index: 4;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+}
+
 @keyframes loadingAnimation {
     0% {
         stroke-dashoffset: 1;

cvat-canvas/src/typescript/canvas.ts

@@ -15,6 +15,7 @@ import {
     RectDrawingMethod,
     CuboidDrawingMethod,
     Configuration,
+    Geometry,
 } from './canvasModel';
 import { Master } from './master';
 import { CanvasController, CanvasControllerImpl } from './canvasController';
@@ -28,6 +29,7 @@ const CanvasVersion = pjson.version;
 interface Canvas {
     html(): HTMLDivElement;
     setup(frameData: any, objectStates: any[], zLayer?: number): void;
+    setupIssueRegions(issueRegions: Record<number, number[]>): void;
     activate(clientID: number | null, attributeID?: number): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding?: number): void;
@@ -43,13 +45,16 @@ interface Canvas {
 
     fitCanvas(): void;
     bitmap(enable: boolean): void;
+    selectRegion(enable: boolean): void;
     dragCanvas(enable: boolean): void;
     zoomCanvas(enable: boolean): void;
 
     mode(): Mode;
     cancel(): void;
     configure(configuration: Configuration): void;
     isAbleToChangeFrame(): boolean;
+
+    readonly geometry: Geometry;
 }
 
 class CanvasImpl implements Canvas {
@@ -71,6 +76,10 @@ class CanvasImpl implements Canvas {
         this.model.setup(frameData, objectStates, zLayer);
     }
 
+    public setupIssueRegions(issueRegions: Record<number, number[]>): void {
+        this.model.setupIssueRegions(issueRegions);
+    }
+
     public fitCanvas(): void {
         this.model.fitCanvas(this.view.html().clientWidth, this.view.html().clientHeight);
     }
@@ -79,6 +88,10 @@ class CanvasImpl implements Canvas {
         this.model.bitmap(enable);
     }
 
+    public selectRegion(enable: boolean): void {
+        this.model.selectRegion(enable);
+    }
+
     public dragCanvas(enable: boolean): void {
         this.model.dragCanvas(enable);
     }
@@ -146,6 +159,10 @@ class CanvasImpl implements Canvas {
     public isAbleToChangeFrame(): boolean {
         return this.model.isAbleToChangeFrame();
     }
+
+    public get geometry(): Geometry {
+        return this.model.geometry;
+    }
 }
 
 export {

cvat-canvas/src/typescript/canvasController.ts

@@ -14,10 +14,12 @@ import {
     GroupData,
     Mode,
     InteractionData,
+    Configuration,
 } from './canvasModel';
 
 export interface CanvasController {
     readonly objects: any[];
+    readonly issueRegions: Record<number, number[]>;
     readonly zLayer: number | null;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
@@ -27,6 +29,7 @@ export interface CanvasController {
     readonly splitData: SplitData;
     readonly groupData: GroupData;
     readonly selected: any;
+    readonly configuration: Configuration;
     mode: Mode;
     geometry: Geometry;
 
@@ -36,6 +39,7 @@ export interface CanvasController {
     merge(mergeData: MergeData): void;
     split(splitData: SplitData): void;
     group(groupData: GroupData): void;
+    selectRegion(enabled: boolean): void;
     enableDrag(x: number, y: number): void;
     drag(x: number, y: number): void;
     disableDrag(): void;
@@ -103,6 +107,10 @@ export class CanvasControllerImpl implements CanvasController {
         this.model.group(groupData);
     }
 
+    public selectRegion(enable: boolean): void {
+        this.model.selectRegion(enable);
+    }
+
     public get geometry(): Geometry {
         return this.model.geometry;
     }
@@ -115,6 +123,10 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.zLayer;
     }
 
+    public get issueRegions(): Record<number, number[]> {
+        return this.model.issueRegions;
+    }
+
     public get objects(): any[] {
         return this.model.objects;
     }
@@ -151,6 +163,10 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.selected;
     }
 
+    public get configuration(): Configuration {
+        return this.model.configuration;
+    }
+
     public set mode(value: Mode) {
         this.model.mode = value;
     }