@zcomponent/core 1.11.0-beta → 1.12.0

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,21 +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/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/types.d.ts

@@ -109,12 +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;
@@ -146,6 +149,7 @@ export interface ComponentInfo {
     streamsObjects: {
         [id: string]: string;
     };
+    deprecated?: boolean;
 }
 export interface ValueInfo {
     name: string;

package/lib/types.js

@@ -140,6 +140,8 @@ export function mergeProps(a, b) {
         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;
@@ -153,9 +155,11 @@ 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,
     };
 }

package/package.json

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