fix(#66): toolbar hitbox not handling multimonitors

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.

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) {

src/apps/toolbar/index.tsx

@@ -18,7 +18,7 @@ import './styles/global.css';
 
 async function Main() {
   wrapConsole();
-  registerDocumentEvents();
+  await registerDocumentEvents();
 
   const container = getRootContainer();