Displaying shape size for ellipses (#4229)

* Displaying shape size for ellipses

* Updated version

cvat-canvas/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cvat-canvas",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cvat-canvas",
-      "version": "2.13.0",
+      "version": "2.13.1",
       "license": "MIT",
       "dependencies": {
         "@types/polylabel": "^1.0.5",

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvasView.ts

@@ -2038,7 +2038,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 resized = false;
                 hideDirection();
                 hideText();
-                if (state.shapeType === 'rectangle') {
+                if (state.shapeType === 'rectangle' || state.shapeType === 'ellipse') {
                     shapeSizeElement = displayShapeSize(this.adoptedContent, this.adoptedText);
                 }
                 (shape as any).on('remove.resize', () => {

cvat-canvas/src/typescript/drawHandler.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -469,6 +469,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 const cy = initialPoint.y + ry * Math.sign(translated[1] - initialPoint.y);
                 this.drawInstance.center(cx, cy);
                 this.drawInstance.radius(rx, ry);
+                this.shapeSizeElement.update(this.drawInstance);
             }
         });
     }
@@ -966,6 +967,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 this.drawPoints();
             } else if (this.drawData.shapeType === 'ellipse') {
                 this.drawEllipse();
+                this.shapeSizeElement = displayShapeSize(this.canvas, this.text);
             } else if (this.drawData.shapeType === 'cuboid') {
                 if (this.drawData.cuboidDrawingMethod === CuboidDrawingMethod.CORNER_POINTS) {
                     this.drawCuboidBy4Points();
@@ -1050,7 +1052,7 @@ export class DrawHandlerImpl implements DrawHandler {
     public transform(geometry: Geometry): void {
         this.geometry = geometry;
 
-        if (this.shapeSizeElement && this.drawInstance && this.drawData.shapeType === 'rectangle') {
+        if (this.shapeSizeElement && this.drawInstance && ['rectangle', 'ellipse'].includes(this.drawData.shapeType)) {
             this.shapeSizeElement.update(this.drawInstance);
         }
 

cvat-canvas/src/typescript/shared.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -97,7 +97,7 @@ export function displayShapeSize(shapesContainer: SVG.Container, textContainer:
             .addClass('cvat_canvas_text'),
         update(shape: SVG.Shape): void {
             let text = `${Math.round(shape.width())}x${Math.round(shape.height())}px`;
-            if (shape.type === 'rect') {
+            if (shape.type === 'rect' || shape.type === 'ellipse') {
                 let rotation = shape.transform().rotation || 0;
                 // be sure, that rotation in range [0; 360]
                 while (rotation < 0) rotation += 360;