fix: mask area error

src-tauri/tauri.conf.json

@@ -13,7 +13,8 @@
       {
         "title": "scrcpy-mask",
         "transparent": true,
-        "decorations": false
+        "decorations": false,
+        "shadow": false
       }
     ],
     "macOSPrivateApi": true,

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" });
 }

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;
+  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
-  const monitor = await primaryMonitor();
-  const monitorSize = monitor?.size.toLogical(monitor.scaleFactor);
-  if (monitorSize !== undefined) {
     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", {

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);
+}