Deleted frames

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Task annotations importing via chunk uploads (<https://github.com/openvinotoolkit/cvat/pull/4327>)
 - Advanced filtration and sorting for a list of tasks/projects/cloudstorages (<https://github.com/openvinotoolkit/cvat/pull/4403>)
+- Added ability to delete frames from a job (<https://github.com/openvinotoolkit/cvat/pull/4194>)
 
 ### Changed
 - Added missing geos dependency into Dockerfile (<https://github.com/openvinotoolkit/cvat/pull/4451>)

SECURITY.md

@@ -23,7 +23,7 @@ Please provide as much information as possible, including:
 - Information on known exploits
 - A member of the Intel Product Security Team will review your e-mail and contact you to
   collaborate on resolving the issue.
-  
+
 For more information on how Intel works to resolve security issues, see:
 [Vulnerability handling guidelines](<https://www.intel.com/content/www/us/en/security-center/vulnerability-handling-guidelines.html>)
 

cvat-canvas/README.md

@@ -62,8 +62,19 @@ Canvas itself handles:
     }
 
     interface Configuration {
-        displayAllText?: boolean;
-        undefinedAttrValue?: string;
+      smoothImage?: boolean;
+      autoborders?: boolean;
+      displayAllText?: boolean;
+      textFontSize?: number;
+      textPosition?: 'auto' | 'center';
+      textContent?: string;
+      undefinedAttrValue?: string;
+      showProjections?: boolean;
+      forceDisableEditing?: boolean;
+      intelligentPolygonCrop?: boolean;
+      forceFrameUpdate?: boolean;
+      creationOpacity?: number;
+      canvasFilters?: string;
     }
 
     interface DrawData {

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -248,7 +248,7 @@ polyline.cvat_canvas_shape_splitting {
 }
 
 #cvat_canvas_loading_animation {
-    z-index: 1;
+    z-index: 2;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -265,7 +265,7 @@ polyline.cvat_canvas_shape_splitting {
 #cvat_canvas_text_content {
     text-rendering: optimizeSpeed;
     position: absolute;
-    z-index: 3;
+    z-index: 4;
     pointer-events: none;
     width: 100%;
     height: 100%;
@@ -285,7 +285,7 @@ polyline.cvat_canvas_shape_splitting {
 
     pointer-events: none;
     position: absolute;
-    z-index: 4;
+    z-index: 5;
     background: black;
     width: 100%;
     height: 100%;
@@ -294,7 +294,7 @@ polyline.cvat_canvas_shape_splitting {
 
 #cvat_canvas_grid {
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     pointer-events: none;
     width: 100%;
     height: 100%;
@@ -305,18 +305,30 @@ polyline.cvat_canvas_shape_splitting {
     stroke: white;
 }
 
+#cvat_canvas_deleted_frame_overlay {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+}
+
+#cvat_canvas_deleted_frame_overlay_pattern {
+    stroke: gray;
+}
+
 #cvat_canvas_content {
     filter: contrast(120%) saturate(150%);
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     outline: 10px solid black;
     width: 100%;
     height: 100%;
 }
 
 #cvat_canvas_attachment_board {
     position: absolute;
-    z-index: 4;
+    z-index: 5;
     pointer-events: none;
     width: 100%;
     height: 100%;

cvat-canvas/src/typescript/canvasModel.ts

@@ -65,6 +65,7 @@ export interface Configuration {
     intelligentPolygonCrop?: boolean;
     forceFrameUpdate?: boolean;
     creationOpacity?: number;
+    canvasFilters?: string;
 }
 
 export interface DrawData {
@@ -171,6 +172,7 @@ export enum Mode {
 
 export interface CanvasModel {
     readonly imageBitmap: boolean;
+    readonly imageDeleted: boolean;
     readonly image: Image | null;
     readonly issueRegions: Record<number, { hidden: boolean; points: number[] }>;
     readonly objects: any[];
@@ -230,6 +232,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         imageID: number | null;
         imageOffset: number;
         imageSize: Size;
+        imageDeleted: boolean;
         focusData: FocusData;
         gridSize: Size;
         left: number;
@@ -277,6 +280,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 height: 0,
                 width: 0,
             },
+            imageDeleted: false,
             focusData: {
                 clientID: 0,
                 padding: 0,
@@ -406,14 +410,18 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 throw Error(`Canvas is busy. Action: ${this.data.mode}`);
             }
         }
-        if (frameData.number === this.data.imageID && !this.data.configuration.forceFrameUpdate) {
+        if (frameData.number === this.data.imageID &&
+            this.data.imageDeleted === frameData.deleted &&
+            !this.data.configuration.forceFrameUpdate
+        ) {
             this.data.zLayer = zLayer;
             this.data.objects = objectStates;
             this.notify(UpdateReasons.OBJECTS_UPDATED);
             return;
         }
 
         this.data.imageID = frameData.number;
+        this.data.imageDeleted = frameData.deleted;
         frameData
             .data((): void => {
                 this.data.image = null;
@@ -695,6 +703,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.creationOpacity = configuration.creationOpacity;
         }
 
+        if (typeof configuration.canvasFilters === 'string') {
+            this.data.configuration.canvasFilters = configuration.canvasFilters;
+        }
+
         this.notify(UpdateReasons.CONFIG_UPDATED);
     }
 
@@ -753,6 +765,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         return this.data.imageBitmap;
     }
 
+    public get imageDeleted(): boolean {
+        return this.data.imageDeleted;
+    }
+
     public get image(): Image | null {
         return this.data.image;
     }

cvat-canvas/src/typescript/canvasView.ts

@@ -70,6 +70,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
     private canvas: HTMLDivElement;
     private gridPath: SVGPathElement;
     private gridPattern: SVGPatternElement;
+    private deletedImageOverlay: SVGSVGElement;
+    private deletedImageOverlayPath: SVGPathElement;
+    private deletedImageOverlayPattern: SVGPatternElement;
     private controller: CanvasController;
     private svgShapes: Record<number, SVG.Shape>;
     private svgTexts: Record<number, SVG.Text>;
@@ -93,6 +96,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
     private innerObjectsFlags: {
         drawHidden: Record<number, boolean>;
     };
+    private canvasFilters: string;
 
     private set mode(value: Mode) {
         this.controller.mode = value;
@@ -494,7 +498,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
     }
 
     private moveCanvas(): void {
-        for (const obj of [this.background, this.grid, this.bitmap]) {
+        for (const obj of [this.background, this.grid, this.deletedImageOverlay, this.bitmap]) {
             obj.style.top = `${this.geometry.top}px`;
             obj.style.left = `${this.geometry.left}px`;
         }
@@ -515,7 +519,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
     private transformCanvas(): void {
         // Transform canvas
-        for (const obj of [this.background, this.grid, this.content, this.bitmap, this.attachmentBoard]) {
+        for (const obj of [
+            this.background, this.grid, this.deletedImageOverlay, this.content, this.bitmap, this.attachmentBoard,
+        ]) {
             obj.style.transform = `scale(${this.geometry.scale}) rotate(${this.geometry.angle}deg)`;
         }
 
@@ -595,7 +601,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
     }
 
     private resizeCanvas(): void {
-        for (const obj of [this.background, this.grid, this.bitmap]) {
+        for (const obj of [this.background, this.grid, this.deletedImageOverlay, this.bitmap]) {
             obj.style.width = `${this.geometry.image.width}px`;
             obj.style.height = `${this.geometry.image.height}px`;
         }
@@ -988,6 +994,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.innerObjectsFlags = {
             drawHidden: {},
         };
+        this.canvasFilters = '';
 
         // Create HTML elements
         this.loadingAnimation = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -1001,6 +1008,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.gridPath = window.document.createElementNS('http://www.w3.org/2000/svg', 'path');
         this.gridPattern = window.document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
 
+        this.deletedImageOverlay = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.deletedImageOverlayPath = window.document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        this.deletedImageOverlayPattern = window.document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
+
         this.content = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         this.adoptedContent = SVG.adopt((this.content as any) as HTMLElement) as SVG.Container;
 
@@ -1009,11 +1020,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.canvas = window.document.createElement('div');
 
         const loadingCircle: SVGCircleElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
         const gridDefs: SVGDefsElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'defs');
         const gridRect: SVGRectElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        const deletedImageOverlayDefs: SVGDefsElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        const deletedImageOverlayRect: SVGRectElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 
         // Setup defs
         const contentDefs = this.adoptedContent.defs();
+
         this.issueRegionPattern_1 = contentDefs
             .pattern(consts.BASE_PATTERN_SIZE, consts.BASE_PATTERN_SIZE, (add): void => {
                 add.line(0, 0, 0, 10).stroke('red');
@@ -1056,6 +1071,22 @@ export class CanvasViewImpl implements CanvasView, Listener {
         gridRect.setAttribute('height', '100%');
         gridRect.setAttribute('fill', 'url(#cvat_canvas_grid_pattern)');
 
+        // Setup deleted frame overlay
+        this.deletedImageOverlay.setAttribute('id', 'cvat_canvas_deleted_frame_overlay');
+        this.deletedImageOverlay.setAttribute('version', '2');
+        this.deletedImageOverlayPath.setAttribute('d', 'M 1000 0 L 0 0 1000 0');
+        this.deletedImageOverlayPath.setAttribute('fill', 'none');
+        this.deletedImageOverlayPath.setAttribute('stroke-width', `${consts.BASE_DELETED_PATTERN_WIDTH}`);
+        this.deletedImageOverlayPath.setAttribute('opacity', '0.75');
+        this.deletedImageOverlayPattern.setAttribute('id', 'cvat_canvas_deleted_frame_overlay_pattern');
+        this.deletedImageOverlayPattern.setAttribute('width', '100');
+        this.deletedImageOverlayPattern.setAttribute('height', '100');
+        this.deletedImageOverlayPattern.setAttribute('patternUnits', 'userSpaceOnUse');
+        this.deletedImageOverlayPattern.setAttribute('patternTransform', 'rotate(45)');
+        deletedImageOverlayRect.setAttribute('width', '100%');
+        deletedImageOverlayRect.setAttribute('height', '100%');
+        deletedImageOverlayRect.setAttribute('fill', 'url(#cvat_canvas_deleted_frame_overlay_pattern)');
+
         // Setup content
         this.text.setAttribute('id', 'cvat_canvas_text_content');
         this.background.setAttribute('id', 'cvat_canvas_background');
@@ -1077,10 +1108,17 @@ export class CanvasViewImpl implements CanvasView, Listener {
         gridDefs.appendChild(this.gridPattern);
         this.gridPattern.appendChild(this.gridPath);
 
+        this.deletedImageOverlay.appendChild(deletedImageOverlayDefs);
+        this.deletedImageOverlay.appendChild(deletedImageOverlayRect);
+
+        deletedImageOverlayDefs.appendChild(this.deletedImageOverlayPattern);
+        this.deletedImageOverlayPattern.appendChild(this.deletedImageOverlayPath);
+
         this.canvas.appendChild(this.loadingAnimation);
         this.canvas.appendChild(this.text);
         this.canvas.appendChild(this.background);
         this.canvas.appendChild(this.bitmap);
+        this.canvas.appendChild(this.deletedImageOverlay);
         this.canvas.appendChild(this.grid);
         this.canvas.appendChild(this.content);
         this.canvas.appendChild(this.attachmentBoard);
@@ -1241,6 +1279,14 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }
             }
 
+            if (typeof configuration.canvasFilters === 'string') {
+                this.canvasFilters = configuration.canvasFilters;
+
+                if (!model.imageDeleted) {
+                    this.background.style.filter = this.canvasFilters;
+                }
+            }
+
             this.activate(activeElement);
             this.editHandler.configurate(this.configuration);
             this.drawHandler.configurate(this.configuration);
@@ -1282,6 +1328,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         ctx.drawImage(image.imageData, 0, 0);
                     }
                 }
+
+                if (model.imageDeleted) {
+                    this.deletedImageOverlay.style.display = null;
+                    this.background.style.filter = 'saturate(0) brightness(1.5) contrast(0.5)';
+                } else {
+                    this.background.style.filter = this.canvasFilters;
+                    this.deletedImageOverlay.style.display = 'none';
+                }
+
                 this.moveCanvas();
                 this.resizeCanvas();
                 this.transformCanvas();

cvat-canvas/src/typescript/consts.ts

@@ -1,9 +1,10 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 const BASE_STROKE_WIDTH = 1.25;
 const BASE_GRID_WIDTH = 2;
+const BASE_DELETED_PATTERN_WIDTH = 50;
 const BASE_POINT_SIZE = 5;
 const TEXT_MARGIN = 10;
 const AREA_THRESHOLD = 9;
@@ -25,6 +26,7 @@ const MINIMUM_TEXT_FONT_SIZE = 8;
 export default {
     BASE_STROKE_WIDTH,
     BASE_GRID_WIDTH,
+    BASE_DELETED_PATTERN_WIDTH,
     BASE_POINT_SIZE,
     TEXT_MARGIN,
     AREA_THRESHOLD,