@cplieger/web-terminal-ui 3.5.0 → 4.0.0

package/src/features/context-menu.ts

@@ -38,17 +38,15 @@
 
 import type { TerminalFeature } from "../kernel/types.js";
 import type { ClipboardApi } from "./clipboard.js";
+import { placeMenuAt } from "./menu-position.js";
 
 // Slightly longer than the browser's ~500ms native long-press so a native word
 // selection (which we defer to) has registered — and fired selectionchange —
 // before this fires.
 const LONG_PRESS_MS = 550;
 const LONG_PRESS_MOVE_PX = 10;
-const EDGE_MARGIN = 8;
-// When the menu can't fit below the anchor (a long-press near the bottom edge or
-// above the keyboard), it opens above the point. This gap lifts it clear of the
-// fingertip so the touch does not cover the menu items.
-const MENU_GAP = 16;
+// Viewport clamping + the flip-above-the-fingertip gap live in the shared
+// point-anchored positioner (menu-position.ts), shared with the tab menu.
 // After a touch long-press opens the menu, swallow the trailing click/tap that
 // the same gesture emits on finger-release for this window, so the menu does not
 // immediately dismiss itself (the classic contextmenu-then-touchend race).
@@ -209,35 +207,10 @@ export function contextMenu(opts: ContextMenuOptions = {}): TerminalFeature {
           return; // nothing to offer
         }
         // Make visible (so it has measurable size), then place it within the
-        // VISIBLE viewport. position:fixed => x/y are viewport coordinates; the
-        // visual viewport (when present) is the area above the on-screen
-        // keyboard, so clamping to it keeps the menu off the keyboard too.
+        // visible viewport via the shared point-anchored positioner (clamp to
+        // the visual viewport; flip above the finger near the bottom edge).
         menu.classList.add("visible");
-        const vv = window.visualViewport;
-        const viewLeft = vv ? vv.offsetLeft : 0;
-        const viewTop = vv ? vv.offsetTop : 0;
-        const viewWidth = vv ? vv.width : window.innerWidth;
-        const viewHeight = vv ? vv.height : window.innerHeight;
-        const menuW = menu.offsetWidth;
-        const menuH = menu.offsetHeight;
-        const left = Math.max(
-          viewLeft + EDGE_MARGIN,
-          Math.min(x, viewLeft + viewWidth - menuW - EDGE_MARGIN),
-        );
-        // Open just below the point; but if that would overflow the visible
-        // bottom (a long-press near the bottom edge, where the user naturally
-        // taps), flip above the finger so the menu is neither clipped off-screen
-        // nor hidden under the fingertip.
-        let top = y;
-        if (y + menuH + EDGE_MARGIN > viewTop + viewHeight) {
-          top = y - menuH - MENU_GAP;
-        }
-        top = Math.max(
-          viewTop + EDGE_MARGIN,
-          Math.min(top, viewTop + viewHeight - menuH - EDGE_MARGIN),
-        );
-        menu.style.left = `${String(left)}px`;
-        menu.style.top = `${String(top)}px`;
+        placeMenuAt(menu, x, y);
         // A touch long-press is immediately followed by a synthetic click on
         // release; swallow it so the menu stays open (see SWALLOW_MS).
         if (touch) {

package/src/features/menu-position.ts

@@ -0,0 +1,50 @@
+// menu-position.ts — shared point-anchored placement for the fixed-position
+// menus (the terminal context menu and the tab-strip menu), which previously
+// carried two hand-synced copies of this exact clamp/flip math.
+//
+// position:fixed means x/y are viewport coordinates; the VISUAL viewport
+// (when present) is the area above the on-screen keyboard, so clamping to it
+// keeps a menu off the keyboard too.
+
+/** Clamp margin from the visible viewport edges (px). */
+const EDGE_MARGIN = 8;
+
+/** Gap between the pointer and a flipped-above menu (px), so the menu is not
+ *  hidden under the fingertip that long-pressed near the bottom edge. */
+const FLIP_GAP = 16;
+
+/** Place an already-visible `menu` at viewport point (x, y): open just below
+ *  the point, flip above it when that would overflow the visible bottom, and
+ *  clamp into the visual viewport on both axes. The menu is absolute-positioned
+ *  against the terminal root (.wt-root), so the viewport-space result is
+ *  rebased onto its offsetParent's box — placement is identical whether the
+ *  root fills the viewport (wt-viewport) or an embedder's panel
+ *  (wt-container). The menu must be measurable (rendered, not display:none)
+ *  when called. */
+export function placeMenuAt(menu: HTMLElement, x: number, y: number): void {
+  const vv = window.visualViewport;
+  const viewLeft = vv ? vv.offsetLeft : 0;
+  const viewTop = vv ? vv.offsetTop : 0;
+  const viewWidth = vv ? vv.width : window.innerWidth;
+  const viewHeight = vv ? vv.height : window.innerHeight;
+  const menuW = menu.offsetWidth;
+  const menuH = menu.offsetHeight;
+  const left = Math.max(
+    viewLeft + EDGE_MARGIN,
+    Math.min(x, viewLeft + viewWidth - menuW - EDGE_MARGIN),
+  );
+  let top = y;
+  if (y + menuH + EDGE_MARGIN > viewTop + viewHeight) {
+    top = y - menuH - FLIP_GAP;
+  }
+  top = Math.max(viewTop + EDGE_MARGIN, Math.min(top, viewTop + viewHeight - menuH - EDGE_MARGIN));
+  // Rebase from viewport coordinates onto the positioned ancestor's box: left/
+  // top on an absolute element are offsets from the offsetParent's padding box,
+  // which for all terminal chrome is .wt-root (getBoundingClientRect is its
+  // viewport-space position; the root has no border, so border/padding offsets
+  // do not enter). A missing offsetParent (display:none ancestor — the menu is
+  // visible when called, so not in practice) falls back to (0,0) viewport base.
+  const base = menu.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
+  menu.style.left = `${String(Math.round(left - base.left))}px`;
+  menu.style.top = `${String(Math.round(top - base.top))}px`;
+}