@zcomponent/core 0.0.14 → 0.0.16

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.js

@@ -17,8 +17,8 @@ export class Behavior extends Entity {
                 this.enabledResolved.value = newValue;
             }
         };
-        this.register(this.enabled, this._updateEnabledResolved);
-        this.register(instance.enabledResolved, this._updateEnabledResolved);
+        this.register(this.enabled, this._updateEnabledResolved, { bindWhenDisabled: true });
+        this.register(instance.enabledResolved, this._updateEnabledResolved, { bindWhenDisabled: true });
     }
 }
 const behaviorsToRunAtDesignTime = new Set();

package/lib/component.js

@@ -36,8 +36,8 @@ export class Component extends Entity {
             context.registerComponent(this, this.tags.value);
         };
         this.constructChildren(constructorProps?.children ?? []);
-        this.register(this.enabled, this._updateEnabledResolved);
-        this.register(this.tags, this._updateTags);
+        this.register(this.enabled, this._updateEnabledResolved, { bindWhenDisabled: true });
+        this.register(this.tags, this._updateTags, { bindWhenDisabled: true });
     }
     constructChildren(children, contextManager) {
         contextManager = contextManager ?? this.contextManager;

package/lib/contexts/canvascontext.js

@@ -37,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;
@@ -49,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/emitter.d.ts

@@ -0,0 +1,23 @@
+export declare class Emitter<Args extends Array<any> = []> {
+    protected _funcs: [fn: ((...args: Args) => void), priority: number][];
+    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,62 @@
+export class Emitter {
+    constructor() {
+        this._funcs = [];
+        this._emitting = false;
+        this._toUnbind = new Set();
+        this._needsSort = false;
+    }
+    clearListeners() {
+        this._funcs = [];
+        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;
+    }
+    /**
+     * 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);
+        }
+    }
+    /**
+     * 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

@@ -6,6 +6,7 @@ import { ZComponent } from "./zcomponent";
 export declare class Entity {
     readonly contextManager: ContextManager;
     private _registered;
+    private _handlersBound;
     private _zcomponent;
     private _disposed;
     /**
@@ -64,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.
@@ -71,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.
      *
@@ -81,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.
@@ -102,3 +107,7 @@ export declare class Entity {
     dispose(): never;
     private static callSuperDispose;
 }
+export interface RegisterOptions {
+    priority?: number;
+    bindWhenDisabled?: boolean;
+}

package/lib/entity.js

@@ -5,6 +5,7 @@ export class Entity {
     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.
@@ -46,7 +47,26 @@ 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, bindWhenDisabled] of this._registered) {
+                    if (bindWhenDisabled)
+                        continue;
+                    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;
@@ -73,22 +93,20 @@ export class Entity {
             return this._zcomponent;
         throw new Error("getZComponentInstance called in entity passing wrong kind of ZComponent");
     }
-    register(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;
         }
-        if (e instanceof Event)
-            e.bindfn(fn);
-        else if (e instanceof Observable)
-            e.withValue(fn);
-        this._registered.push([e, fn]);
+        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));
     }
     /**
@@ -110,15 +128,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,24 +1,14 @@
+import { Emitter } from "./emitter";
 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;
+export declare class Event<Args extends Array<any> = []> extends Emitter<Args> {
+    hasListeners: Observable<boolean, never>;
     /**
      * Emit an event.
      *
      * @param a - The argument to pass to handler functions.
      */
     emit(...args: Args): void;
+    clearListeners(): void;
+    addListener(f: (...args: Args) => void, priority?: number): void;
+    removeListener(f: (...args: Args) => void): void;
 }

package/lib/event.js

@@ -1,40 +1,9 @@
+import { Emitter } from "./emitter";
 import { Observable } from "./observable";
-export class Event {
+export class Event extends Emitter {
     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;
+        super(...arguments);
+        this.hasListeners = new Observable(false);
     }
     /**
      * Emit an event.
@@ -42,20 +11,20 @@ export class 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);
+    }
+    clearListeners() {
+        super.clearListeners();
+        if (!this.hasListeners.value)
+            this.hasListeners.value = true;
+    }
+    addListener(f, priority) {
+        super.addListener(f, priority);
+        this.hasListeners.value = true;
+    }
+    removeListener(f) {
+        super.removeListener(f);
+        if (this._funcs.length === 0 && this.hasListeners.value)
+            this.hasListeners.value = false;
     }
 }

package/lib/observable.d.ts

@@ -1,3 +1,4 @@
+import { Emitter } from "./emitter";
 type Resolved<T, M> = [T] extends [never] ? M : T;
 /**
  * A class that holds a value and watches it for changes (deeply by default).
@@ -31,14 +32,11 @@ type Resolved<T, M> = [T] extends [never] ? M : T;
  * @typeParam Type - The type of the contained value
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
-export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> {
+export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> extends Emitter<[Resolved<Type, TypeInternal>]> {
     private _default;
     private _deep;
     private _proxies;
     private _value;
-    private _nextToken;
-    private _handlersByToken;
-    private _tokenByHandler;
     /**
      * Constructs a new Observable
      *
@@ -56,8 +54,7 @@ export declare class Observable<Type = never, TypeInternal extends any[] | [] |
     get value(): Resolved<Type, TypeInternal>;
     private _wrap;
     set value(v: Resolved<Type, TypeInternal> | undefined);
-    withValue(fn: (v: Resolved<Type, TypeInternal>) => void): number;
-    removeWithValue(fnOrToken: number | ((v: Resolved<Type, TypeInternal>) => void)): void;
+    addListener(fn: (v: Resolved<Type, TypeInternal>) => void, priority?: number): void;
     private _emitValue;
 }
 export {};

package/lib/observable.js

@@ -1,3 +1,4 @@
+import { Emitter } from "./emitter";
 /**
  * A class that holds a value and watches it for changes (deeply by default).
  *
@@ -30,14 +31,12 @@
  * @typeParam Type - The type of the contained value
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
-export class Observable {
+export class Observable extends Emitter {
     constructor(_default, withHandler, _deep = true) {
+        super();
         this._default = _default;
         this._deep = _deep;
         this._proxies = new WeakMap();
-        this._nextToken = 0;
-        this._handlersByToken = new Map();
-        this._tokenByHandler = new Map();
         let initial = this._default;
         if (Array.isArray(this._default) && this._deep) {
             initial = this._default.slice();
@@ -49,7 +48,7 @@ export class Observable {
         }
         this._value = this._wrap(initial);
         if (withHandler)
-            this.withValue(withHandler);
+            this.addListener(withHandler);
     }
     /**
      * Access the current value for this Observable. Changing this value (or, unless deep inspection is disabled, its recursive elements and keys) will trigger any registered handlers to be called with the new value.
@@ -117,40 +116,16 @@ export class Observable {
         this._value = this._wrap(v);
         this._emitValue();
     }
-    withValue(fn) {
-        const token = this._nextToken++;
-        this._handlersByToken.set(token, fn);
-        this._tokenByHandler.set(fn, token);
+    addListener(fn, priority = 0) {
+        super.addListener(fn);
         try {
             fn(this._value.proxy);
         }
         catch (err) {
             console.error(err);
         }
-        return token;
-    }
-    removeWithValue(fnOrToken) {
-        if (typeof fnOrToken === 'number') {
-            const handler = this._handlersByToken.get(fnOrToken);
-            if (handler !== undefined)
-                this._tokenByHandler.delete(handler);
-            this._handlersByToken.delete(fnOrToken);
-        }
-        else {
-            const token = this._tokenByHandler.get(fnOrToken);
-            if (token !== undefined)
-                this._handlersByToken.delete(token);
-            this._tokenByHandler.delete(fnOrToken);
-        }
     }
     _emitValue() {
-        for (let [key, h] of this._handlersByToken) {
-            try {
-                h(this._value.proxy);
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
+        this._emit(this._value.proxy);
     }
 }

package/lib/selectors.js

@@ -218,7 +218,7 @@ function typeOutputForProp(prop) {
     const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
     return `	/**${comments}
 	* @zprop
-	* ${prop.default ? `@zdefault ${JSON.stringify(prop.default)}` : ''}
+	* ${prop.default !== undefined ? `@zdefault ${JSON.stringify(prop.default)}` : ''}
 	*/
 	public ${prop.name}: Observable<${outputForType(prop.type, true)}>;`;
 }
@@ -226,7 +226,7 @@ function typeOutputForConstructorProp(prop) {
     const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
     return `	/**${comments}
 	* @zprop
-	* ${prop.default && `@zdefault ${JSON.stringify(prop.default)}`}
+	* ${prop.default !== undefined && `@zdefault ${JSON.stringify(prop.default)}`}
 	*/
 	${prop.name}: ${outputForType(prop.type, true)};`;
 }

package/lib/zcomponent.d.ts

@@ -38,6 +38,7 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     };
     entityByID: Map<string, Entity>;
     entityByLabel: Map<string, Entity>;
+    nodeByLabel: Map<string, Component<any, ConstructorProps>>;
     private _constructedResolve;
     constructed: Promise<void>;
     isConstructed: boolean;

package/lib/zcomponent.js

@@ -23,6 +23,7 @@ export class ZComponent extends Component {
         this.nodes = {};
         this.entityByID = new Map();
         this.entityByLabel = new Map();
+        this.nodeByLabel = new Map();
         this.constructed = new Promise(resolve => this._constructedResolve = resolve);
         this.isConstructed = false;
         this._nodesById = new Map();
@@ -75,8 +76,10 @@ export class ZComponent extends Component {
                 setCurrentZComponentConstruction(that);
                 super(contextManager, constructorProps);
                 that.entityByID.set(nodeId, this);
-                if (node?.label)
+                if (node?.label) {
                     that.entityByLabel.set(node.label, this);
+                    that.nodeByLabel.set(node.label, this);
+                }
                 that._nodesById.set(nodeId, this);
                 for (const element of this.elementsResolved) {
                     that.idByElement.set(element, nodeId);
@@ -224,7 +227,7 @@ export class ZComponent extends Component {
                         if (!v)
                             continue;
                         if (v instanceof Observable)
-                            v.withValue(val => this._setEntityPropPath(entity, override.entityPropPath, val));
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
                         else
                             this._setEntityPropPath(entity, override.entityPropPath, v);
                         break;
@@ -236,7 +239,7 @@ export class ZComponent extends Component {
                         if (!v)
                             continue;
                         if (v instanceof Observable)
-                            v.withValue(val => this._setEntityPropPath(entity, override.entityPropPath, val));
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
                         else
                             this._setEntityPropPath(entity, override.entityPropPath, v);
                         break;
@@ -255,7 +258,7 @@ export class ZComponent extends Component {
                         if (!v)
                             continue;
                         if (v instanceof Observable)
-                            v.withValue(val => this._setEntityPropPath(entity, override.entityPropPath, val));
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
                         else
                             this._setEntityPropPath(entity, override.entityPropPath, v);
                         break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",