From e6b18f7bfaf6645667988688b3b286dd32c5ef23 Mon Sep 17 00:00:00 2001 From: SamuelOsborne Date: Thu, 3 Aug 2023 15:26:43 +0200 Subject: [PATCH] Feat/state refactor (#37) * feat: refactored state machine definition --- .changeset/pre.json | 1 + .changeset/proud-goats-turn.md | 5 + apps/node/lf-interactivity-page-generator.mjs | 1119 +++++++++-------- packages/dotlottie-js/CHANGELOG.md | 6 + packages/dotlottie-js/package.json | 2 +- .../src/common/dotlottie-common.ts | 31 +- .../src/common/dotlottie-state-common.ts | 67 - .../common/dotlottie-state-machine-common.ts | 87 ++ .../src/common/dotlottie-state.ts | 8 +- packages/dotlottie-js/src/common/index.ts | 2 +- packages/dotlottie-js/src/dotlottie.ts | 6 +- packages/dotlottie-js/src/index.ts | 2 +- .../dotlottie-js/src/lottie-state-machine.ts | 16 + packages/dotlottie-js/src/lottie-state.ts | 16 - packages/dotlottie-js/src/node/dotlottie.ts | 6 +- packages/dotlottie-js/src/node/index.ts | 2 +- .../src/node/lottie-state-machine.ts | 14 + .../dotlottie-js/src/node/lottie-state.ts | 13 - .../src/tests/lottie-state-browser.spec.ts | 63 +- .../src/tests/lottie-state-node.spec.ts | 66 +- 20 files changed, 803 insertions(+), 729 deletions(-) create mode 100644 .changeset/proud-goats-turn.md delete mode 100644 packages/dotlottie-js/src/common/dotlottie-state-common.ts create mode 100644 packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts create mode 100644 packages/dotlottie-js/src/lottie-state-machine.ts delete mode 100644 packages/dotlottie-js/src/lottie-state.ts create mode 100644 packages/dotlottie-js/src/node/lottie-state-machine.ts delete mode 100644 packages/dotlottie-js/src/node/lottie-state.ts diff --git a/.changeset/pre.json b/.changeset/pre.json index 972deb2..317ec31 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -12,6 +12,7 @@ "many-chicken-hear", "old-ghosts-explain", "orange-bobcats-allow", + "proud-goats-turn", "shy-laws-taste", "silent-rabbits-dress", "warm-ravens-punch" diff --git a/.changeset/proud-goats-turn.md b/.changeset/proud-goats-turn.md new file mode 100644 index 0000000..1e37d8b --- /dev/null +++ b/.changeset/proud-goats-turn.md @@ -0,0 +1,5 @@ +--- +"@dotlottie/dotlottie-js": patch +--- + +refactored state machine definition diff --git a/apps/node/lf-interactivity-page-generator.mjs b/apps/node/lf-interactivity-page-generator.mjs index 029eee0..0eb76ff 100644 --- a/apps/node/lf-interactivity-page-generator.mjs +++ b/apps/node/lf-interactivity-page-generator.mjs @@ -11,14 +11,14 @@ async function createDotLottie() { // This dotlottie doesnt contain scrolling interactivity // Interactions skipped: + // tldlr: scrolling, syncing to cursor, playing when visible, clicking x amount of times + // sync-with-scroll // scroll relative to container // scroll with offset // Scroll effect with offset and segment looping // Sync animation with cursor position // Sync animation with cursor horizontal movement - // Play animation on click - // Toggle (But can be done with segments) // Play animation when visible // Play animation on hold // Pausehold animation @@ -33,20 +33,18 @@ async function createDotLottie() { id: 'segments', url: 'https://assets2.lottiefiles.com/packages/lf20_4fET62.json', }) - .addState({ - state: { - descriptor: { - id: 'state_segments', - initial: 'loopState', - }, - states: { - loopState: { - animationId: 'segments', - statePlaybackSettings: { - autoplay: true, - loop: true, - segments: [70, 500], - }, + .addStateMachine({ + descriptor: { + id: 'state_segments', + initial: 'loopState', + }, + states: { + loopState: { + animationId: 'segments', + statePlaybackSettings: { + autoplay: true, + loop: true, + segments: [70, 500], }, }, }, @@ -55,21 +53,19 @@ async function createDotLottie() { id: 'segments_on_hover', url: 'https://assets9.lottiefiles.com/packages/lf20_gr2cHM.json', }) - .addState({ - state: { - descriptor: { - id: 'state_segments_on_hover', - initial: 'loopState', - }, - states: { - loopState: { - animationId: 'segments_on_hover', - statePlaybackSettings: { - autoplay: true, - loop: true, - hover: true, - segments: [45, 60], - }, + .addStateMachine({ + descriptor: { + id: 'state_segments_on_hover', + initial: 'loopState', + }, + states: { + loopState: { + animationId: 'segments_on_hover', + statePlaybackSettings: { + autoplay: true, + loop: true, + hover: true, + segments: [45, 60], }, }, }, @@ -78,123 +74,190 @@ async function createDotLottie() { id: 'animation_on_hover', url: 'https://assets8.lottiefiles.com/packages/lf20_zwath9pn.json', }) - .addState({ - state: { - descriptor: { - id: 'state_animation_on_hover', - initial: 'loopState', - }, - states: { - loopState: { - animationId: 'animation_on_hover', - statePlaybackSettings: { - autoplay: true, - loop: true, - hover: true, - }, + .addStateMachine({ + descriptor: { + id: 'state_animation_on_hover', + initial: 'loopState', + }, + states: { + loopState: { + animationId: 'animation_on_hover', + statePlaybackSettings: { + autoplay: true, + loop: true, + hover: true, }, }, }, }) .addAnimation({ - id: 'toggle', - url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', + id: 'play_on_hold', + url: 'https://assets10.lottiefiles.com/packages/lf20_dmd1gncl.json', }) - .addState({ - state: { - descriptor: { - id: 'state_toggle', - initial: 'startIdle', - }, + .addStateMachine({ + descriptor: { + id: 'play_on_hold', + initial: 'idleState', states: { - startIdle: { - animationId: 'toggle', + idleState: { + animationId: 'play_on_hold', statePlaybackSettings: { autoplay: false, loop: false, }, - onClick: { - state: 'playSun', + onMouseEnter: { + state: 'playState', }, }, - playSun: { + playState: { statePlaybackSettings: { autoplay: true, loop: false, - segments: [0, 30], + direction: 1, + }, + onMouseLeave: { + state: 'reversePlayState', + }, + }, + reversePlayState: { + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: -1, + }, + onMouseEnter: { + state: 'playState', }, onComplete: { - state: 'endIdle', + state: 'idleState', }, }, - endIdle: { + }, + }, + }) + .addStateMachine({ + descriptor: { + id: 'play_on_hold_pause', + initial: 'idleState', + states: { + idleState: { + animationId: 'play_on_hold', statePlaybackSettings: { autoplay: false, loop: false, }, - onClick: { - state: 'playReverse', + onMouseEnter: { + state: 'playState', }, }, - playReverse: { + playState: { statePlaybackSettings: { autoplay: true, loop: false, - segments: [30, 0], + direction: 1, }, - onComplete: { - state: 'startIdle', + onMouseLeave: { + state: 'idleState', }, }, }, }, }) + .addAnimation({ + id: 'toggle', + url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', + }) + .addStateMachine({ + descriptor: { + id: 'state_toggle', + initial: 'startIdle', + }, + states: { + startIdle: { + animationId: 'toggle', + statePlaybackSettings: { + autoplay: false, + loop: false, + }, + onClick: { + state: 'playSun', + }, + }, + playSun: { + statePlaybackSettings: { + autoplay: true, + loop: false, + segments: [0, 30], + }, + onComplete: { + state: 'endIdle', + }, + }, + endIdle: { + statePlaybackSettings: { + autoplay: false, + loop: false, + }, + onClick: { + state: 'playReverse', + }, + }, + playReverse: { + statePlaybackSettings: { + autoplay: true, + loop: false, + segments: [30, 0], + }, + onComplete: { + state: 'startIdle', + }, + }, + }, + }) .addAnimation({ id: 'pigeon', url: 'https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json', }) - .addState({ - state: { - descriptor: { - id: 'exploding_pigeon', - initial: 'running', + .addStateMachine({ + descriptor: { + id: 'exploding_pigeon', + initial: 'running', + }, + states: { + running: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: true, + direction: 1, + segments: 'bird', + }, + onClick: { + state: 'exploding', + }, }, - states: { - running: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: true, - direction: 1, - segments: 'bird', - }, - onClick: { - state: 'exploding', - }, + exploding: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: 3, + direction: 1, + segments: 'explosion', }, - exploding: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: 3, - direction: 1, - segments: 'explosion', - }, - onComplete: { - state: 'feathers', - }, + onComplete: { + state: 'feathers', }, - feathers: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - segments: 'feathers', - }, - onComplete: { - state: 'running', - }, + }, + feathers: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, + segments: 'feathers', + }, + onComplete: { + state: 'running', }, }, }, @@ -207,34 +270,32 @@ async function createDotLottie() { id: 'repeat_second_animation', url: 'https://lottie.host/5f095db6-2486-4020-ba31-77ef9697d031/izCcpDAsdG.json', }) - .addState({ - state: { - descriptor: { - id: 'state_repeat', - initial: 'repeat_3_times', + .addStateMachine({ + descriptor: { + id: 'state_repeat', + initial: 'repeat_3_times', + }, + states: { + repeat_3_times: { + animationId: 'repeat', + statePlaybackSettings: { + autoplay: true, + loop: 3, + direction: 1, + }, + onComplete: { + state: 'success', + }, }, - states: { - repeat_3_times: { - animationId: 'repeat', - statePlaybackSettings: { - autoplay: true, - loop: 3, - direction: 1, - }, - onComplete: { - state: 'success', - }, + success: { + animationId: 'repeat_second_animation', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - success: { - animationId: 'repeat_second_animation', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'repeat_3_times', - }, + onComplete: { + state: 'repeat_3_times', }, }, }, @@ -251,56 +312,54 @@ async function createDotLottie() { id: 'well_done', url: 'https://assets9.lottiefiles.com/packages/lf20_pKiaUR.json', }) - .addState({ - state: { - descriptor: { - id: 'state_load_in_queue_1', - initial: 'bullseye_idle', + .addStateMachine({ + descriptor: { + id: 'state_load_in_queue_1', + initial: 'bullseye_idle', + }, + states: { + bullseye_idle: { + animationId: 'bullseye', + statePlaybackSettings: { + autoplay: false, + loop: false, + direction: 1, + }, + onClick: { + state: 'bullseye_hit', + }, }, - states: { - bullseye_idle: { - animationId: 'bullseye', - statePlaybackSettings: { - autoplay: false, - loop: false, - direction: 1, - }, - onClick: { - state: 'bullseye_hit', - }, + bullseye_hit: { + animationId: 'bullseye', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - bullseye_hit: { - animationId: 'bullseye', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'state_load_in_queue_2', - }, + onComplete: { + state: 'state_load_in_queue_2', }, - state_load_in_queue_2: { - animationId: 'confetti', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'state_load_in_queue_3', - }, + }, + state_load_in_queue_2: { + animationId: 'confetti', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - state_load_in_queue_3: { - animationId: 'well_done', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'bullseye_idle', - }, + onComplete: { + state: 'state_load_in_queue_3', + }, + }, + state_load_in_queue_3: { + animationId: 'well_done', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, + }, + onComplete: { + state: 'bullseye_idle', }, }, }, @@ -331,7 +390,7 @@ async function createSingles() { id: 'segments', url: 'https://assets2.lottiefiles.com/packages/lf20_4fET62.json', }) - .addState({ + .addStateMachine({ state: { descriptor: { id: 'state_segments', @@ -367,21 +426,19 @@ async function createSingles() { id: 'segments_on_hover', url: 'https://assets9.lottiefiles.com/packages/lf20_gr2cHM.json', }) - .addState({ - state: { - descriptor: { - id: 'state_segments_on_hover', - initial: 'loopState', - }, - states: { - animationId: 'segments_on_hover', - loopState: { - statePlaybackSettings: { - autoplay: true, - loop: true, - hover: true, - segments: [45, 60], - }, + .addStateMachine({ + descriptor: { + id: 'state_segments_on_hover', + initial: 'loopState', + }, + states: { + animationId: 'segments_on_hover', + loopState: { + statePlaybackSettings: { + autoplay: true, + loop: true, + hover: true, + segments: [45, 60], }, }, }, @@ -404,20 +461,18 @@ async function createSingles() { id: 'animation_on_hover', url: 'https://assets8.lottiefiles.com/packages/lf20_zwath9pn.json', }) - .addState({ - state: { - descriptor: { - id: 'state_animation_on_hover', - initial: 'loopState', - }, - states: { - loopState: { - animationId: 'animation_on_hover', - statePlaybackSettings: { - autoplay: true, - loop: true, - hover: true, - }, + .addStateMachine({ + descriptor: { + id: 'state_animation_on_hover', + initial: 'loopState', + }, + states: { + loopState: { + animationId: 'animation_on_hover', + statePlaybackSettings: { + autoplay: true, + loop: true, + hover: true, }, }, }, @@ -440,50 +495,48 @@ async function createSingles() { id: 'toggle', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', }) - .addState({ - state: { - descriptor: { - id: 'state_toggle', - initial: 'startIdle', + .addStateMachine({ + descriptor: { + id: 'state_toggle', + initial: 'startIdle', + }, + states: { + startIdle: { + statePlaybackSettings: { + autoplay: false, + loop: false, + }, + onClick: { + state: 'playSun', + }, }, - states: { - startIdle: { - statePlaybackSettings: { - autoplay: false, - loop: false, - }, - onClick: { - state: 'playSun', - }, + playSun: { + statePlaybackSettings: { + autoplay: true, + loop: false, + segments: [0, 30], }, - playSun: { - statePlaybackSettings: { - autoplay: true, - loop: false, - segments: [0, 30], - }, - onComplete: { - state: 'endIdle', - }, + onComplete: { + state: 'endIdle', }, - endIdle: { - statePlaybackSettings: { - autoplay: false, - loop: false, - }, - onClick: { - state: 'playReverse', - }, + }, + endIdle: { + statePlaybackSettings: { + autoplay: false, + loop: false, }, - playReverse: { - statePlaybackSettings: { - autoplay: true, - loop: false, - segments: [30, 0], - }, - onComplete: { - state: 'startIdle', - }, + onClick: { + state: 'playReverse', + }, + }, + playReverse: { + statePlaybackSettings: { + autoplay: true, + loop: false, + segments: [30, 0], + }, + onComplete: { + state: 'startIdle', }, }, }, @@ -506,49 +559,47 @@ async function createSingles() { id: 'toggle', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', }) - .addState({ - state: { - descriptor: { - id: 'state_toggle', - initial: 'startIdle', - }, - states: { - startIdle: { - statePlaybackSettings: { - autoplay: false, - loop: false, - }, - onClick: { - state: 'playSun', - }, + .addStateMachine({ + descriptor: { + id: 'state_toggle', + initial: 'startIdle', + }, + states: { + startIdle: { + statePlaybackSettings: { + autoplay: false, + loop: false, }, - playSun: { - statePlaybackSettings: { - autoplay: true, - loop: false, - segments: [0, 30], - }, + onClick: { + state: 'playSun', }, - // endIdle: { - // statePlaybackSettings: { - // autoplay: false, - // loop: false, - // }, - // onClick: { - // state: 'playReverse', - // }, - // }, - // playReverse: { - // statePlaybackSettings: { - // autoplay: true, - // loop: false, - // segments: [30, 0], - // }, - // onComplete: { - // state: 'startIdle', - // }, - // }, }, + playSun: { + statePlaybackSettings: { + autoplay: true, + loop: false, + segments: [0, 30], + }, + }, + // endIdle: { + // statePlaybackSettings: { + // autoplay: false, + // loop: false, + // }, + // onClick: { + // state: 'playReverse', + // }, + // }, + // playReverse: { + // statePlaybackSettings: { + // autoplay: true, + // loop: false, + // segments: [30, 0], + // }, + // onComplete: { + // state: 'startIdle', + // }, + // }, }, }) .build() @@ -569,43 +620,41 @@ async function createSingles() { id: 'mouseEnterMouseLeave', url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json', }) - .addState({ - state: { - descriptor: { - id: 'mouseEnterMouseLeave', - initial: 'startIdle', + .addStateMachine({ + descriptor: { + id: 'mouseEnterMouseLeave', + initial: 'startIdle', + }, + states: { + startIdle: { + animationId: 'mouseEnterMouseLeave', + statePlaybackSettings: { + autoplay: false, + loop: false, + }, + onMouseEnter: { + state: 'playSun', + }, }, - states: { - startIdle: { - animationId: 'mouseEnterMouseLeave', - statePlaybackSettings: { - autoplay: false, - loop: false, - }, - onMouseEnter: { - state: 'playSun', - }, + playSun: { + animationId: 'mouseEnterMouseLeave', + statePlaybackSettings: { + autoplay: true, + loop: false, }, - playSun: { - animationId: 'mouseEnterMouseLeave', - statePlaybackSettings: { - autoplay: true, - loop: false, - }, - onMouseLeave: { - state: 'playReverse', - }, + onMouseLeave: { + state: 'playReverse', }, - playReverse: { - animationId: 'mouseEnterMouseLeave', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: -1, - }, - onComplete: { - state: 'startIdle', - }, + }, + playReverse: { + animationId: 'mouseEnterMouseLeave', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: -1, + }, + onComplete: { + state: 'startIdle', }, }, }, @@ -628,48 +677,46 @@ async function createSingles() { id: 'pigeon', url: 'https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json', }) - .addState({ - state: { - descriptor: { - id: 'exploding_pigeon', - initial: 'running', + .addStateMachine({ + descriptor: { + id: 'exploding_pigeon', + initial: 'running', + }, + states: { + running: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: true, + direction: 1, + segments: 'bird', + }, + onClick: { + state: 'exploding', + }, }, - states: { - running: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: true, - direction: 1, - segments: 'bird', - }, - onClick: { - state: 'exploding', - }, + exploding: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: 1, + direction: 1, + segments: 'explosion', }, - exploding: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: 1, - direction: 1, - segments: 'explosion', - }, - onComplete: { - state: 'feathers', - }, + onComplete: { + state: 'feathers', }, - feathers: { - animationId: 'pigeon', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - segments: 'feathers', - }, - onComplete: { - state: 'running', - }, + }, + feathers: { + animationId: 'pigeon', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, + segments: 'feathers', + }, + onComplete: { + state: 'running', }, }, }, @@ -697,33 +744,31 @@ async function createSingles() { id: 'repeat_second_animation', url: 'https://assets2.lottiefiles.com/packages/lf20_2m1smtya.json', }) - .addState({ - state: { - descriptor: { - id: 'state_repeat', - initial: 'repeat_3_times', + .addStateMachine({ + descriptor: { + id: 'state_repeat', + initial: 'repeat_3_times', + }, + states: { + repeat_3_times: { + animationId: 'repeat', + statePlaybackSettings: { + autoplay: true, + loop: 3, + }, + onComplete: { + state: 'success', + }, }, - states: { - repeat_3_times: { - animationId: 'repeat', - statePlaybackSettings: { - autoplay: true, - loop: 3, - }, - onComplete: { - state: 'success', - }, + success: { + animationId: 'repeat_second_animation', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - success: { - animationId: 'repeat_second_animation', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'repeat_3_times', - }, + onComplete: { + state: 'repeat_3_times', }, }, }, @@ -754,56 +799,54 @@ async function createSingles() { id: 'well_done', url: 'https://assets9.lottiefiles.com/packages/lf20_pKiaUR.json', }) - .addState({ - state: { - descriptor: { - id: 'state_load_in_queue_1', - initial: 'bullseye_idle', + .addStateMachine({ + descriptor: { + id: 'state_load_in_queue_1', + initial: 'bullseye_idle', + }, + states: { + bullseye_idle: { + animationId: 'bullseye', + statePlaybackSettings: { + autoplay: false, + loop: false, + direction: 1, + }, + onClick: { + state: 'bullseye_hit', + }, }, - states: { - bullseye_idle: { - animationId: 'bullseye', - statePlaybackSettings: { - autoplay: false, - loop: false, - direction: 1, - }, - onClick: { - state: 'bullseye_hit', - }, + bullseye_hit: { + animationId: 'bullseye', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - bullseye_hit: { - animationId: 'bullseye', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'state_load_in_queue_2', - }, + onComplete: { + state: 'state_load_in_queue_2', }, - state_load_in_queue_2: { - animationId: 'confetti', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'state_load_in_queue_3', - }, + }, + state_load_in_queue_2: { + animationId: 'confetti', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, }, - state_load_in_queue_3: { - animationId: 'well_done', - statePlaybackSettings: { - autoplay: true, - loop: false, - direction: 1, - }, - onComplete: { - state: 'bullseye_idle', - }, + onComplete: { + state: 'state_load_in_queue_3', + }, + }, + state_load_in_queue_3: { + animationId: 'well_done', + statePlaybackSettings: { + autoplay: true, + loop: false, + direction: 1, + }, + onComplete: { + state: 'bullseye_idle', }, }, }, @@ -834,51 +877,49 @@ async function createSingles() { id: 'confetti', url: 'https://assets6.lottiefiles.com/packages/lf20_opn6z1qt.json', }) - .addState({ - state: { - descriptor: { - id: 'onAfter', - initial: 'wait', + .addStateMachine({ + descriptor: { + id: 'onAfter', + initial: 'wait', + }, + states: { + wait: { + animationId: 'onAfter', + statePlaybackSettings: { + autoplay: true, + loop: true, + intermission: 500, + }, + onAfter: { + ms: 3000, + state: 'after3000', + }, }, - states: { - wait: { - animationId: 'onAfter', - statePlaybackSettings: { - autoplay: true, - loop: true, - intermission: 500, - }, - onAfter: { - ms: 3000, - state: 'after3000', - }, + after3000: { + animationId: 'well_done', + statePlaybackSettings: { + autoplay: true, + loop: true, + speed: 1.5, + direction: -1, }, - after3000: { - animationId: 'well_done', - statePlaybackSettings: { - autoplay: true, - loop: true, - speed: 1.5, - direction: -1, - }, - onAfter: { - ms: 5000, - state: 'after5000', - }, + onAfter: { + ms: 5000, + state: 'after5000', }, - after5000: { - animationId: 'confetti', - statePlaybackSettings: { - autoplay: true, - speed: 2, - direction: 1, - }, - onComplete: { - state: 'wait', - }, - onClick: { - state: 'wait', - }, + }, + after5000: { + animationId: 'confetti', + statePlaybackSettings: { + autoplay: true, + speed: 2, + direction: 1, + }, + onComplete: { + state: 'wait', + }, + onClick: { + state: 'wait', }, }, }, @@ -905,32 +946,30 @@ async function createSingles() { id: 'confetti', url: 'https://assets6.lottiefiles.com/packages/lf20_opn6z1qt.json', }) - .addState({ - state: { - descriptor: { - id: 'onComplete', - initial: 'startState', + .addStateMachine({ + descriptor: { + id: 'onComplete', + initial: 'startState', + }, + states: { + startState: { + animationId: 'well_done', + statePlaybackSettings: { + autoplay: true, + speed: 0.5, + direction: 1, + }, + onComplete: { + state: 'afterOnComplete', + }, }, - states: { - startState: { - animationId: 'well_done', - statePlaybackSettings: { - autoplay: true, - speed: 0.5, - direction: 1, - }, - onComplete: { - state: 'afterOnComplete', - }, + afterOnComplete: { + animationId: 'confetti', + statePlaybackSettings: { + autoplay: true, }, - afterOnComplete: { - animationId: 'confetti', - statePlaybackSettings: { - autoplay: true, - }, - onComplete: { - state: 'startState', - }, + onComplete: { + state: 'startState', }, }, }, @@ -953,52 +992,50 @@ async function createSingles() { id: 'car', url: 'https://lottie.host/82f9aac1-c166-4124-9143-002bf32e235f/p1fb9yQ3lu.json', }) - .addState({ - state: { - descriptor: { - id: 'start', - initial: 'firstGear', + .addStateMachine({ + descriptor: { + id: 'start', + initial: 'firstGear', + }, + states: { + firstGear: { + statePlaybackSettings: { + autoplay: true, + loop: true, + speed: 0.5, + }, + onClick: { + state: 'secondGear', + }, }, - states: { - firstGear: { - statePlaybackSettings: { - autoplay: true, - loop: true, - speed: 0.5, - }, - onClick: { - state: 'secondGear', - }, + secondGear: { + statePlaybackSettings: { + autoplay: true, + loop: true, + speed: 1, }, - secondGear: { - statePlaybackSettings: { - autoplay: true, - loop: true, - speed: 1, - }, - onClick: { - state: 'thirdGear', - }, + onClick: { + state: 'thirdGear', }, - thirdGear: { - statePlaybackSettings: { - autoplay: true, - loop: true, - speed: 2, - }, - onClick: { - state: 'fourthGear', - }, + }, + thirdGear: { + statePlaybackSettings: { + autoplay: true, + loop: true, + speed: 2, }, - fourthGear: { - statePlaybackSettings: { - autoplay: true, - loop: true, - speed: 4, - }, - onClick: { - state: 'firstGear', - }, + onClick: { + state: 'fourthGear', + }, + }, + fourthGear: { + statePlaybackSettings: { + autoplay: true, + loop: true, + speed: 4, + }, + onClick: { + state: 'firstGear', }, }, }, @@ -1032,4 +1069,4 @@ async function createSingles() { } createDotLottie(); -createSingles(); +// createSingles(); diff --git a/packages/dotlottie-js/CHANGELOG.md b/packages/dotlottie-js/CHANGELOG.md index 9c3f2be..0d1492d 100644 --- a/packages/dotlottie-js/CHANGELOG.md +++ b/packages/dotlottie-js/CHANGELOG.md @@ -1,5 +1,11 @@ # @dotlottie/dotlottie-js +## 0.4.0-beta.10 + +### Patch Changes + +- refactored state machine definition + ## 0.4.0-beta.9 ### Patch Changes diff --git a/packages/dotlottie-js/package.json b/packages/dotlottie-js/package.json index 83b0267..90f8848 100644 --- a/packages/dotlottie-js/package.json +++ b/packages/dotlottie-js/package.json @@ -1,6 +1,6 @@ { "name": "@dotlottie/dotlottie-js", - "version": "0.4.0-beta.9", + "version": "0.4.0-beta.10", "type": "module", "description": "This library helps in creating and modifying .lottie files.", "repository": { diff --git a/packages/dotlottie-js/src/common/dotlottie-common.ts b/packages/dotlottie-js/src/common/dotlottie-common.ts index 09d4e49..12bce7b 100644 --- a/packages/dotlottie-js/src/common/dotlottie-common.ts +++ b/packages/dotlottie-js/src/common/dotlottie-common.ts @@ -8,9 +8,8 @@ import type { ZipOptions } from 'fflate'; import pkg from '../../package.json'; import type { DotLottiePlugin } from './dotlottie-plugin'; -import type { DotLottieState } from './dotlottie-state'; -import type { StateOptions } from './dotlottie-state-common'; -import { DotLottieStateCommon } from './dotlottie-state-common'; +import type { DotLottieStateMachineCommonOptions } from './dotlottie-state-machine-common'; +import { DotLottieStateMachineCommon } from './dotlottie-state-machine-common'; import type { ThemeOptions } from './dotlottie-theme-common'; import { LottieThemeCommon } from './dotlottie-theme-common'; import type { AnimationOptions, LottieAnimationCommon } from './lottie-animation-common'; @@ -27,7 +26,6 @@ export interface DotLottieOptions { keywords?: string; plugins?: DotLottiePlugin[]; revision?: number; - state?: Map; version?: string; } @@ -46,7 +44,7 @@ export class DotLottieCommon { protected readonly _themesMap: Map = new Map(); - protected readonly _stateMap: Map = new Map(); + protected readonly _stateMachinesMap: Map = new Map(); protected _author?: string; @@ -157,8 +155,8 @@ export class DotLottieCommon { return Array.from(this._themesMap.values()); } - public get states(): DotLottieStateCommon[] { - return Array.from(this._stateMap.values()); + public get states(): DotLottieStateMachineCommon[] { + return Array.from(this._stateMachinesMap.values()); } public setCustomData(customData: Record | undefined): DotLottieCommon { @@ -374,7 +372,7 @@ export class DotLottieCommon { protected _buildManifest(): Manifest { const animationsList = Array.from(this._animationsMap.values()); const themesList = Array.from(this._themesMap.values()); - const statesList = Array.from(this._stateMap.keys()); + const statesList = Array.from(this._stateMachinesMap.keys()); const activeAnimationId = animationsList.find((value) => value.defaultActiveAnimation)?.id ?? ''; const manifest: Manifest = { @@ -531,11 +529,12 @@ export class DotLottieCommon { dotlottie.states.forEach((state) => { const stateOption = { - state: state.state, + states: state.states, + descriptor: { id: state.id, initial: state.initial }, zipOptions: state.zipOptions, }; - mergedDotlottie.addState(stateOption); + mergedDotlottie.addStateMachine(stateOption); }); } @@ -601,20 +600,20 @@ export class DotLottieCommon { return this; } - public addState(state: StateOptions): DotLottieCommon { - const newState = new DotLottieStateCommon(state); + public addStateMachine(state: DotLottieStateMachineCommonOptions): DotLottieCommon { + const newState = new DotLottieStateMachineCommon(state); - this._stateMap.set(state.state.descriptor.id, newState); + this._stateMachinesMap.set(state.descriptor.id, newState); return this; } - public getState(stateId: string): DotLottieStateCommon | undefined { - return this._stateMap.get(stateId); + public getStateMachine(stateId: string): DotLottieStateMachineCommon | undefined { + return this._stateMachinesMap.get(stateId); } public removeState(stateId: string): DotLottieCommon { - this._stateMap.delete(stateId); + this._stateMachinesMap.delete(stateId); return this; } diff --git a/packages/dotlottie-js/src/common/dotlottie-state-common.ts b/packages/dotlottie-js/src/common/dotlottie-state-common.ts deleted file mode 100644 index d4826b9..0000000 --- a/packages/dotlottie-js/src/common/dotlottie-state-common.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Copyright 2023 Design Barn Inc. - */ - -import type { ZipOptions } from 'fflate'; - -import type { DotLottieState } from './dotlottie-state'; -import { createError } from './utils'; - -export interface StateOptions { - state: DotLottieState; - zipOptions?: ZipOptions; -} - -export class DotLottieStateCommon { - protected _id: string = ''; - - protected _zipOptions: ZipOptions; - - protected _state: DotLottieState; - - public constructor(options: StateOptions) { - this._requireValidId(options.state.descriptor.id); - - if (options.state.descriptor.id) this._id = options.state.descriptor.id; - - this._zipOptions = options.zipOptions ?? {}; - - this._state = options.state; - } - - public get zipOptions(): ZipOptions { - return this._zipOptions; - } - - public set zipOptions(zipOptions: ZipOptions) { - this._zipOptions = zipOptions; - } - - public get id(): string { - return this._id; - } - - public set id(id: string) { - this._requireValidId(id); - - this._id = id; - } - - public get state(): DotLottieState { - return this._state; - } - - public set state(state: DotLottieState) { - this._state = state; - } - - public toString(): string { - return JSON.stringify(this._state); - } - - protected _requireValidId(id: string | undefined): void { - if (!id) { - throw createError('Invalid id.'); - } - } -} diff --git a/packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts b/packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts new file mode 100644 index 0000000..4bcae48 --- /dev/null +++ b/packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts @@ -0,0 +1,87 @@ +/** + * Copyright 2023 Design Barn Inc. + */ + +import type { ZipOptions } from 'fflate'; + +import type { DotLottieStates, StateInfo } from './dotlottie-state'; +import { createError } from './utils'; + +export interface DotLottieStateMachineCommonOptions { + descriptor: StateInfo; + // state: DotLottieState; + states: DotLottieStates; + zipOptions?: ZipOptions; +} + +export class DotLottieStateMachineCommon { + protected _id: string; + + protected _initial: string; + + protected _zipOptions: ZipOptions; + + protected _states: DotLottieStates; + + public constructor(options: DotLottieStateMachineCommonOptions) { + this._requireValidId(options.descriptor.id); + + this._id = options.descriptor.id; + + this._initial = options.descriptor.initial; + + this._zipOptions = options.zipOptions ?? {}; + + this._states = options.states; + } + + public get zipOptions(): ZipOptions { + return this._zipOptions; + } + + public set zipOptions(zipOptions: ZipOptions) { + this._zipOptions = zipOptions; + } + + public get id(): string { + return this._id; + } + + public set id(id: string) { + this._requireValidId(id); + + this._id = id; + } + + public get states(): DotLottieStates { + return this._states; + } + + public set states(states: DotLottieStates) { + this._states = states; + } + + public get initial(): string { + return this._initial; + } + + public set initial(initial: string) { + this._initial = initial; + } + + public toString(): string { + return JSON.stringify({ + descriptor: { + id: this._id, + initial: this._initial, + }, + states: this._states, + }); + } + + protected _requireValidId(id: string | undefined): void { + if (!id) { + throw createError('Invalid id.'); + } + } +} diff --git a/packages/dotlottie-js/src/common/dotlottie-state.ts b/packages/dotlottie-js/src/common/dotlottie-state.ts index 4b81bb8..9116096 100644 --- a/packages/dotlottie-js/src/common/dotlottie-state.ts +++ b/packages/dotlottie-js/src/common/dotlottie-state.ts @@ -64,16 +64,10 @@ export interface StateSettings extends StateTransitionEvents { statePlaybackSettings: StateAnimationSettings; } -export interface State { +export interface DotLottieStates { [key: string]: StateSettings; } -export interface DotLottieState { - descriptor: StateInfo; - - states: State; -} - export interface XStateTargetEvent { target: string; } diff --git a/packages/dotlottie-js/src/common/index.ts b/packages/dotlottie-js/src/common/index.ts index 7cb6479..c922eb8 100644 --- a/packages/dotlottie-js/src/common/index.ts +++ b/packages/dotlottie-js/src/common/index.ts @@ -10,5 +10,5 @@ export * from './duplicate-image-detector-common'; export * from './utils'; export * from './manifest'; export * from './dotlottie-theme-common'; -export * from './dotlottie-state-common'; +export * from './dotlottie-state-machine-common'; export * from './dotlottie-state'; diff --git a/packages/dotlottie-js/src/dotlottie.ts b/packages/dotlottie-js/src/dotlottie.ts index 363b65b..0046783 100644 --- a/packages/dotlottie-js/src/dotlottie.ts +++ b/packages/dotlottie-js/src/dotlottie.ts @@ -274,9 +274,9 @@ export class DotLottie extends DotLottieCommon { manifest.states?.forEach((state) => { if (state === stateId) { - dotlottie.addState({ - state: JSON.parse(decodedStr), - }); + const decodedStateMachine = JSON.parse(decodedStr); + + dotlottie.addStateMachine(decodedStateMachine); } }); } diff --git a/packages/dotlottie-js/src/index.ts b/packages/dotlottie-js/src/index.ts index 3ed5183..e8f247c 100644 --- a/packages/dotlottie-js/src/index.ts +++ b/packages/dotlottie-js/src/index.ts @@ -6,5 +6,5 @@ export * from './dotlottie'; export * from './lottie-animation'; export * from './lottie-image'; export * from './lottie-theme'; -export * from './lottie-state'; +export * from './lottie-state-machine'; export * from './common/manifest'; diff --git a/packages/dotlottie-js/src/lottie-state-machine.ts b/packages/dotlottie-js/src/lottie-state-machine.ts new file mode 100644 index 0000000..7a922a0 --- /dev/null +++ b/packages/dotlottie-js/src/lottie-state-machine.ts @@ -0,0 +1,16 @@ +/** + * Copyright 2023 Design Barn Inc. + */ + +import { + DotLottieStateMachineCommon, + type DotLottieStateMachineCommonOptions, +} from './common/dotlottie-state-machine-common'; + +export * from './common/dotlottie-state'; + +export class LottieStateMachine extends DotLottieStateMachineCommon { + public constructor(options: DotLottieStateMachineCommonOptions) { + super(options); + } +} diff --git a/packages/dotlottie-js/src/lottie-state.ts b/packages/dotlottie-js/src/lottie-state.ts deleted file mode 100644 index deb9ed2..0000000 --- a/packages/dotlottie-js/src/lottie-state.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright 2023 Design Barn Inc. - */ - -import { DotLottieStateCommon, type StateOptions } from './common/dotlottie-state-common'; - -export type { StateOptions }; -export { DotLottieStateCommon }; - -export * from './common/dotlottie-state'; - -export class LottieState extends DotLottieStateCommon { - public constructor(options: StateOptions) { - super(options); - } -} diff --git a/packages/dotlottie-js/src/node/dotlottie.ts b/packages/dotlottie-js/src/node/dotlottie.ts index 648e86f..d2389e2 100644 --- a/packages/dotlottie-js/src/node/dotlottie.ts +++ b/packages/dotlottie-js/src/node/dotlottie.ts @@ -259,9 +259,9 @@ export class DotLottie extends DotLottieCommon { manifest.states?.forEach((state) => { if (state === stateId) { - dotlottie.addState({ - state: JSON.parse(decodedStr), - }); + const decodedStateMachine = JSON.parse(decodedStr); + + dotlottie.addStateMachine(decodedStateMachine); } }); } diff --git a/packages/dotlottie-js/src/node/index.ts b/packages/dotlottie-js/src/node/index.ts index 80df9c3..b8aaddf 100644 --- a/packages/dotlottie-js/src/node/index.ts +++ b/packages/dotlottie-js/src/node/index.ts @@ -6,4 +6,4 @@ export * from './dotlottie'; export * from './lottie-animation'; export * from './lottie-image'; export * from './lottie-theme'; -export * from './lottie-state'; +export * from './lottie-state-machine'; diff --git a/packages/dotlottie-js/src/node/lottie-state-machine.ts b/packages/dotlottie-js/src/node/lottie-state-machine.ts new file mode 100644 index 0000000..060db51 --- /dev/null +++ b/packages/dotlottie-js/src/node/lottie-state-machine.ts @@ -0,0 +1,14 @@ +/** + * Copyright 2023 Design Barn Inc. + */ + +import type { DotLottieStateMachineCommonOptions } from '../common/dotlottie-state-machine-common'; +import { DotLottieStateMachineCommon } from '../common/dotlottie-state-machine-common'; + +export type { DotLottieStateMachineCommonOptions }; + +export class LottieState extends DotLottieStateMachineCommon { + public constructor(options: DotLottieStateMachineCommonOptions) { + super(options); + } +} diff --git a/packages/dotlottie-js/src/node/lottie-state.ts b/packages/dotlottie-js/src/node/lottie-state.ts deleted file mode 100644 index 3fa5062..0000000 --- a/packages/dotlottie-js/src/node/lottie-state.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Copyright 2023 Design Barn Inc. - */ - -import { DotLottieStateCommon, type StateOptions } from '../common/dotlottie-state-common'; - -export type { StateOptions }; - -export class LottieState extends DotLottieStateCommon { - public constructor(options: StateOptions) { - super(options); - } -} diff --git a/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts b/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts index cb83725..2df85a9 100644 --- a/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts +++ b/packages/dotlottie-js/src/tests/lottie-state-browser.spec.ts @@ -6,7 +6,7 @@ import type { AnimationData } from '../common'; import { DotLottie } from '../dotlottie'; -import { LottieState } from '../lottie-state'; +import { LottieStateMachine } from '../lottie-state-machine'; import animationData from './__fixtures__/simple/animation/animations/pigeon.json'; import smileyAnimationData from './__fixtures__/simple/animation/animations/smiley.json'; @@ -17,22 +17,18 @@ describe('LottieState', () => { it('throws an error if it receives an invalid id when constructed', () => { expect(() => { // act - new LottieState({ - state: { - descriptor: { id: '', initial: '' }, - states: {}, - }, + new LottieStateMachine({ + descriptor: { id: '', initial: '' }, + states: {}, }); // assert }).toThrowError('[dotlottie-js]: Invalid id.'); }); it('gets and sets the zipOptions', () => { - const theme = new LottieState({ - state: { - descriptor: { id: 'test', initial: '' }, - states: {}, - }, + const theme = new LottieStateMachine({ + descriptor: { id: 'test', initial: '' }, + states: {}, zipOptions: { level: 9, mem: 1, @@ -55,11 +51,9 @@ describe('LottieState', () => { it('gets and sets the id', () => { // arrange - const state = new LottieState({ - state: { - descriptor: { id: 'test', initial: '' }, - states: {}, - }, + const state = new LottieStateMachine({ + descriptor: { id: 'test', initial: '' }, + states: {}, }); expect(state.id).toEqual('test'); @@ -73,14 +67,17 @@ describe('LottieState', () => { it('gets and sets the data', async () => { // arrange - const pigeonState = new LottieState({ state: PigeonState }); + const pigeonState = new LottieStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, + }); // assert expect(pigeonState.id).toEqual(PigeonState.descriptor.id); - expect(pigeonState.state.descriptor.initial).toEqual(PigeonState.descriptor.initial); + expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial); - expect(pigeonState.state.states).toEqual(PigeonState.states); + expect(pigeonState.states).toEqual(PigeonState.states); const dotlottie = new DotLottie(); @@ -89,8 +86,9 @@ describe('LottieState', () => { id: 'pigeon', data: animationData as unknown as AnimationData, }) - .addState({ - state: PigeonState, + .addStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, }) .addAnimation({ id: 'wifi', @@ -100,8 +98,9 @@ describe('LottieState', () => { id: 'smiley', data: smileyAnimationData as unknown as AnimationData, }) - .addState({ - state: SmileyWifi, + .addStateMachine({ + descriptor: SmileyWifi.descriptor, + states: SmileyWifi.states, }); await dotlottie.build(); @@ -112,9 +111,13 @@ describe('LottieState', () => { expect(dotlottie.states[1]?.id).toEqual(SmileyWifi.descriptor.id); - expect(dotlottie.states[0]?.state).toEqual(PigeonState); + expect(dotlottie.states[0]?.id).toEqual(PigeonState.descriptor.id); + expect(dotlottie.states[0]?.initial).toEqual(PigeonState.descriptor.initial); + expect(dotlottie.states[0]?.states).toEqual(PigeonState.states); - expect(dotlottie.states[1]?.state).toEqual(SmileyWifi); + expect(dotlottie.states[1]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.states[1]?.initial).toEqual(SmileyWifi.descriptor.initial); + expect(dotlottie.states[1]?.states).toEqual(SmileyWifi.states); // Remove a state and check dotlottie.removeState(PigeonState.descriptor.id); @@ -135,8 +138,9 @@ describe('LottieState', () => { id: 'pigeon', data: animationData as unknown as AnimationData, }) - .addState({ - state: PigeonState, + .addStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, }) .addAnimation({ id: 'wifi', @@ -146,8 +150,9 @@ describe('LottieState', () => { id: 'smiley', data: smileyAnimationData as unknown as AnimationData, }) - .addState({ - state: SmileyWifi, + .addStateMachine({ + descriptor: SmileyWifi.descriptor, + states: SmileyWifi.states, }); await dotlottie.build(); diff --git a/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts b/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts index 442df46..2df85a9 100644 --- a/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts +++ b/packages/dotlottie-js/src/tests/lottie-state-node.spec.ts @@ -2,9 +2,11 @@ * Copyright 2023 Design Barn Inc. */ +/* eslint-disable no-new */ + import type { AnimationData } from '../common'; import { DotLottie } from '../dotlottie'; -import { LottieState } from '../lottie-state'; +import { LottieStateMachine } from '../lottie-state-machine'; import animationData from './__fixtures__/simple/animation/animations/pigeon.json'; import smileyAnimationData from './__fixtures__/simple/animation/animations/smiley.json'; @@ -15,23 +17,18 @@ describe('LottieState', () => { it('throws an error if it receives an invalid id when constructed', () => { expect(() => { // act - // eslint-disable-next-line no-new - new LottieState({ - state: { - descriptor: { id: '', initial: '' }, - states: {}, - }, + new LottieStateMachine({ + descriptor: { id: '', initial: '' }, + states: {}, }); // assert }).toThrowError('[dotlottie-js]: Invalid id.'); }); it('gets and sets the zipOptions', () => { - const theme = new LottieState({ - state: { - descriptor: { id: 'test', initial: '' }, - states: {}, - }, + const theme = new LottieStateMachine({ + descriptor: { id: 'test', initial: '' }, + states: {}, zipOptions: { level: 9, mem: 1, @@ -54,11 +51,9 @@ describe('LottieState', () => { it('gets and sets the id', () => { // arrange - const state = new LottieState({ - state: { - descriptor: { id: 'test', initial: '' }, - states: {}, - }, + const state = new LottieStateMachine({ + descriptor: { id: 'test', initial: '' }, + states: {}, }); expect(state.id).toEqual('test'); @@ -72,14 +67,17 @@ describe('LottieState', () => { it('gets and sets the data', async () => { // arrange - const pigeonState = new LottieState({ state: PigeonState }); + const pigeonState = new LottieStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, + }); // assert expect(pigeonState.id).toEqual(PigeonState.descriptor.id); - expect(pigeonState.state.descriptor.initial).toEqual(PigeonState.descriptor.initial); + expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial); - expect(pigeonState.state.states).toEqual(PigeonState.states); + expect(pigeonState.states).toEqual(PigeonState.states); const dotlottie = new DotLottie(); @@ -88,8 +86,9 @@ describe('LottieState', () => { id: 'pigeon', data: animationData as unknown as AnimationData, }) - .addState({ - state: PigeonState, + .addStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, }) .addAnimation({ id: 'wifi', @@ -99,8 +98,9 @@ describe('LottieState', () => { id: 'smiley', data: smileyAnimationData as unknown as AnimationData, }) - .addState({ - state: SmileyWifi, + .addStateMachine({ + descriptor: SmileyWifi.descriptor, + states: SmileyWifi.states, }); await dotlottie.build(); @@ -111,9 +111,13 @@ describe('LottieState', () => { expect(dotlottie.states[1]?.id).toEqual(SmileyWifi.descriptor.id); - expect(dotlottie.states[0]?.state).toEqual(PigeonState); + expect(dotlottie.states[0]?.id).toEqual(PigeonState.descriptor.id); + expect(dotlottie.states[0]?.initial).toEqual(PigeonState.descriptor.initial); + expect(dotlottie.states[0]?.states).toEqual(PigeonState.states); - expect(dotlottie.states[1]?.state).toEqual(SmileyWifi); + expect(dotlottie.states[1]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.states[1]?.initial).toEqual(SmileyWifi.descriptor.initial); + expect(dotlottie.states[1]?.states).toEqual(SmileyWifi.states); // Remove a state and check dotlottie.removeState(PigeonState.descriptor.id); @@ -134,8 +138,9 @@ describe('LottieState', () => { id: 'pigeon', data: animationData as unknown as AnimationData, }) - .addState({ - state: PigeonState, + .addStateMachine({ + descriptor: PigeonState.descriptor, + states: PigeonState.states, }) .addAnimation({ id: 'wifi', @@ -145,8 +150,9 @@ describe('LottieState', () => { id: 'smiley', data: smileyAnimationData as unknown as AnimationData, }) - .addState({ - state: SmileyWifi, + .addStateMachine({ + descriptor: SmileyWifi.descriptor, + states: SmileyWifi.states, }); await dotlottie.build();