refactor: keyInputFlag

src/components/Mask.vue

@@ -15,6 +15,7 @@ import ScreenStream from "./ScreenStream.vue";
 import { useI18n } from "vue-i18n";
 import { secondaryClean, secondaryInit } from "../tools/init";
 import { cleanAfterimage } from "../tools/tools";
+import { NonReactiveStore } from "../store/noneReactiveStore";
 
 const { t } = useI18n();
 const store = useGlobalStore();
@@ -29,7 +30,8 @@ onBeforeRouteLeave(() => {
   if (store.controledDevice) {
     unlistenToEvent();
     clearShortcuts();
-    if (store.keyInputFlag) KeyInputHandler.removeEventListener();
+    if (NonReactiveStore.mem.keyInputFlag)
+      KeyInputHandler.removeEventListener();
   }
 });
 
@@ -38,6 +40,7 @@ onActivated(async () => {
   if (initFlag) cleanAfterimage();
 
   if (store.controledDevice) {
+    console.log("applyShortcuts");
     if (
       applyShortcuts(
         store.keyMappingConfigList[store.curKeyMappingIndex],
@@ -152,6 +155,8 @@ function toStartServer() {
   user-select: none;
   -webkit-user-select: none;
   z-index: 2;
+  width: 100%;
+  height: 100%;
 }
 
 .button-layer {

src/hotkey.ts

@@ -33,6 +33,7 @@ import {
 } from "./frontcommand/android";
 import { UIEventsCode } from "./frontcommand/UIEventsCode";
 import { sendInjectKeycode, sendSetClipboard } from "./frontcommand/controlMsg";
+import { NonReactiveStore } from "./store/noneReactiveStore";
 
 function clientxToPosx(clientx: number) {
   return clientx < 70
@@ -1142,7 +1143,7 @@ export class KeyInputHandler {
       onClose: () => {
         KeyInputHandler.removeEventListener();
         listenToEvent(true);
-        store.keyInputFlag = false;
+        NonReactiveStore.mem.keyInputFlag = false;
       },
     });
     window.addEventListener("keydown", KeyInputHandler.handler);
@@ -1327,16 +1328,16 @@ async function execMacro(
           });
           break;
         case "key-input-mode":
-          if (!store.keyInputFlag) {
+          if (!NonReactiveStore.mem.keyInputFlag) {
             // on
             unlistenToEvent(true);
             KeyInputHandler.addEventListener();
-            store.keyInputFlag = true;
+            NonReactiveStore.mem.keyInputFlag = true;
           } else {
             // off
             KeyInputHandler.removeEventListener();
             listenToEvent(true);
-            store.keyInputFlag = false;
+            NonReactiveStore.mem.keyInputFlag = false;
           }
           break;
         default:

src/store/global.ts

@@ -69,8 +69,6 @@ export const useGlobalStore = defineStore("global", () => {
   const screenSizeW: Ref<number> = ref(0);
   const screenSizeH: Ref<number> = ref(0);
 
-  const keyInputFlag = ref(false);
-
   const curMaskSize = ref({
     w: 0,
     h: 0,
@@ -146,7 +144,6 @@ export const useGlobalStore = defineStore("global", () => {
     curMaskPos,
     screenSizeW,
     screenSizeH,
-    keyInputFlag, // TODO none reactive
     showLoadingFlag,
     controledDevice,
     editKeyMappingList,

src/store/noneReactiveStore.ts

@@ -2,6 +2,7 @@ import { LocalStore } from "./localStore";
 
 interface MemType {
   screenStreamClientId: string;
+  keyInputFlag: boolean;
 }
 
 interface LocalType {
@@ -17,6 +18,7 @@ interface LocalType {
 export class NonReactiveStore {
   static mem: MemType = {
     screenStreamClientId: "",
+    keyInputFlag: false,
   };
 
   static local: LocalType = {