dsh-sidebar-row-menu 1.9.2 → 1.9.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 1.9.3 — 2026-11-06
+
+### 中文摘要
+
+- **二级菜单贴着屏幕右边缘时不再飞出去。** 之前子菜单按估算宽度（220）算位置，
+  贴右边缘向左翻转时会和菜单之间空出一大截、还竖直跑到触发行上方。现在子菜单
+  先测真实尺寸再定位：翻转后横向留 6px 间距、纵向和触发行齐平，箭头方向跟着翻转；
+  底边 / 顶边超出屏幕时会被夹回视口内。主菜单定位也改成量真实宽高（原来是按入场
+  动画中途的偏小尺寸夹取，贴右边缘会溢出几个像素），窗口 resize 或菜单行数变化会
+  重新定位。
+
+### Changed
+
+- **Submenus no longer fly off when opened against the right screen edge.** The
+  previous code estimated the submenu width (220px), so a left-flip near the edge left
+  a large gap from the menu and landed above the trigger row. The submenu is now
+  measured and then positioned: 6px horizontal gap when flipped, vertically aligned
+  with the trigger row, and its chevron mirrors to match. Panels are clamped back into
+  the viewport at the top and bottom edges. Menu surfaces also measure their real size
+  (the old code measured mid-animation, which let them overflow by a few pixels at the
+  right edge), and reposition on window resize or row-count changes.
+
 ## 1.9.2 — 2026-11-06
 
 ### 中文摘要

package/lib/client.js

@@ -1296,18 +1296,135 @@ window.__ModuleLoader__.load({
 
     /* ---------------------------------------------------------- 打开方式子菜单 */
 
-    /** 面板贴边时的位置：右侧放不下就翻到左边，并在视口内夹取。 */
-    function submenuGeometry(anchor, size) {
+    /** 视口可用尺寸：滚动条会占掉 innerWidth/innerHeight 的一部分，贴边要贴着可视区算。 */
+    function viewportBounds() {
+      const root = typeof document === 'undefined' ? null : document.documentElement;
+      const width = root !== null && root !== undefined && root.clientWidth > 0 ? root.clientWidth : window.innerWidth;
+      const height = root !== null && root !== undefined && root.clientHeight > 0 ? root.clientHeight : window.innerHeight;
+      return { width: Number(width) || 0, height: Number(height) || 0 };
+    }
+
+    /**
+     * 元素真实占位尺寸。必须用 offsetWidth/offsetHeight：面板入场动画带 transform 缩放，
+     * 动画期间 getBoundingClientRect 量出来偏小（实测 181 vs 198），按它夹取会溢出视口。
+     */
+    function layoutSize(node) {
+      if (node === null || node === undefined) return null;
+      const width = Number(node.offsetWidth) || 0;
+      const height = Number(node.offsetHeight) || 0;
+      if (width > 0 && height > 0) return { width, height };
+      if (typeof node.getBoundingClientRect !== 'function') return null;
+      const rect = node.getBoundingClientRect();
+      if (!(rect.width > 0) || !(rect.height > 0)) return null;
+      return { width: rect.width, height: rect.height };
+    }
+
+    /** 菜单面板定位：按布局尺寸夹进视口；尺寸后续变化（异步条目、字体）时再夹一次。 */
+    function useMenuPos(hostRef, x, y, deps) {
+      const [pos, setPos] = useState(null);
+      const place = () => {
+        const host = hostRef.current;
+        if (host === null || host === undefined) return;
+        const size = layoutSize(host);
+        if (size === null) return;
+        const view = viewportBounds();
+        const margin = 8;
+        const left = Math.max(margin, Math.min(x, view.width - size.width - margin));
+        const top = Math.max(margin, Math.min(y, view.height - size.height - margin));
+        setPos((prev) => (prev !== null && prev.left === left && prev.top === top ? prev : { left, top }));
+      };
+      useLayoutEffect(place, [x, y, ...deps]);
+      useEffect(() => {
+        if (typeof ResizeObserver !== 'function') return undefined;
+        const host = hostRef.current;
+        if (host === null || host === undefined) return undefined;
+        const observer = new ResizeObserver(place);
+        observer.observe(host);
+        return () => observer.disconnect();
+      }, [x, y]);
+      return pos;
+    }
+
+    /**
+     * 二级菜单位置：横向贴住菜单面板外沿，纵向和触发它的那一行对齐；
+     * 右侧放不下就翻到左边，仍然紧贴面板，再整体夹进视口。
+     */
+    function submenuGeometry(anchor, size, row = anchor) {
       const margin = 12;
       const gap = 6;
+      const view = viewportBounds();
       const width = Math.max(160, size?.width ?? 180);
       const height = Math.max(0, size?.height ?? 0);
+      const rightRoom = view.width - margin - (anchor.right + gap);
+      const leftRoom = anchor.left - gap - margin;
+      let side = 'right';
       let left = anchor.right + gap;
-      if (left + width > window.innerWidth - margin) left = anchor.left - width - gap;
-      left = Math.max(margin, Math.min(left, window.innerWidth - width - margin));
-      let top = anchor.bottom - height - 4;
-      top = Math.max(margin, Math.min(top, window.innerHeight - height - margin));
-      return { left, top };
+      if (rightRoom < width && leftRoom > rightRoom) {
+        side = 'left';
+        left = anchor.left - width - gap;
+      }
+      left = Math.max(margin, Math.min(left, view.width - width - margin));
+      let top = row.top;
+      top = Math.max(margin, Math.min(top, view.height - height - margin));
+      return { left, top, side };
+    }
+
+    /**
+     * 二级菜单定位：面板先以隐藏状态挂载，量到真实尺寸后再贴边，
+     * 因此顶到屏幕右侧时会精确翻到另一侧并紧贴菜单，不再按估算宽度留出空隙。
+     */
+    function useSubmenuPos(open, hostRef, deps) {
+      const [box, setBox] = useState(null);
+      const place = () => {
+        const host = hostRef.current;
+        if (host === null || host === undefined) return;
+        const panel = typeof host.querySelector === 'function' ? host.querySelector('.dsrm-submenu') : null;
+        const size = layoutSize(panel);
+        if (size === null) return;
+        const row = host.getBoundingClientRect();
+        // 横向以菜单面板外沿为锚：自绘菜单是 .dsrm-menu，会话 / 工作区行注入到宿主菜单里，
+        // 那时要找宿主的 [role="menu"] 面板（行本身比面板内缩 4px，贴它会偏进面板里）。
+        const menu = typeof host.closest === 'function'
+          ? (host.closest('.dsrm-menu') ?? host.closest('[role="menu"]'))
+          : null;
+        const anchor = menu !== null && menu !== undefined && menu !== host ? menu.getBoundingClientRect() : row;
+        const next = submenuGeometry(anchor, size, row);
+        setBox((prev) => (prev !== null
+          && prev.left === next.left
+          && prev.top === next.top
+          && prev.side === next.side ? prev : next));
+      };
+      useLayoutEffect(() => {
+        if (!open) {
+          setBox(null);
+          return;
+        }
+        place();
+      }, [open, ...deps]);
+      useEffect(() => {
+        if (!open) return undefined;
+        window.addEventListener('resize', place);
+        const host = hostRef.current;
+        const panel = host !== null && host !== undefined && typeof host.querySelector === 'function'
+          ? host.querySelector('.dsrm-submenu')
+          : null;
+        const observer = typeof ResizeObserver === 'function' && panel !== null && panel !== undefined
+          ? new ResizeObserver(place)
+          : null;
+        if (observer !== null) observer.observe(panel);
+        return () => {
+          window.removeEventListener('resize', place);
+          if (observer !== null) observer.disconnect();
+        };
+      }, [open, ...deps]);
+      return box;
+    }
+
+    /** 面板翻到左侧时箭头跟着翻转，指向菜单所在方向。 */
+    function chevronClass(box) {
+      return box?.side === 'left'
+        ? 'dsrm-submenu-chevron dsrm-submenu-chevron-flipped'
+        : 'dsrm-submenu-chevron';
     }
 
     /** slot 注入的 useMenuOpenState 在不同版本里可能不是数组，宽松取关闭函数。 */
@@ -1326,7 +1443,6 @@ window.__ModuleLoader__.load({
       const apps = useApps();
       usePinned();
       const [open, setOpen] = useState(false);
-      const [box, setBox] = useState(null);
       const hostRef = useRef(null);
       const closeTimer = useRef(0);
 
@@ -1352,17 +1468,8 @@ window.__ModuleLoader__.load({
         };
       }, [open]);
 
-      // MenuSurface 是函数组件，不保证转发 ref，因此按条目数估算面板高度；
-      // 列表本身有 max-height 和滚动，估算只影响贴底时的翻转位置。
-      useEffect(() => {
-        if (!open) return;
-        const host = hostRef.current;
-        if (host === null) return;
-        const pinnedIds = new Set(effectivePinned(apps.ids));
-        const count = apps.ids.filter((id) => childOn(id) && !pinnedIds.has(id)).length;
-        const height = Math.min(380, Math.max(40, count * 34 + 8));
-        setBox(submenuGeometry(host.getBoundingClientRect(), { width: 220, height }));
-      }, [open, apps.status, apps.ids]);
+      // 面板先隐藏挂载再量真实尺寸，所以这里不再按条目数估算宽高。
+      const box = useSubmenuPos(open, hostRef, [apps.status, apps.ids]);
 
       // 会话行菜单的 pointerover/out 在 document 捕获阶段被「移出关闭」守卫截断，
       // React 的 onPointerEnter 收不到。把悬浮展开挂到 window 捕获阶段，抢在守卫前。
@@ -1388,12 +1495,6 @@ window.__ModuleLoader__.load({
 
       const openNow = () => {
         window.clearTimeout(closeTimer.current);
-        if (!open && hostRef.current !== null) {
-          const pinnedIds = new Set(effectivePinned(apps.ids));
-          const count = apps.ids.filter((id) => childOn(id) && !pinnedIds.has(id)).length;
-          const height = Math.min(380, Math.max(40, count * 34 + 8));
-          setBox(submenuGeometry(hostRef.current.getBoundingClientRect(), { width: 220, height }));
-        }
         setOpen(true);
         ensureApps();
       };
@@ -1459,7 +1560,7 @@ window.__ModuleLoader__.load({
         },
           jsx(IconRightUpOutlineRegular, { size: 14 }),
           h('span', { className: 'dsrm-submenu-label' }, t('openWith')),
-          jsx(IconChevronRightOutlineRegular, { size: 12, className: 'dsrm-submenu-chevron' }),
+          jsx(IconChevronRightOutlineRegular, { size: 12, className: chevronClass(box) }),
         ),
         open ? h(MenuSurface, {
           role: 'group',
@@ -1808,7 +1909,7 @@ window.__ModuleLoader__.load({
       usePinned();
       useChildren();
       const hostRef = useRef(null);
-      const [pos, setPos] = useState(null);
+      const pos = useMenuPos(hostRef, x, y, [apps.status]);
 
       const ellipsisMode = mode === 'ellipsis';
       /** 右键菜单永远显示；「…」菜单只在对应开关打开时显示（内置项除外）。 */
@@ -1836,16 +1937,7 @@ window.__ModuleLoader__.load({
         };
       }, [onClose]);
 
-      // 置顶应用是异步取到的，行数会变；渲染后量一次面板高度再夹进视口。
-      useLayoutEffect(() => {
-        const host = hostRef.current;
-        if (host === null) return;
-        const rect = host.getBoundingClientRect();
-        const margin = 8;
-        const left = Math.max(margin, Math.min(x, window.innerWidth - rect.width - margin));
-        const top = Math.max(margin, Math.min(y, window.innerHeight - rect.height - margin));
-        setPos((prev) => (prev !== null && prev.left === left && prev.top === top ? prev : { left, top }));
-      }, [x, y, apps.status]);
+      // 置顶应用是异步取到的，行数会变；尺寸变化由 useMenuPos 里的 ResizeObserver 兜住。
 
       const group = props.group ?? {};
       const workspaceId = typeof group.workspaceId === 'string' ? group.workspaceId : '';
@@ -2357,7 +2449,6 @@ window.__ModuleLoader__.load({
       useChildren();
       usePinned();
       const [open, setOpen] = useState(false);
-      const [box, setBox] = useState(null);
       const hostRef = useRef(null);
       const closeTimer = useRef(0);
 
@@ -2379,27 +2470,13 @@ window.__ModuleLoader__.load({
         };
       }, [open]);
 
-      // MenuSurface 不保证转发 ref，按条目数估算高度即可（列表本身会滚动）。
-      useEffect(() => {
-        if (!open) return;
-        const host = hostRef.current;
-        if (host === null) return;
-        const pinnedIds = new Set(effectivePinned(apps.ids).filter((id) => childOn(id)));
-        const count = apps.ids.filter((id) => childOn(id) && !pinnedIds.has(id)).length;
-        const height = Math.min(380, Math.max(40, count * 34 + 8));
-        setBox(submenuGeometry(host.getBoundingClientRect(), { width: 220, height }));
-      }, [open, apps.status, apps.ids]);
+      // 面板先隐藏挂载再量真实尺寸，位置按真实宽高算。
+      const box = useSubmenuPos(open, hostRef, [apps.status, apps.ids]);
 
       useEffect(() => () => window.clearTimeout(closeTimer.current), []);
 
       const openNow = () => {
         window.clearTimeout(closeTimer.current);
-        if (!open && hostRef.current !== null) {
-          const pinnedIds = new Set(effectivePinned(apps.ids).filter((id) => childOn(id)));
-          const count = apps.ids.filter((id) => childOn(id) && !pinnedIds.has(id)).length;
-          const height = Math.min(380, Math.max(40, count * 34 + 8));
-          setBox(submenuGeometry(hostRef.current.getBoundingClientRect(), { width: 220, height }));
-        }
         setOpen(true);
         ensureApps();
       };
@@ -2458,7 +2535,7 @@ window.__ModuleLoader__.load({
             icon: jsx(IconRightUpOutlineRegular, { size: 14 }),
             children: h('span', { className: 'dsrm-host-label' },
               h('span', { className: 'dsrm-host-label-text' }, t('openWith')),
-              jsx(IconChevronRightOutlineRegular, { size: 12, className: 'dsrm-submenu-chevron' }),
+              jsx(IconChevronRightOutlineRegular, { size: 12, className: chevronClass(box) }),
             ),
           }),
           open ? h(MenuSurface, {
@@ -2506,7 +2583,6 @@ window.__ModuleLoader__.load({
      */
     function BlankMoreRows({ label, icon, controller, separatorBefore, onClose, children }) {
       const [open, setOpen] = useState(false);
-      const [box, setBox] = useState(null);
       const hostRef = useRef(null);
       const closeTimer = useRef(0);
       const entries = orderMoreItems(controller.items);
@@ -2529,22 +2605,13 @@ window.__ModuleLoader__.load({
         };
       }, [open]);
 
-      useEffect(() => {
-        if (!open) return;
-        const host = hostRef.current;
-        if (host === null) return;
-        const height = Math.min(320, Math.max(40, entries.length * 34 + 8));
-        setBox(submenuGeometry(host.getBoundingClientRect(), { width: 220, height }));
-      }, [open, controller, entries.length]);
+      // 面板先隐藏挂载再量真实尺寸，位置按真实宽高算。
+      const box = useSubmenuPos(open, hostRef, [entries.length]);
 
       useEffect(() => () => window.clearTimeout(closeTimer.current), []);
 
       const openNow = () => {
         window.clearTimeout(closeTimer.current);
-        if (!open && hostRef.current !== null) {
-          const height = Math.min(320, Math.max(40, entries.length * 34 + 8));
-          setBox(submenuGeometry(hostRef.current.getBoundingClientRect(), { width: 220, height }));
-        }
         setOpen(true);
       };
       const closeSoon = () => {
@@ -2578,7 +2645,7 @@ window.__ModuleLoader__.load({
             icon: headerIconNode(icon),
             children: h('span', { className: 'dsrm-host-label' },
               h('span', { className: 'dsrm-host-label-text' }, children ?? label),
-              jsx(IconChevronRightOutlineRegular, { size: 12, className: 'dsrm-submenu-chevron' }),
+              jsx(IconChevronRightOutlineRegular, { size: 12, className: chevronClass(box) }),
             ),
           }),
           open ? h(MenuSurface, {
@@ -2610,7 +2677,7 @@ window.__ModuleLoader__.load({
      */
     function HeaderToolbarMenu({ x, y, items, t, sessionId, onClose }) {
       const hostRef = useRef(null);
-      const [pos, setPos] = useState(null);
+      const pos = useMenuPos(hostRef, x, y, []);
       const itemsConfig = useItems();
       const blankMenu = useBlankMenu();
       const apps = useApps();
@@ -2634,15 +2701,7 @@ window.__ModuleLoader__.load({
         };
       }, [onClose]);
 
-      useLayoutEffect(() => {
-        const host = hostRef.current;
-        if (host === null) return;
-        const rect = host.getBoundingClientRect();
-        const margin = 8;
-        const left = Math.max(margin, Math.min(x, window.innerWidth - rect.width - margin));
-        const top = Math.max(margin, Math.min(y, window.innerHeight - rect.height - margin));
-        setPos((prev) => (prev !== null && prev.left === left && prev.top === top ? prev : { left, top }));
-      }, [x, y, items]);
+      // 位置由 useMenuPos 统一夹取：菜单行数随工具条内容变化，尺寸变了再夹一次。
 
       const cwd = typeof sessionId === 'string' && sessionId !== '' ? sessionCwd(rootCtx, sessionId) : '';
       const enabledApps = apps.ids.filter((id) => childOn(id));
@@ -3695,6 +3754,7 @@ window.__ModuleLoader__.load({
 .dsrm-submenu-trigger:hover:not(:disabled),.dsrm-submenu-trigger:focus-visible{background:var(--dsw-alias-interactive-bg-hover);outline:none}
 .dsrm-submenu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dsrm-submenu-chevron{color:var(--dsw-alias-label-caption)}
+.dsrm-submenu-chevron-flipped{transform:scaleX(-1)}
 .dsrm-host-label{display:flex;align-items:center;gap:6px;width:100%}
 .dsrm-host-label-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .dsrm-submenu{position:fixed;z-index:1101;min-width:180px;max-width:300px;max-height:min(380px,64vh);overflow:auto;padding:4px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidebar-row-menu",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "type": "module",
   "description": "Adds open-with and cleanup entries to the DSH sidebar context menus (interleaved on 0.2.2+, self-drawn workspace menu on 0.2.1), plus a conversation-body right-click menu that mirrors the session header toolbar with in-menu open-with and more-actions submenus.",
   "keywords": [