ntk 8.13.1 → 8.14.1

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();
@@ -992,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) {
@@ -1012,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/cliprect.js

@@ -4,8 +4,19 @@
 // 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.
+// 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) {

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];

package/lib/fontconfig.js

@@ -294,6 +294,11 @@ function cacheMatches(fc, out) {
 // child whose answer only reaches the event loop.
 const inflight = new Map();
 
+// fc -> the prewarm entry of a `best` job: the one face fontconfig picks for a
+// pattern, asked for beside its chain so a layout can take it first
+// (`bestOfPrewarm`)
+const bestInflight = new Map();
+
 /**
  * fc-match for a pattern, off the event loop — one child per pattern however
  * many callers ask at once, so a prewarm and an awaiting `matchSorted` share
@@ -326,11 +331,31 @@ function runFcMatch(fc) {
   return entry.promise;
 }
 
-// What a prewarm's child runs: fc-match with its answer in a file, then —
-// once that file is complete — the exit status in another, which is what a
-// synchronous caller waits for (`answerSync`). Nothing but shell builtins
-// runs after fc-match, so a PATH that holds fc-match alone is enough.
-const PREWARM_SCRIPT = 'fc-match "$@" > "$0.out" 2> "$0.err"; echo $? > "$0.done"';
+// What a prewarm's child runs: an fc-match for each job, side by side, each
+// with its answer in a file and then — once that file is complete — its exit
+// status in another, which is what a synchronous caller waits for
+// (`answerSync`). The arguments are fc-match's own (`fcMatchArgs`, the sort
+// flag first), then a file base, a kind and a pattern for each job: `sorted`
+// asks for the whole fallback chain, `best` for the one face fontconfig
+// would pick, which it answers in half the time, since it sorts nothing and
+// writes one line (`bestOfPrewarm`). The shell exits once every job has.
+// Nothing but shell builtins runs besides fc-match, so a PATH that holds
+// fc-match alone is enough.
+const PREWARM_SCRIPT = [
+  ...fcMatchArgs.map((_, i) => `a${i}=\${${i + 1}}`),
+  `shift ${fcMatchArgs.length}`,
+  'while [ $# -gt 2 ]; do ' +
+    'if [ "$2" = best ]; then ' +
+    `(fc-match ${fcMatchArgs
+      .slice(1)
+      .map((_, i) => `"$a${i + 1}"`)
+      .join(' ')} "$3" > "$1.out" 2> "$1.err"; echo $? > "$1.done") & ` +
+    'else ' +
+    `(fc-match ${fcMatchArgs.map((_, i) => `"$a${i}"`).join(' ')} "$3" > "$1.out" 2> "$1.err"; ` +
+    'echo $? > "$1.done") & ' +
+    'fi; shift 3; done',
+  'wait'
+].join('; ');
 
 // The directory prewarms write into, made on first use: undefined until
 // then, null where it cannot be (no shell, no writable tmpdir), which leaves
@@ -364,9 +389,9 @@ function prewarmBase() {
   return prewarmDir === null ? null : path.join(prewarmDir, String(prewarmCount++));
 }
 
-/** The status and answer a prewarm left, once it has left them; null while
- *  it is still running. */
-function readPrewarm(base) {
+/** The exit status a prewarm left, once it has left it; null while it is
+ *  still running. */
+function prewarmStatus(base) {
   const fs = builtin('node:fs');
   let done;
   try {
@@ -377,7 +402,15 @@ function readPrewarm(base) {
   // `echo` writes the status and the newline in one go, but a read can land
   // between the file appearing and its bytes arriving
   if (!done.endsWith('\n')) return null;
-  const status = Number(done);
+  return Number(done);
+}
+
+/** The status and answer a prewarm left, once it has left them; null while
+ *  it is still running. */
+function readPrewarm(base) {
+  const fs = builtin('node:fs');
+  const status = prewarmStatus(base);
+  if (status === null) return null;
   let out = '';
   if (status === 0) {
     try {
@@ -408,38 +441,56 @@ function removePrewarm(base) {
  * that, so the layout it was started for spawned fc-match a second time and
  * waited for that one instead.
  *
- * Null where files cannot be used; the caller prewarms the old way.
+ * One child for all the patterns handed over, because what a spawn costs is
+ * node's: libuv forks the whole process to start one, and a fork copies page
+ * tables that grow with the heap. Four spawns took 4.7 ms of the main thread
+ * at 130 MB and 33 ms at 260 MB on a Linux desktop; one shell starting the
+ * same four took 1.4 and 8, since the shell's own forks cost next to nothing.
+ *
+ * The answers stay in their files until something asks for one
+ * (`answerSync`), so a face no text is set in — a family's italics, as often
+ * as not — is never read. Read and parsed as each child exited, a family's
+ * answers were 9 ms of the main thread while the connection was still being
+ * set up: 634 KB apiece, most of it the coverage of every face fontconfig
+ * sorts behind the first.
+ *
+ * An entry a pattern, in order; null where files cannot be used, and the
+ * caller prewarms the old way.
  */
-function spawnToFiles(fc) {
+function spawnToFiles(fcs, bests = []) {
   const cp = childProcess();
-  const base = cp ? prewarmBase() : null;
-  if (base === null) return null;
+  const all = [...fcs, ...bests];
+  const bases = cp ? all.map(() => prewarmBase()) : [];
+  if (bases.length === 0 || bases[0] === null) return null;
+  const jobs = [];
+  all.forEach((fc, i) => jobs.push(bases[i], i < fcs.length ? 'sorted' : 'best', fc));
   let child;
   try {
-    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, base, ...fcMatchArgs, fc], {
+    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, 'ntk-fc-match', ...fcMatchArgs, ...jobs], {
       stdio: 'ignore'
     });
   } catch {
     return null;
   }
-  const entry = { promise: null, base, answer: undefined };
-  entry.promise = new Promise((resolve, reject) => {
-    const settle = () => {
-      if (inflight.get(fc) === entry) inflight.delete(fc);
-      // answered already, by a synchronous caller that could not wait
-      if (entry.answer === undefined) {
-        const left = readPrewarm(base);
-        removePrewarm(base);
-        entry.answer = left && left.status === 0 ? left.out : null;
-      }
-      if (entry.answer !== null) resolve(entry.answer);
-      else reject(new Error(`fc-match for "${fc}" did not answer`));
-    };
-    child.once('error', settle);
-    child.once('exit', settle);
+  // `promise` resolves once the child is gone, with what it left in the
+  // files; `exited` tells a synchronous caller there is nothing to wait for
+  const entries = all.map((fc, i) => {
+    const entry = { promise: null, base: bases[i], answer: undefined, exited: false, gone: null };
+    entry.promise = new Promise((resolve) => {
+      entry.gone = resolve;
+    });
+    (i < fcs.length ? inflight : bestInflight).set(fc, entry);
+    return entry;
   });
-  inflight.set(fc, entry);
-  return entry;
+  const gone = () => {
+    for (const entry of entries) {
+      entry.exited = true;
+      entry.gone();
+    }
+  };
+  child.once('error', gone);
+  child.once('exit', gone);
+  return entries;
 }
 
 // the synchronous path's nap while a prewarm finishes
@@ -451,14 +502,15 @@ const nap = new Int32Array(new SharedArrayBuffer(4));
 const PREWARM_WAIT_MS = 3000;
 
 /**
- * An in-flight prewarm's answer, waited for synchronously: its stdout, or
- * null if it failed or took too long — the caller then spawns fc-match
- * itself, which is also what reports why.
+ * A prewarm's answer, read from its files — waited for synchronously while
+ * the child still runs: its stdout, or null if it failed or took too long.
+ * The caller then spawns fc-match itself, which is also what reports why.
  */
 function answerSync(fc, entry) {
   const deadline = performance.now() + PREWARM_WAIT_MS;
   let left = readPrewarm(entry.base);
-  while (left === null && performance.now() < deadline) {
+  // a child that is gone has left all it ever will
+  while (left === null && !entry.exited && performance.now() < deadline) {
     Atomics.wait(nap, 0, 0, 1);
     left = readPrewarm(entry.base);
   }
@@ -470,6 +522,105 @@ function answerSync(fc, entry) {
   return entry.answer;
 }
 
+/**
+ * The first candidate of a prewarm's answer that ntk can open, read from the
+ * head of its file — waited for synchronously while the child still runs.
+ * Null where the answer failed, took too long, or holds no such candidate;
+ * the caller then reads it whole (`matchSortedSync`), which also reports why.
+ *
+ * An answer is the whole fallback chain, each face with its coverage: 634 KB
+ * for `sans-serif` on a Linux desktop, 2-3 ms to read and parse, where a
+ * layout setting text in the face needs its first line. The rest waits in
+ * the file for the first character that falls back, which Latin text in a
+ * face that covers it never has.
+ */
+function firstOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let status = prewarmStatus(entry.base);
+  while (status === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    status = prewarmStatus(entry.base);
+  }
+  // not answered, or not yet: the whole read is what decides, and reports
+  if (status !== 0) return null;
+  entry.first = firstCandidate(`${entry.base}.out`);
+  return entry.first;
+}
+
+/**
+ * The face a prewarm's `best` job found for a pattern, if ntk can open it —
+ * waited for synchronously while the job still runs. Null where it failed,
+ * took too long or named a face ntk cannot open; the caller then takes the
+ * chain's head (`firstOfPrewarm`).
+ *
+ * A `best` job asks fontconfig for the face it would pick, which it answers
+ * in about half the time the whole chain takes (15 ms against 30 on a Linux
+ * desktop): no sort, one line. A layout that asks for a family warmed while
+ * its component rendered waits on the prewarm, and the chain was most of
+ * that wait.
+ */
+function bestOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let left = readPrewarm(entry.base);
+  while (left === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    left = readPrewarm(entry.base);
+  }
+  if (left === null) return null;
+  removePrewarm(entry.base);
+  const [best] = left.status === 0 ? parseMatches(left.out) : [];
+  entry.first = best ?? null;
+  return entry.first;
+}
+
+// how much of an answer's head a read takes at a time: a line is a face's
+// path, names and coverage, a few KB at most
+const HEAD_CHUNK = 16384;
+
+/** The first line of an fc-match answer naming a face ntk can open, parsed;
+ *  null if the file has none, or cannot be read. */
+function firstCandidate(file) {
+  const fs = builtin('node:fs');
+  let fd;
+  try {
+    fd = fs.openSync(file, 'r');
+  } catch {
+    return null;
+  }
+  const decoder = new TextDecoder();
+  try {
+    let pending = new Uint8Array(0);
+    const chunk = new Uint8Array(HEAD_CHUNK);
+    for (;;) {
+      const read = fs.readSync(fd, chunk, 0, HEAD_CHUNK, null);
+      let bytes = pending;
+      if (read > 0) {
+        bytes = new Uint8Array(pending.length + read);
+        bytes.set(pending);
+        bytes.set(chunk.subarray(0, read), pending.length);
+      }
+      let start = 0;
+      // a newline never falls inside a UTF-8 sequence, so whole lines decode
+      for (let nl = bytes.indexOf(10, start); nl !== -1; nl = bytes.indexOf(10, start)) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start, nl)));
+        if (candidate) return candidate;
+        start = nl + 1;
+      }
+      if (read <= 0) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start)));
+        return candidate ?? null;
+      }
+      pending = bytes.slice(start);
+    }
+  } catch {
+    return null;
+  } finally {
+    fs.closeSync(fd);
+  }
+}
+
 /**
  * Seed the match cache for a pattern ahead of time, off the event loop.
  *
@@ -491,22 +642,54 @@ function answerSync(fc, entry) {
  * `matchSorted` is the reporting variant: same spawn, same cache, but it
  * awaits an answer and so has somewhere to put a failure.
  *
- * @returns {Promise<void>} resolves once the cache is seeded or the attempt
- *   abandoned
+ * @returns {Promise<void>} resolves once the answer is ready for the first
+ *   layout that asks — in the cache, or in the prewarm's files — or the
+ *   attempt abandoned
  */
 export function prewarm(pattern = {}) {
-  const fc = patternFor(pattern);
-  if (sortedCache.has(fc) || unavailable) return Promise.resolve();
-  const pending = inflight.get(fc)?.promise ?? spawnToFiles(fc)?.promise ?? runFcMatch(fc);
-  return pending.then(
-    (out) => {
-      if (!sortedCache.has(fc)) {
-        const list = parseMatches(out);
-        if (list.length > 0) sortedCache.set(fc, list);
-      }
-    },
-    () => {}
-  );
+  return warm([patternFor(pattern)])[0];
+}
+
+/**
+ * `prewarm` for several patterns at once, started together in one child: the
+ * faces a caller knows text will be set in besides a family's four — a menu's
+ * medium. Patterns already cached or running are not asked again.
+ *
+ * @returns {Promise<void>} once every pattern's answer is ready or given
+ *   up on; never rejects
+ */
+export function prewarmPatterns(patterns) {
+  return Promise.all(warm(patterns.map(patternFor))).then(() => {});
+}
+
+/**
+ * `prewarm` for a list of fontconfig patterns: the ones neither cached nor
+ * already running start together, in one child (`spawnToFiles`). A promise a
+ * pattern, resolving once its answer is ready or given up on; none rejects.
+ */
+function warm(fcs, best = null) {
+  if (unavailable) return fcs.map(() => Promise.resolve());
+  const fresh = [...new Set(fcs)].filter((fc) => !sortedCache.has(fc) && !inflight.has(fc));
+  // the best face only beside its own chain: once that is running or read,
+  // the chain's head answers as soon as a best job would
+  const bests = best !== null && fresh.includes(best) && !bestInflight.has(best) ? [best] : [];
+  if (fresh.length > 0) spawnToFiles(fresh, bests);
+  return fcs.map((fc) => {
+    if (sortedCache.has(fc)) return Promise.resolve();
+    // a prewarm's answer waits in its files for the first ask
+    const running = inflight.get(fc);
+    if (running?.base) return running.promise;
+    const pending = running?.promise ?? runFcMatch(fc);
+    return pending.then(
+      (out) => {
+        if (!sortedCache.has(fc)) {
+          const list = parseMatches(out);
+          if (list.length > 0) sortedCache.set(fc, list);
+        }
+      },
+      () => {}
+    );
+  });
 }
 
 // the faces a family is asked for in: regular, bold, and both in italic
@@ -524,14 +707,20 @@ const facesWarmed = new Set();
  * A document asks for its family's faces one at a time, as layout reaches
  * the first bold word, the first emphasis, and each ask that misses is a
  * synchronous fc-match on the way to the first frame: a Markdown document
- * waited on five of them, 600 ms on XQuartz. Started together they run side
- * by side, and each later ask finds its answer there.
+ * waited on five of them, 600 ms on XQuartz. Started together, from one
+ * child, they run side by side, and each later ask finds its answer there.
  */
 export function prewarmFaces(pattern = {}) {
   const family = pattern.family || 'sans-serif';
   if (facesWarmed.has(family) || unavailable) return;
   facesWarmed.add(family);
-  for (const [weight, style] of FACES) prewarm({ family, weight, style });
+  // the face a layout will ask for first gets a `best` job beside the chains:
+  // the one being asked for, or, warmed ahead, the regular
+  const first = patternFor(pattern.weight === undefined && pattern.style === undefined ? { family, weight: 400, style: 'normal' } : pattern);
+  warm(
+    FACES.map(([weight, style]) => patternFor({ family, weight, style })),
+    first
+  );
 }
 
 /**
@@ -561,9 +750,10 @@ export async function matchSorted(pattern = {}) {
   let out;
   const pending = inflight.get(fc);
   if (pending?.base) {
-    // a prewarm running for the pattern: its answer, or — if it has none —
-    // a spawn of our own, which is what reports why
-    out = await pending.promise.catch(() => undefined);
+    // a prewarm for the pattern: its answer once the child is gone, or — if
+    // it left none — a spawn of our own, which is what reports why
+    await pending.promise;
+    out = answerSync(fc, pending) ?? undefined;
   }
   if (out === undefined) {
     try {
@@ -617,6 +807,34 @@ export function matchSortedSync(pattern) {
   return cacheMatches(fc, out);
 }
 
+/**
+ * The best face for a pattern: `matchSortedSync(pattern)[0]`, without reading
+ * the rest of the fallback chain where a prewarm's answer is waiting in its
+ * file (`firstOfPrewarm`). A layout setting text in a face asks for this;
+ * the first character it has to fall back for reads the chain whole.
+ *
+ * @returns {{path, postscriptName, family: string, families: string[],
+ *   charset: string}}
+ */
+export function matchFirstSync(pattern) {
+  const fc = patternFor(pattern);
+  const cached = sortedCache.get(fc);
+  if (cached) return cached[0];
+  if (unavailable) throw noFontsError(unavailable);
+  prewarmFaces(pattern);
+  const best = bestInflight.get(fc);
+  if (best) {
+    const first = bestOfPrewarm(best);
+    if (first) return first;
+  }
+  const pending = inflight.get(fc);
+  if (pending?.base) {
+    const first = firstOfPrewarm(pending);
+    if (first) return first;
+  }
+  return matchSortedSync(pattern)[0];
+}
+
 /**
  * Resolve a font pattern ({family, weight, style}) to the best matching font
  * file. Returns { path, postscriptName, family, families } or throws if

package/lib/renderingcontext_2d.js

@@ -33,6 +33,7 @@ import {
   clipRingToRect,
   clipTrianglesToRect,
   rectsOnSurface,
+  WIRE_REACH,
   withinRect,
 } from "./cliprect.js";
 import {
@@ -1035,6 +1036,13 @@ class RenderingContext2d {
   }
 
   _stylePicture(value) {
+    if (typeof value === "string") {
+      // by the string, where the app keeps that index (App#solidPictureOf);
+      // an app that only answers solidPicture — a host's own, a test's
+      // stand-in — takes the long way below
+      const app = this.window.app;
+      if (app.solidPictureOf) return app.solidPictureOf(value);
+    }
     if (typeof value === "string" || Array.isArray(value)) {
       const c = parseColor(value);
       return this.createSolidPicture(c[0], c[1], c[2], c[3]);
@@ -1885,9 +1893,10 @@ class RenderingContext2d {
   ) {
     if (!shapes.length) return;
     // 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.
+    // out of the paint (lib/cliprect.js). A shape that reaches that far is
+    // cut to the picture first, a pixel to spare on every side: nothing
+    // outside the picture is ever composited. One that does not goes as it
+    // came, for the server to clip.
     const x0 = -dx - 1;
     const y0 = -dy - 1;
     const x1 = w - dx + 1;
@@ -1895,7 +1904,7 @@ class RenderingContext2d {
     let fitted = null;
     for (let i = 0; i < shapes.length; i++) {
       const shape = shapes[i];
-      if (withinRect(shape, x0, y0, x1, y1)) {
+      if (withinRect(shape, -WIRE_REACH - dx, -WIRE_REACH - dy, WIRE_REACH - dx, WIRE_REACH - dy)) {
         if (fitted) fitted.push(shape);
         continue;
       }
@@ -2498,28 +2507,44 @@ class RenderingContext2d {
     // cuts above are meant to keep the extruder off that path; this keeps
     // a future miss from being catastrophic. A sum is finite iff every
     // term is.
+    //
+    // A triangle wholly off the surface is left out as well: it adds
+    // nothing on either route — the rasterizer would walk its rows only for
+    // its edges to cancel on the border column, and the server would be
+    // sent it only to clip it away — and a zoomed graph has hundreds of
+    // edges past the window every frame.
+    const right = this.width + 1;
+    const bottom = this.height + 1;
     let w = 0;
     for (let i = 0; i < tris.length; i += 6) {
-      const sum =
-        tris[i] +
-        tris[i + 1] +
-        tris[i + 2] +
-        tris[i + 3] +
-        tris[i + 4] +
-        tris[i + 5];
-      if (!Number.isFinite(sum)) continue;
+      const ax = tris[i];
+      const ay = tris[i + 1];
+      const bx = tris[i + 2];
+      const by = tris[i + 3];
+      const cx = tris[i + 4];
+      const cy = tris[i + 5];
+      if (!Number.isFinite(ax + ay + bx + by + cx + cy)) continue;
+      if (
+        (ax < -1 && bx < -1 && cx < -1) ||
+        (ay < -1 && by < -1 && cy < -1) ||
+        (ax > right && bx > right && cx > right) ||
+        (ay > bottom && by > bottom && cy > bottom)
+      ) {
+        continue;
+      }
       if (w < i) for (let k = 0; k < 6; k++) tris[w + k] = tris[i + k];
       w += 6;
     }
     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.
+    // hands the server is 16 bits: a stroke that reaches that far is cut to
+    // the surface first (lib/cliprect.js), a pixel to spare on every side, so
+    // what the surface shows is drawn exactly as before. One that does not
+    // goes as it came, for the server to clip.
     const edgeX = this.width + 1;
     const edgeY = this.height + 1;
-    if (!withinRect(tris, -1, -1, edgeX, edgeY)) {
+    if (!withinRect(tris, -WIRE_REACH, -WIRE_REACH, WIRE_REACH, WIRE_REACH)) {
       const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
       tris.length = 0;
       for (let i = 0; i < cut.length; i++) tris.push(cut[i]);