@zcomponent/core 1.12.0 → 1.14.0-beta

package/lib/animation/animation.d.ts

@@ -51,12 +51,12 @@ export declare class Animation {
     tick(): void;
     registerEntityPath(path: string, entity: any, pathParts: (string | number)[]): void;
     evaluateTouchedPaths(paths: string[], t?: number): void;
+    private _evaluateLayer;
     get spotlightLayer(): Layer | undefined;
     set spotlightLayer(l: Layer | undefined);
     clearCachedDefault(entityID: string, prop: string): void;
     private _emitPendingEvents;
     private _resolvePath;
-    private _evaluatePath;
     start(): void;
 }
 export interface EntityPath {

package/lib/animation/animation.js

@@ -1,5 +1,4 @@
 import { Observable } from '../observable';
-import { clone } from '../data';
 import { Event } from '../event';
 /** @internal */
 export var AnimationEvents;
@@ -109,11 +108,58 @@ export class Animation {
             return;
         t = t ?? this.timeSource?.() ?? performance.now();
         const unique = new Set([...paths]);
-        for (const entry of unique.values()) {
-            this._evaluatePath(t, entry);
+        const uniqueAsArray = unique.values();
+        const resolvedPaths = [...uniqueAsArray].map(entry => this._resolvePath(entry));
+        for (const entry of resolvedPaths) {
+            if (!entry)
+                continue;
+            let byEntity = this._defaultValues.get(entry[0]);
+            if (!byEntity) {
+                byEntity = new Map();
+                this._defaultValues.set(entry[0], byEntity);
+            }
+            let observable = byEntity.get(entry[1][0]);
+            if (!observable) {
+                let val = entry[0][entry[1][0]];
+                if (val instanceof Observable)
+                    val = val.value;
+                observable = new Observable(val);
+                byEntity.set(entry[1][0], observable);
+            }
+            entry[2] = observable;
+        }
+        // Reset our working values to default
+        for (const p of resolvedPaths) {
+            if (p?.[2])
+                p[2].value = undefined;
+        }
+        if (this._spotlightLayer)
+            this._evaluateLayer(t, this._spotlightLayer, resolvedPaths);
+        else {
+            for (const layer of this._layers)
+                this._evaluateLayer(t, layer, resolvedPaths);
+        }
+        for (const entry of resolvedPaths) {
+            if (!entry?.[2])
+                continue;
+            if (entry[0][entry[1][0]] instanceof Observable)
+                entry[0][entry[1][0]].value = entry[2].value;
+            else
+                entry[0][entry[1][0]] = entry[2].value;
         }
         this._emitPendingEvents();
     }
+    _evaluateLayer(t, layer, paths) {
+        for (const p of paths) {
+            if (!p?.[2])
+                continue;
+            if (!layer.influencedPaths.has(p[3]))
+                continue;
+            let val = getResolved(p[2], p[1]);
+            val = layer.computePathProperty(t, p[3], val);
+            setResolved(p[2], p[1], val);
+        }
+    }
     get spotlightLayer() {
         return this._spotlightLayer;
     }
@@ -153,38 +199,7 @@ export class Animation {
         const path = this._entityPaths.get(p);
         if (!path || path.pathParts.length === 0)
             return;
-        let parent = path.entity;
-        let currentKey = path.pathParts[0];
-        if (parent[currentKey] instanceof Observable) {
-            parent = parent[currentKey];
-            currentKey = 'value';
-        }
-        for (let i = 1; i < path.pathParts.length; i++) {
-            parent = parent[currentKey];
-            currentKey = path.pathParts[i];
-        }
-        return [parent, currentKey];
-    }
-    _evaluatePath(t, p) {
-        const resolved = this._resolvePath(p);
-        if (!resolved)
-            return;
-        if (!this._defaultValues.has(p)) {
-            this._defaultValues.set(p, clone(resolved[0][resolved[1]]));
-        }
-        let val = this._defaultValues.get(p);
-        if (this._spotlightLayer) {
-            if (this._spotlightLayer.influencedPaths.has(p))
-                val = this._spotlightLayer.computePathProperty(t, p, val);
-        }
-        else {
-            for (const layer of this._layers) {
-                if (!layer.influencedPaths.has(p))
-                    continue;
-                val = layer.computePathProperty(t, p, val);
-            }
-        }
-        resolved[0][resolved[1]] = val;
+        return [path.entity, path.pathParts, undefined, p];
     }
     start() {
         for (const layer of this._layers) {
@@ -195,3 +210,18 @@ export class Animation {
         }
     }
 }
+function getResolved(o, pathParts) {
+    let current = o.value;
+    for (let i = 1; i < pathParts.length; i++)
+        current = current[pathParts[i]];
+    return current;
+}
+function setResolved(o, pathParts, val) {
+    let target = o;
+    let key = 'value';
+    for (let i = 1; i < pathParts.length; i++) {
+        target = target[key];
+        key = pathParts[i];
+    }
+    target[key] = val;
+}

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

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

package/lib/animation/clips/clip.js

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

package/lib/animation/layer.js

@@ -45,7 +45,7 @@ export class Layer {
                 this._queue.splice(i, 1);
             }
             if (entry.layerClip && entry === this._active) {
-                if (next && (entry.layerClip.state === StreamState.Ended || next.fadeTime >= entry.layerClip.getRemainingTimeEstimate())) {
+                if (next && (entry.layerClip.state.value === StreamState.Ended || next.fadeTime >= entry.layerClip.getRemainingTimeEstimate())) {
                     next.startTime = t;
                     this._active = next;
                     this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipActive, args: [this._active.layerClip] });

package/lib/animation/layerclip.d.ts

@@ -1,4 +1,6 @@
 import { FadeParameters } from '../data';
+import { Event } from '../event';
+import { Observable } from '../observable';
 import { Animation } from './animation';
 import { AnimationState } from './animationstate';
 import { Clip } from './clips/clip';
@@ -16,6 +18,7 @@ export declare class LayerClip implements Stream {
     readonly animation: Animation;
     private _t0;
     private _pauseTime;
+    private _stallStartTime;
     private _t1;
     private _rate;
     private _loop;
@@ -23,17 +26,26 @@ export declare class LayerClip implements Stream {
     private _lastClipTime;
     private _lastLoop;
     private _stopped;
-    state: StreamState;
+    private _state;
+    state: Observable<StreamState, never>;
+    playing: Observable<boolean, never>;
+    stalled: Observable<boolean, never>;
+    onPlaying: Event<[LayerClip]>;
+    onPaused: Event<[LayerClip]>;
+    onEnded: Event<[LayerClip]>;
+    onLoop: Event<[LayerClip]>;
     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;
     getRemainingTimeEstimate(): number;
     private _getTime;
+    private _stateUpdate;
     queue(opts?: LayerClipPlayOptions): void;
     length(): number;
     play(opts?: LayerClipPlayOptions): void;
     pause(): void;
+    private _cancelStall;
     seek(ct: number, opts?: LayerClipSeekOptions): void;
     /** @internal */
     _serialize(state: AnimationState): void;
@@ -41,6 +53,7 @@ export declare class LayerClip implements Stream {
     _restore(state: AnimationState): void;
     get clipTime(): number;
     stop(): void;
+    isStalled(): boolean;
 }
 export interface LayerClipSeekOptions {
     fade?: FadeParameters | null;

package/lib/animation/layerclip.js

@@ -1,3 +1,5 @@
+import { Event } from '../event';
+import { Observable } from '../observable';
 import { AnimationEvents } from './animation';
 import { StreamState } from './stream';
 import { resolveClipTimeLoops } from './tracks/track';
@@ -16,52 +18,88 @@ export class LayerClip {
         this._rate = 1;
         this._loop = false;
         this._stopped = false;
-        this.state = StreamState.Paused;
+        this._state = StreamState.Paused;
+        this.state = new Observable(this._state);
+        this.playing = new Observable(false);
+        this.stalled = new Observable(false);
+        this.onPlaying = new Event();
+        this.onPaused = new Event();
+        this.onEnded = new Event();
+        this.onLoop = new Event();
         this._clipDirty = (v) => {
             if (v)
                 this._lastClipTime = undefined;
         };
+        this._stateUpdate = (s) => {
+            this.playing.value = s === StreamState.Playing;
+            switch (s) {
+                case StreamState.Ended:
+                    this.onEnded.emit(this);
+                    break;
+                case StreamState.Playing:
+                    this.onPlaying.emit(this);
+                    break;
+                case StreamState.Paused:
+                    this.onPaused.emit(this);
+                    break;
+            }
+        };
         this.animation = layer.animation;
         this._t1 = clip.length;
         layer._registerLayerClip(this);
         this.clip.influencedPathsDirty.addListener(this._clipDirty);
         if (id)
             layer.animation.layerClipByID.set(id, this);
+        this.state.addListener(this._stateUpdate);
     }
     tick(touchedPaths, force) {
         const t = this._getTime();
-        const t0 = this._t0 + (t - (this._pauseTime ?? t));
-        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        if (this._stallStartTime !== undefined) {
+            if (!this.clip.isStalled())
+                this._cancelStall();
+        }
+        else if (this._state === StreamState.Playing) {
+            if (this.clip.isStalled()) {
+                this._stallStartTime = t;
+                this.stalled.value = true;
+            }
+        }
+        const t0 = this._t0 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
         const ct = this.clip.resolveClipTime(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, t1);
         this._lastTickTime = ct;
         if (ct !== this._lastClipTime || force) {
             touchedPaths.push(...this.clip.influencedPaths);
         }
-        if (this.state === StreamState.Playing && t >= this._t1) {
+        if (this._state === StreamState.Playing && t >= this._t1) {
             this.pause();
-            this.state = StreamState.Ended;
+            this._state = StreamState.Ended;
+            this.state.value = this._state;
         }
         else {
             const [bt, loop] = resolveClipTimeLoops(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, this.clip.length, this._rate < 0, t1);
-            this.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, 1);
+            this.clip.streamTick(this._state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, this._stallStartTime !== undefined, 1);
+            const isNewLoop = this._lastLoop !== undefined && this._lastLoop !== loop;
             this._lastLoop = loop;
+            if (isNewLoop)
+                this.onLoop.emit(this);
         }
     }
     computePathProperty(p, valueBefore) {
         const t = this._getTime();
-        const t0 = this._t0 + (t - (this._pauseTime ?? t));
-        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        const t0 = this._t0 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
         const ct = this.clip.resolveClipTime(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, t1);
         this._lastClipTime = ct;
         return this.clip.computePathProperty(ct ?? 0, p, valueBefore);
     }
     getRemainingTimeEstimate() {
         const t = this._getTime();
-        const t1 = this._t1 + (t - (this._pauseTime ?? t));
+        const t1 = this._t1 + (t - (this._pauseTime ?? t)) + (t - (this._stallStartTime ?? t));
         return t1 - t;
     }
     _getTime() {
-        return this.timeSource?.() ?? this.animation.timeSource?.() ?? performance.now();
+        return this.timeSource?.() ?? this.animation?.timeSource?.() ?? performance.now();
     }
     queue(opts) {
         this.layer.queue(this, opts);
@@ -77,7 +115,7 @@ export class LayerClip {
         this._stopped = false;
         this._loop = opts?.loop ?? this.defaultLoop;
         const t = this._getTime();
-        if (this.state === StreamState.Ended) {
+        if (this._state === StreamState.Ended) {
             this._t0 = t;
         }
         else if (this._pauseTime !== undefined) {
@@ -100,7 +138,7 @@ export class LayerClip {
         }
         const t0 = this._t0 + (t - (this._pauseTime ?? t));
         const t1 = this._t1 + (t - (this._pauseTime ?? t));
-        this.state = StreamState.Playing;
+        this._state = StreamState.Playing;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
         this._lastClipTime = undefined;
         this._lastTickTime = undefined;
@@ -108,18 +146,34 @@ export class LayerClip {
             this.layer._activateLayerClip(this, opts);
             this.layer._evaulate();
         }
+        if (this.clip.isStalled()) {
+            this._stallStartTime = t;
+            this.stalled.value = true;
+        }
         const [bt, loop] = resolveClipTimeLoops(t, t0, this._rate >= 0 ? 0 : this.clip.length, this._rate, this.clip.length, this._rate < 0, t1);
-        this.clip.streamTick(this.state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, 1);
+        this.clip.streamTick(this._state, bt, this._rate, this.layer.active === this, this.layer.active, loop !== this._lastLoop, this._stallStartTime !== undefined, 1);
         this._lastLoop = loop;
+        this.state.value = this._state;
     }
     pause() {
         delete this._lastLoop;
-        if (this._pauseTime !== undefined || this.state !== StreamState.Playing)
+        if (this._pauseTime !== undefined || this._state !== StreamState.Playing)
             return;
-        this.state = StreamState.Paused;
+        this._state = StreamState.Paused;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
         this._pauseTime = this._getTime();
+        this._cancelStall();
         this.clip.streamPause(this.layer.active === this, this.layer.active);
+        this.state.value = this._state;
+    }
+    _cancelStall() {
+        if (this._stallStartTime === undefined)
+            return;
+        const t = this._getTime();
+        this._t0 += t - this._stallStartTime;
+        this._t1 += t - this._stallStartTime;
+        delete this._stallStartTime;
+        this.stalled.value = false;
     }
     seek(ct, opts) {
         const t = this._getTime();
@@ -143,6 +197,7 @@ export class LayerClip {
             this.layer._activateLayerClip(this, { fade: opts?.fade });
         }
         delete this._lastLoop;
+        delete this._stallStartTime;
         this.clip.streamSeek(ct, this._rate, this.layer.active === this, this.layer.active);
         this.layer._evaulate();
     }
@@ -161,7 +216,7 @@ export class LayerClip {
             rate: this._rate,
             loop: this._loop,
             stopped: this._stopped,
-            state: this.state,
+            state: this._state,
         };
         state.byLayerClip[this.id] = ret;
     }
@@ -179,7 +234,8 @@ export class LayerClip {
         this._rate = entry.rate;
         this._loop = entry.loop;
         this._stopped = entry.stopped;
-        this.state = entry.state;
+        this._state = entry.state;
+        this.state.value = this._state;
     }
     get clipTime() {
         return this._lastTickTime !== undefined ? this._lastTickTime : this.defaultPlaySpeed > 0 ? 0 : this.clip.length;
@@ -190,9 +246,14 @@ export class LayerClip {
         this._lastClipTime = undefined;
         this._lastTickTime = undefined;
         delete this._lastLoop;
+        delete this._stallStartTime;
         this._rate = 1;
         this.clip.streamTick(StreamState.Ended, this._t0, 1, this.layer.active === this, this.layer.active, true);
-        this.state = StreamState.Ended;
+        this._state = StreamState.Ended;
         this.animation._pendingEvents.push({ evt: AnimationEvents.onLayerClipState, args: [this] });
+        this.state.value = this._state;
+    }
+    isStalled() {
+        return this._stallStartTime !== undefined;
     }
 }

package/lib/animation/stream.d.ts

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

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

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

package/lib/animation/tracks/cliptrack.js

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

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

@@ -25,7 +25,7 @@ export declare class FunctionTrack extends Track {
     }): void;
     get sortedBlocks(): ResolvedFunctionTrackEntity[];
     streamSeek(t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined): void;
-    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, parentWeight?: number): void;
+    streamTick(clipState: StreamState, t: number, rate: number, isActive: boolean, active: LayerClip | null | undefined, force?: boolean, stalled?: boolean, parentWeight?: number): void;
     streamPause(isActive: boolean, active: LayerClip | null | undefined): void;
     private _resolveBlocksBetween;
     private _getBoundedT;

package/lib/animation/tracks/functiontrack.js

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

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

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

package/lib/animation/tracks/streamtrack.js

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

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

@@ -7,6 +7,7 @@ export declare abstract class Track {
     constructor(anim: Animation, id?: string | undefined);
     abstract get influencedPaths(): string[];
     abstract computePathProperty(t: number, p: string, valueBefore: any, parentWeight?: number): any;
+    isStalled(): boolean;
 }
 export declare function resolveKeyframeValue(t: number, before: Keyframe, after: Keyframe | undefined): any;
 export declare function resolveKeyframes(keyframes: Keyframe[], t: number): [before: Keyframe | undefined, after: Keyframe | undefined];

package/lib/animation/tracks/track.js

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

package/lib/inflate.js

@@ -152,7 +152,17 @@ export function updateClipFromData(zcomp, clip, data) {
     clip.defaultFadeParameters = resolvedFadeParameters(data.defaultFadeParameters, zcomp.animation.curves);
     clip.length = data.length;
     clip.clearTracks();
-    for (const track of Object.values(data.tracks)) {
+    const tracks = Object.values(data.tracks);
+    tracks.sort((atrack, btrack) => {
+        let a = atrack.order ?? 'A0';
+        let b = btrack.order ?? 'A0';
+        if (a === b) {
+            a = atrack.id;
+            b = btrack.id;
+        }
+        return a < b ? -1 : 1;
+    });
+    for (const track of Object.values(tracks)) {
         if (!track)
             continue;
         const instance = createTrackFromData(zcomp, clip.animation, track);
@@ -195,7 +205,17 @@ export function populateAnimationTracksFromData(zcomp, anim, data) {
         const clip = anim.clipByID.get(clipData.id);
         if (!clip)
             continue;
-        for (const track of Object.values(clipData.tracks)) {
+        const tracks = Object.values(clipData.tracks);
+        tracks.sort((atrack, btrack) => {
+            let a = atrack.order ?? 'A0';
+            let b = btrack.order ?? 'A0';
+            if (a === b) {
+                a = atrack.id;
+                b = btrack.id;
+            }
+            return a < b ? -1 : 1;
+        });
+        for (const track of Object.values(tracks)) {
             if (!track)
                 continue;
             const instance = createTrackFromData(zcomp, anim, track);

package/lib/observable.d.ts

@@ -33,10 +33,10 @@ type Resolved<T, M> = [T] extends [never] ? M : T;
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
 export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> extends Emitter<[Resolved<Type, TypeInternal>]> {
-    private _default;
     private _deep;
     private _proxies;
     private _value;
+    private _default;
     /**
      * Constructs a new Observable
      *

package/lib/observable.js

@@ -32,21 +32,12 @@ import { Emitter } from "./emitter";
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
 export class Observable extends Emitter {
-    constructor(_default, withHandler, _deep = true, callWithImmediately = false) {
+    constructor(def, withHandler, _deep = true, callWithImmediately = false) {
         super();
-        this._default = _default;
         this._deep = _deep;
         this._proxies = new WeakMap();
-        let initial = this._default;
-        if (Array.isArray(this._default) && this._deep) {
-            initial = this._default.slice();
-            this._default = this._default.slice();
-        }
-        else if (typeof this._default === 'object' && this._deep && this._default !== null && Object.getPrototypeOf(this._default) !== Object.prototype) {
-            initial = { ...this._default };
-            this._default = { ...this._default };
-        }
-        this._value = this._wrap(initial);
+        this._default = clone(def, _deep);
+        this._value = this._wrap(clone(def, _deep));
         if (withHandler)
             this.addListener(withHandler, 0, callWithImmediately);
     }
@@ -59,48 +50,43 @@ export class Observable extends Emitter {
         return this._value.proxy;
     }
     _wrap(v) {
-        if (!Array.isArray(v) || this._deep === false) {
-            if (typeof v !== 'object' ||
-                v === null ||
-                Object.getPrototypeOf(v) !== Object.prototype ||
-                this._deep === false ||
-                typeof v === 'function') {
-                return { proxy: v, target: v };
-            }
-        }
+        if (!shouldWrap(v) || !this._deep)
+            return { proxy: v, target: v };
         const that = this;
         return {
             target: v,
             proxy: new Proxy(v, {
                 get(target, p, receiver) {
                     const val = target[p];
+                    if (!shouldWrap(val))
+                        return val;
                     if (Array.isArray(target) && p === "splice") {
-                        return function (...args) { val.apply(target, args); that._emitValue(); };
-                    }
-                    if (!Array.isArray(val)) {
-                        if (typeof val !== 'object')
-                            return val;
-                        if (val === null)
-                            return val;
-                        if (Object.getPrototypeOf(val) !== Object.prototype)
-                            return val;
-                        if (typeof val === 'function')
-                            return val;
+                        return function (...args) {
+                            for (let i = 2; i < args.length; i++) {
+                                args[i] = clone(args[i], true);
+                            }
+                            val.apply(target, args);
+                            that._emitValue();
+                        };
                     }
                     if (val['__z_is_observable'])
                         return val;
                     const proxy = that._proxies.get(val) || that._wrap(val);
                     that._proxies.set(val, proxy);
-                    return proxy;
+                    return proxy.proxy;
                 },
                 set(target, p, val) {
-                    target[p] = val;
-                    that._emitValue();
+                    const changed = target[p] !== val;
+                    target[p] = clone(val, true);
+                    if (changed)
+                        that._emitValue();
                     return true;
                 },
                 deleteProperty(target, p) {
+                    const changed = target[p] !== undefined;
                     delete target[p];
-                    that._emitValue();
+                    if (changed)
+                        that._emitValue();
                     return true;
                 }
             })
@@ -108,13 +94,10 @@ export class Observable extends Emitter {
     }
     set value(v) {
         v = v ?? this._default;
-        if (Array.isArray(this._value.target) && Array.isArray(v)) {
-            this._value.target.splice(0, Infinity, ...v);
+        const changed = v !== this._value.proxy;
+        this._value = this._wrap(clone(v, this._deep));
+        if (changed)
             this._emitValue();
-            return;
-        }
-        this._value = this._wrap(Array.isArray(v) ? [...v] : v);
-        this._emitValue();
     }
     addListener(fn, priority = 0, callImmediately = true) {
         super.addListener(fn);
@@ -131,3 +114,48 @@ export class Observable extends Emitter {
         this._emit(this._value.proxy);
     }
 }
+function clone(a, deep) {
+    if (!deep) {
+        if (Array.isArray(a))
+            a.slice();
+        if (typeof a === 'object' && a !== null) {
+            const proto = Object.getPrototypeOf(a);
+            if (proto === Object.prototype || proto === null) {
+                return { ...a };
+            }
+        }
+        return a;
+    }
+    if (Array.isArray(a)) {
+        const ret = new Array(a.length);
+        for (let i = 0; i < ret.length; i++) {
+            ret[i] = clone(a[i], true);
+        }
+        return ret;
+    }
+    if (typeof a === 'object' && a !== null) {
+        const proto = Object.getPrototypeOf(a);
+        if (proto === Object.prototype || proto === null) {
+            const ret = Object.create(null);
+            for (const entry of Object.getOwnPropertyNames(a)) {
+                ret[entry] = clone(a[entry], true);
+            }
+            return ret;
+        }
+    }
+    return a;
+}
+function shouldWrap(a) {
+    if (Array.isArray(a))
+        return true;
+    if (a === null)
+        return false;
+    if (typeof a === 'object' && a !== null) {
+        const proto = Object.getPrototypeOf(a);
+        if (proto === Object.prototype || proto === null)
+            return true;
+    }
+    if (typeof a === 'function')
+        return false;
+    return false;
+}

package/package.json

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