feat: updated state machine format (#75)

* feat: updated state machine format
dotlottie · May 29, 2024 · 493aeef · 493aeef
1 parent 5ff1e33
commit 493aeef
Show file tree

Hide file tree

Showing 13 changed files with 597 additions and 216 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -38,4 +38,6 @@ releases/
 
 .output/
 .next/
-.nuxt/
+.nuxt/
+
+apps/node/
diff --git a/apps/node/script.mjs b/apps/node/script.mjs
@@ -6,6 +6,196 @@ import fs from 'fs';
 
 import { DotLottie } from '@dotlottie/dotlottie-js/node';
 
+async function createDotLottieForTests() {
+  const dotLottie = new DotLottie();
+
+  await dotLottie
+    .setAuthor('Joe')
+    .setVersion('1.0')
+    .addAnimation({
+      id: 'pigeon',
+      url: 'https://lottie.host/071a2de9-52ca-4ce4-ba2f-a5befd220bdd/ECzVp4eaMa.json',
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'exploding_pigeon',
+        initial: 0,
+      },
+      states: [
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          loop: false,
+          marker: "bird"
+        },
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          speed: 0.8,
+          loop: false,
+          marker: 'explosion',
+        },
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          speed: 0.8,
+          loop: false,
+          marker: 'feathers',
+        }
+      ],
+      transitions: [
+        {
+          type: "Transition",
+          from_state: 0,
+          to_state: 1,
+          on_complete_event: {},
+        },
+        {
+          type: "Transition",
+          from_state: 1,
+          to_state: 2,
+          on_complete_event: {},
+        },
+        {
+          type: "Transition",
+          from_state: 2,
+          to_state: 0,
+          on_complete_event: {},
+        },
+      ],
+      context_variables: [],
+      listeners: []
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'pigeon_without_explosion',
+        initial: 0,
+      },
+      states: [
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          loop: false,
+          marker: "bird"
+        },
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          speed: 0.8,
+          loop: false,
+          marker: 'feathers',
+        }
+      ],
+      transitions: [
+        {
+          type: "Transition",
+          from_state: 0,
+          to_state: 1,
+          on_complete_event: {},
+        },
+        {
+          type: "Transition",
+          from_state: 1,
+          to_state: 0,
+          on_complete_event: {},
+        },
+      ],
+      context_variables: [],
+      listeners: []
+    })
+    .build()
+    .then((value) => {
+      return value.toArrayBuffer();
+    })
+    .then((value) => {
+      fs.writeFileSync('exploding-pigeons-test-file.lottie', Buffer.from(value));
+    });
+}
+
+async function createExplodingPigeon() {
+  const dotLottie = new DotLottie();
+
+  await dotLottie
+    .setAuthor('Joe')
+    .setVersion('1.0')
+    .addAnimation({
+      id: 'pigeon',
+      url: 'https://lottie.host/071a2de9-52ca-4ce4-ba2f-a5befd220bdd/ECzVp4eaMa.json',
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'exploding_pigeon',
+        initial: 0,
+      },
+      states: [
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          loop: false,
+          marker: "bird"
+        },
+
+        {
+          animation_d: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          speed: 0.8,
+          loop: false,
+          marker: 'explosion',
+        },
+        {
+          animation_id: "pigeon",
+          type: "PlaybackState",
+          autoplay: true,
+          speed: 0.8,
+          loop: false,
+          marker: 'feathers',
+        }
+      ],
+      transitions: [
+        {
+          type: "Transition",
+          from_state: 0,
+          to_state: 1,
+          on_complete_event: {},
+        },
+        {
+          type: "Transition",
+          from_state: 1,
+          to_state: 2,
+          on_complete_event: {},
+        },
+        {
+          type: "Transition",
+          from_state: 2,
+          to_state: 0,
+          on_complete_event: {},
+        },
+      ],
+      listeners: [],
+      context_variables: [
+        {
+          type: "Numeric",
+          key: "counter_6",
+          value: 6
+        }
+      ]
+    })
+    .build()
+    .then((value) => {
+      return value.toArrayBuffer();
+    })
+    .then((value) => {
+      fs.writeFileSync('exploding_pigeon.zip', Buffer.from(value));
+    });
+}
+
 async function createDotLottie() {
   const dotLottie = new DotLottie();
 
@@ -21,7 +211,7 @@ async function createDotLottie() {
       url: 'https://lottie.host/cf7b43d1-3d6b-407a-970b-6305b18bebfa/uB1Jboo1o1.json',
       autoplay: true,
     })
-    .addState({
+    .addStateMachine({
       id: 'state_1',
       state: {
         descriptor: {
@@ -52,4 +242,6 @@ async function createDotLottie() {
     });
 }
 
-createDotLottie();
+// createDotLottie();
+// createExplodingPigeon();
+createDotLottieForTests();
diff --git a/packages/dotlottie-js/src/common/dotlottie-common.ts b/packages/dotlottie-js/src/common/dotlottie-common.ts
@@ -2,6 +2,8 @@
  * Copyright 2023 Design Barn Inc.
  */
 
+/* eslint-disable @typescript-eslint/naming-convention */
+
 import type { Animation as AnimationType } from '@lottiefiles/lottie-types';
 import type { ZipOptions } from 'fflate';
 
@@ -611,6 +613,9 @@ export class DotLottieCommon {
         const stateOption = {
           states: stateMachine.states,
           descriptor: { id: stateMachine.id, initial: stateMachine.initial },
+          transitions: stateMachine.transitions,
+          listeners: stateMachine.listeners,
+          context_variables: stateMachine.contextVariables,
           zipOptions: stateMachine.zipOptions,
         };