feat(KeyBoard): load key config

src/App.vue

@@ -8,7 +8,6 @@ import {
   NDialogProvider,
 } from "naive-ui";
 import { Store } from "@tauri-apps/plugin-store";
-import { getCurrent } from "@tauri-apps/api/window";
 import { KeyMappingConfig } from "./keyMappingConfig";
 import { onMounted } from "vue";
 import { useGlobalStore } from "./store/global";
@@ -22,30 +21,43 @@ onMounted(async () => {
     "keyMappingConfigList"
   );
   if (keyMappingConfigList === null || keyMappingConfigList.length === 0) {
+    // unable to get mask element when app is not ready
+    // so we use the stored mask area to get relative size
+    const maskArea: {
+      posX: number;
+      posY: number;
+      sizeW: number;
+      sizeH: number;
+    } | null = await localStore.get("maskArea");
+    let relativeSize = { w: 800, h: 600 };
+    if (maskArea !== null) {
+      relativeSize = {
+        w: maskArea.sizeW,
+        h: maskArea.sizeH,
+      };
+    }
     keyMappingConfigList = [
       {
-        relativeSize: await calMaskSize(),
+        relativeSize,
         title: "空白方案",
         list: [],
       },
     ];
   }
-
   store.keyMappingConfigList = keyMappingConfigList;
-});
-
-async function calMaskSize() {
-  const appWindow = getCurrent();
-  const ml = 70;
-  const mt = 30;
-  let size = (await appWindow.outerSize()).toLogical(
-    await appWindow.scaleFactor()
+  // loading curKeyMappingIndex from local store
+  let curKeyMappingIndex: number | null = await localStore.get(
+    "curKeyMappingIndex"
   );
-  return {
-    w: Math.round(size.width) - ml,
-    h: Math.round(size.height) - mt,
-  };
-}
+  if (
+    curKeyMappingIndex === null ||
+    curKeyMappingIndex >= keyMappingConfigList.length
+  ) {
+    curKeyMappingIndex = 0;
+    localStore.set("curKeyMappingIndex", curKeyMappingIndex);
+  }
+  store.curKeyMappingIndex = curKeyMappingIndex;
+});
 </script>
 
 <template>
@@ -84,6 +96,3 @@ async function calMaskSize() {
   height: 100%;
 }
 </style>
-import { getCurrent } from "@tauri-apps/api/webview"; import { Store } from
-"@tauri-apps/plugin-store"; import { KeyMappingConfig } from
-"./keyMappingConfig";

src/components/Mask.vue

@@ -12,8 +12,6 @@ import {
 } from "../hotkey";
 import { getCurrent } from "@tauri-apps/api/window";
 
-const maskRef = ref<HTMLElement | null>(null);
-
 const store = useGlobalStore();
 const router = useRouter();
 const message = useMessage();
@@ -21,14 +19,18 @@ const message = useMessage();
 const renderedButtons: Ref<any[]> = ref([]);
 
 onBeforeRouteLeave(() => {
-  if (maskRef.value && store.controledDevice) {
+  const maskElement = document.getElementById("mask") as HTMLElement;
+
+  if (store.controledDevice) {
     unlistenToKeyEvent();
-    clearShortcuts(maskRef.value);
+    clearShortcuts(maskElement);
   }
 });
 
 onActivated(async () => {
-  if (maskRef.value && store.controledDevice) {
+  const maskElement = document.getElementById("mask") as HTMLElement;
+
+  if (store.controledDevice) {
     const mt = 30;
     const ml = 70;
     const appWindow = getCurrent();
@@ -43,13 +45,13 @@ onActivated(async () => {
     refreshKeyMappingButton();
     if (
       applyShortcuts(
-        maskRef.value,
+        maskElement,
         store.keyMappingConfigList[store.curKeyMappingIndex]
       )
     ) {
       listenToKeyEvent();
-    }else{
-      message.error("")
+    } else {
+      message.error("按键方案异常，请删除此方案");
     }
   }
 });
@@ -59,11 +61,13 @@ function toStartServer() {
 }
 
 function refreshKeyMappingButton() {
+  const maskElement = document.getElementById("mask") as HTMLElement;
+
   const curKeyMappingConfig =
     store.keyMappingConfigList[store.curKeyMappingIndex];
   const relativeSize = curKeyMappingConfig.relativeSize;
-  const maskSizeW = maskRef?.value?.clientWidth;
-  const maskSizeH = maskRef?.value?.clientHeight;
+  const maskSizeW = maskElement.clientWidth;
+  const maskSizeH = maskElement.clientHeight;
   if (maskSizeW && maskSizeH) {
     const relativePosToMaskPos = (x: number, y: number) => {
       return {
@@ -102,7 +106,7 @@ function refreshKeyMappingButton() {
     v-show="store.controledDevice"
     @contextmenu.prevent
     class="mask"
-    ref="maskRef"
+    id="mask"
   >
     <template v-for="button in renderedButtons">
       <div

src/components/keyboard/KeyBoard.vue

@@ -3,9 +3,10 @@ import { ref } from "vue";
 import KeyInfo from "./KeyInfo.vue";
 import KeySetting from "./KeySetting.vue";
 
-// TODO 3. 退出前再将store中的数据按键相关数据set到localStore
-// TODO 4. 右键空白区域添加按键
-// TODO 5. 左键可拖动按钮（并显示到顶部），右键按钮进行修改、删除
+// TODO 右键空白区域添加按键
+// TODO 左键可拖动按钮（并显示到顶部），右键按钮进行修改、删除
+// TODO 导入默认配置（重复的用新名称）
+// TODO 设置界面添加清空本地数据的按钮
 
 const keyInfoShowFlag = ref(false);
 </script>

src/components/keyboard/KeySetting.vue

@@ -12,10 +12,12 @@ import {
   NInput,
   useMessage,
 } from "naive-ui";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useGlobalStore } from "../../store/global";
+import { Store } from "@tauri-apps/plugin-store";
 
 const store = useGlobalStore();
+const localStore = new Store("store.bin");
 const message = useMessage();
 
 const showKeyInfoFlag = defineModel({ required: true });
@@ -37,22 +39,60 @@ const curKeyMappingrelativeSize = computed(() => {
   return store.keyMappingConfigList[store.curKeyMappingIndex].relativeSize;
 });
 
+const keySettingPos = { x: 100, y: 100 };
+
+onMounted(async () => {
+  // loading keySettingPos from local store
+  const lastPos: { x: number; y: number } | null = await localStore.get(
+    "keySettingPos"
+  );
+  if (lastPos === null) {
+    await localStore.set("keySettingPos", keySettingPos);
+  } else {
+    keySettingPos.x = lastPos.x;
+    keySettingPos.y = lastPos.y;
+  }
+  // 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`);
+  console.log("keySettingPos", keySettingPos);
+});
+
 function dragHandler(downEvent: MouseEvent) {
   const target = document.querySelector(
     ".keyboard .key-setting-btn"
   ) as HTMLElement;
-  downEvent.preventDefault();
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const maxWidth = keyboardElement.clientWidth - 40;
+  const maxHeight = keyboardElement.clientHeight - 40;
+
   const x = downEvent.clientX;
   const y = downEvent.clientY;
 
   let moveFlag = false;
-  let lastPosX = 100;
-  let lastPosY = 100;
   const moveHandler = (moveEvent: MouseEvent) => {
-    let right = lastPosX + x - moveEvent.clientX;
-    let bottom = lastPosY + y - moveEvent.clientY;
-    target.style.setProperty("right", `${right < 0 ? 0 : right}px`);
-    target.style.setProperty("bottom", `${bottom < 0 ? 0 : bottom}px`);
+    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 timer = setTimeout(() => {
@@ -66,10 +106,19 @@ function dragHandler(downEvent: MouseEvent) {
     window.removeEventListener("mousemove", moveHandler);
     window.removeEventListener("mouseup", upHandler);
     if (moveFlag) {
-      lastPosX = lastPosX + x - upEvent.clientX;
-      lastPosY = lastPosY + y - upEvent.clientY;
+      // 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);
     } else {
+      // click up
       showSetting.value = !showSetting.value;
     }
   };
@@ -88,6 +137,9 @@ function importKeyMappingConfig() {
   store.keyMappingConfigList.push(keyMappingConfig);
   store.curKeyMappingIndex = store.keyMappingConfigList.length - 1;
   showImportModal.value = false;
+  localStore.set("keyMappingConfigList", store.keyMappingConfigList);
+  localStore.set("curKeyMappingIndex", store.curKeyMappingIndex);
+  message.success("按键方案已导入");
 }
 </script>
 
@@ -97,6 +149,7 @@ function importKeyMappingConfig() {
     type="info"
     size="large"
     class="key-setting-btn"
+    title="长按可拖动"
     @mousedown="dragHandler"
   >
     <template #icon>
@@ -126,6 +179,7 @@ function importKeyMappingConfig() {
     <NFlex>
       <NButton @click="showImportModal = true">导入</NButton>
       <NButton>导出</NButton>
+      <NButton>导入默认</NButton>
       <NButton @click="showKeyInfoFlag = !showKeyInfoFlag">按键信息</NButton>
     </NFlex>
   </div>
@@ -150,8 +204,6 @@ function importKeyMappingConfig() {
 .key-setting-btn {
   position: absolute;
   z-index: 9;
-  right: 100px;
-  bottom: 100px;
 }
 
 .key-setting {