@zcomponent/core 0.0.19 → 0.0.21

package/lib/animation/tracks/track.js

@@ -0,0 +1,30 @@
+import { Observable } from '../../observable';
+import { computeEasing } from '../bezier';
+import { interpolate } from '../interpolate';
+export class Track {
+    constructor() {
+        this.influencedPathsDirty = new Observable(false);
+    }
+}
+export function resolveKeyframeValue(t, before, after) {
+    if (!after || !before.easing)
+        return before.v;
+    const tprop = computeEasing((t - before.t) / (after.t - before.t), before.easing);
+    return interpolate(before.v, after.v, tprop);
+}
+export function resolveKeyframes(keyframes, t) {
+    let keyframeBefore;
+    let keyframeAfter;
+    for (let i = 0; i < keyframes.length; i++) {
+        const keyframe = keyframes[i];
+        if (keyframe.t <= t)
+            keyframeBefore = keyframe;
+        if (keyframe.t === t)
+            break;
+        if (keyframe.t > t) {
+            keyframeAfter = keyframe;
+            break;
+        }
+    }
+    return [keyframeBefore, keyframeAfter];
+}

package/lib/animation.d.ts

@@ -9,121 +9,142 @@ export type ByNodeProperty<T> = {
 export interface Animation {
     clips: ByID<Clip>;
     layers: ByID<Layer>;
+    curves: ByID<Curve>;
 }
 export type BlendType = 'overlay' | 'add';
 export interface FadeParameters {
     time: number;
-    pin?: 'start' | 'middle' | 'end';
+    pin?: number;
+    easing?: Easing;
+    reverse?: boolean;
 }
 export interface Layer {
+    order: string;
+    name: string;
+    id: string;
     defaultFadeParameters?: FadeParameters;
-    clips: LayerClip[];
+    clips: ByID<LayerClip>;
+    defaultClip?: string | null;
+    enabled: boolean;
 }
 export interface LayerClip {
-    clipID: string;
-    loop?: string;
+    order: string;
+    id: string;
+    clipId: string;
+    loop?: boolean;
     reverse?: boolean;
     playbackSpeed?: number;
 }
-export type Clip = StateClip | TimelineClip;
-export interface BaseClip {
-    type: 'timeline' | 'state';
-}
-export interface StateClip extends BaseClip {
-    type: 'state';
-    values: ByNodeProperty<any>;
-    defaultFadeParameters?: FadeParameters;
-    fadeParameters: ByNodeProperty<FadeParameters>;
-    blend: ByNodeProperty<StateClipBlend>;
-}
-export interface StateClipBlend {
-    weight?: number;
-    type?: BlendType;
-}
-export interface TimelineClip extends BaseClip {
-    type: 'timeline';
-    length: number;
+export type ActiveLayerClips = ByID<string | undefined>;
+export declare enum ClipType {
+    Timeline = "timeline",
+    State = "state"
+}
+export type ClipLengthType = 'auto' | 'expand' | 'manual';
+export interface Clip {
+    order: string;
+    type: ClipType;
+    id: string;
+    name: string;
     tracks: ByID<Track>;
-    trackOrder: string[];
+    length: number;
+    lengthType: ClipLengthType;
     defaultFadeParameters?: FadeParameters;
     timeSourceTrack?: string;
 }
-export type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
-export interface BaseTrack {
-    type: 'property' | 'clip' | 'stream' | 'function' | 'label';
-}
-export interface Keyframe<T> {
-    v: T;
+export interface Keyframe {
+    id: string;
+    v: any;
     t: number;
     label?: string;
     easing?: Easing;
 }
-export type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
-export type BezierCP = [number, number];
-export type Bezier = [
-    BezierCP,
-    BezierCP,
-    [number, number]
-] | [
-    BezierCP,
-    BezierCP
-];
-export interface PropertyTrack extends BaseTrack {
-    type: 'property';
+export declare const predefinedCurve: {
+    [id: string]: Bezier[];
+};
+export type Easing = null | keyof typeof predefinedCurve | string;
+export type Point = [number, number];
+export type Bezier = [Point, Point, Point, Point];
+export type Curve = {
+    id: string;
+    order?: string;
+    name: string;
+    curve: Bezier[];
+};
+export declare enum TrackType {
+    Property = "property",
+    Clip = "clip",
+    Stream = "stream",
+    Function = "function",
+    Label = "label",
+    Entity = "entity",
+    Blend = "blend",
+    Fade = "fade"
+}
+export type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
+export interface BaseTrack {
+    order: string;
+    id: string;
+    type: TrackType;
     entityID: string;
-    property: string;
-    values: Keyframe<any>[];
+}
+export interface PropertyTrack extends BaseTrack {
+    type: TrackType.Property;
+    property: (string | number)[];
     blend: BlendType;
-    weight: Keyframe<number>[];
-    fadeParameters?: FadeParameters;
+    weight: ByID<Keyframe>;
+    keyframes: ByID<Keyframe>;
+    fadeParameters?: Partial<FadeParameters>;
 }
 export interface ClipTrack extends BaseTrack {
-    type: 'clip';
-    clipID: string;
-    data: ClipTrackEntry[];
-    weight: Keyframe<number>[];
+    type: TrackType.Clip;
+    name: string;
+    data: ByID<ClipTrackEntity>;
+    weight: ByID<Keyframe>;
 }
-export interface ClipTrackEntry {
+export interface ClipTrackEntity {
+    id: string;
     t0: number;
     t1: number;
     s0: number;
     rate: number;
 }
 export interface StreamTrack extends BaseTrack {
-    type: 'stream';
-    entityID: string;
-    data: StreamTrackEntry[];
-    weight: Keyframe<number>[];
+    type: TrackType.Stream;
+    data: ByID<StreamTrackEntity>;
+    weight: ByID<Keyframe>;
 }
-export interface StreamTrackEntry {
+export interface StreamTrackEntity {
     t0: number;
     t1: number;
     s0: number;
     rate: number;
 }
 export interface FunctionTrack extends BaseTrack {
-    type: 'function';
-    data: FunctionTrackEntry[];
+    type: TrackType.Function;
+    data: ByID<FunctionTrackEntity>;
 }
-export type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
-export interface BaseFunctionTrackEntry {
+export type FunctionTrackEntity = EntityFunctionTrackEntity | ImportFunctionTrackEntity;
+export interface BaseFunctionTrackEntity {
+    order: string;
     type: 'entity' | 'import';
-    args: any[];
+    args: ByID<any>;
 }
-export interface EntityFunctionTrackEntry extends BaseFunctionTrackEntry {
+export interface EntityFunctionTrackEntity extends BaseFunctionTrackEntity {
     type: 'entity';
     entityID: string;
     functionName: string;
 }
-export interface ImportFunctionTrackEntry extends BaseFunctionTrackEntry {
+export interface ImportFunctionTrackEntity extends BaseFunctionTrackEntity {
     type: 'import';
     import: string;
 }
 export interface LabelTrack extends BaseTrack {
-    type: 'label';
-    data: LabelTrackEntry[];
+    type: TrackType.Label;
+    data: ByID<LabelTrackEntity>;
 }
-export interface LabelTrackEntry {
+export interface LabelTrackEntity {
+    order: string;
     t: number;
     label: string;
 }

package/lib/animation.js

@@ -1 +1,83 @@
-export {};
+// CLIP
+export var ClipType;
+(function (ClipType) {
+    ClipType["Timeline"] = "timeline";
+    ClipType["State"] = "state";
+})(ClipType || (ClipType = {}));
+// TODO: it's a temporary placement for this object
+export const predefinedCurve = {
+    linear: [[[0, 0], [0.5, 0.5], [0.5, 0.5], [1, 1]]],
+    ease: [[[0, 0], [0.25, 0.1], [0.25, 1], [1, 1]]],
+    easeIn: [[[0, 0], [0.42, 0], [1, 1], [1, 1]]],
+    easeOut: [[[0, 0], [0, 0], [0.58, 1], [1, 1]]],
+    easeInOut: [[[0, 0], [0.42, 0], [0.58, 1], [1, 1]]],
+    bounceOut: [[[0, 0], [0.1, 0], [0.2, 0.5], [0.3, 1]],
+        [[0.3, 1], [0.4, 0.7], [0.6, 0.7], [0.7, 1]],
+        [[0.7, 1], [0.75, 0.85], [0.85, 0.85], [0.9, 1]],
+        [[0.9, 1], [0.925, 0.95], [0.975, 0.95], [1, 1]]]
+};
+// Simple linear transition between two object position value could look like this:
+// [
+// 	{
+// 		v: [1, 2, 3], // initial position
+// 		t: 0,
+// 		easing: 'linear'
+// 	},
+// 	{
+// 		v: [4, 5, 6], // end position
+// 		t: 1000, // one second
+// 	}
+// ];
+// The same thing (a linear transition) represented as bezier points
+// [
+// 	{
+// 		v: [1, 2, 3],
+// 		t: 0,
+// 		easing: [
+// 			[[0.5, 0.5], [0.5, 0.5]] // Two bezier control points half way between the keyframes, and half way between the normalized values
+// 		]
+// 	},
+// 	{
+// 		v: [4, 5, 6],
+// 		t: 1000
+// 	}
+// ];
+// Now with a step at the start of the transition
+// [
+// 	{
+// 		v: [1, 2, 3],
+// 		t: 0,
+// 		// easing value omitted implies immediate setting of value
+// 	},
+// 	{
+// 		v: [4, 5, 6],
+// 		t: 1000
+// 	}
+// ];
+// Same thing implemented with bezier
+// [
+// 	{
+// 		v: [1, 2, 3],
+// 		t: 0,
+// 		easing: [
+// 			[[0, 0.5], [0, 0.5], [0, 1]], // Bezier point at x=0, y=1 with control points at origin and at x=0, y=1
+// 			[[0.5, 1], [0.5, 1]] // Bezier control points for a flat line from x=0 y=1 to x=1 y=1
+// 		]
+// 	},
+// 	{
+// 		v: [4, 5, 6],
+// 		t: 1000
+// 	}
+// ];
+////// TRACKS
+export var TrackType;
+(function (TrackType) {
+    TrackType["Property"] = "property";
+    TrackType["Clip"] = "clip";
+    TrackType["Stream"] = "stream";
+    TrackType["Function"] = "function";
+    TrackType["Label"] = "label";
+    TrackType["Entity"] = "entity";
+    TrackType["Blend"] = "blend";
+    TrackType["Fade"] = "fade";
+})(TrackType || (TrackType = {}));

package/lib/behaviors/PauseLayerClip.d.ts

@@ -0,0 +1,20 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zbehavior
+ * @zicon pause_circle
+ * @zgroup Animation Actions
+ */
+export declare class PauseLayerClip extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zvalues layerclipids
+     */
+    layerClip: string | undefined;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/PauseLayerClip.js

@@ -0,0 +1,26 @@
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * @zbehavior
+ * @zicon pause_circle
+ * @zgroup Animation Actions
+ */
+export class PauseLayerClip extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+    }
+    perform() {
+        if (!this.layerClip)
+            return;
+        const layerclip = this.zcomponent.animation.layerClipByID.get(this.layerClip);
+        if (!layerclip)
+            return;
+        layerclip.pause();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(PauseLayerClip);

package/lib/behaviors/PlayLayerClip.d.ts

@@ -0,0 +1,78 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export declare class PlayLayerClip extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Play Settings
+     * @zgrouppriority 20
+     * @zvalues layerclipids
+     */
+    layerClip: 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;
+    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/PlayLayerClip.js

@@ -0,0 +1,62 @@
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * @zbehavior
+ * @zicon play_circle
+ * @zgroup Animation Actions
+ */
+export class PlayLayerClip 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;
+    }
+    perform() {
+        if (!this.layerClip)
+            return;
+        const layerclip = this.zcomponent.animation.layerClipByID.get(this.layerClip);
+        if (!layerclip)
+            return;
+        const opts = {
+            loop: this.loop,
+            speed: this.speed,
+            fade: {
+                time: this.fadeTime,
+                pin: this.pin,
+                easing: this.easing
+            }
+        };
+        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(PlayLayerClip);

package/lib/behaviors/SetLayerOff.d.ts

@@ -0,0 +1,20 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zbehavior
+ * @zicon toggle_off
+ * @zgroup Animation Actions
+ */
+export declare class SetLayerOff extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zvalues layerids
+     */
+    layer: string | undefined;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/SetLayerOff.js

@@ -0,0 +1,26 @@
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * @zbehavior
+ * @zicon toggle_off
+ * @zgroup Animation Actions
+ */
+export class SetLayerOff extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+    }
+    perform() {
+        if (!this.layer)
+            return;
+        const layer = this.zcomponent.animation.layerByID.get(this.layer);
+        if (!layer)
+            return;
+        layer.active = null;
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(SetLayerOff);

package/lib/data.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 './interfaces';
+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;
@@ -8,6 +8,7 @@ export declare function updateComponentProp(zcomp: ZComponentData, prop: string,
 export declare function addEntityPropOverride(zcomp: ZComponentData, o: EntityPropOverride): void;
 export declare function deleteEntityPropOverride(zcomp: ZComponentData, id: string): void;
 export declare function clone<T>(obj: T): T;
+export declare function isEqual<T>(obj1: T, obj2: T): boolean;
 export declare function addEntity(zcomp: ZComponentData, id: string, info: EntityDataCombined): void;
 export declare function moveNodes(zcomp: ZComponentData, nodeIDs: string[], newParentID: string, indx: number): void;
 export declare function deleteNode(zcomp: ZComponentData, id: string): void;

package/lib/data.js

@@ -1,5 +1,5 @@
-import { generateKeyBetween, generateNKeysBetween } from "./fractionalindexing";
-import { EntityPropOverrideType } from "./interfaces";
+import { generateKeyBetween, generateNKeysBetween } from './fractionalindexing';
+import { EntityPropOverrideType } from './interfaces';
 // Simple memoizing of computed hierarchy
 const computedHierarchies = new Map();
 const computedBehaviors = new Map();
@@ -129,7 +129,7 @@ export function deleteEntityPropOverride(zcomp, id) {
     delete zcomp.entityPropOverrides[id];
 }
 function idForEntityPropOverride(override) {
-    return override.type + ":" + (override.entityPropIsConstructor ? 'constructorprop' : 'prop') + ":" + override.entityID + ":" + override.entityPropPath.join('.');
+    return (override.type + ':' + (override.entityPropIsConstructor ? 'constructorprop' : 'prop') + ':' + override.entityID + ':' + override.entityPropPath.join('.'));
 }
 export function clone(obj) {
     try {
@@ -141,6 +141,9 @@ export function clone(obj) {
     }
     return JSON.parse(JSON.stringify(obj));
 }
+export function isEqual(obj1, obj2) {
+    return JSON.stringify(obj1) === JSON.stringify(obj2);
+}
 export function addEntity(zcomp, id, info) {
     zcomp.entityProps[id] = info.props;
     zcomp.entityConstructorProps[id] = info.constructorProps;
@@ -192,7 +195,7 @@ export function getNodeDataCombined(zcomp, id) {
     return {
         data,
         props: zcomp.entityProps[id] ?? {},
-        constructorProps: zcomp.entityConstructorProps[id] ?? {}
+        constructorProps: zcomp.entityConstructorProps[id] ?? {},
     };
 }
 export function getBehaviorDataCombined(zcomp, id) {
@@ -202,7 +205,7 @@ export function getBehaviorDataCombined(zcomp, id) {
     return {
         data,
         props: zcomp.entityProps[id] ?? {},
-        constructorProps: zcomp.entityConstructorProps[id] ?? {}
+        constructorProps: zcomp.entityConstructorProps[id] ?? {},
     };
 }
 export function fixAnyDuplicateIndex(zcomp, hierarchy, nodeID, indx) {

package/lib/index.d.ts

@@ -13,3 +13,4 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './animation';

package/lib/index.js

@@ -13,6 +13,7 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './animation';
 const link = document.createElement('link');
 link.setAttribute('rel', 'stylesheet');
 link.setAttribute('href', new URL('../css/zcomponent.css', import.meta.url).toString());

package/lib/inflate.d.ts

@@ -0,0 +1,13 @@
+import { Track } from './animation/tracks/track';
+import * as Data from './animation';
+import { ZComponent } from './zcomponent';
+import { Clip } from './animation/clips/clip';
+import { Animation } from './animation/animation';
+import { LayerClip } from './animation/layerclip';
+import { Layer } from './animation/layer';
+export declare function createTrackFromData(zcomp: ZComponent, anim: Animation, data: Data.Track): Track | undefined;
+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;
+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;