Fixed: Cannot read properties of undefined (reading 'addClass') (#7834)

cvat-ai · May 2, 2024 · 3e29537 · 3e29537
1 parent 57085e8
commit 3e29537
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/changelog.d/20240501_111444_boris_reworked_empty_first_frame_fix.md b/changelog.d/20240501_111444_boris_reworked_empty_first_frame_fix.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Cannot read properties of undefined (reading 'addClass')
+  (<https://github.com/cvat-ai/cvat/pull/7834>)
diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",

diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
@@ -555,21 +555,16 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
 
         this.data.imageID = frameData.number;
 
-        // We set objects immideately to avoid outdated data in case if setup() is called
-        // multiple times before the frameData.data() promise is resolved.
-        // If promise is rejected we restore previous objects
-        const prevZLayer = this.data.zLayer;
-        const prevObjects = this.data.objects;
-        this.data.zLayer = zLayer;
-        this.data.objects = objectStates;
+        const { zLayer: prevZLayer, objects: prevObjects } = this.data;
+
         frameData
             .data((): void => {
                 this.data.image = null;
                 this.notify(UpdateReasons.IMAGE_CHANGED);
             })
             .then((data: Image): void => {
                 if (frameData.number !== this.data.imageID) {
-                    // already another image
+                    // check that request is still relevant after async image data fetching
                     return;
                 }
 
@@ -604,6 +599,13 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 }
 
                 this.notify(UpdateReasons.IMAGE_CHANGED);
+
+                if (prevZLayer === this.data.zLayer && prevObjects === this.data.objects) {
+                    // check the request is relevant, other setup() may have been called while promise resolving
+                    this.data.zLayer = zLayer;
+                    this.data.objects = objectStates;
+                }
+
                 this.notify(UpdateReasons.OBJECTS_UPDATED);
             })
             .catch((exception: unknown): void => {
@@ -614,11 +616,6 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                     } else {
                         this.data.exception = new Error('Unknown error occured when fetching image data');
                     }
-                    // Restore only relevant data in case if setup() is called multiple times
-                    if (this.data.objects === objectStates && this.data.zLayer === zLayer) {
-                        this.data.objects = prevObjects;
-                        this.data.zLayer = prevZLayer;
-                    }
                     this.notify(UpdateReasons.DATA_FAILED);
                 }
             });