bug(KeyBoard): fix local store error

src-tauri/capabilities/default.json

@@ -19,6 +19,9 @@
     "store:allow-set",
     "store:allow-save",
     "store:allow-load",
+    "store:allow-clear",
+    "store:allow-entries",
+    "store:allow-delete",
     "clipboard-manager:default",
     "clipboard-manager:allow-write-text"
   ]

src-tauri/src/main.rs

@@ -161,6 +161,17 @@ async fn main() {
                                 height: (600 + 30) as f64,
                             }))
                             .unwrap();
+                        store
+                            .insert(
+                                "maskArea".to_string(),
+                                serde_json::json!({
+                                    "posX": 0,
+                                    "posY": 0,
+                                    "sizeW": 800,
+                                    "sizeH": 600
+                                }),
+                            )
+                            .unwrap();
                     }
                 }
 

src/App.vue

@@ -17,18 +17,19 @@ const store = useGlobalStore();
 onMounted(async () => {
   // loading keyMappingConfigList from local store
   const localStore = new Store("store.bin");
-  let keyMappingConfigList: KeyMappingConfig[] | null = await localStore.get(
+  let keyMappingConfigList = await localStore.get<KeyMappingConfig[]>(
     "keyMappingConfigList"
   );
   if (keyMappingConfigList === null || keyMappingConfigList.length === 0) {
+    // add empty key mapping config
     // unable to get mask element when app is not ready
     // so we use the stored mask area to get relative size
-    const maskArea: {
+    const maskArea = await localStore.get<{
       posX: number;
       posY: number;
       sizeW: number;
       sizeH: number;
-    } | null = await localStore.get("maskArea");
+    }>("maskArea");
     let relativeSize = { w: 800, h: 600 };
     if (maskArea !== null) {
       relativeSize = {
@@ -43,12 +44,12 @@ onMounted(async () => {
         list: [],
       },
     ];
+    await localStore.set("keyMappingConfigList", keyMappingConfigList);
   }
   store.keyMappingConfigList = keyMappingConfigList;
+
   // loading curKeyMappingIndex from local store
-  let curKeyMappingIndex: number | null = await localStore.get(
-    "curKeyMappingIndex"
-  );
+  let curKeyMappingIndex = await localStore.get<number>("curKeyMappingIndex");
   if (
     curKeyMappingIndex === null ||
     curKeyMappingIndex >= keyMappingConfigList.length

src/components/Device.vue

@@ -55,8 +55,9 @@ let deviceWaitForMetadataTask: ((deviceName: string) => void) | null = null;
 
 let unlisten: UnlistenFn | undefined;
 onMounted(async () => {
-  const screenSize: null | { sizeW: number; sizeH: number } =
-    await localStore.get("screenSize");
+  const screenSize = await localStore.get<{ sizeW: number; sizeH: number }>(
+    "screenSize"
+  );
   if (screenSize !== null) {
     store.screenSizeW = screenSize.sizeW;
     store.screenSizeH = screenSize.sizeH;

src/components/keyboard/KeyBoard.vue

@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { onActivated, ref } from "vue";
+import { ref } from "vue";
 import KeyInfo from "./KeyInfo.vue";
 import KeySetting from "./KeySetting.vue";
 import KeyCommon from "./KeyCommon.vue";
 import { useGlobalStore } from "../../store/global";
-import { useDialog, useMessage } from "naive-ui";
+import { useDialog } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
 
 // TODO 左键空白区域，关闭设置或active设为-1
 // TODO 右键空白区域添加按键
 // TODO 左键可拖动按钮（并显示到顶部），右键按钮进行修改、删除
-// TODO 设置界面添加清空本地数据的按钮
+// TODO 设置界面添加本地数据编辑器（类似utools）
 // TODO 添加开发者工具打开按钮
 
 const keyInfoShowFlag = ref(false);
 const store = useGlobalStore();
-const message = useMessage();
 const dialog = useDialog();
 
 const activeButtonIndex = ref(-1);
 let edited = ref(false);
 
-onActivated(() => {
-  // migrate keyMappingConfig if relativeSize does not match
-  migrateKeyMappingConfig();
-  // reset editKeyMappingList as the same as keyMappingList
-  store.resetEditKeyMappingList();
-});
-
 onBeforeRouteLeave(() => {
   if (edited.value) {
     dialog.warning({
@@ -46,48 +38,6 @@ onBeforeRouteLeave(() => {
     });
   }
 });
-
-function migrateKeyMappingConfig() {
-  const keyboardElement = document.getElementById(
-    "keyboardElement"
-  ) as HTMLElement;
-  const curKeyMappingConfig =
-    store.keyMappingConfigList[store.curKeyMappingIndex];
-
-  const relativeSize = curKeyMappingConfig.relativeSize;
-  const sizeW = keyboardElement.clientWidth;
-  const sizeH = keyboardElement.clientHeight;
-
-  if (sizeW !== relativeSize.w || sizeH !== relativeSize.h) {
-    const newConfig = {
-      ...curKeyMappingConfig,
-      relativeSize: {
-        w: sizeW,
-        h: sizeH,
-      },
-    };
-
-    const relativePosToMaskPos = (x: number, y: number) => {
-      return {
-        x: Math.round((x / relativeSize.w) * sizeW),
-        y: Math.round((y / relativeSize.h) * sizeH),
-      };
-    };
-
-    for (let keyMapping of curKeyMappingConfig.list) {
-      const { x, y } = relativePosToMaskPos(keyMapping.posX, keyMapping.posY);
-      keyMapping.posX = x;
-      keyMapping.posY = y;
-    }
-    newConfig.title += "-迁移";
-    store.keyMappingConfigList.splice(store.curKeyMappingIndex, 1, newConfig);
-    store.curKeyMappingIndex += 1;
-
-    message.warning(
-      "当前按键方案与蒙版尺寸不一致，已自动迁移到新方案：" + newConfig.title
-    );
-  }
-}
 </script>
 
 <template>

src/components/keyboard/KeySetting.vue

@@ -12,7 +12,7 @@ import {
   NInput,
   useMessage,
 } from "naive-ui";
-import { computed, onMounted, ref } from "vue";
+import { computed, onActivated, onMounted, ref, watch } from "vue";
 import { useGlobalStore } from "../../store/global";
 import { Store } from "@tauri-apps/plugin-store";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
@@ -40,63 +40,69 @@ const keyMappingNameOptions = computed(() => {
   });
 });
 
-const curKeyMappingrelativeSize = computed(() => {
+const curRelativeSize = computed(() => {
+  if (store.keyMappingConfigList.length === 0) {
+    return { w: 800, h: 600 };
+  }
   return store.keyMappingConfigList[store.curKeyMappingIndex].relativeSize;
 });
 
-const keySettingPos = { x: 100, y: 100 };
+const keySettingPos = ref({ x: 100, y: 100 });
 
 onMounted(async () => {
   // loading keySettingPos from local store
-  const lastPos: { x: number; y: number } | null = await localStore.get(
+  let storedPos = await localStore.get<{ x: number; y: number }>(
     "keySettingPos"
   );
-  if (lastPos === null) {
-    await localStore.set("keySettingPos", keySettingPos);
-  } else {
-    keySettingPos.x = lastPos.x;
-    keySettingPos.y = lastPos.y;
+
+  if (storedPos === null) {
+    await localStore.set("keySettingPos", keySettingPos.value);
+    storedPos = { x: 100, y: 100 };
   }
   // apply keySettingPos
-  const target = document.querySelector(
-    ".keyboard .key-setting-btn"
-  ) as HTMLElement;
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
   const maxWidth = keyboardElement.clientWidth - 40;
   const maxHeight = keyboardElement.clientHeight - 40;
-  if (keySettingPos.x < 0) keySettingPos.x = 0;
-  else if (keySettingPos.x > maxWidth) keySettingPos.x = maxWidth;
-  if (keySettingPos.y < 0) keySettingPos.y = 0;
-  else if (keySettingPos.y > maxHeight) keySettingPos.y = maxHeight;
-  target.style.setProperty("right", `${keySettingPos.x}px`);
-  target.style.setProperty("bottom", `${keySettingPos.y}px`);
+  keySettingPos.value.x = Math.max(0, Math.min(storedPos.x, maxWidth));
+  keySettingPos.value.y = Math.max(0, Math.min(storedPos.y, maxHeight));
 });
 
+onActivated(() => {
+  // reset editKeyMappingList as the same as keyMappingList
+  store.resetEditKeyMappingList();
+  // check config relative size
+  checkConfigSize();
+});
+
+watch(
+  () => store.curKeyMappingIndex,
+  () => {
+    // check config relative size
+    checkConfigSize();
+  }
+);
+
 function dragHandler(downEvent: MouseEvent) {
-  const target = document.querySelector(
-    ".keyboard .key-setting-btn"
-  ) as HTMLElement;
+  const target = document.getElementById("keySettingBtn") as HTMLElement;
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
   const maxWidth = keyboardElement.clientWidth - 40;
   const maxHeight = keyboardElement.clientHeight - 40;
 
+  const oldX = keySettingPos.value.x;
+  const oldY = keySettingPos.value.y;
   const x = downEvent.clientX;
   const y = downEvent.clientY;
 
   let moveFlag = false;
   const moveHandler = (moveEvent: MouseEvent) => {
-    let right = keySettingPos.x + x - moveEvent.clientX;
-    let bottom = keySettingPos.y + y - moveEvent.clientY;
-    if (right < 0) right = 0;
-    else if (right > maxWidth) right = maxWidth;
-    if (bottom < 0) bottom = 0;
-    else if (bottom > maxHeight) bottom = maxHeight;
-    target.style.setProperty("right", `${right}px`);
-    target.style.setProperty("bottom", `${bottom}px`);
+    const newX = oldX + moveEvent.clientX - x;
+    const newY = oldY + moveEvent.clientY - y;
+    keySettingPos.value.x = Math.max(0, Math.min(newX, maxWidth));
+    keySettingPos.value.y = Math.max(0, Math.min(newY, maxHeight));
   };
 
   const timer = setTimeout(() => {
@@ -105,22 +111,14 @@ function dragHandler(downEvent: MouseEvent) {
     window.addEventListener("mousemove", moveHandler);
   }, 1000);
 
-  const upHandler = (upEvent: MouseEvent) => {
+  const upHandler = () => {
     clearTimeout(timer);
     window.removeEventListener("mousemove", moveHandler);
     window.removeEventListener("mouseup", upHandler);
     if (moveFlag) {
       // move up
-      keySettingPos.x += x - upEvent.clientX;
-      keySettingPos.y += y - upEvent.clientY;
-
-      if (keySettingPos.x < 0) keySettingPos.x = 0;
-      else if (keySettingPos.x > maxWidth) keySettingPos.x = maxWidth;
-      if (keySettingPos.y < 0) keySettingPos.y = 0;
-      else if (keySettingPos.y > maxHeight) keySettingPos.y = maxHeight;
-
       target.style.setProperty("cursor", "pointer");
-      localStore.set("keySettingPos", keySettingPos);
+      localStore.set("keySettingPos", keySettingPos.value);
     } else {
       // click up
       showSetting.value = !showSetting.value;
@@ -234,6 +232,63 @@ function exportKeyMappingConfig() {
       message.error("按键方案导出失败");
     });
 }
+
+function checkConfigSize() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const curKeyMappingConfig =
+    store.keyMappingConfigList[store.curKeyMappingIndex];
+  const relativeSize = curKeyMappingConfig.relativeSize;
+
+  if (
+    keyboardElement.clientWidth !== relativeSize.w ||
+    keyboardElement.clientHeight !== relativeSize.h
+  ) {
+    message.warning(
+      `请注意当前按键方案"${curKeyMappingConfig.title}"与蒙版尺寸不一致，若有需要可进行迁移`
+    );
+  }
+}
+
+function migrateKeyMappingConfig() {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const curKeyMappingConfig =
+    store.keyMappingConfigList[store.curKeyMappingIndex];
+
+  const relativeSize = curKeyMappingConfig.relativeSize;
+  const sizeW = keyboardElement.clientWidth;
+  const sizeH = keyboardElement.clientHeight;
+
+  if (sizeW !== relativeSize.w || sizeH !== relativeSize.h) {
+    // deep clone
+    const newConfig = JSON.parse(JSON.stringify(curKeyMappingConfig));
+    // migrate relativeSize
+    newConfig.relativeSize = {
+      w: sizeW,
+      h: sizeH,
+    };
+    // migrate key pos
+    for (const keyMapping of newConfig.list) {
+      keyMapping.posX = Math.round((keyMapping.posX / relativeSize.w) * sizeW);
+      keyMapping.posY = Math.round((keyMapping.posY / relativeSize.h) * sizeH);
+    }
+    // migrate title
+    newConfig.title += "-迁移";
+
+    store.keyMappingConfigList.splice(
+      store.curKeyMappingIndex + 1,
+      0,
+      newConfig
+    );
+    store.setKeyMappingIndex(store.curKeyMappingIndex + 1);
+    message.success("已迁移到新方案：" + newConfig.title);
+  } else {
+    message.info("当前方案符合蒙版尺寸，无需迁移");
+  }
+}
 </script>
 
 <template>
@@ -242,8 +297,13 @@ function exportKeyMappingConfig() {
     type="info"
     size="large"
     class="key-setting-btn"
+    id="keySettingBtn"
     title="长按可拖动"
     @mousedown="dragHandler"
+    :style="{
+      left: keySettingPos.x + 'px',
+      top: keySettingPos.y + 'px',
+    }"
   >
     <template #icon>
       <NIcon><Settings /></NIcon>
@@ -259,13 +319,11 @@ function exportKeyMappingConfig() {
       @update:value="(value: number)=>store.setKeyMappingIndex(value)"
       :options="keyMappingNameOptions"
     />
-    <NP>
-      Relative Size: {{ curKeyMappingrelativeSize.w }} x
-      {{ curKeyMappingrelativeSize.h }}
-    </NP>
+    <NP> Relative Size:{{ curRelativeSize.w }}x{{ curRelativeSize.h }} </NP>
     <NFlex style="margin-top: 20px">
       <NButton @click="createKeyMappingConfig">新建方案</NButton>
       <NButton @click="copyCurKeyMappingConfig">复制方案</NButton>
+      <NButton @click="migrateKeyMappingConfig">迁移方案</NButton>
       <NButton @click="delCurKeyMappingConfig">删除方案</NButton>
       <NButton
         @click="

src/components/setting/Basic.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { NH4, NForm, FormInst } from "naive-ui";
+import { Store } from "@tauri-apps/plugin-store";
+import { NH4, NForm, FormInst, NButton } from "naive-ui";
 
 import { ref } from "vue";
 
 const formRef = ref<FormInst | null>(null);
+const localStore = new Store("store.bin");
 </script>
 
 <template>
   <div class="setting-page">
     <NForm ref="formRef" label-placement="left">
       <NH4 prefix="bar">客户端相关</NH4>
+      <NButton @click="localStore.clear()">清除数据</NButton>
     </NForm>
   </div>
 </template>

src/components/setting/Mask.vue

@@ -133,7 +133,7 @@ onMounted(async () => {
   const appWindow = getCurrent();
   factor = await appWindow.scaleFactor();
 
-  let maskArea: null | MaskArea = await localStore.get("maskArea");
+  let maskArea = await localStore.get<MaskArea>("maskArea");
   if (maskArea !== null) {
     areaModel.value = maskArea;
   }
@@ -207,9 +207,7 @@ onUnmounted(() => {
           />
         </NFormItemGi>
       </NGrid>
-      <NP
-        >提示：蒙版尺寸与设备尺寸将用于坐标转换，请保证尺寸的准确性</NP
-      >
+      <NP>提示：蒙版尺寸与设备尺寸将用于坐标转换，请保证尺寸的准确性</NP>
     </NForm>
   </div>
 </template>