@gjsify/webgl 0.26.0 → 0.27.0

package/lib/esm/html-canvas-element.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{WebGLRenderingContext as e}from"./webgl-rendering-context.js";import{WebGL2RenderingContext as t}from"./webgl2-rendering-context.js";import{HTMLCanvasElement as n}from"@gjsify/dom-elements";var HTMLCanvasElement=class extends n{constructor(e){super(),this.gtkGlArea=e}get width(){return this.gtkGlArea.get_allocated_width()}set width(e){}get height(){return this.gtkGlArea.get_allocated_height()}set height(e){}get clientWidth(){return this.width}get clientHeight(){return this.height}get offsetWidth(){return this.width}get offsetHeight(){return this.height}getGlArea(){return this.gtkGlArea}getContext(n,r){return n===`webgl`||n===`experimental-webgl`?(this._webgl||=(this.gtkGlArea.make_current(),new e(this,r)),this._webgl):n===`webgl2`?(this._webgl2||=(this.gtkGlArea.make_current(),new t(this,r)),this._webgl2):super.getContext(n,r)}};export{HTMLCanvasElement};
+import"./_virtual/_rolldown/runtime.js";import{WebGLRenderingContext as e}from"./webgl-rendering-context.js";import{WebGL2RenderingContext as t}from"./webgl2-rendering-context.js";import{HTMLCanvasElement as n}from"@gjsify/dom-elements";var HTMLCanvasElement=class extends n{constructor(e){super(),this.gtkGlArea=e}get width(){return this.gtkGlArea.get_allocated_width()*this.scaleFactor}set width(e){}get height(){return this.gtkGlArea.get_allocated_height()*this.scaleFactor}set height(e){}get scaleFactor(){return this.gtkGlArea.get_scale_factor()||1}get clientWidth(){return this.gtkGlArea.get_allocated_width()}get clientHeight(){return this.gtkGlArea.get_allocated_height()}get offsetWidth(){return this.clientWidth}get offsetHeight(){return this.clientHeight}getGlArea(){return this.gtkGlArea}getContext(n,r){return n===`webgl`||n===`experimental-webgl`?(this._webgl||=(this.gtkGlArea.make_current(),new e(this,r)),this._webgl):n===`webgl2`?(this._webgl2||=(this.gtkGlArea.make_current(),new t(this,r)),this._webgl2):super.getContext(n,r)}};export{HTMLCanvasElement};

package/lib/esm/html-canvas-element.spec.js

@@ -0,0 +1 @@
+import{__name as e}from"./_virtual/_rolldown/runtime.js";import{HTMLCanvasElement as t}from"./html-canvas-element.js";import{describe as n,expect as r,it as i}from"@gjsify/unit";function stubGlArea(e,t,n){return{get_allocated_width:()=>e,get_allocated_height:()=>t,get_scale_factor:()=>n}}var a=e(async()=>{await n(`HTMLCanvasElement (GLArea) — drawing buffer vs CSS size`,async()=>{await i(`reports the drawing buffer in DEVICE pixels on a HiDPI surface`,async()=>{let e=new t(stubGlArea(360,655,3));r(e.width).toBe(1080),r(e.height).toBe(1965)}),await i(`keeps the CSS layout size LOGICAL on the same surface`,async()=>{let e=new t(stubGlArea(360,655,3));r(e.clientWidth).toBe(360),r(e.clientHeight).toBe(655),r(e.offsetWidth).toBe(360),r(e.offsetHeight).toBe(655)}),await i(`CSS size × devicePixelRatio equals the drawing buffer`,async()=>{let e=new t(stubGlArea(800,600,2));r(e.clientWidth*e.scaleFactor).toBe(e.width),r(e.clientHeight*e.scaleFactor).toBe(e.height)}),await i(`is a no-op change at scale-factor 1 (every pre-HiDPI host)`,async()=>{let e=new t(stubGlArea(1024,768,1));r(e.width).toBe(1024),r(e.height).toBe(768),r(e.clientWidth).toBe(1024),r(e.clientHeight).toBe(768)}),await i(`treats an unrealized widget (scale 0) as scale 1, not as a 0×0 buffer`,async()=>{let e=new t(stubGlArea(640,480,0));r(e.scaleFactor).toBe(1),r(e.width).toBe(640),r(e.height).toBe(480)}),await i(`ignores width/height writes — GTK owns the allocation`,async()=>{let e=new t(stubGlArea(360,655,3));e.width=42,e.height=42,r(e.width).toBe(1080),r(e.height).toBe(1965)})})},`default`);export{a as default};

package/lib/esm/test.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import e from"./register.spec.js";import t from"./webgl1.spec.js";import n from"./webgl2.spec.js";import{run as r}from"@gjsify/unit";r({testSuite:async()=>{await t(),await n()},registerSuite:e});
+import"./_virtual/_rolldown/runtime.js";import e from"./html-canvas-element.spec.js";import t from"./register.spec.js";import n from"./webgl1.spec.js";import r from"./webgl2.spec.js";import{run as i}from"@gjsify/unit";i({testSuite:async()=>{await n(),await r(),await e()},registerSuite:t});

package/lib/esm/webgl-bridge.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{WebGLRenderingContext as e}from"./webgl-rendering-context.js";import{WebGL2RenderingContext as t}from"./webgl2-rendering-context.js";import{HTMLCanvasElement as n}from"./html-canvas-element.js";import{notifyElementResize as r}from"@gjsify/dom-elements";import i from"gi://GObject";import a from"gi://GLib?version=2.0";import o from"gi://Gtk?version=4.0";import{attachEventControllers as s}from"@gjsify/event-bridge";import{Event as c}from"@gjsify/dom-events";const l=i.registerClass({GTypeName:`GjsifyWebGLBridge`},class WebGLBridge extends o.GLArea{constructor(e){super(e),this._canvas=null,this._readyCallbacks=[],this._resizeCallbacks=[],this._renderTag=null,this._tickCallbackId=null,this._frameCallback=null,this._lastFrameCallback=null,this._lastFrameTime=0,this._replaying=!1,this._frameCallbackId=0,this._nextFrameId=1,this._timeOrigin=a.get_monotonic_time(),this.set_use_es(!0),this.set_required_version(3,2),this.set_has_depth_buffer(!0),this.set_has_stencil_buffer(!0),s(this,()=>this._canvas,{captureKeys:!0}),this._tickCallbackId=this.add_tick_callback((e,t)=>(this._frameCallback!==null&&this.queue_render(),a.SOURCE_CONTINUE));let t=this.connect(`render`,()=>{this.disconnect(t),this.make_current(),this._canvas=new n(this);{let e=globalThis;e.document?.body&&e.document.body.appendChild(this._canvas)}this._canvas.getContext(`webgl2`);let e=this._canvas.getContext(`webgl`);if(e){for(let t of this._readyCallbacks)t(this._canvas,e);this._readyCallbacks=[]}return this._renderTag=this.connect(`render`,e=>{let t=(a.get_monotonic_time()-this._timeOrigin)/1e3;if(this._frameCallback!==null){globalThis.__GJSIFY_DEBUG_RAF===!0&&console.log(`[rAF] frame callback fires t=${t.toFixed(1)}`);let e=this._frameCallback;this._frameCallback=null,this._frameCallbackId=0,this._lastFrameCallback=e,this._lastFrameTime=t,e(t)}else if(this._lastFrameCallback!==null){this._replaying=!0;try{this._lastFrameCallback(this._lastFrameTime)}finally{this._replaying=!1}}return!0}),!0});this.connect(`resize`,()=>{let e=this.get_allocated_width(),t=this.get_allocated_height();this._canvas&&(this._canvas.dispatchEvent(new c(`resize`)),r(this._canvas,e,t));for(let n of this._resizeCallbacks)n(e,t);this._frameCallback&&this.requestAnimationFrame(this._frameCallback)}),this.connect(`unrealize`,()=>{this._renderTag!==null&&(this.disconnect(this._renderTag),this._renderTag=null),this._tickCallbackId!==null&&(this.remove_tick_callback(this._tickCallbackId),this._tickCallbackId=null),this._frameCallback=null,this._lastFrameCallback=null,this._lastFrameTime=0,this._replaying=!1,this._canvas=null})}get canvas(){return this._canvas}onReady(e){if(this._canvas){let t=this._canvas.getContext(`webgl`);if(t){e(this._canvas,t);return}}this._readyCallbacks.push(e)}onWebGLReady(e){this.onReady(e)}onResize(e){this._resizeCallbacks.push(e)}requestAnimationFrame(e){let t=this._nextFrameId++;return this._replaying?t:(this._frameCallback=e,this._frameCallbackId=t,this.queue_render(),t)}cancelAnimationFrame(e){e!==0&&e===this._frameCallbackId&&(this._frameCallback=null,this._frameCallbackId=0,this._lastFrameCallback=null,this._lastFrameTime=0)}installGlobals(){let n=globalThis;n.requestAnimationFrame=e=>this.requestAnimationFrame(e),n.cancelAnimationFrame=e=>this.cancelAnimationFrame(e),n.WebGLRenderingContext=e,n.WebGL2RenderingContext=t;let r=this._timeOrigin;n.performance={now:()=>(a.get_monotonic_time()-r)/1e3,timeOrigin:Date.now()}}});export{l as WebGLBridge};
+import"./_virtual/_rolldown/runtime.js";import{WebGLRenderingContext as e}from"./webgl-rendering-context.js";import{WebGL2RenderingContext as t}from"./webgl2-rendering-context.js";import{HTMLCanvasElement as n}from"./html-canvas-element.js";import{notifyElementResize as r}from"@gjsify/dom-elements";import i from"gi://GObject";import a from"gi://GLib?version=2.0";import o from"gi://Gtk?version=4.0";import{attachEventControllers as s}from"@gjsify/event-bridge";import{Event as c}from"@gjsify/dom-events";const l=i.registerClass({GTypeName:`GjsifyWebGLBridge`},class WebGLBridge extends o.GLArea{constructor(e){super(e),this._canvas=null,this._readyCallbacks=[],this._resizeCallbacks=[],this._renderTag=null,this._tickCallbackId=null,this._frameCallback=null,this._lastFrameCallback=null,this._lastFrameTime=0,this._replaying=!1,this._frameCallbackId=0,this._nextFrameId=1,this._timeOrigin=a.get_monotonic_time(),this.set_use_es(!0),this.set_required_version(3,2),this.set_has_depth_buffer(!0),this.set_has_stencil_buffer(!0),s(this,()=>this._canvas,{captureKeys:!0}),this._tickCallbackId=this.add_tick_callback((e,t)=>(this._frameCallback!==null&&this.queue_render(),a.SOURCE_CONTINUE));let t=this.connect(`render`,()=>{this.disconnect(t),this.make_current(),this._canvas=new n(this);{let e=globalThis;e.document?.body&&e.document.body.appendChild(this._canvas)}this._canvas.getContext(`webgl2`);let e=this._canvas.getContext(`webgl`);if(e){for(let t of this._readyCallbacks)t(this._canvas,e);this._readyCallbacks=[]}return this._renderTag=this.connect(`render`,e=>{let t=(a.get_monotonic_time()-this._timeOrigin)/1e3;if(this._frameCallback!==null){globalThis.__GJSIFY_DEBUG_RAF===!0&&console.log(`[rAF] frame callback fires t=${t.toFixed(1)}`);let e=this._frameCallback;this._frameCallback=null,this._frameCallbackId=0,this._lastFrameCallback=e,this._lastFrameTime=t,e(t)}else if(this._lastFrameCallback!==null){this._replaying=!0;try{this._lastFrameCallback(this._lastFrameTime)}finally{this._replaying=!1}}return!0}),!0});this.connect(`resize`,()=>{let e=this.get_allocated_width(),t=this.get_allocated_height();this._canvas&&(this._canvas.dispatchEvent(new c(`resize`)),r(this._canvas,e,t));for(let n of this._resizeCallbacks)n(e,t);this._frameCallback&&this.requestAnimationFrame(this._frameCallback)}),this.connect(`unrealize`,()=>{this._renderTag!==null&&(this.disconnect(this._renderTag),this._renderTag=null),this._tickCallbackId!==null&&(this.remove_tick_callback(this._tickCallbackId),this._tickCallbackId=null),this._frameCallback=null,this._lastFrameCallback=null,this._lastFrameTime=0,this._replaying=!1,this._canvas=null})}get canvas(){return this._canvas}onReady(e){if(this._canvas){let t=this._canvas.getContext(`webgl`);if(t){e(this._canvas,t);return}}this._readyCallbacks.push(e)}onWebGLReady(e){this.onReady(e)}onResize(e){this._resizeCallbacks.push(e)}requestAnimationFrame(e){let t=this._nextFrameId++;return this._replaying?t:(this._frameCallback=e,this._frameCallbackId=t,this.queue_render(),t)}cancelAnimationFrame(e){e!==0&&e===this._frameCallbackId&&(this._frameCallback=null,this._frameCallbackId=0,this._lastFrameCallback=null,this._lastFrameTime=0)}installGlobals(){let n=globalThis;n.requestAnimationFrame=e=>this.requestAnimationFrame(e),n.cancelAnimationFrame=e=>this.cancelAnimationFrame(e),n.WebGLRenderingContext=e,n.WebGL2RenderingContext=t,Object.defineProperty(globalThis,"devicePixelRatio",{get:()=>this.get_scale_factor()||1,configurable:!0});let r=this._timeOrigin;n.performance={now:()=>(a.get_monotonic_time()-r)/1e3,timeOrigin:Date.now()}}});export{l as WebGLBridge};

package/lib/types/html-canvas-element.d.ts

@@ -7,17 +7,43 @@ export declare class HTMLCanvasElement extends BaseHTMLCanvasElement {
     _webgl?: OurWebGLRenderingContext;
     _webgl2?: OurWebGL2RenderingContext;
     constructor(gtkGlArea: Gtk.GLArea);
-    /** Width from the GTK GLArea allocated size (overrides DOM attr-backed getter). */
+    /**
+     * DRAWING-BUFFER width, in DEVICE pixels (overrides the DOM attr-backed getter).
+     *
+     * GtkGLArea's framebuffer is `allocation × scale-factor`, and the GL viewport
+     * is raw device pixels — GTK does NOT apply the surface scale to GL the way
+     * it silently pre-scales a Cairo context for `Gtk.DrawingArea`. So on a
+     * scale-factor-3 display (a phone) a viewport computed from the ALLOCATION
+     * covers the bottom-left ninth of the framebuffer and the rest stays at the
+     * clear colour. Measured on a OnePlus 6T / postmarketOS, GNOME Mobile,
+     * 1080×2340 at scale 3: the three.js teapot and the Excalibur game each
+     * rendered into a 120×218 corner of a 360×655-logical widget.
+     *
+     * Reporting device pixels here is also what the browser contract means by
+     * `canvas.width` — the drawing buffer, which is exactly what
+     * `WebGLRenderingContextBase.drawingBufferWidth` re-exports. CSS layout size
+     * stays logical (`clientWidth`/`offsetWidth` below), so a consumer that
+     * multiplies a layout size by `devicePixelRatio` (`installGlobals()` exposes
+     * the live scale factor) lands on the same number.
+     */
     get width(): number;
     set width(_width: number);
-    /** Height from the GTK GLArea allocated size (overrides DOM attr-backed getter). */
+    /** DRAWING-BUFFER height, in DEVICE pixels. See `width` for why it is scaled. */
     get height(): number;
     set height(_height: number);
+    /**
+     * The widget's surface scale factor (1 on a standard display, 2–3 on HiDPI).
+     * Read live rather than cached: moving a window between monitors changes it,
+     * and GTK re-allocates the widget rather than recreating the canvas.
+     */
+    get scaleFactor(): number;
+    /** CSS layout width — the GTK allocation, in LOGICAL pixels. */
     get clientWidth(): number;
+    /** CSS layout height — the GTK allocation, in LOGICAL pixels. */
     get clientHeight(): number;
-    /** CSS layout width — same as the GTK-allocated pixel width for a full-window canvas. */
+    /** CSS layout width — same as `clientWidth` for a border-less canvas. */
     get offsetWidth(): number;
-    /** CSS layout height — same as the GTK-allocated pixel height for a full-window canvas. */
+    /** CSS layout height — same as `clientHeight` for a border-less canvas. */
     get offsetHeight(): number;
     /** Returns the underlying Gtk.GLArea. Used by WebGLRenderingContext for GLSL version detection. */
     getGlArea(): Gtk.GLArea;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/webgl",
-    "version": "0.26.0",
+    "version": "0.27.0",
     "description": "WebGL module for Gjs",
     "module": "lib/esm/index.js",
     "types": "lib/types/index.d.ts",
@@ -19,8 +19,7 @@
         "./lib/esm/register.js"
     ],
     "files": [
-        "lib",
-        "prebuilds"
+        "lib"
     ],
     "gjsify": {
         "platforms": [
@@ -28,9 +27,10 @@
             "linux-arm64",
             "linux-ppc64",
             "linux-s390x",
-            "linux-riscv64"
+            "linux-riscv64",
+            "darwin-arm64",
+            "darwin-x64"
         ],
-        "prebuilds": "prebuilds",
         "runtimes": {
             "gjs": "polyfill",
             "node": "none",
@@ -40,7 +40,7 @@
         "tier": 1
     },
     "scripts": {
-        "clear": "rm -rf lib tmp build test.gjs.mjs tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo || exit 0",
+        "clear": "gjsify clear lib tmp build test.gjs.mjs tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo",
         "check": "gjsify tsc --noEmit",
         "init:meson": "meson setup build .",
         "init:meson:wipe": "gjsify run init:meson --wipe",
@@ -60,8 +60,8 @@
         "WebGL"
     ],
     "devDependencies": {
-        "@gjsify/cli": "^0.26.0",
-        "@gjsify/unit": "^0.26.0",
+        "@gjsify/cli": "^0.27.0",
+        "@gjsify/unit": "^0.27.0",
         "@types/bit-twiddle": "^1.0.3",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
@@ -71,10 +71,10 @@
         "@girs/gjs": "^4.1.0",
         "@girs/gtk-4.0": "^4.1.0",
         "@girs/gwebgl-0.1": "0.1.0-4.0.0-rc.5",
-        "@gjsify/dom-elements": "^0.26.0",
-        "@gjsify/dom-events": "^0.26.0",
-        "@gjsify/event-bridge": "^0.26.0",
-        "@gjsify/utils": "^0.26.0",
+        "@gjsify/dom-elements": "^0.27.0",
+        "@gjsify/dom-events": "^0.27.0",
+        "@gjsify/event-bridge": "^0.27.0",
+        "@gjsify/utils": "^0.27.0",
         "bit-twiddle": "^1.0.2",
         "glsl-tokenizer": "^2.1.5"
     },
@@ -87,5 +87,14 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/framework/webgl#readme"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/framework/webgl#readme",
+    "optionalDependencies": {
+        "@gjsify/webgl-darwin-arm64": "0.27.0",
+        "@gjsify/webgl-darwin-x64": "0.27.0",
+        "@gjsify/webgl-linux-arm64": "0.27.0",
+        "@gjsify/webgl-linux-ppc64": "0.27.0",
+        "@gjsify/webgl-linux-riscv64": "0.27.0",
+        "@gjsify/webgl-linux-s390x": "0.27.0",
+        "@gjsify/webgl-linux-x64": "0.27.0"
+    }
 }