Added paint brush tools

CHANGELOG.md

@@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Objects sorting option in the sidebar, by z order. Additional visualization when the sorting is applied
 (<https://github.com/opencv/cvat/pull/5145>)
 - Added YOLOv5 serverless function NVIDIA GPU support (<https://github.com/opencv/cvat/pull/4960>)
+- Mask tools are supported now (brush, eraser, polygon-plus, polygon-minus, returning masks
+from online detectors & interactors) (<https://github.com/opencv/cvat/pull/4543>)
 - Added Webhooks (<https://github.com/opencv/cvat/pull/4863>)
 
 ### Changed

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.15.4",
+  "version": "2.16.0",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {
@@ -17,6 +17,8 @@
   ],
   "dependencies": {
     "@types/polylabel": "^1.0.5",
+    "@types/fabric": "^4.5.7",
+    "fabric": "^5.2.1",
     "polylabel": "^1.1.0",
     "svg.draggable.js": "2.2.2",
     "svg.draw.js": "^2.0.4",

cvat-canvas/src/scss/canvas.scss

@@ -1,5 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corp
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -72,6 +72,10 @@ polyline.cvat_shape_drawing_opacity {
     fill: darkmagenta;
 }
 
+image.cvat_canvas_shape_grouping {
+    visibility: hidden;
+}
+
 .cvat_canvas_shape_region_selection {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
@@ -340,6 +344,11 @@ g.cvat_canvas_shape_occluded {
     height: 100%;
 }
 
+.cvat_masks_canvas_wrapper {
+    z-index: 3;
+    display: none;
+}
+
 #cvat_canvas_attachment_board {
     position: absolute;
     z-index: 4;

cvat-canvas/src/typescript/canvas.ts

@@ -1,4 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -8,6 +9,7 @@ import {
     MergeData,
     SplitData,
     GroupData,
+    MasksEditData,
     InteractionData as _InteractionData,
     InteractionResult as _InteractionResult,
     CanvasModel,
@@ -38,6 +40,7 @@ interface Canvas {
 
     interact(interactionData: InteractionData): void;
     draw(drawData: DrawData): void;
+    edit(editData: MasksEditData): void;
     group(groupData: GroupData): void;
     split(splitData: SplitData): void;
     merge(mergeData: MergeData): void;
@@ -129,6 +132,10 @@ class CanvasImpl implements Canvas {
         this.model.draw(drawData);
     }
 
+    public edit(editData: MasksEditData): void {
+        this.model.edit(editData);
+    }
+
     public split(splitData: SplitData): void {
         this.model.split(splitData);
     }

cvat-canvas/src/typescript/canvasController.ts

@@ -1,4 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -15,6 +16,7 @@ import {
     Mode,
     InteractionData,
     Configuration,
+    MasksEditData,
 } from './canvasModel';
 
 export interface CanvasController {
@@ -24,6 +26,7 @@ export interface CanvasController {
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
     readonly drawData: DrawData;
+    readonly editData: MasksEditData;
     readonly interactionData: InteractionData;
     readonly mergeData: MergeData;
     readonly splitData: SplitData;
@@ -35,6 +38,7 @@ export interface CanvasController {
 
     zoom(x: number, y: number, direction: number): void;
     draw(drawData: DrawData): void;
+    edit(editData: MasksEditData): void;
     interact(interactionData: InteractionData): void;
     merge(mergeData: MergeData): void;
     split(splitData: SplitData): void;
@@ -91,6 +95,10 @@ export class CanvasControllerImpl implements CanvasController {
         this.model.draw(drawData);
     }
 
+    public edit(editData: MasksEditData): void {
+        this.model.edit(editData);
+    }
+
     public interact(interactionData: InteractionData): void {
         this.model.interact(interactionData);
     }
@@ -143,6 +151,10 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.drawData;
     }
 
+    public get editData(): MasksEditData {
+        return this.model.editData;
+    }
+
     public get interactionData(): InteractionData {
         return this.model.interactionData;
     }