ntk 3.4.0 → 3.5.1

package/lib/renderingcontext_2d.js

@@ -736,6 +736,34 @@ class RenderingContext2d {
     this._markDirty();
   }
 
+  /**
+   * Composite shaped glyph runs onto this context, honouring the clip.
+   *
+   * CompositeGlyphs writes straight to the destination picture, so it has
+   * no way to consult our clip mask — text drawn through it used to spill
+   * out of clipped boxes while every fill and stroke stayed inside. With a
+   * clip active, render the glyph coverage into the scratch a8 mask
+   * instead, intersect that with the clip, and paint the real source
+   * through the result — the same shape as _fillPolys.
+   */
+  drawGlyphs(op, src, positioned) {
+    const app = this.window.app;
+    const R = this.Render;
+    if (!this.clipMask) {
+      drawGlyphRuns(app, op, src.id, this.picture.id, positioned);
+      this._markDirty();
+      return;
+    }
+    this._ensureFillMask();
+    this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
+    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
+    // solid white through the glyphs leaves their coverage in the a8 mask
+    drawGlyphRuns(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, positioned);
+    R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    R.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this._markDirty();
+  }
+
   // combined clip ∩ globalAlpha mask for direct composites (rect/image
   // fast paths); returns a picture id or 0. Reuses the fill scratch mask.
   _compositeMask() {
@@ -928,8 +956,7 @@ class RenderingContext2d {
       positioned.push({ run, x: cursor, y: oy });
       cursor += run.width;
     }
-    drawGlyphRuns(app, this.Render.PictOp.Over, this._backgroundPicture.id, this.picture.id, positioned);
-    this._markDirty();
+    this.drawGlyphs(this.Render.PictOp.Over, this._backgroundPicture, positioned);
   }
 
   /**

package/lib/text/layout.js

@@ -334,7 +334,13 @@ export class TextLayout {
       const flush = () => {
         if (batch.length === 0) return;
         const src = batchColor ? ctx._stylePicture(batchColor) : ctx._backgroundPicture;
-        drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
+        // via the context so the clip mask is applied (drawGlyphRuns
+        // composites straight onto the picture and cannot see it)
+        if (typeof ctx.drawGlyphs === 'function') {
+          ctx.drawGlyphs(Render.PictOp.Over, src, batch);
+        } else {
+          drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
+        }
         batch = [];
       };
       for (const r of line.runs) {

package/lib/window.js

@@ -134,6 +134,21 @@ export default class Window extends Drawable {
     if (args.title) {
       this.setTitle(args.title);
     }
+    if (args.wmClass) {
+      const c = args.wmClass;
+      if (Array.isArray(c)) this.setClass(c[0], c[1]);
+      else if (typeof c === 'object') this.setClass(c.instance, c.class ?? c.instance);
+      else this.setClass(c);
+    }
+    if (args.windowType) {
+      this.setWindowType(args.windowType);
+    }
+    if (args.sizeHints || args.resizable === false) {
+      this.setSizeHints({ ...args.sizeHints, ...(args.resizable === false && { resizable: false }) });
+    }
+    if (args.alwaysOnTop) {
+      this.setAlwaysOnTop(true);
+    }
 
     X.event_consumers[this.id] = this;
     this.on('event', (ev) => {
@@ -607,6 +622,249 @@ export default class Window extends Drawable {
     return this;
   }
 
+  /**
+   * Intern several atoms and hand them to `cb` as an object keyed by name.
+   * node-x11 caches interned atoms per connection, so a repeated call
+   * costs no round trip. Same deferred-chain hazards as setTitle: by the
+   * time the replies land the window may be gone, so callers re-check
+   * `this._destroyed`.
+   */
+  _withAtoms(names, cb) {
+    const X = this.X;
+    const out = {};
+    let pending = names.length;
+    let failed = false;
+    for (const name of names) {
+      safeRelease(X, () => {
+        X.InternAtom(false, name, (err, atom) => {
+          if (failed) return;
+          if (err) {
+            failed = true;
+            return;
+          }
+          out[name] = atom;
+          if (--pending === 0 && !this._destroyed) cb(out);
+        });
+      });
+    }
+    return this;
+  }
+
+  /**
+   * ICCCM WM_NORMAL_HINTS — how the window manager may resize this window.
+   *
+   *   setSizeHints({ minWidth, minHeight, maxWidth, maxHeight,
+   *                  widthInc, heightInc, baseWidth, baseHeight,
+   *                  minAspect: [num, den], maxAspect: [num, den],
+   *                  gravity })
+   *
+   * `resizable: false` is shorthand for pinning min and max to the current
+   * size. Without this property a WM lets the user resize a window to any
+   * size at all, which is why fixed-size dialogs need it.
+   */
+  setSizeHints(hints = {}) {
+    const {
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      widthInc,
+      heightInc,
+      baseWidth,
+      baseHeight,
+      minAspect,
+      maxAspect,
+      gravity,
+      resizable
+    } = hints;
+
+    let minW = minWidth;
+    let minH = minHeight;
+    let maxW = maxWidth;
+    let maxH = maxHeight;
+    if (resizable === false) {
+      minW = minW ?? this.width;
+      minH = minH ?? this.height;
+      maxW = maxW ?? this.width;
+      maxH = maxH ?? this.height;
+    }
+
+    // XSizeHints: 18 CARD32s, flags first (ICCCM 4.1.2.3)
+    const PMinSize = 16;
+    const PMaxSize = 32;
+    const PResizeInc = 64;
+    const PAspect = 128;
+    const PBaseSize = 256;
+    const PWinGravity = 512;
+
+    const v = new Uint32Array(18);
+    let flags = 0;
+    if (minW !== undefined || minH !== undefined) {
+      flags |= PMinSize;
+      v[5] = minW ?? 0;
+      v[6] = minH ?? 0;
+    }
+    if (maxW !== undefined || maxH !== undefined) {
+      flags |= PMaxSize;
+      v[7] = maxW ?? 0;
+      v[8] = maxH ?? 0;
+    }
+    if (widthInc !== undefined || heightInc !== undefined) {
+      flags |= PResizeInc;
+      v[9] = widthInc ?? 1;
+      v[10] = heightInc ?? 1;
+    }
+    if (minAspect || maxAspect) {
+      flags |= PAspect;
+      v[11] = minAspect?.[0] ?? 0;
+      v[12] = minAspect?.[1] ?? 1;
+      v[13] = maxAspect?.[0] ?? 0;
+      v[14] = maxAspect?.[1] ?? 1;
+    }
+    if (baseWidth !== undefined || baseHeight !== undefined) {
+      flags |= PBaseSize;
+      v[15] = baseWidth ?? 0;
+      v[16] = baseHeight ?? 0;
+    }
+    if (gravity !== undefined) {
+      flags |= PWinGravity;
+      v[17] = gravity;
+    }
+    v[0] = flags;
+
+    safeRelease(this.X, () => {
+      this.X.ChangeProperty(
+        0,
+        this.id,
+        this.X.atoms.WM_NORMAL_HINTS,
+        this.X.atoms.WM_SIZE_HINTS,
+        32,
+        Buffer.from(v.buffer, v.byteOffset, v.byteLength)
+      );
+    });
+    return this;
+  }
+
+  /**
+   * ICCCM WM_CLASS — the instance/class pair taskbars and WMs use to group
+   * windows, match icons and apply per-application rules. Two NUL-
+   * terminated latin-1 strings.
+   */
+  setClass(instance, className = instance) {
+    const data = Buffer.from(`${instance}\0${className}\0`, 'latin1');
+    safeRelease(this.X, () => {
+      this.X.ChangeProperty(0, this.id, this.X.atoms.WM_CLASS, this.X.atoms.STRING, 8, data);
+    });
+    return this;
+  }
+
+  /**
+   * EWMH _NET_WM_WINDOW_TYPE — what kind of window this is, e.g. 'dialog',
+   * 'utility', 'tooltip', 'dropdown_menu', 'notification'. Window managers
+   * use it to pick decorations, stacking and whether the window belongs in
+   * the taskbar. Accepts a short name or a full atom name, and a list when
+   * you want fallbacks (most-preferred first, per the spec).
+   *
+   * This is the WM-cooperative alternative to override-redirect: a menu
+   * marked 'dropdown_menu' still gets shadows and correct stacking, while
+   * an override-redirect window bypasses the WM entirely.
+   */
+  setWindowType(type) {
+    const names = (Array.isArray(type) ? type : [type]).map((t) =>
+      t.startsWith('_NET_WM_WINDOW_TYPE_') ? t : `_NET_WM_WINDOW_TYPE_${t.toUpperCase()}`
+    );
+    return this._withAtoms(['_NET_WM_WINDOW_TYPE', ...names], (atoms) => {
+      const v = new Uint32Array(names.map((n) => atoms[n]));
+      safeRelease(this.X, () => {
+        this.X.ChangeProperty(
+          0,
+          this.id,
+          atoms._NET_WM_WINDOW_TYPE,
+          this.X.atoms.ATOM,
+          32,
+          Buffer.from(v.buffer, v.byteOffset, v.byteLength)
+        );
+      });
+    });
+  }
+
+  /**
+   * Keep this window above normal windows.
+   *
+   * Prefers EWMH `_NET_WM_STATE_ABOVE`. quartz-wm (XQuartz) does not
+   * advertise that state, so on macOS this falls back to the Apple-WM
+   * extension's window levels, which are the only always-on-top mechanism
+   * there. Apple-WM addresses the window the WM manages, so once we have
+   * been reparented the request must name our frame — the ancestor whose
+   * parent is root — not our own id.
+   */
+  setAlwaysOnTop(on = true) {
+    const X = this.X;
+    const _NET_WM_STATE_ADD = 1;
+    const _NET_WM_STATE_REMOVE = 0;
+
+    this._withAtoms(['_NET_WM_STATE', '_NET_WM_STATE_ABOVE', '_NET_SUPPORTED'], (atoms) => {
+      const root = this.app.display.screen[0].root;
+      safeRelease(X, () => {
+        X.GetProperty(0, root, atoms._NET_SUPPORTED, X.atoms.ATOM, 0, 1024, (err, prop) => {
+          if (err || this._destroyed) return;
+          let supported = false;
+          const data = prop?.data;
+          for (let i = 0; data && i + 4 <= data.length; i += 4) {
+            if (data.readUInt32LE(i) === atoms._NET_WM_STATE_ABOVE) {
+              supported = true;
+              break;
+            }
+          }
+          if (supported) {
+            // a mapped window changes state by asking the WM, not by
+            // writing the property (EWMH 7.7). SendEvent takes raw event
+            // bytes, so pack the 32-byte ClientMessage by hand.
+            const ev = Buffer.alloc(32);
+            ev.writeUInt8(33, 0); // ClientMessage
+            ev.writeUInt8(32, 1); // format
+            ev.writeUInt32LE(this.id >>> 0, 4);
+            ev.writeUInt32LE(atoms._NET_WM_STATE >>> 0, 8);
+            ev.writeUInt32LE(on ? _NET_WM_STATE_ADD : _NET_WM_STATE_REMOVE, 12);
+            ev.writeUInt32LE(atoms._NET_WM_STATE_ABOVE >>> 0, 16);
+            ev.writeUInt32LE(0, 20); // second property: none
+            ev.writeUInt32LE(1, 24); // source indication: application
+            safeRelease(X, () => {
+              X.SendEvent(
+                root,
+                false,
+                x11.eventMask.SubstructureRedirect | x11.eventMask.SubstructureNotify,
+                ev
+              );
+            });
+          } else {
+            this._appleWMSetLevel(on);
+          }
+        });
+      });
+    });
+    return this;
+  }
+
+  /** Apple-WM fallback for setAlwaysOnTop; no-op where the extension is absent. */
+  _appleWMSetLevel(on) {
+    const X = this.X;
+    safeRelease(X, () => {
+      X.require('apple-wm', (err, ext) => {
+        if (err || this._destroyed) return;
+        // the level belongs on the window quartz-wm manages: our frame
+        this.queryTree((treeErr, tree) => {
+          if (treeErr || this._destroyed) return;
+          const rootId = tree.root.id;
+          const target = tree.parent.id === rootId ? this.id : tree.parent.id;
+          safeRelease(X, () => {
+            ext.SetWindowLevel(target, on ? ext.WindowLevel.Floating : ext.WindowLevel.Normal);
+          });
+        });
+      });
+    });
+  }
+
   /**
    * Set the mouse cursor shown over this window. Accepts a friendly name
    * ('text', 'pointer', 'wait', ... — see cursorShapes in lib/cursor.js and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -51,7 +51,7 @@
     "parse-color": "^1.0.0",
     "pngjs": "^7.0.0",
     "postcss": "^8.5.23",
-    "x11": "^3.1.1",
+    "x11": "^3.1.2",
     "yoga-layout": "^3.2.1"
   },
   "scripts": {