ntk 8.13.0 → 8.14.0

package/lib/app.js

@@ -1,4 +1,5 @@
 import { connectionGone } from './cleanup.js';
+import { cssColor } from './color.js';
 import Clipboard from './clipboard.js';
 import { CursorCache } from './cursor.js';
 import {
@@ -147,6 +148,8 @@ export default class App {
     sharedGlyphsFor(this);
     this._cursors = null;
     this._solidPictures = new Map();
+    // the same pictures by the CSS colour that asked for them (solidPictureOf)
+    this._solidByName = new Map();
     this._rasterizer = undefined;
     this._shm = undefined;
     this._extensionPromises = new Map();
@@ -345,12 +348,16 @@ export default class App {
     const X = this.X;
     if (connectionGone(X)) return;
     const name = '_NET_WM_CM_S0';
+    // Each answer can arrive after the app has closed — a window that
+    // presented once and was torn down at once — and a request made from it
+    // then throws out of the reply dispatch, where no caller can catch it.
     X.QueryExtension('XWAYLAND', (xwErr, ext) => {
       this._xwayland = !xwErr && !!ext?.present;
+      if (connectionGone(X)) return;
       X.InternAtom(false, name, (atomErr, atom) => {
-        if (atomErr || !atom) return;
+        if (atomErr || !atom || connectionGone(X)) return;
         X.GetSelectionOwner(atom, (ownerErr, owner) => {
-          if (ownerErr) return;
+          if (ownerErr || connectionGone(X)) return;
           this._setCompositing(owner !== 0);
           this.clipboard
             .watch(name, (ev) => this._setCompositing(ev.reason === 'new-owner' && ev.owner !== 0))
@@ -988,6 +995,26 @@ export default class App {
     return p;
   }
 
+  /**
+   * The solid picture a CSS colour string paints with. A UI sets the same few
+   * strings again on every paint — every box's background, every border —
+   * and the way to `solidPicture` is a parse, a premultiply and a key made of
+   * four numbers turned into text; by the string it is one lookup. Throws, as
+   * `fillStyle` always has, for a string that is not a colour.
+   */
+  solidPictureOf(value) {
+    let p = this._solidByName.get(value);
+    if (p !== undefined) return p;
+    const c = cssColor(value);
+    if (!c) throw new Error(`Not a color: ${JSON.stringify(value)}`);
+    p = this.solidPicture(c[0], c[1], c[2], c[3]);
+    // spellings are unbounded where solids are not: an app animating a
+    // colour writes a new string every frame
+    if (this._solidByName.size >= 1024) this._solidByName.clear();
+    this._solidByName.set(value, p);
+    return p;
+  }
+
   // flush pending requests and close the connection
   close() {
     if (this._cursors) {
@@ -1008,6 +1035,7 @@ export default class App {
       picture._sourcePixmap?.destroy();
     }
     this._solidPictures.clear();
+    this._solidByName.clear();
     // GPU contexts are shared by every direct GL surface on this connection
     // (see renderingcontext_gles.js), so they outlive individual contexts and
     // are the connection's to release. Each holds an EGL display, a GBM device

package/lib/clipboard.js

@@ -63,6 +63,7 @@ export default class Clipboard {
     this._fixes = null; // XFixes extension, required on first watch()
     this._fixesFirstEvent = -1; // its event base, to recognise its events
     this._selectionWatchers = new Map(); // selection atom -> { name, handlers }
+    this._listening = false; // _onXEvent is on the raw event stream
     this._onXEvent = this._onXEvent.bind(this);
   }
 
@@ -328,11 +329,17 @@ export default class Clipboard {
       // never delivers them to the Window wrapper — listen on the raw
       // client instead. INCR chunk pacing needs PropertyNotify for the
       // requestor's window, which is not ours either.
-      this.X.on('event', this._onXEvent);
+      this._listen();
     })();
     return this._ready;
   }
 
+  _listen() {
+    if (this._listening) return;
+    this._listening = true;
+    this.X.on('event', this._onXEvent);
+  }
+
   /**
    * Call `handler` whenever a selection changes hands.
    *
@@ -355,6 +362,9 @@ export default class Clipboard {
    *
    * Watchers share one server-side registration per selection, so watching
    * the same selection twice costs one extra callback and no extra protocol.
+   * The registration is on the root window, as GDK's is, so watching makes
+   * no window of the clipboard's own: an app that only watches — every app
+   * does, through `App#compositing` — has none.
    *
    * @param {string} selection selection atom name, e.g. 'CLIPBOARD' or 'PRIMARY'
    * @param {function} handler called with the event
@@ -364,9 +374,10 @@ export default class Clipboard {
     if (typeof handler !== 'function') {
       throw new TypeError('clipboard: watch needs a handler function');
     }
-    await this._ensure();
     const fixes = await this._ensureFixes();
     const sel = await this._atom(selection);
+    this._listen();
+    const root = this.app.display.screen[0].root;
 
     let entry = this._selectionWatchers.get(sel);
     if (!entry) {
@@ -376,7 +387,7 @@ export default class Clipboard {
         fixes.SelectionEventMask.SetSelectionOwner |
         fixes.SelectionEventMask.SelectionWindowDestroy |
         fixes.SelectionEventMask.SelectionClientClose;
-      safeRelease(this.X, () => fixes.SelectSelectionInput(this._window.id, sel, mask));
+      safeRelease(this.X, () => fixes.SelectSelectionInput(root, sel, mask));
     }
     entry.handlers.add(handler);
 
@@ -390,7 +401,7 @@ export default class Clipboard {
       if (current.handlers.size) return;
       // last watcher for this selection: drop the server-side registration
       this._selectionWatchers.delete(sel);
-      safeRelease(this.X, () => fixes.SelectSelectionInput(this._window.id, sel, 0));
+      safeRelease(this.X, () => fixes.SelectSelectionInput(root, sel, 0));
     };
   }
 
@@ -522,7 +533,6 @@ export default class Clipboard {
   }
 
   _onXEvent(ev) {
-    if (!this._window) return;
     // XFixes events carry a server-assigned type above the core range, so
     // this cannot be confused with core SelectionNotify, which is 31
     if (ev.type === this._fixesFirstEvent && this._selectionWatchers.size) {
@@ -532,6 +542,7 @@ export default class Clipboard {
       );
       return;
     }
+    if (!this._window) return;
     if (ev.type === 28) {
       // PropertyNotify, state 1 = Deleted: a requestor consumed the INCR
       // chunk we gave it and is asking for the next one

package/lib/cliprect.js

@@ -0,0 +1,128 @@
+// Geometry clipped to a rectangle, for what goes to the server in XRender's
+// 16.16 fixed point: trapezoids and triangles. A coordinate past 32,767 there
+// overflows the 32-bit word node-x11 writes it into, and the RangeError comes
+// out of the paint that drew it. A box of a code block twenty thousand lines
+// tall in a scroll pane was one, filled as a rounded rectangle.
+//
+// Only what reaches past what the wire can carry is clipped (`WIRE_REACH`):
+// everything else goes out as it came, so a drawing that fits is sent exactly
+// as before.
+
+/**
+ * How far from a picture's origin a coordinate may reach and still be
+ * carried: half of what 16.16 fixed point and a 16-bit origin hold, so an
+ * offset the size of a surface on top of it still fits. Geometry within it
+ * goes to the server as it came, and the server clips it — cutting it here
+ * costs more than that, and a zoomed graph has hundreds of edges a little
+ * past the window every frame. Only geometry past it is cut.
+ */
+export const WIRE_REACH = 16384;
+
+/** Whether every point of a flat `[x, y, …]` list is inside the rectangle. */
+export function withinRect(pts, x0, y0, x1, y1) {
+  for (let i = 0; i < pts.length; i += 2) {
+    const x = pts[i];
+    const y = pts[i + 1];
+    if (x < x0 || x > x1 || y < y0 || y > y1) return false;
+  }
+  return true;
+}
+
+/**
+ * A closed ring clipped to the rectangle (Sutherland–Hodgman), as a flat
+ * `[x, y, …]` list, empty when nothing of it is inside. Clipping each ring of
+ * a shape on its own keeps its fill, nonzero or even-odd, the same at every
+ * point inside a convex region.
+ */
+export function clipRingToRect(pts, x0, y0, x1, y1) {
+  let ring = pts;
+  // each edge of the rectangle: which coordinate, which bound, which side
+  for (const [axis, bound, keepAbove] of [
+    [0, x0, true],
+    [0, x1, false],
+    [1, y0, true],
+    [1, y1, false],
+  ]) {
+    const n = ring.length / 2;
+    if (n === 0) break;
+    const out = [];
+    const inside = (i) =>
+      keepAbove ? ring[i * 2 + axis] >= bound : ring[i * 2 + axis] <= bound;
+    for (let i = 0; i < n; i++) {
+      const j = (i + n - 1) % n; // the previous point
+      const iin = inside(i);
+      const jin = inside(j);
+      if (iin !== jin) {
+        // where the segment from j to i crosses the bound
+        const a = ring[j * 2 + axis];
+        const b = ring[i * 2 + axis];
+        const t = (bound - a) / (b - a);
+        const other = 1 - axis;
+        const oa = ring[j * 2 + other];
+        const ob = ring[i * 2 + other];
+        const p = [0, 0];
+        p[axis] = bound;
+        p[other] = oa + (ob - oa) * t;
+        out.push(p[0], p[1]);
+      }
+      if (iin) out.push(ring[i * 2], ring[i * 2 + 1]);
+    }
+    ring = out;
+  }
+  return ring;
+}
+
+/**
+ * A flat list of triangles, six numbers each, with every one that reaches
+ * past the rectangle clipped to it and cut back into triangles (a fan: what
+ * is left of a triangle inside a rectangle is convex).
+ */
+export function clipTrianglesToRect(tris, x0, y0, x1, y1) {
+  const out = [];
+  for (let i = 0; i + 5 < tris.length; i += 6) {
+    const tri = tris.slice(i, i + 6);
+    if (withinRect(tri, x0, y0, x1, y1)) {
+      out.push(...tri);
+      continue;
+    }
+    const poly = clipRingToRect(tri, x0, y0, x1, y1);
+    for (let k = 2; k * 2 + 1 < poly.length; k++) {
+      out.push(
+        poly[0],
+        poly[1],
+        poly[(k - 1) * 2],
+        poly[(k - 1) * 2 + 1],
+        poly[k * 2],
+        poly[k * 2 + 1],
+      );
+    }
+  }
+  return out;
+}
+
+/**
+ * A flat `[x, y, w, h, …]` list of rectangles cut to `[0, width) × [0,
+ * height)`, dropping the ones with nothing left: core X's rectangles are 16
+ * bits. The list itself when every rectangle is already on the surface.
+ */
+export function rectsOnSurface(flat, width, height) {
+  let out = null;
+  for (let i = 0; i + 3 < flat.length; i += 4) {
+    const x = flat[i];
+    const y = flat[i + 1];
+    const w = flat[i + 2];
+    const h = flat[i + 3];
+    const inside = x >= 0 && y >= 0 && x + w <= width && y + h <= height;
+    if (inside) {
+      if (out) out.push(x, y, w, h);
+      continue;
+    }
+    if (!out) out = flat.slice(0, i);
+    const x0 = Math.max(x, 0);
+    const y0 = Math.max(y, 0);
+    const x1 = Math.min(x + w, width);
+    const y1 = Math.min(y + h, height);
+    if (x1 > x0 && y1 > y0) out.push(x0, y0, x1 - x0, y1 - y0);
+  }
+  return out ?? flat;
+}

package/lib/color.js

@@ -42,6 +42,17 @@ function parseHex(value) {
   return [part(0) / 255, part(1) / 255, part(2) / 255, hasAlpha ? part(3) / 255 : 1];
 }
 
+// Each spelling is parsed once. A UI draws with a few dozen colours and sets
+// them again on every paint — every box's background, every border, every
+// edge of a graph — and a parse is a regular expression and an allocation
+// or two: 6% of a 2D graph pan's frame, 3% of a table's. Bounded, and
+// dropped whole rather than evicted, since a palette is a few dozen strings
+// (react-x11's Cocoa context keeps the same cache for the same reason). The
+// caller gets a copy, as it always has: an array handed out is its to keep
+// or scale.
+const parsed = new Map();
+const PARSED_MAX = 512;
+
 /**
  * Parse a CSS colour to `[r, g, b, a]` floats in 0..1 with **straight**
  * (unassociated) alpha, or null if it is not a colour.
@@ -57,6 +68,16 @@ function parseHex(value) {
  */
 export function cssColorStraight(value) {
   if (typeof value !== 'string') return null;
+  let rgba = parsed.get(value);
+  if (rgba === undefined) {
+    rgba = parseStraight(value);
+    if (parsed.size >= PARSED_MAX) parsed.clear();
+    parsed.set(value, rgba);
+  }
+  return rgba && rgba.slice();
+}
+
+function parseStraight(value) {
   const v = value.trim();
   if (!v) return null;
   if (v.toLowerCase() === 'transparent') return [0, 0, 0, 0];