Fixed: Changing a label on canvas does not work when 'Show object details' enabled (#3084)

* Fixed: Changing a label on canvas does not work when 'Show object details' enabled #3083

* Updated changelog

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Export of instance masks with holes (<https://github.com/openvinotoolkit/cvat/pull/3044>)
+- Changing a label on canvas does not work when 'Show object details' enabled (<https://github.com/openvinotoolkit/cvat/pull/3084>)
 
 ### Security
 

cvat-canvas/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvasView.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2020 Intel Corporation
+// Copyright (C) 2019-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -1175,7 +1175,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
         } else if (reason === UpdateReasons.IMAGE_MOVED) {
             this.moveCanvas();
-        } else if ([UpdateReasons.OBJECTS_UPDATED].includes(reason)) {
+        } else if (reason === UpdateReasons.OBJECTS_UPDATED) {
             if (this.mode === Mode.GROUP) {
                 this.groupHandler.resetSelectedObjects();
             }
@@ -1443,6 +1443,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             clientID: state.clientID,
             outside: state.outside,
             occluded: state.occluded,
+            source: state.source,
             hidden: state.hidden,
             lock: state.lock,
             shapeType: state.shapeType,
@@ -1534,13 +1535,22 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }
             }
 
-            for (const attrID of Object.keys(state.attributes)) {
-                if (state.attributes[attrID] !== drawnState.attributes[+attrID]) {
-                    if (text) {
-                        const [span] = (text.node.querySelectorAll(`[attrID="${attrID}"]`) as any) as SVGTSpanElement[];
-                        if (span && span.textContent) {
-                            const prefix = span.textContent.split(':').slice(0, -1).join(':');
-                            span.textContent = `${prefix}: ${state.attributes[attrID]}`;
+            if (drawnState.label.id !== state.label.id) {
+                // need to remove created text and create it again
+                if (text) {
+                    text.remove();
+                    this.svgTexts[state.clientID] = this.addText(state);
+                }
+            } else {
+                // check if there are updates in attributes
+                for (const attrID of Object.keys(state.attributes)) {
+                    if (state.attributes[attrID] !== drawnState.attributes[+attrID]) {
+                        if (text) {
+                            const [span] = text.node.querySelectorAll<SVGTSpanElement>(`[attrID="${attrID}"]`);
+                            if (span && span.textContent) {
+                                const prefix = span.textContent.split(':').slice(0, -1).join(':');
+                                span.textContent = `${prefix}: ${state.attributes[attrID]}`;
+                            }
                         }
                     }
                 }

cvat-canvas/src/typescript/shared.ts

@@ -41,6 +41,7 @@ export interface DrawnState {
     occluded?: boolean;
     hidden?: boolean;
     lock: boolean;
+    source: 'AUTO' | 'MANUAL';
     shapeType: string;
     points?: number[];
     attributes: Record<number, string>;
@@ -176,5 +177,7 @@ export function scalarProduct(a: Vector2D, b: Vector2D): number {
 }
 
 export function vectorLength(vector: Vector2D): number {
-    return Math.sqrt((vector.i ** 2) + (vector.j ** 2));
+    const sqrI = vector.i ** 2;
+    const sqrJ = vector.j ** 2;
+    return Math.sqrt(sqrI + sqrJ);
 }