@dotlottie/dotlottie-js - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0-beta.0

dist/index.d.ts

@@ -26,3 +26,113 @@ import { ZipOptions } from 'fflate';
  */
+declare enum PlayMode {
+    Bounce = "bounce",
+    Normal = "normal"
+}
+interface ManifestAnimation {
+    autoplay?: boolean;
+    defaultTheme?: string;
+    direction?: number;
+    hover?: boolean;
+    id: string;
+    intermission?: number;
+    loop?: boolean | number;
+    playMode?: PlayMode;
+    speed?: number;
+    themeColor?: string;
+}
+interface ManifestTheme {
+    animations: string[];
+    id: string;
+}
+interface Manifest {
+    activeAnimationId?: string;
+    animations: ManifestAnimation[];
+    author?: string | undefined;
+    custom?: Record<string, unknown>;
+    description?: string | undefined;
+    generator?: string | undefined;
+    keywords?: string | undefined;
+    revision?: number | undefined;
+    states?: string[];
+    themes?: ManifestTheme[];
+    version?: string | undefined;
+}
 
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+declare type PlaybackOptions = Omit<ManifestAnimation, 'id'>;
+interface StateAnimationSettings extends PlaybackOptions {
+    segments?: [number, number] | string;
+}
+interface Transitionable {
+    state: string;
+}
+interface StateTransitionOnClick extends Transitionable {
+}
+interface StateTransitionOnAfter extends Transitionable {
+    ms: number;
+}
+interface StateTransitionOnEnter extends Transitionable {
+    count: number;
+}
+interface StateTransitionOnMouseEnter extends Transitionable {
+}
+interface StateTransitionOnMouseLeave extends Transitionable {
+}
+interface StateTransitionOnComplete extends Transitionable {
+}
+interface StateInfo {
+    id: string;
+    initial: string;
+}
+interface StateTransitionEvents {
+    onAfter?: StateTransitionOnAfter;
+    onClick?: StateTransitionOnClick;
+    onComplete?: StateTransitionOnComplete;
+    onEnter?: StateTransitionOnEnter;
+    onMouseEnter?: StateTransitionOnMouseEnter;
+    onMouseLeave?: StateTransitionOnMouseLeave;
+}
+interface StateSettings extends StateTransitionEvents {
+    animationId?: string;
+    statePlaybackSettings: StateAnimationSettings;
+}
+interface State {
+    [key: string]: StateSettings;
+}
+interface DotLottieState {
+    descriptor: StateInfo;
+    states: State;
+}
+
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+interface StateOptions {
+    id: string;
+    state?: DotLottieState;
+    zipOptions?: ZipOptions;
+}
+declare class DotLottieStateCommon {
+    protected _id: string;
+    protected _zipOptions: ZipOptions;
+    protected _state?: DotLottieState | undefined;
+    constructor(options: StateOptions);
+    get zipOptions(): ZipOptions;
+    set zipOptions(zipOptions: ZipOptions);
+    get id(): string;
+    set id(id: string);
+    get state(): DotLottieState | undefined;
+    set state(state: DotLottieState | undefined);
+    toString(): string;
+    protected _requireValidId(id: string | undefined): void;
+}
+
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
 declare type ImageData = string | ArrayBuffer | Blob;
@@ -88,39 +198,3 @@ interface ImageOptions {
  */
-declare enum PlayMode {
-    Bounce = "bounce",
-    Normal = "normal"
-}
-interface ManifestAnimation {
-    autoplay?: boolean;
-    defaultTheme?: string;
-    direction?: number;
-    hover?: boolean;
-    id: string;
-    intermission?: number;
-    loop?: boolean | number;
-    playMode?: PlayMode;
-    speed?: number;
-    themeColor?: string;
-}
-interface ManifestTheme {
-    animations: string[];
-    id: string;
-}
-interface Manifest {
-    activeAnimationId?: string;
-    animations: ManifestAnimation[];
-    author?: string | undefined;
-    custom?: Record<string, unknown>;
-    description?: string | undefined;
-    generator?: string | undefined;
-    keywords?: string | undefined;
-    revision?: number | undefined;
-    themes?: ManifestTheme[];
-    version?: string | undefined;
-}
 
-/**
- * Copyright 2023 Design Barn Inc.
- */
-
 declare type AnimationData = Animation;
@@ -324,2 +398,3 @@ interface ExportOptions {
     revision?: number;
+    state?: Map<string, DotLottieState>;
     version?: string;
@@ -337,2 +412,3 @@ }
     protected readonly _themesMap: Map<string, LottieThemeCommon>;
+    protected readonly _stateMap: Map<string, DotLottieStateCommon>;
     protected _author?: string;
@@ -365,2 +441,3 @@ protected _description?: string;
     get themes(): LottieThemeCommon[];
+    get states(): DotLottieStateCommon[];
     setCustomData(customData: Record<string, unknown> | undefined): DotLottieCommon;
@@ -425,2 +502,5 @@ setAuthor(author: string | undefined): DotLottieCommon;
     }): DotLottieCommon;
+    addState(state: StateOptions): DotLottieCommon;
+    getState(stateId: string): DotLottieStateCommon | undefined;
+    removeState(stateId: string): DotLottieCommon;
     protected _requireValidAuthor(author: string | undefined): asserts author is string;
@@ -495,2 +575,10 @@ protected _requireValidDescription(description: string | undefined): asserts description is string;
 
-export { AnimationOptions, DotLottie, ImageOptions, LottieAnimation, LottieImage, LottieTheme, ThemeOptions };
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+declare class LottieState extends DotLottieStateCommon {
+    constructor(options: StateOptions);
+}
+
+export { AnimationOptions, DotLottie, ImageOptions, LottieAnimation, LottieImage, LottieState, LottieTheme, StateOptions, ThemeOptions };

dist/node/index.d.ts

@@ -26,3 +26,113 @@ import { ZipOptions } from 'fflate';
  */
+declare enum PlayMode {
+    Bounce = "bounce",
+    Normal = "normal"
+}
+interface ManifestAnimation {
+    autoplay?: boolean;
+    defaultTheme?: string;
+    direction?: number;
+    hover?: boolean;
+    id: string;
+    intermission?: number;
+    loop?: boolean | number;
+    playMode?: PlayMode;
+    speed?: number;
+    themeColor?: string;
+}
+interface ManifestTheme {
+    animations: string[];
+    id: string;
+}
+interface Manifest {
+    activeAnimationId?: string;
+    animations: ManifestAnimation[];
+    author?: string | undefined;
+    custom?: Record<string, unknown>;
+    description?: string | undefined;
+    generator?: string | undefined;
+    keywords?: string | undefined;
+    revision?: number | undefined;
+    states?: string[];
+    themes?: ManifestTheme[];
+    version?: string | undefined;
+}
 
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+declare type PlaybackOptions = Omit<ManifestAnimation, 'id'>;
+interface StateAnimationSettings extends PlaybackOptions {
+    segments?: [number, number] | string;
+}
+interface Transitionable {
+    state: string;
+}
+interface StateTransitionOnClick extends Transitionable {
+}
+interface StateTransitionOnAfter extends Transitionable {
+    ms: number;
+}
+interface StateTransitionOnEnter extends Transitionable {
+    count: number;
+}
+interface StateTransitionOnMouseEnter extends Transitionable {
+}
+interface StateTransitionOnMouseLeave extends Transitionable {
+}
+interface StateTransitionOnComplete extends Transitionable {
+}
+interface StateInfo {
+    id: string;
+    initial: string;
+}
+interface StateTransitionEvents {
+    onAfter?: StateTransitionOnAfter;
+    onClick?: StateTransitionOnClick;
+    onComplete?: StateTransitionOnComplete;
+    onEnter?: StateTransitionOnEnter;
+    onMouseEnter?: StateTransitionOnMouseEnter;
+    onMouseLeave?: StateTransitionOnMouseLeave;
+}
+interface StateSettings extends StateTransitionEvents {
+    animationId?: string;
+    statePlaybackSettings: StateAnimationSettings;
+}
+interface State {
+    [key: string]: StateSettings;
+}
+interface DotLottieState {
+    descriptor: StateInfo;
+    states: State;
+}
+
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+interface StateOptions {
+    id: string;
+    state?: DotLottieState;
+    zipOptions?: ZipOptions;
+}
+declare class DotLottieStateCommon {
+    protected _id: string;
+    protected _zipOptions: ZipOptions;
+    protected _state?: DotLottieState | undefined;
+    constructor(options: StateOptions);
+    get zipOptions(): ZipOptions;
+    set zipOptions(zipOptions: ZipOptions);
+    get id(): string;
+    set id(id: string);
+    get state(): DotLottieState | undefined;
+    set state(state: DotLottieState | undefined);
+    toString(): string;
+    protected _requireValidId(id: string | undefined): void;
+}
+
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
 declare type ImageData = string | ArrayBuffer | Blob;
@@ -88,39 +198,3 @@ interface ImageOptions {
  */
-declare enum PlayMode {
-    Bounce = "bounce",
-    Normal = "normal"
-}
-interface ManifestAnimation {
-    autoplay?: boolean;
-    defaultTheme?: string;
-    direction?: number;
-    hover?: boolean;
-    id: string;
-    intermission?: number;
-    loop?: boolean | number;
-    playMode?: PlayMode;
-    speed?: number;
-    themeColor?: string;
-}
-interface ManifestTheme {
-    animations: string[];
-    id: string;
-}
-interface Manifest {
-    activeAnimationId?: string;
-    animations: ManifestAnimation[];
-    author?: string | undefined;
-    custom?: Record<string, unknown>;
-    description?: string | undefined;
-    generator?: string | undefined;
-    keywords?: string | undefined;
-    revision?: number | undefined;
-    themes?: ManifestTheme[];
-    version?: string | undefined;
-}
 
-/**
- * Copyright 2023 Design Barn Inc.
- */
-
 declare type AnimationData = Animation;
@@ -324,2 +398,3 @@ interface ExportOptions {
     revision?: number;
+    state?: Map<string, DotLottieState>;
     version?: string;
@@ -337,2 +412,3 @@ }
     protected readonly _themesMap: Map<string, LottieThemeCommon>;
+    protected readonly _stateMap: Map<string, DotLottieStateCommon>;
     protected _author?: string;
@@ -365,2 +441,3 @@ protected _description?: string;
     get themes(): LottieThemeCommon[];
+    get states(): DotLottieStateCommon[];
     setCustomData(customData: Record<string, unknown> | undefined): DotLottieCommon;
@@ -425,2 +502,5 @@ setAuthor(author: string | undefined): DotLottieCommon;
     }): DotLottieCommon;
+    addState(state: StateOptions): DotLottieCommon;
+    getState(stateId: string): DotLottieStateCommon | undefined;
+    removeState(stateId: string): DotLottieCommon;
     protected _requireValidAuthor(author: string | undefined): asserts author is string;
@@ -497,2 +577,10 @@ protected _requireValidDescription(description: string | undefined): asserts description is string;
 
-export { AnimationOptions, DotLottie, ImageOptions, LottieAnimation, LottieImage, LottieTheme, ThemeOptions };
+/**
+ * Copyright 2023 Design Barn Inc.
+ */
+
+declare class LottieState extends DotLottieStateCommon {
+    constructor(options: StateOptions);
+}
+
+export { AnimationOptions, DotLottie, ImageOptions, LottieAnimation, LottieImage, LottieState, LottieTheme, StateOptions, ThemeOptions };

dist/node/index.js

@@ -14,3 +14,3 @@ import { strToU8, zip, unzip, strFromU8 } from 'fflate';
   name: "@dotlottie/dotlottie-js",
-  version: "0.3.0",
+  version: "0.4.0-beta.0",
   type: "module",
@@ -134,2 +134,43 @@ description: "This library helps in creating and modifying .lottie files.",
 
+// src/common/dotlottie-state-common.ts
+var DotLottieStateCommon = class {
+  constructor(options) {
+    __publicField(this, "_id", "");
+    __publicField(this, "_zipOptions");
+    __publicField(this, "_state");
+    this._requireValidId(options.id);
+    this._id = options.id;
+    this._zipOptions = options.zipOptions ?? {};
+    if (options.state)
+      this._state = options.state;
+  }
+  get zipOptions() {
+    return this._zipOptions;
+  }
+  set zipOptions(zipOptions) {
+    this._zipOptions = zipOptions;
+  }
+  get id() {
+    return this._id;
+  }
+  set id(id) {
+    this._requireValidId(id);
+    this._id = id;
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state) {
+    this._state = state;
+  }
+  toString() {
+    return JSON.stringify(this._state);
+  }
+  _requireValidId(id) {
+    if (!id) {
+      throw createError("Invalid id.");
+    }
+  }
+};
+
 // src/common/dotlottie-theme-common.ts
@@ -227,2 +268,3 @@ var LottieThemeCommon = class {
     __publicField(this, "_themesMap", /* @__PURE__ */ new Map());
+    __publicField(this, "_stateMap", /* @__PURE__ */ new Map());
     __publicField(this, "_author");
@@ -299,2 +341,5 @@ __publicField(this, "_description");
   }
+  get states() {
+    return Array.from(this._stateMap.values());
+  }
   setCustomData(customData) {
@@ -443,2 +488,3 @@ this._customData = customData ?? {};
     const themesList = Array.from(this._themesMap.values());
+    const statesList = Array.from(this._stateMap.keys());
     const activeAnimationId = animationsList.find((value) => value.defaultActiveAnimation)?.id ?? "";
@@ -472,2 +518,5 @@ const manifest = {
     }
+    if (statesList.length > 0) {
+      manifest.states = statesList;
+    }
     return manifest;
@@ -601,2 +650,14 @@ }
   }
+  addState(state) {
+    const newState = new DotLottieStateCommon(state);
+    this._stateMap.set(state.id, newState);
+    return this;
+  }
+  getState(stateId) {
+    return this._stateMap.get(stateId);
+  }
+  removeState(stateId) {
+    this._stateMap.delete(stateId);
+    return this;
+  }
   _requireValidAuthor(author) {
@@ -1165,2 +1226,11 @@ if (!author)
 };
+
+// src/common/dotlottie-state.ts
+var EVENT_MAP = {
+  click: "onClick",
+  mouseenter: "onMouseEnter",
+  mouseleave: "onMouseLeave",
+  complete: "onComplete"
+};
+Object.values(EVENT_MAP);
 var DuplicateImageDetector = class extends DuplicateImageDetectorCommon {
@@ -1331,2 +1401,6 @@ distanceTo(imageHash, targetImageHash) {
     }
+    for (const state of this.states) {
+      const stateData = state.toString();
+      dotlottie[`states/${state.id}.json`] = [strToU8(stateData), state.zipOptions];
+    }
     const dotlottieArrayBuffer = await new Promise((resolve, reject) => {
@@ -1431,2 +1505,15 @@ zip(dotlottie, options?.zipOptions || {}, (err, data) => {
               });
+            } else if (key.startsWith("states/") && key.endsWith(".json")) {
+              const stateId = /states\/(.+)\.json/u.exec(key)?.[1];
+              if (!stateId) {
+                throw createError("Invalid theme id");
+              }
+              manifest.states?.forEach((state) => {
+                if (state === stateId) {
+                  dotlottie.addState({
+                    id: state,
+                    state: JSON.parse(state)
+                  });
+                }
+              });
             }
@@ -1473,3 +1560,10 @@ }
 
-export { DotLottie, LottieAnimation, LottieImage2 as LottieImage, LottieTheme };
+// src/node/lottie-state.ts
+var LottieState = class extends DotLottieStateCommon {
+  constructor(options) {
+    super(options);
+  }
+};
+
+export { DotLottie, LottieAnimation, LottieImage2 as LottieImage, LottieState, LottieTheme };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@dotlottie/dotlottie-js",
-  "version": "0.3.0",
+  "version": "0.4.0-beta.0",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "This library helps in creating and modifying .lottie files.",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

472873

increased by6.11%

Lines of code

7084

increased by6.57%

No dependency changes