@zcomponent/core 1.0.0 → 1.2.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,40 @@
+import { StreamTrackEntity } from '../../data';
+import { Entity } from '../../entity';
+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: Entity, _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;
+}

package/lib/behaviors/stream/SeekStream.js

@@ -0,0 +1,33 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon fast_forward
+ * @zgroup Stream Actions
+ */
+export class SeekStream extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+        /**
+         * @zprop
+         * @zgroup Stop Settings
+         * @zgrouppriority 20
+         * @zdefault 0
+         */
+        this.time = 0;
+    }
+    perform() {
+        if (!this.stream)
+            return;
+        const stream = this.zcomponent.resolveStreamID(this.stream);
+        if (!stream)
+            return;
+        stream.seek(this.time ?? 0);
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(SeekStream);

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

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

package/lib/behaviors/stream/StopStream.js

@@ -0,0 +1,26 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon stop_circle
+ * @zgroup Stream Actions
+ */
+export class StopStream 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.stop();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(StopStream);

package/lib/data/animation.d.ts

@@ -119,12 +119,15 @@ export interface ClipTrackEntity {
 }
 export interface StreamTrack extends BaseTrack {
     type: TrackType.Stream;
+    name: string;
     data: ByID<StreamTrackEntity>;
     weight: ByID<Keyframe>;
+    property: (string | number)[];
 }
-export interface StreamTrackEntity extends BaseTrack {
+export interface StreamTrackEntity {
+    id: string;
     t0: number;
-    t1: number;
+    t1?: number;
     s0: number;
     rate: number;
 }
@@ -134,7 +137,8 @@ export interface FunctionTrack extends BaseTrack {
 }
 export type FunctionTrackEntity = EntityFunctionTrackEntity | ImportFunctionTrackEntity;
 export interface BaseFunctionTrackEntity {
-    order: string;
+    id: string;
+    t0: number;
     type: 'entity' | 'import';
     args: ByID<any>;
 }

package/lib/data/change.js

@@ -368,9 +368,20 @@ export function forEachNodeAncestor(zcomp, id, fn) {
     fn(node.parent.id);
     forEachNodeAncestor(zcomp, node.parent.id, fn);
 }
+const lastNumberRegex = new RegExp(/[0-9]*$/);
 export function getUniqueLabel(zcomp, label) {
+    lastNumberRegex.lastIndex = 0;
+    let startIndex = 1;
+    const result = lastNumberRegex.exec(label);
+    if (result && result.length === 1) {
+        const num = parseInt(result[0]);
+        if (!isNaN(num)) {
+            startIndex = num + 1;
+            label = label.substring(0, result.index);
+        }
+    }
     const existingLabels = zcomp.entitiesByLabel ?? {};
-    for (let i = 1; i < 10000; i++) {
+    for (let i = startIndex; i < 10000; i++) {
         const testName = i === 1 ? label : `${label} ${i.toString()}`;
         if (!Object.prototype.hasOwnProperty.call(existingLabels, testName)) {
             label = testName;

package/lib/inflate.js

@@ -5,6 +5,7 @@ import { LayerClip } from './animation/layerclip';
 import { Layer } from './animation/layer';
 import { ClipTrack } from './animation/tracks/cliptrack';
 import { Bezier } from './animation/bezier';
+import { StreamTrack } from './animation/tracks/streamtrack';
 export function createTrackFromData(zcomp, anim, data) {
     switch (data.type) {
         case Data.TrackType.Property: {
@@ -27,6 +28,15 @@ export function createTrackFromData(zcomp, anim, data) {
             ret.setWeightsById(processKeyframes(data.weight, anim.curves));
             return ret;
         }
+        case Data.TrackType.Stream: {
+            const entity = zcomp.entityByID.get(data.entityID);
+            if (!entity)
+                return;
+            const ret = new StreamTrack(anim, entity, data.property);
+            ret.setBlocksById(data.data);
+            ret.setWeightsById(processKeyframes(data.weight, anim.curves));
+            return ret;
+        }
     }
     return undefined;
 }
@@ -84,7 +94,7 @@ export function createClipFromData(zcomp, anim, data) {
                         if (!keyframe)
                             continue;
                         length = Math.max(length, keyframe.t0);
-                        length = Math.max(length, keyframe.t1);
+                        length = Math.max(length, keyframe.t1 ?? length);
                     }
                     break;
                 case Data.TrackType.Stream:
@@ -92,7 +102,8 @@ export function createClipFromData(zcomp, anim, data) {
                         if (!keyframe)
                             continue;
                         length = Math.max(length, keyframe.t0);
-                        length = Math.max(length, keyframe.t1);
+                        if (keyframe.t1)
+                            length = Math.max(length, keyframe.t1);
                     }
                     break;
             }

package/lib/types.d.ts

@@ -71,10 +71,15 @@ export type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveT
 export declare enum TypeHint {
     'proportion' = "proportion",
     'color-norm-rgb' = "color-norm-rgb",
+    'color-norm-rgba' = "color-norm-rgba",
     'color-unnorm-rgb' = "color-unnorm-rgb",
+    'color-unnorm-rgba' = "color-unnorm-rgba",
     'color-hex' = "color-hex",
+    'color-hexa' = "color-hexa",
     'color-css' = "color-css",
-    'text-multiline' = "text-multiline"
+    'text-multiline' = "text-multiline",
+    'angle-degrees' = "angle-degrees",
+    'angle-radians' = "angle-radians"
 }
 export declare enum ValuesType {
     'files' = "files",
@@ -86,7 +91,8 @@ export declare enum ValuesType {
     'nodeids' = "nodeids",
     'layerclipids' = "layerclipids",
     'easings' = "easings",
-    'layerids' = "layerids"
+    'layerids' = "layerids",
+    'streamids' = "streamids"
 }
 export interface Values {
     type: ValuesType;
@@ -129,6 +135,10 @@ export interface ComponentInfo {
     allowedChildren: string[];
     allowedParents?: string[];
     defaultChildren?: DefaultChild[];
+    streams: StreamInfo[];
+    streamsObjects: {
+        [id: string]: string;
+    };
 }
 export interface ValueInfo {
     name: string;
@@ -144,6 +154,9 @@ export interface PreviewInfo {
     comments?: string[];
     filePattern: string;
 }
+export interface StreamInfo {
+    property: (string | number)[];
+}
 export interface SourceFileTypeInfo {
     components: {
         [id: string]: ComponentInfo;

package/lib/types.js

@@ -19,10 +19,15 @@ export var TypeHint;
 (function (TypeHint) {
     TypeHint["proportion"] = "proportion";
     TypeHint["color-norm-rgb"] = "color-norm-rgb";
+    TypeHint["color-norm-rgba"] = "color-norm-rgba";
     TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
+    TypeHint["color-unnorm-rgba"] = "color-unnorm-rgba";
     TypeHint["color-hex"] = "color-hex";
+    TypeHint["color-hexa"] = "color-hexa";
     TypeHint["color-css"] = "color-css";
     TypeHint["text-multiline"] = "text-multiline";
+    TypeHint["angle-degrees"] = "angle-degrees";
+    TypeHint["angle-radians"] = "angle-radians";
 })(TypeHint || (TypeHint = {}));
 export var ValuesType;
 (function (ValuesType) {
@@ -36,6 +41,7 @@ export var ValuesType;
     ValuesType["layerclipids"] = "layerclipids";
     ValuesType["easings"] = "easings";
     ValuesType["layerids"] = "layerids";
+    ValuesType["streamids"] = "streamids";
 })(ValuesType || (ValuesType = {}));
 function valuesCompatible(l, r) {
     if (!l && !r)

package/lib/zcomponent.d.ts

@@ -1,4 +1,4 @@
-import { Animation } from './animation/index';
+import { Animation, Stream } from './animation/index';
 import { Component, ComponentChildren, ConstructorForComponent, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
 import { Entity } from './entity';
@@ -44,6 +44,12 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     constructed: Promise<void>;
     isConstructed: boolean;
     animation: Animation;
+    /**
+     * @zstreams layerclipids
+     */
+    streams: {
+        [id: string]: Stream;
+    };
     private _nodesById;
     private _behaviorsToInitialize;
     private _constructorPropOverridesByEntityID;
@@ -63,5 +69,6 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     private _setEntityProp;
     private _setEntityPropPath;
     _getNodeById(id: string): Component | undefined;
+    resolveStreamID(id: string): Stream | undefined;
     dispose(): never;
 }

package/lib/zcomponent.js

@@ -31,6 +31,10 @@ export class ZComponent extends Component {
         this.constructed = new Promise(resolve => this._constructedResolve = resolve);
         this.isConstructed = false;
         this.animation = new Animation(false);
+        /**
+         * @zstreams layerclipids
+         */
+        this.streams = {};
         this._nodesById = new Map();
         this._behaviorsToInitialize = [];
         this._constructorPropOverridesByEntityID = new Map();
@@ -60,6 +64,10 @@ export class ZComponent extends Component {
         if (this._opts.data.animation)
             populateAnimationTracksFromData(this, this.animation, this._opts.data.animation);
         this.animation.initialize();
+        for (const layerClip of this.animation.layerClipByID.values()) {
+            if (layerClip.id)
+                this.streams[layerClip.id] = layerClip;
+        }
         this.isConstructed = true;
         this._constructedResolve();
         started(contextManager).then(() => {
@@ -104,6 +112,8 @@ export class ZComponent extends Component {
                 if (node?.label) {
                     that.entityByLabel.set(node.label, this);
                     that.nodeByLabel.set(node.label, this);
+                    if (this.element)
+                        this.element['__zlabel'] = node.label;
                 }
                 that._nodesById.set(nodeId, this);
                 for (const element of this.elementsResolved) {
@@ -370,6 +380,18 @@ export class ZComponent extends Component {
     _getNodeById(id) {
         return this._nodesById.get(id);
     }
+    resolveStreamID(id) {
+        const parts = id.split('.');
+        let obj = this.entityByID.get(parts[0]);
+        if (!obj)
+            return undefined;
+        for (let i = 1; i < parts.length; i++) {
+            if (!obj)
+                return undefined;
+            obj = obj[parts[i]];
+        }
+        return obj;
+    }
     dispose() {
         this.animation.dispose();
         for (const entity of this.entityByID.values()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.0.0",
+  "version": "1.2.0-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",