@zcomponent/core 0.0.18 → 0.0.20

package/lib/inflate.js

@@ -0,0 +1,183 @@
+import * as Data from './animation';
+import { PropertyTrack } from './animation/tracks/propertytrack';
+import { Clip } from './animation/clips/clip';
+import { LayerClip } from './animation/layerclip';
+import { Layer } from './animation/layer';
+import { ClipTrack } from './animation/tracks/cliptrack';
+export function createTrackFromData(zcomp, anim, data) {
+    switch (data.type) {
+        case Data.TrackType.Property: {
+            const entity = zcomp.entityByID.get(data.entityID);
+            if (!entity)
+                return;
+            const ret = new PropertyTrack(anim, data.entityID, entity, data.property);
+            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);
+            ret.setBlocksById(data.data);
+            ret.setWeightsById(data.weight);
+            zcomp.animation.trackByID.set(data.id, ret);
+            return ret;
+        }
+    }
+    return undefined;
+}
+export function createClipFromData(zcomp, anim, data) {
+    let length = data.length;
+    if (length === undefined) {
+        length = 0;
+        for (const track of Object.values(data.tracks)) {
+            if (!track)
+                continue;
+            switch (track.type) {
+                case Data.TrackType.Property:
+                    for (const keyframe of Object.values(track.keyframes)) {
+                        if (!keyframe)
+                            continue;
+                        length = Math.max(length, keyframe.t);
+                    }
+                    break;
+                case Data.TrackType.Clip:
+                    for (const keyframe of Object.values(track.data)) {
+                        if (!keyframe)
+                            continue;
+                        length = Math.max(length, keyframe.t0);
+                        length = Math.max(length, keyframe.t1);
+                    }
+                    break;
+                case Data.TrackType.Stream:
+                    for (const keyframe of Object.values(track.data)) {
+                        if (!keyframe)
+                            continue;
+                        length = Math.max(length, keyframe.t0);
+                        length = Math.max(length, keyframe.t1);
+                    }
+                    break;
+            }
+        }
+    }
+    const ret = new Clip(anim, length);
+    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) {
+    clip.defaultFadeParameters = data.defaultFadeParameters;
+    clip.length = data.length;
+    clip.clearTracks();
+    for (const track of Object.values(data.tracks)) {
+        if (!track)
+            continue;
+        const instance = createTrackFromData(zcomp, clip.animation, track);
+        if (instance)
+            clip.addTrack(instance);
+    }
+}
+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;
+    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);
+    ret.active = undefined;
+    ret.id = data.id;
+    for (const layerClip of Object.values(data.clips)) {
+        if (!layerClip)
+            continue;
+        const instance = createLayerClipFromData(zcomp, ret, layerClip);
+        if (!instance)
+            continue;
+        if (data.defaultClip === layerClip.id)
+            ret.active = instance;
+    }
+    zcomp.animation.layerByID.set(data.id, ret);
+    return ret;
+}
+export function populateAnimationFromData(zcomp, anim, data) {
+    const clips = resolveClipDependencies(data.clips).reverse();
+    for (const clip of Object.values(clips)) {
+        if (!clip)
+            continue;
+        createClipFromData(zcomp, anim, clip);
+    }
+    const layers = Object.values(data.layers);
+    layers.sort((alayer, blayer) => {
+        let a = alayer.order ?? 'A0';
+        let b = blayer.order ?? 'A0';
+        if (a === b) {
+            a = alayer.id;
+            b = blayer.id;
+        }
+        return a < b ? -1 : 1;
+    });
+    for (const layer of Object.values(layers)) {
+        if (!layer)
+            continue;
+        const instance = createLayerFromData(zcomp, anim, layer);
+        if (!instance)
+            continue;
+        anim.addLayer(instance);
+    }
+}
+/** Depth-first topological sort of clips  */
+function resolveClipDependencies(clips) {
+    const ret = [];
+    const nodesWithoutPermanentMark = new Set(Object.values(clips));
+    const nodesWithTemporaryMark = new Set();
+    function visit(n) {
+        if (!nodesWithoutPermanentMark.has(n))
+            return true; // n has permanent mark
+        if (nodesWithTemporaryMark.has(n))
+            return false; // cycle
+        nodesWithTemporaryMark.add(n);
+        for (const track of Object.values(n.tracks)) {
+            if (track?.type !== Data.TrackType.Clip)
+                continue;
+            const clip = clips[track.entityID];
+            if (!clip)
+                continue;
+            if (!visit(clip))
+                return false;
+        }
+        nodesWithTemporaryMark.delete(n);
+        nodesWithoutPermanentMark.delete(n);
+        ret.splice(0, 0, n);
+        return true;
+    }
+    let iteration = 100000;
+    while (iteration > 0) {
+        const nextVal = nodesWithoutPermanentMark.values().next().value;
+        if (!nextVal)
+            break;
+        iteration--;
+        if (!visit(nextVal))
+            break;
+    }
+    return ret;
+}

package/lib/interfaces.d.ts

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

package/lib/selectors.d.ts

@@ -1,4 +1,6 @@
 import { EntityPropOverride, Import, NodeByID, ParsedImport, Props } from './interfaces';
+import { PropertyTrack } from './animation';
+import { Clip } 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: {
@@ -23,3 +25,6 @@ export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props,
     };
 } | undefined, url: string) => string;
 export declare function getSafeKeyName(n: string): string;
+export declare function propertyTracksByEntityID(clip: Clip): {
+    [id: string]: PropertyTrack[];
+};

package/lib/selectors.js

@@ -1,6 +1,7 @@
 import { EntityPropOverrideType } from './interfaces';
 import * as path from 'path';
 import { outputForType } from './types';
+import { TrackType } from './animation';
 export function parseImport(i) {
     if (typeof i !== 'string')
         return ['', ''];
@@ -259,3 +260,16 @@ export function getSafeKeyName(n) {
     }
     return scriptname;
 }
+export function propertyTracksByEntityID(clip) {
+    const ret = Object.create(null);
+    for (const track of Object.values(clip.tracks)) {
+        if (!track)
+            continue;
+        if (track.type !== TrackType.Property)
+            continue;
+        const arr = ret[track.entityID] ?? [];
+        arr.push(track);
+        ret[track.entityID] = arr;
+    }
+    return ret;
+}

package/lib/types.d.ts

@@ -4,6 +4,20 @@ export interface BaseType {
     typeHint?: TypeHint;
     isObservable?: boolean;
 }
+export declare enum TypeName {
+    String = "string",
+    Number = "number",
+    Boolean = "boolean",
+    Literal = "literal",
+    Array = "array",
+    Tuple = "tuple",
+    Union = "union",
+    Unknown = "unknown",
+    Enum = "enum",
+    Function = "function",
+    Event = "event",
+    Entity = "entity"
+}
 export interface StringPrimitiveType extends BaseType {
     name: 'string';
 }
@@ -50,13 +64,17 @@ export interface FunctionType extends BaseType {
 export interface EventType extends BaseType {
     name: 'event';
 }
-export type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveType | ArrayType | TupleType | UnknownType | EnumType | UnionType | LiteralType | FunctionType | EventType;
+export interface EntityType extends BaseType {
+    name: 'entity';
+}
+export type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveType | ArrayType | TupleType | UnknownType | EnumType | UnionType | LiteralType | FunctionType | EventType | EntityType;
 export declare enum TypeHint {
-    "proportion" = "proportion",
+    'proportion' = "proportion",
     'color-norm-rgb' = "color-norm-rgb",
     'color-unnorm-rgb' = "color-unnorm-rgb",
     'color-hex' = "color-hex",
-    'color-css' = "color-css"
+    'color-css' = "color-css",
+    'text-multiline' = "text-multiline"
 }
 export declare enum ValuesType {
     'files' = "files",
@@ -65,7 +83,10 @@ export declare enum ValuesType {
     'events' = "events",
     'parentNodes' = "parentNodes",
     'nodelabels' = "nodelabels",
-    'nodeids' = "nodeids"
+    'nodeids' = "nodeids",
+    'layerclipids' = "layerclipids",
+    'easings' = "easings",
+    'layerids' = "layerids"
 }
 export interface Values {
     type: ValuesType;

package/lib/types.js

@@ -1,5 +1,20 @@
 import { EntityPropOverrideType } from "./interfaces";
 import { getSafeKeyName } from "./selectors";
+export var TypeName;
+(function (TypeName) {
+    TypeName["String"] = "string";
+    TypeName["Number"] = "number";
+    TypeName["Boolean"] = "boolean";
+    TypeName["Literal"] = "literal";
+    TypeName["Array"] = "array";
+    TypeName["Tuple"] = "tuple";
+    TypeName["Union"] = "union";
+    TypeName["Unknown"] = "unknown";
+    TypeName["Enum"] = "enum";
+    TypeName["Function"] = "function";
+    TypeName["Event"] = "event";
+    TypeName["Entity"] = "entity";
+})(TypeName || (TypeName = {}));
 export var TypeHint;
 (function (TypeHint) {
     TypeHint["proportion"] = "proportion";
@@ -7,6 +22,7 @@ export var TypeHint;
     TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
     TypeHint["color-hex"] = "color-hex";
     TypeHint["color-css"] = "color-css";
+    TypeHint["text-multiline"] = "text-multiline";
 })(TypeHint || (TypeHint = {}));
 export var ValuesType;
 (function (ValuesType) {
@@ -17,6 +33,9 @@ export var ValuesType;
     ValuesType["parentNodes"] = "parentNodes";
     ValuesType["nodelabels"] = "nodelabels";
     ValuesType["nodeids"] = "nodeids";
+    ValuesType["layerclipids"] = "layerclipids";
+    ValuesType["easings"] = "easings";
+    ValuesType["layerids"] = "layerids";
 })(ValuesType || (ValuesType = {}));
 function valuesCompatible(l, r) {
     if (!l && !r)
@@ -123,7 +142,7 @@ export function mergeProps(a, b) {
         default: def,
         group: a.group === b.group ? a.group : undefined,
         groupPriority: Math.max(a.groupPriority ?? 0, b.groupPriority ?? 0),
-        values: mergeValues(a.values, b.values)
+        values: mergeValues(a.values, b.values),
     };
 }
 function mergeComments(a, b) {
@@ -224,7 +243,7 @@ export function mergeTypes(a, b) {
                 name: a.name,
                 typeHint,
                 children: a.children,
-                comments: mergeComments(a.comments ?? [], b.comments ?? [])
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
             };
         case 'function':
             return {
@@ -232,7 +251,7 @@ export function mergeTypes(a, b) {
                 typeHint,
                 args: a.args,
                 ret: a.ret,
-                comments: mergeComments(a.comments ?? [], b.comments ?? [])
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
             };
         case 'event':
             return {
@@ -250,9 +269,12 @@ export function isValidValueForType(def, t, allowUndefined) {
     if (allowUndefined && typeof def === 'undefined')
         return true;
     switch (t.name) {
-        case 'boolean': return typeof def === 'boolean';
-        case 'number': return typeof def === 'number';
-        case 'string': return typeof def === 'string';
+        case 'boolean':
+            return typeof def === 'boolean';
+        case 'number':
+            return typeof def === 'number';
+        case 'string':
+            return typeof def === 'string';
         case 'enum': {
             for (const v of Object.values(t.values)) {
                 if (v === def)
@@ -266,7 +288,7 @@ export function isValidValueForType(def, t, allowUndefined) {
             if (!Array.isArray(def))
                 return false;
             for (const entry of def) {
-                if (!isValidValueForType(entry, t.child))
+                if (!isValidValueForType(entry, t.child, allowUndefined))
                     return false;
             }
             return true;
@@ -274,23 +296,25 @@ export function isValidValueForType(def, t, allowUndefined) {
         case 'tuple': {
             if (!Array.isArray(def))
                 return false;
-            if (def.length !== t.children.length)
+            if (def.length !== t.children.length && !allowUndefined)
                 return false;
             for (let i = 0; i < t.children.length; i++) {
-                if (!isValidValueForType(def[i], t.children[i]))
+                if (!isValidValueForType(def[i], t.children[i], allowUndefined))
                     return false;
             }
             return true;
         }
         case 'union': {
             for (const child of t.children) {
-                if (isValidValueForType(def, child))
+                if (isValidValueForType(def, child, allowUndefined))
                     return true;
             }
             return false;
         }
-        case 'literal': return def === t.value;
-        case 'function': return false;
+        case 'literal':
+            return def === t.value;
+        case 'function':
+            return false;
     }
     return false;
 }
@@ -314,14 +338,17 @@ function getBasicType(t) {
         case 'enum':
         case 'string':
         case 'boolean':
+        case 'entity':
             return t.name;
         case 'literal': {
             if (t.value === undefined)
-                return "undefined";
+                return 'undefined';
             return JSON.stringify(t.value);
         }
-        case 'union': return t.children.map(val => outputForType(val)).join(' | ');
-        case 'function': return `(${t.args.map(entry => `${entry.name}: ${outputForType(entry.type)}`).join(', ')}) => ${t.ret ? outputForType(t.ret) : 'void'}`;
+        case 'union':
+            return t.children.map(val => outputForType(val)).join(' | ');
+        case 'function':
+            return `(${t.args.map(entry => `${entry.name}: ${outputForType(entry.type)}`).join(', ')}) => ${t.ret ? outputForType(t.ret) : 'void'}`;
         case 'event':
             return 'Event';
     }

package/lib/zcomponent.d.ts

@@ -1,3 +1,4 @@
+import { Animation, Clip, LayerClip, Layer, Track } from './animation/index';
 import { Component, ComponentChildren, ConstructorForComponent, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
 import { Entity } from './entity';
@@ -42,16 +43,26 @@ 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>;
+    };
     private _nodesById;
     private _behaviorsToInitialize;
     private _constructorPropOverridesByEntityID;
     constructor(contextManager: ContextManager, constructorProps: ConstructorProps, _opts: ZComponentOptions);
+    private _updateAnimationRegistrations;
+    private _animationTick;
     private _constructorForNode;
     private _constructorForBehavior;
     resolveNodeID<T extends Component = Component>(id: string, type?: ConstructorForComponent<T>): T | undefined;
     private _inflateBehaviors;
     private _wrapBehaviors;
     notifyPropsChanged(entries: Map<string, Set<string>>): void;
+    notifyClipsChanged(clips: Set<string>): void;
     private _initializeOverrides;
     private _initializeConstructorPropOverrides;
     private _initializeComponentProps;

package/lib/zcomponent.js

@@ -1,9 +1,13 @@
+import { Animation } from './animation/index';
 import { shouldBehaviorRunAtDesignTime } from './behavior';
 import { Component } from './component';
 import { Context } from './context';
+import { useOnBeforeRender } from './contexts/canvascontext';
 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 { Observable } from './observable';
 import { setCurrentZComponentConstruction } from './zcomponentconstruction';
@@ -26,9 +30,25 @@ 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._nodesById = new Map();
         this._behaviorsToInitialize = [];
         this._constructorPropOverridesByEntityID = new Map();
+        this._updateAnimationRegistrations = () => {
+            if (this.animationManager.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();
+        };
         const contextManagerForChildren = contextManager.forkMultiple([ZComponentContext, { zcomponent: this }], [TagContext, {}])[0];
         this.id = this._opts.data.id;
         this._initializeConstructorPropOverrides();
@@ -41,8 +61,12 @@ export class ZComponent extends Component {
         this._inflateBehaviors();
         this._initializeComponentProps();
         this._initializeOverrides();
+        if (this._opts.data.animation)
+            populateAnimationFromData(this, this.animationManager, this._opts.data.animation);
         this.isConstructed = true;
         this._constructedResolve();
+        started(contextManager).then(this._updateAnimationRegistrations);
+        this.register(this.animationManager.hasLayers, this._updateAnimationRegistrations, { bindWhenDisabled: true });
     }
     _constructorForNode(nodeId) {
         const node = this._opts.data.nodes[nodeId];
@@ -219,6 +243,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);
                 }
                 catch (err) {
                     console.log('Warning - unable to set prop', entityID, prop);
@@ -226,6 +251,15 @@ export class ZComponent extends Component {
             }
         }
     }
+    notifyClipsChanged(clips) {
+        for (const clipId of clips.values()) {
+            const clip = this.animation.clipByID.get(clipId);
+            const clipData = this._opts.data.animation?.clips?.[clipId];
+            if (!clip || !clipData)
+                continue;
+            updateClipFromData(this, clip, clipData);
+        }
+    }
     _initializeOverrides() {
         const overrides = this._opts.data.entityPropOverrides ?? {};
         for (const override of Object.values(overrides)) {
@@ -332,6 +366,7 @@ export class ZComponent extends Component {
         return this._nodesById.get(id);
     }
     dispose() {
+        this.animationManager.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.18",
+  "version": "0.0.20",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -20,6 +20,7 @@
   ],
   "scripts": {
     "build": "tsc",
+    "build-animation-tests": "tsc -p ./tsconfig.test.animation.json",
     "test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test",
     "tests": "parcel serve tests/index.html -p 8088"
   },