@zcomponent/core 0.0.28 → 0.0.30-beta

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/data/animation.d.ts

@@ -90,6 +90,10 @@ export interface BaseTrack {
     id: string;
     type: TrackType;
     entityID: string;
+    lock?: {
+        track?: boolean;
+        weight?: boolean;
+    };
 }
 export interface PropertyTrack extends BaseTrack {
     type: TrackType.Property;

package/lib/data/animation.js

@@ -6,15 +6,72 @@ export var ClipType;
 })(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]]]
+    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:
 // [

package/lib/data/core.d.ts

@@ -63,9 +63,11 @@ export interface NodeData {
 export interface BehaviorData {
     id: string;
     type: Import;
+    label?: string;
     parent: {
         id: string;
         order: string;
+        scriptName?: string;
     };
 }
 export type EntityPropOverride = PropEntityPropOverride | ImportEntityPropOverride | ContextValueEntityPropOverride;

package/lib/inflate.js

@@ -170,7 +170,6 @@ export function populateAnimationTracksFromData(zcomp, anim, data) {
     }
 }
 export function populateAnimationStructureFromData(zcomp, anim, data) {
-    console.log('ANIM', data);
     const clips = resolveClipDependencies(data.clips).reverse();
     for (const clip of Object.values(clips)) {
         if (!clip)

package/lib/selectors.d.ts

@@ -1,4 +1,4 @@
-import { EntityPropOverride, Import, NodeByID, ParsedImport, Props } from './data/core';
+import { BehaviorByID, EntityPropOverride, Import, NodeByID, ParsedImport, Props, ZComponentData } from './data/core';
 import * as Data from './data';
 import { Layer } from './animation';
 export declare function parseImport(i: Import): ParsedImport;
@@ -6,6 +6,8 @@ export declare function constructImport(from: string, destFile: string, imp: str
 export declare function getScriptName(n: string, requireUniqueIn: string[] | {
     [k: string]: any;
 }): string;
+export declare function getScriptNameForBehaviorLabel(zcomp: ZComponentData, nodeID: string, label: string): string;
+export declare function getScriptNameForNodeLabel(zcomp: ZComponentData, label: string): string;
 export declare function isValidVariableName(n: string): boolean;
 export declare function variableNameFromImport(imp: ParsedImport): string;
 export type EntityPropOverrideByEntityPropPath = {
@@ -23,8 +25,10 @@ export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props,
     [id: string]: {
         [id: string]: boolean;
     };
-} | undefined, url: string, layers: Data.ByID<Data.Layer>) => string;
+} | undefined, layers: Data.ByID<Data.Layer>, behaviors: BehaviorByID) => string;
 export declare function getSafeKeyName(n: string): string;
 export declare function propertyTracksByEntityID(clip: Data.Clip): {
     [id: string]: Data.PropertyTrack[];
 };
+export declare function getBehaviorBlockForNode(behaviors: BehaviorByID, behaviorIDs: string[], importMapping: Map<string, string>): string;
+export declare function importNameWithoutExt(imp: string): string;

package/lib/selectors.js

@@ -2,6 +2,7 @@ import { EntityPropOverrideType } from './data/core';
 import * as path from 'path';
 import { outputForType } from './types';
 import * as Data from './data';
+import { computeBehaviorHierarchy } from './data';
 export function parseImport(i) {
     if (typeof i !== 'string')
         return ['', ''];
@@ -107,6 +108,29 @@ export function getScriptName(n, requireUniqueIn) {
     }
     return finalname;
 }
+export function getScriptNameForBehaviorLabel(zcomp, nodeID, label) {
+    const uniques = [];
+    const behaviorsByNode = computeBehaviorHierarchy(zcomp.behaviors);
+    const nodeBehaviors = behaviorsByNode[nodeID];
+    if (nodeBehaviors) {
+        for (const behaviorID of nodeBehaviors) {
+            const behavior = zcomp.behaviors[behaviorID];
+            if (!behavior?.parent.scriptName)
+                continue;
+            uniques.push(behavior.parent.scriptName);
+        }
+    }
+    return getScriptName(label, uniques);
+}
+export function getScriptNameForNodeLabel(zcomp, label) {
+    const uniques = [];
+    for (const node of Object.values(zcomp.nodes)) {
+        if (!node?.scriptName)
+            continue;
+        uniques.push(node.scriptName);
+    }
+    return getScriptName(label, uniques);
+}
 const variableNameRegex = new RegExp(/[a-zA-Z_$][0-9a-zA-Z_$]*/);
 export function isValidVariableName(n) {
     return variableNameRegex.test(n);
@@ -161,10 +185,11 @@ export function summaryForEntityPropOverrideDestination(o) {
     }
     return '?';
 }
-export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, url, layers) => {
+export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, layers, behaviors) => {
     const importMapping = new Map();
     let indx = 0;
     let importStrings = [];
+    const behaviorsByNodeID = computeBehaviorHierarchy(behaviors);
     for (const scriptNameNodes of Object.values(scriptNames ?? {})) {
         for (const nodeID of Object.keys(scriptNameNodes)) {
             const node = nodes[nodeID];
@@ -177,6 +202,18 @@ export const typeDefinitionForComponent = (nodes, props, constructorProps, scrip
                 importMapping.set(node.type, variable);
                 indx++;
             }
+            for (const behaviorID of behaviorsByNodeID[nodeID] ?? []) {
+                const behavior = behaviors[behaviorID];
+                if (!behavior)
+                    continue;
+                if (!importMapping.has(behavior.type)) {
+                    const imp = parseImport(behavior.type);
+                    const variable = `${getScriptName(variableNameFromImport(imp), {})}_${indx.toString()}`;
+                    importStrings.push(`import { ${imp[1]} as ${variable} } from ${JSON.stringify(importNameWithoutExt(imp[0]))};`);
+                    importMapping.set(behavior.type, variable);
+                    indx++;
+                }
+            }
         }
     }
     return `import { ZComponent, ContextManager, Observable, Animation, Layer, LayerClip } from "@zcomponent/core";
@@ -199,10 +236,10 @@ declare class Comp extends ZComponent {
 ${Object.entries(scriptNames ?? {}).map(entry => {
         const values = Object.keys(entry[1]);
         if (values.length > 1) {
-            return `\t\t${entry[0]}: {${values.map(e => `${JSON.stringify(e)}: ${importMapping.get(nodes[e].type)}`).join(', ')}},`;
+            return `\t\t${entry[0]}: {${values.map(e => `${JSON.stringify(e)}: ${importMapping.get(nodes[e].type)}${getBehaviorBlockForNode(behaviors, behaviorsByNodeID[nodes[e].id] ?? [], importMapping)}`).join(', ')}},`;
         }
         else {
-            return `\t\t${entry[0]}: ${importMapping.get(nodes[values[0]].type)},`;
+            return `\t\t${entry[0]}: ${importMapping.get(nodes[values[0]].type)}${getBehaviorBlockForNode(behaviors, behaviorsByNodeID[nodes[values[0]].id] ?? [], importMapping)},`;
         }
     }).join("\n")}
 	};
@@ -287,3 +324,24 @@ export function propertyTracksByEntityID(clip) {
     }
     return ret;
 }
+export function getBehaviorBlockForNode(behaviors, behaviorIDs, importMapping) {
+    return ` & {
+			behaviors: {
+${behaviorIDs.map((entry, indx) => {
+        const behavior = behaviors[entry];
+        if (!behavior)
+            return '';
+        const type = importMapping.get(behavior.type);
+        const ret = [`\t\t\t\t${indx.toString()}: ${type},`];
+        if (behavior.parent.scriptName)
+            ret.push(`\t\t\t\t${behavior.parent.scriptName}: ${type},`);
+        return ret.join('\n');
+    }).join('\n')}
+			}
+		}`;
+}
+export function importNameWithoutExt(imp) {
+    if (imp.toLowerCase().endsWith('.ts'))
+        return imp.substring(0, imp.length - 3);
+    return imp;
+}

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/lib/zcomponent.js

@@ -179,6 +179,8 @@ export class ZComponent extends Component {
                 setCurrentZComponentConstruction(that);
                 super(contextManager, instance, constructorProps);
                 that.entityByID.set(behaviorId, this);
+                if (node?.parent?.scriptName)
+                    instance.behaviors[node.parent.scriptName] = this;
                 const props = {
                     ...(that._opts.data.entityProps?.[behaviorId] ?? {}),
                     ...(that._opts.propReplacement?.[behaviorId] ?? {}),
@@ -195,6 +197,8 @@ export class ZComponent extends Component {
             }
             dispose() {
                 that.entityByID.delete(behaviorId);
+                if (node?.parent?.scriptName)
+                    delete this.instance.behaviors[node.parent.scriptName];
                 return super.dispose();
             }
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.28",
+  "version": "0.0.30-beta",
   "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"