ntk 7.6.1 → 8.0.0

package/README.md

@@ -53,18 +53,17 @@ rasterizer and cached server-side as XRender glyphs, so drawing a line of
 text costs about a byte per glyph on the wire. Font names resolve through
 fontconfig (`fc-match`). Very large and continuously animated sizes render
 as server-side trapezoids instead of cached bitmaps. A `TextLayout` engine
-wraps styled text to a target width, a `MarkdownView` widget renders
-markdown (with syntax-highlighted code fences and KaTeX math via
-`TexView`) on top of it — see [docs/text.md](docs/text.md) and
-[docs/tex.md](docs/tex.md).
+wraps styled text to a target width — see [docs/text.md](docs/text.md).
 
 PNG/JPEG images decode client-side (`loadImage`) and composite server-side
-via `ctx.drawImage` ([docs/images.md](docs/images.md)). An `HtmlView`
-widget renders a static HTML + CSS subset — block flow and flexbox laid
-out by yoga-layout, no scripts, no network — with app-controlled link
-navigation ([docs/html.md](docs/html.md)). An `SvgView` widget renders
-static SVG (shapes, gradients, transforms, `use`) through the same 2d
-pipeline ([docs/svg.md](docs/svg.md)).
+via `ctx.drawImage` ([docs/images.md](docs/images.md)). An `SvgView` widget
+renders static SVG (shapes, gradients, transforms, `use`) through the same
+2d pipeline ([docs/svg.md](docs/svg.md)).
+
+Rendering documents — markdown, formulas, rich text — is not ntk's job:
+it draws, and a document is a tree of layout decisions on top of that.
+[`@react-x11/components`](https://github.com/sidorares/react-x11-components)
+is where those live, over the react-x11 renderer.
 
 ```js
 import { createClient } from 'ntk';

package/lib/image.js

@@ -79,6 +79,18 @@ export class Image {
     return picture;
   }
 
+  /**
+   * The Pixmap those pixels live in on `app` (uploading on first use, like
+   * `picture`). What it is for is building a *second* Picture over the same
+   * upload — `ctx.createPattern` needs a repeating one, and changing the
+   * cached picture's attributes instead would change how `drawImage` samples
+   * this image everywhere else.
+   */
+  pixmap(app) {
+    this.picture(app);
+    return this._uploads.get(app).pixmap;
+  }
+
   /** free server-side copies of this image (safe to draw again afterwards) */
   destroy() {
     for (const { pixmap, picture } of this._uploads.values()) {

package/lib/index.js

@@ -16,7 +16,6 @@ import {
   encodeXEmbedInfo,
   readXEmbedInfo
 } from './xembed.js';
-import { loadLayout } from './yoga.js';
 import { decodeKey, groupForState } from './keyboard.js';
 import Pixmap from './pixmap.js';
 import Picture from './picture.js';
@@ -47,21 +46,17 @@ import {
   defaultRasterizer,
   setDefaultRasterizer
 } from './rasterize.js';
+import { DEFAULT_MASK_POLICY } from './maskcluster.js';
 import { DEFAULT_SHAPE_POLICY } from './shapeglyphs.js';
 import { TextLayout } from './text/layout.js';
-import HtmlView from './widgets/htmlview.js';
 import SvgView from './widgets/svgview.js';
-import MarkdownView from './widgets/markdownview.js';
-import TexView, { configureTex, layoutTex, TexBox } from './widgets/tex.js';
-import { tokenize as highlightCode } from './widgets/highlight.js';
-import { cssColorStraight, premultiply } from './color.js';
-import { cssColor, cssLength } from './widgets/css.js';
+import { cssColor, cssColorStraight, premultiply } from './color.js';
 
 // rendering context modules register themselves on Drawable. The direct one
 // comes last on purpose: it wraps the 'opengl' factory the indirect one just
 // registered, so that the backend-neutral name can dispatch on glPolicy.
 import './renderingcontext_x11.js';
-import './renderingcontext_2d.js';
+import { CanvasGradient, CanvasPattern } from './renderingcontext_2d.js';
 import './renderingcontext_opengl.js';
 import './renderingcontext_gles.js';
 
@@ -115,11 +110,7 @@ export function createClient(options, callback) {
   const x11Options = { ...(options || {}) };
   if (x11Options.bufferRequests === undefined) x11Options.bufferRequests = DEFAULT_BUFFER_REQUESTS;
 
-  // the layout engine's WASM loads alongside the connection, so widgets are
-  // usable synchronously by the time the App exists (see lib/yoga.js)
-  const layout = loadLayout();
-
-  const connecting = new Promise((resolve, reject) => {
+  const promise = new Promise((resolve, reject) => {
     // Resolve the font spec here rather than lazily in `app.fonts`, so a
     // missing directory is a rejected connect instead of a surprise inside
     // the first paint. Inside the executor so it rejects rather than throws
@@ -205,8 +196,6 @@ export function createClient(options, callback) {
     });
   });
 
-  const promise = Promise.all([connecting, layout]).then(([app]) => app);
-
   if (callback) {
     promise.then(
       (app) => callback(null, app),
@@ -237,6 +226,10 @@ export {
   Pixmap,
   Picture,
   Surface,
+  // fill/stroke styles the 2d context hands back (docs/context-2d.md) —
+  // exported for `instanceof`, not to be constructed directly
+  CanvasGradient,
+  CanvasPattern,
   Image,
   ImageData,
   pixelLayout,
@@ -260,20 +253,13 @@ export {
   defaultRasterizer,
   setDefaultRasterizer,
   DEFAULT_RASTER_POLICY,
+  DEFAULT_MASK_POLICY,
   DEFAULT_SHAPE_POLICY,
   TextLayout,
-  HtmlView,
   SvgView,
-  MarkdownView,
-  TexView,
-  TexBox,
-  layoutTex,
-  configureTex,
-  highlightCode,
   cssColor,
   cssColorStraight,
   premultiply,
-  cssLength,
   decodeKey,
   groupForState,
   // the `code` on a failed GL setup: branch on it rather than on the message
@@ -283,11 +269,4 @@ export {
   GL_MODES,
   DEFAULT_GL_POLICY
 };
-// The layout engine ntk lays HtmlView out with — downstream layout consumers
-// (e.g. the react-x11 renderer) must import it from here rather than from
-// `yoga-layout`, or they get a second WASM instance whose Nodes cannot be
-// mixed with ntk's. Its enum constants are readable as soon as ntk is
-// imported; `Node`/`Config` need the WASM, which `createClient()` loads —
-// `loadLayout()` is there for widgets used without an App.
-export { default as Yoga, loadLayout, layoutLoaded } from './yoga.js';
 export default { createClient };

package/lib/maskcluster.js

@@ -0,0 +1,191 @@
+// Splitting one drawing's coverage mask into a few, when its pieces are
+// scattered (issue #264).
+//
+// A fill or stroke rasterizes coverage into one a8 mask sized to the
+// drawing's ink bounding box, and that mask costs width x height whatever
+// the coverage inside it is. For one shape the bound is right. For a path
+// holding N disjoint subpaths the bound is their *union*, so batching N
+// draws into one path trades N small masks for one big one — which wins
+// when the pieces span the box anyway (long edges of a graph) and loses
+// badly when they do not (its handle dots): at 1100x700, 735 batched edge
+// strokes cost 3.9 MB -> 1.3 MB of mask and 53% less frame time, while 19
+// edges plus 40 small discs batched the same way cost ~0.75 MB *more* and
+// 40% more frame time than drawing them singly.
+//
+// Rather than leave that cliff to every caller, the boxes go through here
+// first and the mask is emitted once per cluster. The partition is by gaps
+// only: a cut is legal where nothing straddles it, which is what keeps
+// every cluster box disjoint from every other. Disjoint boxes are what make
+// the split invisible — no pixel is composited twice (a translucent colour
+// would blend twice at any overlap), and the winding number a fill asks for
+// is unchanged, because a closed subpath contributes nothing to the winding
+// of a point outside its own box.
+//
+// Cutting is not free: each extra mask is a few more requests. So a cut has
+// to pay for itself in mask area, and the cheapest useful unit of area is
+// the policy's `minSaving`. That single rule bounds the outcome from both
+// sides — every cut removes at least `minSaving` pixels of mask, so the
+// number of clusters can never exceed the union area divided by it.
+
+/**
+ * When one drawing's mask is worth splitting into several.
+ *
+ * - `minSaving` — mask pixels a cut has to remove to be worth the extra
+ *   mask pass it costs. 64x64 is the same "small enough not to think about"
+ *   box `DEFAULT_RASTER_POLICY.maxArea` uses: below it, an extra pass is
+ *   dearer than the area it would save.
+ * - `maxMasks` — hard cap on clusters per drawing, so a pathological path
+ *   (thousands of scattered dots) cannot turn one drawing into thousands of
+ *   request groups. Cuts are taken most-valuable-first, so the cap keeps the
+ *   ones that matter.
+ *
+ * `{ maxMasks: 1 }` — or `minSaving: Infinity` — disables the split, which
+ * is what a composite op that writes outside its coverage gets.
+ */
+export const DEFAULT_MASK_POLICY = {
+  minSaving: 64 * 64,
+  maxMasks: 32
+};
+
+/** the policy for one app, merged over the defaults */
+export function maskPolicyOf(app) {
+  return app.maskPolicy
+    ? { ...DEFAULT_MASK_POLICY, ...app.maskPolicy }
+    : DEFAULT_MASK_POLICY;
+}
+
+const area = (b) => b.w * b.h;
+
+/** The smallest {x, y, w, h} box holding both of two boxes. */
+export function unionBox(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return {
+    x,
+    y,
+    w: Math.max(a.x + a.w, b.x + b.w) - x,
+    h: Math.max(a.y + a.h, b.y + b.h) - y
+  };
+}
+
+function unionOf(boxes, order) {
+  let out = { ...boxes[order[0]] };
+  for (let i = 1; i < order.length; ++i) out = unionBox(out, boxes[order[i]]);
+  return out;
+}
+
+/**
+ * The most valuable gap cut of one group along one axis, or null when the
+ * group has no gap on it.
+ *
+ * `order` is the group's members sorted by that axis' start. A cut between
+ * members i and i+1 is legal only where nothing straddles it — the next box
+ * has to start at or past the far edge of every box before it, which for a
+ * union box is just its own far edge. What the cut is worth is the mask area
+ * it removes: the parent box less the two halves.
+ */
+function bestGap(boxes, order, box, axis) {
+  const n = order.length;
+  const start = axis === 'x' ? 'x' : 'y';
+  const size = axis === 'x' ? 'w' : 'h';
+
+  // suffix[i] is the union box of order[i..n-1]; the prefix is carried
+  // along the scan below
+  const suffix = new Array(n);
+  suffix[n - 1] = { ...boxes[order[n - 1]] };
+  for (let i = n - 2; i >= 0; --i) {
+    suffix[i] = unionBox(boxes[order[i]], suffix[i + 1]);
+  }
+
+  let best = null;
+  let prefix = { ...boxes[order[0]] };
+  for (let i = 0; i + 1 < n; ++i) {
+    if (i > 0) prefix = unionBox(prefix, boxes[order[i]]);
+    const next = boxes[order[i + 1]];
+    if (next[start] < prefix[start] + prefix[size]) continue; // straddled
+    const saving = area(box) - area(prefix) - area(suffix[i + 1]);
+    if (!best || saving > best.saving) {
+      best = { axis, at: i, saving, left: prefix, right: suffix[i + 1] };
+    }
+  }
+  return best;
+}
+
+/** a group of pieces, its box, and the best cut available to it */
+function makeNode(boxes, byX, byY, box) {
+  const node = { box: box ?? unionOf(boxes, byX), byX, byY, split: null };
+  if (byX.length > 1) {
+    const x = bestGap(boxes, byX, node.box, 'x');
+    const y = bestGap(boxes, byY, node.box, 'y');
+    node.split = !x ? y : !y || x.saving >= y.saving ? x : y;
+  }
+  return node;
+}
+
+/** the two halves of `node`, each with its own next-best cut */
+function splitNode(boxes, node) {
+  const { axis, at, left, right } = node.split;
+  const cut = axis === 'x' ? node.byX : node.byY;
+  const other = axis === 'x' ? node.byY : node.byX;
+  const inLeft = new Set(cut.slice(0, at + 1));
+  // the other axis' order survives the filter, so neither half is re-sorted
+  const leftOther = other.filter((i) => inLeft.has(i));
+  const rightOther = other.filter((i) => !inLeft.has(i));
+  const leftCut = cut.slice(0, at + 1);
+  const rightCut = cut.slice(at + 1);
+  return axis === 'x'
+    ? [
+        makeNode(boxes, leftCut, leftOther, left),
+        makeNode(boxes, rightCut, rightOther, right)
+      ]
+    : [
+        makeNode(boxes, leftOther, leftCut, left),
+        makeNode(boxes, rightOther, rightCut, right)
+      ];
+}
+
+/**
+ * Partition one drawing's pieces into mask clusters.
+ *
+ * @param {Array<{x, y, w, h}>} boxes one integer box per piece — a fill's
+ *   subpaths, a stroke's islands of triangles — already clamped to the
+ *   surface. Boxes may overlap; overlapping ones always end up in the same
+ *   cluster.
+ * @param {{minSaving: number, maxMasks: number}} [policy]
+ * @returns {Array<{x, y, w, h, items: number[]}>} clusters, each with the
+ *   indices of the pieces it holds. Cluster boxes are pairwise disjoint,
+ *   and their union is the union of `boxes`.
+ */
+export function clusterBoxes(boxes, policy = DEFAULT_MASK_POLICY) {
+  const n = boxes.length;
+  if (!n) return [];
+  // merged here as well as in maskPolicyOf, so that a partial policy from a
+  // direct caller ({ maxMasks: 1 }) cannot silently zero the other field
+  const { minSaving, maxMasks: cap } = { ...DEFAULT_MASK_POLICY, ...policy };
+  const maxMasks = Math.max(1, cap | 0);
+  const all = boxes.map((_, i) => i);
+  if (n === 1 || maxMasks === 1 || !(minSaving < Infinity)) {
+    return [{ ...unionOf(boxes, all), items: all }];
+  }
+
+  const byX = all.slice().sort((a, b) => boxes[a].x - boxes[b].x || a - b);
+  const byY = all.slice().sort((a, b) => boxes[a].y - boxes[b].y || a - b);
+  const nodes = [makeNode(boxes, byX, byY)];
+  // most-valuable cut first, so a maxMasks cap keeps the cuts that matter
+  while (nodes.length < maxMasks) {
+    let pick = -1;
+    let best = minSaving;
+    for (let i = 0; i < nodes.length; ++i) {
+      const split = nodes[i].split;
+      if (split && split.saving >= best) {
+        best = split.saving;
+        pick = i;
+      }
+    }
+    if (pick < 0) break;
+    const [a, b] = splitNode(boxes, nodes[pick]);
+    nodes[pick] = a;
+    nodes.push(b);
+  }
+  return nodes.map((node) => ({ ...node.box, items: node.byX }));
+}