ntk 8.13.0 → 8.13.1

package/lib/app.js

@@ -345,12 +345,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))

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,117 @@
+// 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 the rectangle is clipped: everything else goes out
+// as it came, so a drawing that fits is sent exactly as before.
+
+/** 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/renderingcontext_2d.js

@@ -29,6 +29,12 @@ import { formatForDepth } from "./pictformat.js";
 import Pixmap from "./pixmap.js";
 import { REGION_DOCS, regionId } from "./region.js";
 import { routeRaster } from "./rasterize.js";
+import {
+  clipRingToRect,
+  clipTrianglesToRect,
+  rectsOnSurface,
+  withinRect,
+} from "./cliprect.js";
 import {
   blurCoverage,
   cachedShadow,
@@ -1868,9 +1874,36 @@ class RenderingContext2d {
     });
   }
 
-  _rasterizePolys(picture, shapes, rule, dx = 0, dy = 0) {
+  _rasterizePolys(
+    picture,
+    shapes,
+    rule,
+    dx = 0,
+    dy = 0,
+    w = this.width,
+    h = this.height,
+  ) {
     if (!shapes.length) return;
-    const traps = trapezoidize(shapes, dx, dy, [], rule);
+    // Trapezoids are 16.16 fixed point, and a coordinate past 32,767 throws
+    // out of the paint (lib/cliprect.js). A shape that reaches past the
+    // picture is cut to it first, a pixel to spare on every side: nothing
+    // outside the picture is ever composited.
+    const x0 = -dx - 1;
+    const y0 = -dy - 1;
+    const x1 = w - dx + 1;
+    const y1 = h - dy + 1;
+    let fitted = null;
+    for (let i = 0; i < shapes.length; i++) {
+      const shape = shapes[i];
+      if (withinRect(shape, x0, y0, x1, y1)) {
+        if (fitted) fitted.push(shape);
+        continue;
+      }
+      if (!fitted) fitted = shapes.slice(0, i);
+      const ring = clipRingToRect(shape, x0, y0, x1, y1);
+      if (ring.length >= 6) fitted.push(ring);
+    }
+    const traps = trapezoidize(fitted ?? shapes, dx, dy, [], rule);
     // stay under the server's maximum request size
     const chunk = 4000 * 6;
     for (let i = 0; i < traps.length; i += chunk) {
@@ -2480,6 +2513,18 @@ class RenderingContext2d {
     }
     if (w < tris.length) tris.length = w;
     if (!tris.length) return;
+    // Triangles are 16.16 fixed point, and the source origin a direct stroke
+    // hands the server is 16 bits: a stroke that reaches past the surface is
+    // cut to it first (lib/cliprect.js), a pixel to spare on every side, so
+    // what the surface shows is drawn exactly as before.
+    const edgeX = this.width + 1;
+    const edgeY = this.height + 1;
+    if (!withinRect(tris, -1, -1, edgeX, edgeY)) {
+      const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
+      tris.length = 0;
+      for (let i = 0; i < cut.length; i++) tris.push(cut[i]);
+      if (!tris.length) return;
+    }
 
     const op = this._op();
     // round-cap/join disks overlap the stroke body; overlapping coverage
@@ -3018,6 +3063,20 @@ class RenderingContext2d {
    * for the whole list and then draws the rectangles through here */
   _fillRect(x, y, w, h) {
     if (matIsIdentity(this._m)) {
+      // X coordinates and sizes are 16 bits, and a coordinate past 32,767
+      // throws out of the paint (lib/cliprect.js): a rectangle that reaches
+      // past the surface is filled as the part of it the surface has.
+      if (x < 0 || y < 0 || x + w > this.width || y + h > this.height) {
+        const x0 = Math.max(x, 0);
+        const y0 = Math.max(y, 0);
+        const x1 = Math.min(x + w, this.width);
+        const y1 = Math.min(y + h, this.height);
+        if (!(x1 > x0 && y1 > y0)) return;
+        x = x0;
+        y = y0;
+        w = x1 - x0;
+        h = y1 - y0;
+      }
       if (!prepareStyle(this._backgroundPicture, this._m)) return;
       const op = this._op();
       // A rectangular clip is a smaller rectangle to fill, not a mask — this
@@ -3113,6 +3172,10 @@ class RenderingContext2d {
     }
     if (this._hasPolyClip) return;
     if (clip && (clip.w === 0 || clip.h === 0)) return; // clipped away
+    // the part of each the surface has, as `_fillRect` fills it: the wire's
+    // coordinates are 16 bits
+    const onSurface = rectsOnSurface(flat, this.width, this.height);
+    if (!onSurface.length) return;
     const R = this.Render;
     if (clip) this._setPictureClip(clip);
     // globalAlpha folds into the premultiplied colour — scaling all four
@@ -3122,12 +3185,14 @@ class RenderingContext2d {
     const color = this._foldedColor(this._fillStyle);
     // stay under the server's maximum request size
     const chunk = 10000 * 4;
-    for (let i = 0; i < flat.length; i += chunk) {
+    for (let i = 0; i < onSurface.length; i += chunk) {
       R.FillRectangles(
         this._op(),
         this._dst(),
         color,
-        i === 0 && flat.length <= chunk ? flat : flat.slice(i, i + chunk),
+        i === 0 && onSurface.length <= chunk
+          ? onSurface
+          : onSurface.slice(i, i + chunk),
       );
     }
     if (clip) this._invalidatePictureClip();
@@ -3166,10 +3231,13 @@ class RenderingContext2d {
     let x1 = -Infinity;
     let y1 = -Infinity;
     for (let i = 0; i < flat.length; i += 4) {
-      const x = Math.trunc(flat[i]);
-      const y = Math.trunc(flat[i + 1]);
-      const w = Math.trunc(flat[i + 2]);
-      const h = Math.trunc(flat[i + 3]);
+      // the part of it on the surface: the wire's coordinates are 16 bits
+      const left = Math.trunc(flat[i]);
+      const top = Math.trunc(flat[i + 1]);
+      const x = Math.max(0, left);
+      const y = Math.max(0, top);
+      const w = Math.min(this.width, left + Math.trunc(flat[i + 2])) - x;
+      const h = Math.min(this.height, top + Math.trunc(flat[i + 3])) - y;
       if (w <= 0 || h <= 0) continue;
       rects.push(x, y, w, h);
       if (x < x0) x0 = x;
@@ -3953,6 +4021,8 @@ class RenderingContext2d {
         entry.rule,
         -bb.x,
         -bb.y,
+        bb.w,
+        bb.h,
       );
     }
     R.Composite(

package/lib/text/layout.js

@@ -310,6 +310,13 @@ export class TextLayout {
     // and every line still needs a style to take its metrics from, so
     // stand one in rather than crashing on the first empty line.
     const given = typeof content === 'string' ? [{ text: content }] : content;
+    // What a span is shaped with, one per distinct style rather than one a
+    // span (`shapingStyleOf`): the spans of a highlighted source file are its
+    // tokens, half a million for twenty thousand lines over a handful of
+    // styles, and the font lookup and the shaping memo's key, worked out
+    // afresh for each, were most of what laying such a file out cost.
+    const styles = [];
+    const shapings = [];
     const spans = (given.length ? given : [{ text: '' }]).map((s) => {
       const merged = {
         ...s,
@@ -327,7 +334,9 @@ export class TextLayout {
         letterSpacing: s.letterSpacing ?? style.letterSpacing,
         color: s.color ?? style.color ?? null
       };
-      merged.font = s.font ?? style.font ?? fonts.match(merged.family, merged);
+      const shaping = shapingStyleOf(styles, merged, s.font ?? style.font, fonts);
+      merged.font = shaping.font;
+      shapings.push(shaping);
       return merged;
     });
 
@@ -355,6 +364,7 @@ export class TextLayout {
       }
       return {
         span: spans[lo],
+        shaping: shapings[lo],
         end: lo + 1 < spanStarts.length ? spanStarts[lo + 1] : text.length
       };
     };
@@ -388,13 +398,13 @@ export class TextLayout {
     let width = 0;
     let pos = start;
     while (pos < end) {
-      const { span, end: spanEnd } = spanAt(pos);
+      const { span, shaping, end: spanEnd } = spanAt(pos);
       const fragEnd = Math.min(end, spanEnd);
       // hard-break controls only terminate the line; never shape them
       const fragText = text.slice(pos, fragEnd).replace(HARD_BREAKS, '');
       if (fragText.length > 0) {
         const fragLevels = normalizedLevels(levels, pos, pos + fragText.length);
-        const shaped = this.fonts._shapeCached(fragText, span, fragLevels);
+        const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
         fragments.push({ text: fragText, span, shaped, start: pos, levels: fragLevels });
@@ -595,7 +605,20 @@ export class TextLayout {
       }
       batch = [];
     };
+    // Only the lines the context can show. A layout taller than the view it
+    // is drawn in — a code block of twenty thousand lines in a scroll pane —
+    // built every line's glyphs, sent them, and had the server clip them
+    // away, on every paint. A line is skipped when its box, grown by its
+    // height and its font's extent again on either side for ink that
+    // overhangs the box, is outside the rows the clip lets through: nothing
+    // of it could have landed on a pixel.
+    const rows = visibleRows(ctx, y);
     for (const line of this.lines) {
+      if (rows) {
+        const reach = line.height + line.ascent + line.descent;
+        if (line.y + line.height + reach < rows.top) continue;
+        if (line.y - reach > rows.bottom) continue;
+      }
       for (const r of line.runs) {
         const color = r.span.color;
         if (batch.length && color !== batchColor) flush();
@@ -1015,3 +1038,77 @@ function sliceLevels(key, start, end) {
   if (!key.includes(',')) return key;
   return key.split(',').slice(start, end).join(',');
 }
+
+/**
+ * The rows of a layout drawn at `y` that the context can show — its clip's
+ * box, or the whole surface with no clip — in the layout's own coordinates.
+ * Null where that cannot be said, and the whole layout is drawn: a context
+ * that is not ntk's, a transform that is more than a translation, or a
+ * shadow, which lands where the text is not.
+ */
+function visibleRows(ctx, y) {
+  if (typeof ctx.drawGlyphs !== 'function') return null;
+  if (typeof ctx._clipExtents !== 'function') return null;
+  const m = ctx._m;
+  if (!m || m[0] !== 1 || m[1] !== 0 || m[2] !== 0 || m[3] !== 1) return null;
+  if (typeof ctx._shadowed !== 'function' || ctx._shadowed()) return null;
+  const height = ctx.height;
+  if (!(height > 0)) return null;
+  // the clip's extents skip a region clip, so they are never smaller than
+  // what the server lets through
+  const box = ctx._clipExtents() ?? { y: 0, h: height };
+  const top = box.y - (y + m[5]);
+  return { top, bottom: top + box.h };
+}
+
+/**
+ * How many distinct styles one layout shares shaping styles among. Past it a
+ * span is shaped with a style of its own, as every span once was, rather
+ * than the search growing with the document.
+ */
+const MAX_SHAPING_STYLES = 16;
+
+/**
+ * The style `span` is shaped with: one already made for a span whose every
+ * property shaping reads is the same (`===`), or a new one. Its font is the
+ * one the span or the layout named (`given`), else the one its family
+ * matches, looked up once for all the spans that share it. What shaping
+ * reads is what `shapeText`, `fallbackFor` and the memo key read: the face
+ * and what picks it, the size, and features, language and spacing.
+ */
+function shapingStyleOf(known, span, given, fonts) {
+  for (let i = 0; i < known.length; i++) {
+    const k = known[i];
+    if (
+      k.given === given &&
+      k.family === span.family &&
+      k.size === span.size &&
+      k.weight === span.weight &&
+      k.style === span.style &&
+      k.variations === span.variations &&
+      k.opticalSize === span.opticalSize &&
+      k.opticalSizing === span.opticalSizing &&
+      k.features === span.features &&
+      k.language === span.language &&
+      k.letterSpacing === span.letterSpacing
+    ) {
+      return k;
+    }
+  }
+  const k = {
+    given,
+    font: given ?? fonts.match(span.family, span),
+    family: span.family,
+    size: span.size,
+    weight: span.weight,
+    style: span.style,
+    variations: span.variations,
+    opticalSize: span.opticalSize,
+    opticalSizing: span.opticalSizing,
+    features: span.features,
+    language: span.language,
+    letterSpacing: span.letterSpacing
+  };
+  if (known.length < MAX_SHAPING_STYLES) known.push(k);
+  return k;
+}

package/package.json

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