@xtia/timeline 1.0.6 → 1.0.8

package/internal/timeline.d.ts

@@ -128,9 +128,9 @@ export declare class Timeline {
      * @deprecated Use timeline.position += n
      */
     step(delta: number): void;
-    tween<T extends Tweenable>(start: number | TimelinePoint, duration: number, apply: (v: Widen<T>) => void, from: T, to: T, easer?: Easer): ChainingInterface;
+    tween<T extends Tweenable>(start: number | TimelinePoint, duration: number, apply: (v: Widen<T>) => void, from: T, to: T, easer?: Easer | keyof typeof easers): ChainingInterface;
     tween<T extends Tweenable>(start: number | TimelinePoint, end: TimelinePoint, // ease migration for tl.tween(0, tl.end, ...)
-    apply: (v: Widen<T>) => void, from: T, to: T, easer?: Easer): ChainingInterface;
+    apply: (v: Widen<T>) => void, from: T, to: T, easer?: Easer | keyof typeof easers): ChainingInterface;
     at(position: number | TimelinePoint, action?: () => void, reverse?: boolean | (() => void)): ChainingInterface;
     private createChainingInterface;
     /**
@@ -139,7 +139,7 @@ export declare class Timeline {
     get position(): number;
 }
 export interface ChainingInterface {
-    thenTween(duration: number, apply: (v: number) => void, from?: number, to?: number, easer?: Easer): ChainingInterface;
+    thenTween<T extends Tweenable>(duration: number, apply: (v: Widen<T>) => void, from: T, to: T, easer: Easer): ChainingInterface;
     then(action: () => void): ChainingInterface;
     thenWait(duration: number): ChainingInterface;
     readonly end: TimelinePoint;

package/internal/timeline.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = void 0;
-exports.animate = animate;
-const emitters_1 = require("./emitters");
-const utils_1 = require("./utils");
+import { TimelinePoint } from "./point";
+import { TimelineRange } from "./range";
+import { clamp } from "./utils";
 const default_fps = 60;
 const EndAction = {
     pause: 0,
@@ -16,10 +13,10 @@ const EndAction = {
  * @param duration
  * @returns Object representing a range on a single-use, autoplaying Timeline
  */
-function animate(duration) {
+export function animate(duration) {
     return new Timeline(true).range(0, duration);
 }
-class Timeline {
+export class Timeline {
     get currentTime() { return this._currentTime; }
     set currentTime(v) {
         this.seek(v);
@@ -88,7 +85,7 @@ class Timeline {
             handlers,
             position,
         };
-        return (0, emitters_1.createEmitter)(handler => {
+        const addHandler = (handler) => {
             if (this.seeking)
                 throw new Error("Can't add a listener while seeking");
             // we're adding and removing points and ranges to the internal registry according to whether any subscriptions are active, to allow obsolete points and ranges to be garbage-collected
@@ -107,17 +104,8 @@ class Timeline {
                     this.points.splice(idx, 1);
                 }
             };
-        }, {
-            delta: t => this.point(position + t),
-            range: duration => this.range(position, duration),
-            to: target => {
-                const targetPosition = typeof target == "number"
-                    ? target
-                    : target.position;
-                return this.range(position, targetPosition - position);
-            },
-            position,
-        });
+        };
+        return new TimelinePoint(addHandler, this, position);
     }
     range(start = 0, optionalDuration) {
         const startPoint = typeof start == "number"
@@ -153,58 +141,7 @@ class Timeline {
                 }
             };
         };
-        return (0, emitters_1.createProgressEmitter)(addHandler, {
-            duration,
-            start: this.point(startPosition),
-            end: this.point(startPosition + duration),
-            bisect: (position = duration / 2) => {
-                return [
-                    this.range(startPosition, position),
-                    this.range(startPosition + position, duration - position),
-                ];
-            },
-            spread: (count) => {
-                const delta = duration / (count + 1);
-                return [
-                    ...Array(count).fill(0).map((_, idx) => this.point(idx * delta + startPosition + delta))
-                ];
-            },
-            play: (easer) => {
-                this.pause();
-                this.currentTime = startPosition;
-                return this.seek(startPosition + duration, duration, easer);
-            },
-            grow: (delta, anchor = 0) => {
-                const clampedAnchor = (0, utils_1.clamp)(anchor, 0, 1);
-                const leftDelta = -delta * (1 - clampedAnchor);
-                const rightDelta = delta * clampedAnchor;
-                const newStart = startPosition + leftDelta;
-                const newEnd = endPosition + rightDelta;
-                if (newEnd < newStart) {
-                    const mid = (newStart + newEnd) / 2;
-                    return this.range(mid, 0);
-                }
-                return this.range(newStart, newEnd - newStart);
-            },
-            scale: (factor, anchor = 0.5) => {
-                if (factor <= 0) {
-                    throw new RangeError('scale factor must be > 0');
-                }
-                const clampedAnchor = (0, utils_1.clamp)(anchor, 0, 1);
-                const oldLen = endPosition - startPosition;
-                const pivot = startPosition + oldLen * clampedAnchor;
-                const newStart = pivot - (pivot - startPosition) * factor;
-                const newEnd = pivot + (endPosition - pivot) * factor;
-                if (newEnd < newStart) {
-                    const mid = (newStart + newEnd) / 2;
-                    return this.range(mid, 0);
-                }
-                return this.range(newStart, newEnd - newStart);
-            },
-            contains: point => {
-                return point.position >= startPosition && point.position < endPosition;
-            }
-        });
+        return new TimelineRange(addHandler, this, startPosition, duration);
     }
     getWrappedPosition(n) {
         if (this.endAction.type !== EndAction.wrap)
@@ -298,7 +235,7 @@ class Timeline {
             // filter ranges that overlap seeked range
             if (Math.min(position, end) <= Math.max(to, fromTime)
                 && Math.min(to, fromTime) <= Math.max(position, end)) {
-                let progress = (0, utils_1.clamp)((to - range.position) / range.duration, 0, 1);
+                let progress = clamp((to - range.position) / range.duration, 0, 1);
                 range.handlers.slice().forEach(h => h(progress));
             }
         });
@@ -385,7 +322,7 @@ class Timeline {
     }
     createChainingInterface(position) {
         return {
-            thenTween: (duration, apply, from = 0, to = 1, easer) => {
+            thenTween: (duration, apply, from, to, easer) => {
                 return this.tween(position, duration, apply, from, to, easer);
             },
             then: (action) => this.at(position, action),
@@ -403,7 +340,6 @@ class Timeline {
         return this._currentTime;
     }
 }
-exports.Timeline = Timeline;
 const sortEvents = (a, b) => {
     return a.position - b.position;
 };

package/internal/tween.d.ts

@@ -4,5 +4,8 @@ export type Tweenable = number | number[] | string | Blendable;
 export interface Blendable {
     blend(target: this, progress: number): this;
 }
+export interface BlendableWith<T, R> {
+    blend(target: R, progress: number): T;
+}
 /** @internal */
 export declare function tweenValue<T extends Tweenable>(from: T, to: T, progress: number): T;

package/internal/tween.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tweenValue = tweenValue;
-const utils_1 = require("./utils");
+import { clamp } from "./utils";
 /** @internal */
-function tweenValue(from, to, progress) {
+export function tweenValue(from, to, progress) {
     if (Array.isArray(from)) {
         const toArr = to;
         if (from.length != toArr.length)
@@ -89,7 +86,7 @@ function parseColour(code) {
 function blendColours(from, to, bias) {
     const fromColour = parseColour(from);
     const toColour = parseColour(to);
-    const blended = fromColour.map((val, i) => (0, utils_1.clamp)(blendNumbers(val, toColour[i], bias), 0, 255));
+    const blended = fromColour.map((val, i) => clamp(blendNumbers(val, toColour[i], bias), 0, 255));
     return ("#" + blended.map(n => Math.round(n).toString(16).padStart(2, "0")).join("")).replace(/ff$/, "");
 }
 const tweenableTokenRegex = /(#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)/g;

package/internal/utils.d.ts

@@ -2,5 +2,3 @@
 export declare const clamp: (value: number, min: number, max: number) => number;
 /** @internal */
 export type Widen<T> = T extends number ? number : T extends string ? string : T;
-export type OptionalIfKeyIn<T, U> = Omit<T, keyof U> & Partial<Pick<T, Extract<keyof T, keyof U>>>;
-export declare function prototypify<Prototype extends object, Members extends object>(proto: Prototype, members: Members): Prototype & Members;

package/internal/utils.js

@@ -1,14 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clamp = void 0;
-exports.prototypify = prototypify;
 /** @internal */
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-exports.clamp = clamp;
-function prototypify(proto, members) {
-    const propertyDescriptor = Object.fromEntries(Object.entries(members).map(([key, value]) => [
-        key,
-        { value }
-    ]));
-    return Object.create(proto, propertyDescriptor);
-}
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

package/package.json

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