@zcomponent/core 1.10.0-beta → 1.12.0-beta

package/lib/behaviors/ActivateState.d.ts

@@ -38,8 +38,9 @@ export declare class ActivateState extends ActionBehavior {
      */
     easing?: string;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }
 export declare enum Pin {

package/lib/behaviors/ActivateState.js

@@ -10,6 +10,7 @@ export class ActivateState extends ActionBehavior {
         super(contextManager, instance, props);
         this.zcomponent = this.getZComponentInstance();
     }
+    /** @zprop */
     perform() {
         if (!this.state)
             return;
@@ -25,7 +26,7 @@ export class ActivateState extends ActionBehavior {
         };
         layerclip.play(opts);
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/CallFunction.d.ts

@@ -0,0 +1,19 @@
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * Calls an exposed function on a context
+ *
+ * @zbehavior
+ * @zicon function
+ * @zgroup Actions
+ */
+export declare class CallFunction extends ActionBehavior {
+    /**
+     * The function and arguments to call
+     * @zprop
+     */
+    function: () => any;
+    /** @zui
+     * @zprop
+     */
+    perform(): void;
+}

package/lib/behaviors/CallFunction.js

@@ -0,0 +1,18 @@
+import { ActionBehavior } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * Calls an exposed function on a context
+ *
+ * @zbehavior
+ * @zicon function
+ * @zgroup Actions
+ */
+export class CallFunction extends ActionBehavior {
+    /** @zui
+     * @zprop
+     */
+    perform() {
+        this.function();
+    }
+}
+registerBehaviorRunAtDesignTime(CallFunction);

package/lib/behaviors/ConsoleLog.d.ts

@@ -18,5 +18,6 @@ export declare class ConsoleLog extends ActionBehavior {
      * @zdefault true
      */
     includeEventName: boolean;
+    /** @zprop */
     perform(): void;
 }

package/lib/behaviors/ConsoleLog.js

@@ -8,6 +8,7 @@ import { registerBehaviorRunAtDesignTime } from "../behavior";
  * @zgroup Actions
  */
 export class ConsoleLog extends ActionBehavior {
+    /** @zprop */
     perform() {
         if (this.includeEventName ?? true)
             console.log(this.constructorProps.event, this.text);

package/lib/behaviors/DownloadSnapshot.d.ts

@@ -14,8 +14,9 @@ export declare class DownloadSnapshot extends ActionBehavior<DownloadSnapshotPro
     /** @zui */
     onSave: Event<[]>;
     constructor(contextManager: ContextManager, instance: Component, props: DownloadSnapshotProps);
+    /** @zprop */
     perform(): void;
     private download;
-    /** @zprop */
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/DownloadSnapshot.js

@@ -31,10 +31,11 @@ export class DownloadSnapshot extends ActionBehavior {
             this.onSave.emit();
         };
     }
+    /** @zprop */
     perform() {
         this.download();
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/LaunchURL.d.ts

@@ -20,5 +20,6 @@ export declare class LaunchURL extends ActionBehavior {
      * @zdefault true
      */
     openInNew: boolean;
+    /** @zprop */
     perform(): void;
 }

package/lib/behaviors/LaunchURL.js

@@ -9,6 +9,7 @@ import { ActionBehavior } from "../actionbehavior";
  * @zgroup Actions
  */
 export class LaunchURL extends ActionBehavior {
+    /** @zprop */
     perform() {
         if (this.openInNew ?? true)
             window.open(this.url, '_blank', 'noopener noreferrer');

package/lib/behaviors/LogAnalyticsEvent.d.ts

@@ -13,5 +13,6 @@ export declare class LogAnalyticsEvent extends ActionBehavior {
     name: string;
     /** @zprop */
     params: any;
+    /** @zprop */
     perform(): void;
 }

package/lib/behaviors/LogAnalyticsEvent.js

@@ -10,6 +10,7 @@ import { logEvent } from "../contexts/analyticscontext";
  * @zgroup Actions
  */
 export class LogAnalyticsEvent extends ActionBehavior {
+    /** @zprop */
     perform() {
         logEvent(this.contextManager, this.name, this.params);
     }

package/lib/behaviors/PauseLayerClip.d.ts

@@ -14,7 +14,8 @@ export declare class PauseLayerClip extends ActionBehavior {
      */
     layerClip: string | undefined;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/PauseLayerClip.js

@@ -10,6 +10,7 @@ export class PauseLayerClip extends ActionBehavior {
         super(contextManager, instance, props);
         this.zcomponent = this.getZComponentInstance();
     }
+    /** @zprop */
     perform() {
         if (!this.layerClip)
             return;
@@ -18,7 +19,7 @@ export class PauseLayerClip extends ActionBehavior {
             return;
         layerclip.pause();
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/PlayLayerClip.d.ts

@@ -68,8 +68,9 @@ export declare class PlayLayerClip extends ActionBehavior {
      */
     easing?: string;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }
 export declare enum Pin {

package/lib/behaviors/PlayLayerClip.js

@@ -26,6 +26,7 @@ export class PlayLayerClip extends ActionBehavior {
          */
         this.fromStart = false;
     }
+    /** @zprop */
     perform() {
         if (!this.layerClip)
             return;
@@ -48,7 +49,7 @@ export class PlayLayerClip extends ActionBehavior {
         else
             layerclip.play(opts);
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/PlaySound.d.ts

@@ -44,8 +44,9 @@ export declare class PlaySound extends ActionBehavior<PlaySoundProps> {
     speed: Observable<number, never>;
     private _component;
     constructor(contextManager: ContextManager, instance: Component, props: PlaySoundProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
     dispose(): never;
 }

package/lib/behaviors/PlaySound.js

@@ -23,11 +23,12 @@ export class PlaySound extends ActionBehavior {
         this.muted = this._component.muted;
         this.volume = this._component.volume;
     }
+    /** @zprop */
     perform() {
         this._component.seek(0);
         this._component.play({ speed: this.speed.value });
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/SetLayerOff.d.ts

@@ -14,7 +14,8 @@ export declare class SetLayerOff extends ActionBehavior {
      */
     layer: string | undefined;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/SetLayerOff.js

@@ -10,6 +10,7 @@ export class SetLayerOff extends ActionBehavior {
         super(contextManager, instance, props);
         this.zcomponent = this.getZComponentInstance();
     }
+    /** @zprop */
     perform() {
         if (!this.layer)
             return;
@@ -18,7 +19,7 @@ export class SetLayerOff extends ActionBehavior {
             return;
         layer.active = null;
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/ShareSnapshot.d.ts

@@ -14,8 +14,9 @@ export declare class ShareSnapshot extends ActionBehavior<ShareCanvasProps> {
     /** @zui */
     onShare: Event<[]>;
     constructor(contextManager: ContextManager, instance: Component, props: ShareCanvasProps);
+    /** @zprop */
     perform(): void;
     private share;
-    /** @zprop */
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/ShareSnapshot.js

@@ -33,10 +33,11 @@ export class ShareSnapshot extends ActionBehavior {
             }
         };
     }
+    /** @zprop */
     perform() {
         this.share();
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/ShowTextAlert.d.ts

@@ -56,8 +56,10 @@ export declare class ShowTextAlert extends ActionBehavior {
     classNames: Observable<string[], never>;
     /**
      * How long the alert will apear on the screen
+     *
+     * @zprop
      */
     perform(): void;
-    /** @zprop */
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/ShowTextAlert.js

@@ -61,6 +61,8 @@ export class ShowTextAlert extends ActionBehavior {
     }
     /**
      * How long the alert will apear on the screen
+     *
+     * @zprop
      */
     perform() {
         showTextAlert(this.contextManager, this.text.value, {
@@ -70,7 +72,7 @@ export class ShowTextAlert extends ActionBehavior {
             timeout: this.timeout.value
         });
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/TakeSnapshot.d.ts

@@ -47,6 +47,7 @@ export declare class TakeSnapshot extends ActionBehavior<ActionBehaviorConstruct
      */
     title: Observable<string, never>;
     private dataUrl;
+    /** @zprop */
     perform(): void;
     private capture;
     preview(): void;

package/lib/behaviors/TakeSnapshot.js

@@ -1,6 +1,6 @@
 import { ActionBehavior } from '../actionbehavior';
 import { registerBehaviorRunAtDesignTime } from '../behavior';
-import { useCanvas, useOnAfterRender } from '../contexts/canvascontext';
+import { CanvasContext } from '../contexts/canvascontext';
 import { SnapshotContext } from '../contexts/snapshotContext';
 import { Observable } from '../observable';
 export var ImageFormat;
@@ -65,20 +65,17 @@ export class TakeSnapshot extends ActionBehavior {
             ssctx.title.value = title;
         });
         this.dataUrl = '';
-        this.capture = () => {
-            const canvas = useCanvas(this.contextManager);
-            if (!canvas) {
-                console.error('No canvas found in context');
-                return;
-            }
+        this.capture = async () => {
             const snapshotContext = this.contextManager.get(SnapshotContext);
             const mimeType = snapshotContext.fileType.value === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
-            this.dataUrl = canvas.toDataURL(mimeType, this.quality.value);
+            const canvasContext = this.contextManager.get(CanvasContext);
+            this.dataUrl = await canvasContext.captureToDataURL(mimeType, this.quality.value);
             snapshotContext.canvasImage.value = this.dataUrl;
         };
     }
+    /** @zprop */
     perform() {
-        useOnAfterRender(this.contextManager).next.then(this.capture);
+        this.capture();
     }
     preview() {
         this.perform();

package/lib/behaviors/ToggleLayerClips.d.ts

@@ -90,8 +90,9 @@ export declare class ToggleLayerClips extends ActionBehavior {
     easing?: string;
     isA: boolean;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }
 export declare enum Pin {

package/lib/behaviors/ToggleLayerClips.js

@@ -27,6 +27,7 @@ export class ToggleLayerClips extends ActionBehavior {
         this.fromStart = false;
         this.isA = true;
     }
+    /** @zprop */
     perform() {
         this.isA = !this.isA;
         const opts = {
@@ -62,7 +63,7 @@ export class ToggleLayerClips extends ActionBehavior {
                 layerclip.play(opts);
         }
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/stream/PauseStream.d.ts

@@ -17,6 +17,9 @@ export declare class PauseStream extends ActionBehavior {
     stream: string | undefined;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
     perform(): void;
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     preview(): void;
 }

package/lib/behaviors/stream/PauseStream.js

@@ -18,7 +18,10 @@ export class PauseStream extends ActionBehavior {
             return;
         stream.pause();
     }
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     preview() {
         this.perform();
     }

package/lib/behaviors/stream/PlayStream.d.ts

@@ -39,7 +39,8 @@ export declare class PlayStream extends ActionBehavior {
      */
     fromStart: boolean;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/stream/PlayStream.js

@@ -19,6 +19,7 @@ export class PlayStream extends ActionBehavior {
          */
         this.fromStart = false;
     }
+    /** @zprop */
     perform() {
         if (!this.stream)
             return;
@@ -29,7 +30,7 @@ export class PlayStream extends ActionBehavior {
             stream.seek(0);
         stream.play({ loop: this.loop, speed: this.speed });
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/stream/SeekStream.d.ts

@@ -24,7 +24,8 @@ export declare class SeekStream extends ActionBehavior {
      */
     time: number;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/stream/SeekStream.js

@@ -18,6 +18,7 @@ export class SeekStream extends ActionBehavior {
          */
         this.time = 0;
     }
+    /** @zprop */
     perform() {
         if (!this.stream)
             return;
@@ -26,7 +27,7 @@ export class SeekStream extends ActionBehavior {
             return;
         stream.seek(this.time ?? 0);
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/behaviors/stream/StopStream.d.ts

@@ -16,7 +16,8 @@ export declare class StopStream extends ActionBehavior {
      */
     stream: string | undefined;
     constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
-    perform(): void;
     /** @zprop */
+    perform(): void;
+    /** @zui */
     preview(): void;
 }

package/lib/behaviors/stream/StopStream.js

@@ -10,6 +10,7 @@ export class StopStream extends ActionBehavior {
         super(contextManager, instance, props);
         this.zcomponent = this.getZComponentInstance();
     }
+    /** @zprop */
     perform() {
         if (!this.stream)
             return;
@@ -18,7 +19,7 @@ export class StopStream extends ActionBehavior {
             return;
         stream.stop();
     }
-    /** @zprop */
+    /** @zui */
     preview() {
         this.perform();
     }

package/lib/components/Audio.d.ts

@@ -56,15 +56,27 @@ export declare class Audio extends Component<undefined, AudioConstructorProps> i
      * @zdefault 1
      */
     readonly volume: Observable<number, never>;
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     play(opts?: PlayOptions): void;
     private _pause;
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     pause(): void;
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     stop(): void;
-    /** @zprop */
-    seek(t: number): void;
+    /**
+     * @zprop
+     * @zui
+     */
+    seek(/** @ztype time-milliseconds */ t: number): void;
     length(): number | undefined;
     dispose(): never;
 }

package/lib/components/Audio.js

@@ -68,7 +68,10 @@ export class Audio extends Component {
         }
         return this._reversed;
     }
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     play(opts) {
         if (!this.audioBuffer)
             return;
@@ -105,19 +108,28 @@ export class Audio extends Component {
         this._session.source.disconnect();
         delete this._session;
     }
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     pause() {
         this._pause();
         this.onPause.emit(this);
     }
-    /** @zprop */
+    /**
+     * @zprop
+     * @zui
+     */
     stop() {
         this._pause();
         this._playhead = 0;
         this.onStop.emit(this);
     }
-    /** @zprop */
-    seek(t) {
+    /**
+     * @zprop
+     * @zui
+     */
+    seek(/** @ztype time-milliseconds */ t) {
         let previousSession = this._session;
         if (previousSession)
             this._pause();

package/lib/contexts/analyticscontext.d.ts

@@ -1,7 +1,9 @@
 import { ContextManager, Context } from '../context';
 import { Event } from '../event';
+/** @zcontext */
 export declare class AnalyticsContext extends Context {
     readonly onEvent: Event<[string, any]>;
+    /** @zprop */
     logEvent(name: string, params?: any): void;
 }
 export declare function logEvent(mgr: ContextManager, name: string, params?: any): void;

package/lib/contexts/analyticscontext.js

@@ -1,10 +1,12 @@
 import { Context } from '../context';
 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);
     }

package/lib/contexts/canvascontext.d.ts

@@ -17,6 +17,20 @@ export declare class CanvasContext extends Context {
     readonly size: Observable<[number, number]>;
     private _resizeObserver;
     constructor(contextManager: ContextManager, constructorProps: CanvasContextOptions);
+    /**
+     * 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.
+     */
+    captureToDataURL(type?: 'image/png' | 'image/jpeg', quality?: number): Promise<string>;
+    /**
+     * 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.
+     */
+    captureToArrayBuffer(type?: 'image/png' | 'image/jpeg', quality?: number): Promise<ArrayBuffer>;
+    private canvasToBlob;
+    private blobToArrayBuffer;
     dispose(): never;
 }
 export declare enum HorizontalAlignment {
@@ -34,4 +48,16 @@ export declare function useOverlay(mgr: ContextManager): Observable<HTMLDivEleme
 export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
 export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
 export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;
+/**
+ * Returns a promise that resovles a data url of the canvas as jpeg.
+ *
+ * For custom MIME types or quality settings, use`contextManager.get(CanvasContext).captureToDataURL();`
+ */
+export declare function useCanvasToDataURL(mgr: ContextManager): Promise<string>;
+/**
+ * Returns a promise that resolves an array buffer of the canvas image.
+ *
+ * For custom MIME types or quality settings, use`contextManager.get(CanvasContext).captureToArrayBuffer();`
+ */
+export declare function useCanvasToArrayBuffer(mgr: ContextManager): Promise<ArrayBuffer>;
 export declare function classNameForAlignment(h: HorizontalAlignment, v: VerticalAlignment): string;

package/lib/contexts/canvascontext.js

@@ -16,13 +16,13 @@ export class CanvasContext extends Context {
             }
         });
         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 = 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';
             document.body.append(this.canvas);
         }
         else {
@@ -48,6 +48,54 @@ export class CanvasContext extends Context {
             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();
@@ -86,6 +134,22 @@ export function useOnBeforeRender(mgr) {
 export function useOnAfterRender(mgr) {
     return mgr.get(CanvasContext).onAfterRender;
 }
+/**
+ * Returns a promise that resovles a data url of the canvas as jpeg.
+ *
+ * For custom MIME types or quality settings, use`contextManager.get(CanvasContext).captureToDataURL();`
+ */
+export function useCanvasToDataURL(mgr) {
+    return mgr.get(CanvasContext).captureToDataURL('image/jpeg', 1);
+}
+/**
+ * Returns a promise that resolves an array buffer of the canvas image.
+ *
+ * For custom MIME types or quality settings, use`contextManager.get(CanvasContext).captureToArrayBuffer();`
+ */
+export function useCanvasToArrayBuffer(mgr) {
+    return mgr.get(CanvasContext).captureToArrayBuffer('image/jpeg', 1);
+}
 export function classNameForAlignment(h, v) {
     const names = ['zcomponent-align'];
     switch (h) {

package/lib/contexts/textalertcontext.d.ts

@@ -1,7 +1,9 @@
 import { ContextManager, Context } from '../context';
+/** @zcontext */
 export declare class TextAlertContext extends Context {
     private _container;
     constructor(contextManager: ContextManager);
+    /** @zprop */
     showTextAlert(txt: string, options?: TextAlertOptions): void;
 }
 export interface TextAlertOptions {

package/lib/contexts/textalertcontext.js

@@ -1,5 +1,6 @@
 import { Context } from '../context';
 import { useOverlay } from './canvascontext';
+/** @zcontext */
 export class TextAlertContext extends Context {
     constructor(contextManager) {
         super(contextManager, {});
@@ -9,6 +10,7 @@ export class TextAlertContext extends Context {
             val.appendChild(this._container);
         });
     }
+    /** @zprop */
     showTextAlert(txt, options) {
         const entry = document.createElement('div');
         entry.classList.add('zcomponent-textalert');

package/lib/data/core.d.ts

@@ -97,3 +97,32 @@ export interface ContextValueEntityPropOverride extends BaseEntityPropOverride {
     val: string;
     type: EntityPropOverrideType.ContextValue;
 }
+export declare enum FunctionCallType {
+    Entity = "entity",
+    Context = "context",
+    Import = "import"
+}
+export interface BaseFunctionCall {
+    _zfn: true;
+    t: FunctionCallType;
+    args: {
+        [id: number]: any;
+    };
+}
+export interface EntityFunctionCall extends BaseFunctionCall {
+    entityID: string;
+    t: FunctionCallType.Entity;
+    fn: string;
+}
+export interface ContextFunctionCall extends BaseFunctionCall {
+    imp: string;
+    fn: string;
+    t: FunctionCallType.Context;
+    resolved?: any;
+}
+export interface ImportFunctionCall extends BaseFunctionCall {
+    imp: string;
+    t: FunctionCallType.Import;
+    resolved?: any;
+}
+export type FunctionCall = EntityFunctionCall | ContextFunctionCall | ImportFunctionCall;

package/lib/data/core.js

@@ -4,3 +4,9 @@ export var EntityPropOverrideType;
     EntityPropOverrideType["Import"] = "import";
     EntityPropOverrideType["ContextValue"] = "contextvalue";
 })(EntityPropOverrideType || (EntityPropOverrideType = {}));
+export var FunctionCallType;
+(function (FunctionCallType) {
+    FunctionCallType["Entity"] = "entity";
+    FunctionCallType["Context"] = "context";
+    FunctionCallType["Import"] = "import";
+})(FunctionCallType || (FunctionCallType = {}));

package/lib/selectors.js

@@ -186,6 +186,35 @@ export function summaryForEntityPropOverrideDestination(o) {
     }
     return '?';
 }
+function typeContainsType(p, name) {
+    if (p.name === name)
+        return true;
+    switch (p.name) {
+        case 'array':
+            return typeContainsType(p.child, name);
+        case 'function':
+            for (const arg of p.args) {
+                if (typeContainsType(arg.type, name))
+                    return true;
+            }
+            if (p.ret)
+                return typeContainsType(p.ret, name);
+            return false;
+        case 'tuple':
+            for (const c of p.children) {
+                if (typeContainsType(c, name))
+                    return true;
+            }
+            return false;
+        case 'union':
+            for (const c of p.children) {
+                if (typeContainsType(c, name))
+                    return true;
+            }
+            return false;
+    }
+    return false;
+}
 export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, layers, behaviors) => {
     const importMapping = new Map();
     let indx = 0;

package/lib/types.d.ts

@@ -109,10 +109,15 @@ export interface Prop {
     default?: any;
     group?: string;
     groupPriority?: number;
+    groupCollapsed?: boolean;
     values?: Values[];
     order?: number;
     priority?: number;
     optional?: boolean;
+    showInUI?: boolean;
+    readonly?: boolean;
+    isConstructorProp?: boolean;
+    deprecated?: boolean;
 }
 export interface DefaultChild {
     label: string;
@@ -144,6 +149,7 @@ export interface ComponentInfo {
     streamsObjects: {
         [id: string]: string;
     };
+    deprecated?: boolean;
 }
 export interface ValueInfo {
     name: string;

package/lib/types.js

@@ -1,4 +1,4 @@
-import { EntityPropOverrideType } from './data/core';
+import { EntityPropOverrideType, FunctionCallType } from './data/core';
 import { getSafeKeyName } from './selectors';
 export var TypeName;
 (function (TypeName) {
@@ -138,6 +138,10 @@ export function mergeValues(a, b) {
 export function mergeProps(a, b) {
     if (a.name !== b.name)
         return;
+    if ((a.readonly && !b.readonly) || (b.readonly && !a.readonly))
+        return;
+    if ((a.deprecated ?? false) !== (b.deprecated ?? false))
+        return;
     const type = mergeTypes(a.type, b.type);
     if (!type)
         return;
@@ -151,9 +155,12 @@ export function mergeProps(a, b) {
         default: def,
         group: a.group === b.group ? a.group : undefined,
         groupPriority: Math.max(a.groupPriority ?? 0, b.groupPriority ?? 0),
+        groupCollapsed: a.groupCollapsed || b.groupCollapsed,
         priority: Math.max(a.priority ?? 0, b.priority ?? 0),
         values: mergeValues(a.values, b.values),
         order: Math.min(a.order ?? 0, b.order ?? 0),
+        deprecated: a.deprecated,
+        readonly: a.readonly,
     };
 }
 function mergeComments(a, b) {
@@ -328,6 +335,31 @@ export function isValidValueForType(def, t, allowUndefined) {
                 return true;
             return def === t.value;
         case 'function':
+            if (typeof def !== 'object')
+                return false;
+            if (def['_zfn'] !== true)
+                return false;
+            if (typeof def['args'] !== 'object')
+                return false;
+            if (def['t'] === FunctionCallType.Context) {
+                if (typeof def['imp'] !== 'string' || def['imp'].length === 0)
+                    return false;
+                if (typeof def['fn'] !== 'string' || def['fn'].length === 0)
+                    return false;
+                return true;
+            }
+            if (def['t'] === FunctionCallType.Entity) {
+                if (typeof def['entityID'] !== 'string' || def['entityID'].length === 0)
+                    return false;
+                if (typeof def['fn'] !== 'string' || def['fn'].length === 0)
+                    return false;
+                return true;
+            }
+            if (def['t'] === FunctionCallType.Import) {
+                if (typeof def['imp'] !== 'string' || def['imp'].length === 0)
+                    return false;
+                return true;
+            }
             return false;
     }
     return false;

package/lib/zcomponent.d.ts

@@ -59,8 +59,10 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     private _constructorForNode;
     private _constructorForBehavior;
     resolveNodeID<T extends Component = Component>(id: string, type?: ConstructorForComponent<T>): T | undefined;
+    resolveEntityID<T extends Entity = Entity>(id: string): T | undefined;
     private _inflateBehaviors;
     private _wrapBehaviors;
+    private _wrapFunctionCall;
     notifyPropsChanged(entries: Map<string, Set<string>>): void;
     notifyClipsChanged(clips: Set<string>): void;
     private _initializeOverrides;

package/lib/zcomponent.js

@@ -7,8 +7,9 @@ import { isDesignTime } from './contexts/environmentcontext';
 import { isStarted, started } from './contexts/loadcontext';
 import { TagContext } from './contexts/tagcontext';
 import { computeBehaviorHierarchy, computeNodeHierarchy } from './data';
+import { Entity } from './entity';
 import { populateAnimationStructureFromData, populateAnimationTracksFromData, updateClipFromData } from './inflate';
-import { EntityPropOverrideType } from './data/core';
+import { EntityPropOverrideType, FunctionCallType } from './data/core';
 import { Observable } from './observable';
 import { setCurrentZComponentConstruction } from './zcomponentconstruction';
 export class ZComponentContext extends Context {
@@ -188,6 +189,11 @@ export class ZComponent extends Component {
                     ...(that._opts.constructorPropReplacement?.[behaviorId] ?? {}),
                     ...(that._constructorPropOverridesByEntityID.get(behaviorId) ?? {}),
                 };
+                for (const key in constructorProps) {
+                    const val = constructorProps[key];
+                    if (val !== undefined && val !== null && val['_zfn'] === true)
+                        constructorProps[key] = that._wrapFunctionCall(val);
+                }
                 setCurrentZComponentConstruction(that);
                 super(contextManager, instance, constructorProps);
                 that.entityByID.set(behaviorId, this);
@@ -227,6 +233,14 @@ export class ZComponent extends Component {
             return entity;
         return undefined;
     }
+    resolveEntityID(id) {
+        const entity = this.entityByID.get(id);
+        if (!entity)
+            return this.getZComponentInstance()?.resolveEntityID(id);
+        if (!(entity instanceof Entity))
+            return undefined;
+        return entity;
+    }
     _inflateBehaviors() {
         for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
             this._wrapBehaviors(nodeID, impl, ctx);
@@ -248,6 +262,55 @@ export class ZComponent extends Component {
             }
         }
     }
+    _wrapFunctionCall(c) {
+        switch (c.t) {
+            case FunctionCallType.Context:
+                return () => {
+                    try {
+                        if (typeof c.imp !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
+                            throw new Error('Invalid function call data');
+                        const contextConstructor = c.resolved;
+                        if (!contextConstructor)
+                            throw new Error('Unable to find context');
+                        const context = this.contextManager.get(contextConstructor);
+                        if (!context)
+                            throw new Error('Unable to get context');
+                        const func = context[c.fn];
+                        if (!func || typeof func !== 'function')
+                            throw new Error('Unable to find function on enttiy');
+                        const tf = func;
+                        const converted = [];
+                        for (const key in c.args)
+                            converted[key] = c.args[key];
+                        return tf.call(context, ...converted);
+                    }
+                    catch (err) {
+                        console.error('Unable to call context function', err);
+                    }
+                };
+            case FunctionCallType.Entity:
+                return () => {
+                    try {
+                        if (typeof c.entityID !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
+                            throw new Error('Invalid function call data');
+                        const entity = this.resolveEntityID(c.entityID);
+                        if (!entity)
+                            throw new Error('Unable to find entity');
+                        const func = entity[c.fn];
+                        if (!func || typeof func !== 'function')
+                            throw new Error('Unable to find function on enttiy');
+                        const tf = func;
+                        const converted = [];
+                        for (const key in c.args)
+                            converted[key] = c.args[key];
+                        return tf.call(entity, ...converted);
+                    }
+                    catch (err) {
+                        console.error('Unable to call entity function', err);
+                    }
+                };
+        }
+    }
     notifyPropsChanged(entries) {
         for (const [entityID, propSet] of entries.entries()) {
             const entity = this.entityByID.get(entityID);
@@ -354,6 +417,8 @@ export class ZComponent extends Component {
         }
     }
     _setEntityProp(entity, prop, v) {
+        if (v !== undefined && v !== null && v['_zfn'] === true)
+            v = this._wrapFunctionCall(v);
         if (entity[prop] instanceof Observable)
             entity[prop].value = v;
         else
@@ -373,6 +438,8 @@ export class ZComponent extends Component {
             parent = parent[currentKey];
             currentKey = propPath[i];
         }
+        if (v !== undefined && v !== null && v['_zfn'] === true)
+            v = this._wrapFunctionCall(v);
         parent[currentKey] = v;
     }
     _getNodeById(id) {

package/package.json

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