fix: added states to merge method

dotlottie · Aug 2, 2023 · f3c4238 · f3c4238
1 parent 7aaebb2
commit f3c4238
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 23 deletions.
diff --git a/apps/node/lf-interactivity-page-generator.mjs b/apps/node/lf-interactivity-page-generator.mjs
@@ -34,15 +34,14 @@ async function createDotLottie() {
       url: 'https://assets2.lottiefiles.com/packages/lf20_4fET62.json',
     })
     .addState({
-      id: 'state_segments',
       state: {
         descriptor: {
           id: 'state_segments',
           initial: 'loopState',
         },
         states: {
-          animationId: 'segments',
           loopState: {
+            animationId: 'segments',
             statePlaybackSettings: {
               autoplay: true,
               loop: true,
@@ -57,15 +56,14 @@ async function createDotLottie() {
       url: 'https://assets9.lottiefiles.com/packages/lf20_gr2cHM.json',
     })
     .addState({
-      id: 'state_segments_on_hover',
       state: {
         descriptor: {
           id: 'state_segments_on_hover',
           initial: 'loopState',
         },
         states: {
-          animationId: 'segments_on_hover',
           loopState: {
+            animationId: 'segments_on_hover',
             statePlaybackSettings: {
               autoplay: true,
               loop: true,
@@ -81,7 +79,6 @@ async function createDotLottie() {
       url: 'https://assets8.lottiefiles.com/packages/lf20_zwath9pn.json',
     })
     .addState({
-      id: 'state_animation_on_hover',
       state: {
         descriptor: {
           id: 'state_animation_on_hover',
@@ -104,14 +101,14 @@ async function createDotLottie() {
       url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json',
     })
     .addState({
-      id: 'state_toggle',
       state: {
         descriptor: {
           id: 'state_toggle',
           initial: 'startIdle',
         },
         states: {
           startIdle: {
+            animationId: 'toggle',
             statePlaybackSettings: {
               autoplay: false,
               loop: false,
@@ -157,7 +154,6 @@ async function createDotLottie() {
       url: 'https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json',
     })
     .addState({
-      id: 'exploding_pigeon',
       state: {
         descriptor: {
           id: 'exploding_pigeon',
@@ -205,14 +201,13 @@ async function createDotLottie() {
     })
     .addAnimation({
       id: 'repeat',
-      url: 'https://assets4.lottiefiles.com/packages/lf20_bshezgfo.json',
+      url: 'https://lottie.host/82f9aac1-c166-4124-9143-002bf32e235f/p1fb9yQ3lu.json',
     })
     .addAnimation({
       id: 'repeat_second_animation',
-      url: 'https://assets2.lottiefiles.com/packages/lf20_2m1smtya.json',
+      url: 'https://lottie.host/5f095db6-2486-4020-ba31-77ef9697d031/izCcpDAsdG.json',
     })
     .addState({
-      id: 'state_repeat',
       state: {
         descriptor: {
           id: 'state_repeat',
@@ -225,7 +220,6 @@ async function createDotLottie() {
               autoplay: true,
               loop: 3,
               direction: 1,
-              segments: 'repeat',
             },
             onComplete: {
               state: 'success',
@@ -258,7 +252,6 @@ async function createDotLottie() {
       url: 'https://assets9.lottiefiles.com/packages/lf20_pKiaUR.json',
     })
     .addState({
-      id: 'state_load_in_queue_1',
       state: {
         descriptor: {
           id: 'state_load_in_queue_1',

diff --git a/packages/dotlottie-js/src/common/dotlottie-common.ts b/packages/dotlottie-js/src/common/dotlottie-common.ts
@@ -528,6 +528,15 @@ export class DotLottieCommon {
           });
         });
       });
+
+      dotlottie.states.forEach((state) => {
+        const stateOption = {
+          state: state.state,
+          zipOptions: state.zipOptions,
+        };
+
+        mergedDotlottie.addState(stateOption);
+      });
     }
 
     return mergedDotlottie;

diff --git a/packages/dotlottie-js/src/common/dotlottie-state-common.ts b/packages/dotlottie-js/src/common/dotlottie-state-common.ts
@@ -17,7 +17,7 @@ export class DotLottieStateCommon {
 
   protected _zipOptions: ZipOptions;
 
-  protected _state?: DotLottieState | undefined;
+  protected _state: DotLottieState;
 
   public constructor(options: StateOptions) {
     this._requireValidId(options.state.descriptor.id);
@@ -47,11 +47,11 @@ export class DotLottieStateCommon {
     this._id = id;
   }
 
-  public get state(): DotLottieState | undefined {
+  public get state(): DotLottieState {
     return this._state;
   }
 
-  public set state(state: DotLottieState | undefined) {
+  public set state(state: DotLottieState) {
     this._state = state;
   }
 

diff --git a/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts b/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts
@@ -73,14 +73,14 @@ describe('LottieState', () => {
 
   it('gets and sets the data', async () => {
     // arrange
-    const state = new LottieState({ state: PigeonState });
+    const pigeonState = new LottieState({ state: PigeonState });
 
     // assert
-    expect(state.id).toEqual(PigeonState.descriptor.id);
+    expect(pigeonState.id).toEqual(PigeonState.descriptor.id);
 
-    expect(state.state?.descriptor.initial).toEqual(PigeonState.descriptor.initial);
+    expect(pigeonState.state.descriptor.initial).toEqual(PigeonState.descriptor.initial);
 
-    expect(state.state?.states).toEqual(PigeonState.states);
+    expect(pigeonState.state.states).toEqual(PigeonState.states);
 
     const dotlottie = new DotLottie();
 

diff --git a/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts b/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts
@@ -72,14 +72,14 @@ describe('LottieState', () => {
 
   it('gets and sets the data', async () => {
     // arrange
-    const state = new LottieState({ state: PigeonState });
+    const pigeonState = new LottieState({ state: PigeonState });
 
     // assert
-    expect(state.id).toEqual(PigeonState.descriptor.id);
+    expect(pigeonState.id).toEqual(PigeonState.descriptor.id);
 
-    expect(state.state?.descriptor.initial).toEqual(PigeonState.descriptor.initial);
+    expect(pigeonState.state.descriptor.initial).toEqual(PigeonState.descriptor.initial);
 
-    expect(state.state?.states).toEqual(PigeonState.states);
+    expect(pigeonState.state.states).toEqual(PigeonState.states);
 
     const dotlottie = new DotLottie();