@zcomponent/core 0.0.19 → 0.0.21

package/lib/animation/animation.d.ts

@@ -0,0 +1,46 @@
+import { Layer } from './layer';
+import { Observable } from '../observable';
+import { Event } from '../event';
+import { LayerClip } from './layerclip';
+import { AnimationState } from './animationstate';
+/** @internal */
+export declare enum AnimationEvents {
+    onLayerClipActive = "onLayerClipActive",
+    onLayerClipState = "onLayerClipState"
+}
+export declare class Animation {
+    onTick: Event<[]>;
+    onLayerClipActive: Event<[layerClip: LayerClip]>;
+    onLayerClipState: Event<[layerClip: LayerClip]>;
+    hasLayers: Observable<boolean, never>;
+    layers: Layer[];
+    private _spotlightLayer?;
+    timeSource: (() => number) | undefined;
+    private _entityPaths;
+    private _defaultValues;
+    /** @internal */
+    _pendingEvents: {
+        evt: AnimationEvents;
+        args: any[];
+    }[];
+    constructor();
+    serializeState(): AnimationState;
+    restoreState(state: AnimationState): void;
+    dispose(): void;
+    addLayer(l: Layer): void;
+    insertLayer(l: Layer, indx: number): void;
+    removeLayer(l: Layer): void;
+    tick(): void;
+    registerEntityPath(path: string, entity: any, pathParts: (string | number)[]): void;
+    evaluateTouchedPaths(paths: string[], t?: number): void;
+    get spotlightLayer(): Layer | undefined;
+    set spotlightLayer(l: Layer | undefined);
+    clearCachedDefault(entityID: string, prop: string): void;
+    private _emitPendingEvents;
+    private _resolvePath;
+    private _evaluatePath;
+}
+export interface EntityPath {
+    entity: any;
+    pathParts: (string | number)[];
+}

package/lib/animation/animation.js

@@ -0,0 +1,159 @@
+import { Observable } from '../observable';
+import { clone } from '../data';
+import { Event } from '../event';
+/** @internal */
+export var AnimationEvents;
+(function (AnimationEvents) {
+    AnimationEvents["onLayerClipActive"] = "onLayerClipActive";
+    AnimationEvents["onLayerClipState"] = "onLayerClipState";
+})(AnimationEvents || (AnimationEvents = {}));
+export class Animation {
+    constructor() {
+        this.onTick = new Event();
+        this.onLayerClipActive = new Event();
+        this.onLayerClipState = new Event();
+        this.hasLayers = new Observable(false);
+        this.layers = [];
+        this._entityPaths = new Map();
+        this._defaultValues = new Map();
+        /** @internal */
+        this._pendingEvents = [];
+    }
+    serializeState() {
+        const state = {
+            byLayer: {},
+            byLayerClip: {},
+        };
+        for (const layer of this.layers) {
+            layer._serialize(state);
+        }
+        this._spotlightLayer?._serialize(state);
+        return state;
+    }
+    restoreState(state) {
+        for (const layer of this.layers) {
+            layer._restore(state);
+        }
+        this._spotlightLayer?._restore(state);
+    }
+    dispose() {
+        this.onTick.clearListeners();
+        this.onLayerClipActive.clearListeners();
+        this.onLayerClipState.clearListeners();
+    }
+    addLayer(l) {
+        this.layers.push(l);
+        if (!this.hasLayers.value)
+            this.hasLayers.value = true;
+    }
+    insertLayer(l, indx) {
+        this.layers.splice(indx, 0, l);
+        if (!this.hasLayers.value)
+            this.hasLayers.value = true;
+    }
+    removeLayer(l) {
+        const indx = this.layers.indexOf(l);
+        if (indx >= 0)
+            this.layers.splice(indx, 1);
+        const hasLayers = this.layers.length > 0 || this._spotlightLayer !== undefined;
+        if (this.hasLayers.value !== hasLayers)
+            this.hasLayers.value = hasLayers;
+    }
+    tick() {
+        const t = this.timeSource?.() ?? performance.now();
+        const touchedPaths = [];
+        if (this._spotlightLayer) {
+            this._spotlightLayer.tick(t, touchedPaths);
+        }
+        else {
+            for (const layer of this.layers) {
+                layer.tick(t, touchedPaths);
+            }
+        }
+        this.evaluateTouchedPaths(touchedPaths, t);
+        this.onTick.emit();
+    }
+    registerEntityPath(path, entity, pathParts) {
+        this._entityPaths.set(path, { entity, pathParts });
+    }
+    evaluateTouchedPaths(paths, t) {
+        t = t ?? this.timeSource?.() ?? performance.now();
+        const unique = new Set([...paths]);
+        for (const entry of unique.values()) {
+            this._evaluatePath(t, entry);
+        }
+        this._emitPendingEvents();
+    }
+    get spotlightLayer() {
+        return this._spotlightLayer;
+    }
+    set spotlightLayer(l) {
+        if (l === this._spotlightLayer)
+            return;
+        const touchedPaths = [];
+        if (this._spotlightLayer)
+            touchedPaths.push(...this._spotlightLayer.influencedPaths.values());
+        this._spotlightLayer = l;
+        for (const layer of this.layers) {
+            touchedPaths.push(...layer.influencedPaths.values());
+            if (l)
+                layer.pause();
+        }
+        this.evaluateTouchedPaths(touchedPaths);
+        const hasLayers = this.layers.length > 0 || this._spotlightLayer !== undefined;
+        if (this.hasLayers.value !== hasLayers)
+            this.hasLayers.value = hasLayers;
+    }
+    clearCachedDefault(entityID, prop) {
+        const prefix = entityID + '.' + prop;
+        for (const entityPath of this._defaultValues.keys()) {
+            if (entityPath.indexOf(prefix) === 0)
+                this._defaultValues.delete(entityPath);
+        }
+    }
+    _emitPendingEvents() {
+        while (this._pendingEvents.length > 0) {
+            const entry = this._pendingEvents.shift();
+            if (!entry)
+                continue;
+            this[entry.evt].emit(...entry.args);
+        }
+    }
+    _resolvePath(p) {
+        const path = this._entityPaths.get(p);
+        if (!path || path.pathParts.length === 0)
+            return;
+        let parent = path.entity;
+        let currentKey = path.pathParts[0];
+        if (parent[currentKey] instanceof Observable) {
+            parent = parent[currentKey];
+            currentKey = 'value';
+        }
+        for (let i = 1; i < path.pathParts.length; i++) {
+            parent = parent[currentKey];
+            currentKey = path.pathParts[i];
+        }
+        return [parent, currentKey];
+    }
+    _evaluatePath(t, p) {
+        const resolved = this._resolvePath(p);
+        if (!resolved)
+            return;
+        if (!this._defaultValues.has(p)) {
+            this._defaultValues.set(p, clone(resolved[0][resolved[1]]));
+        }
+        let val = this._defaultValues.get(p);
+        if (this._spotlightLayer) {
+            if (this._spotlightLayer.influencedPaths.has(p))
+                val = this._spotlightLayer.computePathProperty(t, p, val);
+        }
+        else {
+            for (const layer of this.layers) {
+                if (!layer.influencedPaths.has(p))
+                    continue;
+                val = layer.computePathProperty(t, p, val);
+            }
+        }
+        resolved[0][resolved[1]] = val;
+    }
+}

package/lib/animation/animationstate.d.ts

@@ -0,0 +1,27 @@
+import { QueueEntry } from "./layer";
+import { StreamState } from "./stream";
+export interface AnimationState {
+    byLayer: {
+        [id: string]: LayerState;
+    };
+    byLayerClip: {
+        [id: string]: LayerClipState;
+    };
+    spotlightLayer?: string;
+}
+export interface LayerState {
+    queue: LayerQueueEntryState[];
+    active?: number | null;
+}
+export type LayerQueueEntryState = Omit<QueueEntry, 'layerClip'> & {
+    layerClip: string | null | undefined;
+};
+export interface LayerClipState {
+    t0: number;
+    t1: number | null;
+    pauseTime?: number;
+    rate: number;
+    loop: boolean;
+    stopped: boolean;
+    state: StreamState;
+}

package/lib/animation/animationstate.js

@@ -0,0 +1 @@
+export {};

package/lib/animation/bezier.d.ts

@@ -0,0 +1,9 @@
+import { Bezier as BezierData, predefinedCurve } from "../animation";
+export type Easing = keyof typeof predefinedCurve | null | Bezier;
+export declare class Bezier {
+    private _curves;
+    private _curveEvaluator;
+    constructor(_curves: BezierData[]);
+    evaluate(t: number, epsilon?: number): number;
+}
+export declare function computeEasing(t: number, easing?: Easing): number;

package/lib/animation/bezier.js

@@ -0,0 +1,93 @@
+import { predefinedCurve } from "../animation";
+function BezierFactory(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
+    function sampleCurveX(t) {
+        return (Math.pow(1 - t, 3) * p0x +
+            3 * Math.pow(1 - t, 2) * t * p1x +
+            3 * (1 - t) * t * t * p2x +
+            t * t * t * p3x);
+    }
+    function sampleCurveY(t) {
+        return (Math.pow(1 - t, 3) * p0y +
+            3 * Math.pow(1 - t, 2) * t * p1y +
+            3 * (1 - t) * t * t * p2y +
+            t * t * t * p3y);
+    }
+    function sampleCurveDerivativeX(t) {
+        return (3 * Math.pow(1 - t, 2) * (p1x - p0x) +
+            6 * (1 - t) * t * (p2x - p1x) +
+            3 * t * t * (p3x - p2x));
+    }
+    function solveCurveX(x, epsilon) {
+        let t2 = x;
+        let x2 = 0;
+        let d2 = 0;
+        let i = 0;
+        // First try a few iterations of Newton's method -- normally very fast.
+        for (t2 = x, i = 0; i < 8; i++) {
+            x2 = sampleCurveX(t2) - x;
+            if (Math.abs(x2) < epsilon)
+                return t2;
+            d2 = sampleCurveDerivativeX(t2);
+            if (Math.abs(d2) < 1e-6)
+                break;
+            t2 = t2 - x2 / d2;
+        }
+        // Fall back to the bisection method for reliability.
+        let t0 = 0.0;
+        let t1 = 1.0;
+        t2 = x;
+        if (t2 < t0)
+            return t0;
+        if (t2 > t1)
+            return t1;
+        while (t0 < t1) {
+            x2 = sampleCurveX(t2);
+            if (Math.abs(x2 - x) < epsilon)
+                return t2;
+            if (x > x2)
+                t0 = t2;
+            else
+                t1 = t2;
+            t2 = (t1 - t0) * 0.5 + t0;
+        }
+        // Failure.
+        return t2;
+    }
+    return (x, epsilon) => {
+        return sampleCurveY(solveCurveX(x, epsilon));
+    };
+}
+export class Bezier {
+    constructor(_curves) {
+        this._curves = _curves;
+        this._curveEvaluator = [];
+        for (const curve of _curves) {
+            this._curveEvaluator.push(BezierFactory(curve[0][0], curve[0][1], curve[1][0], curve[1][1], curve[2][0], curve[2][1], curve[3][0], curve[3][1]));
+        }
+    }
+    evaluate(t, epsilon = 1e-6) {
+        for (let i = 0; i < this._curves.length; i++) {
+            if (t < this._curves[i][3][0])
+                return this._curveEvaluator[i](t, epsilon);
+        }
+        return this._curveEvaluator[this._curveEvaluator.length - 1](t, epsilon);
+    }
+}
+const bezierCache = new Map();
+export function computeEasing(t, easing) {
+    if (easing === null || easing === undefined)
+        return 0;
+    if (easing === 'linear')
+        return t;
+    if (easing instanceof Bezier)
+        return easing.evaluate(t);
+    if (predefinedCurve[easing]) {
+        let bezier = bezierCache.get(easing);
+        if (!bezier) {
+            bezier = new Bezier(predefinedCurve[easing]);
+            bezierCache.set(easing, bezier);
+        }
+        return bezier.evaluate(t);
+    }
+    return t;
+}

package/lib/animation/clips/clip.d.ts

@@ -0,0 +1,30 @@
+import * as Data from '../../animation';
+import { Observable } from '../../observable';
+import { Animation } from '../animation';
+import { Track } from '../tracks/track';
+export declare class Clip {
+    animation: Animation;
+    length: number;
+    id?: string;
+    influencedPathsDirty: Observable<boolean, never>;
+    defaultFadeParameters?: Data.FadeParameters;
+    private _influencedPaths;
+    private _tracksByPath;
+    private _tracksByPathDirty;
+    private _tracks;
+    constructor(animation: Animation, length: number);
+    computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+    addTrack(t: Track): void;
+    clearTracks(): void;
+    private _dirty;
+    get tracksByPath(): Map<string, Track[]>;
+    get influencedPaths(): string[];
+    fadePropertiesByPath(props: {
+        [id: string]: Data.FadeParameters;
+    }): void;
+    resolveClipTime(t: number, t0: number, s0: number, rate: number, t1?: number): number;
+    streamPlay(speed?: number): void;
+    streamPause(): void;
+    streamStop(): void;
+    streamSeek(t: number): void;
+}

package/lib/animation/clips/clip.js

@@ -0,0 +1,114 @@
+import { Observable } from '../../observable';
+import { ClipTrack } from '../tracks/cliptrack';
+import { PropertyTrack } from '../tracks/propertytrack';
+export class Clip {
+    constructor(animation, length) {
+        this.animation = animation;
+        this.length = length;
+        this.influencedPathsDirty = new Observable(false);
+        this._influencedPaths = [];
+        this._tracksByPath = new Map();
+        this._tracksByPathDirty = false;
+        this._tracks = [];
+        this._dirty = (v) => {
+            if (v) {
+                this.influencedPathsDirty.value = true;
+                this._tracksByPathDirty = true;
+            }
+        };
+    }
+    computePathProperty(t, p, valueBefore, parentWeight) {
+        const tracks = this.tracksByPath.get(p);
+        if (!tracks)
+            return valueBefore;
+        for (const track of tracks) {
+            valueBefore = track.computePathProperty(t, p, valueBefore, parentWeight);
+        }
+        return valueBefore;
+    }
+    addTrack(t) {
+        this._tracks.push(t);
+        t.influencedPathsDirty.addListener(this._dirty);
+        this.influencedPathsDirty.value = true;
+        this._tracksByPathDirty = true;
+    }
+    clearTracks() {
+        const existingPaths = this._influencedPaths;
+        for (const track of this._tracks) {
+            track.influencedPathsDirty.removeListener(this._dirty);
+        }
+        this._tracks = [];
+        this.influencedPathsDirty.value = true;
+        this._tracksByPathDirty = true;
+        this.animation.evaluateTouchedPaths(existingPaths);
+    }
+    get tracksByPath() {
+        if (!this._tracksByPathDirty)
+            return this._tracksByPath;
+        const ret = new Map();
+        for (const track of this._tracks) {
+            for (const p of track.influencedPaths) {
+                const arr = ret.get(p) ?? [];
+                ret.set(p, arr);
+                arr.push(track);
+            }
+        }
+        this._tracksByPath = ret;
+        this._tracksByPathDirty = false;
+        return this._tracksByPath;
+    }
+    get influencedPaths() {
+        if (!this.influencedPathsDirty.value)
+            return this._influencedPaths;
+        const paths = new Set();
+        for (const track of this._tracks) {
+            track.influencedPaths.forEach(path => paths.add(path));
+        }
+        this._influencedPaths = [...paths.values()];
+        this.influencedPathsDirty.value = false;
+        return this._influencedPaths;
+    }
+    fadePropertiesByPath(props) {
+        if (this.defaultFadeParameters) {
+            // Replace any existing fade properties with our defaults
+            for (const id in props) {
+                props[id] = { ...this.defaultFadeParameters };
+            }
+        }
+        for (const track of this._tracks) {
+            if (track instanceof PropertyTrack) {
+                if (track.fadeParameters || this.defaultFadeParameters) {
+                    const params = {
+                        time: 0,
+                        easing: null,
+                        pin: 0,
+                        ...this.defaultFadeParameters,
+                        ...track.fadeParameters,
+                    };
+                    props[track.path] = params;
+                }
+            }
+            else if (track instanceof ClipTrack) {
+                track.clip.fadePropertiesByPath(props);
+            }
+        }
+    }
+    resolveClipTime(t, t0, s0, rate, t1 = Infinity) {
+        if (this.length === 0)
+            return 0;
+        t = Math.min(t, t1);
+        const ct = s0 + (t - t0) * rate;
+        let bounded = ct % this.length;
+        if (bounded < 0)
+            bounded += this.length;
+        if (bounded === 0 && rate >= +0 && t === t1)
+            bounded += this.length;
+        if (bounded === 0 && rate < 0 && t === t0)
+            bounded += this.length;
+        return bounded;
+    }
+    streamPlay(speed) { }
+    streamPause() { }
+    streamStop() { }
+    streamSeek(t) { }
+}

package/lib/animation/index.d.ts

@@ -0,0 +1,7 @@
+export * from './animation';
+export * from './layerclip';
+export * from './layer';
+export * from './tracks/track';
+export * from './tracks/cliptrack';
+export * from './tracks/propertytrack';
+export * from './clips/clip';

package/lib/animation/index.js

@@ -0,0 +1,7 @@
+export * from './animation';
+export * from './layerclip';
+export * from './layer';
+export * from './tracks/track';
+export * from './tracks/cliptrack';
+export * from './tracks/propertytrack';
+export * from './clips/clip';

package/lib/animation/interpolate.d.ts

@@ -0,0 +1,2 @@
+export declare function interpolate(a: any, b: any, prop: number): any;
+export declare function addBlend(a: any, b: any, prop: number): any;

package/lib/animation/interpolate.js

@@ -0,0 +1,44 @@
+export function interpolate(a, b, prop) {
+    if (typeof a === 'number' && typeof b === 'number')
+        return interpNumber(a, b, prop);
+    if (Array.isArray(a) && Array.isArray(b))
+        return interpArray(a, b, prop);
+    return interpStep(a, b, prop);
+}
+function interpNumber(a, b, prop) {
+    return (1 - prop) * a + prop * b;
+}
+function interpStep(a, b, prop) {
+    return prop > 0 ? b : a;
+}
+function interpArray(a, b, prop) {
+    if (a.length !== b.length)
+        return interpStep(a, b, prop);
+    const ret = [];
+    for (let i = 0; i < a.length; i++) {
+        ret.push(interpolate(a[i], b[i], prop));
+    }
+    return ret;
+}
+export function addBlend(a, b, prop) {
+    if (typeof a === 'number' && typeof b === 'number')
+        return addBlendNumber(a, b, prop);
+    if (Array.isArray(a) && Array.isArray(b))
+        return addBlendArray(a, b, prop);
+    return addBlendStep(a, b, prop);
+}
+function addBlendNumber(a, b, prop) {
+    return a + prop * b;
+}
+function addBlendStep(a, b, prop) {
+    return prop >= 0.5 ? b : a;
+}
+function addBlendArray(a, b, prop) {
+    if (a.length !== b.length)
+        return interpStep(a, b, prop);
+    const ret = [];
+    for (let i = 0; i < a.length; i++) {
+        ret.push(addBlend(a[i], b[i], prop));
+    }
+    return ret;
+}

package/lib/animation/layer.d.ts

@@ -0,0 +1,42 @@
+import * as Data from '../animation';
+import { Observable } from '../observable';
+import { Animation } from './animation';
+import { AnimationState } from './animationstate';
+import { LayerClip, LayerClipPlayOptions } from './layerclip';
+export declare class Layer {
+    readonly animation: Animation;
+    id?: string;
+    influencedPathsDirty: Observable<boolean, never>;
+    private _influencedPaths;
+    private _active;
+    private _queue;
+    private _layerClips;
+    constructor(animation: Animation);
+    computePathProperty(t: number, p: string, valueBefore: any): any;
+    tick(t: number, touchedPaths: string[]): void;
+    pause(): void;
+    /** @internal */
+    _registerLayerClip(layerClip: LayerClip): void;
+    queue(layerClip: LayerClip | null, playOptions?: LayerClipPlayOptions): QueueEntry;
+    get active(): LayerClip | null | undefined;
+    set active(layerClip: LayerClip | null | undefined);
+    /** @internal */
+    _activateLayerClip(layerClip: LayerClip | null | undefined, playOptions?: LayerClipPlayOptions): void;
+    /** @internal */
+    _evaulate(): void;
+    /** @internal */
+    _serialize(state: AnimationState): void;
+    /** @internal */
+    _restore(state: AnimationState): void;
+    get influencedPaths(): Set<string>;
+}
+/** @internal */
+export interface QueueEntry {
+    layerClip: LayerClip | null;
+    playOptions?: LayerClipPlayOptions;
+    fadeByPath: {
+        [id: string]: Data.FadeParameters;
+    };
+    fadeTime: number;
+    startTime?: number;
+}