@zcomponent/core 1.1.0 → 1.3.0-beta

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

@@ -1,6 +1,7 @@
 import * as Data from '../../data';
 import { Observable } from '../../observable';
 import { Animation } from '../animation';
+import { StreamState } from '../stream';
 import { Track } from '../tracks/track';
 export declare class Clip {
     animation: Animation;
@@ -13,6 +14,7 @@ export declare class Clip {
     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;
@@ -24,8 +26,7 @@ export declare class Clip {
         [id: string]: Partial<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;
+    streamTick(state: StreamState, ct: number, rate: number, force?: boolean, parentWeight?: number): void;
 }

package/lib/animation/clips/clip.js

@@ -1,6 +1,7 @@
 import { Observable } from '../../observable';
 import { ClipTrack } from '../tracks/cliptrack';
 import { PropertyTrack } from '../tracks/propertytrack';
+import { StreamTrack } from '../tracks/streamtrack';
 export class Clip {
     constructor(animation, length, scriptName, id) {
         this.animation = animation;
@@ -12,6 +13,7 @@ export class Clip {
         this._tracksByPath = new Map();
         this._tracksByPathDirty = false;
         this._tracks = [];
+        this._streamTracks = [];
         this._dirty = (v) => {
             if (v) {
                 this.influencedPathsDirty.value = true;
@@ -35,6 +37,8 @@ export class Clip {
         t.influencedPathsDirty.addListener(this._dirty);
         this.influencedPathsDirty.value = true;
         this._tracksByPathDirty = true;
+        if (t instanceof StreamTrack || t instanceof ClipTrack)
+            this._streamTracks.push(t);
     }
     clearTracks() {
         const existingPaths = this._influencedPaths;
@@ -44,6 +48,7 @@ export class Clip {
         this._tracks = [];
         this.influencedPathsDirty.value = true;
         this._tracksByPathDirty = true;
+        this._streamTracks = [];
         this.animation.evaluateTouchedPaths(existingPaths);
     }
     get tracksByPath() {
@@ -108,8 +113,19 @@ export class Clip {
             bounded += this.length;
         return bounded;
     }
-    streamPlay(speed) { }
-    streamPause() { }
-    streamStop() { }
-    streamSeek(t) { }
+    streamPause() {
+        for (const track of this._streamTracks) {
+            track.streamPause();
+        }
+    }
+    streamSeek(t) {
+        for (const track of this._streamTracks) {
+            track.streamSeek(t);
+        }
+    }
+    streamTick(state, ct, rate, force = false, parentWeight) {
+        for (const track of this._streamTracks) {
+            track.streamTick(state, ct, rate, force, parentWeight);
+        }
+    }
 }

package/lib/animation/index.d.ts

@@ -5,3 +5,4 @@ export * from './tracks/track';
 export * from './tracks/cliptrack';
 export * from './tracks/propertytrack';
 export * from './clips/clip';
+export * from './stream';

package/lib/animation/index.js

@@ -5,3 +5,4 @@ export * from './tracks/track';
 export * from './tracks/cliptrack';
 export * from './tracks/propertytrack';
 export * from './clips/clip';
+export * from './stream';

package/lib/animation/layerclip.d.ts

@@ -19,6 +19,7 @@ export declare class LayerClip implements Stream {
     private _t1;
     private _rate;
     private _loop;
+    private _lastTickTime;
     private _lastClipTime;
     private _stopped;
     state: StreamState;
@@ -29,6 +30,7 @@ export declare class LayerClip implements Stream {
     getRemainingTimeEstimate(): number;
     private _getTime;
     queue(opts?: LayerClipPlayOptions): void;
+    length(): number;
     play(opts?: LayerClipPlayOptions): void;
     pause(): void;
     seek(ct: number, opts?: LayerClipSeekOptions): void;

package/lib/animation/layerclip.js

@@ -32,6 +32,7 @@ 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._lastTickTime = ct;
         if (ct !== this._lastClipTime || force) {
             touchedPaths.push(...this.clip.influencedPaths);
         }
@@ -39,6 +40,7 @@ export class LayerClip {
             this.pause();
             this.state = StreamState.Ended;
         }
+        this.clip.streamTick(this.state, ct, this._rate);
     }
     computePathProperty(p, valueBefore) {
         const t = this._getTime();
@@ -59,6 +61,9 @@ export class LayerClip {
     queue(opts) {
         this.layer.queue(this, opts);
     }
+    length() {
+        return this.clip.length;
+    }
     play(opts) {
         if (opts?.speed === 0) {
             this.pause();
@@ -67,11 +72,12 @@ 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 = this._getTime();
+            this._t0 = t;
         }
         else if (this._pauseTime !== undefined) {
-            this._t0 = this._getTime() - (this._pauseTime - this._t0);
+            this._t0 = t - (this._pauseTime - this._t0);
         }
         delete this._pauseTime;
         if (this._loop)
@@ -84,10 +90,14 @@ export class LayerClip {
             else
                 this._t1 = Infinity;
         }
-        this.clip.streamPlay(this._rate);
+        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;
+        this._lastTickTime = undefined;
         if (this.layer.active !== this) {
             this.layer._activateLayerClip(this, opts);
             this.layer._evaulate();
@@ -118,9 +128,11 @@ export class LayerClip {
         if (this._loop)
             this._t1 = Infinity;
         this._lastClipTime = undefined;
+        this._lastTickTime = undefined;
         if (this.layer.active !== this && !opts?.dontActivateLayer) {
             this.layer._activateLayerClip(this, { fade: opts?.fade });
         }
+        this.clip.streamSeek(ct);
         this.layer._evaulate();
     }
     /** @internal */
@@ -159,14 +171,15 @@ export class LayerClip {
         this.state = entry.state;
     }
     get clipTime() {
-        return this._lastClipTime !== undefined ? this._lastClipTime : this.defaultPlaySpeed > 0 ? 0 : this.clip.length;
+        return this._lastTickTime !== undefined ? this._lastTickTime : this.defaultPlaySpeed > 0 ? 0 : this.clip.length;
     }
     stop() {
         this._stopped = true;
         this._pauseTime = this._t0;
         this._lastClipTime = undefined;
+        this._lastTickTime = undefined;
         this._rate = 1;
-        this.clip.streamStop();
+        this.clip.streamTick(StreamState.Ended, this._t0, 1, true);
         this.state = StreamState.Ended;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
     }

package/lib/animation/stream.d.ts

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

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 { StreamState } from '../stream';
 import { Track } from './track';
 export declare class ClipTrack extends Track {
     readonly clip: Clip;
@@ -23,4 +24,7 @@ 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;
 }

package/lib/animation/tracks/cliptrack.js

@@ -65,4 +65,29 @@ export class ClipTrack extends Track {
         }
         return valueBefore;
     }
+    streamPause() {
+        this.clip.streamPause();
+    }
+    streamSeek(t) {
+        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);
+            return;
+        }
+    }
+    streamTick(clipState, t, rate, force = false, parentWeight) {
+        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.streamTick(clipState, ct, block.rate, force);
+            return;
+        }
+    }
 }

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

@@ -0,0 +1,39 @@
+import { StreamTrackEntity } from '../../data';
+import { Animation } from '../animation';
+import { Keyframe } from '../keyframe';
+import { Stream, StreamState } from '../stream';
+import { Track } from './track';
+export declare class StreamTrack extends Track {
+    readonly animation: Animation;
+    private _entity;
+    private _property;
+    private _stream;
+    private _entities;
+    private _entitiesById;
+    private _entitiesDirty;
+    private _weights;
+    private _weightsById;
+    private _weightsDirty;
+    private _lastTick?;
+    private _lastLoopNumber?;
+    private _lastRate;
+    constructor(animation: Animation, _entity: any, _property: (string | number)[]);
+    get influencedPaths(): string[];
+    get stream(): Stream | undefined;
+    computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+    setWeightsById(weights: {
+        [id: string]: Keyframe;
+    }): void;
+    get sortedWeights(): Keyframe[];
+    addBlock(k: StreamTrackEntity): void;
+    setBlocksById(weights: {
+        [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;
+    private _applyState;
+    private _resolveBlock;
+    private _resolveBlockTime;
+}

package/lib/animation/tracks/streamtrack.js

@@ -0,0 +1,144 @@
+import { StreamState } from '../stream';
+import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
+export class StreamTrack extends Track {
+    constructor(animation, _entity, _property) {
+        super(animation);
+        this.animation = animation;
+        this._entity = _entity;
+        this._property = _property;
+        this._entities = [];
+        this._entitiesById = {};
+        this._entitiesDirty = false;
+        this._weights = [];
+        this._weightsById = {};
+        this._weightsDirty = false;
+        this._lastRate = 1;
+    }
+    get influencedPaths() {
+        return [];
+    }
+    get stream() {
+        if (!this._stream) {
+            let obj = this._entity;
+            for (let i = 0; i < this._property.length; i++) {
+                obj = obj[this._property[i]];
+                if (!obj)
+                    return undefined;
+            }
+            this._stream = obj;
+        }
+        return this._stream;
+    }
+    computePathProperty(t, p, valueBefore, parentWeight) {
+        // n/a
+    }
+    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;
+    }
+    streamPause() {
+        this.stream?.pause();
+    }
+    streamSeek(t) {
+        const blockNow = this._resolveBlock(t);
+        if (!blockNow)
+            return;
+        const [bt, loopNumber] = this._resolveBlockTime(t, blockNow.t0, blockNow.s0, blockNow.rate, 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);
+        this._lastTick = t;
+        const blockNow = this._resolveBlock(t);
+        if (blockBefore !== blockNow || force) {
+            let desiredState = clipState;
+            if (!blockNow)
+                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);
+            }
+            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);
+                this._lastLoopNumber = loopNumber;
+                this.stream?.seek(bt);
+            }
+        }
+    }
+    _applyState(s, rate) {
+        switch (s) {
+            case StreamState.Playing:
+                this.stream?.play({ speed: rate });
+                break;
+            case StreamState.Paused:
+                this.stream?.pause();
+                break;
+            case StreamState.Ended:
+                this.stream?.stop();
+                break;
+        }
+    }
+    _resolveBlock(t) {
+        const blocks = this.sortedBlocks;
+        for (let i = blocks.length - 1; i >= 0; i--) {
+            const block = blocks[i];
+            if (block.t0 > t)
+                continue;
+            if (block.t1 !== undefined && block.t1 <= t)
+                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/behaviors/ActivateState.d.ts

@@ -0,0 +1,48 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export declare class ActivateState extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Activate State Settings
+     * @zgrouppriority 20
+     * @zvalues layerclipids
+     */
+    state: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Override Fade
+     * @zgrouppriority 10
+     */
+    fadeTime?: number;
+    /**
+     * @zprop
+     * @zgroup Override Fade
+     * @zgrouppriority 10
+     * @zdefault 0
+     */
+    pin?: Pin | number;
+    /**
+     * @zprop
+     * @zgroup Override Fade
+     * @zgrouppriority 10
+     * @zdefault 0
+     * @zvalues easings
+     */
+    easing?: string;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}
+export declare enum Pin {
+    Start = 0,
+    Middle = 0.5,
+    End = 1
+}

package/lib/behaviors/ActivateState.js

@@ -0,0 +1,39 @@
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export class ActivateState extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+    }
+    perform() {
+        if (!this.state)
+            return;
+        const layerclip = this.zcomponent.animation.layerClipByID.get(this.state);
+        if (!layerclip)
+            return;
+        const opts = {
+            fade: {
+                time: this.fadeTime,
+                pin: this.pin,
+                easing: this.easing
+            }
+        };
+        layerclip.play(opts);
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+export var Pin;
+(function (Pin) {
+    Pin[Pin["Start"] = 0] = "Start";
+    Pin[Pin["Middle"] = 0.5] = "Middle";
+    Pin[Pin["End"] = 1] = "End";
+})(Pin || (Pin = {}));
+registerBehaviorRunAtDesignTime(ActivateState);

package/lib/behaviors/stream/PauseStream.d.ts

@@ -0,0 +1,22 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../../actionbehavior";
+import { Component } from "../../component";
+import { ContextManager } from "../../context";
+/**
+ * @zbehavior
+ * @zicon pause_circle
+ * @zgroup Stream Actions
+ */
+export declare class PauseStream extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Pause Settings
+     * @zgrouppriority 20
+     * @zvalues streamids
+     */
+    stream: string | undefined;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/stream/PauseStream.js

@@ -0,0 +1,26 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon pause_circle
+ * @zgroup Stream Actions
+ */
+export class PauseStream extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+    }
+    perform() {
+        if (!this.stream)
+            return;
+        const stream = this.zcomponent.resolveStreamID(this.stream);
+        if (!stream)
+            return;
+        stream.pause();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(PauseStream);

package/lib/behaviors/stream/PlayStream.d.ts

@@ -0,0 +1,45 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../../actionbehavior";
+import { Component } from "../../component";
+import { ContextManager } from "../../context";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Stream Actions
+ */
+export declare class PlayStream extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues streamids
+     */
+    stream: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault false
+     */
+    loop?: boolean;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault 1
+     */
+    speed?: number;
+    /**
+     * Seek the clip to the start before playing
+     *
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault false
+     */
+    fromStart: boolean;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/stream/PlayStream.js

@@ -0,0 +1,37 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Stream Actions
+ */
+export class PlayStream extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+        /**
+         * Seek the clip to the start before playing
+         *
+         * @zprop
+         * @zgroup Play Settings
+         * @zgrouppriority 20
+         * @zdefault false
+         */
+        this.fromStart = false;
+    }
+    perform() {
+        if (!this.stream)
+            return;
+        const stream = this.zcomponent.resolveStreamID(this.stream);
+        if (!stream)
+            return;
+        if (this.fromStart ?? false)
+            stream.seek(0);
+        stream.play({ loop: this.loop, speed: this.speed });
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(PlayStream);

package/lib/behaviors/stream/SeekStream.d.ts

@@ -0,0 +1,29 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../../actionbehavior";
+import { Component } from "../../component";
+import { ContextManager } from "../../context";
+/**
+ * @zbehavior
+ * @zicon fast_forward
+ * @zgroup Stream Actions
+ */
+export declare class SeekStream extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Stop Settings
+     * @zgrouppriority 20
+     * @zvalues streamids
+     */
+    stream: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Stop Settings
+     * @zgrouppriority 20
+     * @zdefault 0
+     */
+    time: number;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}