@neuroplastio/xterm-addon-hotty 0.1.0-next.3 → 0.1.0-next.4

package/dist/hotty-xterm.js

@@ -2607,17 +2607,21 @@ var Surface = class {
   /**
    * The cells an element's border box covers as the user sees it, scrolled
    * included (SPEC §9: `area`), counted from the surface's top left cell:
-   * whole, where it is clipped or scrolled away. An edge within half a
-   * device pixel of a cell's is on it: layout rounds positions to fractions
-   * of a pixel, and the user sees no less than a device pixel.
+   * whole, where it is clipped or scrolled away. An edge close enough to a
+   * cell's is on it: within half a device pixel, which the user cannot see,
+   * plus what layout loses on the way there. Layout keeps lengths in fixed
+   * units (1/64 px in Chromium, 1/60 in Firefox) and cuts each box's to
+   * them, so with a cell a fraction of a pixel, a row 29 boxes of one cell
+   * down starts up to 29/64 px short of its cell.
    */
   areaOf(el) {
     const b = el.getBoundingClientRect();
-    const tol = 0.5 / (this.frame.ownerDocument.defaultView?.devicePixelRatio || 1);
-    const c = Math.floor((b.left + tol) / this.cellW);
-    const r = Math.floor((b.top + tol) / this.cellH);
-    const right = Math.ceil((b.right - tol) / this.cellW);
-    const bottom = Math.ceil((b.bottom - tol) / this.cellH);
+    const half = 0.5 / (this.frame.ownerDocument.defaultView?.devicePixelRatio || 1);
+    const slack = (edge, cell) => half + Math.abs(edge / cell) / 60;
+    const c = Math.floor((b.left + slack(b.left, this.cellW)) / this.cellW);
+    const r = Math.floor((b.top + slack(b.top, this.cellH)) / this.cellH);
+    const right = Math.ceil((b.right - slack(b.right, this.cellW)) / this.cellW);
+    const bottom = Math.ceil((b.bottom - slack(b.bottom, this.cellH)) / this.cellH);
     return { c, r, w: Math.max(0, right - c), h: Math.max(0, bottom - r) };
   }
   // --- Events for the program (PROTOCOL §8) --------------------------------
@@ -3318,6 +3322,9 @@ var HottyAddon = class {
   css = "";
   policy;
   metrics = { cellW: 0, cellH: 0, key: "" };
+  /** The cell (CSS px) and font the program last heard of, or saw at the
+   * start: a `resize` is owed when both have changed since (SPEC §5.3). */
+  told = { cellW: 0, cellH: 0, font: "" };
   resizeTimer = null;
   /** A surface's key is being forwarded to the terminal (`key`), and the
    * terminal's own focus is held off meanwhile. A program in the page may
@@ -3972,23 +3979,40 @@ var HottyAddon = class {
     const o = this.term.options;
     const key = `${cellW}x${cellH}|${o.fontFamily}|${o.fontSize}|${JSON.stringify(o.theme ?? {})}`;
     if (key === this.metrics.key) return;
-    const sizeChanged = this.metrics.cellW !== 0 && (cellW !== this.metrics.cellW || cellH !== this.metrics.cellH);
+    const first = this.metrics.cellW === 0;
     this.metrics = { cellW, cellH, key };
+    if (first) this.told = { cellW, cellH, font: this.font() };
+    else this.settle();
     if (this.surfaces.size === 0) return;
     const css = this.hostCss();
     const scheme = this.scheme();
     for (const s of this.surfaces.values()) s.setHostCss(css, scheme);
     this.reposition();
-    if (sizeChanged) {
-      if (this.resizeTimer) clearTimeout(this.resizeTimer);
-      this.resizeTimer = setTimeout(() => {
-        for (const p of this.placements.values()) {
-          const s = p.surface;
-          if (s.detached) continue;
-          this.host().event(s.name, "resize", "", { w: Math.round(s.cols * cellW), h: s.rows * cellH });
-        }
-      }, 100);
-    }
+  }
+  font() {
+    return `${this.term.options.fontFamily}|${this.term.options.fontSize}`;
+  }
+  /** Once the cell and font settle: a new font that changed the cell is
+   * re-rendered with no program involvement, so the program hears its new
+   * size (SPEC §5.3, §9). A browser's zoom moves the cell only by device
+   * pixel rounding and keeps the font, and is not told. xterm.js may take
+   * the font and its cell in two renders, so this waits for both. */
+  settle() {
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+    this.resizeTimer = setTimeout(() => {
+      this.resizeTimer = null;
+      const { cellW, cellH } = this.cell();
+      const font = this.font();
+      const t = this.told;
+      const owed = font !== t.font && (cellW !== t.cellW || cellH !== t.cellH);
+      this.told = { cellW, cellH, font };
+      if (!owed) return;
+      for (const p of this.placements.values()) {
+        const s = p.surface;
+        if (s.detached) continue;
+        this.host().event(s.name, "resize", "", { w: Math.round(s.cols * cellW), h: s.rows * cellH });
+      }
+    }, 100);
   }
 };
 function sequence(chain, f) {