fix: improved canAnimate update using callback

packages/engine/Source/Widget/CesiumWidget.js

@@ -453,6 +453,7 @@ function CesiumWidget(container, options) {
     this._destroyDataSourceCollection = destroyDataSourceCollection;
     this._dataSourceDisplay = dataSourceDisplay;
     this._eventHelper = eventHelper;
+    this._canAnimateUpdateCallback = this._updateCanAnimate;
 
     eventHelper.add(this._clock.onTick, CesiumWidget.prototype._onTick, this);
     eventHelper.add(
@@ -1126,6 +1127,13 @@ CesiumWidget.prototype._dataSourceRemoved = function (
   }
 };
 
+/**
+ * @private
+ */
+CesiumWidget.prototype._updateCanAnimate = function (isUpdated) {
+  this._clock.canAnimate = isUpdated;
+};
+
 const boundingSphereScratch = new BoundingSphere();
 
 /**
@@ -1136,7 +1144,7 @@ CesiumWidget.prototype._onTick = function (clock) {
 
   const isUpdated = this._dataSourceDisplay.update(time);
   if (this._allowDataSourcesToSuspendAnimation) {
-    this._clock.canAnimate = isUpdated;
+    this._canAnimateUpdateCallback(isUpdated);
   }
 
   const entityView = this._entityView;

packages/widgets/Source/Viewer/Viewer.js

@@ -906,6 +906,10 @@ Either specify options.terrainProvider instead or set options.baseLayerPicker to
     pickAndTrackObject,
     ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
   );
+
+  // This allows to update the Viewer's _clockViewModel instead of the CesiumWidget's _clock
+  // when CesiumWidget is created from the Viewer.
+  cesiumWidget._canAnimateUpdateCallback = this._updateCanAnimate(this);
 }
 
 Object.defineProperties(Viewer.prototype, {
@@ -1771,17 +1775,21 @@ Viewer.prototype._dataSourceRemoved = function (
   }
 };
 
+/**
+ * @private
+ */
+Viewer.prototype._updateCanAnimate = function (that) {
+  return function (isUpdated) {
+    that._clockViewModel.canAnimate = isUpdated;
+  };
+};
+
 /**
  * @private
  */
 Viewer.prototype._onTick = function (clock) {
   const time = clock.currentTime;
 
-  const isUpdated = this._cesiumWidget.dataSourceDisplay.ready;
-  if (this.allowDataSourcesToSuspendAnimation) {
-    this._clockViewModel.canAnimate = isUpdated;
-  }
-
   let position;
   let enableCamera = false;
   const selectedEntity = this.selectedEntity;

packages/widgets/Specs/Viewer/ViewerSpec.js

@@ -865,30 +865,29 @@ describe(
       expect(viewer.trackedEntity).toBeUndefined();
     });
 
-    // TO BE REMOVED BEFORE MERGE
-    // fit("suspends animation by dataSources if allowed", function () {
-    //   viewer = createViewer(container);
-
-    //   let updateResult = true;
-    //   spyOn(viewer.dataSourceDisplay, "update").and.callFake(function () {
-    //     viewer.dataSourceDisplay._ready = updateResult;
-    //     return updateResult;
-    //   });
-
-    //   expect(viewer.clockViewModel.canAnimate).toBe(true);
-
-    //   viewer.clock.tick();
-    //   expect(viewer.clockViewModel.canAnimate).toBe(true);
-
-    //   updateResult = false;
-    //   viewer.clock.tick();
-    //   expect(viewer.clockViewModel.canAnimate).toBe(false);
-
-    //   viewer.clockViewModel.canAnimate = true;
-    //   viewer.allowDataSourcesToSuspendAnimation = false;
-    //   viewer.clock.tick();
-    //   expect(viewer.clockViewModel.canAnimate).toBe(true);
-    // });
+    it("suspends animation by dataSources if allowed", function () {
+      viewer = createViewer(container);
+
+      let updateResult = true;
+      spyOn(viewer.dataSourceDisplay, "update").and.callFake(function () {
+        viewer.dataSourceDisplay._ready = updateResult;
+        return updateResult;
+      });
+
+      expect(viewer.clockViewModel.canAnimate).toBe(true);
+
+      viewer.clock.tick();
+      expect(viewer.clockViewModel.canAnimate).toBe(true);
+
+      updateResult = false;
+      viewer.clock.tick();
+      expect(viewer.clockViewModel.canAnimate).toBe(false);
+
+      viewer.clockViewModel.canAnimate = true;
+      viewer.allowDataSourcesToSuspendAnimation = false;
+      viewer.clock.tick();
+      expect(viewer.clockViewModel.canAnimate).toBe(true);
+    });
   },
   "WebGL",
 );