diff --git a/src/App.svelte b/src/App.svelte index c33edb8..1e90889 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -184,24 +184,29 @@ return () => window.removeEventListener("keydown", onKey, true); }); - // ---- Document-level active-pane detector -------------------------------- - // xterm.js calls `stopPropagation` on pointerdown inside terminals, so a - // per-leaf `onpointerdown` never fires for body clicks. A document-level - // CAPTURE-phase listener fires before xterm.js can intercept, then finds - // the nearest `data-leaf-id` ancestor to know which pane was clicked. - // Toolbar buttons also pass through (they're outside the xterm container, - // their own onclick still fires in the bubble phase afterwards). + // ---- Active-pane detector via active-element polling -------------------- + // Tried (and failed in WebView2): per-leaf onpointerdown (xterm blocks + // propagation), document-capture pointerdown (Webview2 only delivers the + // first one then nothing), document-capture focusin (also silently fails), + // xterm.js term.onFocus (no such API), textarea focus listener (race). + // + // Polling document.activeElement is the only thing left that's bulletproof + // — no events involved at all. 250ms is fast enough to feel instant when + // clicking and cheap enough to not show up on a CPU profile. $effect(() => { - function onAnyPointerDown(e: PointerEvent) { - const t = e.target as Element | null; - if (!t) return; - const leafEl = t.closest("[data-leaf-id]"); + let lastLeafId: string | null = null; + const interval = window.setInterval(() => { + const el = document.activeElement; + if (!el) return; + const leafEl = el.closest("[data-leaf-id]"); if (!leafEl) return; const id = leafEl.getAttribute("data-leaf-id"); - if (id) orch.setActive(id); - } - document.addEventListener("pointerdown", onAnyPointerDown, true); - return () => document.removeEventListener("pointerdown", onAnyPointerDown, true); + if (id && id !== lastLeafId) { + lastLeafId = id; + orch.setActive(id); + } + }, 250); + return () => clearInterval(interval); }); // ---- preset layouts ------------------------------------------------------ diff --git a/src/components/XtermPane.svelte b/src/components/XtermPane.svelte index ccccd09..b50ee6a 100644 --- a/src/components/XtermPane.svelte +++ b/src/components/XtermPane.svelte @@ -20,6 +20,7 @@ onSpawn = undefined, onInput = undefined, onDataReceived = undefined, + onFocus = undefined, focusTrigger = 0, }: { distro?: string; @@ -31,6 +32,8 @@ onInput?: (dataB64: string) => void; /** Fired whenever output arrives from the PTY. Used for idle detection. */ onDataReceived?: () => void; + /** Fired when xterm's textarea gains focus (i.e., user clicked here). */ + onFocus?: () => void; /** Increment to refocus the terminal programmatically (palette etc.). */ focusTrigger?: number; } = $props(); @@ -112,6 +115,20 @@ onInput?.(b64); }); + // xterm.js's own focus event — fires when the hidden textarea gets focus + // (i.e., user clicked anywhere in the terminal). Most reliable signal + // for "user wants this pane active" — no DOM event traversal involved. + term.onSelectionChange(() => {}); // ensure the addon system is initialized; noop + if (typeof (term as unknown as { onFocus?: unknown }).onFocus === "function") { + (term as unknown as { onFocus: (cb: () => void) => void }).onFocus(() => { + onFocus?.(); + }); + } else { + // Fallback: listen on the textarea element directly. + const ta = containerEl.querySelector(".xterm-helper-textarea"); + if (ta) ta.addEventListener("focus", () => onFocus?.(), true); + } + // Re-fit on container resize; forward new size to the PTY. ro = new ResizeObserver(() => { try { diff --git a/src/lib/layout/LeafPane.svelte b/src/lib/layout/LeafPane.svelte index d190444..645a095 100644 --- a/src/lib/layout/LeafPane.svelte +++ b/src/lib/layout/LeafPane.svelte @@ -214,6 +214,7 @@ }} onSpawn={onPaneSpawned} onInput={onTerminalInput} + onFocus={() => orch.setActive(leaf.id)} {onDataReceived} {focusTrigger} />