Merge pull request #90 from YUCLing/fix/menu-click-through

菜单打开后鼠标被拦截

Author: YUCLing

gui/src/lib/inputRegion.ts

@@ -7,7 +7,7 @@ import { getBridge } from "./bridge";
 const api = getBridge<InputRegionContract>("inputRegion");
 const inputRegionElements: Element[] = [];
 
-function refreshInputRegion() {
+export function refreshInputRegion() {
   if (api.platform === "linux") {
     api.setInputRegions(
       inputRegionElements.map((v) => {
@@ -58,3 +58,9 @@ export const inputRegionAttachment: Attachment = (element) => {
     removeInputRegion(element);
   };
 };
+
+api.events.shown(() => {
+  // Ensure it's set, even if it was populated before window surface is
+  // actually shown.
+  refreshInputRegion();
+});

gui/src/routes/(transparent)/menu/+page.svelte

@@ -7,6 +7,7 @@
   import MenuPanel from "./MenuPanel.svelte";
   import { getBridge } from "$lib/bridge";
   import type { MenuContract } from "$bridge/contracts/menu-api";
+  import { inputRegionAttachment } from "$lib/inputRegion";
 
   const api = getBridge<MenuContract>("menu");
 
@@ -235,6 +236,7 @@
         style="left: {cursorX}px; top: {menuTop}px; visibility: {menuReady
           ? 'visible'
           : 'hidden'};"
+        {@attach inputRegionAttachment}
       />
 
       {#if submenuItems}
@@ -252,6 +254,7 @@
           showSubmenuArrows={false}
           bind:el={submenuEl}
           style="left: {submenuX}px; top: {submenuY}px;"
+          {@attach inputRegionAttachment}
         />
       {/if}
     </div>

gui/src/routes/(transparent)/menu/MenuPanel.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
   import type { MenuItem, MenuItemBtn, LayoutNode } from "./types";
   import { getCachedTemplate } from "./template";
   import IconButton from "$lib/components/IconButton.svelte";
@@ -13,6 +15,7 @@
     onitemhover,
     onitemleave,
     onbtnclick,
+    ...props
   }: {
     items: MenuItem[];
     hoveredIndex: number;
@@ -23,7 +26,7 @@
     onitemhover?: (index: number, item: MenuItem, event: MouseEvent) => void;
     onitemleave?: (index: number) => void;
     onbtnclick?: (btn: MenuItemBtn) => void;
-  } = $props();
+  } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
 {#snippet layoutNode(node: LayoutNode, btns: MenuItemBtn[])}
@@ -95,6 +98,7 @@
   class="absolute max-w-80 min-w-58 overflow-hidden rounded-lg py-1.5 shadow-[0_4px_16px_rgba(0,0,0,0.15),0_1px_4px_rgba(0,0,0,0.1)] select-none"
   style="background-color: var(--menu-bg); {style ?? ''}"
   bind:this={el}
+  {...props}
 >
   {#each items as item, i (i)}
     {#if item.separator}

src/bridge/common/inputRegion.ts

@@ -22,4 +22,8 @@ export function registerInputRegionHandlers(wnd: Electron.BrowserWindow) {
       }
     },
   });
+
+  wnd.on("show", () => {
+    wnd.webContents.send("inputRegion.shown");
+  });
 }

src/bridge/contracts/input-region-api.ts

@@ -5,4 +5,8 @@ export type { InputRegion };
 export interface InputRegionContract {
   platform: NodeJS.Platform;
   setInputRegions(regions: InputRegion[]): Promise<void>;
+
+  events: {
+    shown(callback: () => void): void;
+  };
 }

src/bridge/contracts/menu-api.ts

@@ -16,15 +16,6 @@ export interface MenuContract {
   submenu: boolean;
 
   events: {
-    show(
-      callback: (
-        items: unknown[],
-        templates: Record<string, ElementTemplate>,
-        cursorX: number,
-        cursorY: number,
-        colors: MenuSkin
-      ) => void
-    ): void;
     update(callback: (items: unknown[]) => void): void;
   };
 

src/main/menu.ts

@@ -24,6 +24,7 @@ import { registerIpcHandlers } from "../bridge/register";
 import type { MenuContract } from "../bridge/contracts/menu-api";
 import { parseBtnUrl, parseElementTemplate } from "./skin/dui";
 import type { ElementTemplate } from "./skin/dui";
+import { registerInputRegionHandlers } from "../bridge/common/inputRegion";
 
 import type { AppMenuItem } from "$sharedTypes/menu";
 
@@ -217,6 +218,7 @@ export default class AppMenu extends EventTarget {
       openSubmenu: async () => {},
       closeSubmenu: async () => {},
     });
+    registerInputRegionHandlers(wnd);
   }
 
   // --- Non-Wayland: transparent popup BrowserWindow ---

src/windows/menu.ts

@@ -4,3 +4,6 @@ exposeApi("menu", {
   wayland: process.argv.includes("--wayland"),
   submenu: process.argv.includes("--submenu"),
 });
+exposeApi("inputRegion", {
+  platform: process.platform,
+});