@gjsify/webgl 0.3.12 → 0.3.14

package/lib/esm/webgl-bridge.js

@@ -1,152 +1,167 @@
+import { HTMLCanvasElement } from "./html-canvas-element.js";
 import GObject from "gi://GObject";
 import GLib from "gi://GLib?version=2.0";
 import Gtk from "gi://Gtk?version=4.0";
-import { HTMLCanvasElement as OurHTMLCanvasElement } from "./html-canvas-element.js";
 import { attachEventControllers } from "@gjsify/event-bridge";
 import { Event } from "@gjsify/dom-events";
-const WebGLBridge = GObject.registerClass(
-  { GTypeName: "GjsifyWebGLBridge" },
-  class WebGLBridge2 extends Gtk.GLArea {
-    constructor(params) {
-      super(params);
-      this._canvas = null;
-      this._readyCallbacks = [];
-      this._resizeCallbacks = [];
-      this._renderTag = null;
-      this._tickCallbackId = null;
-      this._frameCallback = null;
-      // Time origin in microseconds (GLib monotonic clock).
-      // Both requestAnimationFrame timestamps and performance.now() are
-      // relative to this origin, matching the browser DOMHighResTimeStamp spec.
-      this._timeOrigin = GLib.get_monotonic_time();
-      this.set_use_es(true);
-      this.set_required_version(3, 2);
-      this.set_has_depth_buffer(true);
-      this.set_has_stencil_buffer(true);
-      attachEventControllers(this, () => this._canvas, { captureKeys: true });
-      this._tickCallbackId = this.add_tick_callback((_widget, _frameClock) => {
-        if (this._frameCallback !== null) {
-          this.queue_render();
-        }
-        return GLib.SOURCE_CONTINUE;
-      });
-      const initId = this.connect("render", () => {
-        this.disconnect(initId);
-        this.make_current();
-        this._canvas = new OurHTMLCanvasElement(this);
-        if (globalThis.document?.body) {
-          globalThis.document.body.appendChild(this._canvas);
-        }
-        this._canvas.getContext("webgl2");
-        const gl = this._canvas.getContext("webgl");
-        if (gl) {
-          for (const cb of this._readyCallbacks) {
-            cb(this._canvas, gl);
-          }
-          this._readyCallbacks = [];
-        }
-        this._renderTag = this.connect("render", (_widget) => {
-          if (this._frameCallback !== null) {
-            const time = (GLib.get_monotonic_time() - this._timeOrigin) / 1e3;
-            if (globalThis.__GJSIFY_DEBUG_RAF === true) {
-              console.log(`[rAF] frame callback fires t=${time.toFixed(1)}`);
-            }
-            const cb = this._frameCallback;
-            this._frameCallback = null;
-            cb(time);
-          }
-          return true;
-        });
-        return true;
-      });
-      this.connect("resize", () => {
-        const width = this.get_allocated_width();
-        const height = this.get_allocated_height();
-        if (this._canvas) {
-          this._canvas.dispatchEvent(new Event("resize"));
-        }
-        for (const cb of this._resizeCallbacks) {
-          cb(width, height);
-        }
-        if (this._frameCallback) {
-          this.requestAnimationFrame(this._frameCallback);
-        }
-      });
-      this.connect("unrealize", () => {
-        if (this._renderTag !== null) {
-          this.disconnect(this._renderTag);
-          this._renderTag = null;
-        }
-        if (this._tickCallbackId !== null) {
-          this.remove_tick_callback(this._tickCallbackId);
-          this._tickCallbackId = null;
-        }
-        this._canvas = null;
-      });
-    }
-    /** The HTMLCanvasElement wrapping this GLArea. Available after the first render. */
-    get canvas() {
-      return this._canvas;
-    }
-    /**
-     * Registers a callback to be called once the WebGL context is ready.
-     * If the context is already available, the callback fires synchronously.
-     */
-    onReady(cb) {
-      if (this._canvas) {
-        const gl = this._canvas.getContext("webgl");
-        if (gl) {
-          cb(this._canvas, gl);
-          return;
-        }
-      }
-      this._readyCallbacks.push(cb);
-    }
-    /**
-     * @deprecated Use `onReady()` instead.
-     */
-    onWebGLReady(cb) {
-      this.onReady(cb);
-    }
-    /**
-     * Register a callback invoked whenever the GTK widget is resized.
-     * The callback fires alongside the native 'resize' GObject signal and
-     * after the DOM 'resize' event has been dispatched on the canvas.
-     * Canvas buffer dimensions are NOT automatically updated — consumers
-     * should set `canvas.width`/`canvas.height` themselves if desired.
-     */
-    onResize(cb) {
-      this._resizeCallbacks.push(cb);
-    }
-    /**
-     * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
-     * Backed by a persistent GTK frame clock tick callback (vsync-synced) + a persistent GLArea
-     * render signal handler. Both are installed once at construction / first render respectively,
-     * eliminating per-frame GLib.Source allocation and GObject signal connect/disconnect overhead.
-     * Returns 0 (handle — cancel via cancelAnimationFrame clears the pending callback).
-     */
-    requestAnimationFrame(cb) {
-      this._frameCallback = cb;
-      this.queue_render();
-      return 0;
-    }
-    /**
-     * Sets browser globals (`requestAnimationFrame`, `performance`) so that
-     * browser-targeted code (e.g. Three.js) works unchanged on GJS.
-     */
-    installGlobals() {
-      globalThis.requestAnimationFrame = (cb) => this.requestAnimationFrame(cb);
-      globalThis.cancelAnimationFrame = (_id) => {
-        this._frameCallback = null;
-      };
-      const timeOrigin = this._timeOrigin;
-      globalThis.performance = {
-        now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
-        timeOrigin: Date.now()
-      };
-    }
-  }
-);
-export {
-  WebGLBridge
-};
+
+//#region src/ts/webgl-bridge.ts
+/**
+* A `Gtk.GLArea` subclass that handles WebGL bootstrapping:
+* - Sets up OpenGL ES 3.2 context, depth buffer, stencil buffer
+* - Creates an `HTMLCanvasElement` wrapping the GLArea on first render
+* - Fires `onReady()` callbacks with (canvas, gl) once the context is available
+* - Provides `requestAnimationFrame()` backed by GTK frame clock (vsync) + render signal
+* - `installGlobals()` sets `globalThis.requestAnimationFrame` and `globalThis.performance`
+*
+* Usage:
+* ```ts
+* const widget = new WebGLBridge();
+* widget.installGlobals();  // sets globalThis.requestAnimationFrame
+* widget.onReady((canvas, gl) => {
+*     gl.clearColor(0, 0, 0, 1);
+*     // requestAnimationFrame is now available globally
+* });
+* window.set_child(widget);
+* ```
+*/
+const WebGLBridge = GObject.registerClass({ GTypeName: "GjsifyWebGLBridge" }, class WebGLBridge extends Gtk.GLArea {
+	constructor(params) {
+		super(params);
+		this._canvas = null;
+		this._readyCallbacks = [];
+		this._resizeCallbacks = [];
+		this._renderTag = null;
+		this._tickCallbackId = null;
+		this._frameCallback = null;
+		this._timeOrigin = GLib.get_monotonic_time();
+		this.set_use_es(true);
+		this.set_required_version(3, 2);
+		this.set_has_depth_buffer(true);
+		this.set_has_stencil_buffer(true);
+		attachEventControllers(this, () => this._canvas, { captureKeys: true });
+		this._tickCallbackId = this.add_tick_callback((_widget, _frameClock) => {
+			if (this._frameCallback !== null) {
+				this.queue_render();
+			}
+			return GLib.SOURCE_CONTINUE;
+		});
+		const initId = this.connect("render", () => {
+			this.disconnect(initId);
+			this.make_current();
+			this._canvas = new HTMLCanvasElement(this);
+			if (globalThis.document?.body) {
+				globalThis.document.body.appendChild(this._canvas);
+			}
+			this._canvas.getContext("webgl2");
+			const gl = this._canvas.getContext("webgl");
+			if (gl) {
+				for (const cb of this._readyCallbacks) {
+					cb(this._canvas, gl);
+				}
+				this._readyCallbacks = [];
+			}
+			this._renderTag = this.connect("render", (_widget) => {
+				if (this._frameCallback !== null) {
+					const time = (GLib.get_monotonic_time() - this._timeOrigin) / 1e3;
+					if (globalThis.__GJSIFY_DEBUG_RAF === true) {
+						console.log(`[rAF] frame callback fires t=${time.toFixed(1)}`);
+					}
+					const cb = this._frameCallback;
+					this._frameCallback = null;
+					cb(time);
+				}
+				return true;
+			});
+			return true;
+		});
+		this.connect("resize", () => {
+			const width = this.get_allocated_width();
+			const height = this.get_allocated_height();
+			if (this._canvas) {
+				this._canvas.dispatchEvent(new Event("resize"));
+			}
+			for (const cb of this._resizeCallbacks) {
+				cb(width, height);
+			}
+			if (this._frameCallback) {
+				this.requestAnimationFrame(this._frameCallback);
+			}
+		});
+		this.connect("unrealize", () => {
+			if (this._renderTag !== null) {
+				this.disconnect(this._renderTag);
+				this._renderTag = null;
+			}
+			if (this._tickCallbackId !== null) {
+				this.remove_tick_callback(this._tickCallbackId);
+				this._tickCallbackId = null;
+			}
+			this._canvas = null;
+		});
+	}
+	/** The HTMLCanvasElement wrapping this GLArea. Available after the first render. */
+	get canvas() {
+		return this._canvas;
+	}
+	/**
+	* Registers a callback to be called once the WebGL context is ready.
+	* If the context is already available, the callback fires synchronously.
+	*/
+	onReady(cb) {
+		if (this._canvas) {
+			const gl = this._canvas.getContext("webgl");
+			if (gl) {
+				cb(this._canvas, gl);
+				return;
+			}
+		}
+		this._readyCallbacks.push(cb);
+	}
+	/**
+	* @deprecated Use `onReady()` instead.
+	*/
+	onWebGLReady(cb) {
+		this.onReady(cb);
+	}
+	/**
+	* Register a callback invoked whenever the GTK widget is resized.
+	* The callback fires alongside the native 'resize' GObject signal and
+	* after the DOM 'resize' event has been dispatched on the canvas.
+	* Canvas buffer dimensions are NOT automatically updated — consumers
+	* should set `canvas.width`/`canvas.height` themselves if desired.
+	*/
+	onResize(cb) {
+		this._resizeCallbacks.push(cb);
+	}
+	/**
+	* Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
+	* Backed by a persistent GTK frame clock tick callback (vsync-synced) + a persistent GLArea
+	* render signal handler. Both are installed once at construction / first render respectively,
+	* eliminating per-frame GLib.Source allocation and GObject signal connect/disconnect overhead.
+	* Returns 0 (handle — cancel via cancelAnimationFrame clears the pending callback).
+	*/
+	requestAnimationFrame(cb) {
+		this._frameCallback = cb;
+		this.queue_render();
+		return 0;
+	}
+	/**
+	* Sets browser globals (`requestAnimationFrame`, `performance`) so that
+	* browser-targeted code (e.g. Three.js) works unchanged on GJS.
+	*/
+	installGlobals() {
+		globalThis.requestAnimationFrame = (cb) => this.requestAnimationFrame(cb);
+		globalThis.cancelAnimationFrame = (_id) => {
+			this._frameCallback = null;
+		};
+		const timeOrigin = this._timeOrigin;
+		globalThis.performance = {
+			now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
+			timeOrigin: Date.now()
+		};
+	}
+});
+
+//#endregion
+export { WebGLBridge };

package/lib/esm/webgl-buffer.js

@@ -1,17 +1,19 @@
 import { Linkable } from "./linkable.js";
-class WebGLBuffer extends Linkable {
-  constructor(_, ctx) {
-    super(_);
-    this._size = 0;
-    this._elements = new Uint8Array(0);
-    this._ctx = ctx;
-  }
-  _performDelete() {
-    const ctx = this._ctx;
-    delete ctx._buffers[this._ | 0];
-    ctx._gl.deleteBuffer(this._);
-  }
-}
-export {
-  WebGLBuffer
+
+//#region src/ts/webgl-buffer.ts
+var WebGLBuffer = class extends Linkable {
+	constructor(_, ctx) {
+		super(_);
+		this._size = 0;
+		this._elements = new Uint8Array(0);
+		this._ctx = ctx;
+	}
+	_performDelete() {
+		const ctx = this._ctx;
+		delete ctx._buffers[this._ | 0];
+		ctx._gl.deleteBuffer(this._);
+	}
 };
+
+//#endregion
+export { WebGLBuffer };

package/lib/esm/webgl-context-attributes.js

@@ -1,23 +1,24 @@
-class WebGLContextAttributes {
-  constructor(alpha, depth, stencil, antialias, premultipliedAlpha, preserveDrawingBuffer, preferLowPowerToHighPerformance, failIfMajorPerformanceCaveat) {
-    this.alpha = alpha;
-    this.depth = depth;
-    this.stencil = stencil;
-    this.antialias = antialias;
-    this.premultipliedAlpha = premultipliedAlpha;
-    this.preserveDrawingBuffer = preserveDrawingBuffer;
-    this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance;
-    this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
-    this.alpha = alpha;
-    this.depth = depth;
-    this.stencil = stencil;
-    this.antialias = antialias;
-    this.premultipliedAlpha = premultipliedAlpha;
-    this.preserveDrawingBuffer = preserveDrawingBuffer;
-    this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance;
-    this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
-  }
-}
-export {
-  WebGLContextAttributes
+//#region src/ts/webgl-context-attributes.ts
+var WebGLContextAttributes = class {
+	constructor(alpha, depth, stencil, antialias, premultipliedAlpha, preserveDrawingBuffer, preferLowPowerToHighPerformance, failIfMajorPerformanceCaveat) {
+		this.alpha = alpha;
+		this.depth = depth;
+		this.stencil = stencil;
+		this.antialias = antialias;
+		this.premultipliedAlpha = premultipliedAlpha;
+		this.preserveDrawingBuffer = preserveDrawingBuffer;
+		this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance;
+		this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
+		this.alpha = alpha;
+		this.depth = depth;
+		this.stencil = stencil;
+		this.antialias = antialias;
+		this.premultipliedAlpha = premultipliedAlpha;
+		this.preserveDrawingBuffer = preserveDrawingBuffer;
+		this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance;
+		this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
+	}
 };
+
+//#endregion
+export { WebGLContextAttributes };