ntk 3.10.1 → 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

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.1",
+  "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",