Added support of skeletons (#1)

Author: bsekachev

.eslintrc.js

@@ -24,10 +24,10 @@ module.exports = {
         'plugin:import/typescript', 'plugin:@typescript-eslint/recommended', 'airbnb-typescript/base',
     ],
     rules: {
-        'header/header': [2, 'line', [{
-            pattern: ' {1}Copyright \\(C\\) (?:20\\d{2}-)?2022 Intel Corporation',
-            template: ' Copyright (C) 2022 Intel Corporation'
-        }, '', ' SPDX-License-Identifier: MIT']],
+        // 'header/header': [2, 'line', [{
+        //     pattern: ' {1}Copyright \\(C\\) (?:20\\d{2}-)?2022 Intel Corporation',
+        //     template: ' Copyright (C) 2022 Intel Corporation'
+        // }, '', ' SPDX-License-Identifier: MIT']],
         'no-plusplus': 0,
         'no-continue': 0,
         'no-console': 0,
@@ -52,6 +52,7 @@ module.exports = {
         'import/order': ['error', {'groups': ['builtin', 'external', 'internal']}],
         'import/prefer-default-export': 0, // works incorrect with interfaces
 
+        '@typescript-eslint/ban-ts-comment': 0,
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/indent': ['error', 4],
         '@typescript-eslint/lines-between-class-members': 0,

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## \[2.2.0] - Unreleased
 ### Added
+- Added ability to delete frames from a job based on (<https://github.com/openvinotoolkit/cvat/pull/4194>)
 - Support of attributes returned by serverless functions based on (<https://github.com/openvinotoolkit/cvat/pull/4506>)
 - Project/task backups uploading via chunk uploads
 - Fixed UX bug when jobs pagination is reset after changing a job
@@ -21,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Documentation for LDAP authentication (<https://github.com/cvat-ai/cvat/pull/39>)
 - OpenCV.js caching and autoload (<https://github.com/cvat-ai/cvat/pull/30>)
 - Publishing dev version of CVAT docker images (<https://github.com/cvat-ai/cvat/pull/53>)
+- Support of Human Pose Estimation, Facial Landmarks (and similar) use-cases, new shape type: Skeleton (<https://github.com/cvat-ai/cvat/pull/1>)
 
 ### Changed
 - Bumped nuclio version to 1.8.14
@@ -57,7 +59,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Advanced filtration and sorting for a list of tasks/projects/cloudstorages (<https://github.com/openvinotoolkit/cvat/pull/4403>)
 - Project dataset importing via chunk uploads (<https://github.com/openvinotoolkit/cvat/pull/4485>)
 - Support paginated list for job commits (<https://github.com/openvinotoolkit/cvat/pull/4482>)
-- 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>)

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -10,6 +10,12 @@
     stroke-opacity: 1;
 }
 
+g.cvat_canvas_shape {
+    > circle {
+        fill-opacity: 1;
+    }
+}
+
 polyline.cvat_canvas_shape {
     fill-opacity: 0;
 }
@@ -120,7 +126,6 @@ polyline.cvat_canvas_shape_splitting {
     @extend .cvat_shape_drawing_opacity;
 
     fill: white;
-    stroke: black;
 }
 
 .cvat_canvas_zoom_selection {
@@ -134,6 +139,12 @@ polyline.cvat_canvas_shape_splitting {
     stroke-dasharray: 5;
 }
 
+g.cvat_canvas_shape_occluded {
+    > rect {
+        stroke-dasharray: 5;
+    }
+}
+
 .svg_select_points_rot {
     fill: white;
 }
@@ -226,6 +237,12 @@ polyline.cvat_canvas_shape_splitting {
     }
 }
 
+.cvat_canvas_skeleton_wrapping_rect {
+    // wrapping rect must not apply transform attribute from selectize.js
+    // otherwise it rotated twice, because we apply the same rotation value to parent element (skeleton itself)
+    transform: none !important;
+}
+
 .cvat_canvas_pixelized {
     image-rendering: optimizeSpeed;             /* Legal fallback */
     image-rendering: -moz-crisp-edges;          /* Firefox        */

cvat-canvas/src/typescript/autoborderHandler.ts

@@ -5,7 +5,7 @@
 import * as SVG from 'svg.js';
 
 import consts from './consts';
-import { Geometry } from './canvasModel';
+import { Configuration, Geometry } from './canvasModel';
 
 interface TransformedShape {
     points: string;
@@ -14,6 +14,7 @@ interface TransformedShape {
 
 export interface AutoborderHandler {
     autoborder(enabled: boolean, currentShape?: SVG.Shape, currentID?: number): void;
+    configurate(configuration: Configuration): void;
     transform(geometry: Geometry): void;
     updateObjects(): void;
 }
@@ -24,19 +25,14 @@ export class AutoborderHandlerImpl implements AutoborderHandler {
     private frameContent: SVGSVGElement;
     private enabled: boolean;
     private scale: number;
+    private controlPointsSize: number;
     private groups: SVGGElement[];
     private auxiliaryGroupID: number | null;
     private auxiliaryClicks: number[];
-    private listeners: Record<
-    number,
-    Record<
-    number,
-    {
+    private listeners: Record<number, Record<number, {
         click: (event: MouseEvent) => void;
         dblclick: (event: MouseEvent) => void;
-    }
-    >
-    >;
+    }>>;
 
     public constructor(frameContent: SVGSVGElement) {
         this.frameContent = frameContent;
@@ -45,6 +41,7 @@ export class AutoborderHandlerImpl implements AutoborderHandler {
         this.enabled = false;
         this.scale = 1;
         this.groups = [];
+        this.controlPointsSize = consts.BASE_POINT_SIZE;
         this.auxiliaryGroupID = null;
         this.auxiliaryClicks = [];
         this.listeners = {};
@@ -126,7 +123,7 @@ export class AutoborderHandlerImpl implements AutoborderHandler {
                         circle.setAttribute('stroke-width', `${consts.POINTS_STROKE_WIDTH / this.scale}`);
                         circle.setAttribute('cx', x);
                         circle.setAttribute('cy', y);
-                        circle.setAttribute('r', `${consts.BASE_POINT_SIZE / this.scale}`);
+                        circle.setAttribute('r', `${this.controlPointsSize / this.scale}`);
 
                         const click = (event: MouseEvent): void => {
                             event.stopPropagation();
@@ -303,9 +300,13 @@ export class AutoborderHandlerImpl implements AutoborderHandler {
         this.scale = geometry.scale;
         this.groups.forEach((group: SVGGElement): void => {
             Array.from(group.children).forEach((circle: SVGCircleElement): void => {
-                circle.setAttribute('r', `${consts.BASE_POINT_SIZE / this.scale}`);
+                circle.setAttribute('r', `${this.controlPointsSize / this.scale}`);
                 circle.setAttribute('stroke-width', `${consts.BASE_STROKE_WIDTH / this.scale}`);
             });
         });
     }
+
+    public configurate(configuration: Configuration): void {
+        this.controlPointsSize = configuration.controlPointsSize || consts.BASE_POINT_SIZE;
+    }
 }

cvat-canvas/src/typescript/canvasModel.ts

@@ -64,15 +64,20 @@ export interface Configuration {
     forceDisableEditing?: boolean;
     intelligentPolygonCrop?: boolean;
     forceFrameUpdate?: boolean;
-    creationOpacity?: number;
     CSSImageFilter?: string;
+    colorBy?: string;
+    selectedShapeOpacity?: number;
+    shapeOpacity?: number;
+    controlPointsSize?: number;
+    outlinedBorders?: string | false;
 }
 
 export interface DrawData {
     enabled: boolean;
     shapeType?: string;
     rectDrawingMethod?: RectDrawingMethod;
     cuboidDrawingMethod?: CuboidDrawingMethod;
+    skeletonSVG?: string;
     numberOfPoints?: number;
     initialState?: any;
     crosshair?: boolean;
@@ -265,12 +270,23 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 width: 0,
             },
             configuration: {
-                displayAllText: false,
+                smoothImage: true,
                 autoborders: false,
-                undefinedAttrValue: '',
-                textContent: 'id,label,attributes,source,descriptions',
-                textPosition: 'auto',
+                displayAllText: false,
+                showProjections: false,
+                forceDisableEditing: false,
+                intelligentPolygonCrop: false,
+                forceFrameUpdate: false,
+                CSSImageFilter: '',
+                colorBy: 'Label',
+                selectedShapeOpacity: 0.5,
+                shapeOpacity: 0.2,
+                outlinedBorders: false,
                 textFontSize: consts.DEFAULT_SHAPE_TEXT_SIZE,
+                controlPointsSize: consts.BASE_POINT_SIZE,
+                textPosition: consts.DEFAULT_SHAPE_TEXT_POSITION,
+                textContent: consts.DEFAULT_SHAPE_TEXT_CONTENT,
+                undefinedAttrValue: consts.DEFAULT_UNDEFINED_ATTR_VALUE,
             },
             imageBitmap: false,
             image: null,
@@ -541,6 +557,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         }
 
         if (drawData.enabled) {
+            if (drawData.shapeType === 'skeleton' && !drawData.skeletonSVG) {
+                throw new Error('Skeleton template must be specified when drawing a skeleton');
+            }
+
             if (this.data.drawData.enabled) {
                 throw new Error('Drawing has been already started');
             } else if (!drawData.shapeType && !drawData.initialState) {
@@ -670,6 +690,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.textFontSize = configuration.textFontSize;
         }
 
+        if (typeof configuration.controlPointsSize === 'number') {
+            this.data.configuration.controlPointsSize = configuration.controlPointsSize;
+        }
+
         if (['auto', 'center'].includes(configuration.textPosition)) {
             this.data.configuration.textPosition = configuration.textPosition;
         }
@@ -702,8 +726,17 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         if (typeof configuration.forceFrameUpdate === 'boolean') {
             this.data.configuration.forceFrameUpdate = configuration.forceFrameUpdate;
         }
-        if (typeof configuration.creationOpacity === 'number') {
-            this.data.configuration.creationOpacity = configuration.creationOpacity;
+        if (typeof configuration.selectedShapeOpacity === 'number') {
+            this.data.configuration.selectedShapeOpacity = configuration.selectedShapeOpacity;
+        }
+        if (typeof configuration.shapeOpacity === 'number') {
+            this.data.configuration.shapeOpacity = configuration.shapeOpacity;
+        }
+        if (['string', 'boolean'].includes(typeof configuration.outlinedBorders)) {
+            this.data.configuration.outlinedBorders = configuration.outlinedBorders;
+        }
+        if (['Instance', 'Group', 'Label'].includes(configuration.colorBy)) {
+            this.data.configuration.colorBy = configuration.colorBy;
         }
 
         if (typeof configuration.CSSImageFilter === 'string') {