@zcomponent/core 0.0.21 → 0.0.23

package/lib/animation/animation.d.ts

@@ -2,18 +2,31 @@ import { Layer } from './layer';
 import { Observable } from '../observable';
 import { Event } from '../event';
 import { LayerClip } from './layerclip';
+import { Clip } from './clips/clip';
 import { AnimationState } from './animationstate';
+import { Track } from './tracks/track';
 /** @internal */
 export declare enum AnimationEvents {
     onLayerClipActive = "onLayerClipActive",
     onLayerClipState = "onLayerClipState"
 }
 export declare class Animation {
+    private _initialize;
+    layers: {
+        [id: string]: Layer;
+    };
+    clips: {
+        [id: string]: Clip;
+    };
     onTick: Event<[]>;
     onLayerClipActive: Event<[layerClip: LayerClip]>;
     onLayerClipState: Event<[layerClip: LayerClip]>;
+    clipByID: Map<string, Clip>;
+    layerByID: Map<string, Layer>;
+    layerClipByID: Map<string, LayerClip>;
+    trackByID: Map<string, Track>;
     hasLayers: Observable<boolean, never>;
-    layers: Layer[];
+    private _layers;
     private _spotlightLayer?;
     timeSource: (() => number) | undefined;
     private _entityPaths;
@@ -23,13 +36,14 @@ export declare class Animation {
         evt: AnimationEvents;
         args: any[];
     }[];
-    constructor();
+    constructor(_initialize?: boolean);
     serializeState(): AnimationState;
     restoreState(state: AnimationState): void;
     dispose(): void;
     addLayer(l: Layer): void;
     insertLayer(l: Layer, indx: number): void;
     removeLayer(l: Layer): void;
+    initialize(): void;
     tick(): void;
     registerEntityPath(path: string, entity: any, pathParts: (string | number)[]): void;
     evaluateTouchedPaths(paths: string[], t?: number): void;

package/lib/animation/animation.js

@@ -8,12 +8,19 @@ export var AnimationEvents;
     AnimationEvents["onLayerClipState"] = "onLayerClipState";
 })(AnimationEvents || (AnimationEvents = {}));
 export class Animation {
-    constructor() {
+    constructor(_initialize = true) {
+        this._initialize = _initialize;
+        this.layers = Object.create(null);
+        this.clips = Object.create(null);
         this.onTick = new Event();
         this.onLayerClipActive = new Event();
         this.onLayerClipState = new Event();
+        this.clipByID = new Map();
+        this.layerByID = new Map();
+        this.layerClipByID = new Map();
+        this.trackByID = new Map();
         this.hasLayers = new Observable(false);
-        this.layers = [];
+        this._layers = [];
         this._entityPaths = new Map();
         this._defaultValues = new Map();
         /** @internal */
@@ -24,14 +31,14 @@ export class Animation {
             byLayer: {},
             byLayerClip: {},
         };
-        for (const layer of this.layers) {
+        for (const layer of this._layers) {
             layer._serialize(state);
         }
         this._spotlightLayer?._serialize(state);
         return state;
     }
     restoreState(state) {
-        for (const layer of this.layers) {
+        for (const layer of this._layers) {
             layer._restore(state);
         }
         this._spotlightLayer?._restore(state);
@@ -42,31 +49,51 @@ export class Animation {
         this.onLayerClipState.clearListeners();
     }
     addLayer(l) {
-        this.layers.push(l);
+        this._layers.push(l);
         if (!this.hasLayers.value)
             this.hasLayers.value = true;
+        if (l.scriptName)
+            this.layers[l.scriptName] = l;
+        if (l.id)
+            this.layerByID.set(l.id, l);
     }
     insertLayer(l, indx) {
-        this.layers.splice(indx, 0, l);
+        this._layers.splice(indx, 0, l);
         if (!this.hasLayers.value)
             this.hasLayers.value = true;
+        if (l.scriptName)
+            this.layers[l.scriptName] = l;
+        if (l.id)
+            this.layerByID.set(l.id, l);
     }
     removeLayer(l) {
-        const indx = this.layers.indexOf(l);
+        const indx = this._layers.indexOf(l);
         if (indx >= 0)
-            this.layers.splice(indx, 1);
-        const hasLayers = this.layers.length > 0 || this._spotlightLayer !== undefined;
+            this._layers.splice(indx, 1);
+        const hasLayers = this._layers.length > 0 || this._spotlightLayer !== undefined;
         if (this.hasLayers.value !== hasLayers)
             this.hasLayers.value = hasLayers;
+        if (l.scriptName)
+            delete this.layers[l.scriptName];
+        if (l.id)
+            this.layerByID.delete(l.id);
+    }
+    initialize() {
+        if (this._initialize === true)
+            return;
+        this._initialize = true;
+        this.evaluateTouchedPaths(Object.keys(this._entityPaths));
     }
     tick() {
+        if (!this._initialize)
+            return;
         const t = this.timeSource?.() ?? performance.now();
         const touchedPaths = [];
         if (this._spotlightLayer) {
             this._spotlightLayer.tick(t, touchedPaths);
         }
         else {
-            for (const layer of this.layers) {
+            for (const layer of this._layers) {
                 layer.tick(t, touchedPaths);
             }
         }
@@ -77,6 +104,8 @@ export class Animation {
         this._entityPaths.set(path, { entity, pathParts });
     }
     evaluateTouchedPaths(paths, t) {
+        if (!this._initialize)
+            return;
         t = t ?? this.timeSource?.() ?? performance.now();
         const unique = new Set([...paths]);
         for (const entry of unique.values()) {
@@ -94,13 +123,13 @@ export class Animation {
         if (this._spotlightLayer)
             touchedPaths.push(...this._spotlightLayer.influencedPaths.values());
         this._spotlightLayer = l;
-        for (const layer of this.layers) {
+        for (const layer of this._layers) {
             touchedPaths.push(...layer.influencedPaths.values());
             if (l)
                 layer.pause();
         }
         this.evaluateTouchedPaths(touchedPaths);
-        const hasLayers = this.layers.length > 0 || this._spotlightLayer !== undefined;
+        const hasLayers = this._layers.length > 0 || this._spotlightLayer !== undefined;
         if (this.hasLayers.value !== hasLayers)
             this.hasLayers.value = hasLayers;
     }
@@ -148,7 +177,7 @@ export class Animation {
                 val = this._spotlightLayer.computePathProperty(t, p, val);
         }
         else {
-            for (const layer of this.layers) {
+            for (const layer of this._layers) {
                 if (!layer.influencedPaths.has(p))
                     continue;
                 val = layer.computePathProperty(t, p, val);

package/lib/animation/bezier.d.ts

@@ -1,4 +1,4 @@
-import { Bezier as BezierData, predefinedCurve } from "../animation";
+import { Bezier as BezierData, predefinedCurve } from "../data";
 export type Easing = keyof typeof predefinedCurve | null | Bezier;
 export declare class Bezier {
     private _curves;

package/lib/animation/bezier.js

@@ -1,4 +1,4 @@
-import { predefinedCurve } from "../animation";
+import { predefinedCurve } from "../data";
 function BezierFactory(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
     function sampleCurveX(t) {
         return (Math.pow(1 - t, 3) * p0x +

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

@@ -1,18 +1,19 @@
-import * as Data from '../../animation';
+import * as Data from '../../data';
 import { Observable } from '../../observable';
 import { Animation } from '../animation';
 import { Track } from '../tracks/track';
 export declare class Clip {
     animation: Animation;
     length: number;
-    id?: string;
+    readonly scriptName?: string | undefined;
+    readonly id?: string | undefined;
     influencedPathsDirty: Observable<boolean, never>;
-    defaultFadeParameters?: Data.FadeParameters;
+    defaultFadeParameters?: Partial<Data.FadeParameters>;
     private _influencedPaths;
     private _tracksByPath;
     private _tracksByPathDirty;
     private _tracks;
-    constructor(animation: Animation, length: number);
+    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;
     clearTracks(): void;
@@ -20,7 +21,7 @@ export declare class Clip {
     get tracksByPath(): Map<string, Track[]>;
     get influencedPaths(): string[];
     fadePropertiesByPath(props: {
-        [id: string]: Data.FadeParameters;
+        [id: string]: Partial<Data.FadeParameters>;
     }): void;
     resolveClipTime(t: number, t0: number, s0: number, rate: number, t1?: number): number;
     streamPlay(speed?: number): void;

package/lib/animation/clips/clip.js

@@ -2,9 +2,11 @@ import { Observable } from '../../observable';
 import { ClipTrack } from '../tracks/cliptrack';
 import { PropertyTrack } from '../tracks/propertytrack';
 export class Clip {
-    constructor(animation, length) {
+    constructor(animation, length, scriptName, id) {
         this.animation = animation;
         this.length = length;
+        this.scriptName = scriptName;
+        this.id = id;
         this.influencedPathsDirty = new Observable(false);
         this._influencedPaths = [];
         this._tracksByPath = new Map();
@@ -16,6 +18,8 @@ export class Clip {
                 this._tracksByPathDirty = true;
             }
         };
+        if (scriptName)
+            this.animation.clips[scriptName] = this;
     }
     computePathProperty(t, p, valueBefore, parentWeight) {
         const tracks = this.tracksByPath.get(p);
@@ -72,16 +76,13 @@ export class Clip {
         if (this.defaultFadeParameters) {
             // Replace any existing fade properties with our defaults
             for (const id in props) {
-                props[id] = { ...this.defaultFadeParameters };
+                props[id] = { ...props[id], ...this.defaultFadeParameters };
             }
         }
         for (const track of this._tracks) {
             if (track instanceof PropertyTrack) {
                 if (track.fadeParameters || this.defaultFadeParameters) {
                     const params = {
-                        time: 0,
-                        easing: null,
-                        pin: 0,
                         ...this.defaultFadeParameters,
                         ...track.fadeParameters,
                     };

package/lib/animation/layer.d.ts

@@ -1,17 +1,22 @@
-import * as Data from '../animation';
+import * as Data from '../data';
 import { Observable } from '../observable';
 import { Animation } from './animation';
 import { AnimationState } from './animationstate';
 import { LayerClip, LayerClipPlayOptions } from './layerclip';
 export declare class Layer {
     readonly animation: Animation;
-    id?: string;
+    readonly scriptName?: string | undefined;
+    readonly id?: string | undefined;
+    clips: {
+        [id: string]: LayerClip;
+    };
+    defaultFadeParameters?: Data.FadeParameters;
     influencedPathsDirty: Observable<boolean, never>;
     private _influencedPaths;
     private _active;
     private _queue;
     private _layerClips;
-    constructor(animation: Animation);
+    constructor(animation: Animation, scriptName?: string | undefined, id?: string | undefined);
     computePathProperty(t: number, p: string, valueBefore: any): any;
     tick(t: number, touchedPaths: string[]): void;
     pause(): void;
@@ -20,6 +25,7 @@ export declare class Layer {
     queue(layerClip: LayerClip | null, playOptions?: LayerClipPlayOptions): QueueEntry;
     get active(): LayerClip | null | undefined;
     set active(layerClip: LayerClip | null | undefined);
+    setActive(layerClip: LayerClip | null, playOptions?: LayerClipPlayOptions): void;
     /** @internal */
     _activateLayerClip(layerClip: LayerClip | null | undefined, playOptions?: LayerClipPlayOptions): void;
     /** @internal */
@@ -35,7 +41,7 @@ export interface QueueEntry {
     layerClip: LayerClip | null;
     playOptions?: LayerClipPlayOptions;
     fadeByPath: {
-        [id: string]: Data.FadeParameters;
+        [id: string]: Partial<Data.FadeParameters>;
     };
     fadeTime: number;
     startTime?: number;

package/lib/animation/layer.js

@@ -4,8 +4,11 @@ import { computeEasing } from './bezier';
 import { interpolate } from './interpolate';
 import { StreamState } from './stream';
 export class Layer {
-    constructor(animation) {
+    constructor(animation, scriptName, id) {
         this.animation = animation;
+        this.scriptName = scriptName;
+        this.id = id;
+        this.clips = Object.create(null);
         this.influencedPathsDirty = new Observable(false);
         this._influencedPaths = new Set();
         this._active = null;
@@ -22,7 +25,7 @@ export class Layer {
                 if (ct >= entry.fadeTime)
                     fadeValue = clipValue;
                 else
-                    fadeValue = computeFade(entry.fadeByPath[p], entry.playOptions?.fade, ct, entry.fadeTime, fadeValue, clipValue);
+                    fadeValue = computeFade(this.defaultFadeParameters, entry.fadeByPath[p], entry.playOptions?.fade, ct, entry.fadeTime, fadeValue, clipValue);
             }
             else {
                 fadeValue = clipValue;
@@ -59,6 +62,8 @@ export class Layer {
     /** @internal */
     _registerLayerClip(layerClip) {
         this._layerClips.push(layerClip);
+        if (layerClip.scriptName)
+            this.clips[layerClip.scriptName] = layerClip;
         layerClip.clip.influencedPathsDirty.addListener(v => {
             if (v)
                 this.influencedPathsDirty.value = true;
@@ -66,20 +71,15 @@ export class Layer {
         this.influencedPathsDirty.value = true;
     }
     queue(layerClip, playOptions) {
-        const previous = this._queue[this._queue.length - 1];
         const fadeByPath = {};
-        previous?.layerClip?.clip?.fadePropertiesByPath(fadeByPath);
-        for (const [path, params] of Object.entries(fadeByPath)) {
-            fadeByPath[path] = {
-                ...params,
-                reverse: !(params.reverse ?? false),
-            };
-        }
         layerClip?.clip?.fadePropertiesByPath(fadeByPath);
         let fadeTime = playOptions?.fade?.time ?? 0;
         for (const params of Object.values(fadeByPath)) {
-            fadeTime = Math.max(fadeTime, params.time);
+            if (params.time !== undefined)
+                fadeTime = Math.max(fadeTime, params.time);
         }
+        if (this.defaultFadeParameters)
+            fadeTime = Math.max(fadeTime, this.defaultFadeParameters.time);
         const ret = {
             layerClip,
             fadeTime,
@@ -96,6 +96,10 @@ export class Layer {
         this._activateLayerClip(layerClip);
         this._evaulate();
     }
+    setActive(layerClip, playOptions) {
+        this._activateLayerClip(layerClip, playOptions);
+        this._evaulate();
+    }
     /** @internal */
     _activateLayerClip(layerClip, playOptions) {
         if (layerClip === undefined) {
@@ -188,11 +192,11 @@ export class Layer {
         return this._influencedPaths;
     }
 }
-function computeFade(params, override, t, fadeTime, before, after) {
+function computeFade(defaults, params, override, t, fadeTime, before, after) {
     // TODO further implementation
-    const paramTime = override?.time ?? params?.time ?? 0;
-    let paramPin = override?.pin ?? params?.pin ?? 0;
-    const reverse = override?.reverse ?? params?.reverse ?? false;
+    const paramTime = override?.time ?? params?.time ?? defaults?.time ?? 0;
+    let paramPin = override?.pin ?? params?.pin ?? defaults?.pin ?? 0;
+    const reverse = override?.reverse ?? params?.reverse ?? defaults?.reverse ?? false;
     if (reverse)
         paramPin = 1 - paramPin;
     const emptyTime = fadeTime - paramTime;
@@ -204,7 +208,7 @@ function computeFade(params, override, t, fadeTime, before, after) {
     let prop = (t - startTime) / paramTime;
     if (reverse)
         prop = 1 - prop;
-    prop = computeEasing(prop, override?.easing ?? params?.easing);
+    prop = computeEasing(prop, override?.easing ?? params?.easing ?? defaults?.easing);
     if (reverse)
         prop = 1 - prop;
     return interpolate(before, after, prop);

package/lib/animation/layerclip.d.ts

@@ -1,4 +1,4 @@
-import { FadeParameters } from '../animation';
+import { FadeParameters } from '../data';
 import { Animation } from './animation';
 import { AnimationState } from './animationstate';
 import { Clip } from './clips/clip';
@@ -7,7 +7,8 @@ import { PlayOptions, Stream, StreamState } from './stream';
 export declare class LayerClip implements Stream {
     readonly layer: Layer;
     readonly clip: Clip;
-    id?: string;
+    readonly scriptName?: string | undefined;
+    readonly id?: string | undefined;
     defaultLoop: boolean;
     defaultPlaySpeed: number;
     timeSource: (() => number) | undefined;
@@ -20,7 +21,7 @@ export declare class LayerClip implements Stream {
     private _lastClipTime;
     private _stopped;
     state: StreamState;
-    constructor(layer: Layer, clip: Clip);
+    constructor(layer: Layer, clip: Clip, scriptName?: string | undefined, id?: string | undefined);
     private _clipDirty;
     tick(touchedPaths: string[], force?: boolean): void;
     computePathProperty(p: string, valueBefore: any): any;

package/lib/animation/layerclip.js

@@ -1,9 +1,11 @@
 import { AnimationEvents } from './animation';
 import { StreamState } from './stream';
 export class LayerClip {
-    constructor(layer, clip) {
+    constructor(layer, clip, scriptName, id) {
         this.layer = layer;
         this.clip = clip;
+        this.scriptName = scriptName;
+        this.id = id;
         this.defaultLoop = false;
         this.defaultPlaySpeed = 1;
         this._t0 = 0;
@@ -21,6 +23,8 @@ export class LayerClip {
         this._t1 = clip.length;
         layer._registerLayerClip(this);
         this.clip.influencedPathsDirty.addListener(this._clipDirty);
+        if (id)
+            layer.animation.layerClipByID.set(id, this);
     }
     tick(touchedPaths, force) {
         const t = this._getTime();

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

@@ -1,4 +1,4 @@
-import { Keyframe, ClipTrackEntity } from '../../animation';
+import { Keyframe, ClipTrackEntity } from '../../data';
 import { Clip } from '../clips/clip';
 import { Track } from './track';
 export declare class ClipTrack extends Track {
@@ -9,7 +9,7 @@ export declare class ClipTrack extends Track {
     private _entities;
     private _entitiesById;
     private _entitiesDirty;
-    constructor(clip: Clip);
+    constructor(clip: Clip, id?: string);
     get influencedPaths(): string[];
     addWeight(k: Keyframe): void;
     setWeightsById(weights: {

package/lib/animation/tracks/cliptrack.js

@@ -1,7 +1,7 @@
 import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
 export class ClipTrack extends Track {
-    constructor(clip) {
-        super();
+    constructor(clip, id) {
+        super(clip.animation, id);
         this.clip = clip;
         this._weights = [];
         this._weightsById = {};

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

@@ -1,4 +1,4 @@
-import { FadeParameters, Keyframe, BlendType } from '../../animation';
+import { FadeParameters, Keyframe, BlendType } from '../../data';
 import { Animation } from '../animation';
 import { Track } from './track';
 export declare class PropertyTrack extends Track {
@@ -15,7 +15,7 @@ export declare class PropertyTrack extends Track {
     fadeParameters?: Partial<FadeParameters>;
     blend: BlendType;
     influencedPaths: string[];
-    constructor(anim: Animation, _entityID: string, _entity: any, property: string | number | (string | number)[]);
+    constructor(anim: Animation, _entityID: string, _entity: any, property: string | number | (string | number)[], id?: string);
     addKeyframe(k: Keyframe): void;
     getKeyframeById(id: string): Keyframe | undefined;
     setKeyframesById(keyframes: {

package/lib/animation/tracks/propertytrack.js

@@ -1,8 +1,8 @@
 import { addBlend, interpolate } from '../interpolate';
 import { resolveKeyframes, resolveKeyframeValue, Track } from './track';
 export class PropertyTrack extends Track {
-    constructor(anim, _entityID, _entity, property) {
-        super();
+    constructor(anim, _entityID, _entity, property, id) {
+        super(anim, id);
         this._entityID = _entityID;
         this._entity = _entity;
         this._keyframes = [];

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

@@ -1,8 +1,10 @@
-import { Keyframe } from '../../animation';
+import { Keyframe } from '../../data';
 import { Observable } from '../../observable';
+import { Animation } from '../animation';
 export declare abstract class Track {
+    readonly id?: string | undefined;
     influencedPathsDirty: Observable<boolean, never>;
-    constructor();
+    constructor(anim: Animation, id?: string | undefined);
     abstract get influencedPaths(): string[];
     abstract computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
 }

package/lib/animation/tracks/track.js

@@ -2,8 +2,11 @@ import { Observable } from '../../observable';
 import { computeEasing } from '../bezier';
 import { interpolate } from '../interpolate';
 export class Track {
-    constructor() {
+    constructor(anim, id) {
+        this.id = id;
         this.influencedPathsDirty = new Observable(false);
+        if (id)
+            anim.trackByID.set(id, this);
     }
 }
 export function resolveKeyframeValue(t, before, after) {

package/lib/behaviors/ToggleLayerClips.d.ts

@@ -0,0 +1,100 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export declare class ToggleLayerClips extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues layerclipids
+     */
+    layerClipA: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues layerids
+     */
+    layerOffA: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues layerclipids
+     */
+    layerClipB: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues layerids
+     */
+    layerOffB: string | undefined;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault false
+     */
+    loop?: boolean;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault 1
+     */
+    speed?: number;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault false
+     */
+    queue: boolean;
+    /**
+     * Seek the clip to the start before playing
+     *
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zdefault false
+     */
+    fromStart: boolean;
+    /**
+     * @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;
+    isA: boolean;
+    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/ToggleLayerClips.js

@@ -0,0 +1,76 @@
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export class ToggleLayerClips extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+        /**
+         * @zprop
+         * @zgroup Play Settings
+         * @zgrouppriority 20
+         * @zdefault false
+         */
+        this.queue = false;
+        /**
+         * Seek the clip to the start before playing
+         *
+         * @zprop
+         * @zgroup Play Settings
+         * @zgrouppriority 20
+         * @zdefault false
+         */
+        this.fromStart = false;
+        this.isA = true;
+    }
+    perform() {
+        this.isA = !this.isA;
+        const opts = {
+            loop: this.loop,
+            speed: this.speed,
+            fade: {
+                time: this.fadeTime,
+                pin: this.pin,
+                easing: this.easing
+            }
+        };
+        const layerID = this.isA ? this.layerOffA : this.layerOffB;
+        const layerClipID = this.isA ? this.layerClipA : this.layerClipB;
+        if (layerID) {
+            const layer = this.zcomponent.animation.layerByID.get(layerID);
+            if (!layer)
+                return;
+            if (this.queue ?? false)
+                layer.queue(null, opts);
+            else
+                layer.setActive(null, opts);
+            return;
+        }
+        if (layerClipID) {
+            const layerclip = this.zcomponent.animation.layerClipByID.get(layerClipID);
+            if (!layerclip)
+                return;
+            if (this.fromStart ?? false)
+                layerclip.seek(0, { dontActivateLayer: true });
+            if (this.queue ?? false)
+                layerclip.queue(opts);
+            else
+                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(ToggleLayerClips);

package/lib/{animation.d.ts → data/animation.d.ts}

@@ -21,6 +21,7 @@ export interface FadeParameters {
 export interface Layer {
     order: string;
     name: string;
+    scriptName?: string;
     id: string;
     defaultFadeParameters?: FadeParameters;
     clips: ByID<LayerClip>;
@@ -34,6 +35,7 @@ export interface LayerClip {
     loop?: boolean;
     reverse?: boolean;
     playbackSpeed?: number;
+    scriptName?: string;
 }
 export type ActiveLayerClips = ByID<string | undefined>;
 export declare enum ClipType {
@@ -49,8 +51,9 @@ export interface Clip {
     tracks: ByID<Track>;
     length: number;
     lengthType: ClipLengthType;
-    defaultFadeParameters?: FadeParameters;
+    defaultFadeParameters?: Partial<FadeParameters>;
     timeSourceTrack?: string;
+    scriptName?: string;
 }
 export interface Keyframe {
     id: string;
@@ -114,7 +117,7 @@ export interface StreamTrack extends BaseTrack {
     data: ByID<StreamTrackEntity>;
     weight: ByID<Keyframe>;
 }
-export interface StreamTrackEntity {
+export interface StreamTrackEntity extends BaseTrack {
     t0: number;
     t1: number;
     s0: number;

package/lib/{data.d.ts → data/change.d.ts}

@@ -1,5 +1,5 @@
-import { BehaviorByID, BehaviorData, ComputedHierarchy, EntityPropOverride, NodeByID, NodeData, ZComponentData } from './interfaces';
-import { Prop } from './types';
+import { BehaviorByID, BehaviorData, ComputedHierarchy, EntityPropOverride, NodeByID, NodeData, ZComponentData } from './core';
+import { Prop } from '../types';
 export declare function computeNodeHierarchy(nodes: NodeByID): ComputedHierarchy;
 export declare function computeBehaviorHierarchy(behaviors: BehaviorByID): ComputedHierarchy;
 export declare function addNode(zcomp: ZComponentData, info: NodeDataCombined): void;
@@ -41,3 +41,4 @@ export interface NodeDataCombined extends EntityDataCombined {
 export interface BehaviorDataCombined extends EntityDataCombined {
     data: BehaviorData;
 }
+export declare function getUniqueLabel(zcomp: ZComponentData, label: string): string;

package/lib/{data.js → data/change.js}

@@ -1,5 +1,5 @@
-import { generateKeyBetween, generateNKeysBetween } from './fractionalindexing';
-import { EntityPropOverrideType } from './interfaces';
+import { generateKeyBetween, generateNKeysBetween } from '../fractionalindexing';
+import { EntityPropOverrideType } from './core';
 // Simple memoizing of computed hierarchy
 const computedHierarchies = new Map();
 const computedBehaviors = new Map();
@@ -350,6 +350,16 @@ export function deleteEntity(zcomp, id) {
             delete zcomp.entityPropOverrides[overrideID];
         }
     }
+    if (zcomp.animation) {
+        for (const clip of Object.values(zcomp.animation.clips)) {
+            if (!clip)
+                continue;
+            for (const track of Object.values(clip.tracks)) {
+                if (track?.entityID === id)
+                    delete clip.tracks[track.id];
+            }
+        }
+    }
 }
 export function forEachNodeAncestor(zcomp, id, fn) {
     const node = zcomp.nodes[id];
@@ -358,3 +368,14 @@ export function forEachNodeAncestor(zcomp, id, fn) {
     fn(node.parent.id);
     forEachNodeAncestor(zcomp, node.parent.id, fn);
 }
+export function getUniqueLabel(zcomp, label) {
+    const existingLabels = zcomp.entitiesByLabel ?? {};
+    for (let i = 1; i < 10000; i++) {
+        const testName = i === 1 ? label : `${label} ${i.toString()}`;
+        if (!Object.prototype.hasOwnProperty.call(existingLabels, testName)) {
+            label = testName;
+            break;
+        }
+    }
+    return label;
+}

package/lib/{interfaces.d.ts → data/core.d.ts}

@@ -1,4 +1,4 @@
-import { Prop } from './types';
+import { Prop } from '../types';
 import { Animation } from './animation';
 export interface ID {
     id: string;

package/lib/data/index.d.ts

@@ -0,0 +1,3 @@
+export * from './core';
+export * from './animation';
+export * from './change';

package/lib/data/index.js

@@ -0,0 +1,3 @@
+export * from './core';
+export * from './animation';
+export * from './change';

package/lib/inflate.d.ts

@@ -1,5 +1,5 @@
 import { Track } from './animation/tracks/track';
-import * as Data from './animation';
+import * as Data from './data';
 import { ZComponent } from './zcomponent';
 import { Clip } from './animation/clips/clip';
 import { Animation } from './animation/animation';
@@ -10,4 +10,5 @@ export declare function createClipFromData(zcomp: ZComponent, anim: Animation, d
 export declare function updateClipFromData(zcomp: ZComponent, clip: Clip, data: Data.Clip): void;
 export declare function createLayerClipFromData(zcomp: ZComponent, layer: Layer, data: Data.LayerClip): LayerClip | undefined;
 export declare function createLayerFromData(zcomp: ZComponent, anim: Animation, data: Data.Layer): Layer | undefined;
-export declare function populateAnimationFromData(zcomp: ZComponent, anim: Animation, data: Data.Animation): void;
+export declare function populateAnimationTracksFromData(zcomp: ZComponent, anim: Animation, data: Data.Animation): void;
+export declare function populateAnimationStructureFromData(zcomp: ZComponent, anim: Animation, data: Data.Animation): void;

package/lib/inflate.js

@@ -1,4 +1,4 @@
-import * as Data from './animation';
+import * as Data from './data';
 import { PropertyTrack } from './animation/tracks/propertytrack';
 import { Clip } from './animation/clips/clip';
 import { LayerClip } from './animation/layerclip';
@@ -10,22 +10,20 @@ export function createTrackFromData(zcomp, anim, data) {
             const entity = zcomp.entityByID.get(data.entityID);
             if (!entity)
                 return;
-            const ret = new PropertyTrack(anim, data.entityID, entity, data.property);
+            const ret = new PropertyTrack(anim, data.entityID, entity, data.property, data.id);
             ret.setKeyframesById(data.keyframes);
             ret.setWeightsById(data.weight);
             ret.fadeParameters = data.fadeParameters;
             ret.blend = data.blend ?? 'overlay';
-            zcomp.animation.trackByID.set(data.id, ret);
             return ret;
         }
         case Data.TrackType.Clip: {
             const clip = zcomp.animation.clipByID.get(data.entityID);
             if (!clip)
                 return;
-            const ret = new ClipTrack(clip);
+            const ret = new ClipTrack(clip, data.id);
             ret.setBlocksById(data.data);
             ret.setWeightsById(data.weight);
-            zcomp.animation.trackByID.set(data.id, ret);
             return ret;
         }
     }
@@ -65,17 +63,9 @@ export function createClipFromData(zcomp, anim, data) {
             }
         }
     }
-    const ret = new Clip(anim, length);
+    const ret = new Clip(anim, length, data.scriptName, data.id);
     ret.defaultFadeParameters = data.defaultFadeParameters;
-    for (const track of Object.values(data.tracks)) {
-        if (!track)
-            continue;
-        const instance = createTrackFromData(zcomp, anim, track);
-        if (instance)
-            ret.addTrack(instance);
-    }
     zcomp.animation.clipByID.set(data.id, ret);
-    ret.id = data.id;
     return ret;
 }
 export function updateClipFromData(zcomp, clip, data) {
@@ -94,19 +84,17 @@ export function createLayerClipFromData(zcomp, layer, data) {
     const clip = zcomp.animation.clipByID.get(data.clipId);
     if (!clip)
         return;
-    const ret = new LayerClip(layer, clip);
-    ret.id = data.id;
+    const ret = new LayerClip(layer, clip, data.scriptName, data.id);
     ret.defaultPlaySpeed = data.playbackSpeed ?? 1;
     if (data.reverse)
         ret.defaultPlaySpeed *= -1;
     ret.defaultLoop = data.loop ?? false;
-    zcomp.animation.layerClipByID.set(data.id, ret);
     return ret;
 }
 export function createLayerFromData(zcomp, anim, data) {
-    const ret = new Layer(anim);
+    const ret = new Layer(anim, data.scriptName, data.id);
     ret.active = undefined;
-    ret.id = data.id;
+    ret.defaultFadeParameters = data.defaultFadeParameters;
     if (data.defaultClip === null)
         ret.active = null;
     for (const layerClip of Object.values(data.clips)) {
@@ -118,10 +106,24 @@ export function createLayerFromData(zcomp, anim, data) {
         if (data.defaultClip === layerClip.id)
             ret.active = instance;
     }
-    zcomp.animation.layerByID.set(data.id, ret);
     return ret;
 }
-export function populateAnimationFromData(zcomp, anim, data) {
+export function populateAnimationTracksFromData(zcomp, anim, data) {
+    const clips = resolveClipDependencies(data.clips).reverse();
+    for (const clipData of Object.values(clips)) {
+        const clip = anim.clipByID.get(clipData.id);
+        if (!clip)
+            continue;
+        for (const track of Object.values(clipData.tracks)) {
+            if (!track)
+                continue;
+            const instance = createTrackFromData(zcomp, anim, track);
+            if (instance)
+                clip.addTrack(instance);
+        }
+    }
+}
+export function populateAnimationStructureFromData(zcomp, anim, data) {
     const clips = resolveClipDependencies(data.clips).reverse();
     for (const clip of Object.values(clips)) {
         if (!clip)

package/lib/selectors.d.ts

@@ -1,9 +1,9 @@
-import { EntityPropOverride, Import, NodeByID, ParsedImport, Props } from './interfaces';
-import { PropertyTrack } from './animation';
-import { Clip } from './animation';
+import { EntityPropOverride, Import, NodeByID, ParsedImport, Props } from './data/core';
+import * as Data from './data';
+import { Layer } from './animation';
 export declare function parseImport(i: Import): ParsedImport;
 export declare function constructImport(from: string, destFile: string, imp: string): string;
-export declare function getScriptName(n: string, requireUniqueIn: {
+export declare function getScriptName(n: string, requireUniqueIn: string[] | {
     [k: string]: any;
 }): string;
 export declare function isValidVariableName(n: string): boolean;
@@ -23,8 +23,8 @@ export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props,
     [id: string]: {
         [id: string]: boolean;
     };
-} | undefined, url: string) => string;
+} | undefined, url: string, layers: Data.ByID<Data.Layer>) => string;
 export declare function getSafeKeyName(n: string): string;
-export declare function propertyTracksByEntityID(clip: Clip): {
-    [id: string]: PropertyTrack[];
+export declare function propertyTracksByEntityID(clip: Data.Clip): {
+    [id: string]: Data.PropertyTrack[];
 };

package/lib/selectors.js

@@ -1,7 +1,7 @@
-import { EntityPropOverrideType } from './interfaces';
+import { EntityPropOverrideType } from './data/core';
 import * as path from 'path';
 import { outputForType } from './types';
-import { TrackType } from './animation';
+import * as Data from './data';
 export function parseImport(i) {
     if (typeof i !== 'string')
         return ['', ''];
@@ -85,6 +85,7 @@ const reservedWords = [
     'yield',
 ];
 export function getScriptName(n, requireUniqueIn) {
+    const existing = new Set(Array.isArray(requireUniqueIn) ? requireUniqueIn : Object.keys(requireUniqueIn));
     if (n === undefined || n.length === 0) {
         n = 'node';
     }
@@ -100,7 +101,7 @@ export function getScriptName(n, requireUniqueIn) {
     }
     let finalname = scriptname;
     let indx = 0;
-    while (requireUniqueIn[finalname]) {
+    while (existing.has(finalname)) {
         finalname = scriptname + indx;
         indx++;
     }
@@ -160,7 +161,7 @@ export function summaryForEntityPropOverrideDestination(o) {
     }
     return '?';
 }
-export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, url) => {
+export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, url, layers) => {
     const importMapping = new Map();
     let indx = 0;
     let importStrings = [];
@@ -178,7 +179,7 @@ export const typeDefinitionForComponent = (nodes, props, constructorProps, scrip
             }
         }
     }
-    return `import { ZComponent, ContextManager, Observable } from "@zcomponent/core";
+    return `import { ZComponent, ContextManager, Observable, Animation, Layer, LayerClip } from "@zcomponent/core";
 
 ${importStrings.join('\n')}
 
@@ -206,12 +207,25 @@ ${Object.entries(scriptNames ?? {}).map(entry => {
     }).join("\n")}
 	};
 
+	animation: ${typeForAnimation(layers)}
+
 ${Object.values(props).map(typeOutputForProp).join('\n\n')}
 }
 
 export default Comp;
 `;
 };
+function typeForAnimation(layers) {
+    const layersWithScriptNames = Object.values(layers).filter(l => l?.scriptName !== undefined);
+    return `Animation & { layers: {
+${Object.values(layersWithScriptNames).map(layer => {
+        const clipsWithScriptNames = Object.values(layer.clips).filter(lc => lc?.scriptName !== undefined);
+        return `\t\t${layer.scriptName ?? '""'}: Layer & { clips: {
+${Object.values(clipsWithScriptNames).map(lc => `\t\t\t${lc.scriptName ?? '""'}: LayerClip;`).join('\n')}
+		}};`;
+    }).join('\n')}
+	}};`;
+}
 function makeCommentSafe(c) {
     return c.replaceAll('*/', '');
 }
@@ -265,7 +279,7 @@ export function propertyTracksByEntityID(clip) {
     for (const track of Object.values(clip.tracks)) {
         if (!track)
             continue;
-        if (track.type !== TrackType.Property)
+        if (track.type !== Data.TrackType.Property)
             continue;
         const arr = ret[track.entityID] ?? [];
         arr.push(track);

package/lib/types.d.ts

@@ -1,4 +1,4 @@
-import { EntityPropOverride } from "./interfaces";
+import { EntityPropOverride } from "./data/core";
 export interface BaseType {
     comments?: string[];
     typeHint?: TypeHint;

package/lib/types.js

@@ -1,4 +1,4 @@
-import { EntityPropOverrideType } from "./interfaces";
+import { EntityPropOverrideType } from "./data/core";
 import { getSafeKeyName } from "./selectors";
 export var TypeName;
 (function (TypeName) {

package/lib/validators.d.ts

@@ -1,4 +1,4 @@
-import { Import, NodeData, ZComponentData } from './interfaces';
+import { Import, NodeData, ZComponentData } from './data/core';
 interface Issue {
     text: string;
 }

package/lib/zcomponent.d.ts

@@ -1,8 +1,8 @@
-import { Animation, Clip, LayerClip, Layer, Track } from './animation/index';
+import { Animation } from './animation/index';
 import { Component, ComponentChildren, ConstructorForComponent, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
 import { Entity } from './entity';
-import { ZComponentData } from './interfaces';
+import { ZComponentData } from './data/core';
 export interface ZComponentOptions {
     data: ZComponentData;
     importMapping: {
@@ -43,13 +43,7 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     private _constructedResolve;
     constructed: Promise<void>;
     isConstructed: boolean;
-    animationManager: Animation;
-    animation: {
-        clipByID: Map<string, Clip>;
-        layerClipByID: Map<string, LayerClip>;
-        layerByID: Map<string, Layer>;
-        trackByID: Map<string, Track>;
-    };
+    animation: Animation;
     private _nodesById;
     private _behaviorsToInitialize;
     private _constructorPropOverridesByEntityID;

package/lib/zcomponent.js

@@ -7,8 +7,8 @@ import { isDesignTime } from './contexts/environmentcontext';
 import { isStarted, started } from './contexts/loadcontext';
 import { TagContext } from './contexts/tagcontext';
 import { computeBehaviorHierarchy, computeNodeHierarchy } from './data';
-import { populateAnimationFromData, updateClipFromData } from './inflate';
-import { EntityPropOverrideType } from './interfaces';
+import { populateAnimationStructureFromData, populateAnimationTracksFromData, updateClipFromData } from './inflate';
+import { EntityPropOverrideType } from './data/core';
 import { Observable } from './observable';
 import { setCurrentZComponentConstruction } from './zcomponentconstruction';
 export class ZComponentContext extends Context {
@@ -30,28 +30,24 @@ export class ZComponent extends Component {
         this.nodeByLabel = new Map();
         this.constructed = new Promise(resolve => this._constructedResolve = resolve);
         this.isConstructed = false;
-        this.animationManager = new Animation();
-        this.animation = {
-            clipByID: new Map(),
-            layerClipByID: new Map(),
-            layerByID: new Map(),
-            trackByID: new Map,
-        };
+        this.animation = new Animation(false);
         this._nodesById = new Map();
         this._behaviorsToInitialize = [];
         this._constructorPropOverridesByEntityID = new Map();
         this._updateAnimationRegistrations = () => {
-            if (this.animationManager.hasLayers && isStarted(this.contextManager) && !this.disposed)
+            if (this.animation.hasLayers && isStarted(this.contextManager) && !this.disposed)
                 this.register(useOnBeforeRender(this.contextManager), this._animationTick);
             else
                 this.unregister(useOnBeforeRender(this.contextManager), this._animationTick);
         };
         this._animationTick = () => {
-            this.animationManager.tick();
+            this.animation.tick();
         };
         const contextManagerForChildren = contextManager.forkMultiple([ZComponentContext, { zcomponent: this }], [TagContext, {}])[0];
         this.id = this._opts.data.id;
         this._initializeConstructorPropOverrides();
+        if (this._opts.data.animation)
+            populateAnimationStructureFromData(this, this.animation, this._opts.data.animation);
         const rootConstructor = this._constructorForNode(this._opts.data.root);
         if (rootConstructor) {
             this.constructChildren([
@@ -62,11 +58,12 @@ export class ZComponent extends Component {
         this._initializeComponentProps();
         this._initializeOverrides();
         if (this._opts.data.animation)
-            populateAnimationFromData(this, this.animationManager, this._opts.data.animation);
+            populateAnimationTracksFromData(this, this.animation, this._opts.data.animation);
+        this.animation.initialize();
         this.isConstructed = true;
         this._constructedResolve();
         started(contextManager).then(this._updateAnimationRegistrations);
-        this.register(this.animationManager.hasLayers, this._updateAnimationRegistrations, { bindWhenDisabled: true });
+        this.register(this.animation.hasLayers, this._updateAnimationRegistrations, { bindWhenDisabled: true });
     }
     _constructorForNode(nodeId) {
         const node = this._opts.data.nodes[nodeId];
@@ -243,7 +240,7 @@ export class ZComponent extends Component {
             for (const prop of propSet.values()) {
                 try {
                     this._setEntityProp(entity, prop, this._opts.data.entityProps[entityID]?.[prop]);
-                    this.animationManager.clearCachedDefault(entityID, prop);
+                    this.animation.clearCachedDefault(entityID, prop);
                 }
                 catch (err) {
                     console.log('Warning - unable to set prop', entityID, prop);
@@ -366,7 +363,7 @@ export class ZComponent extends Component {
         return this._nodesById.get(id);
     }
     dispose() {
-        this.animationManager.dispose();
+        this.animation.dispose();
         for (const entity of this.entityByID.values()) {
             if (entity && typeof entity.dispose === 'function') {
                 try {

package/package.json

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