Semi-automatic tools enhancements (Non-blocking UI, tips)

CHANGELOG.md

@@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Notification if the browser does not support nesassary API
+- Additional inline tips in interactors with demo gifs (<https://github.com/openvinotoolkit/cvat/pull/3473>)
 
 ### Changed
 
-- TDB
+- Non-blocking UI when using interactors (<https://github.com/openvinotoolkit/cvat/pull/3473>)
+- "Selected opacity" slider now defines opacity level for shapes being drawnSelected opacity (<https://github.com/openvinotoolkit/cvat/pull/3473>)
 
 ### Deprecated
 
@@ -874,20 +876,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ```
 ## [Unreleased]
 ### Added
--
+- TDB
 
 ### Changed
--
+- TDB
 
 ### Deprecated
--
+- TDB
 
 ### Removed
--
+- TDB
 
 ### Fixed
--
+- TDB
 
 ### Security
--
+- TDB
 ```

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -24,7 +24,6 @@ polyline.cvat_shape_action_opacity {
 }
 
 .cvat_shape_drawing_opacity {
-    fill-opacity: 0.2;
     stroke-opacity: 1;
 }
 
@@ -161,9 +160,8 @@ polyline.cvat_canvas_shape_splitting {
 
 .cvat_canvas_removable_interaction_point {
     cursor:
-        url(
-            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMUw5IDlNMSA5TDkgMSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K'
-        ) 10 10,
+        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMUw5IDlNMSA5TDkgMSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K')
+        10 10,
         auto;
 }
 

cvat-canvas/src/typescript/canvasModel.ts

@@ -59,6 +59,7 @@ export interface Configuration {
     forceDisableEditing?: boolean;
     intelligentPolygonCrop?: boolean;
     forceFrameUpdate?: boolean;
+    creationOpacity?: number;
 }
 
 export interface DrawData {
@@ -547,6 +548,16 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             }
         }
 
+        // install default values for drawing method
+        if (drawData.enabled) {
+            if (drawData.shapeType === 'rectangle') {
+                this.data.drawData.rectDrawingMethod = drawData.rectDrawingMethod || RectDrawingMethod.CLASSIC;
+            }
+            if (drawData.shapeType === 'cuboid') {
+                this.data.drawData.cuboidDrawingMethod = drawData.cuboidDrawingMethod || CuboidDrawingMethod.CLASSIC;
+            }
+        }
+
         this.notify(UpdateReasons.DRAW);
     }
 
@@ -656,6 +667,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.forceFrameUpdate = configuration.forceFrameUpdate;
         }
 
+        if (typeof configuration.creationOpacity === 'number') {
+            this.data.configuration.creationOpacity = configuration.creationOpacity;
+        }
+
         this.notify(UpdateReasons.CONFIG_UPDATED);
     }
 

cvat-canvas/src/typescript/canvasView.ts

@@ -998,6 +998,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.adoptedContent,
             this.adoptedText,
             this.autoborderHandler,
+            this.geometry,
+            this.configuration,
         );
         this.editHandler = new EditHandlerImpl(this.onEditDone.bind(this), this.adoptedContent, this.autoborderHandler);
         this.mergeHandler = new MergeHandlerImpl(
@@ -1026,6 +1028,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.onInteraction.bind(this),
             this.adoptedContent,
             this.geometry,
+            this.configuration,
         );
 
         // Setup event handlers
@@ -1117,6 +1120,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.activate(activeElement);
             this.editHandler.configurate(this.configuration);
             this.drawHandler.configurate(this.configuration);
+            this.interactionHandler.configurate(this.configuration);
 
             // remove if exist and not enabled
             // this.setupObjects([]);

cvat-canvas/src/typescript/drawHandler.ts

@@ -50,6 +50,7 @@ export class DrawHandlerImpl implements DrawHandler {
     private crosshair: Crosshair;
     private drawData: DrawData;
     private geometry: Geometry;
+    private configuration: Configuration;
     private autoborderHandler: AutoborderHandler;
     private autobordersEnabled: boolean;
 
@@ -371,6 +372,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': this.configuration.creationOpacity,
             });
     }
 
@@ -527,6 +529,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': this.configuration.creationOpacity,
             });
 
         this.drawPolyshape();
@@ -597,6 +600,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': this.configuration.creationOpacity,
             });
     }
 
@@ -654,6 +658,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': this.configuration.creationOpacity,
             });
         this.pasteShape();
 
@@ -686,6 +691,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'fill-opacity': this.configuration.creationOpacity,
             });
         this.pasteShape();
         this.pastePolyshape();
@@ -709,6 +715,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
                 'face-stroke': 'black',
+                'fill-opacity': this.configuration.creationOpacity,
             });
         this.pasteShape();
         this.pastePolyshape();
@@ -845,6 +852,8 @@ export class DrawHandlerImpl implements DrawHandler {
         canvas: SVG.Container,
         text: SVG.Container,
         autoborderHandler: AutoborderHandler,
+        geometry: Geometry,
+        configuration: Configuration,
     ) {
         this.autoborderHandler = autoborderHandler;
         this.autobordersEnabled = false;
@@ -855,7 +864,8 @@ export class DrawHandlerImpl implements DrawHandler {
         this.initialized = false;
         this.canceled = false;
         this.drawData = null;
-        this.geometry = null;
+        this.geometry = geometry;
+        this.configuration = configuration;
         this.crosshair = new Crosshair();
         this.drawInstance = null;
         this.pointsGroup = null;
@@ -874,6 +884,20 @@ export class DrawHandlerImpl implements DrawHandler {
     }
 
     public configurate(configuration: Configuration): void {
+        this.configuration = configuration;
+
+        const isFillableRect = this.drawData
+            && this.drawData.shapeType === 'rectangle'
+            && (this.drawData.rectDrawingMethod === RectDrawingMethod.CLASSIC || this.drawData.initialState);
+        const isFillableCuboid = this.drawData
+            && this.drawData.shapeType === 'cuboid'
+            && (this.drawData.cuboidDrawingMethod === CuboidDrawingMethod.CLASSIC || this.drawData.initialState);
+        const isFilalblePolygon = this.drawData && this.drawData.shapeType === 'polygon';
+
+        if (this.drawInstance && (isFillableRect || isFillableCuboid || isFilalblePolygon)) {
+            this.drawInstance.fill({ opacity: configuration.creationOpacity });
+        }
+
         if (typeof configuration.autoborders === 'boolean') {
             this.autobordersEnabled = configuration.autoborders;
             if (this.drawInstance) {

cvat-canvas/src/typescript/interactionHandler.ts

@@ -8,16 +8,20 @@ import Crosshair from './crosshair';
 import {
     translateToSVG, PropType, stringifyPoints, translateToCanvas,
 } from './shared';
-import { InteractionData, InteractionResult, Geometry } from './canvasModel';
+import {
+    InteractionData, InteractionResult, Geometry, Configuration,
+} from './canvasModel';
 
 export interface InteractionHandler {
     transform(geometry: Geometry): void;
     interact(interactData: InteractionData): void;
+    configurate(config: Configuration): void;
     cancel(): void;
 }
 
 export class InteractionHandlerImpl implements InteractionHandler {
     private onInteraction: (shapes: InteractionResult[] | null, shapesUpdated?: boolean, isDone?: boolean) => void;
+    private configuration: Configuration;
     private geometry: Geometry;
     private canvas: SVG.Container;
     private interactionData: InteractionData;
@@ -196,7 +200,8 @@ export class InteractionHandlerImpl implements InteractionHandler {
             .addClass('cvat_canvas_shape_drawing')
             .attr({
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            });
+            })
+            .fill({ opacity: this.configuration.creationOpacity, color: 'white' });
     }
 
     private initInteraction(): void {
@@ -286,8 +291,8 @@ export class InteractionHandlerImpl implements InteractionHandler {
                     'shape-rendering': 'geometricprecision',
                     'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
                     stroke: erroredShape ? 'red' : 'black',
-                    fill: 'none',
                 })
+                .fill({ opacity: this.configuration.creationOpacity, color: 'white' })
                 .addClass('cvat_canvas_interact_intermediate_shape');
             this.selectize(true, this.drawnIntermediateShape, erroredShape);
         } else {
@@ -339,12 +344,14 @@ export class InteractionHandlerImpl implements InteractionHandler {
         ) => void,
         canvas: SVG.Container,
         geometry: Geometry,
+        configuration: Configuration,
     ) {
         this.onInteraction = (shapes: InteractionResult[] | null, shapesUpdated?: boolean, isDone?: boolean): void => {
             this.shapesWereUpdated = false;
             onInteraction(shapes, shapesUpdated, isDone, this.threshold ? this.thresholdRectSize / 2 : null);
         };
         this.canvas = canvas;
+        this.configuration = configuration;
         this.geometry = geometry;
         this.shapesWereUpdated = false;
         this.interactionShapes = [];
@@ -465,6 +472,25 @@ export class InteractionHandlerImpl implements InteractionHandler {
         }
     }
 
+    public configurate(configuration: Configuration): void {
+        this.configuration = configuration;
+        if (this.drawnIntermediateShape) {
+            this.drawnIntermediateShape.fill({
+                opacity: configuration.creationOpacity,
+            });
+        }
+
+        // when interactRectangle
+        if (this.currentInteractionShape && this.currentInteractionShape.type === 'rect') {
+            this.currentInteractionShape.fill({ opacity: configuration.creationOpacity });
+        }
+
+        // when interactPoints with startwithbbox
+        if (this.interactionShapes[0] && this.interactionShapes[0].type === 'rect') {
+            this.interactionShapes[0].fill({ opacity: configuration.creationOpacity });
+        }
+    }
+
     public cancel(): void {
         this.release();
         this.onInteraction(null);

cvat-canvas/src/typescript/svg.patch.ts

@@ -958,8 +958,12 @@ function getTopDown(edgeIndex: EdgeIndex): number[] {
         },
 
         paintOrientationLines() {
-            const fillColor = this.attr('fill');
-            const strokeColor = this.attr('stroke');
+            // style has higher priority than attr, so then try to fetch it if exists
+            // https://stackoverflow.com/questions/47088409/svg-attributes-beaten-by-cssstyle-in-priority]
+            // we use getComputedStyle to get actual, not-inlined css property (come from the corresponding css class)
+            const computedStyles = getComputedStyle(this.node);
+            const fillColor = computedStyles['fill'] || this.attr('fill');
+            const strokeColor = computedStyles['stroke'] || this.attr('stroke');
             const selectedColor = this.attr('face-stroke') || '#b0bec5';
             this.frontTopEdge.stroke({ color: selectedColor });
             this.frontLeftEdge.stroke({ color: selectedColor });

cvat-core/src/ml-model.js

@@ -14,6 +14,10 @@ class MLModel {
         this._framework = data.framework;
         this._description = data.description;
         this._type = data.type;
+        this._tip = {
+            message: data.help_message,
+            gif: data.animated_gif,
+        };
         this._params = {
             canvas: {
                 minPosVertices: data.min_pos_points,
@@ -84,6 +88,17 @@ class MLModel {
             canvas: { ...this._params.canvas },
         };
     }
+
+    /**
+     * @typedef {Object} MlModelTip
+     * @property {string} message A short message for a user about the model
+     * @property {string} gif A gif URL to be shawn to a user as an example
+     * @returns {MlModelTip}
+     * @readonly
+     */
+    get tip() {
+        return { ...this._tip };
+    }
 }
 
 module.exports = MLModel;

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.21.3",
+  "version": "1.22.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {