From f333907fb51fd5dddfd8941da34b062268fbd267 Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Mon, 4 Nov 2024 19:23:11 +0700 Subject: [PATCH] feat: add theme & stateMachine manifest schema --- .../__fixtures__/simple/state/pigeon-state.ts | 44 +++++++++----- .../__tests__/browser/state-machine.spec.ts | 60 +++++++++---------- .../v2/__tests__/node/state-machine.spec.ts | 60 +++++++++---------- .../dotlottie-js/src/v2/browser/dotlottie.ts | 17 ++++-- .../dotlottie-js/src/v2/common/animation.ts | 12 +++- .../dotlottie-js/src/v2/common/dotlottie.ts | 38 +++++++++--- .../src/v2/common/schemas/manifest.ts | 17 +++++- .../src/v2/common/schemas/state-machine.ts | 1 - .../src/v2/common/schemas/theme.ts | 44 +++++++++++++- .../src/v2/common/state-machine.ts | 49 +++++++++------ packages/dotlottie-js/src/v2/common/theme.ts | 15 ++++- .../dotlottie-js/src/v2/node/dotlottie.ts | 17 ++++-- 12 files changed, 250 insertions(+), 124 deletions(-) diff --git a/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts b/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts index a5b0885..cbb4f4c 100644 --- a/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts +++ b/packages/dotlottie-js/src/__tests__/__fixtures__/simple/state/pigeon-state.ts @@ -1,8 +1,12 @@ import { DotLottieStateMachine } from "../../../../v2/common/schemas/state-machine" -export const PigeonState: DotLottieStateMachine = { - descriptor: { - id: "explodingPigeon", +export const PigeonState: { + id: string; + data: DotLottieStateMachine; +} = { + id: "explodingPigeon", + data: { + descriptor: { initial: "pigeonRunning" }, states: [ @@ -110,16 +114,20 @@ export const PigeonState: DotLottieStateMachine = { type: "Event", name: "restart" } - ] + ] + } } -export const PigeonWithoutExplosion: DotLottieStateMachine = -{ - descriptor: { - id: "pigeonWithoutExplosion", - initial: "pigeonRunning" - }, +export const PigeonWithoutExplosion: { + id: string; + data: DotLottieStateMachine; +} = { + id: "pigeonWithoutExplosion", + data: { + descriptor: { + initial: "pigeonRunning" + }, states: [ { type: "PlaybackState", @@ -195,12 +203,17 @@ export const PigeonWithoutExplosion: DotLottieStateMachine = type: "Event", name: "restart" } - ] + ] + } } -export const SmileyWifi: DotLottieStateMachine = { - descriptor: { - id: 'simple_click_to_next_prev', +export const SmileyWifi: { + id: string; + data: DotLottieStateMachine; +} = { + id: 'simple_click_to_next_prev', + data: { + descriptor: { initial: "smiley", }, states: [ @@ -238,5 +251,6 @@ export const SmileyWifi: DotLottieStateMachine = { triggers: [{ type: "Event", name: "click" - }] + }] + }, }; diff --git a/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts b/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts index 126a74a..7291b11 100644 --- a/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts +++ b/packages/dotlottie-js/src/v2/__tests__/browser/state-machine.spec.ts @@ -18,10 +18,8 @@ describe('LottieStateMachine', () => { expect(() => { // act new LottieStateMachine({ - descriptor: { id: '', initial: 'pigeon' }, - states: PigeonState.states, - listeners: PigeonState.listeners ?? [], - triggers: PigeonState.triggers ?? [], + id: '', + data: PigeonState.data, }); // assert }).toThrowError('Invalid id.'); @@ -29,10 +27,7 @@ describe('LottieStateMachine', () => { it('gets and sets the zipOptions', () => { const theme = new LottieStateMachine({ - descriptor: PigeonState.descriptor, - states: PigeonState.states, - listeners: PigeonState.listeners ?? [], - triggers: PigeonState.triggers ?? [], + ...PigeonState, zipOptions: { level: 9, mem: 1, @@ -56,15 +51,18 @@ describe('LottieStateMachine', () => { it('gets and sets the id', () => { // arrange const state = new LottieStateMachine({ - descriptor: { id: 'test', initial: 'test' }, - states: [ - { - name: 'test', - type: 'PlaybackState', - mode: 'Forward', - autoplay: true, - }, - ], + id: 'test', + data: { + descriptor: { initial: 'test' }, + states: [ + { + name: 'test', + type: 'PlaybackState', + mode: 'Forward', + autoplay: true, + }, + ], + }, }); expect(state.id).toEqual('test'); @@ -81,11 +79,11 @@ describe('LottieStateMachine', () => { const pigeonState = new LottieStateMachine(PigeonState); // assert - expect(pigeonState.id).toEqual(PigeonState.descriptor.id); + expect(pigeonState.id).toEqual(PigeonState.id); - expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial); + expect(pigeonState.initial).toEqual(PigeonState.data.descriptor.initial); - expect(pigeonState.states).toEqual(PigeonState.states); + expect(pigeonState.states).toEqual(PigeonState.data.states); const dotlottie = new DotLottie(); @@ -109,24 +107,24 @@ describe('LottieStateMachine', () => { expect(dotlottie.stateMachines.length).toEqual(2); - expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id); + expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id); - expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id); - expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id); - expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.descriptor.initial); - expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.states); + expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id); + expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.data.descriptor.initial); + expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.data.states); - expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id); - expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.descriptor.initial); - expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.states); + expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id); + expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.data.descriptor.initial); + expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.data.states); // Remove a state and check - dotlottie.removeStateMachine(PigeonState.descriptor.id); + dotlottie.removeStateMachine(PigeonState.id); expect(dotlottie.stateMachines.length).toEqual(1); - expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.id); // dotlottie.download('test_02_with_states.lottie'); }); @@ -155,7 +153,7 @@ describe('LottieStateMachine', () => { expect(dotlottie.manifest.stateMachines?.length).toEqual(2); - const values = [PigeonState.descriptor.id, SmileyWifi.descriptor.id]; + const values = [{ id: PigeonState.id }, { id: SmileyWifi.id }]; if (dotlottie.manifest.stateMachines) { dotlottie.manifest.stateMachines.forEach((value, index) => { diff --git a/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts b/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts index 453eb04..43b4ffc 100644 --- a/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts +++ b/packages/dotlottie-js/src/v2/__tests__/node/state-machine.spec.ts @@ -18,10 +18,8 @@ describe('LottieStateMachine', () => { expect(() => { // act new LottieStateMachine({ - descriptor: { id: '', initial: 'pigeon' }, - states: PigeonState.states, - listeners: PigeonState.listeners ?? [], - triggers: PigeonState.triggers ?? [], + id: '', + data: PigeonState.data, }); // assert }).toThrowError('Invalid id.'); @@ -29,10 +27,7 @@ describe('LottieStateMachine', () => { it('gets and sets the zipOptions', () => { const theme = new LottieStateMachine({ - descriptor: PigeonState.descriptor, - states: PigeonState.states, - listeners: PigeonState.listeners ?? [], - triggers: PigeonState.triggers ?? [], + ...PigeonState, zipOptions: { level: 9, mem: 1, @@ -56,15 +51,18 @@ describe('LottieStateMachine', () => { it('gets and sets the id', () => { // arrange const state = new LottieStateMachine({ - descriptor: { id: 'test', initial: 'test' }, - states: [ - { - name: 'test', - type: 'PlaybackState', - mode: 'Forward', - autoplay: true, - }, - ], + id: 'test', + data: { + descriptor: { initial: 'test' }, + states: [ + { + name: 'test', + type: 'PlaybackState', + mode: 'Forward', + autoplay: true, + }, + ], + }, }); expect(state.id).toEqual('test'); @@ -81,11 +79,11 @@ describe('LottieStateMachine', () => { const pigeonState = new LottieStateMachine(PigeonState); // assert - expect(pigeonState.id).toEqual(PigeonState.descriptor.id); + expect(pigeonState.id).toEqual(PigeonState.id); - expect(pigeonState.initial).toEqual(PigeonState.descriptor.initial); + expect(pigeonState.initial).toEqual(PigeonState.data.descriptor.initial); - expect(pigeonState.states).toEqual(PigeonState.states); + expect(pigeonState.states).toEqual(PigeonState.data.states); const dotlottie = new DotLottie(); @@ -109,24 +107,24 @@ describe('LottieStateMachine', () => { expect(dotlottie.stateMachines.length).toEqual(2); - expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id); + expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id); - expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id); - expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.descriptor.id); - expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.descriptor.initial); - expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.states); + expect(dotlottie.stateMachines[0]?.id).toEqual(PigeonState.id); + expect(dotlottie.stateMachines[0]?.initial).toEqual(PigeonState.data.descriptor.initial); + expect(dotlottie.stateMachines[0]?.states).toEqual(PigeonState.data.states); - expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.descriptor.id); - expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.descriptor.initial); - expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.states); + expect(dotlottie.stateMachines[1]?.id).toEqual(SmileyWifi.id); + expect(dotlottie.stateMachines[1]?.initial).toEqual(SmileyWifi.data.descriptor.initial); + expect(dotlottie.stateMachines[1]?.states).toEqual(SmileyWifi.data.states); // Remove a state and check - dotlottie.removeStateMachine(PigeonState.descriptor.id); + dotlottie.removeStateMachine(PigeonState.id); expect(dotlottie.stateMachines.length).toEqual(1); - expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.descriptor.id); + expect(dotlottie.stateMachines[0]?.id).toEqual(SmileyWifi.id); // dotlottie.download('test_02_with_states.lottie'); }); @@ -155,7 +153,7 @@ describe('LottieStateMachine', () => { expect(dotlottie.manifest.stateMachines?.length).toEqual(2); - const values = [PigeonState.descriptor.id, SmileyWifi.descriptor.id]; + const values = [{ id: PigeonState.id }, { id: SmileyWifi.id }]; if (dotlottie.manifest.stateMachines) { dotlottie.manifest.stateMachines.forEach((value, index) => { diff --git a/packages/dotlottie-js/src/v2/browser/dotlottie.ts b/packages/dotlottie-js/src/v2/browser/dotlottie.ts index 9090509..90ec96d 100644 --- a/packages/dotlottie-js/src/v2/browser/dotlottie.ts +++ b/packages/dotlottie-js/src/v2/browser/dotlottie.ts @@ -287,10 +287,11 @@ export class DotLottie extends DotLottieCommon { throw new DotLottieError('Invalid theme id'); } - manifest.themes?.forEach((givenThemeId) => { - if (givenThemeId === themeId) { + manifest.themes?.forEach((theme) => { + if (theme.id === themeId) { dotlottie.addTheme({ - id: givenThemeId, + id: theme.id, + name: theme.name, data: JSON.parse(decodedStr), }); } @@ -303,9 +304,13 @@ export class DotLottie extends DotLottieCommon { throw new DotLottieError('Invalid theme id'); } - manifest.stateMachines?.forEach((givenStateId) => { - if (givenStateId === stateId) { - dotlottie.addStateMachine(JSON.parse(decodedStr)); + manifest.stateMachines?.forEach((stateMachine) => { + if (stateMachine.id === stateId) { + dotlottie.addStateMachine({ + id: stateMachine.id, + name: stateMachine.name, + data: JSON.parse(decodedStr), + }); } }); } diff --git a/packages/dotlottie-js/src/v2/common/animation.ts b/packages/dotlottie-js/src/v2/common/animation.ts index 94ceade..67473ff 100644 --- a/packages/dotlottie-js/src/v2/common/animation.ts +++ b/packages/dotlottie-js/src/v2/common/animation.ts @@ -21,6 +21,8 @@ export interface AnimationOptions extends ManifestAnimation { } export class LottieAnimationCommon { + protected _name: string | undefined; + protected _data?: AnimationData; protected _id: string = ''; @@ -46,7 +48,7 @@ export class LottieAnimationCommon { this._requireValidOptions(options); this._id = options.id; - + this._name = options.name; this._zipOptions = options.zipOptions ?? {}; if (options.data) this._data = options.data; @@ -80,6 +82,14 @@ export class LottieAnimationCommon { this._id = id; } + public get name(): string | undefined { + return this._name; + } + + public set name(name: string | undefined) { + this._name = name; + } + public get background(): string | null { return this._background; } diff --git a/packages/dotlottie-js/src/v2/common/dotlottie.ts b/packages/dotlottie-js/src/v2/common/dotlottie.ts index 7c4a05d..9dd6323 100644 --- a/packages/dotlottie-js/src/v2/common/dotlottie.ts +++ b/packages/dotlottie-js/src/v2/common/dotlottie.ts @@ -348,8 +348,8 @@ export class DotLottieCommon { protected _buildManifest(): Manifest { const animationsList = Array.from(this._animationsMap.values()); - const themesList = Array.from(this._themesMap.keys()); - const stateMachinesList = Array.from(this._stateMachinesMap.keys()); + const themesList = Array.from(this._themesMap.values()); + const stateMachinesList = Array.from(this._stateMachinesMap.values()); const activeAnimationId = animationsList.find((value) => value.defaultActiveAnimation)?.id ?? ''; const manifest: Manifest = { @@ -357,14 +357,27 @@ export class DotLottieCommon { generator: this.generator, animations: animationsList.map((animation) => ({ id: animation.id, + ...(animation.name ? { name: animation.name } : {}), ...(animation.initialTheme ? { initialTheme: animation.initialTheme } : {}), ...(animation.background ? { background: animation.background } : {}), ...(animation.themes.length > 0 ? { themes: animation.themes.map((theme) => theme.id) } : {}), })), - ...(themesList.length > 0 ? { themes: themesList } : {}), - ...(stateMachinesList.length > 0 ? { stateMachines: stateMachinesList } : {}), }; + if (themesList.length > 0) { + manifest.themes = themesList.map((theme) => ({ + id: theme.id, + ...(theme.name ? { name: theme.name } : {}), + })); + } + + if (stateMachinesList.length > 0) { + manifest.stateMachines = stateMachinesList.map((stateMachine) => ({ + id: stateMachine.id, + ...(stateMachine.name ? { name: stateMachine.name } : {}), + })); + } + if (activeAnimationId) { manifest.initial = { animation: activeAnimationId, @@ -455,6 +468,7 @@ export class DotLottieCommon { dotlottie.themes.forEach((theme) => { mergedDotlottie.addTheme({ id: theme.id, + name: theme.name, data: theme.data, }); }); @@ -463,11 +477,13 @@ export class DotLottieCommon { if (animation.data) { mergedDotlottie.addAnimation({ id: animation.id, + name: animation.name, data: animation.data, }); } else if (animation.url) { mergedDotlottie.addAnimation({ id: animation.id, + name: animation.name, url: animation.url, }); } @@ -482,10 +498,14 @@ export class DotLottieCommon { dotlottie.stateMachines.forEach((stateMachine) => { const stateOption = { - states: stateMachine.states, - descriptor: { id: stateMachine.id, initial: stateMachine.initial }, - listeners: stateMachine.listeners, - triggers: stateMachine.triggers, + id: stateMachine.id, + name: stateMachine.name, + data: { + states: stateMachine.states, + descriptor: { initial: stateMachine.initial }, + listeners: stateMachine.listeners, + triggers: stateMachine.triggers, + }, zipOptions: stateMachine.zipOptions, }; @@ -551,7 +571,7 @@ export class DotLottieCommon { public addStateMachine(stateMachineOptions: DotLottieStateMachineCommonOptions): DotLottieCommon { const newState = new DotLottieStateMachineCommon(stateMachineOptions); - this._stateMachinesMap.set(stateMachineOptions.descriptor.id, newState); + this._stateMachinesMap.set(stateMachineOptions.id, newState); return this; } diff --git a/packages/dotlottie-js/src/v2/common/schemas/manifest.ts b/packages/dotlottie-js/src/v2/common/schemas/manifest.ts index f5bb2cd..ea2a31b 100644 --- a/packages/dotlottie-js/src/v2/common/schemas/manifest.ts +++ b/packages/dotlottie-js/src/v2/common/schemas/manifest.ts @@ -6,12 +6,25 @@ import { type Output, string, array, optional, object } from 'valibot'; export const ManifestAnimationSchema = object({ id: string(), + name: optional(string()), initialTheme: optional(string()), background: optional(string()), themes: optional(array(string())), }); export type ManifestAnimation = Output; +export const ManifestThemeSchema = object({ + id: string(), + name: optional(string()), +}); +export type ManifestTheme = Output; + +export const ManifestStateMachineSchema = object({ + id: string(), + name: optional(string()), +}); +export type ManifestStateMachine = Output; + export const InitialObjectSchema = object({ animation: optional(string()), stateMachine: optional(string()), @@ -22,8 +35,8 @@ export const ManifestSchema = object({ generator: string(), initial: optional(InitialObjectSchema), animations: array(ManifestAnimationSchema), - themes: optional(array(string())), - stateMachines: optional(array(string())), + themes: optional(array(ManifestThemeSchema)), + stateMachines: optional(array(ManifestStateMachineSchema)), }); export type Manifest = Output; diff --git a/packages/dotlottie-js/src/v2/common/schemas/state-machine.ts b/packages/dotlottie-js/src/v2/common/schemas/state-machine.ts index e2f397e..8532129 100644 --- a/packages/dotlottie-js/src/v2/common/schemas/state-machine.ts +++ b/packages/dotlottie-js/src/v2/common/schemas/state-machine.ts @@ -246,7 +246,6 @@ export const TriggersSchema = array(TriggerSchema); // Descriptor Schema export const DescriptorSchema = object({ - id: string(), initial: string(), }); diff --git a/packages/dotlottie-js/src/v2/common/schemas/theme.ts b/packages/dotlottie-js/src/v2/common/schemas/theme.ts index 0262c7c..2b34796 100644 --- a/packages/dotlottie-js/src/v2/common/schemas/theme.ts +++ b/packages/dotlottie-js/src/v2/common/schemas/theme.ts @@ -37,6 +37,7 @@ const ScalarRuleSchema = object({ type: literal('Scalar'), value: optional(number()), keyframes: optional(array(ScalarKeyframeSchema)), + expression: optional(string()), }); const PositionKeyframeSchema = object({ @@ -49,7 +50,9 @@ const PositionKeyframeSchema = object({ const PositionRuleSchema = object({ ...BaseRuleSchema, type: literal('Position'), + split: optional(boolean()), keyframes: optional(array(PositionKeyframeSchema)), + expression: optional(string()), }); const ColorRuleSchema = object({ @@ -57,12 +60,49 @@ const ColorRuleSchema = object({ type: literal('Color'), value: optional(array(number())), keyframes: optional(array(ColorKeyframeSchema)), + expression: optional(string()), }); -export const RulesSchema = array(union([ColorRuleSchema, ScalarRuleSchema, PositionRuleSchema])); +const ImageRuleSchema = object({ + ...BaseRuleSchema, + type: literal('Image'), + value: object({ + id: optional(string()), + width: optional(number()), + height: optional(number()), + url: optional(string()), + }), +}); + +const GradientKeyframeSchema = object({ + ...BaseKeyframeSchema, + value: array( + object({ + color: array(number()), + offset: number(), + }), + ), +}); + +const GradientRuleSchema = object({ + ...BaseRuleSchema, + type: literal('Gradient'), + value: optional( + array( + object({ + color: array(number()), + offset: number(), + }), + ), + ), + keyframes: optional(array(GradientKeyframeSchema)), +}); + +const RuleSchema = union([ColorRuleSchema, ScalarRuleSchema, PositionRuleSchema, ImageRuleSchema, GradientRuleSchema]); + +export const RulesSchema = array(RuleSchema); export const ThemeDataSchema = object({ - id: optional(string()), rules: RulesSchema, }); diff --git a/packages/dotlottie-js/src/v2/common/state-machine.ts b/packages/dotlottie-js/src/v2/common/state-machine.ts index 0dac65e..eb708bb 100644 --- a/packages/dotlottie-js/src/v2/common/state-machine.ts +++ b/packages/dotlottie-js/src/v2/common/state-machine.ts @@ -10,21 +10,24 @@ import { DotLottieError, ErrorCodes } from '../../utils'; import type { DotLottieDescriptor, DotLottieListeners, + DotLottieStateMachine, DotLottieStates, DotLottieTransitions, DotLottieTriggers, + ManifestStateMachine, } from './schemas'; import { DescriptorSchema, ListenersSchema, StatesSchema, TransitionsSchema, TriggersSchema } from './schemas'; -export interface DotLottieStateMachineCommonOptions { - descriptor: DotLottieDescriptor; - listeners?: DotLottieListeners | undefined; - states: DotLottieStates; - triggers?: DotLottieTriggers | undefined; +export interface DotLottieStateMachineCommonOptions extends ManifestStateMachine { + data: DotLottieStateMachine; zipOptions?: ZipOptions; } export class DotLottieStateMachineCommon { + protected _name: string | undefined; + + protected _id: string; + protected _descriptor: DotLottieDescriptor; protected _zipOptions: ZipOptions; @@ -36,23 +39,25 @@ export class DotLottieStateMachineCommon { protected _triggers: DotLottieTriggers; public constructor(options: DotLottieStateMachineCommonOptions) { - this._requireValidTriggers(options.triggers ?? []); - this._requireValidListeners(options.listeners ?? []); - this._requireValidId(options.descriptor.id); - this._requireValidStates(options.states); - this._requireValidDescriptor(options.descriptor); + this._requireValidId(options.id); + this._requireValidTriggers(options.data.triggers ?? []); + this._requireValidListeners(options.data.listeners ?? []); + this._requireValidStates(options.data.states); + this._requireValidDescriptor(options.data.descriptor); - this._descriptor = options.descriptor; + this._name = options.name; - this._zipOptions = options.zipOptions ?? {}; + this._id = options.id; - this._states = options.states; + this._descriptor = options.data.descriptor; + + this._zipOptions = options.zipOptions ?? {}; - this._descriptor = options.descriptor; + this._states = options.data.states; - this._listeners = options.listeners ?? []; + this._listeners = options.data.listeners ?? []; - this._triggers = options.triggers ?? []; + this._triggers = options.data.triggers ?? []; } public get zipOptions(): ZipOptions { @@ -64,13 +69,21 @@ export class DotLottieStateMachineCommon { } public get id(): string { - return this._descriptor.id; + return this._id; } public set id(id: string) { this._requireValidId(id); - this._descriptor.id = id; + this._id = id; + } + + public get name(): string | undefined { + return this._name; + } + + public set name(name: string | undefined) { + this._name = name; } public get states(): DotLottieStates { diff --git a/packages/dotlottie-js/src/v2/common/theme.ts b/packages/dotlottie-js/src/v2/common/theme.ts index a580c2e..d583fbf 100644 --- a/packages/dotlottie-js/src/v2/common/theme.ts +++ b/packages/dotlottie-js/src/v2/common/theme.ts @@ -7,10 +7,10 @@ import { safeParse } from 'valibot'; import { DotLottieError } from '../../utils'; -import type { ThemeData } from './schemas'; +import type { ManifestTheme, ThemeData } from './schemas'; import { ThemeDataSchema } from './schemas'; -export interface ThemeOptions { +export interface ThemeOptions extends ManifestTheme { data: ThemeData; id: string; zipOptions?: ZipOptions; @@ -21,12 +21,15 @@ export class LottieThemeCommon { protected _id: string; + protected _name: string | undefined; + protected _zipOptions: ZipOptions; public constructor(options: ThemeOptions) { this._requireValidId(options.id); this._requireValidData(options.data); + this._name = options.name; this._data = options.data; this._id = options.id; @@ -51,6 +54,14 @@ export class LottieThemeCommon { this._id = id; } + public get name(): string | undefined { + return this._name; + } + + public set name(name: string | undefined) { + this._name = name; + } + public get data(): ThemeData { return this._data; } diff --git a/packages/dotlottie-js/src/v2/node/dotlottie.ts b/packages/dotlottie-js/src/v2/node/dotlottie.ts index 24048b1..078806c 100644 --- a/packages/dotlottie-js/src/v2/node/dotlottie.ts +++ b/packages/dotlottie-js/src/v2/node/dotlottie.ts @@ -266,10 +266,11 @@ export class DotLottie extends DotLottieCommon { throw new DotLottieError('Invalid theme id'); } - manifest.themes?.forEach((givenThemeId) => { - if (givenThemeId === themeId) { + manifest.themes?.forEach((theme) => { + if (theme.id === themeId) { dotlottie.addTheme({ - id: givenThemeId, + id: theme.id, + name: theme.name, data: JSON.parse(decodedStr), }); } @@ -282,11 +283,15 @@ export class DotLottie extends DotLottieCommon { throw new DotLottieError('Invalid theme id'); } - manifest.stateMachines?.forEach((givenStateMachineId) => { - if (givenStateMachineId === stateId) { + manifest.stateMachines?.forEach((stateMachine) => { + if (stateMachine.id === stateId) { const decodedStateMachine = JSON.parse(decodedStr); - dotlottie.addStateMachine(decodedStateMachine); + dotlottie.addStateMachine({ + id: stateMachine.id, + name: stateMachine.name, + data: decodedStateMachine, + }); } }); }