fix: emit finished event for one time animation, regression from 4.3.0 with the multi-model refactor

The multi-model refactor recreates the animation mixers on every setSource(), but the mixer event subscriptions (registered once when the animation feature is constructed, before any model is loaded) were not re-applied to the new mixers, so the 'finished' event was never dispatched.

Author: vincentfretin

packages/model-viewer/src/test/features/animation-spec.ts

@@ -81,6 +81,15 @@ suite('Animation', () => {
       expect(element.paused).to.be.true;
     });
 
+    test('dispatches "finished" when a repetition-limited animation completes',
+        async () => {
+          const finished = waitForEvent(element, 'finished');
+          element.play({repetitions: 1, pingpong: false});
+          // Let the LoopOnce action run to completion.
+          await timePasses((element.duration + TOLERANCE_SEC) * 1000);
+          await finished;
+        });
+
     suite('when play is invoked with no options', () => {
       setup(async () => {
         const animationsPlay = waitForEvent(element, 'play');

packages/model-viewer/src/three-components/ModelScene.ts

@@ -120,6 +120,12 @@ export class ModelScene extends Scene {
   private boundsAndShadowDirty = false;
   private mixers: AnimationMixer[] = [];
   private mixerPausedStates: boolean[] = [];
+  // Mixer event subscriptions are kept so they can be re-applied to the mixers
+  // that are recreated on every setSource() (one per loaded glTF).
+  private mixerEventSubscriptions: Array<{
+    event: keyof AnimationMixerEventMap,
+    callback: (...args: any[]) => void
+  }> = [];
   private cancelPendingSourceChange: (() => void)|null = null;
   private animationsByName: Map<string, AnimationClip> = new Map();
   private currentAnimationActions: (AnimationAction|null)[] = [];
@@ -281,11 +287,11 @@ export class ModelScene extends Scene {
       if (gltf != null) {
         this._models.push(gltf.scene);
         this.target.add(gltf.scene);
-        this.mixers.push(new AnimationMixer(gltf.scene));
+        this.mixers.push(this.createMixer(gltf.scene));
         this.mixerPausedStates.push(false);
         this.currentAnimationActions.push(null);
       } else {
-        this.mixers.push(new AnimationMixer(this.target));
+        this.mixers.push(this.createMixer(this.target));
         this.mixerPausedStates.push(false);
         this.currentAnimationActions.push(null);
       }
@@ -1282,11 +1288,25 @@ export class ModelScene extends Scene {
 
   subscribeMixerEvent(
       event: keyof AnimationMixerEventMap, callback: (...args: any[]) => void) {
+    // Remember the subscription so it survives the mixers being recreated on
+    // the next setSource(), then apply it to the mixers that already exist.
+    this.mixerEventSubscriptions.push({event, callback});
     for (const mixer of this.mixers) {
       mixer.addEventListener(event, callback);
     }
   }
 
+  // Creates an AnimationMixer with the currently subscribed events already
+  // attached, so events (e.g. 'finished', 'loop') keep firing after a new
+  // model is loaded.
+  private createMixer(root: Object3D): AnimationMixer {
+    const mixer = new AnimationMixer(root);
+    for (const {event, callback} of this.mixerEventSubscriptions) {
+      mixer.addEventListener(event, callback);
+    }
+    return mixer;
+  }
+
   /**
    * Call if the object has been changed in such a way that the shadow's
    * shape has changed (not a rotation about the Y axis).