lotio 1.1.54 → 1.1.56

package/browser/index.js

@@ -3,7 +3,7 @@
  * @module lotio
  */
 
-import { initLotio, createAnimation, renderFrameToCanvas, renderFrameRGBA, cleanup, registerFont, getVersion } from './wasm.js';
+import { initLotio, createAnimation, renderFrameToCanvas, renderFrameRGBA, cleanup, registerFont, getVersion, setDebugMode } from './wasm.js';
 
 /**
  * Animation states
@@ -75,6 +75,7 @@ export class Lotio extends EventEmitter {
      * @param {number} options.textPadding - Text padding factor (0.0-1.0, default: 0.97)
      * @param {string} options.textMeasurementMode - Text measurement mode: 'fast'|'accurate'|'pixel-perfect' (default: 'accurate')
      * @param {string} options.wasmPath - Path to lotio.wasm file (default: './lotio.wasm')
+     * @param {boolean} options.debug - Enable debug logging (default: false)
      */
     constructor(options = {}) {
         super();
@@ -86,6 +87,7 @@ export class Lotio extends EventEmitter {
         this._layerOverrides = options.layerOverrides || null;
         this._textPadding = options.textPadding !== undefined ? options.textPadding : 0.97;
         this._textMeasurementMode = options.textMeasurementMode || 'accurate';
+        this._debug = options.debug === true;
         this._state = State.STOPPED;
         this._wasmInitialized = false;
         this._animationInfo = null;
@@ -96,6 +98,19 @@ export class Lotio extends EventEmitter {
         this._startTime = 0;
         this._registeredFonts = new Set();
         
+        if (this._debug) {
+            console.log('[Lotio] Constructor called with options:', {
+                wasmPath: this._wasmPath,
+                fps: this._fps,
+                hasAnimation: !!this._animation,
+                hasLayerOverrides: !!this._layerOverrides,
+                textPadding: this._textPadding,
+                textMeasurementMode: this._textMeasurementMode,
+                fontsCount: this._fonts.length,
+                debug: this._debug
+            });
+        }
+        
         // Auto-initialize if animation is provided
         if (this._animation) {
             this._init().catch(error => {
@@ -111,14 +126,34 @@ export class Lotio extends EventEmitter {
      */
     async _init() {
         if (this._wasmInitialized) {
+            if (this._debug) {
+                console.log('[Lotio] WASM already initialized, skipping');
+            }
             return;
         }
 
+        let initStartTime;
+        if (this._debug) {
+            console.log('[Lotio] Initializing WASM module from:', this._wasmPath);
+            initStartTime = performance.now();
+            setDebugMode(true);
+        } else {
+            setDebugMode(false);
+        }
+
         try {
             await initLotio(this._wasmPath);
             this._wasmInitialized = true;
             
+            if (this._debug) {
+                const initEndTime = performance.now();
+                console.log(`[Lotio] WASM module initialized successfully in ${initStartTime ? (initEndTime - initStartTime).toFixed(2) : '?'}ms`);
+            }
+            
             // Register fonts
+            if (this._debug && this._fonts.length > 0) {
+                console.log(`[Lotio] Registering ${this._fonts.length} font(s)...`);
+            }
             for (const font of this._fonts) {
                 await this._registerFont(font.name, font.data);
             }
@@ -128,8 +163,14 @@ export class Lotio extends EventEmitter {
                 await this._loadAnimation();
             } else {
                 this._setState(State.LOADED);
+                if (this._debug) {
+                    console.log('[Lotio] No animation provided, state set to LOADED');
+                }
             }
         } catch (error) {
+            if (this._debug) {
+                console.error('[Lotio] Failed to initialize WASM:', error);
+            }
             this._setState(State.ERROR);
             this.emit('error', error, this);
             throw error;
@@ -142,6 +183,9 @@ export class Lotio extends EventEmitter {
      */
     async _registerFont(name, data) {
         if (this._registeredFonts.has(name)) {
+            if (this._debug) {
+                console.log(`[Lotio] Font "${name}" already registered, skipping`);
+            }
             return;
         }
         
@@ -149,8 +193,16 @@ export class Lotio extends EventEmitter {
             await this._init();
         }
         
+        if (this._debug) {
+            console.log(`[Lotio] Registering font "${name}" (${data.length} bytes)`);
+        }
+        
         registerFont(name, data);
         this._registeredFonts.add(name);
+        
+        if (this._debug) {
+            console.log(`[Lotio] Font "${name}" registered successfully`);
+        }
     }
 
     /**
@@ -162,6 +214,12 @@ export class Lotio extends EventEmitter {
             await this._init();
         }
 
+        let loadStartTime;
+        if (this._debug) {
+            console.log('[Lotio] Loading animation...');
+            loadStartTime = performance.now();
+        }
+
         try {
             const animationJson = typeof this._animation === 'string' 
                 ? this._animation 
@@ -173,6 +231,15 @@ export class Lotio extends EventEmitter {
                     : JSON.stringify(this._layerOverrides))
                 : null;
 
+            if (this._debug) {
+                const animSize = animationJson.length;
+                console.log(`[Lotio] Animation JSON size: ${animSize} bytes`);
+                if (layerOverridesJson) {
+                    console.log(`[Lotio] Layer overrides JSON size: ${layerOverridesJson.length} bytes`);
+                }
+                console.log(`[Lotio] Text padding: ${this._textPadding}, measurement mode: ${this._textMeasurementMode}`);
+            }
+
             this._animationInfo = createAnimation(
                 JSON.parse(animationJson),
                 layerOverridesJson ? JSON.parse(layerOverridesJson) : null,
@@ -180,11 +247,25 @@ export class Lotio extends EventEmitter {
                 this._textMeasurementMode
             );
 
+            if (this._debug) {
+                const loadEndTime = performance.now();
+                console.log(`[Lotio] Animation loaded successfully in ${loadStartTime ? (loadEndTime - loadStartTime).toFixed(2) : '?'}ms`);
+                console.log('[Lotio] Animation info:', {
+                    width: this._animationInfo.width,
+                    height: this._animationInfo.height,
+                    duration: this._animationInfo.duration,
+                    fps: this._animationInfo.fps
+                });
+            }
+
             this._currentTime = 0;
             this._currentFrame = 0;
             this._setState(State.LOADED);
             this.emit('loaded', this);
         } catch (error) {
+            if (this._debug) {
+                console.error('[Lotio] Failed to load animation:', error);
+            }
             this._setState(State.ERROR);
             this.emit('error', error, this);
             throw error;
@@ -200,6 +281,9 @@ export class Lotio extends EventEmitter {
         this._state = newState;
         
         if (oldState !== newState) {
+            if (this._debug) {
+                console.log(`[Lotio] State changed: ${oldState} -> ${newState}`);
+            }
             this.emit('statechange', newState, oldState, this);
         }
     }
@@ -210,6 +294,9 @@ export class Lotio extends EventEmitter {
      */
     _animate() {
         if (!this._isPlaying || !this._animationInfo) {
+            if (this._debug) {
+                console.warn('[Lotio] Animation loop called but not playing or no animation info');
+            }
             return;
         }
 
@@ -221,8 +308,15 @@ export class Lotio extends EventEmitter {
         this._currentTime = (elapsed * speedMultiplier) % this._animationInfo.duration;
         this._currentFrame = Math.floor(this._currentTime * animationFPS);
 
+        if (this._debug && this._currentFrame % Math.floor(animationFPS) === 0) {
+            console.log(`[Lotio] Frame ${this._currentFrame} at time ${this._currentTime.toFixed(3)}s (${(this._currentTime / this._animationInfo.duration * 100).toFixed(1)}%)`);
+        }
+
         // Check if animation ended
         if (this._currentTime >= this._animationInfo.duration) {
+            if (this._debug) {
+                console.log('[Lotio] Animation ended');
+            }
             this.stop();
             this.emit('end', this);
             return;
@@ -344,6 +438,9 @@ export class Lotio extends EventEmitter {
             throw new Error('Animation not loaded');
         }
 
+        const oldTime = this._currentTime;
+        const oldFrame = this._currentFrame;
+
         // Determine if input is frame number or time
         if (frameOrTime < 1) {
             // Likely a time value (0.0 - duration)
@@ -356,6 +453,10 @@ export class Lotio extends EventEmitter {
             this._currentTime = this._currentFrame / animationFPS;
         }
 
+        if (this._debug && (oldTime !== this._currentTime || oldFrame !== this._currentFrame)) {
+            console.log(`[Lotio] Seek: frame ${oldFrame} -> ${this._currentFrame}, time ${oldTime.toFixed(3)}s -> ${this._currentTime.toFixed(3)}s`);
+        }
+
         if (this._isPlaying) {
             this._startTime = performance.now() - (this._currentTime / (this._fps / (this._animationInfo.fps || 30)) * 1000);
         }
@@ -370,9 +471,17 @@ export class Lotio extends EventEmitter {
         }
 
         if (this._isPlaying) {
+            if (this._debug) {
+                console.log('[Lotio] Already playing, ignoring start() call');
+            }
             return this;
         }
 
+        if (this._debug) {
+            console.log('[Lotio] Starting animation...');
+            console.log(`[Lotio] Starting from frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s`);
+        }
+
         this._isPlaying = true;
         this._setState(State.PLAYING);
         
@@ -380,6 +489,10 @@ export class Lotio extends EventEmitter {
         const speedMultiplier = this._fps / animationFPS;
         this._startTime = performance.now() - (this._currentTime / speedMultiplier * 1000);
         
+        if (this._debug) {
+            console.log(`[Lotio] Animation FPS: ${animationFPS}, Target FPS: ${this._fps}, Speed multiplier: ${speedMultiplier.toFixed(3)}`);
+        }
+        
         this.emit('start', this);
         this._animate();
         
@@ -388,9 +501,16 @@ export class Lotio extends EventEmitter {
 
     pause() {
         if (!this._isPlaying) {
+            if (this._debug) {
+                console.log('[Lotio] Not playing, ignoring pause() call');
+            }
             return this;
         }
 
+        if (this._debug) {
+            console.log(`[Lotio] Pausing at frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s`);
+        }
+
         this._isPlaying = false;
         this._setState(State.PAUSED);
         
@@ -406,6 +526,10 @@ export class Lotio extends EventEmitter {
     stop() {
         const wasPlaying = this._isPlaying;
         
+        if (this._debug && wasPlaying) {
+            console.log(`[Lotio] Stopping animation (was at frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s)`);
+        }
+        
         this.pause();
         this.seek(0);
         this._setState(State.STOPPED);
@@ -421,12 +545,31 @@ export class Lotio extends EventEmitter {
      * Render current frame to canvas
      * @param {HTMLCanvasElement} canvas - Canvas element to render to
      * @param {string} bgColor - Background color (default: '#2a2a2a')
+     * @param {boolean} emitFrameEvent - Whether to emit 'frame' event (default: false)
      */
-    renderToCanvas(canvas, bgColor = '#2a2a2a') {
+    renderToCanvas(canvas, bgColor = '#2a2a2a', emitFrameEvent = false) {
         if (!this._animationInfo) {
             throw new Error('Animation not loaded');
         }
+        
+        let renderStartTime;
+        if (this._debug) {
+            console.log(`[Lotio] Rendering frame ${this._currentFrame} (time ${this._currentTime.toFixed(3)}s) to canvas`);
+            renderStartTime = performance.now();
+        }
+        
         renderFrameToCanvas(canvas, this._currentTime, bgColor);
+        
+        // Optionally emit frame event when rendering directly
+        if (emitFrameEvent) {
+            this.emit('frame', this._currentFrame, this._currentTime, this);
+        }
+        
+        if (this._debug) {
+            const renderEndTime = performance.now();
+            console.log(`[Lotio] Canvas rendered in ${renderStartTime ? (renderEndTime - renderStartTime).toFixed(2) : '?'}ms`);
+        }
+        
         return this;
     }
 
@@ -434,12 +577,21 @@ export class Lotio extends EventEmitter {
      * Cleanup resources
      */
     destroy() {
+        if (this._debug) {
+            console.log('[Lotio] Destroying instance...');
+        }
+        
         this.stop();
         cleanup();
         this._wasmInitialized = false;
         this._animationInfo = null;
         this._state = State.STOPPED;
         this.emit('destroy', this);
+        
+        if (this._debug) {
+            console.log('[Lotio] Instance destroyed');
+        }
+        
         return this;
     }
 }