@zcomponent/core 1.14.3 → 1.16.0-beta

package/lib/context.d.ts

@@ -1,44 +1,161 @@
+/**
+ * Type representing a constructor for a context.
+ *
+ * It defines a constructor signature for a context with a given set of constructor properties.
+ * @typeParam ConstructorProps - The type of the constructor properties, defaulting to a string-indexed object.
+ */
 export type ContextConstructor<ConstructorProps extends {
     [id: string]: any;
 } = {
     [id: string]: any;
 }> = new (contextManager: ContextManager, props: ConstructorProps) => Context<ConstructorProps>;
+/**
+ * Type representing the keys of an object that are required.
+ *
+ * This type extracts the keys from an object type where the corresponding properties are not optional.
+ * @typeParam T - The object type to analyze for required keys.
+ */
 type RequiredKeys<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
 }[keyof T];
+/**
+ * Type representing the constructor properties of a given type.
+ *
+ * It extracts the constructor properties from a type that has a constructor signature.
+ * @typeParam T - The type with a constructor signature to extract the properties from.
+ */
 type ConstructorProps<T> = T extends {
     new (contextManager: ContextManager, props: infer U): any;
 } ? U : never;
+/**
+ * Type representing a constructor where all properties are optional.
+ *
+ * This type filters for constructors where all the constructor properties are optional.
+ * @typeParam T - The constructor type to filter.
+ */
 type ConstructorWithOnlyOptional<T> = RequiredKeys<ConstructorProps<T>> extends never ? T : never;
+/**
+ * Type representing a constructor with its associated properties.
+ *
+ * This type creates a tuple consisting of a constructor type and its corresponding properties.
+ * @typeParam T - The type of the context constructor.
+ */
 type ConstructorWithProps<T extends ContextConstructor = ContextConstructor> = [T, ConstructorParameters<T>[1]];
+/**
+ * Type representing instances of a list of constructors with properties.
+ *
+ * It maps an array of constructors with properties to their corresponding instance types.
+ * @typeParam T - An array type of `ConstructorWithProps`.
+ */
 type InstancesOfConstructorsWithProps<T extends Array<ConstructorWithProps>> = {
     [K in keyof T]: InstanceType<T[K][0]>;
 };
+/**
+ * The base class for all contexts.
+ *
+ * Contexts are used to manage and maintain state and functionality that can be shared across different components and behaviors.
+ * @typeParam ConstructorPropsType - The type of the constructor properties, defaulting to an empty object.
+ */
 export declare class Context<ConstructorPropsType extends {
     [id: string]: any;
 } = {}> {
     contextManager: ContextManager;
     constructorProps: ConstructorPropsType;
     disposed: boolean;
+    /**
+     * Creates an instance of Context.
+     * @param contextManager The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager: ContextManager, constructorProps: ConstructorPropsType);
     dispose(): never;
     private static callSuperDispose;
 }
+/**
+ * Class for managing contexts.
+ *
+ * This class provides functionality to create, retrieve, and manage contexts.
+ *
+ * The `ContextManager` is also used to create components, behaviors, and other objects that require a context.
+ */
 export declare class ContextManager {
     private _byKey;
     private _root;
+    /**
+     * Creates a new instance of `ContextManager`.
+     *
+     * @typeParam T - The type of the context to initialize.
+     * @param ctx - The constructor of the context to initialize.
+     * @param props - Optional properties to initialize the context.
+     * @returns A new instance of `ContextManager`.
+     */
     static create<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): ContextManager;
     static create<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): ContextManager;
+    /**
+     * Retrieves an existing context instance or creates a new one if it does not exist.
+     *
+     * @typeParam T - The type of the context to retrieve or create.
+     * @param ctx - The constructor of the context to retrieve or create.
+     * @param props - Optional properties to initialize the context if it needs to be created.
+     * @returns The retrieved or newly created context instance.
+     */
     get<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): InstanceType<T>;
     get<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): InstanceType<T>;
+    /**
+     * Retrieves an existing context instance, or returns undefined if it does not exist.
+     *
+     * @typeParam T - The type of the context to retrieve.
+     * @param ctx - The constructor of the context to retrieve.
+     * @returns The retrieved context instance or undefined.
+     */
     getExisting<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T): InstanceType<T> | undefined;
+    /**
+     * Retrieves an existing context or throws an error if it does not exist.
+     *
+     * @typeParam T - The type of the context to retrieve.
+     * @param ctx - The constructor of the context to retrieve.
+     * @returns The retrieved context instance.
+     * @throws Error if the required context is not present.
+     */
     getOrThrow<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T): InstanceType<T>;
+    /**
+     * Adds a context to the `ContextManager`.
+     *
+     * @typeParam T - The type of the context to add.
+     * @param ctx - The constructor of the context to add.
+     * @param props - Properties to initialize the context.
+     * @returns The newly added context instance.
+     */
     add<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): InstanceType<T>;
     add<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): InstanceType<T>;
+    /**
+     * Creates a fork of the `ContextManager` with a specific context added.
+     *
+     * @typeParam T - The type of the context to fork.
+     * @param ctx - The constructor of the context to add.
+     * @param props - Optional properties to initialize the context.
+     * @returns A tuple containing the forked `ContextManager` and the newly added context instance.
+     */
     fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): [ContextManager, InstanceType<T>];
     fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): [ContextManager, InstanceType<T>];
+    /**
+     * Factory function for creating new instances of a given context type, along with associated properties.
+     *
+     * @typeParam T - An array type representing a combination of a constructor and its corresponding properties.
+     * @returns An array where each element is a tuple, with the first element being the context manager and the second being the instance created by the constructor.
+     */
     forkMultiple<T extends ConstructorWithProps[]>(...ctx: T): [ContextManager, InstancesOfConstructorsWithProps<T>];
+    /**
+     * Creates a new forked `ContextManager` instance with a shallow copy of the current context.
+     *
+     * @returns A new `ContextManager` instance forked from the current context.
+     */
     emptyFork(): ContextManager;
+    /**
+     * Deletes a context from the manager.
+     *
+     * @param ctx - The constructor of the context to delete.
+     */
     delete(ctx: ContextConstructor): void;
     private _keyForContext;
 }

package/lib/context.js

@@ -1,5 +1,16 @@
 let _nextContextKey = 1;
+/**
+ * The base class for all contexts.
+ *
+ * Contexts are used to manage and maintain state and functionality that can be shared across different components and behaviors.
+ * @typeParam ConstructorPropsType - The type of the constructor properties, defaulting to an empty object.
+ */
 export class Context {
+    /**
+     * Creates an instance of Context.
+     * @param contextManager The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager, constructorProps) {
         this.contextManager = contextManager;
         this.constructorProps = constructorProps;
@@ -12,6 +23,13 @@ export class Context {
 }
 Context.callSuperDispose = Symbol('Calling super.dispose() is mandatory');
 const keysByType = new Map();
+/**
+ * Class for managing contexts.
+ *
+ * This class provides functionality to create, retrieve, and manage contexts.
+ *
+ * The `ContextManager` is also used to create components, behaviors, and other objects that require a context.
+ */
 export class ContextManager {
     constructor() {
         this._byKey = {};
@@ -29,14 +47,29 @@ export class ContextManager {
             return this.add(ctx, props);
         return entry ?? this.add(ctx, props);
     }
+    /**
+     * Retrieves an existing context instance, or returns undefined if it does not exist.
+     *
+     * @typeParam T - The type of the context to retrieve.
+     * @param ctx - The constructor of the context to retrieve.
+     * @returns The retrieved context instance or undefined.
+     */
     getExisting(ctx) {
         const key = this._keyForContext(ctx);
         return this._byKey[key];
     }
+    /**
+     * Retrieves an existing context or throws an error if it does not exist.
+     *
+     * @typeParam T - The type of the context to retrieve.
+     * @param ctx - The constructor of the context to retrieve.
+     * @returns The retrieved context instance.
+     * @throws Error if the required context is not present.
+     */
     getOrThrow(ctx) {
         const entry = this.getExisting(ctx);
         if (!entry)
-            throw new Error("Required context not present");
+            throw new Error('Required context not present');
         return entry;
     }
     add(ctx, props) {
@@ -54,6 +87,12 @@ export class ContextManager {
         ret._byKey[key] = instance;
         return [ret, instance];
     }
+    /**
+     * Factory function for creating new instances of a given context type, along with associated properties.
+     *
+     * @typeParam T - An array type representing a combination of a constructor and its corresponding properties.
+     * @returns An array where each element is a tuple, with the first element being the context manager and the second being the instance created by the constructor.
+     */
     forkMultiple(...ctx) {
         const ret = new ContextManager();
         ret._root = this._root;
@@ -67,11 +106,21 @@ export class ContextManager {
         }
         return [ret, instances];
     }
+    /**
+     * Creates a new forked `ContextManager` instance with a shallow copy of the current context.
+     *
+     * @returns A new `ContextManager` instance forked from the current context.
+     */
     emptyFork() {
         const ret = new ContextManager();
         ret._byKey = Object.create(this._byKey);
         return ret;
     }
+    /**
+     * Deletes a context from the manager.
+     *
+     * @param ctx - The constructor of the context to delete.
+     */
     delete(ctx) {
         const key = this._keyForContext(ctx);
         const existing = this._byKey[key];
@@ -87,73 +136,3 @@ export class ContextManager {
         return key;
     }
 }
-// export function defineContextType<T extends {}>(): ContextType<T>;
-// export function defineContextType<T extends {}, Args extends Array<any> = []>(def: (ctx: ContextManager, ...args: Args) => T): ContextTypeWithDefault<T, Args>;
-// export function defineContextType<T extends {}, Args extends Array<any> = []>(def?: (ctx: ContextManager, ...args: Args) => T): ContextType<T> | ContextTypeWithDefault<T, Args> {
-// 	_nextContextKey++;
-// 	if (def) {
-// 		return {
-// 			key: _nextContextKey.toString(),
-// 			hasDefault: def !== undefined,
-// 			def,
-// 		}
-// 	} else return {
-// 		key: _nextContextKey.toString(),
-// 		hasDefault: false
-// 	}
-// }
-// export class ContextManager {
-// 	private _byKey: { [id: string]: unknown | undefined } = {};
-// 	private _root: ContextManager = this;
-// 	constructor() {
-// 	}
-// 	static create(): ContextManager;
-// 	static create<T extends {}>(type: ContextType<T>, props: T): ContextManager;
-// 	static create<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): ContextManager;
-// 	static create<T extends {}, Args extends Array<any>>(type?: ContextType<T> | ContextTypeWithDefault<T, Args>, ...args: Args): ContextManager {
-// 		const ctx = new ContextManager();
-// 		if (type) {
-// 			if (type.hasDefault) ctx.add(type, ...args);
-// 			else ctx.add(type, args[0]);
-// 		}
-// 		return ctx;
-// 	}
-// 	add<T extends {}>(type: ContextType<T>, obj: T): T;
-// 	add<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): T;
-// 	add<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>, ...args: Args): T {
-// 		const root = this._root;
-// 		const t = type.hasDefault ? type.def(root, ...args) : args[0] as T;
-// 		root._byKey[type.key] = t;
-// 		return t;
-// 	}
-// 	fork<T extends {}>(type: ContextType<T>, obj: T): [ContextManager, T];
-// 	fork<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): [ContextManager, T];
-// 	fork<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>, ...args: Args): [ContextManager, T] {
-// 		const ret = new ContextManager();
-// 		ret._root = this._root;
-// 		ret._byKey = Object.create(this._byKey);
-// 		const t = type.hasDefault ? type.def(ret, ...args) : args[0] as T;
-// 		ret._byKey[type.key] = t;
-// 		return [ret, t];
-// 	}
-// 	get<T extends {}>(type: ContextType<T>): T | undefined;
-// 	get<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): T;
-// 	get<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>, ...args: Args): T | undefined {
-// 		let entry = this._byKey[type.key] as T | undefined;
-// 		if (!entry && type.hasDefault) {
-// 			entry = this.add(type, ...args);
-// 		}
-// 		return entry;
-// 	}
-// 	getExisting<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>): T | undefined {
-// 		return this._byKey[type.key] as T | undefined;
-// 	}
-// 	getOrThrow<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>): T {
-// 		const res = this._byKey[type.key] as T | undefined;
-// 		if (!res) throw new Error("Required context not present");
-// 		return res;
-// 	}
-// 	delete<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>) {
-// 		delete this._byKey[type.key];
-// 	}
-// }

package/lib/contexts/analyticscontext.d.ts

@@ -6,5 +6,11 @@ export declare class AnalyticsContext extends Context {
     /** @zprop */
     logEvent(name: string, params?: any): void;
 }
+/**
+ * Logs an analytics event.
+ */
 export declare function logEvent(mgr: ContextManager, name: string, params?: any): void;
+/**
+ * Returns the analytics onEvent event.
+ */
 export declare function useAnalyticsOnEvent(mgr: ContextManager): Event<[string, any]>;

package/lib/contexts/analyticscontext.js

@@ -11,9 +11,15 @@ export class AnalyticsContext extends Context {
         this.onEvent.emit(name, params);
     }
 }
+/**
+ * Logs an analytics event.
+ */
 export function logEvent(mgr, name, params) {
     return mgr.get(AnalyticsContext).logEvent(name, params);
 }
+/**
+ * Returns the analytics onEvent event.
+ */
 export function useAnalyticsOnEvent(mgr) {
     return mgr.get(AnalyticsContext).onEvent;
 }

package/lib/contexts/audiocontextcontext.d.ts

@@ -1,14 +1,39 @@
 import { ContextManager, Context } from '../context';
-/** @zcontext */
+/**
+ * A context dedicated to audio management.
+ * @zcontext
+ */
 export declare class AudioContextContext extends Context {
     constructorProps: {};
     readonly audioContext: AudioContext;
     private _layers;
     readonly layers: Map<string, AudioNode>;
+    /**
+     * Creates an instance of AudioContextContext.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager: ContextManager, constructorProps: {});
     private _getLayer;
+    /**
+     * Retrieves an audio layer by its name.
+     * @param {string} [name] - The name of the audio layer.
+     * @returns {AudioNode} The audio layer.
+     */
     getLayer(name?: string): AudioNode;
+    /**
+     * Sets the volume for a specific audio layer.
+     * @param {string} [name] - The name of the audio layer.
+     * @param {number} v - The new volume level.
+     */
     setVolumeForLayer(name: string | undefined, v: number): void;
+    /**
+     * Disposes of the audio context and calls the parent dispose method.
+     * @returns {Promise<boolean>} A promise that resolves to a boolean indicating whether the disposal was successful.
+     */
     dispose(): never;
 }
+/**
+ * Returns the audio context.
+ */
 export declare function useAudioContext(ctx: ContextManager): AudioContext;

package/lib/contexts/audiocontextcontext.js

@@ -1,7 +1,15 @@
 import { Context } from '../context';
 import { nextUserEvent } from './usereventcontext';
-/** @zcontext */
+/**
+ * A context dedicated to audio management.
+ * @zcontext
+ */
 export class AudioContextContext extends Context {
+    /**
+     * Creates an instance of AudioContextContext.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);
         this.constructorProps = constructorProps;
@@ -21,18 +29,35 @@ export class AudioContextContext extends Context {
         }
         return existing;
     }
+    /**
+     * Retrieves an audio layer by its name.
+     * @param {string} [name] - The name of the audio layer.
+     * @returns {AudioNode} The audio layer.
+     */
     getLayer(name) {
         return this._getLayer(name);
     }
+    /**
+     * Sets the volume for a specific audio layer.
+     * @param {string} [name] - The name of the audio layer.
+     * @param {number} v - The new volume level.
+     */
     setVolumeForLayer(name, v) {
         const layer = this._getLayer(name);
         layer.gain.value = v;
     }
+    /**
+     * Disposes of the audio context and calls the parent dispose method.
+     * @returns {Promise<boolean>} A promise that resolves to a boolean indicating whether the disposal was successful.
+     */
     dispose() {
         this.audioContext.close();
         return super.dispose();
     }
 }
+/**
+ * Returns the audio context.
+ */
 export function useAudioContext(ctx) {
     return ctx.get(AudioContextContext).audioContext;
 }

package/lib/contexts/canvascontext.d.ts

@@ -1,11 +1,25 @@
 import { ContextManager, Context } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
+/**
+ * Defines options for initializing a `CanvasContext`.
+ * - `canvas`: Optional HTMLCanvasElement to be managed.
+ * - `overlay`: Optional HTMLDivElement to be used as an overlay.
+ */
 export interface CanvasContextOptions {
     canvas?: HTMLCanvasElement;
     overlay?: HTMLDivElement;
 }
-/** @zcontext */
+/**
+ * Manages a canvas and an overlay within a context, providing events and observables for canvas rendering and resizing.
+ * - `onBeforeRender`: Event triggered before rendering the canvas.
+ * - `onAfterRender`: Event triggered after rendering the canvas.
+ * - `canvas`: The HTMLCanvasElement being managed.
+ * - `overlayDefault`: Default HTMLDivElement used as an overlay.
+ * - `overlay`: Observable for the overlay element.
+ * - `size`: Observable for the canvas size, updated on resize.
+ * @zcontext
+ * */
 export declare class CanvasContext extends Context {
     constructorProps: CanvasContextOptions;
     readonly onBeforeRender: Event<[number]>;
@@ -16,6 +30,11 @@ export declare class CanvasContext extends Context {
     /** @zui */
     readonly size: Observable<[number, number]>;
     private _resizeObserver;
+    /**
+     * Creates an instance of CanvasContext.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager: ContextManager, constructorProps: CanvasContextOptions);
     /**
      * Captures the canvas content and returns it as a Data URL after the current frame has rendered.
@@ -33,20 +52,53 @@ export declare class CanvasContext extends Context {
     private blobToArrayBuffer;
     dispose(): never;
 }
+/**
+ * Enum representing horizontal alignment options: 'left', 'center', 'right'.
+ */
 export declare enum HorizontalAlignment {
     'left' = "left",
     'center' = "center",
     'right' = "right"
 }
+/**
+ * Enum representing vertical alignment options: 'top', 'center', 'bottom'.
+ */
 export declare enum VerticalAlignment {
     'top' = "top",
     'center' = "center",
     'bottom' = "bottom"
 }
+/**
+ * Retrieves the canvas element from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {HTMLCanvasElement} The canvas element managed by `CanvasContext`.
+ */
 export declare function useCanvas(mgr: ContextManager): HTMLCanvasElement;
+/**
+ * Retrieves the overlay element from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {Observable<HTMLDivElement>} The overlay element as an observable managed by `CanvasContext`.
+ */
 export declare function useOverlay(mgr: ContextManager): Observable<HTMLDivElement, never>;
+/**
+ * Retrieves the size of the canvas from the `CanvasContext`.
+ * @param {ContextManager} mgr - The context manager.
+ * @returns {Size} The size of the canvas.
+ */
 export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
+/**
+ * Retrieves the onBeforeRender event from the `CanvasContext`. This event is fired before the canvas is rendered.
+ *
+ * `this.register(useOnBeforeRender(this.contextManager), ()=>{  });`
+ * @param {ContextManager} mgr - The context manager.
+ * @returns {Function} The onBeforeRender function.
+ */
 export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
+/**
+ * Retrieves the onAfterRender event from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {Event<[number]>} The onAfterRender event, triggered after canvas rendering.
+ */
 export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;
 /**
  * Returns a promise that resovles a data url of the canvas as jpeg.
@@ -60,4 +112,10 @@ export declare function useCanvasToDataURL(mgr: ContextManager): Promise<string>
  * For custom MIME types or quality settings, use`contextManager.get(CanvasContext).captureToArrayBuffer();`
  */
 export declare function useCanvasToArrayBuffer(mgr: ContextManager): Promise<ArrayBuffer>;
+/**
+ * Generates class names for alignment based on specified horizontal and vertical alignment values.
+ * @param {HorizontalAlignment} h The horizontal alignment value.
+ * @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;

package/lib/contexts/canvascontext.js

@@ -1,8 +1,22 @@
 import { Context } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
-/** @zcontext */
+/**
+ * Manages a canvas and an overlay within a context, providing events and observables for canvas rendering and resizing.
+ * - `onBeforeRender`: Event triggered before rendering the canvas.
+ * - `onAfterRender`: Event triggered after rendering the canvas.
+ * - `canvas`: The HTMLCanvasElement being managed.
+ * - `overlayDefault`: Default HTMLDivElement used as an overlay.
+ * - `overlay`: Observable for the overlay element.
+ * - `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;
@@ -107,30 +121,63 @@ export class CanvasContext extends Context {
         return super.dispose();
     }
 }
+/**
+ * Enum representing horizontal alignment options: 'left', 'center', 'right'.
+ */
 export var HorizontalAlignment;
 (function (HorizontalAlignment) {
     HorizontalAlignment["left"] = "left";
     HorizontalAlignment["center"] = "center";
     HorizontalAlignment["right"] = "right";
 })(HorizontalAlignment || (HorizontalAlignment = {}));
+/**
+ * Enum representing vertical alignment options: 'top', 'center', 'bottom'.
+ */
 export var VerticalAlignment;
 (function (VerticalAlignment) {
     VerticalAlignment["top"] = "top";
     VerticalAlignment["center"] = "center";
     VerticalAlignment["bottom"] = "bottom";
 })(VerticalAlignment || (VerticalAlignment = {}));
+/**
+ * Retrieves the canvas element from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {HTMLCanvasElement} The canvas element managed by `CanvasContext`.
+ */
 export function useCanvas(mgr) {
     return mgr.get(CanvasContext).canvas;
 }
+/**
+ * Retrieves the overlay element from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {Observable<HTMLDivElement>} The overlay element as an observable managed by `CanvasContext`.
+ */
 export function useOverlay(mgr) {
     return mgr.get(CanvasContext).overlay;
 }
+/**
+ * Retrieves the size of the canvas from the `CanvasContext`.
+ * @param {ContextManager} mgr - The context manager.
+ * @returns {Size} The size of the canvas.
+ */
 export function useCanvasSize(mgr) {
     return mgr.get(CanvasContext).size;
 }
+/**
+ * Retrieves the onBeforeRender event from the `CanvasContext`. This event is fired before the canvas is rendered.
+ *
+ * `this.register(useOnBeforeRender(this.contextManager), ()=>{  });`
+ * @param {ContextManager} mgr - The context manager.
+ * @returns {Function} The onBeforeRender function.
+ */
 export function useOnBeforeRender(mgr) {
     return mgr.get(CanvasContext).onBeforeRender;
 }
+/**
+ * Retrieves the onAfterRender event from the `CanvasContext`.
+ * @param {ContextManager} mgr The context manager instance.
+ * @returns {Event<[number]>} The onAfterRender event, triggered after canvas rendering.
+ */
 export function useOnAfterRender(mgr) {
     return mgr.get(CanvasContext).onAfterRender;
 }
@@ -150,6 +197,12 @@ export function useCanvasToDataURL(mgr) {
 export function useCanvasToArrayBuffer(mgr) {
     return mgr.get(CanvasContext).captureToArrayBuffer('image/jpeg', 1);
 }
+/**
+ * Generates class names for alignment based on specified horizontal and vertical alignment values.
+ * @param {HorizontalAlignment} h The horizontal alignment value.
+ * @param {VerticalAlignment} v The vertical alignment value.
+ * @returns {string} A string of class names for the specified alignments.
+ */
 export function classNameForAlignment(h, v) {
     const names = ['zcomponent-align'];
     switch (h) {