feat(hotkey): convert coordinates according to mask and screen size

src/components/Mask.vue

@@ -3,7 +3,13 @@ import { onActivated, ref } from "vue";
 import { NDialog } from "naive-ui";
 import { useGlobalStore } from "../store/global";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
-import { initShortcuts, listenToKeyEvent, unlistenToKeyEvent } from "../hotkey";
+import {
+  initShortcuts,
+  listenToKeyEvent,
+  unlistenToKeyEvent,
+  updateScreenSizeAndMaskArea,
+} from "../hotkey";
+import { getCurrent } from "@tauri-apps/api/window";
 
 const maskRef = ref<HTMLElement | null>(null);
 
@@ -29,7 +35,17 @@ onActivated(async () => {
   }
   if (store.controledDevice) {
     if (maskRef.value) {
-      initShortcuts([store.screenSizeW, store.screenSizeH], maskRef.value);
+      const mt = 30;
+      const ml = 70;
+      const appWindow = getCurrent();
+      const size = (await appWindow.outerSize()).toLogical(
+        await appWindow.scaleFactor()
+      );
+      updateScreenSizeAndMaskArea(
+        [store.screenSizeW, store.screenSizeH],
+        [size.width - ml, size.height - mt]
+      );
+      initShortcuts(maskRef.value);
       listenToKeyEvent();
       isShortcutInited = true;
     }

src/hotkey.ts

@@ -6,14 +6,16 @@ import {
   touch,
 } from "./frontcommand/scrcpyMaskCmd";
 
-
-// TODO 根据当前蒙版的尺寸换算屏幕尺寸
 function clientxToPosx(clientx: number) {
-  return clientx < 70 ? 0 : Math.floor(clientx - 70);
+  return clientx < 70
+    ? 0
+    : Math.floor((clientx - 70) * (screenSizeW / maskSizeW));
 }
 
 function clientyToPosy(clienty: number) {
-  return clienty < 30 ? 0 : Math.floor(clienty - 30);
+  return clienty < 30
+    ? 0
+    : Math.floor((clienty - 30) * (screenSizeH / maskSizeH));
 }
 
 function clientxToPosOffsetx(clientx: number, posx: number, scale: number) {
@@ -567,6 +569,8 @@ function addClickShortcuts(key: string, pointerId: number) {
 
 let screenSizeW: number;
 let screenSizeH: number;
+let maskSizeW: number;
+let maskSizeH: number;
 let mouseX = 0;
 let mouseY = 0;
 
@@ -816,13 +820,17 @@ export function unlistenToKeyEvent() {
   loopFlag = false;
 }
 
-export function initShortcuts(
+export function updateScreenSizeAndMaskArea(
   screenSize: [number, number],
-  element: HTMLElement
+  maskArea: [number, number]
 ) {
   screenSizeW = screenSize[0];
   screenSizeH = screenSize[1];
+  maskSizeW = maskArea[0];
+  maskSizeH = maskArea[1];
+}
 
+export function initShortcuts(element: HTMLElement) {
   element.addEventListener("mousedown", handleMouseDown);
   element.addEventListener("mousemove", handleMouseMove);
   element.addEventListener("mouseup", handleMouseUp);