@zcomponent/core 1.3.0-beta → 1.4.1-beta

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

@@ -1,7 +1,11 @@
 import * as Data from '../../data';
 import { Observable } from '../../observable';
 import { Animation } from '../animation';
+import { LayerClip } from '../layerclip';
 import { StreamState } from '../stream';
+import { ClipTrack } from '../tracks/cliptrack';
+import { FunctionTrack } from '../tracks/functiontrack';
+import { StreamTrack } from '../tracks/streamtrack';
 import { Track } from '../tracks/track';
 export declare class Clip {
     animation: Animation;
@@ -10,11 +14,12 @@ export declare class Clip {
     readonly id?: string | undefined;
     influencedPathsDirty: Observable<boolean, never>;
     defaultFadeParameters?: Partial<Data.FadeParameters>;
+    /** @internal */
+    _streamTracks: (StreamTrack | ClipTrack | FunctionTrack)[];
     private _influencedPaths;
     private _tracksByPath;
     private _tracksByPathDirty;
     private _tracks;
-    private _streamTracks;
     constructor(animation: Animation, length: number, scriptName?: string | undefined, id?: string | undefined);
     computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
     addTrack(t: Track): void;
@@ -26,7 +31,7 @@ export declare class Clip {
         [id: string]: Partial<Data.FadeParameters>;
     }): void;
     resolveClipTime(t: number, t0: number, s0: number, rate: number, t1?: number): number;
-    streamPause(): void;
-    streamSeek(t: number): void;
-    streamTick(state: StreamState, ct: number, rate: number, force?: boolean, parentWeight?: number): void;
+    streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
+    streamSeek(t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined): void;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, parentWeight?: number): void;
 }

package/lib/animation/clips/clip.js

@@ -1,5 +1,6 @@
 import { Observable } from '../../observable';
 import { ClipTrack } from '../tracks/cliptrack';
+import { FunctionTrack } from '../tracks/functiontrack';
 import { PropertyTrack } from '../tracks/propertytrack';
 import { StreamTrack } from '../tracks/streamtrack';
 export class Clip {
@@ -9,11 +10,12 @@ export class Clip {
         this.scriptName = scriptName;
         this.id = id;
         this.influencedPathsDirty = new Observable(false);
+        /** @internal */
+        this._streamTracks = [];
         this._influencedPaths = [];
         this._tracksByPath = new Map();
         this._tracksByPathDirty = false;
         this._tracks = [];
-        this._streamTracks = [];
         this._dirty = (v) => {
             if (v) {
                 this.influencedPathsDirty.value = true;
@@ -37,7 +39,7 @@ export class Clip {
         t.influencedPathsDirty.addListener(this._dirty);
         this.influencedPathsDirty.value = true;
         this._tracksByPathDirty = true;
-        if (t instanceof StreamTrack || t instanceof ClipTrack)
+        if (t instanceof StreamTrack || t instanceof ClipTrack || t instanceof FunctionTrack)
             this._streamTracks.push(t);
     }
     clearTracks() {
@@ -100,6 +102,7 @@ export class Clip {
         }
     }
     resolveClipTime(t, t0, s0, rate, t1 = Infinity) {
+        // return this.resolveClipTimeLoops(t, t0, s0, rate, t1)[0];
         if (this.length === 0)
             return 0;
         t = Math.min(t, t1);
@@ -113,19 +116,19 @@ export class Clip {
             bounded += this.length;
         return bounded;
     }
-    streamPause() {
+    streamPause(isActive, active) {
         for (const track of this._streamTracks) {
-            track.streamPause();
+            track.streamPause(isActive, active);
         }
     }
-    streamSeek(t) {
+    streamSeek(t, rate, isActive, active) {
         for (const track of this._streamTracks) {
-            track.streamSeek(t);
+            track.streamSeek(t, rate, isActive, active);
         }
     }
-    streamTick(state, ct, rate, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
         for (const track of this._streamTracks) {
-            track.streamTick(state, ct, rate, force, parentWeight);
+            track.streamTick(clipState, t, rate, isActive, active, force, parentWeight);
         }
     }
 }

package/lib/animation/layerclip.d.ts

@@ -21,6 +21,7 @@ export declare class LayerClip implements Stream {
     private _loop;
     private _lastTickTime;
     private _lastClipTime;
+    private _lastLoop;
     private _stopped;
     state: StreamState;
     constructor(layer: Layer, clip: Clip, scriptName?: string | undefined, id?: string | undefined);

package/lib/animation/layerclip.js

@@ -1,5 +1,6 @@
 import { AnimationEvents } from './animation';
 import { StreamState } from './stream';
+import { resolveClipTimeLoops } from './tracks/track';
 export class LayerClip {
     constructor(layer, clip, scriptName, id) {
         this.layer = layer;
@@ -40,7 +41,11 @@ export class LayerClip {
             this.pause();
             this.state = StreamState.Ended;
         }
-        this.clip.streamTick(this.state, ct, this._rate);
+        else {
+            const [bt, loop] = resolveClipTimeLoops(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, this.clip.length, this._rate < 0, t1);
+            this.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, 1);
+            this._lastLoop = loop;
+        }
     }
     computePathProperty(p, valueBefore) {
         const t = this._getTime();
@@ -71,7 +76,6 @@ export class LayerClip {
         }
         this._stopped = false;
         this._loop = opts?.loop ?? this.defaultLoop;
-        this._rate = opts?.speed ?? this.defaultPlaySpeed;
         const t = this._getTime();
         if (this.state === StreamState.Ended) {
             this._t0 = t;
@@ -79,7 +83,11 @@ export class LayerClip {
         else if (this._pauseTime !== undefined) {
             this._t0 = t - (this._pauseTime - this._t0);
         }
+        if (Math.sign(this._rate) !== Math.sign(opts?.speed ?? 1)) {
+            this._t0 = 2 * t - this.clip.length - this._t0;
+        }
         delete this._pauseTime;
+        this._rate = opts?.speed ?? this.defaultPlaySpeed;
         if (this._loop)
             this._t1 = Infinity;
         else {
@@ -92,8 +100,6 @@ export class LayerClip {
         }
         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.clip.streamTick(StreamState.Playing, ct, this._rate, true);
         this.state = StreamState.Playing;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
         this._lastClipTime = undefined;
@@ -102,14 +108,18 @@ export class LayerClip {
             this.layer._activateLayerClip(this, opts);
             this.layer._evaulate();
         }
+        const [bt, loop] = resolveClipTimeLoops(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, this.clip.length, this._rate < 0, t1);
+        this.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, 1);
+        this._lastLoop = loop;
     }
     pause() {
+        delete this._lastLoop;
         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();
+        this.clip.streamPause(this.layer.active === this, this.layer.active);
     }
     seek(ct, opts) {
         const t = this._getTime();
@@ -132,7 +142,8 @@ export class LayerClip {
         if (this.layer.active !== this && !opts?.dontActivateLayer) {
             this.layer._activateLayerClip(this, { fade: opts?.fade });
         }
-        this.clip.streamSeek(ct);
+        delete this._lastLoop;
+        this.clip.streamSeek(ct, this._rate, this.layer.active === this, this.layer.active);
         this.layer._evaulate();
     }
     /** @internal */
@@ -178,8 +189,9 @@ export class LayerClip {
         this._pauseTime = this._t0;
         this._lastClipTime = undefined;
         this._lastTickTime = undefined;
+        delete this._lastLoop;
         this._rate = 1;
-        this.clip.streamTick(StreamState.Ended, this._t0, 1, true);
+        this.clip.streamTick(StreamState.Ended, this._t0, 1, this.layer.active === this, this.layer.active, true);
         this.state = StreamState.Ended;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
     }

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

@@ -1,6 +1,7 @@
 import { ClipTrackEntity } from '../../data';
 import { Clip } from '../clips/clip';
 import { Keyframe } from '../keyframe';
+import { LayerClip } from '../layerclip';
 import { StreamState } from '../stream';
 import { Track } from './track';
 export declare class ClipTrack extends Track {
@@ -11,6 +12,8 @@ export declare class ClipTrack extends Track {
     private _entities;
     private _entitiesById;
     private _entitiesDirty;
+    private _lastTick?;
+    private _lastLoopNumber?;
     constructor(clip: Clip, id?: string);
     get influencedPaths(): string[];
     addWeight(k: Keyframe): void;
@@ -24,7 +27,8 @@ export declare class ClipTrack extends Track {
     }): void;
     get sortedBlocks(): ClipTrackEntity[];
     computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
-    streamPause(): void;
-    streamSeek(t: number): void;
-    streamTick(clipState: StreamState, t: number, rate: number, force?: boolean, parentWeight?: number): void;
+    streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
+    streamSeek(t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined): void;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, parentWeight?: number): void;
+    private _resolveBlock;
 }

package/lib/animation/tracks/cliptrack.js

@@ -1,4 +1,4 @@
-import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
+import { resolveClipTimeLoops, resolveKeyframes, resolveKeyframeValue, Track } from './track';
 export class ClipTrack extends Track {
     constructor(clip, id) {
         super(clip.animation, id);
@@ -65,29 +65,52 @@ export class ClipTrack extends Track {
         }
         return valueBefore;
     }
-    streamPause() {
-        this.clip.streamPause();
+    streamPause(isActive, active) {
+        this.clip.streamPause(isActive, active);
     }
-    streamSeek(t) {
+    streamSeek(t, rate, isActive, active) {
         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);
-            this.clip.streamSeek(ct);
+            this.clip.streamSeek(ct, rate, isActive, active);
             return;
         }
     }
-    streamTick(clipState, t, rate, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+        if (force)
+            delete this._lastLoopNumber;
+        const block = this._resolveBlock(t, rate);
+        const lastBlock = this._lastTick === undefined ? undefined : this._resolveBlock(this._lastTick, rate);
+        this._lastTick = t;
+        if (!block) {
+            this.clip.streamPause(isActive, active);
+        }
+        else {
+            const [bt, loopNumber] = resolveClipTimeLoops(t, block.t0, block.s0, block.rate, this.clip.length, (rate * block.rate) < 0, block.t1);
+            if ((t === block.t1 && rate >= +0) || (t === block.t0 && rate < 0)) {
+                this.clip.streamPause(isActive, active);
+            }
+            else {
+                this.clip.streamTick(clipState, bt, rate * block.rate, isActive, active, this._lastLoopNumber !== loopNumber || block !== lastBlock, parentWeight);
+                this._lastLoopNumber = loopNumber;
+            }
+        }
+    }
+    _resolveBlock(t, rate) {
         const blocks = this.sortedBlocks;
         for (let i = blocks.length - 1; i >= 0; i--) {
             const block = blocks[i];
-            if (block.t0 > t)
+            if (rate >= +0 && block.t0 > t)
                 continue;
-            const ct = this.clip.resolveClipTime(t, block.t0, block.s0, block.rate, block.t1);
-            this.clip.streamTick(clipState, ct, block.rate, force);
-            return;
+            if (rate < 0 && block.t0 >= t)
+                continue;
+            if (block.t1 !== undefined && block.t1 < t && rate >= +0)
+                return undefined;
+            return block;
         }
+        return undefined;
     }
 }

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

@@ -0,0 +1,32 @@
+import { ByID } from '../../data';
+import { Animation } from '../animation';
+import { LayerClip } from '../layerclip';
+import { StreamState } from '../stream';
+import { Track } from './track';
+export interface ResolvedFunctionTrackEntity {
+    id: string;
+    obj: any;
+    func: (...args: any[]) => any;
+    t0: number;
+    args: ByID<any>;
+}
+export declare class FunctionTrack extends Track {
+    readonly animation: Animation;
+    private _entities;
+    private _entitiesById;
+    private _entitiesDirty;
+    private _lastTick?;
+    constructor(animation: Animation);
+    get influencedPaths(): string[];
+    computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+    addBlock(k: ResolvedFunctionTrackEntity): void;
+    setBlocksById(weights: {
+        [id: string]: ResolvedFunctionTrackEntity;
+    }): void;
+    get sortedBlocks(): ResolvedFunctionTrackEntity[];
+    streamSeek(t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined): void;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, parentWeight?: number): void;
+    streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
+    private _resolveBlocksBetween;
+    private _getBoundedT;
+}

package/lib/animation/tracks/functiontrack.js

@@ -0,0 +1,95 @@
+import { Track } from './track';
+export class FunctionTrack extends Track {
+    constructor(animation) {
+        super(animation);
+        this.animation = animation;
+        this._entities = [];
+        this._entitiesById = {};
+        this._entitiesDirty = false;
+    }
+    get influencedPaths() {
+        return [];
+    }
+    computePathProperty(t, p, valueBefore, parentWeight) {
+        // n/a
+    }
+    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;
+    }
+    streamSeek(t, rate, isActive, active) {
+        this._lastTick = t;
+    }
+    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+        // if (clipState !== StreamState.Playing || this._lastTick === undefined) {
+        // 	this._lastTick = t;
+        // 	return;
+        // }
+        // if (this._lastTick === undefined) {
+        // 	this._lastTick = rate > +0 ? 0 : clipLength;
+        // }
+        // const blocks = this._resolveBlocksBetween(this._lastTick, t, rate, clipLength);
+        // for (const block of blocks) {
+        // 	const args: any[] = [];
+        // 	for (let i = 0; i < block.args.length; i++) {
+        // 		args[i] = block.args[i];
+        // 	}
+        // 	block.func.call(block.obj, ...args);
+        // }
+        // this._lastTick = t;
+    }
+    streamPause(isActive, active) {
+    }
+    _resolveBlocksBetween(tstart, tend, rate, clipLength) {
+        const blocks = this.sortedBlocks;
+        if (rate < 0) {
+            const tmp = tstart;
+            tstart = tend;
+            tend = tmp;
+        }
+        const [boundedEnd, loopNoEnd] = this._getBoundedT(tend, clipLength, rate);
+        let [bounded, loopNo] = this._getBoundedT(tstart, clipLength, rate);
+        const ret = [];
+        while (loopNo < loopNoEnd || (loopNo === loopNoEnd && bounded <= boundedEnd)) {
+            const t1 = (loopNoEnd > loopNo) ? Infinity : boundedEnd;
+            for (let i = 0; i < blocks.length; i++) {
+                const b = blocks[i];
+                if (b.t0 >= bounded && b.t0 <= t1) {
+                    ret.push(b);
+                }
+            }
+            if (loopNo >= loopNoEnd) {
+                break;
+            }
+            // Move to the start of the next loop
+            loopNo++;
+            bounded = 0;
+        }
+        return ret;
+    }
+    _getBoundedT(ct, clipLength, rate) {
+        let t = ct;
+        let loop = 0;
+        while (t >= clipLength) {
+            t -= clipLength;
+            loop++;
+        }
+        while (t < 0) {
+            t += clipLength;
+            loop++;
+        }
+        return [t, loop];
+    }
+}

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

@@ -1,6 +1,7 @@
 import { StreamTrackEntity } from '../../data';
 import { Animation } from '../animation';
 import { Keyframe } from '../keyframe';
+import { LayerClip } from '../layerclip';
 import { Stream, StreamState } from '../stream';
 import { Track } from './track';
 export declare class StreamTrack extends Track {
@@ -16,6 +17,7 @@ export declare class StreamTrack extends Track {
     private _weightsDirty;
     private _lastTick?;
     private _lastLoopNumber?;
+    private _lastState;
     private _lastRate;
     constructor(animation: Animation, _entity: any, _property: (string | number)[]);
     get influencedPaths(): string[];
@@ -30,10 +32,11 @@ export declare class StreamTrack extends Track {
         [id: string]: StreamTrackEntity;
     }): void;
     get sortedBlocks(): StreamTrackEntity[];
-    streamPause(): void;
-    streamSeek(t: number): void;
-    streamTick(clipState: StreamState, t: number, rate: number, force?: boolean, parentWeight?: number): void;
+    streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
+    streamSeek(t: number, resolvedRate: number, isActive: boolean, active: LayerClip | null | undefined): void;
+    private _isPlayingInClip;
+    private _isPlayingInLayerClip;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, parentWeight?: number): void;
     private _applyState;
     private _resolveBlock;
-    private _resolveBlockTime;
 }

package/lib/animation/tracks/streamtrack.js

@@ -1,5 +1,6 @@
 import { StreamState } from '../stream';
-import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
+import { ClipTrack } from './cliptrack';
+import { resolveClipTimeLoops, Track } from './track';
 export class StreamTrack extends Track {
     constructor(animation, _entity, _property) {
         super(animation);
@@ -12,7 +13,6 @@ export class StreamTrack extends Track {
         this._weights = [];
         this._weightsById = {};
         this._weightsDirty = false;
-        this._lastRate = 1;
     }
     get influencedPaths() {
         return [];
@@ -60,47 +60,76 @@ export class StreamTrack extends Track {
         this._entitiesDirty = false;
         return this._entities;
     }
-    streamPause() {
+    streamPause(isActive, active) {
+        if (!isActive && this._isPlayingInLayerClip(active)) {
+            delete this._lastLoopNumber;
+            return;
+        }
+        if (this._lastState === StreamState.Paused)
+            return;
         this.stream?.pause();
+        this._lastState = StreamState.Paused;
     }
-    streamSeek(t) {
-        const blockNow = this._resolveBlock(t);
+    streamSeek(t, resolvedRate, isActive, active) {
+        if (!isActive && this._isPlayingInLayerClip(active)) {
+            delete this._lastLoopNumber;
+            return;
+        }
+        const blockNow = this._resolveBlock(t, 1);
         if (!blockNow)
             return;
-        const [bt, loopNumber] = this._resolveBlockTime(t, blockNow.t0, blockNow.s0, blockNow.rate, blockNow.t1);
+        const [bt, loopNumber] = resolveClipTimeLoops(t, blockNow.t0, blockNow.s0, blockNow.rate, this.stream?.length?.() ?? Infinity, (resolvedRate * blockNow.rate) < 0, blockNow.t1);
         this.stream?.seek(bt);
         this._lastLoopNumber = loopNumber;
     }
-    streamTick(clipState, t, rate, force = false, parentWeight) {
-        let weight = 1;
-        const [weightBefore, weightAfter] = resolveKeyframes(this.sortedWeights, t);
-        if (weightBefore)
-            weight = resolveKeyframeValue(t, weightBefore, weightAfter);
-        weight *= parentWeight ?? 1;
-        const blockBefore = this._lastTick === undefined ? undefined : this._resolveBlock(this._lastTick);
+    _isPlayingInClip(stream, clip) {
+        for (let s of clip._streamTracks) {
+            if (s instanceof StreamTrack && s.stream === stream)
+                return true;
+            if (s instanceof ClipTrack && this._isPlayingInClip(stream, s.clip))
+                return true;
+        }
+        return false;
+    }
+    _isPlayingInLayerClip(layerClip) {
+        if (!layerClip)
+            return false;
+        const stream = this.stream;
+        if (!stream)
+            return false;
+        return this._isPlayingInClip(stream, layerClip.clip);
+    }
+    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+        if (!isActive && this._isPlayingInLayerClip(active)) {
+            delete this._lastLoopNumber;
+            return;
+        }
+        if (force)
+            delete this._lastLoopNumber;
+        const block = this._resolveBlock(t, rate);
+        let desiredState = clipState;
+        const lastBlock = this._lastTick === undefined ? undefined : this._resolveBlock(this._lastTick, rate);
         this._lastTick = t;
-        const blockNow = this._resolveBlock(t);
-        if (blockBefore !== blockNow || force) {
-            let desiredState = clipState;
-            if (!blockNow)
+        if (!block) {
+            desiredState = StreamState.Paused;
+        }
+        else {
+            const [bt, loopNumber] = resolveClipTimeLoops(t, block.t0, block.s0, block.rate, this.stream?.length?.() ?? Infinity, (rate * block.rate) < 0, block.t1);
+            if ((t === block.t1 && rate >= +0) || (t === block.t0 && rate < 0)) {
                 desiredState = StreamState.Paused;
-            else {
-                const [bt, loopNumber] = this._resolveBlockTime(t, blockNow.t0, blockNow.s0, blockNow.rate, blockNow.t1);
-                this._lastLoopNumber = loopNumber;
-                this.stream?.seek(bt);
+                force = true;
             }
-            this._applyState(desiredState, (blockNow?.rate ?? 1) * rate);
-        }
-        if (blockNow) {
-            const [bt, loopNumber] = this._resolveBlockTime(t, blockNow.t0, blockNow.s0, blockNow.rate, blockNow.t1);
-            if (loopNumber !== this._lastLoopNumber) {
-                console.log('Loop number changed', loopNumber, 'last', this._lastLoopNumber, 'seek', bt);
+            else if (this._lastLoopNumber !== loopNumber || lastBlock !== block) {
                 this._lastLoopNumber = loopNumber;
+                force = true;
                 this.stream?.seek(bt);
             }
         }
+        this._applyState(desiredState, (block?.rate ?? 1) * rate, force);
     }
-    _applyState(s, rate) {
+    _applyState(s, rate, force) {
+        if (s === this._lastState && !force && (s !== StreamState.Playing || this._lastRate === rate))
+            return;
         switch (s) {
             case StreamState.Playing:
                 this.stream?.play({ speed: rate });
@@ -112,33 +141,21 @@ export class StreamTrack extends Track {
                 this.stream?.stop();
                 break;
         }
+        this._lastState = s;
+        this._lastRate = rate;
     }
-    _resolveBlock(t) {
+    _resolveBlock(t, rate) {
         const blocks = this.sortedBlocks;
         for (let i = blocks.length - 1; i >= 0; i--) {
             const block = blocks[i];
-            if (block.t0 > t)
+            if (rate >= +0 && block.t0 > t)
                 continue;
-            if (block.t1 !== undefined && block.t1 <= t)
+            if (rate < 0 && block.t0 >= t)
+                continue;
+            if (block.t1 !== undefined && block.t1 < t && rate >= +0)
                 return undefined;
             return block;
         }
         return undefined;
     }
-    _resolveBlockTime(t, t0, s0, rate, t1 = Infinity) {
-        const length = this.stream?.length?.() ?? Infinity;
-        if (length === 0)
-            return [0, 0];
-        t = Math.min(t, t1);
-        const ct = s0 + (t - t0) * rate;
-        const loopNumber = Math.floor(ct / length);
-        let bounded = ct % length;
-        if (bounded < 0)
-            bounded += length;
-        if (bounded === 0 && rate >= +0 && t === t1)
-            bounded += length;
-        if (bounded === 0 && rate < 0 && t === t0)
-            bounded += length;
-        return [bounded, loopNumber];
-    }
 }

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

@@ -10,3 +10,4 @@ export declare abstract class Track {
 }
 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];
+export declare function resolveClipTimeLoops(t: number, t0: number, s0: number, rate: number, length: number, timeBackwards: boolean, t1?: number): [ct: number, loop: number];

package/lib/animation/tracks/track.js

@@ -31,3 +31,28 @@ export function resolveKeyframes(keyframes, t) {
     }
     return [keyframeBefore, keyframeAfter];
 }
+export function resolveClipTimeLoops(t, t0, s0, rate, length, timeBackwards, t1 = Infinity) {
+    if (length === 0)
+        return [0, 0];
+    t = Math.min(t, t1);
+    let ct = s0 + (t - t0) * rate;
+    let loop = 0;
+    // if (rate < 0) ct += length;
+    while ((ct >= length && !timeBackwards) || (ct > length && timeBackwards)) {
+        ct -= length;
+        loop++;
+    }
+    while ((ct < 0 && !timeBackwards) || (ct <= 0 && timeBackwards)) {
+        ct += length;
+        loop++;
+    }
+    if (ct === 0 && !timeBackwards && t === t1) {
+        ct += length;
+        loop--;
+    }
+    if (ct === 0 && timeBackwards && t === t1) {
+        ct += length;
+        loop--;
+    }
+    return [ct, loop];
+}

package/lib/components/Audio.d.ts

@@ -29,17 +29,20 @@ export declare class Audio extends Component<undefined, AudioConstructorProps> i
     destination: AudioNode;
     audioBuffer?: AudioBuffer;
     private _gain;
+    private _reversed?;
     private _playhead;
+    private _rate;
     private _session?;
+    constructor(mgr: ContextManager, props: AudioConstructorProps);
+    private _load;
+    private _updateVolume;
     /** @zprop
      * @zdefault false
      * @zgroup Audio
      * @zgrouppriority 20
      */
     muted: Observable<boolean, never>;
-    constructor(mgr: ContextManager, props: AudioConstructorProps);
-    private _load;
-    private _updateVolume;
+    private _getReversed;
     /**
      * @zprop
      * @ztype proportion

package/lib/components/Audio.js

@@ -14,15 +14,16 @@ export class Audio extends Component {
     constructor(mgr, props) {
         super(mgr, props);
         this._playhead = 0;
+        this._rate = 1;
+        this._updateVolume = () => {
+            this._gain.gain.value = this.muted.value === true ? 0 : this.volume.value;
+        };
         /** @zprop
          * @zdefault false
          * @zgroup Audio
          * @zgrouppriority 20
          */
-        this.muted = new Observable(false);
-        this._updateVolume = () => {
-            this._gain.gain.value = this.muted.value === true ? 0 : this.volume.value;
-        };
+        this.muted = new Observable(false, this._updateVolume);
         /**
          * @zprop
          * @ztype proportion
@@ -46,20 +47,43 @@ export class Audio extends Component {
         const audioContext = useAudioContext(this.contextManager);
         this.audioBuffer = await audioContext.decodeAudioData(data);
     }
+    _getReversed(inp) {
+        if (!this._reversed) {
+            const audioContext = useAudioContext(this.contextManager);
+            this._reversed = audioContext.createBuffer(inp.numberOfChannels, inp.length, inp.sampleRate);
+            for (let i = 0; i < inp.numberOfChannels; i++) {
+                const source = inp.getChannelData(i);
+                const destination = this._reversed.getChannelData(i);
+                for (let j = 0; j < inp.length; j++) {
+                    destination[j] = source[inp.length - j];
+                }
+            }
+        }
+        return this._reversed;
+    }
     /** @zprop */
     play(opts) {
         if (!this.audioBuffer)
             return;
         if (this._session)
-            this.stop();
-        if (this._playhead >= this.audioBuffer.duration)
-            this._playhead = 0;
+            this.pause();
+        this._rate = opts?.speed ?? 1;
+        let resolvedPlayhead = this._playhead;
+        if (this._rate >= +0) {
+            if (this._playhead >= this.audioBuffer.duration)
+                this._playhead = 0;
+        }
+        else {
+            if (this._playhead <= 0)
+                this._playhead = this.audioBuffer.duration;
+            resolvedPlayhead = Math.max(this.audioBuffer.duration - this._playhead, 0);
+        }
         const source = this.audioContext.createBufferSource();
-        source.buffer = this.audioBuffer;
-        source.playbackRate.value = opts?.speed ?? 1;
+        source.playbackRate.value = Math.abs(this._rate);
+        source.buffer = this._rate < 0 ? this._getReversed(this.audioBuffer) : this.audioBuffer;
         source.connect(this.destination);
-        const startedAt = this.audioContext.currentTime - (this._playhead / source.playbackRate.value);
-        source.start(0, this._playhead);
+        const startedAt = this.audioContext.currentTime - (resolvedPlayhead / source.playbackRate.value);
+        source.start(0, resolvedPlayhead);
         this._session = { source, startedAt };
     }
     /** @zprop */
@@ -67,6 +91,8 @@ export class Audio extends Component {
         if (!this._session)
             return;
         this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
+        if (this._rate < 0)
+            this._playhead = (this.audioBuffer?.length ?? 0) - this._playhead;
         this._session.source.stop();
         this._session.source.disconnect();
         delete this._session;
@@ -83,7 +109,7 @@ export class Audio extends Component {
             this.pause();
         this._playhead = t / 1000;
         if (previousSession)
-            this.play({ speed: previousSession.source.playbackRate.value });
+            this.play({ speed: this._rate });
     }
     length() {
         return this.audioBuffer ? (this.audioBuffer.duration * 1000) : undefined;

package/lib/data/animation.d.ts

@@ -141,6 +141,7 @@ export interface BaseFunctionTrackEntity {
     t0: number;
     type: 'entity' | 'import';
     args: ByID<any>;
+    runAtDesignTime?: boolean;
 }
 export interface EntityFunctionTrackEntity extends BaseFunctionTrackEntity {
     type: 'entity';

package/lib/inflate.js

@@ -6,6 +6,7 @@ import { Layer } from './animation/layer';
 import { ClipTrack } from './animation/tracks/cliptrack';
 import { Bezier } from './animation/bezier';
 import { StreamTrack } from './animation/tracks/streamtrack';
+import { FunctionTrack } from './animation/tracks/functiontrack';
 export function createTrackFromData(zcomp, anim, data) {
     switch (data.type) {
         case Data.TrackType.Property: {
@@ -37,6 +38,28 @@ export function createTrackFromData(zcomp, anim, data) {
             ret.setWeightsById(processKeyframes(data.weight, anim.curves));
             return ret;
         }
+        case Data.TrackType.Function: {
+            const ret = new FunctionTrack(anim);
+            const blocks = Object.create(null);
+            const dt = false; //isDesignTime(zcomp.contextManager);
+            for (const block of Object.values(data.data)) {
+                if (dt && !block?.runAtDesignTime)
+                    continue;
+                if (block?.type !== 'entity')
+                    continue;
+                const obj = zcomp.entityByID.get(block.entityID);
+                const func = obj?.[block.functionName];
+                if (typeof func !== 'function')
+                    continue;
+                blocks[block.id] = {
+                    ...block,
+                    obj,
+                    func,
+                };
+            }
+            ret.setBlocksById(blocks);
+            return ret;
+        }
     }
     return undefined;
 }

package/lib/selectors.d.ts

@@ -1,6 +1,5 @@
 import { BehaviorByID, EntityPropOverride, Import, NodeByID, ParsedImport, Props, ZComponentData } from './data/core';
 import * as Data from './data';
-import { Layer } from './animation';
 import { ZValues } from './values/values';
 export declare function parseImport(i: Import): ParsedImport;
 export declare function constructImport(from: string, destFile: string, imp: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.3.0-beta",
+  "version": "1.4.1-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -21,14 +21,14 @@
   "scripts": {
     "build": "rm -rf lib && tsc",
     "build-animation-tests": "tsc -p ./tsconfig.test.animation.json",
-    "test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test",
-    "tests": "parcel serve tests/index.html -p 8088"
+    "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha --es-module-specifier-resolution=node"
   },
   "author": "Zappar Limited",
   "license": "Proprietary",
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
-    "parcel": "^2.8.2",
+    "@types/mocha": "^10.0.1",
+    "mocha": "^10.2.0",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   },
   "zexports": [