@zcomponent/core 0.0.19 → 0.0.21

package/lib/animation/layer.js

@@ -0,0 +1,211 @@
+import { Observable } from '../observable';
+import { AnimationEvents } from './animation';
+import { computeEasing } from './bezier';
+import { interpolate } from './interpolate';
+import { StreamState } from './stream';
+export class Layer {
+    constructor(animation) {
+        this.animation = animation;
+        this.influencedPathsDirty = new Observable(false);
+        this._influencedPaths = new Set();
+        this._active = null;
+        this._queue = [];
+        this._layerClips = [];
+    }
+    computePathProperty(t, p, valueBefore) {
+        let fadeValue = valueBefore;
+        for (let i = 0; i < this._queue.length; i++) {
+            const entry = this._queue[i];
+            const clipValue = entry.layerClip?.computePathProperty(p, valueBefore) ?? valueBefore;
+            if (entry.startTime && entry.fadeTime > 0 && entry.playOptions?.fade !== null) {
+                const ct = t - entry.startTime;
+                if (ct >= entry.fadeTime)
+                    fadeValue = clipValue;
+                else
+                    fadeValue = computeFade(entry.fadeByPath[p], entry.playOptions?.fade, ct, entry.fadeTime, fadeValue, clipValue);
+            }
+            else {
+                fadeValue = clipValue;
+            }
+            if (entry === this._active)
+                break;
+        }
+        return fadeValue;
+    }
+    tick(t, touchedPaths) {
+        for (let i = this._queue.length - 1; i >= 0; i--) {
+            const entry = this._queue[i];
+            const next = this._queue[i + 1];
+            entry.layerClip?.tick(touchedPaths, this._queue.length > 1);
+            if (next && next.startTime && next.startTime && entry !== this._active && t - next.startTime > next.fadeTime) {
+                entry.layerClip?.pause();
+                this._queue.splice(i, 1);
+            }
+            if (entry.layerClip && entry === this._active) {
+                if (next && (entry.layerClip.state === StreamState.Ended || next.fadeTime >= entry.layerClip.getRemainingTimeEstimate())) {
+                    next.startTime = t;
+                    this._active = next;
+                    this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipActive, args: [this._active.layerClip] });
+                    next.layerClip?.play();
+                }
+            }
+        }
+    }
+    pause() {
+        if (!this._active)
+            return;
+        this._active.layerClip?.pause();
+    }
+    /** @internal */
+    _registerLayerClip(layerClip) {
+        this._layerClips.push(layerClip);
+        layerClip.clip.influencedPathsDirty.addListener(v => {
+            if (v)
+                this.influencedPathsDirty.value = true;
+        });
+        this.influencedPathsDirty.value = true;
+    }
+    queue(layerClip, playOptions) {
+        const previous = this._queue[this._queue.length - 1];
+        const fadeByPath = {};
+        previous?.layerClip?.clip?.fadePropertiesByPath(fadeByPath);
+        for (const [path, params] of Object.entries(fadeByPath)) {
+            fadeByPath[path] = {
+                ...params,
+                reverse: !(params.reverse ?? false),
+            };
+        }
+        layerClip?.clip?.fadePropertiesByPath(fadeByPath);
+        let fadeTime = playOptions?.fade?.time ?? 0;
+        for (const params of Object.values(fadeByPath)) {
+            fadeTime = Math.max(fadeTime, params.time);
+        }
+        const ret = {
+            layerClip,
+            fadeTime,
+            playOptions,
+            fadeByPath,
+        };
+        this._queue.push(ret);
+        return ret;
+    }
+    get active() {
+        return this._active?.layerClip;
+    }
+    set active(layerClip) {
+        this._activateLayerClip(layerClip);
+        this._evaulate();
+    }
+    /** @internal */
+    _activateLayerClip(layerClip, playOptions) {
+        if (layerClip === undefined) {
+            this._queue = [];
+            this._active = undefined;
+            this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipActive, args: [undefined] });
+            return;
+        }
+        if (this._active && this._active.layerClip === layerClip)
+            return;
+        for (let i = 0; i < this._queue.length; i++) {
+            const entry = this._queue[i];
+            if (entry === this._active) {
+                this._queue.splice(i + 1);
+                break;
+            }
+        }
+        const entry = this.queue(layerClip, {
+            ...playOptions,
+            fade: playOptions?.fade !== undefined ? playOptions.fade : this._active === undefined || layerClip === undefined ? { time: 0, easing: null } : undefined,
+        });
+        this._active = entry;
+        this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipActive, args: [this._active.layerClip] });
+        this._queue[this._queue.length - 1].startTime = this.animation.timeSource?.() ?? performance.now();
+    }
+    /** @internal */
+    _evaulate() {
+        this.animation.evaluateTouchedPaths([...this.influencedPaths.values()]);
+    }
+    /** @internal */
+    _serialize(state) {
+        for (const layerClip of this._layerClips) {
+            layerClip._serialize(state);
+        }
+        if (this.id === undefined)
+            return;
+        const entry = {
+            queue: [],
+        };
+        for (const queueEntry of this._queue) {
+            if (queueEntry.layerClip && queueEntry.layerClip.id === undefined)
+                continue;
+            entry.queue.push({
+                ...queueEntry,
+                layerClip: queueEntry.layerClip === null ? null : queueEntry.layerClip?.id,
+            });
+        }
+        entry.active = this._active === null ? null : this._active === undefined ? undefined : this._queue.indexOf(this._active);
+        state.byLayer[this.id] = entry;
+    }
+    /** @internal */
+    _restore(state) {
+        for (const layerClip of this._layerClips) {
+            layerClip._restore(state);
+        }
+        if (this.id === undefined)
+            return;
+        const entry = state.byLayer[this.id];
+        if (!entry)
+            return;
+        this._queue = [];
+        for (const qe of entry.queue) {
+            let layerClip;
+            if (typeof qe.layerClip === 'string') {
+                layerClip = this._layerClips.find(lc => lc.id === qe.layerClip);
+            }
+            else if (qe.layerClip === null)
+                layerClip = null;
+            if (layerClip !== undefined) {
+                this._queue.push({
+                    ...qe,
+                    layerClip,
+                });
+            }
+        }
+        if (typeof entry.active === 'number') {
+            this._active = this._queue[entry.active];
+        }
+        else
+            this._active = entry.active;
+    }
+    get influencedPaths() {
+        if (!this.influencedPathsDirty.value)
+            return this._influencedPaths;
+        this._influencedPaths = new Set();
+        for (const layerClip of this._layerClips) {
+            layerClip.clip.influencedPaths.forEach(path => this._influencedPaths.add(path));
+        }
+        this.influencedPathsDirty.value = false;
+        return this._influencedPaths;
+    }
+}
+function computeFade(params, override, t, fadeTime, before, after) {
+    // TODO further implementation
+    const paramTime = override?.time ?? params?.time ?? 0;
+    let paramPin = override?.pin ?? params?.pin ?? 0;
+    const reverse = override?.reverse ?? params?.reverse ?? false;
+    if (reverse)
+        paramPin = 1 - paramPin;
+    const emptyTime = fadeTime - paramTime;
+    const startTime = paramPin * emptyTime;
+    if (t < startTime)
+        return before;
+    if (t >= startTime + paramTime)
+        return after;
+    let prop = (t - startTime) / paramTime;
+    if (reverse)
+        prop = 1 - prop;
+    prop = computeEasing(prop, override?.easing ?? params?.easing);
+    if (reverse)
+        prop = 1 - prop;
+    return interpolate(before, after, prop);
+}

package/lib/animation/layerclip.d.ts

@@ -0,0 +1,46 @@
+import { FadeParameters } from '../animation';
+import { Animation } from './animation';
+import { AnimationState } from './animationstate';
+import { Clip } from './clips/clip';
+import { Layer } from './layer';
+import { PlayOptions, Stream, StreamState } from './stream';
+export declare class LayerClip implements Stream {
+    readonly layer: Layer;
+    readonly clip: Clip;
+    id?: string;
+    defaultLoop: boolean;
+    defaultPlaySpeed: number;
+    timeSource: (() => number) | undefined;
+    readonly animation: Animation;
+    private _t0;
+    private _pauseTime;
+    private _t1;
+    private _rate;
+    private _loop;
+    private _lastClipTime;
+    private _stopped;
+    state: StreamState;
+    constructor(layer: Layer, clip: Clip);
+    private _clipDirty;
+    tick(touchedPaths: string[], force?: boolean): void;
+    computePathProperty(p: string, valueBefore: any): any;
+    getRemainingTimeEstimate(): number;
+    private _getTime;
+    queue(opts?: LayerClipPlayOptions): void;
+    play(opts?: LayerClipPlayOptions): void;
+    pause(): void;
+    seek(ct: number, opts?: LayerClipSeekOptions): void;
+    /** @internal */
+    _serialize(state: AnimationState): void;
+    /** @internal */
+    _restore(state: AnimationState): void;
+    get clipTime(): number;
+    stop(): void;
+}
+export interface LayerClipSeekOptions {
+    fade?: FadeParameters | null;
+    dontActivateLayer?: boolean;
+}
+export interface LayerClipPlayOptions extends PlayOptions {
+    fade?: Partial<FadeParameters> | null;
+}

package/lib/animation/layerclip.js

@@ -0,0 +1,168 @@
+import { AnimationEvents } from './animation';
+import { StreamState } from './stream';
+export class LayerClip {
+    constructor(layer, clip) {
+        this.layer = layer;
+        this.clip = clip;
+        this.defaultLoop = false;
+        this.defaultPlaySpeed = 1;
+        this._t0 = 0;
+        this._pauseTime = 0;
+        // private _s0: number = 0;
+        this._rate = 1;
+        this._loop = false;
+        this._stopped = false;
+        this.state = StreamState.Paused;
+        this._clipDirty = (v) => {
+            if (v)
+                this._lastClipTime = undefined;
+        };
+        this.animation = layer.animation;
+        this._t1 = clip.length;
+        layer._registerLayerClip(this);
+        this.clip.influencedPathsDirty.addListener(this._clipDirty);
+    }
+    tick(touchedPaths, force) {
+        const t = this._getTime();
+        const t0 = this._t0 + (t - (this._pauseTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        const ct = this.clip.resolveClipTime(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, t1);
+        if (ct !== this._lastClipTime || force) {
+            touchedPaths.push(...this.clip.influencedPaths);
+        }
+        if (this.state === StreamState.Playing && t >= this._t1) {
+            this.pause();
+            this.state = StreamState.Ended;
+        }
+    }
+    computePathProperty(p, valueBefore) {
+        const t = this._getTime();
+        const t0 = this._t0 + (t - (this._pauseTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        const ct = this.clip.resolveClipTime(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, t1);
+        this._lastClipTime = ct;
+        return this.clip.computePathProperty(ct ?? 0, p, valueBefore);
+    }
+    getRemainingTimeEstimate() {
+        const t = this._getTime();
+        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        return t1 - t;
+    }
+    _getTime() {
+        return this.timeSource?.() ?? this.animation.timeSource?.() ?? performance.now();
+    }
+    queue(opts) {
+        this.layer.queue(this, opts);
+    }
+    play(opts) {
+        if (opts?.speed === 0) {
+            this.pause();
+            return;
+        }
+        this._stopped = false;
+        this._loop = opts?.loop ?? this.defaultLoop;
+        this._rate = opts?.speed ?? this.defaultPlaySpeed;
+        if (this.state === StreamState.Ended) {
+            this._t0 = this._getTime();
+        }
+        else if (this._pauseTime !== undefined) {
+            this._t0 = this._getTime() - (this._pauseTime - this._t0);
+        }
+        delete this._pauseTime;
+        if (this._loop)
+            this._t1 = Infinity;
+        else {
+            if (this._rate < 0)
+                this._t1 = this._t0 + this.clip.length / -this._rate;
+            else if (this._rate > 0)
+                this._t1 = this._t0 + this.clip.length / this._rate;
+            else
+                this._t1 = Infinity;
+        }
+        this.clip.streamPlay(this._rate);
+        this.state = StreamState.Playing;
+        this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
+        this._lastClipTime = undefined;
+        if (this.layer.active !== this) {
+            this.layer._activateLayerClip(this, opts);
+            this.layer._evaulate();
+        }
+    }
+    pause() {
+        if (this._pauseTime !== undefined || this.state !== StreamState.Playing)
+            return;
+        this.state = StreamState.Paused;
+        this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
+        this._pauseTime = this._getTime();
+        this.clip.streamPause();
+    }
+    seek(ct, opts) {
+        const t = this._getTime();
+        this._stopped = false;
+        if (this._rate >= 0) {
+            this._t0 = t - ct / this._rate;
+            this._t1 = this._t0 + this.clip.length / this._rate;
+        }
+        else {
+            this._t0 = t - (this.clip.length - ct) / -this._rate;
+            this._t1 = this._t0 + this.clip.length / -this._rate;
+        }
+        if (this._pauseTime !== undefined) {
+            this._pauseTime = t;
+        }
+        if (this._loop)
+            this._t1 = Infinity;
+        this._lastClipTime = undefined;
+        if (this.layer.active !== this && !opts?.dontActivateLayer) {
+            this.layer._activateLayerClip(this, { fade: opts?.fade });
+        }
+        this.layer._evaulate();
+    }
+    /** @internal */
+    _serialize(state) {
+        if (this.id === undefined)
+            return;
+        const timeOfSerialization = this._getTime();
+        const t0 = timeOfSerialization - this._t0;
+        const pauseTime = this._pauseTime === undefined ? undefined : timeOfSerialization - this._pauseTime;
+        const t1 = isFinite(this._t1) ? timeOfSerialization - this._t1 : null;
+        const ret = {
+            t0,
+            t1,
+            pauseTime,
+            rate: this._rate,
+            loop: this._loop,
+            stopped: this._stopped,
+            state: this.state,
+        };
+        state.byLayerClip[this.id] = ret;
+    }
+    /** @internal */
+    _restore(state) {
+        if (this.id === undefined)
+            return;
+        const entry = state.byLayerClip[this.id];
+        if (!entry)
+            return;
+        const timeOfDeserialization = this._getTime();
+        this._t0 = timeOfDeserialization - entry.t0;
+        this._t1 = entry.t1 === null ? Infinity : timeOfDeserialization - entry.t1;
+        this._pauseTime = entry.pauseTime === undefined ? undefined : timeOfDeserialization - entry.pauseTime;
+        this._rate = entry.rate;
+        this._loop = entry.loop;
+        this._stopped = entry.stopped;
+        this.state = entry.state;
+    }
+    get clipTime() {
+        return this._lastClipTime !== undefined ? this._lastClipTime : this.defaultPlaySpeed > 0 ? 0 : this.clip.length;
+    }
+    stop() {
+        this._stopped = true;
+        this._pauseTime = this._t0;
+        this._lastClipTime = undefined;
+        this._rate = 1;
+        this.clip.streamStop();
+        this.state = StreamState.Ended;
+        this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
+    }
+}

package/lib/animation/stream.d.ts

@@ -0,0 +1,15 @@
+export declare enum StreamState {
+    'Playing' = "Playing",
+    'Paused' = "Paused",
+    'Ended' = "Ended"
+}
+export interface Stream {
+    play: (opts?: PlayOptions) => void;
+    pause: () => void;
+    seek: (t: number) => void;
+    stop: () => void;
+}
+export interface PlayOptions {
+    speed?: number;
+    loop?: boolean;
+}

package/lib/animation/stream.js

@@ -0,0 +1,6 @@
+export var StreamState;
+(function (StreamState) {
+    StreamState["Playing"] = "Playing";
+    StreamState["Paused"] = "Paused";
+    StreamState["Ended"] = "Ended";
+})(StreamState || (StreamState = {}));

package/lib/animation/tracks/cliptrack.d.ts

@@ -0,0 +1,25 @@
+import { Keyframe, ClipTrackEntity } from '../../animation';
+import { Clip } from '../clips/clip';
+import { Track } from './track';
+export declare class ClipTrack extends Track {
+    readonly clip: Clip;
+    private _weights;
+    private _weightsById;
+    private _weightsDirty;
+    private _entities;
+    private _entitiesById;
+    private _entitiesDirty;
+    constructor(clip: Clip);
+    get influencedPaths(): string[];
+    addWeight(k: Keyframe): void;
+    setWeightsById(weights: {
+        [id: string]: Keyframe;
+    }): void;
+    get sortedWeights(): Keyframe[];
+    addBlock(k: ClipTrackEntity): void;
+    setBlocksById(weights: {
+        [id: string]: ClipTrackEntity;
+    }): void;
+    get sortedBlocks(): ClipTrackEntity[];
+    computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+}

package/lib/animation/tracks/cliptrack.js

@@ -0,0 +1,68 @@
+import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
+export class ClipTrack extends Track {
+    constructor(clip) {
+        super();
+        this.clip = clip;
+        this._weights = [];
+        this._weightsById = {};
+        this._weightsDirty = false;
+        this._entities = [];
+        this._entitiesById = {};
+        this._entitiesDirty = false;
+        this.clip.influencedPathsDirty.addListener(v => {
+            if (v)
+                this.influencedPathsDirty.value = true;
+        });
+    }
+    get influencedPaths() {
+        return this.clip.influencedPaths;
+    }
+    addWeight(k) {
+        this._weightsById[k.id] = k;
+        this._weightsDirty = true;
+    }
+    setWeightsById(weights) {
+        this._weightsById = weights;
+        this._weightsDirty = true;
+    }
+    get sortedWeights() {
+        if (!this._weightsDirty)
+            return this._weights;
+        this._weights = Object.values(this._weightsById);
+        this._weights.sort((a, b) => a.t - b.t);
+        this._weightsDirty = false;
+        return this._weights;
+    }
+    addBlock(k) {
+        this._entitiesById[k.id] = k;
+        this._entitiesDirty = true;
+    }
+    setBlocksById(weights) {
+        this._entitiesById = weights;
+        this._entitiesDirty = true;
+    }
+    get sortedBlocks() {
+        if (!this._entitiesDirty)
+            return this._entities;
+        this._entities = Object.values(this._entitiesById);
+        this._entities.sort((a, b) => a.t0 - b.t0);
+        this._entitiesDirty = false;
+        return this._entities;
+    }
+    computePathProperty(t, p, valueBefore, parentWeight) {
+        let weight = 1;
+        const [weightBefore, weightAfter] = resolveKeyframes(this.sortedWeights, t);
+        if (weightBefore)
+            weight = resolveKeyframeValue(t, weightBefore, weightAfter);
+        weight *= parentWeight ?? 1;
+        const blocks = this.sortedBlocks;
+        for (let i = blocks.length - 1; i >= 0; i--) {
+            const block = blocks[i];
+            if (block.t0 > t)
+                continue;
+            const ct = this.clip.resolveClipTime(t, block.t0, block.s0, block.rate, block.t1);
+            return this.clip.computePathProperty(ct, p, valueBefore, weight);
+        }
+        return valueBefore;
+    }
+}

package/lib/animation/tracks/propertytrack.d.ts

@@ -0,0 +1,32 @@
+import { FadeParameters, Keyframe, BlendType } from '../../animation';
+import { Animation } from '../animation';
+import { Track } from './track';
+export declare class PropertyTrack extends Track {
+    private _entityID;
+    private _entity;
+    path: string;
+    private _property;
+    private _keyframes;
+    private _keyframesById;
+    private _keyframesDirty;
+    private _weights;
+    private _weightsById;
+    private _weightsDirty;
+    fadeParameters?: Partial<FadeParameters>;
+    blend: BlendType;
+    influencedPaths: string[];
+    constructor(anim: Animation, _entityID: string, _entity: any, property: string | number | (string | number)[]);
+    addKeyframe(k: Keyframe): void;
+    getKeyframeById(id: string): Keyframe | undefined;
+    setKeyframesById(keyframes: {
+        [id: string]: Keyframe;
+    }): void;
+    get sortedKeyframes(): Keyframe[];
+    addWeight(k: Keyframe): void;
+    setWeightsById(weights: {
+        [id: string]: Keyframe;
+    }): void;
+    get sortedWeights(): Keyframe[];
+    getFadeLengthForPath(path: string): number;
+    computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+}

package/lib/animation/tracks/propertytrack.js

@@ -0,0 +1,79 @@
+import { addBlend, interpolate } from '../interpolate';
+import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
+export class PropertyTrack extends Track {
+    constructor(anim, _entityID, _entity, property) {
+        super();
+        this._entityID = _entityID;
+        this._entity = _entity;
+        this._keyframes = [];
+        this._keyframesById = {};
+        this._keyframesDirty = false;
+        this._weights = [];
+        this._weightsById = {};
+        this._weightsDirty = false;
+        this.blend = 'overlay';
+        if (Array.isArray(property))
+            this._property = property;
+        else
+            this._property = [property];
+        this.path = [this._entityID, ...this._property].join('.');
+        this.influencedPaths = [this.path];
+        anim.registerEntityPath(this.path, this._entity, this._property);
+    }
+    addKeyframe(k) {
+        this._keyframesById[k.id] = k;
+        this._keyframesDirty = true;
+    }
+    getKeyframeById(id) {
+        return this._keyframesById[id];
+    }
+    setKeyframesById(keyframes) {
+        this._keyframesById = keyframes;
+        this._keyframesDirty = true;
+    }
+    get sortedKeyframes() {
+        if (!this._keyframesDirty)
+            return this._keyframes;
+        this._keyframes = Object.values(this._keyframesById);
+        this._keyframes.sort((a, b) => a.t - b.t);
+        this._keyframesDirty = false;
+        return this._keyframes;
+    }
+    addWeight(k) {
+        this._weightsById[k.id] = k;
+        this._weightsDirty = true;
+    }
+    setWeightsById(weights) {
+        this._weightsById = weights;
+        this._weightsDirty = true;
+    }
+    get sortedWeights() {
+        if (!this._weightsDirty)
+            return this._weights;
+        this._weights = Object.values(this._weightsById);
+        this._weights.sort((a, b) => a.t - b.t);
+        this._weightsDirty = false;
+        return this._weights;
+    }
+    getFadeLengthForPath(path) {
+        return this.fadeParameters?.time ?? 0;
+    }
+    computePathProperty(t, p, valueBefore, parentWeight) {
+        const keyframes = this.sortedKeyframes;
+        const [before, after] = resolveKeyframes(keyframes, t);
+        if (!before)
+            return valueBefore; // Automatic weight 0 before first keyframe
+        const val = resolveKeyframeValue(t, before, after);
+        let weight = 1;
+        const [weightBefore, weightAfter] = resolveKeyframes(this.sortedWeights, t);
+        if (weightBefore)
+            weight = resolveKeyframeValue(t, weightBefore, weightAfter);
+        weight *= parentWeight ?? 1;
+        switch (this.blend) {
+            case 'add':
+                return addBlend(valueBefore, val, weight);
+            case 'overlay':
+                return interpolate(valueBefore, val, weight);
+        }
+    }
+}

package/lib/animation/tracks/track.d.ts

@@ -0,0 +1,10 @@
+import { Keyframe } from '../../animation';
+import { Observable } from '../../observable';
+export declare abstract class Track {
+    influencedPathsDirty: Observable<boolean, never>;
+    constructor();
+    abstract get influencedPaths(): string[];
+    abstract computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+}
+export declare function resolveKeyframeValue(t: number, before: Keyframe, after: Keyframe | undefined): any;
+export declare function resolveKeyframes(keyframes: Keyframe[], t: number): [before: Keyframe | undefined, after: Keyframe | undefined];