ntk 6.5.0 → 6.6.0

package/lib/app.js

@@ -146,6 +146,26 @@ export default class App {
     return chooseGLXConfig(this, spec);
   }
 
+  /**
+   * Find a 32-bit TrueColor visual with an alpha channel, for per-pixel
+   * transparent windows (ARGB). Returns `{ visual, depth: 32 }` — pass
+   * these to `createWindow()` together with `backgroundPixel: 0`. Returns
+   * `null` when the server has no such visual (XQuartz, for example).
+   *
+   * The compositor blends the window's alpha channel automatically; no
+   * Composite extension calls or EWMH properties are needed from the client.
+   * Without a running compositor, transparent regions render black.
+   */
+  findArgbVisual(screen = 0) {
+    const depths = this.display.screen[screen].depths;
+    const visuals = depths?.[32];
+    if (!visuals) return null;
+    for (const [id, visual] of Object.entries(visuals)) {
+      if (visual.class === 4) return { visual: Number(id), depth: 32 };
+    }
+    return null;
+  }
+
   rootWindow(screen = 0) {
     return new Window(this, { id: this.display.screen[screen].root });
   }

package/lib/renderingcontext_2d.js

@@ -284,6 +284,9 @@ class RenderingContext2d {
         : depth === 8
           ? this.Render.a8
           : this.Render.rgb24;
+    // Does the target have a real alpha channel? Only then is "transparent"
+    // a colour it can hold, which is what clearRect turns on.
+    this._hasAlpha = depth === 32;
     this.picture = new Picture(this.window.app, {
       drawable: target,
       format,
@@ -1363,12 +1366,19 @@ class RenderingContext2d {
   // ------------------------------------------------------------------
   // drawing
 
+  // Clearing means "back to nothing", and what nothing looks like depends on
+  // whether the target can hold transparency. A depth-32 ARGB window gets
+  // transparent black, the canvas spec's answer, and the compositor shows
+  // whatever is behind it. Anything else has no alpha channel to write, so
+  // clearing stays opaque white — the paper an opaque window starts from,
+  // and what every caller predating ARGB windows expects.
   clearRect(x, y, w, h) {
+    const alpha = this._hasAlpha;
     if (matIsIdentity(this._m) && !this._clips.length) {
       this.Render.FillRectangles(
         this.Render.PictOp.Src,
         this.picture.id,
-        [1, 1, 1, 1],
+        alpha ? [0, 0, 0, 0] : [1, 1, 1, 1],
         [x, y, w, h],
       );
       this._markDirty();
@@ -1376,11 +1386,18 @@ class RenderingContext2d {
     }
     const tmp = new Path2D();
     tmp.rect(x, y, w, h);
-    // clear = opaque white, ignoring alpha and the composite op (but
-    // honoring the clip), matching the identity fast path above
+    // Transformed or clipped, so the rect is a polygon and the erase has to
+    // run through the coverage mask. OutReverse is `dst OUT src`: against an
+    // opaque source it scales the destination by 1 - coverage, erasing to
+    // transparent with an antialiased edge. PictOpSrc would take the whole
+    // bounding box with it, coverage or not. Opaque targets keep the old
+    // behaviour: paint white over the shape, ignoring alpha and the
+    // composite op but honoring the clip, matching the fast path above.
     this._fillPolys(flattenPath(tmp._cmds, this._m), "nonzero", {
-      src: this.createSolidPicture(1, 1, 1, 1),
-      op: this.Render.PictOp.Over,
+      src: alpha
+        ? this.createSolidPicture(0, 0, 0, 1)
+        : this.createSolidPicture(1, 1, 1, 1),
+      op: alpha ? this.Render.PictOp.OutReverse : this.Render.PictOp.Over,
       alpha: 1,
     });
   }

package/lib/window.js

@@ -697,27 +697,25 @@ export default class Window extends Drawable {
   }
 
   // grow-only backing pixmap (re)allocation, with headroom (see
-  // BACKING_GRANULARITY); new area is cleared to white
+  // BACKING_GRANULARITY); new area is cleared to the window's background
+  // (white for opaque windows, fully transparent for depth-32 ARGB ones)
   _allocBacking(w, h) {
     const cur = this._backing;
     if (cur && cur.width >= w && cur.height >= h) return;
     const roundUp = (v) => Math.ceil(v / BACKING_GRANULARITY) * BACKING_GRANULARITY;
     const newW = roundUp(Math.max(w, cur ? cur.width : 0));
     const newH = roundUp(Math.max(h, cur ? cur.height : 0));
+    const depth = this.depth || this.display.screen[0].root_depth;
     const pixmap = new Pixmap(this.app, {
       parent: this,
       width: newW,
       height: newH,
-      // must match the window's depth: CopyArea between drawables of
-      // different depths is a BadMatch
-      depth: this.depth || this.display.screen[0].root_depth
+      depth
     });
     if (!this._clearGc) {
-      // reusable across reallocs: a GC is valid for any drawable of the
-      // same screen and depth, so one outlives every backing pixmap
       this._clearGc = this.X.AllocID();
       this.X.CreateGC(this._clearGc, pixmap.id, {
-        foreground: this.display.screen[0].white_pixel,
+        foreground: depth === 32 ? 0 : this.display.screen[0].white_pixel,
         graphicsExposures: 0
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",