@basthon/kernel-base 0.78.0 → 0.78.1

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.78.0";
+export declare const VERSION = "0.78.1";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = "0.78.0";
+export const VERSION = "0.78.1";

package/lib/worker/kernel-main.d.ts

@@ -11,6 +11,7 @@ export declare class KernelMainBase<Type extends KernelWorkerBase> extends Kerne
     private _fallbackKey?;
     private _encrypt;
     private readonly _ephemeralAPI;
+    private readonly _conversionCanvas;
     constructor(options: any);
     /**
      * Is this a legacy worker? i.e. not runing in a worker.
@@ -49,6 +50,10 @@ export declare class KernelMainBase<Type extends KernelWorkerBase> extends Kerne
      * Stop the worker.
      */
     _stop(): Promise<void>;
+    /**
+     * Convert a canvas array buffer to a PNG data URL (base64 encoded).
+     */
+    private canvasArrayToPNGDataURL;
     /**
      * Process messages from worker (if any).
      */

package/lib/worker/kernel-main.js

@@ -12,6 +12,7 @@ export class KernelMainBase extends KernelBase {
         // synchronise comlink and communication channels
         this._channelSyncer = new PromiseDelegate();
         this._encrypt = (s) => s;
+        this._conversionCanvas = document.createElement("canvas");
         this._legacy = options?.legacy === true;
         // synchronous wait on SAB cannot be used in a legacy context
         // (atomic wait will block the main thread)
@@ -147,6 +148,25 @@ export class KernelMainBase extends KernelBase {
         }
         await super._stop();
     }
+    /**
+     * Convert a canvas array buffer to a PNG data URL (base64 encoded).
+     */
+    async canvasArrayToPNGDataURL(width, height, buffer) {
+        const canvas = this._conversionCanvas;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (ctx === null)
+            return;
+        const imageData = new ImageData(new Uint8ClampedArray(buffer), width, height);
+        ctx.putImageData(imageData, 0, 0);
+        const dataURL = canvas.toDataURL("image/png");
+        canvas.width = 0;
+        canvas.height = 0;
+        const pngPrefix = "data:image/png;base64,";
+        if (dataURL.startsWith(pngPrefix))
+            return dataURL.slice(pngPrefix.length);
+    }
     /**
      * Process messages from worker (if any).
      */
@@ -176,6 +196,14 @@ export class KernelMainBase extends KernelBase {
                     //@ts-ignore
                     msg.data.content = await self.basthon?.popDOMNode(id);
                 }
+                else if (msg.data?.display_type === "canvas") {
+                    const { width, height, buffer } = msg.data.content;
+                    const png = await this.canvasArrayToPNGDataURL(width, height, buffer);
+                    if (png == null)
+                        return;
+                    msg.data.display_type = "multiple";
+                    msg.data.content = { "image/png": png };
+                }
                 this.dispatchEvent("eval.display", msg.data);
                 break;
             case "clear_output":

package/lib/worker/kernel-worker.d.ts

@@ -105,6 +105,10 @@ declare class KernelWorkerBase {
      * Display a blob (only png images are supported).
      */
     protected displayBlob(blob: Blob, data: any): Promise<void>;
+    /**
+     * Display a canvas.
+     */
+    protected displayCanvas(canvas: OffscreenCanvas, data: any): Promise<void>;
     /**
      * Display an element like a canvas, ... in the frontend.
      */

package/lib/worker/kernel-worker.js

@@ -198,6 +198,21 @@ class KernelWorkerBase {
         }
         this.postMessage?.({ data, type: "display" });
     }
+    /**
+     * Display a canvas.
+     */
+    async displayCanvas(canvas, data) {
+        if (data == null)
+            data = this.clone(this.__eval_data__);
+        const { width, height } = canvas;
+        const ctx = canvas.getContext("2d");
+        if (ctx == null)
+            return;
+        const { data: imgData } = ctx.getImageData(0, 0, width, height); // Uint8ClampedArray raw RGBA
+        data["display_type"] = "canvas";
+        data["content"] = { width, height, buffer: imgData.buffer };
+        this.postMessage?.({ data, type: "display" }, [imgData.buffer]); // transfer buffer
+    }
     /**
      * Display an element like a canvas, ... in the frontend.
      */
@@ -205,10 +220,7 @@ class KernelWorkerBase {
         const data = this.clone(this.__eval_data__);
         if (globalThis.OffscreenCanvas != null &&
             element instanceof OffscreenCanvas) {
-            this.addEvalPromise((async () => {
-                const blob = await element.convertToBlob();
-                await this.displayBlob(blob, data);
-            })());
+            this.addEvalPromise(this.displayCanvas(element, data));
         }
         else {
             // in legacy mode, send HTML elements via DOM node bus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basthon/kernel-base",
-  "version": "0.78.0",
+  "version": "0.78.1",
   "description": "Basthon - Base Kernel",
   "homepage": "https://basthon.fr",
   "bugs": {