feat(hotkey): add new macro input-text

src/components/Device.vue

@@ -68,10 +68,10 @@ onMounted(async () => {
           deviceWaitForMetadataTask?.(payload.deviceName);
           break;
         case "ClipboardChanged":
-          console.log("剪切板变动", payload.clipboard);
+          console.log("ClipboardChanged", payload.clipboard);
           break;
         case "ClipboardSetAck":
-          console.log("剪切板设置成功", payload.sequence);
+          console.log("ClipboardSetAck", payload.sequence);
           break;
         default:
           console.log("Unknown reply", payload);

src/components/Mask.vue

@@ -1,33 +1,41 @@
 <script setup lang="ts">
-import { h, onActivated, onMounted } from "vue";
+import { h, nextTick, onActivated, onMounted, ref } from "vue";
-import { NDialog, useDialog, useMessage } from "naive-ui";
+import { NDialog, NInput, useDialog, useMessage } from "naive-ui";
 import { useGlobalStore } from "../store/global";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import {
   applyShortcuts,
   clearShortcuts,
-  listenToKeyEvent,
+  listenToEvent,
-  unlistenToKeyEvent,
+  unlistenToEvent,
   updateScreenSizeAndMaskArea,
 } from "../hotkey";
 import { KeySteeringWheel } from "../keyMappingConfig";
 import { getVersion } from "@tauri-apps/api/app";
 import { fetch } from "@tauri-apps/plugin-http";
 import { open } from "@tauri-apps/plugin-shell";
+import { sendSetClipboard } from "../frontcommand/controlMsg";
+import { getCurrent } from "@tauri-apps/api/webview";
+import { PhysicalSize } from "@tauri-apps/api/dpi";
 
 const store = useGlobalStore();
 const router = useRouter();
 const message = useMessage();
 const dialog = useDialog();
 
+const showInputBoxRef = ref(false);
+const inputBoxVal = ref("");
+const inputInstRef = ref<HTMLInputElement | null>(null);
+
 onBeforeRouteLeave(() => {
   if (store.controledDevice) {
-    unlistenToKeyEvent();
+    unlistenToEvent();
     clearShortcuts();
   }
 });
 
 onActivated(async () => {
+  cleanAfterimage();
   const maskElement = document.getElementById("maskElement") as HTMLElement;
 
   if (store.controledDevice) {
@@ -42,7 +50,7 @@ onActivated(async () => {
         store.keyMappingConfigList[store.curKeyMappingIndex]
       )
     ) {
-      listenToKeyEvent();
+      listenToEvent();
     } else {
       message.error("按键方案异常，请删除此方案");
     }
@@ -52,8 +60,53 @@ onActivated(async () => {
 onMounted(() => {
   store.checkUpdate = checkUpdate;
   checkUpdate();
+  store.showInputBox = showInputBox;
 });
 
+async function cleanAfterimage() {
+  const appWindow = getCurrent();
+  const oSize = await appWindow.size();
+  await appWindow.setSize(new PhysicalSize(oSize.width, oSize.height - 1));
+  await appWindow.setSize(oSize);
+}
+
+function handleInputKeyUp(event: KeyboardEvent) {
+  if (event.key === "Enter") {
+    pasteText();
+  } else if (event.key === "Escape") {
+    showInputBox(false);
+  }
+}
+
+function showInputBox(flag: boolean) {
+  if (flag) {
+    unlistenToEvent();
+    inputBoxVal.value = "";
+    showInputBoxRef.value = true;
+    document.addEventListener("keyup", handleInputKeyUp);
+    nextTick(() => {
+      inputInstRef.value?.focus();
+    });
+  } else {
+    document.removeEventListener("keyup", handleInputKeyUp);
+    showInputBoxRef.value = false;
+    listenToEvent();
+    nextTick(() => {
+      cleanAfterimage();
+    });
+  }
+}
+
+function pasteText() {
+  showInputBox(false);
+  if (!inputBoxVal.value) return;
+  sendSetClipboard({
+    sequence: new Date().getTime() % 100000,
+    text: inputBoxVal.value,
+    paste: true,
+  });
+}
+
 function toStartServer() {
   router.replace({ name: "device" });
 }
@@ -114,6 +167,14 @@ async function checkUpdate() {
   </div>
   <template v-if="store.keyMappingConfigList.length">
     <div @contextmenu.prevent class="mask" id="maskElement"></div>
+    <div v-show="showInputBoxRef" class="input-box">
+      <NInput
+        ref="inputInstRef"
+        v-model:value="inputBoxVal"
+        type="text"
+        placeholder="Input text and then press enter/esc"
+      />
+    </div>
     <div
       v-if="store.maskButton.show"
       :style="'--transparency: ' + store.maskButton.transparency"
@@ -174,6 +235,26 @@ async function checkUpdate() {
   z-index: 2;
 }
 
+.input-box {
+  z-index: 4;
+  position: absolute;
+  left: 70px;
+  top: 30px;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  .n-input {
+    width: 50%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 15%;
+    margin: auto;
+    background-color: var(--content-bg-color);
+  }
+}
+
 .button-layer {
   position: absolute;
   left: 70px;
@@ -220,7 +301,6 @@ async function checkUpdate() {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1;
   position: absolute;
   left: 70px;
   top: 30px;

src/components/keyboard/KeyBoard.vue

@@ -73,10 +73,10 @@ function onAddButtonSelect(
     (keyMapping as KeyTap).time = 80;
   } else if (type === "SteeringWheel") {
     (keyMapping as unknown as KeyMappingSteeringWheel).key = {
-      left: "NONE",
+      left: "NONE1",
-      right: "NONE",
+      right: "NONE2",
-      up: "NONE",
+      up: "NONE3",
-      down: "NONE",
+      down: "NONE4",
     };
     (keyMapping as unknown as KeyMappingSteeringWheel).offset = 100;
   } else if (type === "DirectionalSkill") {

src/hotkey.ts

@@ -18,6 +18,7 @@ import {
   KeyTriggerWhenDoublePressedSkill,
   KeyTriggerWhenPressedSkill,
 } from "./keyMappingConfig";
+import { useGlobalStore } from "./store/global";
 
 function clientxToPosx(clientx: number) {
   return clientx < 70
@@ -948,6 +949,12 @@ function addShortcut(
  *     1000,
  *   ],
  *  },
+ *  // input-text
+ *  {
+ *    type: "input-text",
+ *    // 1:on, 2:off
+ *    args: [1]
+ *  }
  * ]);
  */
 async function execMacro(
@@ -1025,6 +1032,15 @@ async function execMacro(
             intervalBetweenPos: cmd.args[3],
           });
           break;
+        case "input-text":
+          if (cmd.args[0] === 1) {
+            // on
+            useGlobalStore().showInputBox(true);
+          } else {
+            // off
+            useGlobalStore().showInputBox(false);
+          }
+          break;
         default:
           console.error("Invalid command: ", cmd);
           return;
@@ -1175,25 +1191,29 @@ function applyKeyMappingConfigShortcuts(
   }
 }
 
-export function listenToKeyEvent() {
+export function listenToEvent() {
   window.addEventListener("keydown", keydownHandler);
   window.addEventListener("keyup", keyupHandler);
+  window.addEventListener("mousedown", handleMouseDown);
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("mouseup", handleMouseUp);
+  window.addEventListener("wheel", handleMouseWheel);
   loopFlag = true;
   execLoopCB();
 }
 
-export function unlistenToKeyEvent() {
+export function unlistenToEvent() {
   window.removeEventListener("keydown", keydownHandler);
   window.removeEventListener("keyup", keyupHandler);
-  loopFlag = false;
-}
-
-export function clearShortcuts() {
   window.removeEventListener("mousedown", handleMouseDown);
   window.removeEventListener("mousemove", handleMouseMove);
   window.removeEventListener("mouseup", handleMouseUp);
   window.removeEventListener("wheel", handleMouseWheel);
 
+  loopFlag = false;
+}
+
+export function clearShortcuts() {
   downKeyMap.clear();
   downKeyCBMap.clear();
   loopDownKeyCBMap.clear();
@@ -1216,11 +1236,6 @@ export function applyShortcuts(
   keyMappingConfig: KeyMappingConfig
 ) {
   maskElement = element;
-  window.addEventListener("mousedown", handleMouseDown);
-  window.addEventListener("mousemove", handleMouseMove);
-  window.addEventListener("mouseup", handleMouseUp);
-  window.addEventListener("wheel", handleMouseWheel);
-
   addClickShortcuts("M0", 0);
   return applyKeyMappingConfigShortcuts(keyMappingConfig);
 }

src/keyMappingConfig.ts

@@ -59,7 +59,7 @@ interface KeyTap extends Key {
   time: number;
 }
 
-type KeyMacroType = "touch" | "sleep" | "swipe";
+type KeyMacroType = "touch" | "sleep" | "swipe" | "input-text";
 type KeyMacroArgs = any[];
 
 type KeyMacroList = Array<{

src/store/global.ts

@@ -39,6 +39,8 @@ export const useGlobalStore = defineStore("global", () => {
     show: true,
   });
 
+  const showInputBox: (_: boolean) => void = (_: boolean) => {};
+
   let checkUpdate: () => Promise<void> = async () => {};
 
   function applyEditKeyMappingList(): boolean {
@@ -90,6 +92,7 @@ export const useGlobalStore = defineStore("global", () => {
     curKeyMappingIndex,
     editKeyMappingList,
     maskButton,
+    showInputBox,
     applyEditKeyMappingList,
     resetEditKeyMappingList,
     setKeyMappingIndex,