ntk 6.0.0 → 6.1.0

package/lib/shm-upload.js

@@ -0,0 +1,166 @@
+// Optional MIT-SHM fast path for bulk pixel transfers.
+//
+// Large PutImage/GetImage traffic on a local connection is much cheaper through
+// shared memory than down the socket — roughly 2x on uploads and many times
+// faster on readbacks (which otherwise pay for a whole image-sized reply). This
+// wraps node-x11's provider-backed MIT-SHM API (X.require('shm')) into a small,
+// ordering-safe helper the 2d context and Image use, and falls back to core
+// PutImage/GetImage wherever SHM will not attach (remote display, old server,
+// no /dev/shm) or the transfer is too small to bother.
+//
+// Ordering discipline: an SHM upload is only ever issued through a segment that
+// is *already attached* — so it slots into the request stream synchronously,
+// exactly where a core PutImage would have gone, and never reorders drawing.
+// Attaching a segment costs a round trip, so the first upload of a given size
+// falls back to core and warms a segment in the background; the next one is a
+// synchronous shared-memory write. A segment is returned to the pool only after
+// the server signals (ShmCompletion) it has finished reading, so a reused
+// buffer is never overwritten mid-read.
+
+// Below this many bytes the socket is as fast as shared memory (measured: a
+// PutImage and a tmpfs write are both syscall-bound at a few KB; the win starts
+// around 64 KB and grows with size). Coverage masks (a8, 1 byte/pixel) stay
+// under it at every size the rasterizer produces, which is why the 2d fill mask
+// keeps using core PutImage.
+const MIN_UPLOAD_BYTES = 64 * 1024;
+// A readback pays the win sooner: a core GetImage reply carries the pixels back
+// over the socket and, on some drivers, blocks the server for tens of
+// milliseconds, so route more of them through shared memory.
+const MIN_READBACK_BYTES = 16 * 1024;
+// Round segment sizes up so a handful of buckets serve many nearby sizes and
+// the pool actually hits.
+const SIZE_QUANTUM = 64 * 1024;
+
+function roundUp(n) {
+  return Math.max(SIZE_QUANTUM, Math.ceil(n / SIZE_QUANTUM) * SIZE_QUANTUM);
+}
+
+export class ShmUploader {
+  /** @param {import('./app.js').default} app */
+  constructor(app) {
+    this.app = app;
+    this.X = app.X;
+    this.ext = null; // node-x11 shm extension once required; false if unavailable
+    this.ready = false; // usable() confirmed a segment attaches
+    this._pool = []; // free, already-read segments (not in flight)
+    this._warming = false;
+    this._resolving = null;
+  }
+
+  /**
+   * Resolve availability once (requires the extension and probes usable()).
+   * `cb(ready)`. Cheap and idempotent; safe to call before every draw.
+   */
+  resolve(cb) {
+    if (this.ready || this.ext === false) return cb(this.ready);
+    if (this._resolving) {
+      this._resolving.push(cb);
+      return;
+    }
+    this._resolving = [cb];
+    this.X.require('shm', (err, ext) => {
+      // The provider-backed API (usable/createSegment) needs x11 >= 3.7; an
+      // older x11 still resolves the extension but without it, so treat that
+      // as "no shared memory" rather than throwing.
+      if (err || !ext || typeof ext.usable !== 'function') return this._resolved(false, false);
+      ext.usable((e, ok) => this._resolved(ok ? ext : false, !!ok));
+    });
+  }
+
+  _resolved(ext, ready) {
+    this.ext = ext;
+    this.ready = ready;
+    const cbs = this._resolving || [];
+    this._resolving = null;
+    for (const cb of cbs) cb(ready);
+  }
+
+  _acquire(bytes) {
+    for (let i = 0; i < this._pool.length; ++i) {
+      if (this._pool[i].size >= bytes) return this._pool.splice(i, 1)[0];
+    }
+    return null;
+  }
+
+  _warm(bytes) {
+    if (this._warming || !this.ready) return;
+    this._warming = true;
+    this.ext.createSegment(roundUp(bytes), (err, seg) => {
+      this._warming = false;
+      if (!err && seg) this._pool.push(seg);
+    });
+  }
+
+  /**
+   * Upload `data` (server-layout pixels, `stride*height` bytes at offset 0) to
+   * `drawable` at `dstX,dstY` as a `depth` image `width*height`. Returns true
+   * when shared memory handled it (the caller must then issue nothing else),
+   * or false to signal "do it with core PutImage" — including every case where
+   * SHM is unavailable, too small, or momentarily out of free segments (a
+   * segment is warmed in the background for next time).
+   */
+  putImage(drawable, gc, { width, height, depth, dstX = 0, dstY = 0, data }) {
+    const bytes = data.length;
+    if (!this.ready || bytes < MIN_UPLOAD_BYTES) return false;
+    const seg = this._acquire(bytes);
+    if (!seg) {
+      this._warm(bytes);
+      return false;
+    }
+    data.copy ? data.copy(seg.buffer, 0, 0, bytes) : seg.buffer.set(data.subarray(0, bytes));
+    seg.putImage(drawable, gc, { width, height, depth, dstX, dstY, sendEvent: true });
+    // reuse only once the server is done reading it
+    seg.once('complete', () => this._pool.push(seg));
+    return true;
+  }
+
+  /**
+   * Whether a readback of `bytes` should use shared memory (usable and large
+   * enough). The caller does the async segment dance through `getImage` below.
+   */
+  wantsReadback(bytes) {
+    return this.ready && bytes >= MIN_READBACK_BYTES;
+  }
+
+  /**
+   * Read `width*height` pixels of `depth` from `drawable` at `x,y` through a
+   * shared segment. `cb(err, buffer)` — `buffer` is a view of the segment's
+   * bytes valid until the next `getImage`; copy out before then. Falls back is
+   * the caller's job: only call this when `wantsReadback` was true.
+   */
+  getImage(drawable, x, y, width, height, depth, cb) {
+    const bytes = width * height * ((depth + 7) >> 3 === 3 ? 4 : (depth + 7) >> 3);
+    const use = (seg) => {
+      seg.getImage(drawable, x, y, width, height, 0xffffffff, undefined, 0, (err, rep) => {
+        if (err) {
+          this._pool.push(seg);
+          return cb(err);
+        }
+        // hand back the buffer, then reclaim the segment after the caller has
+        // synchronously copied out (they must, per the doc above)
+        cb(null, seg.buffer, rep);
+        this._pool.push(seg);
+      });
+    };
+    const seg = this._acquire(bytes);
+    if (seg) return use(seg);
+    this.ext.createSegment(roundUp(bytes), (err, s) => {
+      if (err || !s) return cb(err || new Error('shm: no segment'));
+      use(s);
+    });
+  }
+
+  /** Detach every pooled segment (called from App#close). */
+  dispose() {
+    const pool = this._pool;
+    this._pool = [];
+    this.ready = false;
+    for (const seg of pool) {
+      try {
+        seg.detach();
+      } catch {
+        /* connection may already be gone */
+      }
+    }
+  }
+}

package/lib/text/fontmanager.js

@@ -5,7 +5,7 @@ import {
   detectStyle,
   numericWeight as numWeight
 } from './fontsource.js';
-import { shapeText } from './shape.js';
+import { embeddingLevels, normalizedLevels, shapeText } from './shape.js';
 import { TextLayout } from './layout.js';
 
 /**
@@ -38,7 +38,7 @@ export default class FontManager {
     this._matches = new Map(); // family|weight|style -> Font
     this._fallbacks = new Map(); // family|weight|style -> Map(codepoint -> Font|null)
     this._registered = []; // { font, family (lowercase), weight, italic }
-    this._shapeCache = new Map(); // word-level shaping memo (bounded)
+    this._shapeCache = new Map(); // word-level shaping memo (bounded, LRU)
   }
 
   /** the FontSource in effect (explicit, else the process-wide default) */
@@ -232,25 +232,63 @@ export default class FontManager {
   }
 
   /**
-   * Memoized shaping used by TextLayout (bounded cache). `levelsKey` is a
-   * compact embedding-levels encoding: a single number when uniform for the
-   * whole fragment (the common case), else comma-separated per-char levels.
+   * Memoized shaping used by TextLayout and the canvas text path (bounded
+   * LRU). `levelsKey` is a compact embedding-levels encoding: a single
+   * number when uniform for the whole fragment (the common case), else
+   * comma-separated per-char levels.
    */
   _shapeCached(text, style, levelsKey = '0') {
     const font = style.font;
     const key = `${font ? font.key : style.family}|${style.size}|${style.weight}|${style.style}|${levelsKey}|${text}`;
     let shaped = this._shapeCache.get(key);
-    if (!shaped) {
-      let levels;
-      if (levelsKey.includes(',')) {
-        levels = levelsKey.split(',').map(Number);
-      } else {
-        levels = new Uint8Array(text.length).fill(Number(levelsKey));
-      }
-      shaped = shapeText(this, text, style, levels);
-      if (this._shapeCache.size > 4000) this._shapeCache.clear();
+    if (shaped) {
+      // Map iterates in insertion order: re-inserting a hit moves it to the
+      // tail, so the eviction sweep below walks least-recently-used first
+      this._shapeCache.delete(key);
       this._shapeCache.set(key, shaped);
+      return shaped;
+    }
+    let levels;
+    if (levelsKey.includes(',')) {
+      levels = levelsKey.split(',').map(Number);
+    } else {
+      levels = new Uint8Array(text.length).fill(Number(levelsKey));
     }
+    shaped = shapeText(this, text, style, levels);
+    if (this._shapeCache.size > 4000) {
+      // drop the stale half in one sweep rather than one entry per insert —
+      // a live UI's working set sits at the recent end and survives, where
+      // the old wholesale clear() re-shaped everything on screen
+      let drop = this._shapeCache.size >> 1;
+      for (const k of this._shapeCache.keys()) {
+        if (drop-- <= 0) break;
+        this._shapeCache.delete(k);
+      }
+    }
+    this._shapeCache.set(key, shaped);
     return shaped;
   }
+
+  /**
+   * Memoized whole-string shaping — what `ctx.fillText` draws through, so
+   * repainting the same label hits the same entries TextLayout populates
+   * instead of re-running bidi + OpenType shaping every frame.
+   *
+   * Bidi is resolved here because the memo key needs the embedding levels;
+   * the paragraph level rides back on the result separately, since per-char
+   * levels cannot recover it (RTL text in an RTL paragraph carries level 1,
+   * which reads as an even base) and start/end alignment depends on it.
+   *
+   * `features` and `language` change shaped output but are not part of the
+   * memo key (styles reaching it via TextLayout never carry them into the
+   * key either), so a style with either shapes uncached rather than
+   * poisoning entries other callers share.
+   */
+  _shapeCachedWhole(text, style) {
+    if (style.features || style.language) return shapeText(this, text, style);
+    const emb = embeddingLevels(text, style.direction);
+    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    const shaped = this._shapeCached(text, style, normalizedLevels(emb.levels, 0, text.length));
+    return shaped.baseLevel === baseLevel ? shaped : { ...shaped, baseLevel };
+  }
 }

package/lib/text/fontsource.js

@@ -34,7 +34,7 @@
 // than imported, because this file is the one the browser bundle keeps — its
 // whole purpose is running the text stack without a filesystem. Do not turn
 // that into a static import (test/packaging.test.js fails if you do).
-import { charsetHas, matchSortedSync, noFontsError, supported } from '../fontconfig.js';
+import { charsetHas, matchSortedSync, noFontsError, prewarm, supported } from '../fontconfig.js';
 import Font from './font.js';
 
 const WEIGHTS = { normal: 400, bold: 700 };
@@ -95,6 +95,17 @@ export function parseFamilies(family) {
  * self-contained alternative.
  */
 export class FontconfigFontSource {
+  constructor() {
+    // Construction is the moment fontconfig is chosen as the lookup path, so
+    // the fc-match spawn for the pattern every widget default resolves to —
+    // sans-serif at regular weight, exactly as FontManager.match normalizes
+    // it — starts here, asynchronously, instead of stalling the first text
+    // layout for ~50ms. Fire-and-forget: prewarm never rejects, and a source
+    // constructed where fc-match is missing stays silent until (unless) text
+    // is actually rendered.
+    prewarm({ family: 'sans-serif', weight: 400, style: 'normal' });
+  }
+
   matchSorted(pattern) {
     return matchSortedSync(pattern);
   }

package/lib/text/layout.js

@@ -1,7 +1,7 @@
 import LineBreaker from 'linebreak';
 
 import { drawGlyphRuns } from './glyphs.js';
-import { embeddingLevels, reorderRuns } from './shape.js';
+import { embeddingLevels, normalizedLevels, reorderRuns } from './shape.js';
 
 const WS = new Set([0x20, 0x09, 0xa0]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
@@ -856,16 +856,3 @@ function sliceLevels(key, start, end) {
   if (!key.includes(',')) return key;
   return key.split(',').slice(start, end).join(',');
 }
-
-// compact levels key for the shaping cache: single char when uniform
-function normalizedLevels(levels, start, end) {
-  let uniform = true;
-  for (let i = start + 1; i < end; i++) {
-    if (levels[i] !== levels[start]) {
-      uniform = false;
-      break;
-    }
-  }
-  if (uniform) return String(levels[start] ?? 0);
-  return Array.prototype.slice.call(levels, start, end).join(',');
-}

package/lib/text/shape.js

@@ -28,6 +28,23 @@ export function embeddingLevels(text, direction = 'auto') {
   return bidi.getEmbeddingLevels(text, explicit);
 }
 
+/**
+ * Compact embedding-levels encoding for the shaping memo key: a single
+ * number when uniform over [start, end) — the common case — else
+ * comma-separated per-char levels.
+ */
+export function normalizedLevels(levels, start, end) {
+  let uniform = true;
+  for (let i = start + 1; i < end; i++) {
+    if (levels[i] !== levels[start]) {
+      uniform = false;
+      break;
+    }
+  }
+  if (uniform) return String(levels[start] ?? 0);
+  return Array.prototype.slice.call(levels, start, end).join(',');
+}
+
 /**
  * Shape a string through the full pipeline:
  *

package/lib/window.js

@@ -27,6 +27,19 @@ const MAX_DIRTY_RECTS = 8;
  */
 const SPLIT_SAVING = 0.75;
 
+/**
+ * Backing pixmap dimensions are rounded up to this granularity.
+ *
+ * An interactive enlarge delivers a resize per frame, and an exact grow-only
+ * allocation crosses its previous maximum on every one of them — each frame
+ * paying for a CreatePixmap, a full white clear, a FreePixmap and a picture
+ * rebind. With headroom the reuse check absorbs the intermediate steps and a
+ * continuous drag reallocates O(log) times. The spare pixels are never
+ * presented — every blit is clamped to window ∩ backing — they just sit
+ * white until the window grows into them.
+ */
+const BACKING_GRANULARITY = 128;
+
 function rectArea(r) {
   return Math.max(0, r.w) * Math.max(0, r.h);
 }
@@ -639,12 +652,14 @@ export default class Window extends Drawable {
     });
   }
 
-  // grow-only backing pixmap (re)allocation; new area is cleared to white
+  // grow-only backing pixmap (re)allocation, with headroom (see
+  // BACKING_GRANULARITY); new area is cleared to white
   _allocBacking(w, h) {
     const cur = this._backing;
     if (cur && cur.width >= w && cur.height >= h) return;
-    const newW = Math.max(w, cur ? cur.width : 0);
-    const newH = Math.max(h, cur ? cur.height : 0);
+    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 pixmap = new Pixmap(this.app, {
       parent: this,
       width: newW,

package/package.json

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