ntk 6.5.0 → 6.6.1

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

@@ -348,6 +348,9 @@ export default class Window extends Drawable {
     this._foreign = !!args.id;
     this._backingOptOut = args.backingStore === false;
     this._backing = null;
+    // What the backing store clears to, and the window attribute it mirrors.
+    // Undefined means "nothing was asked for" — see _clearColour.
+    this._clearPixel = args.backgroundPixel;
     this._dirty = false;
     this._presentPending = false;
 
@@ -696,32 +699,91 @@ export default class Window extends Drawable {
     });
   }
 
+  /**
+   * The pixel the backing store's unpainted area is cleared to.
+   *
+   * A pixmap's contents start *undefined* — whatever was in that memory — so
+   * something has to be written before it can be presented, and the same goes
+   * for the region a grow adds. What that something is follows the window's
+   * own `backgroundPixel`, which is exactly what the server would paint into
+   * exposed area on a window with no backing store. Without one: transparent
+   * for a depth-32 ARGB window, and the screen's white otherwise.
+   */
+  _clearColour() {
+    if (this._clearPixel !== undefined) return this._clearPixel;
+    const depth = this.depth || this.display.screen[0].root_depth;
+    return depth === 32 ? 0 : this.display.screen[0].white_pixel;
+  }
+
+  /**
+   * The window's background colour, as an X pixel value.
+   *
+   * A double-buffered window has two of them and they have to agree: the X
+   * window attribute the server paints into exposed area, and the colour the
+   * backing store clears to. Setting one and not the other is why a resize
+   * could show white on a window that draws itself dark.
+   *
+   * The backing store's *headroom* — the area a future grow will expand
+   * into, which by definition holds nothing yet — is recoloured too, so a
+   * later resize does not expose the previous colour.
+   */
+  setBackgroundPixel(pixel) {
+    this._clearPixel = pixel;
+    if (this._destroyed) return this;
+    if (this._clearGc) this.X.ChangeGC(this._clearGc, { foreground: pixel });
+    if (!this._foreign) {
+      this.X.ChangeWindowAttributes(this.id, { backgroundPixel: pixel }, () => {});
+    }
+    const backing = this._backing;
+    if (backing && this._clearGc) {
+      const rects = [];
+      if (backing.width > this.width) {
+        rects.push(this.width, 0, backing.width - this.width, backing.height);
+      }
+      if (backing.height > this.height) {
+        rects.push(0, this.height, this.width, backing.height - this.height);
+      }
+      if (rects.length) this.X.PolyFillRectangle(backing.id, this._clearGc, rects);
+    }
+    return this;
+  }
+
   // grow-only backing pixmap (re)allocation, with headroom (see
-  // BACKING_GRANULARITY); new area is cleared to white
+  // BACKING_GRANULARITY). What is already drawn is carried across and only
+  // the region the grow adds is cleared (see _clearColour) — clearing the
+  // whole pixmap made the *entire* window flash the clear colour between a
+  // resize and the redraw, not just the new strip.
   _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: this._clearColour(),
         graphicsExposures: 0
       });
     }
-    this.X.PolyFillRectangle(pixmap.id, this._clearGc, [0, 0, newW, newH]);
+    if (cur) {
+      // The new pixmap is strictly larger, so the old content lands at the
+      // same coordinates and only the L-shaped remainder is new.
+      this.X.CopyArea(cur.id, pixmap.id, this._clearGc, 0, 0, 0, 0, cur.width, cur.height);
+      const rects = [];
+      if (newW > cur.width) rects.push(cur.width, 0, newW - cur.width, newH);
+      if (newH > cur.height) rects.push(0, cur.height, cur.width, newH - cur.height);
+      if (rects.length) this.X.PolyFillRectangle(pixmap.id, this._clearGc, rects);
+    } else {
+      this.X.PolyFillRectangle(pixmap.id, this._clearGc, [0, 0, newW, newH]);
+    }
     if (cur) cur.destroy();
     this._backing = pixmap;
     this._backingValid = false;

package/package.json

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