@zcomponent/core 1.12.0-beta → 1.13.0-beta

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

@@ -33,5 +33,6 @@ export declare class Clip {
     resolveClipTime(t: number, t0: number, s0: number, rate: number, t1?: number): number;
     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;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, stalled?: boolean, parentWeight?: number): void;
+    stalled(): boolean;
 }

package/lib/animation/clips/clip.js

@@ -126,9 +126,16 @@ export class Clip {
             track.streamSeek(t, rate, isActive, active);
         }
     }
-    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, stalled = false, parentWeight) {
         for (const track of this._streamTracks) {
-            track.streamTick(clipState, t, rate, isActive, active, force, parentWeight);
+            track.streamTick(clipState, t, rate, isActive, active, force, stalled, parentWeight);
         }
     }
+    stalled() {
+        for (const track of this._tracks) {
+            if (track.stalled())
+                return true;
+        }
+        return false;
+    }
 }

package/lib/animation/layerclip.d.ts

@@ -16,6 +16,7 @@ export declare class LayerClip implements Stream {
     readonly animation: Animation;
     private _t0;
     private _pauseTime;
+    private _stallStartTime;
     private _t1;
     private _rate;
     private _loop;
@@ -34,6 +35,7 @@ export declare class LayerClip implements Stream {
     length(): number;
     play(opts?: LayerClipPlayOptions): void;
     pause(): void;
+    private _cancelStall;
     seek(ct: number, opts?: LayerClipSeekOptions): void;
     /** @internal */
     _serialize(state: AnimationState): void;
@@ -41,6 +43,7 @@ export declare class LayerClip implements Stream {
     _restore(state: AnimationState): void;
     get clipTime(): number;
     stop(): void;
+    stalled(): boolean;
 }
 export interface LayerClipSeekOptions {
     fade?: FadeParameters | null;

package/lib/animation/layerclip.js

@@ -30,8 +30,16 @@ export class LayerClip {
     }
     tick(touchedPaths, force) {
         const t = this._getTime();
-        const t0 = this._t0 + (t - (this._pauseTime ?? t));
-        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        if (this._stallStartTime !== undefined) {
+            if (!this.clip.stalled())
+                this._cancelStall();
+        }
+        else if (this.state === StreamState.Playing) {
+            if (this.clip.stalled())
+                this._stallStartTime = t;
+        }
+        const t0 = this._t0 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
         const ct = this.clip.resolveClipTime(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, t1);
         this._lastTickTime = ct;
         if (ct !== this._lastClipTime || force) {
@@ -43,25 +51,25 @@ export class LayerClip {
         }
         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.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, this._stallStartTime !== undefined, 1);
             this._lastLoop = loop;
         }
     }
     computePathProperty(p, valueBefore) {
         const t = this._getTime();
-        const t0 = this._t0 + (t - (this._pauseTime ?? t));
-        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        const t0 = this._t0 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? 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));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
         return t1 - t;
     }
     _getTime() {
-        return this.timeSource?.() ?? this.animation.timeSource?.() ?? performance.now();
+        return this.timeSource?.() ?? this.animation?.timeSource?.() ?? performance.now();
     }
     queue(opts) {
         this.layer.queue(this, opts);
@@ -108,8 +116,10 @@ export class LayerClip {
             this.layer._activateLayerClip(this, opts);
             this.layer._evaulate();
         }
+        if (this.clip.stalled())
+            this._stallStartTime = t;
         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.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, this._stallStartTime !== undefined, 1);
         this._lastLoop = loop;
     }
     pause() {
@@ -119,8 +129,17 @@ export class LayerClip {
         this.state = StreamState.Paused;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
         this._pauseTime = this._getTime();
+        this._cancelStall();
         this.clip.streamPause(this.layer.active === this, this.layer.active);
     }
+    _cancelStall() {
+        if (this._stallStartTime === undefined)
+            return;
+        const t = this._getTime();
+        this._t0 += t - this._stallStartTime;
+        this._t1 += t - this._stallStartTime;
+        delete this._stallStartTime;
+    }
     seek(ct, opts) {
         const t = this._getTime();
         this._stopped = false;
@@ -143,6 +162,7 @@ export class LayerClip {
             this.layer._activateLayerClip(this, { fade: opts?.fade });
         }
         delete this._lastLoop;
+        delete this._stallStartTime;
         this.clip.streamSeek(ct, this._rate, this.layer.active === this, this.layer.active);
         this.layer._evaulate();
     }
@@ -190,9 +210,13 @@ export class LayerClip {
         this._lastClipTime = undefined;
         this._lastTickTime = undefined;
         delete this._lastLoop;
+        delete this._stallStartTime;
         this._rate = 1;
         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] });
     }
+    stalled() {
+        return this._stallStartTime !== undefined;
+    }
 }

package/lib/animation/stream.d.ts

@@ -9,6 +9,7 @@ export interface Stream {
     seek: (t: number) => void;
     stop: () => void;
     length?: () => number | undefined;
+    stalled?: () => boolean;
 }
 export interface PlayOptions {
     speed?: number;

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

@@ -29,6 +29,7 @@ export declare class ClipTrack extends Track {
     computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
     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;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, stalled?: boolean, parentWeight?: number): void;
     private _resolveBlock;
+    stalled(): boolean;
 }

package/lib/animation/tracks/cliptrack.js

@@ -79,7 +79,7 @@ export class ClipTrack extends Track {
             return;
         }
     }
-    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, stalled = false, parentWeight) {
         if (force)
             delete this._lastLoopNumber;
         const block = this._resolveBlock(t, rate);
@@ -94,7 +94,7 @@ export class ClipTrack extends Track {
                 this.clip.streamPause(isActive, active);
             }
             else {
-                this.clip.streamTick(clipState, bt, rate * block.rate, isActive, active, this._lastLoopNumber !== loopNumber || block !== lastBlock, parentWeight);
+                this.clip.streamTick(clipState, bt, rate * block.rate, isActive, active, this._lastLoopNumber !== loopNumber || block !== lastBlock, stalled, parentWeight);
                 this._lastLoopNumber = loopNumber;
             }
         }
@@ -113,4 +113,7 @@ export class ClipTrack extends Track {
         }
         return undefined;
     }
+    stalled() {
+        return this.clip.stalled();
+    }
 }

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

@@ -25,7 +25,7 @@ export declare class FunctionTrack extends Track {
     }): 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;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, stalled?: boolean, parentWeight?: number): void;
     streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
     private _resolveBlocksBetween;
     private _getBoundedT;

package/lib/animation/tracks/functiontrack.js

@@ -32,7 +32,7 @@ export class FunctionTrack extends Track {
     streamSeek(t, rate, isActive, active) {
         this._lastTick = t;
     }
-    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, stalled = false, parentWeight) {
         // if (clipState !== StreamState.Playing || this._lastTick === undefined) {
         // 	this._lastTick = t;
         // 	return;

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

@@ -36,7 +36,8 @@ export declare class StreamTrack extends Track {
     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;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, stalled?: boolean, parentWeight?: number): void;
     private _applyState;
     private _resolveBlock;
+    stalled(): boolean;
 }

package/lib/animation/tracks/streamtrack.js

@@ -99,7 +99,7 @@ export class StreamTrack extends Track {
             return false;
         return this._isPlayingInClip(stream, layerClip.clip);
     }
-    streamTick(clipState, t, rate, isActive, active, force = false, parentWeight) {
+    streamTick(clipState, t, rate, isActive, active, force = false, stalled = false, parentWeight) {
         if (!isActive && this._isPlayingInLayerClip(active)) {
             delete this._lastLoopNumber;
             return;
@@ -110,7 +110,7 @@ export class StreamTrack extends Track {
         let desiredState = clipState;
         const lastBlock = this._lastTick === undefined ? undefined : this._resolveBlock(this._lastTick, rate);
         this._lastTick = t;
-        if (!block) {
+        if (!block || stalled) {
             desiredState = StreamState.Paused;
         }
         else {
@@ -158,4 +158,7 @@ export class StreamTrack extends Track {
         }
         return undefined;
     }
+    stalled() {
+        return this.stream?.stalled?.() ?? false;
+    }
 }

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

@@ -7,6 +7,7 @@ export declare abstract class Track {
     constructor(anim: Animation, id?: string | undefined);
     abstract get influencedPaths(): string[];
     abstract computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+    stalled(): boolean;
 }
 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];

package/lib/animation/tracks/track.js

@@ -8,6 +8,9 @@ export class Track {
         if (id)
             anim.trackByID.set(id, this);
     }
+    stalled() {
+        return false;
+    }
 }
 export function resolveKeyframeValue(t, before, after) {
     if (!after || !before.easing)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.12.0-beta",
-  "description": "",
+  "version": "1.13.0-beta",
+  "description": "The core component model and built-in functionality for Mattercraft.",
   "main": "index.js",
   "types": "index.d.ts",
   "engines": {