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

package/dist/hotty-xterm.js

@@ -1384,6 +1384,9 @@ var Surface = class {
   /** The document's base URL (SPEC §7.3). */
   base = NO_BASE;
   keyboard = false;
+  /** The element the program knows has focus: the last `focus` named it,
+   * or the program's `a=focus` gave it (SPEC §10.1). */
+  told = null;
   /** Detached (SPEC §5.5): nothing in the surface reaches the program. */
   detachedState = false;
   /** A press is on something that takes no focus (SPEC §10.1): the focus
@@ -1560,6 +1563,7 @@ var Surface = class {
       this.dropDrag();
       const had = this.keyboard || this.frameFocused();
       this.keyboard = false;
+      this.told = null;
       this.focusedControl()?.blur();
       if (had) this.giveBack();
     }
@@ -1751,17 +1755,21 @@ var Surface = class {
     if (target && !el) throw new Error(target);
     this.programFocus = true;
     try {
-      this.frame.focus();
-      this.frame.contentWindow?.focus();
+      if (!this.frameFocused()) {
+        this.frame.focus();
+        this.frame.contentWindow?.focus();
+      }
       if (el) el.focus();
       else if (!this.focusedControl()) this.tabbable()[0]?.focus();
       this.keyboard = true;
+      this.told = this.focusedControl();
     } finally {
       setTimeout(() => this.programFocus = false, 0);
     }
   }
   /** `a=blur`, or the keyboard leaving: the edited control commits first. */
   blur() {
+    this.pressed = null;
     this.commit();
     if (this.keyboard) this.giveBack();
   }
@@ -1812,6 +1820,7 @@ var Surface = class {
     if (this.keyboard) {
       this.commit();
       this.keyboard = false;
+      this.told = null;
       this.emit("blur", "");
     }
     this.settle();
@@ -1839,16 +1848,24 @@ var Surface = class {
   }
   /** An element got focus: the surface takes the keyboard if the element is
    * one that takes focus, and the focus is neither the program's (no echo)
-   * nor a detached surface's. */
+   * nor a detached surface's. The program hears where the user put focus,
+   * each time it is another element than the one it knows (SPEC §10.1). */
   onFocusIn(e) {
-    if (this.programFocus || this.auxPress) return;
-    if (this.detachedState || this.pressNothing || !isElement(e.target) || !takesFocus(e.target, this.hyper)) {
+    const el = isElement(e.target) ? e.target : null;
+    if (this.programFocus) {
+      this.told = el;
+      return;
+    }
+    if (this.auxPress) return;
+    if (this.detachedState || this.pressNothing || !el || !takesFocus(el, this.hyper)) {
       this.settle();
       return;
     }
-    if (this.keyboard) return;
+    const gained = !this.keyboard;
     this.keyboard = true;
-    this.emit("focus", "");
+    if (!gained && el === this.told) return;
+    this.told = el;
+    this.emit("focus", el.closest('[id]:not([id=""])')?.id ?? "");
   }
   tabbable() {
     const all = this.doc.querySelectorAll(
@@ -2607,17 +2624,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) --------------------------------
@@ -2708,6 +2729,7 @@ var Surface = class {
       this.commit();
       if (this.keyboard) {
         this.keyboard = false;
+        this.told = null;
         this.emit("blur", "");
       }
     });
@@ -3318,6 +3340,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 +3997,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) {