@zcomponent/core 0.0.27 → 0.0.29

package/lib/animation/animation.d.ts

@@ -5,6 +5,7 @@ import { LayerClip } from './layerclip';
 import { Clip } from './clips/clip';
 import { AnimationState } from './animationstate';
 import { Track } from './tracks/track';
+import { Bezier } from './bezier';
 /** @internal */
 export declare enum AnimationEvents {
     onLayerClipActive = "onLayerClipActive",
@@ -18,6 +19,9 @@ export declare class Animation {
     clips: {
         [id: string]: Clip;
     };
+    curves: {
+        [id: string]: Bezier;
+    };
     onTick: Event<[]>;
     onLayerClipActive: Event<[layerClip: LayerClip]>;
     onLayerClipState: Event<[layerClip: LayerClip]>;

package/lib/animation/animation.js

@@ -12,6 +12,7 @@ export class Animation {
         this._initialize = _initialize;
         this.layers = Object.create(null);
         this.clips = Object.create(null);
+        this.curves = Object.create(null);
         this.onTick = new Event();
         this.onLayerClipActive = new Event();
         this.onLayerClipState = new Event();

package/lib/animation/keyframe.d.ts

@@ -0,0 +1,8 @@
+import { Easing } from "./bezier";
+export interface Keyframe {
+    id: string;
+    v: any;
+    t: number;
+    label?: string;
+    easing?: Easing;
+}

package/lib/animation/keyframe.js

@@ -0,0 +1 @@
+export {};

package/lib/animation/layer.d.ts

@@ -1,8 +1,14 @@
-import * as Data from '../data';
 import { Observable } from '../observable';
 import { Animation } from './animation';
 import { AnimationState } from './animationstate';
+import { Easing } from './bezier';
 import { LayerClip, LayerClipPlayOptions } from './layerclip';
+export interface FadeParameters {
+    time: number;
+    pin?: number;
+    easing?: Easing;
+    reverse?: boolean;
+}
 export declare class Layer {
     readonly animation: Animation;
     readonly scriptName?: string | undefined;
@@ -10,7 +16,7 @@ export declare class Layer {
     clips: {
         [id: string]: LayerClip;
     };
-    defaultFadeParameters?: Data.FadeParameters;
+    defaultFadeParameters?: FadeParameters;
     influencedPathsDirty: Observable<boolean, never>;
     private _influencedPaths;
     private _active;
@@ -41,7 +47,7 @@ export interface QueueEntry {
     layerClip: LayerClip | null;
     playOptions?: LayerClipPlayOptions;
     fadeByPath: {
-        [id: string]: Partial<Data.FadeParameters>;
+        [id: string]: Partial<FadeParameters>;
     };
     fadeTime: number;
     startTime?: number;

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

@@ -1,5 +1,6 @@
-import { Keyframe, ClipTrackEntity } from '../../data';
+import { ClipTrackEntity } from '../../data';
 import { Clip } from '../clips/clip';
+import { Keyframe } from '../keyframe';
 import { Track } from './track';
 export declare class ClipTrack extends Track {
     readonly clip: Clip;

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

@@ -1,5 +1,6 @@
-import { FadeParameters, Keyframe, BlendType } from '../../data';
+import { FadeParameters, BlendType } from '../../data';
 import { Animation } from '../animation';
+import { Keyframe } from '../keyframe';
 import { Track } from './track';
 export declare class PropertyTrack extends Track {
     private _entityID;

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

@@ -1,6 +1,6 @@
-import { Keyframe } from '../../data';
 import { Observable } from '../../observable';
 import { Animation } from '../animation';
+import { Keyframe } from '../keyframe';
 export declare abstract class Track {
     readonly id?: string | undefined;
     influencedPathsDirty: Observable<boolean, never>;

package/lib/components/DefaultLoader.d.ts

@@ -3,9 +3,7 @@ export interface DefaultLoaderConstructorProps {
     /** @zprop
      * @zgroup Appearance
      * @zgrouppriority 10
-     * @zvalues files *.jpeg
-     * @zvalues files *.png
-     * @zvalues files *.jpg
+     * @zvalues files *.+(jpg|jpeg|png)
      */
     backgroundImage: string;
 }

package/lib/inflate.d.ts

@@ -5,7 +5,13 @@ import { Clip } from './animation/clips/clip';
 import { Animation } from './animation/animation';
 import { LayerClip } from './animation/layerclip';
 import { Layer } from './animation/layer';
+import { ByID } from './data';
+import { Bezier } from './animation/bezier';
+import { Keyframe } from './animation/keyframe';
 export declare function createTrackFromData(zcomp: ZComponent, anim: Animation, data: Data.Track): Track | undefined;
+export declare function processKeyframes(keyframes: ByID<Data.Keyframe>, beziers: ByID<Bezier>): {
+    [id: string]: Keyframe;
+};
 export declare function createClipFromData(zcomp: ZComponent, anim: Animation, data: Data.Clip): Clip;
 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;

package/lib/inflate.js

@@ -4,6 +4,7 @@ import { Clip } from './animation/clips/clip';
 import { LayerClip } from './animation/layerclip';
 import { Layer } from './animation/layer';
 import { ClipTrack } from './animation/tracks/cliptrack';
+import { Bezier } from './animation/bezier';
 export function createTrackFromData(zcomp, anim, data) {
     switch (data.type) {
         case Data.TrackType.Property: {
@@ -11,9 +12,9 @@ export function createTrackFromData(zcomp, anim, data) {
             if (!entity)
                 return;
             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.setKeyframesById(processKeyframes(data.keyframes, anim.curves));
+            ret.setWeightsById(processKeyframes(data.weight, anim.curves));
+            ret.fadeParameters = resolvedFadeParameters(data.fadeParameters, anim.curves);
             ret.blend = data.blend ?? 'overlay';
             return ret;
         }
@@ -23,12 +24,46 @@ export function createTrackFromData(zcomp, anim, data) {
                 return;
             const ret = new ClipTrack(clip, data.id);
             ret.setBlocksById(data.data);
-            ret.setWeightsById(data.weight);
+            ret.setWeightsById(processKeyframes(data.weight, anim.curves));
             return ret;
         }
     }
     return undefined;
 }
+export function processKeyframes(keyframes, beziers) {
+    let needsNew = false;
+    const keyframeArray = Object.values(keyframes);
+    for (const keyframe of keyframeArray) {
+        if (keyframe?.easing) {
+            const bezier = beziers[keyframe.easing];
+            if (bezier) {
+                needsNew = true;
+                break;
+            }
+        }
+    }
+    if (!needsNew)
+        return keyframes;
+    const ret = Object.create(null);
+    for (const keyframe of keyframeArray) {
+        if (!keyframe)
+            continue;
+        if (!keyframe.easing) {
+            ret[keyframe.id] = keyframe;
+            continue;
+        }
+        const bezier = beziers[keyframe.easing];
+        if (!bezier) {
+            ret[keyframe.id] = keyframe;
+            continue;
+        }
+        ret[keyframe.id] = {
+            ...keyframe,
+            easing: bezier,
+        };
+    }
+    return ret;
+}
 export function createClipFromData(zcomp, anim, data) {
     let length = data.length;
     if (length === undefined) {
@@ -64,12 +99,23 @@ export function createClipFromData(zcomp, anim, data) {
         }
     }
     const ret = new Clip(anim, length, data.scriptName, data.id);
-    ret.defaultFadeParameters = data.defaultFadeParameters;
+    ret.defaultFadeParameters = resolvedFadeParameters(data.defaultFadeParameters, anim.curves);
     zcomp.animation.clipByID.set(data.id, ret);
     return ret;
 }
+function resolvedFadeParameters(fade, beziers) {
+    if (!fade?.easing)
+        return fade;
+    const bezier = beziers[fade?.easing];
+    if (!bezier)
+        return fade;
+    return {
+        ...fade,
+        easing: bezier,
+    };
+}
 export function updateClipFromData(zcomp, clip, data) {
-    clip.defaultFadeParameters = data.defaultFadeParameters;
+    clip.defaultFadeParameters = resolvedFadeParameters(data.defaultFadeParameters, zcomp.animation.curves);
     clip.length = data.length;
     clip.clearTracks();
     for (const track of Object.values(data.tracks)) {
@@ -94,7 +140,7 @@ export function createLayerClipFromData(zcomp, layer, data) {
 export function createLayerFromData(zcomp, anim, data) {
     const ret = new Layer(anim, data.scriptName, data.id);
     ret.active = undefined;
-    ret.defaultFadeParameters = data.defaultFadeParameters;
+    ret.defaultFadeParameters = resolvedFadeParameters(data.defaultFadeParameters, anim.curves);
     if (data.defaultClip === null)
         ret.active = null;
     for (const layerClip of Object.values(data.clips)) {
@@ -140,6 +186,11 @@ export function populateAnimationStructureFromData(zcomp, anim, data) {
         }
         return a < b ? -1 : 1;
     });
+    for (const curve of Object.values(data.curves)) {
+        if (!curve)
+            continue;
+        anim.curves[curve.id] = new Bezier(curve.curve);
+    }
     for (const layer of Object.values(layers)) {
         if (!layer)
             continue;

package/lib/types.d.ts

@@ -100,6 +100,8 @@ export interface Prop {
     group?: string;
     groupPriority?: number;
     values?: Values[];
+    order?: number;
+    priority?: number;
 }
 export interface DefaultChild {
     label: string;

package/lib/types.js

@@ -142,7 +142,9 @@ export function mergeProps(a, b) {
         default: def,
         group: a.group === b.group ? a.group : undefined,
         groupPriority: Math.max(a.groupPriority ?? 0, b.groupPriority ?? 0),
+        priority: Math.max(a.priority ?? 0, b.priority ?? 0),
         values: mergeValues(a.values, b.values),
+        order: Math.min(a.order ?? 0, b.order ?? 0),
     };
 }
 function mergeComments(a, b) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -19,7 +19,7 @@
     "css/**/*"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf lib && 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"