@zcomponent/core 0.0.13 → 0.0.15

package/lib/actionbehavior.js

@@ -24,7 +24,7 @@ export class ActionBehavior extends Behavior {
             }
         };
         const env = contextManager.get(EnvironmentContext);
-        this.register(env.editTime, this._updateRegistration);
-        this.register(this.enabledResolved, this._updateRegistration);
+        this.register(env.editTime, this._updateRegistration, { bindWhenDisabled: true });
+        this.register(this.enabledResolved, this._updateRegistration, { bindWhenDisabled: true });
     }
 }

package/lib/behavior.d.ts

@@ -7,7 +7,6 @@ export type BehaviorConstructorProps = {
     [id: string]: unknown;
 };
 export declare class Behavior<InstanceType extends Component = Component> extends Entity {
-    protected readonly contextManager: ContextManager;
     readonly instance: InstanceType;
     /**
      * Constructs this behavior

package/lib/behavior.js

@@ -7,8 +7,7 @@ export class Behavior extends Entity {
      * @param instance The instance of the component that this behavior is attached to
      */
     constructor(contextManager, instance) {
-        super();
-        this.contextManager = contextManager;
+        super(contextManager);
         this.instance = instance;
         this._updateEnabledResolved = () => {
             let newValue = this.enabled.value;

package/lib/component.d.ts

@@ -7,7 +7,7 @@ export type ConstructorForComponent<ComponentType extends Component = Component>
 export type ComponentChild<ComponentType extends Component> = [ConstructorForComponent<ComponentType>, ComponentType extends Component<any, infer U> ? U : never] | [
     ConstructorForComponent<ComponentType>,
     ComponentType extends Component<any, infer U> ? U : never,
-    Observable<ComponentType>
+    Observable<ComponentType | undefined>
 ];
 export type ComponentChildren = ComponentChild<Component>[];
 export interface ConstructorProps {
@@ -15,7 +15,6 @@ export interface ConstructorProps {
     children?: ComponentChildren;
 }
 export declare class Component<ElementType = any, ConstructorPropsType extends ConstructorProps = ConstructorProps> extends Entity {
-    readonly contextManager: ContextManager;
     protected constructorProps?: ConstructorPropsType | undefined;
     /**
      * The raw element(s) that this component exposes

package/lib/component.js

@@ -3,8 +3,7 @@ import { Entity } from './entity';
 import { Observable } from './observable';
 export class Component extends Entity {
     constructor(contextManager, constructorProps) {
-        super();
-        this.contextManager = contextManager;
+        super(contextManager);
         this.constructorProps = constructorProps;
         this.children = [];
         /**

package/lib/contexts/canvascontext.d.ts

@@ -5,6 +5,7 @@ export interface CanvasContextOptions {
     canvas?: HTMLCanvasElement;
     overlay?: HTMLDivElement;
 }
+/** @zcontext */
 export declare class CanvasContext extends Context {
     constructorProps: CanvasContextOptions;
     onBeforeRender: Event<[number]>;
@@ -12,6 +13,7 @@ export declare class CanvasContext extends Context {
     canvas: HTMLCanvasElement;
     overlayDefault: HTMLDivElement;
     overlay: Observable<HTMLDivElement>;
+    /** @zui */
     size: Observable<[number, number]>;
     private _resizeObserver;
     constructor(contextManager: ContextManager, constructorProps: CanvasContextOptions);

package/lib/contexts/canvascontext.js

@@ -1,6 +1,7 @@
 import { Context } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
+/** @zcontext */
 export class CanvasContext extends Context {
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);
@@ -36,7 +37,7 @@ export class CanvasContext extends Context {
         this.size = new Observable([this.canvas.clientWidth, this.canvas.clientHeight]);
         this._resizeObserver.observe(this.canvas);
         let lastRect;
-        this.onBeforeRender.bindfn(() => {
+        this.onBeforeRender.addListener(() => {
             const rect = this.canvas.getBoundingClientRect();
             if (lastRect && lastRect.top === rect.top && lastRect.left === rect.left && lastRect.width === rect.width && lastRect.height === rect.height)
                 return;
@@ -48,8 +49,8 @@ export class CanvasContext extends Context {
         });
     }
     dispose() {
-        this.onBeforeRender.clear();
-        this.onAfterRender.clear();
+        this.onBeforeRender.clearListeners();
+        this.onAfterRender.clearListeners();
         this._resizeObserver.disconnect();
         if (!this.constructorProps.canvas)
             this.canvas.remove();

package/lib/contexts/environmentcontext.d.ts

@@ -1,9 +1,19 @@
 import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export declare class EnvironmentContext extends Context {
+    /** @zprop */
     designTime: Observable<boolean, never>;
+    /** @zprop */
     editTime: Observable<boolean, never>;
+    /** @zprop */
+    runTime: Observable<boolean, never>;
+    /** @zprop */
+    developmentBuild: Observable<boolean, never>;
+    /** @zprop */
+    productionBuild: Observable<boolean, never>;
 }
 export declare function isDesignTime(ctx: ContextManager): boolean;
 export declare function isEditTime(ctx: ContextManager): boolean;
 export declare function isDevelopmentBuild(ctx: ContextManager): boolean;
+export declare function isProductionBuild(ctx: ContextManager): boolean;

package/lib/contexts/environmentcontext.js

@@ -1,10 +1,19 @@
 import { Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export class EnvironmentContext extends Context {
     constructor() {
         super(...arguments);
+        /** @zprop */
         this.designTime = new Observable(false);
+        /** @zprop */
         this.editTime = new Observable(false);
+        /** @zprop */
+        this.runTime = new Observable(true);
+        /** @zprop */
+        this.developmentBuild = new Observable(typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+        /** @zprop */
+        this.productionBuild = new Observable(!this.developmentBuild.value);
     }
 }
 export function isDesignTime(ctx) {
@@ -14,5 +23,8 @@ export function isEditTime(ctx) {
     return ctx.get(EnvironmentContext).editTime.value;
 }
 export function isDevelopmentBuild(ctx) {
-    return (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+    return ctx.get(EnvironmentContext).developmentBuild.value;
+}
+export function isProductionBuild(ctx) {
+    return ctx.get(EnvironmentContext).productionBuild.value;
 }

package/lib/contexts/loadcontext.d.ts

@@ -1,9 +1,14 @@
 import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export declare class LoadContext extends Context {
+    /** @zui */
     isConstructed: Observable<boolean, never>;
+    /** @zui */
     isLoaded: Observable<boolean, never>;
+    /** @zui */
     isStarted: Observable<boolean, never>;
+    /** @zui */
     progressPercent: Observable<number, never>;
     private _startedResolved;
     started: Promise<void>;

package/lib/contexts/loadcontext.js

@@ -1,11 +1,16 @@
 import { Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export class LoadContext extends Context {
     constructor() {
         super(...arguments);
+        /** @zui */
         this.isConstructed = new Observable(false);
+        /** @zui */
         this.isLoaded = new Observable(false);
+        /** @zui */
         this.isStarted = new Observable(false);
+        /** @zui */
         this.progressPercent = new Observable(0);
         this.started = new Promise(resolve => this._startedResolved = resolve);
         this._loadables = new Set();

package/lib/data.d.ts

@@ -1,8 +1,13 @@
-import { BehaviorByID, BehaviorData, ComputedHierarchy, NodeByID, NodeData, ZComponentData } from "./interfaces";
+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;
 export declare function addBehavior(zcomp: ZComponentData, info: BehaviorDataCombined): void;
+export declare function updateComponentProp(zcomp: ZComponentData, prop: string, isConstructorProp: boolean, newValue: Prop | undefined, newIsConstructorProp: boolean): void;
+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 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,4 +1,5 @@
 import { generateKeyBetween, generateNKeysBetween } from "./fractionalindexing";
+import { EntityPropOverrideType } from "./interfaces";
 // Simple memoizing of computed hierarchy
 const computedHierarchies = new Map();
 const computedBehaviors = new Map();
@@ -66,6 +67,80 @@ export function addBehavior(zcomp, info) {
     addEntity(zcomp, info.data.id, info);
     computedBehaviors.delete(zcomp.behaviors);
 }
+export function updateComponentProp(zcomp, prop, isConstructorProp, newValue, newIsConstructorProp) {
+    if (zcomp.constructorProps === undefined)
+        zcomp.constructorProps = {};
+    if (newValue === undefined) {
+        if (isConstructorProp)
+            delete zcomp.constructorProps[prop];
+        else
+            delete zcomp.props[prop];
+        if (zcomp.entityPropOverrides) {
+            for (const [id, override] of Object.entries(zcomp.entityPropOverrides)) {
+                if (override.type !== EntityPropOverrideType.ComponentProp)
+                    continue;
+                if (override.isConstructorProp !== isConstructorProp)
+                    continue;
+                if (override.propName !== prop)
+                    continue;
+                delete zcomp.entityPropOverrides[id];
+            }
+        }
+        return;
+    }
+    if (newValue.name !== prop || isConstructorProp !== newIsConstructorProp) {
+        if (isConstructorProp)
+            delete zcomp.constructorProps[prop];
+        else
+            delete zcomp.props[prop];
+        if (zcomp.entityPropOverrides) {
+            for (const [id, override] of Object.entries(zcomp.entityPropOverrides)) {
+                if (override.type !== EntityPropOverrideType.ComponentProp)
+                    continue;
+                if (override.isConstructorProp !== isConstructorProp)
+                    continue;
+                if (override.propName !== prop)
+                    continue;
+                delete zcomp.entityPropOverrides[id];
+                if (!(override.entityPropIsConstructor && !newIsConstructorProp)) {
+                    const newOverride = clone(override);
+                    newOverride.propName = newValue.name;
+                    newOverride.id = idForEntityPropOverride(override);
+                    zcomp.entityPropOverrides[newOverride.id] = newOverride;
+                }
+            }
+        }
+    }
+    newValue.type.isObservable = !newIsConstructorProp;
+    if (newIsConstructorProp)
+        zcomp.constructorProps[newValue.name] = newValue;
+    else
+        zcomp.props[newValue.name] = newValue;
+}
+export function addEntityPropOverride(zcomp, o) {
+    if (!zcomp.entityPropOverrides)
+        zcomp.entityPropOverrides = {};
+    o.id = idForEntityPropOverride(o);
+    zcomp.entityPropOverrides[o.id] = o;
+}
+export function deleteEntityPropOverride(zcomp, id) {
+    if (!zcomp.entityPropOverrides)
+        return;
+    delete zcomp.entityPropOverrides[id];
+}
+function idForEntityPropOverride(override) {
+    return override.type + ":" + (override.entityPropIsConstructor ? 'constructorprop' : 'prop') + ":" + override.entityID + ":" + override.entityPropPath.join('.');
+}
+export function clone(obj) {
+    try {
+        if (typeof structuredClone !== 'undefined')
+            return structuredClone(obj);
+    }
+    catch {
+        // Ignore
+    }
+    return JSON.parse(JSON.stringify(obj));
+}
 export function addEntity(zcomp, id, info) {
     zcomp.entityProps[id] = info.props;
     zcomp.entityConstructorProps[id] = info.constructorProps;
@@ -265,6 +340,13 @@ export function changeNodeScriptName(zcomp, id, newScriptName) {
 export function deleteEntity(zcomp, id) {
     delete zcomp.entityProps[id];
     delete zcomp.entityConstructorProps[id];
+    if (zcomp.entityPropOverrides) {
+        for (const [overrideID, override] of Object.entries(zcomp.entityPropOverrides)) {
+            if (override.entityID !== id)
+                continue;
+            delete zcomp.entityPropOverrides[overrideID];
+        }
+    }
 }
 export function forEachNodeAncestor(zcomp, id, fn) {
     const node = zcomp.nodes[id];

package/lib/emitter.d.ts

@@ -0,0 +1,25 @@
+import { Observable } from "./observable";
+export declare class Emitter<Args extends Array<any> = []> {
+    hasListeners: Observable<boolean, never>;
+    private _funcs;
+    private _emitting;
+    private _toUnbind;
+    private _needsSort;
+    clearListeners(): void;
+    /**
+     * Add a new handler function
+     * @param f - The callback function to be bound.
+     */
+    addListener(f: (...args: Args) => void, priority?: number): void;
+    /**
+     * Unbind an existing function
+     * @param f - The callback function to be unbound.
+     */
+    removeListener(f: (...args: Args) => void): void;
+    /**
+     * Emit an event
+     *
+     * @param a - The argument to pass to handler functions.
+     */
+    protected _emit(...args: Args): void;
+}

package/lib/emitter.js

@@ -0,0 +1,69 @@
+import { Observable } from "./observable";
+export class Emitter {
+    constructor() {
+        this.hasListeners = new Observable(false);
+        this._funcs = [];
+        this._emitting = false;
+        this._toUnbind = new Set();
+        this._needsSort = false;
+    }
+    clearListeners() {
+        this._funcs = [];
+        this.hasListeners.value = false;
+        this._needsSort = false;
+    }
+    /**
+     * Add a new handler function
+     * @param f - The callback function to be bound.
+     */
+    addListener(f, priority = 0) {
+        this._funcs.push([f, priority]);
+        this._needsSort = true;
+        if (!this.hasListeners.value)
+            this.hasListeners.value = true;
+    }
+    /**
+     * Unbind an existing function
+     * @param f - The callback function to be unbound.
+     */
+    removeListener(f) {
+        if (this._emitting) {
+            this._toUnbind.add(f);
+            return;
+        }
+        this._toUnbind.delete(f);
+        const indx = this._funcs.findIndex(entry => entry[0] === f);
+        if (indx > -1) {
+            this._funcs.splice(indx, 1);
+        }
+        if (this._funcs.length === 0 && this.hasListeners.value)
+            this.hasListeners.value = false;
+    }
+    /**
+     * Emit an event
+     *
+     * @param a - The argument to pass to handler functions.
+     */
+    _emit(...args) {
+        if (this._needsSort) {
+            this._funcs.sort((a, b) => b[1] - a[1]);
+            this._needsSort = false;
+        }
+        this._emitting = true;
+        for (let i = 0, total = this._funcs.length; i < total; i++) {
+            const fn = this._funcs[i][0];
+            try {
+                if (this._toUnbind.has(fn))
+                    continue;
+                fn(...args);
+            }
+            catch (ex) {
+                console.log('Exception in event handler', ex);
+            }
+        }
+        this._emitting = false;
+        if (this._toUnbind.size > 0) {
+            this._toUnbind.forEach(fn => this.removeListener(fn));
+        }
+    }
+}

package/lib/entity.d.ts

@@ -1,16 +1,19 @@
 import { ConstructorForComponent } from "./component";
+import { ContextManager } from "./context";
 import { Event } from "./event";
 import { Observable } from "./observable";
 import { ZComponent } from "./zcomponent";
 export declare class Entity {
+    readonly contextManager: ContextManager;
     private _registered;
+    private _handlersBound;
     private _zcomponent;
     private _disposed;
     /**
      * An event that is fired as the last act of this entity being destroyed.
      */
     readonly onDispose: Event<[]>;
-    constructor();
+    constructor(contextManager: ContextManager);
     get disposed(): boolean;
     private set disposed(value);
     /**
@@ -62,6 +65,7 @@ export declare class Entity {
     getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T;
     /**
      * Register a function to be called when an Event is fired, or an Observable's value changes.
+     * The function will only be bound to the underlying Event or Observable while this entity is enabled.
      *
      * Using this function, rather than attaching your handler directly to the Event or Observable,
      * ensures your handler is automatically released when this entity is disposed.
@@ -69,8 +73,10 @@ export declare class Entity {
      * @param evt The Event or Observable to listen to
      * @param fn A function that will be called when the event fires, or the Observable value changes
      */
-    register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
-    register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void, priority?: number): any;
+    register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void, options?: RegisterOptions): any;
+    register<Type>(observable: Observable<Type>, fn: (v: Type) => void, priority?: number): any;
+    register<Type>(observable: Observable<Type>, fn: (v: Type) => void, options?: RegisterOptions): any;
     /**
      * Unregisters a function that was previously registered to an Event or Observable.
      *
@@ -79,6 +85,7 @@ export declare class Entity {
      */
     unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
     unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    private _updateHandlers;
     /**
      * Destroy this entity, cleaning up any resources that it has created and
      * handler functions or callbacks it has registered.
@@ -100,3 +107,7 @@ export declare class Entity {
     dispose(): never;
     private static callSuperDispose;
 }
+export interface RegisterOptions {
+    priority?: number;
+    bindWhenDisabled?: boolean;
+}

package/lib/entity.js

@@ -2,8 +2,10 @@ import { Event } from "./event";
 import { Observable } from "./observable";
 import { getCurrentZComponentConstruction } from "./zcomponentconstruction";
 export class Entity {
-    constructor() {
+    constructor(contextManager) {
+        this.contextManager = contextManager;
         this._registered = [];
+        this._handlersBound = false;
         this._disposed = false;
         /**
          * An event that is fired as the last act of this entity being destroyed.
@@ -45,7 +47,24 @@ export class Entity {
          * Disabled entities will typically remain visible (if they have a visible appearance).
          */
         this.enabledResolved = new Observable(true);
+        this._updateHandlers = (enabled) => {
+            if (enabled && !this._handlersBound) {
+                for (const [e, fn, priority] of this._registered) {
+                    e.addListener(fn, priority);
+                }
+                this._handlersBound = true;
+            }
+            if (!enabled && this._handlersBound) {
+                for (const [e, fn, _, bindWhenDisabled] of this._registered) {
+                    if (bindWhenDisabled)
+                        continue;
+                    e.removeListener(fn);
+                }
+                this._handlersBound = false;
+            }
+        };
         this._zcomponent = getCurrentZComponentConstruction();
+        this.enabledResolved.addListener(this._updateHandlers);
     }
     get disposed() {
         return this._disposed;
@@ -72,18 +91,20 @@ export class Entity {
             return this._zcomponent;
         throw new Error("getZComponentInstance called in entity passing wrong kind of ZComponent");
     }
-    register(e, fn) {
-        if (e instanceof Event)
-            e.bindfn(fn);
-        else if (e instanceof Observable)
-            e.withValue(fn);
-        this._registered.push([e, fn]);
+    register(e, fn, priorityOrOptions) {
+        const priority = (typeof priorityOrOptions === 'number' ? priorityOrOptions : priorityOrOptions?.priority);
+        const bindWhenDisabled = (typeof priorityOrOptions === 'number' ? false : priorityOrOptions?.bindWhenDisabled);
+        for (const entry of this._registered) {
+            if (entry[0] === e && entry[1] === fn)
+                return;
+        }
+        this._registered.push([e, fn, priority, bindWhenDisabled ?? false]);
+        if (this._handlersBound || bindWhenDisabled) {
+            e.addListener(fn, priority);
+        }
     }
     unregister(e, fn) {
-        if (e instanceof Event)
-            e.unbindfn(fn);
-        else if (e instanceof Observable)
-            e.removeWithValue(fn);
+        e.removeListener(fn);
         this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
     }
     /**
@@ -105,15 +126,13 @@ export class Entity {
      * @returns The result of a call to super.dispose()
      */
     dispose() {
+        this.enabledResolved.removeListener(this._updateHandlers);
         for (const entry of this._registered) {
-            if (entry[0] instanceof Event)
-                entry[0].unbindfn(entry[1]);
-            else if (entry[0] instanceof Observable)
-                entry[0].removeWithValue(entry[1]);
+            entry[0].removeListener(entry[1]);
         }
         this._registered = [];
         this.onDispose.emit();
-        this.onDispose.clear();
+        this.onDispose.clearListeners();
         this.disposed = true;
         return undefined;
     }

package/lib/event.d.ts

@@ -1,20 +1,5 @@
-import { Observable } from "./observable";
-export declare class Event<Args extends Array<any> = []> {
-    hasBindings: Observable<boolean, never>;
-    private _funcs;
-    private _emitting;
-    private _toUnbind;
-    clear(): void;
-    /**
-     * Bind new handler function.
-     * @param f - The callback function to be bound.
-     */
-    bindfn(f: (...args: Args) => void): void;
-    /**
-     * Unbind an existing function.
-     * @param f - The callback function to be unbound.
-     */
-    unbindfn(f: (...args: Args) => void): void;
+import { Emitter } from "./emitter";
+export declare class Event<Args extends Array<any> = []> extends Emitter<Args> {
     /**
      * Emit an event.
      *

package/lib/event.js

@@ -1,61 +1,11 @@
-import { Observable } from "./observable";
-export class Event {
-    constructor() {
-        this.hasBindings = new Observable(false);
-        this._funcs = [];
-        this._emitting = false;
-        this._toUnbind = new Set();
-    }
-    clear() {
-        this._funcs = [];
-        this.hasBindings.value = false;
-    }
-    /**
-     * Bind new handler function.
-     * @param f - The callback function to be bound.
-     */
-    bindfn(f) {
-        this._funcs.push(f);
-        if (!this.hasBindings.value)
-            this.hasBindings.value = true;
-    }
-    /**
-     * Unbind an existing function.
-     * @param f - The callback function to be unbound.
-     */
-    unbindfn(f) {
-        if (this._emitting) {
-            this._toUnbind.add(f);
-            return;
-        }
-        this._toUnbind.delete(f);
-        const indx = this._funcs.indexOf(f);
-        if (indx > -1) {
-            this._funcs.splice(indx, 1);
-        }
-        if (this._funcs.length === 0 && this.hasBindings.value)
-            this.hasBindings.value = false;
-    }
+import { Emitter } from "./emitter";
+export class Event extends Emitter {
     /**
      * Emit an event.
      *
      * @param a - The argument to pass to handler functions.
      */
     emit(...args) {
-        this._emitting = true;
-        for (let i = 0, total = this._funcs.length; i < total; i++) {
-            try {
-                if (this._toUnbind.has(this._funcs[i]))
-                    continue;
-                this._funcs[i](...args);
-            }
-            catch (ex) {
-                console.log('Exception in event handler', ex);
-            }
-        }
-        this._emitting = false;
-        if (this._toUnbind.size > 0) {
-            this._toUnbind.forEach(fn => this.unbindfn(fn));
-        }
+        super._emit(...args);
     }
 }