bug(setting): fix size and pos error

2025-02-23 07:22:17 +08:00 · 2024-04-16 21:14:37 +08:00 · 2024-04-16 21:14:37 +08:00 · 96821e1c9e
commit 96821e1c9e
parent 2578449304
8 changed files with 131 additions and 183 deletions
--- a/package.json
+++ b/package.json
@ -10,9 +10,7 @@
    "tauri": "tauri"
  },
  "dependencies": {
-    "@tauri-apps/api": ">=2.0.0-beta.0",
-    "@tauri-apps/plugin-os": "2.0.0-beta.2",
-    "@tauri-apps/plugin-shell": ">=2.0.0-beta.0",
+    "@tauri-apps/api": ">=2.0.0-beta.8",
    "pinia": "^2.1.7",
    "vue": "^3.3.4",
    "vue-router": "4"
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -11,8 +11,7 @@ edition = "2021"
 tauri-build = { version = "2.0.0-beta", features = [] }

 [dependencies]
-tauri = { version = "2.0.0-beta", features = ["macos-private-api"] }
-tauri-plugin-os = "2.0.0-beta"
+tauri = { version = "2.0.0-beta.15", features = ["macos-private-api"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 anyhow = "1.0"
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@ -13,8 +13,6 @@
    "window:allow-close",
    "window:allow-is-maximizable",
    "window:allow-start-dragging",
-    "window:allow-unmaximize",
-    "os:default",
-    "os:allow-platform"
+    "window:allow-unmaximize"
  ]
 }
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -112,6 +112,14 @@ fn start_scrcpy_server(
 async fn main() {
    tauri::Builder::default()
        .setup(|app| {
+            // let main_window = app.get_webview_window("main").unwrap();
+            // main_window
+            //     .set_size(tauri::Size::Logical(tauri::LogicalSize {
+            //         width: 1350.,
+            //         height: 750.,
+            //     }))
+            //     .unwrap();
+
            // check resource files
            ResHelper::res_init(
                &app.path()
@ -120,44 +128,8 @@ async fn main() {
                    .join("resource"),
            )
            .unwrap();
-
-            let main_window = app.get_webview_window("main").unwrap();
-
-            #[cfg(windows)]
-            {
-                let scale_factor = main_window.scale_factor().unwrap();
-                main_window
-                    .set_size(tauri::Size::Physical(tauri::PhysicalSize {
-                        width: 1350,
-                        height: 750,
-                    }))
-                    .unwrap();
-
-                main_window
-                    .with_webview(move |webview| {
-                        unsafe {
-                            // see https://docs.rs/webview2-com/0.19.1/webview2_com/Microsoft/Web/WebView2/Win32/struct.ICoreWebView2Controller.html
-                            webview
-                                .controller()
-                                .SetZoomFactor(1.0 / scale_factor)
-                                .unwrap();
-                        }
-                    })
-                    .unwrap();
-            }
-            #[cfg(target_os = "macos")]
-            {
-                main_window
-                    .set_size(tauri::Size::Logical(tauri::LogicalSize {
-                        width: 1350.,
-                        height: 750.,
-                    }))
-                    .unwrap();
-            }
-
            Ok(())
        })
-        .plugin(tauri_plugin_os::init())
        .invoke_handler(tauri::generate_handler![
            adb_devices,
            forward_server_port,
--- a/src/App.vue
+++ b/src/App.vue
@ -29,7 +29,6 @@ import {
 .container {
  background-color: transparent;
  height: 100%;
-  overflow: auto;
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: 30px 1fr;
--- a/src/components/Device.vue
+++ b/src/components/Device.vue
@ -28,6 +28,7 @@ import {
  NFormItem,
  NIcon,
  NSpin,
+  NScrollbar,
  DataTableColumns,
  DropdownOption,
  useDialog,
@ -213,116 +214,114 @@ async function refreshDevices() {
 </script>

 <template>
-  <div class="device">
-    <NSpin :show="store.showLoadingRef">
-      <NH4 prefix="bar">本地端口</NH4>
-      <NInputNumber
-        v-model:value="port"
-        :show-button="false"
-        :min="16384"
-        :max="49151"
-        style="max-width: 300px"
-      />
-      <NH4 prefix="bar">屏幕尺寸</NH4>
-      <NFlex justify="left" align="center">
-        <NFormItem label="宽度">
-          <NInputNumber
-            v-model:value="store.screenSizeW"
-            placeholder="屏幕宽度"
-            :min="0"
-            :disabled="store.controledDevice !== null"
-          />
-        </NFormItem>
-        <NFormItem label="高度">
-          <NInputNumber
-            v-model:value="store.screenSizeH"
-            placeholder="屏幕高度"
-            :min="0"
-            :disabled="store.controledDevice !== null"
-          />
-        </NFormItem>
-      </NFlex>
-      <NP
-        >提示：请正确输入当前控制设备的屏幕尺寸，这是成功发送触摸事件的必要参数</NP
-      >
-      <NH4 prefix="bar">受控设备</NH4>
-      <div class="controled-device-list">
-        <NEmpty
-          size="small"
-          description="No Controled Device"
-          v-if="!store.controledDevice"
+  <NScrollbar>
+    <div class="device">
+      <NSpin :show="store.showLoadingRef">
+        <NH4 prefix="bar">本地端口</NH4>
+        <NInputNumber
+          v-model:value="port"
+          :show-button="false"
+          :min="16384"
+          :max="49151"
+          style="max-width: 300px"
        />
-        <div class="controled-device" v-if="store.controledDevice">
-          <div>
-            {{ store.controledDevice.deviceName }} ({{
-              store.controledDevice.device.id
-            }})
-          </div>
-          <div class="device-op">
-            <NTooltip trigger="hover">
-              <template #trigger>
-                <NButton quaternary circle type="info">
-                  <template #icon>
-                    <NIcon><InformationCircle /></NIcon>
-                  </template>
-                </NButton>
-              </template>
-              scid: {{ store.controledDevice.scid }} <br />status:
-              {{ store.controledDevice.device.status }} <br />screen:
-            </NTooltip>
-            <NButton quaternary circle type="error" @click="shutdownSC()">
-              <template #icon>
-                <NIcon><CloseCircle /></NIcon>
-              </template>
-            </NButton>
+        <NH4 prefix="bar">设备尺寸</NH4>
+        <NFlex justify="left" align="center">
+          <NFormItem label="宽度">
+            <NInputNumber
+              v-model:value="store.screenSizeW"
+              placeholder="屏幕宽度"
+              :min="0"
+              :disabled="store.controledDevice !== null"
+            />
+          </NFormItem>
+          <NFormItem label="高度">
+            <NInputNumber
+              v-model:value="store.screenSizeH"
+              placeholder="屏幕高度"
+              :min="0"
+              :disabled="store.controledDevice !== null"
+            />
+          </NFormItem>
+        </NFlex>
+        <NP
+          >提示：请正确输入当前控制设备的屏幕尺寸，这是成功发送触摸事件的必要参数</NP
+        >
+        <NH4 prefix="bar">受控设备</NH4>
+        <div class="controled-device-list">
+          <NEmpty
+            size="small"
+            description="No Controled Device"
+            v-if="!store.controledDevice"
+          />
+          <div class="controled-device" v-if="store.controledDevice">
+            <div>
+              {{ store.controledDevice.deviceName }} ({{
+                store.controledDevice.device.id
+              }})
+            </div>
+            <div class="device-op">
+              <NTooltip trigger="hover">
+                <template #trigger>
+                  <NButton quaternary circle type="info">
+                    <template #icon>
+                      <NIcon><InformationCircle /></NIcon>
+                    </template>
+                  </NButton>
+                </template>
+                scid: {{ store.controledDevice.scid }} <br />status:
+                {{ store.controledDevice.device.status }} <br />screen:
+              </NTooltip>
+              <NButton quaternary circle type="error" @click="shutdownSC()">
+                <template #icon>
+                  <NIcon><CloseCircle /></NIcon>
+                </template>
+              </NButton>
+            </div>
          </div>
        </div>
-      </div>
-      <NFlex justify="space-between" align="center">
-        <NH4 prefix="bar">可用设备</NH4>
-        <NButton
-          tertiary
-          circle
-          type="primary"
-          @click="refreshDevices"
-          style="margin-right: 20px"
-        >
-          <template #icon>
-            <NIcon><Refresh /></NIcon>
-          </template>
-        </NButton>
-      </NFlex>
-      <NDataTable
-        max-height="120"
-        :columns="tableCols"
-        :data="availableDevice"
-        :row-props="tableRowProps"
-        :pagination="false"
-        :bordered="false"
-      />
-      <NDropdown
-        placement="bottom-start"
-        trigger="manual"
-        :x="menuX"
-        :y="menuY"
-        :options="menuOptions"
-        :show="showMenu"
-        :on-clickoutside="onMenuClickoutside"
-        @select="onMenuSelect"
-      />
-    </NSpin>
-  </div>
+        <NFlex justify="space-between" align="center">
+          <NH4 prefix="bar">可用设备</NH4>
+          <NButton
+            tertiary
+            circle
+            type="primary"
+            @click="refreshDevices"
+            style="margin-right: 20px"
+          >
+            <template #icon>
+              <NIcon><Refresh /></NIcon>
+            </template>
+          </NButton>
+        </NFlex>
+        <NDataTable
+          max-height="120"
+          :columns="tableCols"
+          :data="availableDevice"
+          :row-props="tableRowProps"
+          :pagination="false"
+          :bordered="false"
+        />
+        <NDropdown
+          placement="bottom-start"
+          trigger="manual"
+          :x="menuX"
+          :y="menuY"
+          :options="menuOptions"
+          :show="showMenu"
+          :on-clickoutside="onMenuClickoutside"
+          @select="onMenuSelect"
+        />
+      </NSpin>
+    </div>
+  </NScrollbar>
 </template>

 <style scoped lang="scss">
 .device {
  color: var(--light-color);
  background-color: var(--bg-color);
-  padding: 0 25px;
-}
-
-.n-h4 {
-  margin-top: 20px;
+  padding: 0 20px;
 }

 .controled-device-list {
--- a/src/components/setting/Mask.vue
+++ b/src/components/setting/Mask.vue
@ -12,14 +12,14 @@ import {
  NIcon,
  FormInst,
  useMessage,
-  NP,
 } from "naive-ui";
 import {
+  LogicalPosition,
+  LogicalSize,
  PhysicalPosition,
  PhysicalSize,
  getCurrent,
 } from "@tauri-apps/api/window";
-import { platform } from "@tauri-apps/plugin-os";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";

@ -27,34 +27,25 @@ let unlistenResize: UnlistenFn = () => {};
 let unlistenMove: UnlistenFn = () => {};

 let factor = 1;
-let platformName = "";

 // macos: use logical position and size to refresh the area model
 // others: use pyhsical position and size to refresh the area model
 async function refreshAreaModel(size?: PhysicalSize, pos?: PhysicalPosition) {
+  const lSize = size?.toLogical(factor);
+  const lPos = pos?.toLogical(factor);
+
  // header size and sidebar size
  const mt = 30;
  const ml = 70;

-  if (platformName === "macos") {
-    // use logical position and size
-    if (size !== undefined) {
-      areaModel.value.sizeW = Math.floor((size.width - ml) / factor);
-      areaModel.value.sizeH = Math.floor((size.height - mt) / factor);
-    }
-    if (pos !== undefined) {
-      areaModel.value.posX = Math.floor((pos.x + ml) / factor);
-      areaModel.value.posY = Math.floor((pos.y + mt) / factor);
-    }
-  } else {
-    if (size !== undefined) {
-      areaModel.value.sizeW = Math.floor(size.width - ml);
-      areaModel.value.sizeH = Math.floor(size.height - mt);
-    }
-    if (pos !== undefined) {
-      areaModel.value.posX = Math.floor(pos.x + ml);
-      areaModel.value.posY = Math.floor(pos.y + mt);
-    }
+  // use logical position and size
+  if (lSize !== undefined) {
+    areaModel.value.sizeW = lSize.width - ml;
+    areaModel.value.sizeH = lSize.height - mt;
+  }
+  if (lPos !== undefined) {
+    areaModel.value.posX = lPos.x + ml;
+    areaModel.value.posY = lPos.y + mt;
  }
 }

@ -110,7 +101,6 @@ function handleAdjustClick(e: MouseEvent) {
  });
 }

-// TODO 等待官方合并修复分支后检查表现是否正常
 // move and resize window to the selected window (control) area
 async function adjustMaskArea() {
  // header size and sidebar size
@ -119,30 +109,23 @@ async function adjustMaskArea() {

  const appWindow = getCurrent();

-  const pos = new PhysicalPosition(
+  const pos = new LogicalPosition(
    areaModel.value.posX - ml,
    areaModel.value.posY - mt
  );

-  const size = new PhysicalSize(
+  const size = new LogicalSize(
    areaModel.value.sizeW + ml,
    areaModel.value.sizeH + mt
  );

-  if (platformName === "macos") {
-    // use logical position and size
-    await appWindow.setPosition(pos.toLogical(factor));
-    await appWindow.setSize(size.toLogical(factor));
-  } else {
-    await appWindow.setPosition(pos);
-    await appWindow.setSize(size);
-  }
+  await appWindow.setPosition(pos);
+  await appWindow.setSize(size);
 }

 onMounted(async () => {
  const appWindow = getCurrent();
  factor = await appWindow.scaleFactor();
-  platformName = await platform();

  unlistenResize = await appWindow.onResized(({ payload: size }) => {
    refreshAreaModel(size, undefined);
@ -165,7 +148,7 @@ onUnmounted(() => {
 <template>
  <div class="setting-page">
    <NFlex justify="space-between" align="center">
-      <NH4 prefix="bar">手动调整</NH4>
+      <NH4 prefix="bar">蒙版调整</NH4>
      <NButton
        tertiary
        circle
@ -213,7 +196,6 @@ onUnmounted(() => {
          />
        </NFormItemGi>
      </NGrid>
-      <NP>提示：使用物理坐标、尺寸</NP>
    </NForm>
  </div>
 </template>
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@ -31,7 +31,8 @@ import { NTabs, NTabPane, NScrollbar } from "naive-ui";
 .setting {
  background-color: var(--content-bg-color);
  color: var(--light-color);
-  overflow: hidden;
+  height: 100%;
+  overflow-y: auto;
  display: flex;

  .NTabPane {