ntk 3.10.0 → 3.10.2

package/lib/renderingcontext_2d.js

@@ -236,7 +236,14 @@ class RenderingContext2d {
 
   // notify a double-buffered window that its backing content changed
   _markDirty() {
-    if (typeof this.window._markDirty === 'function') this.window._markDirty();
+    if (typeof this.window._markDirty !== 'function') return;
+    // The clip bounds everything this operation could have touched, so it is
+    // also the region the window has to blit. Reporting it lets the present
+    // copy the part of the backing store that changed instead of all of it —
+    // a hover repaint of two tab headers used to blit the whole window. A
+    // context with no rectangular clip reports nothing, and the window falls
+    // back to a full blit, which is what any drawing outside a clip needs.
+    this.window._markDirty(this._clips.length ? this._clipRect() : null);
   }
 
   // html context2d compatibility: canvas.getContext('2d').canvas == canvas
@@ -999,6 +1006,34 @@ class RenderingContext2d {
 
   // rasterize one clip entry into a temp a8 and In-composite it onto the mask
   _intersectClip(entry) {
+    // Intersecting with a *rectangle* is just "keep the inside, clear the
+    // outside", and up to four FillRectangles say that exactly — no temp
+    // pixmap to allocate and free, no rasterization, and no full-surface
+    // Composite. The general path below costs the whole surface per clip
+    // however small the rectangle is, which is what made nested clipping the
+    // dominant cost of a frame: scrolling a table clipped roughly 170 times
+    // per repaint, and at 900x600 that alone was ~92 megapixels of work
+    // before a single glyph was drawn.
+    if (entry.rect) {
+      const r = entry.rect;
+      const x = Math.max(0, Math.min(r.x, this.width));
+      const y = Math.max(0, Math.min(r.y, this.height));
+      const right = Math.max(x, Math.min(r.x + r.w, this.width));
+      const bottom = Math.max(y, Math.min(r.y + r.h, this.height));
+      const outside = [];
+      if (y > 0) outside.push(0, 0, this.width, y);
+      if (bottom < this.height) {
+        outside.push(0, bottom, this.width, this.height - bottom);
+      }
+      if (x > 0) outside.push(0, y, x, bottom - y);
+      if (right < this.width) {
+        outside.push(right, y, this.width - right, bottom - y);
+      }
+      if (outside.length) {
+        this.Render.FillRectangles(this.Render.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], outside);
+      }
+      return;
+    }
     const tmpPixmap = new Pixmap(this.window.app, { depth: 8, width: this.width, height: this.height });
     const tmpMask = new Picture(this.window.app, { drawable: tmpPixmap, format: this.Render.a8 });
     this.Render.FillRectangles(this.Render.PictOp.Src, tmpMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);

package/lib/widgets/markdownview.js

@@ -352,14 +352,66 @@ export default class MarkdownView {
       }
     }
 
+    // Two widths per column from here on: `cols` is the outer width the grid
+    // is drawn at, `inner` is what a cell is laid out at. `inner` is kept
+    // alongside rather than derived as `cols[c] - hpad * 2`, and that is not
+    // tidiness. Adding a padding and subtracting it again is not the identity
+    // in binary floating point — for a natural width of 48.953125 at size 16
+    // the round trip returns 48.95312499999999 — and a token handed a maxWidth
+    // a few ULPs below its own measured width is *wider than its container*,
+    // so TextLayout force-breaks it. That is a `value` header rendered as
+    // `valu` over `e`, on some fonts and not others, depending on nothing more
+    // than whether the width happens to survive the round trip.
     const cols = natural.map((w) => w + hpad * 2);
+    const inner = natural.slice();
     const total = cols.reduce((a, b) => a + b, 0);
     if (total > width) {
-      // proportional shrink; the floor keeps narrow columns readable even
-      // if wide neighbors then push the table slightly past the container
-      const minCol = Math.min(t.size * 2.5 + hpad * 2, width / ncols);
+      // Shrink towards each column's *min-content* width — the widest word it
+      // holds that cannot be broken — and never past it. The floor used to be
+      // a flat 2.5em guess with no relation to the content, so a column whose
+      // longest word was wider than that got a maxWidth below the word and the
+      // word came apart.
+      //
+      // Min-content is the widest whitespace-delimited token, each measured
+      // *unconstrained*. Laying the whole cell out at a tiny maxWidth looks
+      // like the obvious probe and is not one: a token wider than the
+      // container is force-broken rather than left to overflow whenever a
+      // single cluster fits, so the probe reports a fragment's width. It is
+      // not even monotonic in maxWidth — see the test that pins that. An
+      // unconstrained token cannot be broken at all.
+      //
+      // A token split across spans — `**val**ue` — is measured as its halves
+      // and so under-measured. Rare, and still far above the flat guess this
+      // replaced. Only measured here: a table that fits needs no minimums.
+      const content = new Array(ncols).fill(0);
+      for (const row of cellSpans) {
+        for (let c = 0; c < ncols; c++) {
+          for (const span of row[c]) {
+            for (const token of String(span.text ?? '').split(/\s+/)) {
+              if (!token) continue;
+              const measure = new TextLayout(fonts, [{ ...span, text: token }], styles.base, {
+                lineHeight: t.lineHeight
+              });
+              content[c] = Math.max(content[c], measure.width);
+            }
+          }
+        }
+      }
+      const mins = content.map((w) => w + hpad * 2);
+      // Space above the minimums is shared in proportion to how much each
+      // column asked for, so a wide column gives up more than a narrow one.
+      // When the minimums themselves do not fit, the table overflows rather
+      // than breaking words — which is what a browser does with the same
+      // content, and is the lesser of the two evils.
+      const slack = width - mins.reduce((a, b) => a + b, 0);
+      const want = cols.reduce((a, w, c) => a + Math.max(0, w - mins[c]), 0);
       for (let c = 0; c < ncols; c++) {
-        cols[c] = Math.max(minCol, (cols[c] / total) * width);
+        cols[c] =
+          slack <= 0 || want <= 0
+            ? mins[c]
+            : mins[c] + (Math.max(0, cols[c] - mins[c]) / want) * slack;
+        // Never below min-content, whatever the arithmetic above produced.
+        inner[c] = Math.max(content[c], cols[c] - hpad * 2);
       }
     }
     const tableW = cols.reduce((a, b) => a + b, 0);
@@ -369,7 +421,7 @@ export default class MarkdownView {
     for (let r = 0; r < cellSpans.length; r++) {
       const layouts = cellSpans[r].map((spans, c) =>
         new TextLayout(fonts, spans.length ? spans : '', styles.base, {
-          maxWidth: cols[c] - hpad * 2,
+          maxWidth: inner[c],
           align: block.align[c] ?? 'left',
           lineHeight: t.lineHeight
         })

package/lib/window.js

@@ -6,6 +6,108 @@ import Drawable from './drawable.js';
 import Pixmap from './pixmap.js';
 import * as xevents from './events_map.js';
 
+/**
+ * How many rectangles a frame's dirty region is allowed to hold.
+ *
+ * Drawing reports one region per operation, so a repaint reports hundreds, and
+ * an uncapped list would turn every one of them into its own CopyArea. Past
+ * the cap the cheapest pair is merged (see addDirtyRect), which keeps
+ * genuinely separated clusters apart while adjacent ones coalesce.
+ */
+const MAX_DIRTY_RECTS = 8;
+
+/**
+ * How much of the surrounding box a split has to save to be worth making.
+ *
+ * Several rectangles are several CopyArea requests, and they only beat the one
+ * box around them when they are meaningfully smaller than it: two tab headers
+ * side by side describe nearly the same area either way, two corners of the
+ * window do not. Below this fraction the region is collapsed to its box.
+ */
+const SPLIT_SAVING = 0.75;
+
+function rectArea(r) {
+  return Math.max(0, r.w) * Math.max(0, r.h);
+}
+
+function coversRect(outer, inner) {
+  return (
+    inner.x >= outer.x &&
+    inner.y >= outer.y &&
+    inner.x + inner.w <= outer.x + outer.w &&
+    inner.y + inner.h <= outer.y + outer.h
+  );
+}
+
+function mergeRects(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  const right = Math.max(a.x + a.w, b.x + b.w);
+  const bottom = Math.max(a.y + a.h, b.y + b.h);
+  return { x, y, w: right - x, h: bottom - y };
+}
+
+/** The box around a non-empty list of rectangles. */
+function rectsBounds(rects) {
+  let out = rects[0];
+  for (let i = 1; i < rects.length; i++) out = mergeRects(out, rects[i]);
+  return out;
+}
+
+/**
+ * Add one rectangle to a capped list, returning a new list.
+ *
+ * A rectangle already covered by one in the list adds nothing, which is the
+ * common case by a wide margin: consecutive operations under the same clip all
+ * report the same region. Otherwise it goes on the end, and if that overflows
+ * the cap the pair whose merge wastes the least area is merged — waste being
+ * the area the merged rectangle covers that neither of the two did, so
+ * overlapping and adjacent pairs go first and far-apart ones last.
+ */
+function addDirtyRect(rects, add) {
+  for (const r of rects) {
+    if (coversRect(r, add)) return rects;
+  }
+  const out = rects.filter((r) => !coversRect(add, r));
+  out.push({ x: add.x, y: add.y, w: add.w, h: add.h });
+  if (out.length <= MAX_DIRTY_RECTS) return out;
+  let bestI = 0;
+  let bestJ = 1;
+  let bestMerged = null;
+  let bestWaste = Infinity;
+  for (let i = 0; i < out.length; i++) {
+    for (let j = i + 1; j < out.length; j++) {
+      const merged = mergeRects(out[i], out[j]);
+      const waste = rectArea(merged) - rectArea(out[i]) - rectArea(out[j]);
+      if (waste < bestWaste) {
+        bestWaste = waste;
+        bestI = i;
+        bestJ = j;
+        bestMerged = merged;
+      }
+    }
+  }
+  out[bestI] = bestMerged;
+  out.splice(bestJ, 1);
+  return out;
+}
+
+/**
+ * Union a reported region into a frame's dirty region, where `undefined` is
+ * "nothing yet" and `null` is "unbounded".
+ *
+ * The asymmetry is the whole point: once any operation declines to say where it
+ * drew, the region cannot be trusted to bound the frame, and it has to stay
+ * unbounded no matter what is unioned into it afterwards. Getting that
+ * backwards means blitting less than was drawn, which leaves stale pixels on
+ * screen — so the absorbing state is the safe one.
+ */
+function unionDirty(current, add) {
+  if (current === null || add === null || add === undefined) return null;
+  if (current === undefined) return [{ x: add.x, y: add.y, w: add.w, h: add.h }];
+  return addDirtyRect(current, add);
+}
+
 // X window attributes forwarded verbatim from constructor args into the
 // CreateWindow value list (node-x11 valueMask names, see x11
 // lib/corereqs.js). Deliberately not forwarded:
@@ -397,9 +499,25 @@ export default class Window extends Drawable {
     this._scheduleFrame();
   }
 
-  // called by rendering contexts after each drawing operation
-  _markDirty() {
+  /**
+   * Called by rendering contexts after each drawing operation.
+   *
+   * `bounds` is the region that operation could have touched — a context
+   * reports its clip rectangle, which by definition contains everything it
+   * drew. The regions accumulate, and the next blit copies just those instead
+   * of the whole backing store: a repaint of two tab headers is a 125x31
+   * CopyArea rather than a 1000x700 one. They accumulate as a short list of
+   * rectangles rather than one box around them all, so two repaints at
+   * opposite corners of the window no longer drag everything between them
+   * along. An operation that reports nothing, because it was not clipped,
+   * gives up the optimisation for this frame and the blit covers everything —
+   * the safe direction, and the reason this needs no cooperation from the
+   * caller to be correct.
+   */
+  _markDirty(bounds) {
     if (!this._backing) return;
+    if (!this._dirty) this._dirtyRegion = undefined;
+    this._dirtyRegion = unionDirty(this._dirtyRegion, bounds);
     this._dirty = true;
     this._backingValid = true;
     if (this._presentScheduled) return;
@@ -591,14 +709,50 @@ export default class Window extends Drawable {
     this._presentPending = false;
     if (!this._backing) return;
     this._dirty = false;
+    const region = this._dirtyRegion;
+    this._dirtyRegion = undefined;
     const w = Math.min(this.width, this._backing.width);
     const h = Math.min(this.height, this._backing.height);
+    // Clamped to both drawables: CopyArea outside either is a no-op region at
+    // best, and the backing store is grow-only so it can be larger than the
+    // window after a shrink. A rectangle that survives clamping with no area
+    // left is dropped; if that leaves nothing, nothing needs copying.
+    const clamped = [];
+    for (const rect of region ?? [{ x: 0, y: 0, w, h }]) {
+      const x0 = Math.max(0, Math.floor(rect.x));
+      const y0 = Math.max(0, Math.floor(rect.y));
+      const x1 = Math.min(w, Math.ceil(rect.x + rect.w));
+      const y1 = Math.min(h, Math.ceil(rect.y + rect.h));
+      if (x1 > x0 && y1 > y0) clamped.push({ x: x0, y: y0, w: x1 - x0, h: y1 - y0 });
+    }
+    if (!clamped.length) return;
+    const rects = this._blitList(clamped);
     // a paced frame can fire after the connection started closing
     safeRelease(this.X, () => {
-      this.X.CopyArea(this._backing.id, this.id, this._presentGc, 0, 0, 0, 0, w, h);
+      for (const r of rects) {
+        this.X.CopyArea(this._backing.id, this.id, this._presentGc, r.x, r.y, r.x, r.y, r.w, r.h);
+      }
     });
   }
 
+  /**
+   * The rectangles a present actually copies, given the ones drawing reported.
+   *
+   * The list is not used as it stands: each rectangle is a request, and a
+   * region whose pieces nearly fill the box around them is better served by
+   * one copy of the box. So the split is kept only when it saves enough of
+   * that box to pay for the extra requests, and collapsed otherwise. Both
+   * directions cover every reported pixel, so this is a cost decision and
+   * never a correctness one.
+   */
+  _blitList(rects) {
+    if (rects.length < 2) return rects;
+    const box = rectsBounds(rects);
+    let sum = 0;
+    for (const r of rects) sum += rectArea(r);
+    return sum > rectArea(box) * SPLIT_SAVING ? [box] : rects;
+  }
+
   map() {
     this.X.MapWindow(this.id);
     return this;

package/package.json

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