@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3

package/dist/core/Signal.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Signal = exports.Easing = void 0;
+exports.createSignal = createSignal;
+exports.isSignal = isSignal;
+exports.unwrap = unwrap;
+exports.resetSignals = resetSignals;
+const Interpolation_1 = require("./Interpolation");
+/**
+ * Standard easing functions
+ */
+exports.Easing = {
+    linear: (t) => t,
+    // Quadratic
+    easeIn: (t) => t * t,
+    easeOut: (t) => 1 - Math.pow(1 - t, 2),
+    easeInOut: (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2),
+    // Cubic
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
+    easeInOutCubic: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
+    // Quartic
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - Math.pow(1 - t, 4),
+    easeInOutQuart: (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2),
+    // Quintic
+    easeInQuint: (t) => t * t * t * t * t,
+    easeOutQuint: (t) => 1 - Math.pow(1 - t, 5),
+    easeInOutQuint: (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2,
+    // Sine
+    easeInSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: (t) => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+    // Exponential
+    easeInExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: (t) => {
+        if (t === 0)
+            return 0;
+        if (t === 1)
+            return 1;
+        return t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+    },
+    // Circular
+    easeInCirc: (t) => 1 - Math.sqrt(1 - Math.pow(t, 2)),
+    easeOutCirc: (t) => Math.sqrt(1 - Math.pow(t - 1, 2)),
+    easeInOutCirc: (t) => t < 0.5
+        ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
+        : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2,
+    // Back
+    easeInBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return c3 * t * t * t - c1 * t * t;
+    },
+    easeOutBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    },
+    easeInOutBack: (t) => {
+        const c1 = 1.70158;
+        const c2 = c1 * 1.525;
+        return t < 0.5
+            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+    },
+    // Elastic
+    easeInElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0 ? 0 : t === 1 ? 1 : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+    },
+    easeOutElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+    easeInOutElastic: (t) => {
+        const c5 = (2 * Math.PI) / 4.5;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : t < 0.5
+                    ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
+                    : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 + 1;
+    },
+    // Bounce
+    easeInBounce: (t) => 1 - exports.Easing.easeOutBounce(1 - t),
+    easeOutBounce: (t) => {
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1) {
+            return n1 * t * t;
+        }
+        else if (t < 2 / d1) {
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        }
+        else if (t < 2.5 / d1) {
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        }
+        else {
+            return n1 * (t -= 2.625 / d1) * t + 0.984375;
+        }
+    },
+    easeInOutBounce: (t) => t < 0.5 ? (1 - exports.Easing.easeOutBounce(1 - 2 * t)) / 2 : (1 + exports.Easing.easeOutBounce(2 * t - 1)) / 2,
+};
+/**
+ * Signal class - reactive value that can be animated
+ */
+class Signal {
+    constructor(initial, options) {
+        this._currentThread = null;
+        this._value = initial;
+        this._initialValue = initial;
+        this._interpolator = options?.interpolator || (0, Interpolation_1.getInterpolator)(initial, initial);
+        this._colorSpace = options?.colorSpace || "rgb";
+    }
+    /**
+     * Get current value at specific time (backward compatibility)
+     */
+    get(time) {
+        return this._value;
+    }
+    /**
+     * Get current value (sync)
+     */
+    value() {
+        return this._value;
+    }
+    /**
+     * Set value directly
+     */
+    set(value) {
+        this._value = value;
+        this._currentThread = null;
+    }
+    /**
+     * Reset to initial value
+     */
+    reset() {
+        this._value = this._initialValue;
+        this._currentThread = null;
+    }
+    /**
+     * Animate to a new value - returns a generator
+     */
+    *to(value, duration, config) {
+        const from = this._value;
+        const easing = config?.easing || exports.Easing.linear;
+        const interpolator = config?.interpolator || this._getInterpolator(from, value);
+        if (duration <= 0) {
+            this._value = value;
+            return;
+        }
+        let elapsed = 0;
+        while (elapsed < duration) {
+            const delta = yield;
+            const actualDelta = typeof delta === "number" ? delta : 1 / 60; // Default 60fps
+            elapsed += actualDelta;
+            const progress = Math.min(elapsed / duration, 1);
+            const easedProgress = easing(progress);
+            this._value = interpolator(from, value, easedProgress);
+            // Critical: ensure we don't overshoot
+            if (elapsed >= duration) {
+                this._value = value;
+                break;
+            }
+        }
+        // Final value assignment
+        this._value = value;
+    }
+    /**
+     * Wait for a duration without changing value
+     */
+    *wait(duration) {
+        let elapsed = 0;
+        while (elapsed < duration) {
+            const delta = yield;
+            const actualDelta = typeof delta === "number" ? delta : 1 / 60;
+            elapsed += actualDelta;
+        }
+    }
+    /**
+     * Run animation from generator
+     */
+    run(generator) {
+        this._currentThread = generator;
+        return this;
+    }
+    /**
+     * Update signal (called by scheduler)
+     */
+    update(delta) {
+        if (!this._currentThread)
+            return false;
+        const result = this._currentThread.next(delta);
+        if (result.done) {
+            this._currentThread = null;
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Check if signal has active animation
+     */
+    isAnimating() {
+        return this._currentThread !== null;
+    }
+    /**
+     * Internal: get interpolator for values
+     */
+    _getInterpolator(from, to) {
+        // Check if it's a color string
+        if (typeof from === "string" && typeof to === "string") {
+            const fromStr = from;
+            if (fromStr.startsWith("#") || fromStr.startsWith("rgb") || fromStr.startsWith("hsl")) {
+                return (this._colorSpace === "hsl"
+                    ? Interpolation_1.lerpColorHSL
+                    : Interpolation_1.lerpColorRGB);
+            }
+        }
+        return this._interpolator;
+    }
+}
+exports.Signal = Signal;
+/**
+ * Create a new signal
+ */
+function createSignal(initial, options) {
+    return new Signal(initial, options);
+}
+/**
+ * Type guard for signals
+ */
+function isSignal(value) {
+    return value instanceof Signal;
+}
+/**
+ * Unwrap signal or return value
+ */
+function unwrap(value) {
+    if (isSignal(value)) {
+        return value.value();
+    }
+    return value;
+}
+/**
+ * Reset multiple signals to their initial values
+ */
+function resetSignals(...signals) {
+    for (const signal of signals) {
+        signal.reset();
+    }
+}
+exports.default = Signal;

package/dist/core/SignalUtils.d.ts

@@ -0,0 +1,133 @@
+import { ThreadGenerator, Signal } from "./Signal";
+/**
+ * Run multiple animations in parallel
+ * @param generators - Array of animation generators
+ */
+export declare function all(...generators: ThreadGenerator[]): ThreadGenerator;
+/**
+ * Run animations in sequence
+ * @param generators - Array of animation generators
+ */
+export declare function chain(...generators: ThreadGenerator[]): ThreadGenerator;
+/**
+ * Run animation in a loop
+ * @param generator - Animation generator factory
+ * @param times - Number of iterations (Infinity for endless)
+ */
+export declare function loop(generator: () => ThreadGenerator, times?: number): ThreadGenerator;
+/**
+ * Run animation for a specific duration
+ * @param generator - Animation generator factory
+ * @param duration - Total duration in seconds
+ */
+export declare function loopFor(generator: () => ThreadGenerator, duration: number): ThreadGenerator;
+/**
+ * Wait for a specific duration
+ * @param duration - Duration in seconds
+ */
+export declare function waitFor(duration: number): ThreadGenerator;
+/**
+ * Delay an animation by a specific duration
+ * @param duration - Delay in seconds
+ * @param generator - Animation generator
+ */
+export declare function delay(duration: number, generator: ThreadGenerator): ThreadGenerator;
+/**
+ * Run animations until any one completes
+ * @param generators - Array of animation generators
+ */
+export declare function any(...generators: ThreadGenerator[]): ThreadGenerator;
+/**
+ * Conditional animation
+ * @param condition - Condition function
+ * @param trueGen - Generator if condition is true
+ * @param falseGen - Generator if condition is false
+ */
+export declare function conditional(condition: () => boolean, trueGen: ThreadGenerator, falseGen?: ThreadGenerator): ThreadGenerator;
+/**
+ * Repeat animation while condition is true
+ * @param condition - Condition function
+ * @param generator - Animation generator factory
+ */
+export declare function repeatWhile(condition: () => boolean, generator: () => ThreadGenerator): ThreadGenerator;
+/**
+ * Run animation at specific intervals
+ * @param interval - Interval duration in seconds
+ * @param generator - Animation generator factory
+ * @param times - Number of times to run (Infinity for endless)
+ */
+export declare function every(interval: number, generator: () => ThreadGenerator, times?: number): ThreadGenerator;
+/**
+ * Spring animation utility
+ * @param signal - Signal to animate
+ * @param target - Target value
+ * @param config - Spring configuration
+ */
+export declare function spring<T>(signal: Signal<T>, target: T, config?: {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    precision?: number;
+}): ThreadGenerator;
+/**
+ * Tween between multiple values in sequence
+ * @param signal - Signal to animate
+ * @param values - Array of target values
+ * @param duration - Duration for each tween
+ * @param config - Tween configuration
+ */
+export declare function sequence<T>(signal: Signal<T>, values: T[], duration: number, config?: Parameters<Signal<T>["to"]>[2]): ThreadGenerator;
+/**
+ * Animate signal back and forth
+ * @param signal - Signal to animate
+ * @param from - Start value
+ * @param to - End value
+ * @param duration - Duration for each direction
+ * @param config - Tween configuration
+ */
+export declare function yoyo<T>(signal: Signal<T>, from: T, to: T, duration: number, config?: Parameters<Signal<T>["to"]>[2]): ThreadGenerator;
+/**
+ * Create a timeline builder for complex animations
+ */
+export declare class Timeline {
+    private generators;
+    private currentTime;
+    /**
+     * Add animation at specific time
+     */
+    at(time: number, generator: ThreadGenerator): this;
+    /**
+     * Add animation after previous
+     */
+    then(generator: ThreadGenerator): this;
+    /**
+     * Set current time cursor
+     */
+    seek(time: number): this;
+    /**
+     * Execute timeline
+     */
+    play(): ThreadGenerator;
+}
+/**
+ * Create a timeline
+ */
+export declare function timeline(): Timeline;
+/**
+ * Calculate the total duration of an animation by running it with a fixed timestep
+ * @param generatorFactory - Function that creates the animation generator
+ * @param maxDuration - Maximum duration to simulate (safety limit, default: 3600s = 1 hour)
+ * @param timestep - Simulation timestep in seconds (default: 1/60)
+ * @returns Total duration in seconds
+ */
+export declare function calculateDuration(generatorFactory: () => ThreadGenerator, maxDuration?: number, timestep?: number): number;
+/**
+ * Calculate duration from multiple animation factories running in parallel
+ * Returns the duration of the longest animation
+ */
+export declare function calculateParallelDuration(generatorFactories: (() => ThreadGenerator)[], maxDuration?: number, timestep?: number): number;
+/**
+ * Calculate duration from multiple animation factories running in sequence
+ * Returns the sum of all animation durations
+ */
+export declare function calculateSequentialDuration(generatorFactories: (() => ThreadGenerator)[], maxDuration?: number, timestep?: number): number;