Bug has been fixed: label UIs don't update after changelabel (#109)

cvat/apps/engine/static/engine/js/shapeCollection.js

@@ -1223,9 +1223,15 @@ class ShapeCollectionView {
         });
     }
 
-    onCollectionUpdate(collection) {
+    _updateLabelUIs() {
         this._labelsContent.find('.labelContentElement').addClass('hidden');
+        let labels = new Set(this._currentModels.map((el) => el.label));
+        for (let label of labels) {
+            this._labelsContent.find(`.labelContentElement[label_id="${label}"]`).removeClass('hidden');
+        }
+    }
 
+    onCollectionUpdate(collection) {
         // Save parents and detach elements from DOM
         // in order to increase performance in the buildShapeView function
         let parents = {
@@ -1268,7 +1274,6 @@ class ShapeCollectionView {
             else {
                 this._currentViews.push(oldViews[oldIdx]);
                 this._currentModels.push(oldModels[oldIdx]);
-                this._labelsContent.find(`.labelContentElement[label_id="${oldModels[oldIdx].label}"]`).removeClass('hidden');
             }
         }
 
@@ -1284,10 +1289,9 @@ class ShapeCollectionView {
             parents.uis.prepend(this._UIContent);
         }
 
-
         ShapeCollectionView.sortByZOrder();
         this._frameMarker = window.cvat.player.frames.current;
-
+        this._updateLabelUIs();
 
         function drawView(shape, model) {
             let view = buildShapeView(model, buildShapeController(model), this._frameContent, this._UIContent);
@@ -1297,7 +1301,6 @@ class ShapeCollectionView {
             view.subscribe(this);
             this._currentViews.push(view);
             this._currentModels.push(model);
-            this._labelsContent.find(`.labelContentElement[label_id="${model.label}"]`).removeClass('hidden');
         }
     }
 
@@ -1327,18 +1330,37 @@ class ShapeCollectionView {
     }
 
     onShapeViewUpdate(view) {
-        if (view.dragging) {
+        switch (view.updateReason) {
-            window.cvat.mode = 'drag';
+        case 'drag':
-        }
+            if (view.dragging) {
-        else if (window.cvat.mode === 'drag') {
+                window.cvat.mode = 'drag';
-            window.cvat.mode = null;
+            }
+            else if (window.cvat.mode === 'drag') {
+                window.cvat.mode = null;
+            }
+            break;
+        case 'resize':
+            if (view.resize) {
+                window.cvat.mode = 'resize';
+            }
+            else if (window.cvat.mode === 'resize') {
+                window.cvat.mode = null;
+            }
+            break;
+        case 'remove': {
+            let idx = this._currentViews.indexOf(view);
+            view.unsubscribe(this);
+            view.controller().model().unsubscribe(view);
+            view.erase();
+            this._currentViews.splice(idx, 1);
+            this._currentModels.splice(idx, 1);
+            this._updateLabelUIs();
+            break;
         }
-
+        case 'changelabel': {
-        if (view.resize) {
+            this._updateLabelUIs();
-            window.cvat.mode = 'resize';
+            break;
         }
-        else if (window.cvat.mode === 'resize') {
-            window.cvat.mode = null;
         }
     }
 

cvat/apps/engine/static/engine/js/shapes.js

@@ -272,7 +272,7 @@ class ShapeModel extends Listener {
             this._label = +labelId;
             this._importAttributes([], []);
             this._setupKeyFrames();
-            this.notify('attributes');
+            this.notify('changelabel');
         }
         else {
             throw Error(`Unknown label id value found: ${labelId}`);
@@ -1403,6 +1403,7 @@ class ShapeView extends Listener {
         };
 
         this._controller = shapeController;
+        this._updateReason = null;
 
         this._shapeContextMenu = $('#shapeContextMenu');
         this._pointContextMenu = $('#pointContextMenu');
@@ -1426,7 +1427,7 @@ class ShapeView extends Listener {
                     this._flags.dragging = true;
                     blurAllElements();
                     this._hideShapeText();
-                    this.notify();
+                    this.notify('drag');
                 }).on('dragend', (e) => {
                     let p1 = e.detail.handler.startPoints.point;
                     let p2 = e.detail.p;
@@ -1438,7 +1439,7 @@ class ShapeView extends Listener {
                     events.drag = null;
                     this._flags.dragging = false;
                     this._showShapeText();
-                    this.notify();
+                    this.notify('drag');
                 });
 
                 // Setup resize events
@@ -1456,7 +1457,7 @@ class ShapeView extends Listener {
                     events.resize = Logger.addContinuedEvent(Logger.EventType.resizeObject);
                     blurAllElements();
                     this._hideShapeText();
-                    this.notify();
+                    this.notify('resize');
                 }).on('resizing', () => {
                     objWasResized = true;
                 }).on('resizedone', () => {
@@ -1469,7 +1470,7 @@ class ShapeView extends Listener {
                     events.resize = null;
                     this._flags.resizing = false;
                     this._showShapeText();
-                    this.notify();
+                    this.notify('resize');
                 });
 
 
@@ -2353,6 +2354,18 @@ class ShapeView extends Listener {
     }
 
 
+    notify(newReason) {
+        let oldReason = this._updateReason;
+        this._updateReason = newReason;
+        try {
+            Listener.prototype.notify.call(this);
+        }
+        finally {
+            this._updateReason = oldReason;
+        }
+    }
+
+
     // Inteface methods
     draw(interpolation) {
         let outside = interpolation.position.outside;
@@ -2473,6 +2486,7 @@ class ShapeView extends Listener {
         case 'remove':
             if (model.removed) {
                 this.erase();
+                this.notify('remove');
             }
             break;
         case 'position':
@@ -2494,6 +2508,7 @@ class ShapeView extends Listener {
             if (colorByLabel.prop('checked')) {
                 colorByLabel.trigger('change');
             }
+            this.notify('changelabel');
             break;
         }
         case 'attributeFocus': {
@@ -2663,6 +2678,10 @@ class ShapeView extends Listener {
         return this._flags.resizing;
     }
 
+    get updateReason() {
+        return this._updateReason;
+    }
+
     // Used in shapeGrouper in order to get model via controller and set group id
     controller() {
         return this._controller;