From 22b106bcbe01eeb3cc298c773778a06a3117f768 Mon Sep 17 00:00:00 2001
From: AkiChase <1003019131@qq.com>
Date: Tue, 11 Mar 2025 16:58:29 +0800
Subject: [PATCH] fix: mask area error

---
 src-tauri/tauri.conf.json |  3 ++-
 src/components/Mask.vue   | 11 +--------
 src/store/localStore.ts   | 51 ++++++++++++++++++++++++---------------
 src/tools/tools.ts        | 13 ++++++++++
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index c9f274d..5310c26 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -13,7 +13,8 @@
       {
         "title": "scrcpy-mask",
         "transparent": true,
-        "decorations": false
+        "decorations": false,
+        "shadow": false
       }
     ],
     "macOSPrivateApi": true,
diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index 79e70a4..e65f86c 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -12,9 +12,9 @@ import {
 } from "../hotkey";
 import { KeySteeringWheel } from "../keyMappingConfig";
 import ScreenStream from "./ScreenStream.vue";
-import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
 import { useI18n } from "vue-i18n";
 import { secondaryClean, secondaryInit } from "../tools/init";
+import { cleanAfterimage } from "../tools/tools";
 
 const { t } = useI18n();
 const store = useGlobalStore();
@@ -60,15 +60,6 @@ onUnmounted(() => {
   secondaryClean();
 });
 
-async function cleanAfterimage() {
-  const appWindow = getCurrentWindow();
-  const scale = await appWindow.scaleFactor();
-  const oldSize = (await appWindow.innerSize()).toLogical(scale);
-  const newSize = new LogicalSize(oldSize.width, oldSize.height + 1);
-  await appWindow.setSize(newSize);
-  await appWindow.setSize(oldSize);
-}
-
 function toStartServer() {
   router.replace({ name: "device" });
 }
diff --git a/src/store/localStore.ts b/src/store/localStore.ts
index 04d2f91..d23e836 100644
--- a/src/store/localStore.ts
+++ b/src/store/localStore.ts
@@ -6,6 +6,7 @@ import { allLanguage } from "../i18n";
 import { locale } from "@tauri-apps/plugin-os";
 import { NonReactiveStore } from "./noneReactiveStore";
 import {
+  currentMonitor,
   getCurrentWindow,
   LogicalPosition,
   LogicalSize,
@@ -86,7 +87,7 @@ async function initAdbPath() {
   LocalStore.vueStore.adbPath = adbPath;
 }
 
-async function initMaskArea() {
+export async function initMaskArea() {
   const maskArea = (await LocalStore.get<{
     posX: number;
     posY: number;
@@ -102,29 +103,41 @@ async function initMaskArea() {
 
   // min size
   if (sizeW < 120) sizeW = 120;
-  if (sizeH < 150) sizeH = 120;
-  // max size
-  const monitor = await primaryMonitor();
-  const monitorSize = monitor?.size.toLogical(monitor.scaleFactor);
-  if (monitorSize !== undefined) {
+  if (sizeH < 120) sizeH = 120;
+
+  let monitor = await currentMonitor();
+  if (monitor === null) monitor = await primaryMonitor();
+
+  if (monitor) {
+    const monitorSize = monitor.size.toLogical(monitor.scaleFactor);
+    const monitorPos = monitor.position.toLogical(monitor.scaleFactor);
+
+    // max size
     if (sizeW > monitorSize.width - ml) sizeW = monitorSize.width - ml;
     if (sizeH > monitorSize.height - mt) sizeH = monitorSize.height - mt;
+
+    const tlPos = { x: monitorPos.x, y: monitorPos.y };
+    const brPos = {
+      x: monitorPos.x + monitorSize.width,
+      y: monitorPos.y + monitorSize.height,
+    };
+
+    // min pos (bottom right corner)
+    // move to top left corner
+    if (posX + sizeW < tlPos.x) posX = tlPos.x + ml;
+    if (posY + sizeH < tlPos.y) posY = tlPos.y + mt;
+
+    if (brPos !== null) {
+      // max pos (top left corner)
+      // move to bottom right corner
+      if (posX > brPos.x) posX = brPos.x - sizeW;
+      if (posY > brPos.y) posY = brPos.y - sizeH;
+    }
   }
+
   [sizeW, sizeH] = [sizeW, sizeH].map((v) => Math.round(v));
-  appWindow.setSize(new LogicalSize(sizeW + ml, sizeH + mt));
-
-  // min pos (right bottom corner)
-  // move to left top corner
-  if (posX + sizeW < 0) posX = ml;
-  if (posY + sizeH < 0) posY = mt;
-  if (monitorSize !== undefined) {
-    // max pos (left top corner)
-    // move to right bottom corner
-    if (posX > monitorSize.width) posX = monitorSize.width - sizeW;
-    if (posY > monitorSize.height) posY = monitorSize.height - sizeH;
-  }
-
   [posX, posY] = [posX, posY].map((v) => Math.round(v));
+  appWindow.setSize(new LogicalSize(sizeW + ml, sizeH + mt));
   appWindow.setPosition(new LogicalPosition(posX - 70, posY - 30));
 
   NonReactiveStore.setLocal("maskArea", {
diff --git a/src/tools/tools.ts b/src/tools/tools.ts
index a4692be..1f90dca 100644
--- a/src/tools/tools.ts
+++ b/src/tools/tools.ts
@@ -1,3 +1,5 @@
+import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
+
 export function compareVersion(v1: string, v2: string) {
   const [x1, y1, z1] = v1.split(".");
   const [x2, y2, z2] = v2.split(".");
@@ -25,3 +27,14 @@ export function genClientId() {
   }
   return result;
 }
+
+export async function cleanAfterimage() {
+  const appWindow = getCurrentWindow();
+  const scale = await appWindow.scaleFactor();
+  const oldSize = (await appWindow.innerSize()).toLogical(scale);
+  const newSize = new LogicalSize(oldSize.width, oldSize.height + 1);
+  await appWindow.setSize(newSize);
+  setTimeout(() => {
+    appWindow.setSize(oldSize);
+  }, 150);
+}