@xtia/timeline 1.2.0 → 1.2.2

package/internal/emitters.d.ts

@@ -41,7 +41,7 @@ export declare class Emitter<T> {
      */
     dedupe(compare?: (a: T, b: T) => boolean): Emitter<T>;
     /**
-     * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
+     * Creates a chainable emitter that forwards emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
      *
      * The callback `cb` is called exactly once per parent emission, regardless of how many listeners are attached to the returned emitter.
      * All listeners attached to the returned emitter receive the same values as the parent emitter.
@@ -70,6 +70,12 @@ export declare class Emitter<T> {
      * @param cb
      */
     fork(...cb: ((branch: this) => void)[]): this;
+    /**
+     * Creates a chainable emitter that forwards emissions from the parent and any of the provided emitters
+     * @param emitters
+     */
+    or(...emitters: Emitter<T>[]): Emitter<T>;
+    or<U>(...emitters: Emitter<U>[]): Emitter<T | U>;
 }
 export declare class RangeProgression extends Emitter<number> {
     /**

package/internal/emitters.js

@@ -66,7 +66,7 @@ export class Emitter {
         return new Emitter(listen);
     }
     /**
-     * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
+     * Creates a chainable emitter that forwards emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
      *
      * The callback `cb` is called exactly once per parent emission, regardless of how many listeners are attached to the returned emitter.
      * All listeners attached to the returned emitter receive the same values as the parent emitter.
@@ -104,6 +104,12 @@ export class Emitter {
         cb.forEach(cb => cb(this));
         return this;
     }
+    or(...emitters) {
+        return new Emitter(handler => {
+            const unsubs = [this, ...emitters].map(e => e.listen(handler));
+            return () => unsubs.forEach(unsub => unsub());
+        });
+    }
 }
 export class RangeProgression extends Emitter {
     ease(easer) {

package/internal/timeline.d.ts

@@ -14,20 +14,18 @@ type Period = {
     asMilliseconds: number;
 };
 /**
- * Creates an autoplaying Timeline and returns a range from it
+ * Creates an autoplaying one-shot progression emitter
  * @param durationMs Animation duration, in milliseconds
  * @returns Object representing a range on a single-use, autoplaying Timeline
  */
-export declare function animate(durationMs: number): TimelineRange;
-export declare function animate(period: Period): TimelineRange;
+export declare function animate(durationMs: number): RangeProgression;
+export declare function animate(period: Period): RangeProgression;
 /**
- * Creates a looping Timeline and returns a range from it
- *
- * This timeline will play while it has active listeners
+ * Creates a looping progression emitter that will play while it has active listeners
  * @param duration Animation duration, in milliseconds, or a Period
- * @returns Object representing a range on a single-use, autoplaying Timeline
+ * @returns Object representing a range on a looping Timeline
  */
-export declare function animate(duration: number | Period, looping: true): TimelineRange;
+export declare function animate(duration: number | Period, looping: true): RangeProgression;
 type TimelineOptions = {
     atEnd?: {
         wrapAt: number;

package/internal/timeline.js

@@ -15,8 +15,10 @@ const createRafDriver = (tick) => {
     };
 };
 const createIntervalDriver = (tick) => {
+    const timeSource = globalThis.performance || globalThis.Date;
+    const tickTime = () => tick(timeSource.now());
     return () => {
-        const intervalId = setInterval(() => tick(performance.now()), 1000 / default_interval_fps);
+        const intervalId = setInterval(tickTime, 1000 / default_interval_fps);
         return () => clearInterval(intervalId);
     };
 };
@@ -24,9 +26,10 @@ const masterDriver = (() => {
     const timelines = new Map();
     let previousTime = null;
     let pause = null;
-    const step = (currentTime) => {
+    const stepAll = (currentTime) => {
         if (previousTime === null) {
             previousTime = currentTime;
+            return;
         }
         const delta = currentTime - previousTime;
         previousTime = currentTime;
@@ -35,22 +38,20 @@ const masterDriver = (() => {
         });
     };
     const start = "requestAnimationFrame" in globalThis
-        ? createRafDriver(step)
-        : createIntervalDriver(step);
-    return {
-        add: (timeline, stepFn) => {
-            timelines.set(timeline, stepFn);
-            if (timelines.size === 1) {
-                previousTime = null;
-                pause = start();
-            }
-        },
-        remove: (timeline) => {
+        ? createRafDriver(stepAll)
+        : createIntervalDriver(stepAll);
+    return (timeline, stepFn) => {
+        timelines.set(timeline, stepFn);
+        if (timelines.size === 1) {
+            previousTime = null;
+            pause = start();
+        }
+        return () => {
             timelines.delete(timeline);
             if (timelines.size === 0) {
                 pause();
             }
-        }
+        };
     };
 })();
 const EndAction = {
@@ -60,11 +61,11 @@ const EndAction = {
     restart: 3,
 };
 export function animate(duration, looping = false) {
-    const tl = new Timeline(false, "wrap");
+    const tl = new Timeline(!looping, looping ? "wrap" : "pause");
     const durationMs = typeof duration == "number"
         ? duration
         : duration.asMilliseconds;
-    const parentRange = tl.range(0, durationMs).ease();
+    const parentRange = tl.range(0, durationMs);
     if (looping) {
         let listeners = 0;
         const range = new TimelineRange(h => {
@@ -78,11 +79,10 @@ export function animate(duration, looping = false) {
                 unsub();
             };
         }, tl, tl.start, tl.point(durationMs));
-        return range;
+        return range.ease(); // empty ease() to coax TimelineRange -> RangeProgression
     }
     else {
-        tl.play();
-        return parentRange;
+        return parentRange.ease();
     }
 }
 export class Timeline {
@@ -411,8 +411,7 @@ export class Timeline {
             this.seek(arg.start);
             return this.seek(arg.end, arg.duration / this.timeScale, easer);
         }
-        masterDriver.add(this, n => this.next(n));
-        this._pause = () => masterDriver.remove(this);
+        this._pause = masterDriver(this, n => this.next(n));
     }
     next(delta) {
         if (this._currentTime + delta <= this._endPosition) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtia/timeline",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "repository": {
     "url": "https://github.com/tiadrop/timeline",
     "type": "github"