add mouse ignore toggle button

Author: ylxmf2005

package-lock.json

@@ -44,7 +44,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",

package.json

@@ -37,15 +37,15 @@ export class MenuManager {
     return [
       {
         label: 'Window Mode',
-        type: 'radio',
+        type: 'radio' as const,
         checked: this.currentMode === 'window',
         click: () => {
           this.setMode('window');
         },
       },
       {
         label: 'Pet Mode',
-        type: 'radio',
+        type: 'radio' as const,
         checked: this.currentMode === 'pet',
         click: () => {
           this.setMode('pet');
@@ -60,7 +60,22 @@ export class MenuManager {
 
     const contextMenu = Menu.buildFromTemplate([
       ...this.getModeMenuItems(),
-      { type: 'separator' },
+      { type: 'separator' as const },
+      // Only show toggle mouse ignore in pet mode
+      ...(this.currentMode === 'pet'
+        ? [
+          {
+            label: 'Toggle Mouse Passthrough',
+            click: () => {
+              const windows = BrowserWindow.getAllWindows();
+              windows.forEach((window) => {
+                window.webContents.send('toggle-force-ignore-mouse');
+              });
+            },
+          },
+          { type: 'separator' as const },
+        ]
+        : []),
       {
         label: 'Show',
         click: () => {
@@ -105,7 +120,18 @@ export class MenuManager {
           event.sender.send('interrupt');
         },
       },
-      { type: 'separator' },
+      { type: 'separator' as const },
+      // Only show in pet mode
+      ...(this.currentMode === 'pet'
+        ? [
+          {
+            label: 'Toggle Mouse Passthrough',
+            click: () => {
+              event.sender.send('toggle-force-ignore-mouse');
+            },
+          },
+        ]
+        : []),
       {
         label: 'Toggle Scrolling to Resize',
         click: () => {
@@ -123,9 +149,9 @@ export class MenuManager {
           },
         ]
         : []),
-      { type: 'separator' },
+      { type: 'separator' as const },
       ...this.getModeMenuItems(),
-      { type: 'separator' },
+      { type: 'separator' as const },
       {
         label: 'Switch Character',
         visible: this.currentMode === 'pet',
@@ -136,7 +162,7 @@ export class MenuManager {
           },
         })),
       },
-      { type: 'separator' },
+      { type: 'separator' as const },
       {
         label: 'Hide',
         click: () => {

src/main/menu-manager.ts

@@ -20,6 +20,9 @@ export class WindowManager {
 
   private currentMode: 'window' | 'pet' = 'window';
 
+  // Track if mouse events are forcibly ignored
+  private forceIgnoreMouse = false;
+
   constructor() {
     ipcMain.on('renderer-ready-for-mode-change', (_event, newMode) => {
       if (newMode === 'pet') {
@@ -43,6 +46,11 @@ export class WindowManager {
         window.setFullScreen(false);
       }
     });
+
+    // Handle toggle force ignore mouse events from renderer
+    ipcMain.on('toggle-force-ignore-mouse', () => {
+      this.toggleForceIgnoreMouse();
+    });
   }
 
   createWindow(options: Electron.BrowserWindowConstructorOptions): BrowserWindow {
@@ -261,6 +269,9 @@ export class WindowManager {
   updateComponentHover(componentId: string, isHovering: boolean): void {
     if (this.currentMode === 'window') return;
 
+    // If force ignore is enabled, don't change the mouse ignore state
+    if (this.forceIgnoreMouse) return;
+
     if (isHovering) {
       this.hoveringComponents.add(componentId);
     } else {
@@ -279,4 +290,34 @@ export class WindowManager {
       }
     }
   }
+
+  // Toggle force ignore mouse events
+  toggleForceIgnoreMouse(): void {
+    this.forceIgnoreMouse = !this.forceIgnoreMouse;
+
+    // Apply the new setting immediately
+    if (this.forceIgnoreMouse) {
+      if (isMac) {
+        this.window?.setIgnoreMouseEvents(true);
+      } else {
+        this.window?.setIgnoreMouseEvents(true, { forward: true });
+      }
+    } else {
+      // Reapply normal behavior based on hovering components
+      const shouldIgnore = this.hoveringComponents.size === 0;
+      if (isMac) {
+        this.window?.setIgnoreMouseEvents(shouldIgnore);
+      } else {
+        this.window?.setIgnoreMouseEvents(shouldIgnore, { forward: true });
+      }
+    }
+
+    // Notify renderer about the change
+    this.window?.webContents.send('force-ignore-mouse-changed', this.forceIgnoreMouse);
+  }
+
+  // Get current force ignore state
+  isForceIgnoreMouse(): boolean {
+    return this.forceIgnoreMouse;
+  }
 }

src/main/window-manager.ts

@@ -5,6 +5,8 @@ declare global {
     electron: ElectronAPI
     api: {
       setIgnoreMouseEvents: (ignore: boolean) => void
+      toggleForceIgnoreMouse: () => void
+      onForceIgnoreMouseChanged: (callback: (isForced: boolean) => void) => void
       onModeChanged: (callback: (mode: 'pet' | 'window') => void) => void
       showContextMenu: (x: number, y: number) => void
       onMicToggle: (callback: () => void) => void

src/preload/index.d.ts

@@ -7,6 +7,14 @@ const api = {
   setIgnoreMouseEvents: (ignore: boolean) => {
     ipcRenderer.send('set-ignore-mouse-events', ignore);
   },
+  toggleForceIgnoreMouse: () => {
+    ipcRenderer.send('toggle-force-ignore-mouse');
+  },
+  onForceIgnoreMouseChanged: (callback: (isForced: boolean) => void) => {
+    const handler = (_event: any, isForced: boolean) => callback(isForced);
+    ipcRenderer.on('force-ignore-mouse-changed', handler);
+    return () => ipcRenderer.removeListener('force-ignore-mouse-changed', handler);
+  },
   showContextMenu: () => {
     console.log('Preload showContextMenu');
     ipcRenderer.send('show-context-menu');

src/preload/index.ts

@@ -6,13 +6,15 @@ import { useLive2DModel } from "@/hooks/canvas/use-live2d-model";
 import { useLive2DResize } from "@/hooks/canvas/use-live2d-resize";
 import { useInterrupt } from "@/hooks/utils/use-interrupt";
 import { useAudioTask } from "@/hooks/utils/use-audio-task";
+import { useForceIgnoreMouse } from "@/hooks/utils/use-force-ignore-mouse";
 
 interface Live2DProps {
   isPet: boolean;
 }
 
 export const Live2D = memo(({ isPet }: Live2DProps): JSX.Element => {
   const { modelInfo, isLoading } = useLive2DConfig();
+  const { forceIgnoreMouse } = useForceIgnoreMouse();
 
   // Register IPC handlers here as Live2D is a persistent component in the pet mode
   useIpcHandlers({ isPet });
@@ -54,7 +56,7 @@ export const Live2D = memo(({ isPet }: Live2DProps): JSX.Element => {
       style={{
         width: isPet ? "100vw" : "100%",
         height: isPet ? "100vh" : "100%",
-        pointerEvents: "auto",
+        pointerEvents: isPet && forceIgnoreMouse ? "none" : "auto",
         overflow: "hidden",
         opacity: isLoading ? 0 : 1,
         transition: "opacity 0.3s ease-in-out",
@@ -66,7 +68,7 @@ export const Live2D = memo(({ isPet }: Live2DProps): JSX.Element => {
         style={{
           width: "100%",
           height: "100%",
-          pointerEvents: "auto",
+          pointerEvents: isPet && forceIgnoreMouse ? "none" : "auto",
           display: "block",
         }}
       />

src/renderer/src/components/canvas/live2d.tsx

@@ -18,6 +18,7 @@ import { setModelSize, resetModelPosition } from "./use-live2d-resize";
 import { audioTaskQueue } from "@/utils/task-queue";
 import { AiStateEnum, useAiState } from "@/context/ai-state-context";
 import { toaster } from "@/components/ui/toaster";
+import { useForceIgnoreMouse } from "../utils/use-force-ignore-mouse";
 
 interface UseLive2DModelProps {
   isPet: boolean; // Whether the model is in pet mode
@@ -38,6 +39,7 @@ export const useLive2DModel = ({
   const loadingRef = useRef(false);
   const { setAiState, aiState } = useAiState();
   const [isModelReady, setIsModelReady] = useState(false);
+  const { forceIgnoreMouse } = useForceIgnoreMouse();
 
   // Cleanup function for Live2D model
   const cleanupModel = useCallback(() => {
@@ -196,6 +198,7 @@ export const useLive2DModel = ({
     (model: Live2DModel) => {
       if (!model) return;
 
+      // Clear all previous listeners
       model.removeAllListeners("pointerenter");
       model.removeAllListeners("pointerleave");
       model.removeAllListeners("rightdown");
@@ -204,6 +207,17 @@ export const useLive2DModel = ({
       model.removeAllListeners("pointerup");
       model.removeAllListeners("pointerupoutside");
 
+      // If force ignore mouse is enabled, disable interaction
+      if (forceIgnoreMouse && isPet) {
+        model.interactive = false;
+        model.cursor = "default";
+        return;
+      }
+
+      // Enable interactions
+      model.interactive = true;
+      model.cursor = "pointer";
+
       let dragging = false;
       let pointerX = 0;
       let pointerY = 0;
@@ -265,7 +279,7 @@ export const useLive2DModel = ({
         dragging = false;
       });
     },
-    [isPet],
+    [isPet, forceIgnoreMouse],
   );
 
   const handleTapMotion = useCallback(
@@ -331,7 +345,7 @@ export const useLive2DModel = ({
     if (modelRef.current && isModelReady) {
       setupModelInteractions(modelRef.current);
     }
-  }, [isModelReady, setupModelInteractions]); // Dependency of setupModelInteractions includes isPet already
+  }, [isModelReady, setupModelInteractions, forceIgnoreMouse]);
 
   return {
     canvasRef,

src/renderer/src/hooks/canvas/use-live2d-model.ts

@@ -0,0 +1,28 @@
+import { create } from "zustand";
+
+// Define the state store interface
+interface ForceIgnoreMouseState {
+  // Whether mouse events are forcibly ignored
+  forceIgnoreMouse: boolean;
+  // Set the force ignore mouse state
+  setForceIgnoreMouse: (forceIgnore: boolean) => void;
+}
+
+// Create a global store for force ignore mouse state
+const useForceIgnoreMouseStore = create<ForceIgnoreMouseState>((set) => ({
+  forceIgnoreMouse: false,
+  setForceIgnoreMouse: (forceIgnore) => set({ forceIgnoreMouse: forceIgnore }),
+}));
+
+/**
+ * Hook to access and manage force ignore mouse state
+ * This is used to enable/disable mouse interaction with the model in pet mode
+ */
+export function useForceIgnoreMouse() {
+  const { forceIgnoreMouse, setForceIgnoreMouse } = useForceIgnoreMouseStore();
+
+  return {
+    forceIgnoreMouse,
+    setForceIgnoreMouse,
+  };
+}