From 597c7c4edb0f768d1ff79afb46dd439ee626ef93 Mon Sep 17 00:00:00 2001
From: eythaann <eythan.cvt@gmail.com>
Date: Fri, 30 Aug 2024 17:28:32 -0500
Subject: [PATCH] fix(#66): toolbar hitbox not handling multimonitors

---
 changelog.md               |  6 +++-
 src/apps/toolbar/events.ts | 57 +++++++++++++++++++++++++-------------
 src/apps/toolbar/index.tsx |  2 +-
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/changelog.md b/changelog.md
index 00aababa..535104ad 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,10 @@
 # Changelog
 
-## [Unreleased]
+## [Unreleased]
+### fix
+- app crashing if uwp package has missing path.
+- app no working fine on multiple monitors.
+
 ## [1.10.0]
 ### features
 - add volume changed popup.
diff --git a/src/apps/toolbar/events.ts b/src/apps/toolbar/events.ts
index c77f6b11..ffce9a9f 100644
--- a/src/apps/toolbar/events.ts
+++ b/src/apps/toolbar/events.ts
@@ -5,40 +5,57 @@ import { CallbacksManager } from './modules/shared/utils/app';
 export const ExtraCallbacksOnBlur = new CallbacksManager();
 export const ExtraCallbacksOnFocus = new CallbacksManager();
 
-export function registerDocumentEvents() {
+export async function registerDocumentEvents() {
   let appFocused = true;
   const webview = getCurrentWebviewWindow();
 
-  function onAppBlur() {
-    appFocused = false;
-    webview.setIgnoreCursorEvents(true);
-    ExtraCallbacksOnBlur.execute();
-  }
-
-  function onAppFocus() {
-    appFocused = true;
-    webview.setIgnoreCursorEvents(false);
-    ExtraCallbacksOnFocus.execute();
-  }
-
   webview.onFocusChanged((event) => {
-    if (event.payload) {
-      onAppFocus();
-    } else {
-      onAppBlur();
+    appFocused = event.payload;
+    webview.setIgnoreCursorEvents(!appFocused);
+    if (appFocused) {
+      return ExtraCallbacksOnFocus.execute();
     }
+    ExtraCallbacksOnBlur.execute();
   });
 
   // this is started as true on rust side but to be secure we set it to false
   let ignoring_cursor_events = false;
+
+  const { x, y } = await webview.outerPosition();
+  const { width, height } = await webview.outerSize();
+  let webviewRect = { x, y, width, height };
+
+  webview.onMoved((e) => {
+    webviewRect.x = e.payload.x;
+    webviewRect.y = e.payload.y;
+  });
+
+  webview.onResized((e) => {
+    webviewRect.width = e.payload.width;
+    webviewRect.height = e.payload.height;
+  });
+
   webview.listen<[x: number, y: number]>('global-mouse-move', async (event) => {
     if (!(await webview.isVisible())) {
       return;
     }
 
-    const [x, y] = event.payload;
-    const adjustedX = x / window.devicePixelRatio;
-    const adjustedY = y / window.devicePixelRatio;
+    const [mouseX, mouseY] = event.payload;
+    let { x: windowX, y: windowY, width: windowWidth, height: windowHeight } = webviewRect;
+
+    // check if the mouse is inside the window
+    const isHoverWindow =
+      mouseX >= windowX &&
+      mouseX <= windowX + windowWidth &&
+      mouseY >= windowY &&
+      mouseY <= windowY + windowHeight;
+
+    if (!isHoverWindow) {
+      return;
+    }
+
+    const adjustedX = (mouseX - windowX) / window.devicePixelRatio;
+    const adjustedY = (mouseY - windowY) / window.devicePixelRatio;
 
     let element = document.elementFromPoint(adjustedX, adjustedY);
     if (element != document.body && ignoring_cursor_events) {
diff --git a/src/apps/toolbar/index.tsx b/src/apps/toolbar/index.tsx
index fee0e4ab..2bd29314 100644
--- a/src/apps/toolbar/index.tsx
+++ b/src/apps/toolbar/index.tsx
@@ -18,7 +18,7 @@ import './styles/global.css';
 
 async function Main() {
   wrapConsole();
-  registerDocumentEvents();
+  await registerDocumentEvents();
 
   const container = getRootContainer();