physics-animator 0.2.0 → 0.9.0

package/dist/cjs/animators/TweenAnimator.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TweenAnimator = void 0;
+exports.linearStep = linearStep;
+exports.easeInOutStep = easeInOutStep;
+exports.easeInStep = easeInStep;
+exports.easeOutStep = easeOutStep;
+const IFieldAnimator_js_1 = require("../IFieldAnimator.js");
+const defaultParams = {
+    duration_s: 0.5, // default duration of the tween in seconds
+    easingFn: linearStep, // default easing function is linear
+};
+exports.TweenAnimator = {
+    createState(obj, field, target, params) {
+        return {
+            x0: obj[field], // initial value of the field
+            t0_ms: performance.now(), // time when the tween started in milliseconds
+            target: target,
+            velocity: 0,
+            ...(params ?? defaultParams),
+        };
+    },
+    updateState(state, object, field, target, params) {
+        state.target = target;
+        state.x0 = object[field]; // update the initial value of the field
+        state.t0_ms = performance.now(); // reset the start time of the tween
+        state.duration_s = params?.duration_s ?? defaultParams.duration_s; // update the duration of the tween
+        state.easingFn = params?.easingFn ?? defaultParams.easingFn; //
+    },
+    step(state, object, field, params, dt_s) {
+        // step the tween
+        let x = object[field];
+        params.easingFn(object, field, state.target, state, dt_s);
+        let x_new = object[field];
+        state.velocity = (x_new - x) / dt_s;
+        // remove the tween if it's complete
+        let deltaTime_s = (performance.now() - state.t0_ms) / 1000;
+        if (deltaTime_s >= state.duration_s) {
+            object[field] = state.target;
+            return IFieldAnimator_js_1.StepResult.Complete;
+        }
+        else {
+            return IFieldAnimator_js_1.StepResult.Continue;
+        }
+    }
+};
+function linearStep(object, field, target, params, dt_s) {
+    let dx = target - params.x0;
+    let t = (performance.now() - params.t0_ms) / 1000;
+    let u = t / params.duration_s;
+    let x_new = params.x0 + dx * u;
+    object[field] = x_new;
+}
+// cubic ease in out
+function easeInOutStep(object, field, target, params, dt_s) {
+    let dx = target - params.x0;
+    let t = (performance.now() - params.t0_ms) / 1000;
+    let u = t / params.duration_s;
+    let x_new = params.x0 + dx * u * u * (3 - 2 * u);
+    object[field] = x_new;
+}
+function easeInStep(object, field, target, params, dt_s) {
+    let dx = target - params.x0;
+    let t = (performance.now() - params.t0_ms) / 1000;
+    let u = t / params.duration_s;
+    let x_new = params.x0 + dx * u * u * u;
+    object[field] = x_new;
+}
+function easeOutStep(object, field, target, params, dt_s) {
+    let dx = target - params.x0;
+    let t = (performance.now() - params.t0_ms) / 1000;
+    let u = t / params.duration_s;
+    let x_new = params.x0 + dx * (1 - Math.pow(1 - u, 3));
+    object[field] = x_new;
+}

package/dist/cjs/index.js

@@ -16,4 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AnimationSequencer.js"), exports);
 __exportStar(require("./Animator.js"), exports);
-__exportStar(require("./Spring.js"), exports);
+__exportStar(require("./IFieldAnimator.js"), exports);

package/dist/cjs/react/useSpringValue.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSpringValue = useSpringValue;
-const react_1 = require("react");
-const useAnimator_js_1 = require("./useAnimator.js");
 const use_initializer_1 = require("use-initializer");
+const useAnimator_js_1 = require("./useAnimator.js");
+const react_1 = require("react");
 /**
  * A value that animates to a target value using a spring animation.
  * This will **not** cause a re-render when the value changes.
@@ -13,47 +13,17 @@ const use_initializer_1 = require("use-initializer");
 function useSpringValue(options, onChange) {
     const animator = (0, useAnimator_js_1.useAnimator)(options.animator);
     const springValue = (0, use_initializer_1.useInitializer)(() => {
-        let value = structuredClone(options.initial);
         return {
-            get value() {
-                return value;
-            },
-            set value(newValue) {
-                value = newValue;
-                onChange(value);
-            },
+            value: structuredClone(options.initial),
         };
     });
-    const afterStepListener = (0, react_1.useRef)(null);
-    switch (typeof options.initial) {
-        case 'number':
-            {
-                animator.springTo(springValue, 'value', options.target, options);
-            }
-            break;
-        default:
-            {
-                if (Array.isArray(options.initial)) {
-                    for (let i = 0; i < options.initial.length; i++) {
-                        animator.springTo(springValue.value, i, options.target[i], options);
-                    }
-                }
-                else {
-                    // assume object, iterate over keys
-                    for (const key in options.initial) {
-                        animator.springTo(springValue.value, key, options.target[key], options);
-                    }
-                }
-                if (!afterStepListener.current) {
-                    afterStepListener.current = animator.onAfterStep.addListener(() => {
-                        onChange(springValue.value);
-                    });
-                    animator.onAllComplete(springValue.value, () => {
-                        afterStepListener.current?.remove();
-                        afterStepListener.current = null;
-                    }, 'once');
-                }
-            }
-            break;
-    }
+    (0, react_1.useEffect)(() => {
+        let remove = animator.onChange(springValue, () => {
+            onChange(springValue.value);
+        }).remove;
+        return () => {
+            remove();
+        };
+    }, [springValue, onChange]);
+    animator.springTo(springValue, { value: options.target }, options);
 }

package/dist/esm/Animator.js

@@ -1,81 +1,80 @@
 import { EventSignal } from "@haxiomic/event-signal";
-import { Spring } from "./Spring.js";
-var AnimationType;
-(function (AnimationType) {
-    AnimationType[AnimationType["Spring"] = 0] = "Spring";
-    AnimationType[AnimationType["Tween"] = 1] = "Tween";
-})(AnimationType || (AnimationType = {}));
+import { StepResult } from "./IFieldAnimator.js";
+import { SpringAnimator } from "./animators/SpringAnimator.js";
+import { easeInOutStep, easeInStep, easeOutStep, linearStep, TweenAnimator } from "./animators/TweenAnimator.js";
 /**
  * Physically based animation of numeric properties of objects
  *
  * Designed to avoid discontinuities for smooth animation in all conditions
  */
 export class Animator {
-    onBeforeStep = new EventSignal();
-    onAfterStep = new EventSignal();
-    _onAnimationComplete = new EventSignal();
-    _onObjectAnimationsComplete = new EventSignal();
     animations = new Map();
+    events = {
+        beforeStep: new EventSignal(),
+        afterStep: new EventSignal(),
+        completeField: new EventSignal(),
+        completeObject: new EventSignal(),
+    };
+    changeObjectEvents = new Map();
+    changeFieldEvents = new Map();
+    // we use these signals to coalesce object change events
+    beforeChange = new EventSignal();
+    afterChange = new EventSignal();
     constructor(onBeforeStep, onAfterStep) {
         if (onBeforeStep) {
-            this.onBeforeStep.addListener(e => onBeforeStep(e.dt_s));
+            this.events.beforeStep.addListener(e => onBeforeStep(e.dt_s));
         }
         if (onAfterStep) {
-            this.onAfterStep.addListener(e => onAfterStep(e.dt_s));
+            this.events.afterStep.addListener(e => onAfterStep(e.dt_s));
         }
     }
-    springTo(object, field, target, params = { duration_s: 0.5 }) {
-        if (params != null) {
-            let spring = this.getAnimationOrCreate(object, field, AnimationType.Spring);
-            // update the target and parameters
-            spring.type = AnimationType.Spring;
-            spring.target = target;
-            spring.springParams = Spring.getPhysicsParameters(params);
-            spring.step = null;
-        }
-        else {
-            this.setTo(object, field, target);
-        }
+    setTo(object, target) {
+        this.beforeChange.dispatch();
+        forObjectFieldsRecursive(object, target, (obj, field, targetValue) => {
+            this.setFieldTo(obj, field, targetValue);
+            this.dispatchChangeObjectEvent(obj);
+        });
+        this.afterChange.dispatch();
     }
-    customTweenTo(object, field, target, duration_s, step) {
-        let animation = this.getAnimationOrCreate(object, field, AnimationType.Tween);
-        animation.type = AnimationType.Tween;
-        animation.target = target;
-        animation.tweenParams = {
-            x0: object[field],
-            t0_ms: performance.now(),
-            duration_s: duration_s,
-        };
-        animation.step = step;
+    animateTo(object, target, animator = SpringAnimator, params = null) {
+        forObjectFieldsRecursive(object, target, (subObj, field, targetValue) => {
+            this.syncAnimation(subObj, field, targetValue, animator, params);
+        });
     }
-    linearTo(object, field, target, duration_s) {
-        this.customTweenTo(object, field, target, duration_s, Tween.linearStep);
+    springTo(object, target, params) {
+        this.animateTo(object, target, SpringAnimator, params);
     }
-    easeInOutTo(object, field, target, duration_s) {
-        this.customTweenTo(object, field, target, duration_s, Tween.easeInOutStep);
+    customTweenTo(object, target, duration_s, easingFn) {
+        this.animateTo(object, target, TweenAnimator, {
+            duration_s,
+            easingFn,
+        });
     }
-    easeInTo(object, field, target, duration_s) {
-        this.customTweenTo(object, field, target, duration_s, Tween.easeInStep);
+    linearTo(object, target, duration_s) {
+        this.customTweenTo(object, target, duration_s, linearStep);
     }
-    easeOutTo(object, field, target, duration_s) {
-        this.customTweenTo(object, field, target, duration_s, Tween.easeOutStep);
+    easeInOutTo(object, target, duration_s) {
+        this.customTweenTo(object, target, duration_s, easeInOutStep);
     }
-    /**
-     * Remove animation from the object and set the field to the target value
-     */
-    setTo(object, field, target) {
-        this.remove(object, field);
-        object[field] = target;
+    easeInTo(object, target, duration_s) {
+        this.customTweenTo(object, target, duration_s, easeInStep);
+    }
+    easeOutTo(object, target, duration_s) {
+        this.customTweenTo(object, target, duration_s, easeOutStep);
     }
-    onComplete(object, field, callback) {
-        return this._onAnimationComplete.addListener(e => {
+    onCompleteField(object, field, callback, once) {
+        let listener = this.events.completeField.addListener(e => {
             if (e.object === object && e.field === field) {
                 callback(object, field);
+                if (once) {
+                    listener.remove();
+                }
             }
         });
+        return listener;
     }
-    onAllComplete(object, callback, once) {
-        let listener = this._onObjectAnimationsComplete.addListener(e => {
+    onComplete(object, callback, once) {
+        const listener = this.events.completeObject.addListener(e => {
             if (e.object === object) {
                 callback(object);
                 if (once) {
@@ -85,65 +84,92 @@ export class Animator {
         });
         return listener;
     }
-    _springState = { x: 0, targetX: 0, v: 0 };
-    step(dt_s) {
-        if (this.onBeforeStep.hasListeners()) {
-            this.onBeforeStep.dispatch({ dt_s });
+    onChangeField(object, field, callback) {
+        // check if field is an object
+        if (typeof object[field] === 'object' && object[field] !== null) {
+            return this.onChange(object[field], (subObject) => {
+                callback(object, field);
+            });
         }
-        let springState = this._springState;
+        else {
+            // add a listener for this field
+            return this.addChangeFieldListener(object, field, callback);
+        }
+    }
+    onChange(object, callback) {
+        // add a listener for this object and every sub-object
+        const removeCallbacks = new Array();
+        // coalesce events within a single step
+        let objectChanged = false;
+        removeCallbacks.push(this.beforeChange.addListener(() => {
+            objectChanged = false;
+        }).remove, this.afterChange.addListener(() => {
+            if (objectChanged) {
+                callback(object);
+            }
+        }).remove);
+        const subObjectChangedCallback = (subObject) => {
+            objectChanged = true;
+        };
+        enumerateObjects(object, (subObject) => {
+            let signal = this.changeObjectEvents.get(object);
+            if (signal == null) {
+                signal = new EventSignal();
+                this.changeObjectEvents.set(subObject, signal);
+            }
+            const subListener = signal.addListener(subObjectChangedCallback);
+            removeCallbacks.push(() => {
+                subListener.remove();
+                if (!signal.hasListeners()) {
+                    this.changeObjectEvents.delete(object);
+                }
+            });
+        });
+        return {
+            remove: () => {
+                for (const remove of removeCallbacks) {
+                    remove();
+                }
+            }
+        };
+    }
+    onBeforeStep(callback) {
+        return this.events.beforeStep.addListener(e => callback(e.dt_s));
+    }
+    onAfterStep(callback) {
+        return this.events.afterStep.addListener(e => callback(e.dt_s));
+    }
+    step(dt_s) {
+        this.events.beforeStep.dispatch({ dt_s });
+        this.beforeChange.dispatch();
         // step all animations
-        this.animations.forEach((objectAnims, object) => {
-            objectAnims.forEach((animation, field) => {
-                switch (animation.type) {
-                    case AnimationType.Spring:
+        for (let [object, objectAnims] of this.animations.entries()) {
+            for (let [field, animation] of objectAnims.entries()) {
+                let result = animation.animator.step(animation.state, object, field, animation.params, dt_s);
+                // dispatch the field change event
+                this.dispatchChangeFieldEvent(object, field);
+                // handle animation completion
+                switch (result) {
+                    case StepResult.Complete:
                         {
-                            // step the spring
-                            springState.x = object[field];
-                            springState.targetX = animation.target;
-                            springState.v = animation.velocity;
-                            if (animation.springParams != null) {
-                                Spring.stepSpring(dt_s, springState, animation.springParams);
-                            }
-                            else {
-                                // instant transition: set to the target
-                                springState.x = springState.targetX;
-                                springState.v = 0;
-                            }
-                            // update the object
-                            object[field] = springState.x;
-                            animation.velocity = springState.v;
-                            // remove the spring if it's close enough to the target and velocity is close to 0
-                            if (Math.abs(springState.x - springState.targetX) < 0.0001 && Math.abs(springState.v) < 0.0001) {
-                                object[field] = animation.target;
-                                objectAnims.delete(field);
-                                this._onAnimationComplete.dispatch({ object, field });
-                            }
-                        }
-                        break;
-                    case AnimationType.Tween: {
-                        // step the tween
-                        let x = object[field];
-                        animation.step(object, field, animation.target, animation.tweenParams, dt_s);
-                        let x_new = object[field];
-                        animation.velocity = (x_new - x) / dt_s;
-                        // remove the tween if it's complete
-                        let deltaTime_s = (performance.now() - animation.tweenParams.t0_ms) / 1000;
-                        if (deltaTime_s >= animation.tweenParams.duration_s) {
-                            object[field] = animation.target;
                             objectAnims.delete(field);
-                            this._onAnimationComplete.dispatch({ object, field });
+                            this.events.completeField.dispatch({ object, field });
                         }
                         break;
-                    }
                 }
-            });
+            }
+            ;
+            // dispatch the object change event
+            this.dispatchChangeObjectEvent(object);
             // remove the object if it has no more springs
             if (objectAnims.size == 0) {
                 this.animations.delete(object);
-                this._onObjectAnimationsComplete.dispatch({ object });
+                this.events.completeObject.dispatch({ object });
             }
-        });
-        this.onAfterStep.dispatch({ dt_s });
+        }
+        ;
+        this.afterChange.dispatch();
+        this.events.afterStep.dispatch({ dt_s });
     }
     t_last = -1;
     tick() {
@@ -208,31 +234,106 @@ export class Animator {
      * Remove animation for this object and field if it exists
      * Does not change the value of the field
      */
-    remove(object, field) {
-        let objectSprings = this.animations.get(object);
-        if (objectSprings != null) {
-            objectSprings.delete(field);
+    remove(object, field, dispatchComplete = false) {
+        let objectAnimations = this.animations.get(object);
+        if (objectAnimations != null) {
+            objectAnimations.delete(field);
+            if (dispatchComplete) {
+                this.events.completeField.dispatch({ object, field });
+            }
         }
         // if there are no more springs for this object, remove it from the map
-        if (objectSprings != null && objectSprings.size == 0) {
-            this.animations.delete(object);
+        if (objectAnimations != null && objectAnimations.size == 0) {
+            this.removeObject(object, dispatchComplete);
         }
     }
     /**
      * Remove all animations for this object
      */
-    removeObject(object) {
+    removeObject(object, dispatchComplete = false) {
         this.animations.delete(object);
+        if (dispatchComplete) {
+            this.events.completeObject.dispatch({ object });
+        }
     }
     /**
      * Remove all animations
      */
-    removeAll() {
+    removeAll(dispatchComplete = false) {
+        for (let [object, objectAnimations] of this.animations.entries()) {
+            for (let field of objectAnimations.keys()) {
+                this.remove(object, field, dispatchComplete);
+            }
+        }
         this.animations.clear();
     }
-    getVelocity(object, field) {
-        let spring = this.getObjectAnimations(object).get(field);
-        return spring?.velocity ?? 0;
+    getState(object, field) {
+        let animation = this.getObjectAnimations(object).get(field);
+        return animation?.state;
+    }
+    dispatchChangeObjectEvent(object) {
+        let signal = this.changeObjectEvents.get(object);
+        if (signal == null) {
+            return;
+        }
+        signal.dispatch(object);
+    }
+    dispatchChangeFieldEvent(object, field) {
+        const map = this.changeFieldEvents.get(object);
+        if (map == null) {
+            return;
+        }
+        let signal = map.get(field);
+        if (signal == null) {
+            return;
+        }
+        if (signal.hasListeners()) {
+            signal.dispatch({ object, field });
+        }
+    }
+    addChangeFieldListener(object, field, callback) {
+        const getOrCreateChangeFieldSignal = (object, field) => {
+            let map = this.changeFieldEvents.get(object);
+            if (map == null) {
+                map = new Map();
+                this.changeFieldEvents.set(object, map);
+            }
+            let signal = map.get(field);
+            if (signal == null) {
+                signal = new EventSignal();
+                map.set(field, signal);
+            }
+            return signal;
+        };
+        const signal = getOrCreateChangeFieldSignal(object, field);
+        const listener = signal.addListener((e) => {
+            callback(e.object, e.field);
+        });
+        return {
+            remove: () => {
+                listener.remove();
+                // cleanup
+                if (!signal.hasListeners()) {
+                    let map = this.changeFieldEvents.get(object);
+                    map?.delete(field);
+                    if (map != null && map.size === 0) {
+                        this.changeFieldEvents.delete(object);
+                    }
+                }
+            }
+        };
+    }
+    /**
+     * Remove animation from the object and set the field to the target value
+     *
+     * This completes the animation immediately and dispatches the onComplete event
+     */
+    setFieldTo(object, field, targetValue) {
+        const dispatchComplete = true;
+        this.remove(object, field, dispatchComplete);
+        object[field] = targetValue;
+        // dispatch the field change event
+        this.dispatchChangeFieldEvent(object, field);
     }
     /**
      * Creates a new map if one doesn't already exist for the given object
@@ -249,58 +350,55 @@ export class Animator {
     /**
      * Creates a new spring if one doesn't already exist for the given object and field
      */
-    getAnimationOrCreate(object, field, type) {
+    syncAnimation(object, field, targetValue, fieldAnimator, params = null) {
         let objectAnimations = this.getObjectAnimations(object);
         let animation = objectAnimations.get(field);
-        if (animation == null) {
+        let animatorChanged = animation?.animator !== fieldAnimator;
+        if (animation == null || animatorChanged) {
             // create
             animation = {
-                target: 0,
-                type: type,
-                springParams: null,
-                tweenParams: null,
-                velocity: 0,
-                step: null
+                animator: fieldAnimator,
+                state: fieldAnimator.createState(object, field, targetValue, params),
+                params,
             };
             objectAnimations.set(field, animation);
         }
-        animation.type = type;
+        else {
+            animation.params = params;
+            animation.animator.updateState(animation.state, object, field, targetValue, params);
+        }
         return animation;
     }
 }
-export var Tween;
-(function (Tween) {
-    function linearStep(object, field, target, params, dt_s) {
-        let dx = target - params.x0;
-        let t = (performance.now() - params.t0_ms) / 1000;
-        let u = t / params.duration_s;
-        let x_new = params.x0 + dx * u;
-        object[field] = x_new;
-    }
-    Tween.linearStep = linearStep;
-    // cubic ease in out
-    function easeInOutStep(object, field, target, params, dt_s) {
-        let dx = target - params.x0;
-        let t = (performance.now() - params.t0_ms) / 1000;
-        let u = t / params.duration_s;
-        let x_new = params.x0 + dx * u * u * (3 - 2 * u);
-        object[field] = x_new;
-    }
-    Tween.easeInOutStep = easeInOutStep;
-    function easeInStep(object, field, target, params, dt_s) {
-        let dx = target - params.x0;
-        let t = (performance.now() - params.t0_ms) / 1000;
-        let u = t / params.duration_s;
-        let x_new = params.x0 + dx * u * u * u;
-        object[field] = x_new;
-    }
-    Tween.easeInStep = easeInStep;
-    function easeOutStep(object, field, target, params, dt_s) {
-        let dx = target - params.x0;
-        let t = (performance.now() - params.t0_ms) / 1000;
-        let u = t / params.duration_s;
-        let x_new = params.x0 + dx * (1 - Math.pow(1 - u, 3));
-        object[field] = x_new;
-    }
-    Tween.easeOutStep = easeOutStep;
-})(Tween || (Tween = {}));
+function forObjectFieldsRecursive(sourceObj, targetObj, callback) {
+    for (let field in targetObj) {
+        if (Object.prototype.hasOwnProperty.call(targetObj, field)) {
+            let targetValue = targetObj[field];
+            if (typeof targetValue === 'object') {
+                forObjectFieldsRecursive(sourceObj[field], targetValue, callback);
+            }
+            else {
+                callback(sourceObj, field, targetValue);
+            }
+        }
+    }
+}
+function enumerateObjects(input, callback) {
+    // Call callback for the current object if it's an object or array
+    if (typeof input === 'object' && input !== null) {
+        callback(input);
+        // Recursively enumerate nested objects
+        if (Array.isArray(input)) {
+            for (const item of input) {
+                enumerateObjects(item, callback);
+            }
+        }
+        else {
+            for (const key in input) {
+                if (input.hasOwnProperty(key)) {
+                    enumerateObjects(input[key], callback);
+                }
+            }
+        }
+    }
+}

package/dist/esm/IFieldAnimator.js

@@ -0,0 +1,5 @@
+export var StepResult;
+(function (StepResult) {
+    StepResult[StepResult["Continue"] = 0] = "Continue";
+    StepResult[StepResult["Complete"] = 1] = "Complete";
+})(StepResult || (StepResult = {}));