@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/contexts/analyticscontext.js

@@ -1,22 +1,80 @@
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
 import { Context } from '../context';
+import { zUI } from '../decorators';
 import { Event } from '../event';
 /** @zcontext */
-export class AnalyticsContext extends Context {
-    constructor() {
-        super(...arguments);
-        this.onEvent = new Event();
-    }
-    /** @zprop */
-    logEvent(name, params) {
-        this.onEvent.emit(name, params);
-    }
-}
+let AnalyticsContext = (() => {
+    let _classSuper = Context;
+    let _instanceExtraInitializers = [];
+    let _logEvent_decorators;
+    return class AnalyticsContext extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _logEvent_decorators = [zUI()];
+            __esDecorate(this, null, _logEvent_decorators, { kind: "method", name: "logEvent", static: false, private: false, access: { has: obj => "logEvent" in obj, get: obj => obj.logEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        onEvent = (__runInitializers(this, _instanceExtraInitializers), new Event());
+        /**
+         * @zui
+         */
+        logEvent(name, params) {
+            this.onEvent.emit(name, params);
+        }
+    };
+})();
+export { AnalyticsContext };
 /**
  * Logs an analytics event.
  */
 export function logEvent(mgr, name, params) {
     return mgr.get(AnalyticsContext).logEvent(name, params);
 }
+/**
+ * A decorator that logs an analytics event when the decorated function is called.
+ *
+ * @param name the name of the event to log
+ * @param params any additional parameters to pass ot the analytics provider
+ */
+export function zLogEvent(name, params) {
+    return (originalMethod, context) => function (...args) {
+        logEvent(this.contextManager, name, params);
+        return originalMethod.call(this, ...args);
+    };
+}
 /**
  * Returns the analytics onEvent event.
  */

package/lib/contexts/audiocontextcontext.d.ts

@@ -1,4 +1,4 @@
-import { ContextManager, Context } from '../context';
+import { Context, ContextManager } from '../context';
 /**
  * A context dedicated to audio management.
  * @zcontext

package/lib/contexts/audiocontextcontext.js

@@ -5,6 +5,10 @@ import { nextUserEvent } from './usereventcontext';
  * @zcontext
  */
 export class AudioContextContext extends Context {
+    constructorProps;
+    audioContext = new AudioContext();
+    _layers = new Map();
+    layers = this._layers;
     /**
      * Creates an instance of AudioContextContext.
      * @param contextManager - The current ContextManager
@@ -13,14 +17,6 @@ export class AudioContextContext extends Context {
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);
         this.constructorProps = constructorProps;
-        this.audioContext = new AudioContext();
-        this._layers = new Map();
-        this.layers = this._layers;
-        this._resumeAudioContext = () => {
-            if (this.audioContext.state === 'suspended' && document.visibilityState === 'visible') {
-                this.audioContext.resume();
-            }
-        };
         nextUserEvent(contextManager).then(() => {
             this.audioContext.resume();
             document.addEventListener('visibilitychange', this._resumeAudioContext);
@@ -61,6 +57,11 @@ export class AudioContextContext extends Context {
         this.audioContext.close();
         return super.dispose();
     }
+    _resumeAudioContext = () => {
+        if (this.audioContext.state === 'suspended' && document.visibilityState === 'visible') {
+            this.audioContext.resume();
+        }
+    };
 }
 /**
  * Returns the audio context.

package/lib/contexts/canvascontext.d.ts

@@ -1,6 +1,8 @@
-import { ContextManager, Context } from '../context';
+import { Context, ContextManager } from '../context';
+import type { Entity, RegisterOptions } from '../entity';
 import { Event } from '../event';
 import { Observable } from '../observable';
+import { ValueOf } from '../types';
 /**
  * Defines options for initializing a `CanvasContext`.
  * - `canvas`: Optional HTMLCanvasElement to be managed.
@@ -27,8 +29,10 @@ export declare class CanvasContext extends Context {
     readonly canvas: HTMLCanvasElement;
     readonly overlayDefault: HTMLDivElement;
     readonly overlay: Observable<HTMLDivElement>;
-    /** @zui */
-    readonly size: Observable<[number, number]>;
+    readonly size: Observable<[
+        number,
+        number
+    ]>;
     private _resizeObserver;
     /**
      * Creates an instance of CanvasContext.
@@ -55,23 +59,25 @@ export declare class CanvasContext extends Context {
 /**
  * Enum representing horizontal alignment options: 'left', 'center', 'right'.
  */
-export declare enum HorizontalAlignment {
-    'left' = "left",
-    'leftSafe' = "leftSafe",
-    'center' = "center",
-    'right' = "right",
-    'rightSafe' = "rightSafe"
-}
+export declare const HorizontalAlignment: {
+    readonly left: "left";
+    readonly leftSafe: "leftSafe";
+    readonly center: "center";
+    readonly right: "right";
+    readonly rightSafe: "rightSafe";
+};
+export type HorizontalAlignmentValue = ValueOf<typeof HorizontalAlignment>;
 /**
  * Enum representing vertical alignment options: 'top', 'center', 'bottom', 'topSafe', 'bottomSafe'.
  */
-export declare enum VerticalAlignment {
-    'top' = "top",
-    'topSafe' = "topSafe",
-    'center' = "center",
-    'bottom' = "bottom",
-    'bottomSafe' = "bottomSafe"
-}
+export declare const VerticalAlignment: {
+    readonly top: "top";
+    readonly topSafe: "topSafe";
+    readonly center: "center";
+    readonly bottom: "bottom";
+    readonly bottomSafe: "bottomSafe";
+};
+export type VerticalAlignmentValue = ValueOf<typeof VerticalAlignment>;
 /**
  * Retrieves the canvas element from the `CanvasContext`.
  * @param {ContextManager} mgr The context manager instance.
@@ -122,4 +128,12 @@ export declare function useCanvasToArrayBuffer(mgr: ContextManager): Promise<Arr
  * @param {VerticalAlignment} v The vertical alignment value.
  * @returns {string} A string of class names for the specified alignments.
  */
-export declare function classNameForAlignment(h: HorizontalAlignment, v: VerticalAlignment): string;
+export declare function classNameForAlignment(h: HorizontalAlignmentValue, v: VerticalAlignmentValue): string;
+/**
+ * A decorator that will register the decorated function to be called when the canvas `onBeforeRender` event is fired.
+ */
+export declare function zOnBeforeRender<EntityType extends Entity>(opts?: RegisterOptions): (originalMethod: (dt: number) => any, context: ClassMethodDecoratorContext<EntityType>) => any;
+/**
+ * A decorator that will register the decorated function to be called when the canvas `onBeforeRender` event is fired.
+ */
+export declare function zOnAfterRender<EntityType extends Entity>(opts?: RegisterOptions): (originalMethod: (dt: number) => any, context: ClassMethodDecoratorContext<EntityType>) => any;

package/lib/contexts/canvascontext.js

@@ -1,4 +1,39 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 import { Context } from '../context';
+import { zUI } from '../decorators';
 import { Event } from '../event';
 import { Observable } from '../observable';
 /**
@@ -11,140 +46,158 @@ import { Observable } from '../observable';
  * - `size`: Observable for the canvas size, updated on resize.
  * @zcontext
  * */
-export class CanvasContext extends Context {
-    /**
-     * Creates an instance of CanvasContext.
-     * @param contextManager - The current ContextManager
-     * @param constructorProps - The constructor properties.
-     */
-    constructor(contextManager, constructorProps) {
-        super(contextManager, constructorProps);
-        this.constructorProps = constructorProps;
-        this.onBeforeRender = new Event();
-        this.onAfterRender = new Event();
-        this._resizeObserver = new ResizeObserver(entries => {
+let CanvasContext = (() => {
+    let _classSuper = Context;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    return class CanvasContext extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [zUI()];
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        constructorProps;
+        onBeforeRender = new Event();
+        onAfterRender = new Event();
+        canvas;
+        overlayDefault;
+        overlay;
+        size = __runInitializers(this, _size_initializers, void 0);
+        _resizeObserver = (__runInitializers(this, _size_extraInitializers), new ResizeObserver(entries => {
             for (const entry of entries) {
                 if (entry.target !== this.canvas)
                     continue;
                 this.size.value = [entry.contentRect.width, entry.contentRect.height];
             }
-        });
-        if (!constructorProps.canvas) {
-            this.canvas = document.createElement('canvas');
-            this.canvas.style.position = 'fixed';
-            this.canvas.style.top = '0px';
-            this.canvas.style.left = '0px';
-            this.canvas.style.width = '100%';
-            this.canvas.style.height = '100%';
-            this.canvas.style.touchAction = 'none';
-            this.canvas.style.webkitUserSelect = 'none';
-            this.canvas.style.userSelect = 'none';
-            document.body.append(this.canvas);
+        }));
+        /**
+         * Creates an instance of CanvasContext.
+         * @param contextManager - The current ContextManager
+         * @param constructorProps - The constructor properties.
+         */
+        constructor(contextManager, constructorProps) {
+            super(contextManager, constructorProps);
+            this.constructorProps = constructorProps;
+            if (!constructorProps.canvas) {
+                this.canvas = document.createElement('canvas');
+                this.canvas.style.position = 'fixed';
+                this.canvas.style.top = '0px';
+                this.canvas.style.left = '0px';
+                this.canvas.style.width = '100%';
+                this.canvas.style.height = '100%';
+                this.canvas.style.touchAction = 'none';
+                this.canvas.style.webkitUserSelect = 'none';
+                this.canvas.style.userSelect = 'none';
+                document.body.append(this.canvas);
+            }
+            else {
+                this.canvas = constructorProps.canvas;
+            }
+            this.overlayDefault = constructorProps.overlay ?? document.createElement('div');
+            this.overlayDefault.id = 'zcomponent-overlay';
+            if (!constructorProps.overlay) {
+                document.body.append(this.overlayDefault);
+            }
+            this.overlay = new Observable(this.overlayDefault, undefined, false);
+            this.size = new Observable([this.canvas.clientWidth, this.canvas.clientHeight]);
+            this._resizeObserver.observe(this.canvas);
+            let lastRect;
+            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;
+                this.overlayDefault.style.top = rect.top.toString() + 'px';
+                this.overlayDefault.style.left = rect.left.toString() + 'px';
+                this.overlayDefault.style.width = rect.width.toString() + 'px';
+                this.overlayDefault.style.height = rect.height.toString() + 'px';
+                lastRect = rect;
+            });
         }
-        else {
-            this.canvas = constructorProps.canvas;
+        /**
+         * Captures the canvas content and returns it as a Data URL after the current frame has rendered.
+         * @param type The MIME image format type.
+         * @param quality Between 0 and 1 indicating image quality. Defaults to 1.
+         */
+        async captureToDataURL(type = 'image/jpeg', quality = 1) {
+            await useOnAfterRender(this.contextManager).next;
+            return this.canvas.toDataURL(type, quality);
         }
-        this.overlayDefault = constructorProps.overlay ?? document.createElement('div');
-        this.overlayDefault.id = 'zcomponent-overlay';
-        if (!constructorProps.overlay) {
-            document.body.append(this.overlayDefault);
+        /**
+         * Captures the canvas content and returns it as an ArrayBuffer after the current frame has rendered.
+         * @param type The MIME image format type.
+         * @param quality Between 0 and 1 indicating image quality. Defaults to 1.
+         */
+        async captureToArrayBuffer(type = 'image/jpeg', quality = 1) {
+            await useOnAfterRender(this.contextManager).next;
+            const blob = await this.canvasToBlob(type, quality);
+            return this.blobToArrayBuffer(blob);
         }
-        this.overlay = new Observable(this.overlayDefault, undefined, false);
-        this.size = new Observable([this.canvas.clientWidth, this.canvas.clientHeight]);
-        this._resizeObserver.observe(this.canvas);
-        let lastRect;
-        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;
-            this.overlayDefault.style.top = rect.top.toString() + 'px';
-            this.overlayDefault.style.left = rect.left.toString() + 'px';
-            this.overlayDefault.style.width = rect.width.toString() + 'px';
-            this.overlayDefault.style.height = rect.height.toString() + 'px';
-            lastRect = rect;
-        });
-    }
-    /**
-     * Captures the canvas content and returns it as a Data URL after the current frame has rendered.
-     * @param type The MIME image format type.
-     * @param quality Between 0 and 1 indicating image quality. Defaults to 1.
-     */
-    async captureToDataURL(type = 'image/jpeg', quality = 1) {
-        await useOnAfterRender(this.contextManager).next;
-        return this.canvas.toDataURL(type, quality);
-    }
-    /**
-     * Captures the canvas content and returns it as an ArrayBuffer after the current frame has rendered.
-     * @param type The MIME image format type.
-     * @param quality Between 0 and 1 indicating image quality. Defaults to 1.
-     */
-    async captureToArrayBuffer(type = 'image/jpeg', quality = 1) {
-        await useOnAfterRender(this.contextManager).next;
-        const blob = await this.canvasToBlob(type, quality);
-        return this.blobToArrayBuffer(blob);
-    }
-    canvasToBlob(type, quality) {
-        return new Promise((resolve, reject) => {
-            this.canvas.toBlob(blob => {
-                if (blob) {
-                    resolve(blob);
-                }
-                else {
-                    reject(new Error('Failed to capture canvas as Blob'));
-                }
-            }, type, quality);
-        });
-    }
-    blobToArrayBuffer(blob) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                if (reader.result instanceof ArrayBuffer) {
-                    resolve(reader.result);
-                }
-                else {
-                    reject(new Error('Failed to read Blob as ArrayBuffer'));
-                }
-            };
-            reader.onerror = () => {
-                reject(new Error('Error reading Blob as ArrayBuffer'));
-            };
-            reader.readAsArrayBuffer(blob);
-        });
-    }
-    dispose() {
-        this.onBeforeRender.clearListeners();
-        this.onAfterRender.clearListeners();
-        this._resizeObserver.disconnect();
-        if (!this.constructorProps.canvas)
-            this.canvas.remove();
-        if (!this.constructorProps.overlay)
-            this.overlayDefault.remove();
-        return super.dispose();
-    }
-}
+        canvasToBlob(type, quality) {
+            return new Promise((resolve, reject) => {
+                this.canvas.toBlob(blob => {
+                    if (blob) {
+                        resolve(blob);
+                    }
+                    else {
+                        reject(new Error('Failed to capture canvas as Blob'));
+                    }
+                }, type, quality);
+            });
+        }
+        blobToArrayBuffer(blob) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    if (reader.result instanceof ArrayBuffer) {
+                        resolve(reader.result);
+                    }
+                    else {
+                        reject(new Error('Failed to read Blob as ArrayBuffer'));
+                    }
+                };
+                reader.onerror = () => {
+                    reject(new Error('Error reading Blob as ArrayBuffer'));
+                };
+                reader.readAsArrayBuffer(blob);
+            });
+        }
+        dispose() {
+            this.onBeforeRender.clearListeners();
+            this.onAfterRender.clearListeners();
+            this._resizeObserver.disconnect();
+            if (!this.constructorProps.canvas)
+                this.canvas.remove();
+            if (!this.constructorProps.overlay)
+                this.overlayDefault.remove();
+            return super.dispose();
+        }
+    };
+})();
+export { CanvasContext };
 /**
  * Enum representing horizontal alignment options: 'left', 'center', 'right'.
  */
-export var HorizontalAlignment;
-(function (HorizontalAlignment) {
-    HorizontalAlignment["left"] = "left";
-    HorizontalAlignment["leftSafe"] = "leftSafe";
-    HorizontalAlignment["center"] = "center";
-    HorizontalAlignment["right"] = "right";
-    HorizontalAlignment["rightSafe"] = "rightSafe";
-})(HorizontalAlignment || (HorizontalAlignment = {}));
+export const HorizontalAlignment = {
+    left: 'left',
+    leftSafe: 'leftSafe',
+    center: 'center',
+    right: 'right',
+    rightSafe: 'rightSafe',
+};
+Object.freeze(HorizontalAlignment);
 /**
  * Enum representing vertical alignment options: 'top', 'center', 'bottom', 'topSafe', 'bottomSafe'.
  */
-export var VerticalAlignment;
-(function (VerticalAlignment) {
-    VerticalAlignment["top"] = "top";
-    VerticalAlignment["topSafe"] = "topSafe";
-    VerticalAlignment["center"] = "center";
-    VerticalAlignment["bottom"] = "bottom";
-    VerticalAlignment["bottomSafe"] = "bottomSafe";
-})(VerticalAlignment || (VerticalAlignment = {}));
+export const VerticalAlignment = {
+    top: 'top',
+    topSafe: 'topSafe',
+    center: 'center',
+    bottom: 'bottom',
+    bottomSafe: 'bottomSafe',
+};
+Object.freeze(VerticalAlignment);
 /**
  * Retrieves the canvas element from the `CanvasContext`.
  * @param {ContextManager} mgr The context manager instance.
@@ -255,3 +308,25 @@ export function classNameForAlignment(h, v) {
         names.push('zcomponent-h-vc');
     return names.join(' ');
 }
+/**
+ * A decorator that will register the decorated function to be called when the canvas `onBeforeRender` event is fired.
+ */
+export function zOnBeforeRender(opts) {
+    return (originalMethod, context) => {
+        context.addInitializer(function () {
+            this.register(useOnBeforeRender(this.contextManager), (...args) => this[context.name].call(this, ...args), opts);
+        });
+        return originalMethod;
+    };
+}
+/**
+ * A decorator that will register the decorated function to be called when the canvas `onBeforeRender` event is fired.
+ */
+export function zOnAfterRender(opts) {
+    return (originalMethod, context) => {
+        context.addInitializer(function () {
+            this.register(useOnAfterRender(this.contextManager), (...args) => this[context.name].call(this, ...args), opts);
+        });
+        return originalMethod;
+    };
+}