ntk 3.3.0 → 3.5.0

package/lib/widgets/htmlview.js

@@ -65,6 +65,9 @@ const VOID_SKIP = new Set(['script', 'style', 'head', 'title', 'meta', 'link', '
  * Standalone (windowless) use mirrors MarkdownView:
  *   const view = new HtmlView(null, { fonts });
  *   view.setHtml(html); view.layout(width); view.draw(ctx, x, y);
+ * Content that arrives asynchronously (images) invalidates the layout —
+ * pass `onInvalidate` to re-layout/redraw when that happens (window mode
+ * repaints automatically).
  */
 export default class HtmlView {
   constructor(window, opts = {}) {
@@ -74,6 +77,10 @@ export default class HtmlView {
 
     /** called with (href, event, element) when a link is activated */
     this.onLink = opts.onLink ?? null;
+    /** called when async content (an image) invalidates the layout;
+     *  standalone hosts re-layout/redraw here — window mode also repaints
+     *  on its own */
+    this.onInvalidate = opts.onInvalidate ?? null;
     /** extra author stylesheet(s) applied after document <style>s */
     this._userSheets = [].concat(opts.stylesheet ?? []);
     /**
@@ -407,13 +414,11 @@ export default class HtmlView {
               if (res instanceof SvgView) entry.svg = res;
               else entry.image = res;
               if (!res) entry.failed = true;
-              this._layoutWidth = -1;
-              if (this.window && this.window._mapped) this.render();
+              this._invalidate();
             },
             () => {
               entry.failed = true;
-              this._layoutWidth = -1;
-              if (this.window && this.window._mapped) this.render();
+              this._invalidate();
             }
           );
         }
@@ -422,6 +427,13 @@ export default class HtmlView {
     for (const child of box.children) this._collectImages(child);
   }
 
+  /** async content arrived: drop the cached layout, repaint and/or notify */
+  _invalidate() {
+    this._layoutWidth = -1;
+    if (this.window && this.window._mapped) this.render();
+    if (this.onInvalidate) this.onInvalidate();
+  }
+
   // decoded bytes -> Image (PNG/JPEG) or SvgView (sniffed SVG markup)
   _decodeResource(buf) {
     const head = buf.subarray(0, 1024).toString('utf8');

package/lib/widgets/markdownview.js

@@ -51,7 +51,10 @@ const DEFAULT_THEME = {
  *   wnd.map();
  *
  * Standalone use (no window attach): `view.layout(width)` then
- * `view.draw(ctx, x, y)`; `view.contentHeight` after layout.
+ * `view.draw(ctx, x, y)`; `view.contentHeight` after layout. Content that
+ * arrives asynchronously (mermaid models) invalidates the layout — pass
+ * `onInvalidate` to re-layout/redraw when that happens (window mode
+ * repaints automatically).
  */
 export default class MarkdownView {
   constructor(window, opts = {}) {
@@ -70,6 +73,10 @@ export default class MarkdownView {
     /** called with (href, event) when a rendered link is clicked (window
      *  mode wires mousedown automatically; standalone callers use linkAt) */
     this.onLink = opts.onLink ?? null;
+    /** called when async content (a mermaid model) invalidates the layout;
+     *  standalone hosts re-layout/redraw here — window mode also repaints
+     *  on its own */
+    this.onInvalidate = opts.onInvalidate ?? null;
 
     if (this.window) {
       this._ctx = this.window.getContext('2d');
@@ -116,8 +123,7 @@ export default class MarkdownView {
       parseMermaid(text).then(
         (model) => {
           entry.model = model;
-          this._layoutWidth = -1;
-          if (this.window && this.window._mapped) this.render();
+          this._invalidate();
         },
         () => {
           entry.failed = true; // unsupported/invalid: stays a code block
@@ -127,6 +133,13 @@ export default class MarkdownView {
     return entry;
   }
 
+  /** async content arrived: drop the cached layout, repaint and/or notify */
+  _invalidate() {
+    this._layoutWidth = -1;
+    if (this.window && this.window._mapped) this.render();
+    if (this.onInvalidate) this.onInvalidate();
+  }
+
   /** lay content out for a container width; returns total content height */
   layout(width) {
     const fonts = this._fonts();

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.3.0",
+  "version": "3.5.0",
   "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": {