Fixed fail for masks & skeletons with centered text

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Exporting project when its tasks has not data (<https://github.com/opencv/cvat/pull/6658>)
 - Removing job assignee (<https://github.com/opencv/cvat/pull/6712>)
+- UI fail when select a mask or a skeleton with center-aligned text (<https://github.com/opencv/cvat/pull/6753>)
 - Fixed switching from organization to sandbox while getting a resource (<https://github.com/opencv/cvat/pull/6689>)
 - You do not have permissions when user is cancelling automatic annotation (<https://github.com/opencv/cvat/pull/6734>)
 - Automatic annotation progress bar is invisible if the app initialized on the task page

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvasView.ts

@@ -2558,7 +2558,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
         if (!shape) return;
 
         if (text.node.style.display === 'none') return; // wrong transformation matrix
-        const { textFontSize, textPosition } = this.configuration;
+        const { textFontSize } = this.configuration;
+        let { textPosition } = this.configuration;
+        if (shape.type === 'circle') {
+            // force auto for skeleton elements
+            textPosition = 'auto';
+        }
 
         text.untransform();
         text.style({ 'font-size': `${textFontSize}px` });
@@ -2569,11 +2574,13 @@ export class CanvasViewImpl implements CanvasView, Listener {
         if (textPosition === 'center') {
             let cx = 0;
             let cy = 0;
-            if (shape.type === 'rect') {
-                // for rectangle finding a center is simple
+            if (['rect', 'image'].includes(shape.type)) {
+                // for rectangle/mask finding a center is simple
                 cx = +shape.attr('x') + +shape.attr('width') / 2;
                 cy = +shape.attr('y') + +shape.attr('height') / 2;
-            } else if (shape.type === 'ellipse') {
+            } else if (shape.type === 'g') {
+                ({ cx, cy } = shape.bbox());
+            } else if (['ellipse'].includes(shape.type)) {
                 // even simpler for ellipses
                 cx = +shape.attr('cx');
                 cy = +shape.attr('cy');