Merge pull request #7 from AkiChase/dev

Scrcpy Mask v0.1.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "scrcpy-mask",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "scrcpy-mask"
-version = "0.1.1"
+version = "0.1.2"
 description = "A Tauri App"
 authors = ["AkiChase"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "productName": "scrcpy-mask",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "identifier": "com.akichase.mask",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/components/Mask.vue

@@ -66,6 +66,8 @@ function toStartServer() {
   <template v-if="store.keyMappingConfigList.length">
     <div @contextmenu.prevent class="mask" id="maskElement"></div>
     <div class="button-layer">
+      <!-- <div style="position: absolute;height: 100%;width: 1px;background-color: red;left: 50%;"></div>
+      <div style="position: absolute;width: 100%;height: 1px;background-color: red;top: 56.6%;"></div> -->
       <template
         v-for="button in store.keyMappingConfigList[store.curKeyMappingIndex]
           .list"

src/components/keyboard/KeyBoard.vue

@@ -122,7 +122,9 @@ function isKeyUnique(curKey: string): boolean {
 function setCurButtonKey(curKey: string) {
   if (
     keyboardStore.activeButtonIndex === -1 ||
-    keyboardStore.activeButtonIndex >= store.editKeyMappingList.length
+    keyboardStore.activeButtonIndex >= store.editKeyMappingList.length||
+    keyboardStore.showButtonSettingFlag||
+    keyboardStore.showButtonAddFlag
   )
     return;
 

src/components/keyboard/KeyCommon.vue

@@ -101,9 +101,12 @@ function parseMacro(macroRaw: string): KeyMacroList {
   return macro;
 }
 
-let editedFlag = false;
+let macroEditedFlag = false;
 function editMacro() {
-  editedFlag = false;
+  macroEditedFlag = false;
+  keyboardStore.activeButtonIndex = -1;
+  keyboardStore.showButtonSettingFlag = false;
+
   const macro = (keyMapping.value as KeyMacro).macro;
   editedMacroRaw.value = {
     down: macro.down === null ? "" : JSON.stringify(macro.down, null, 2),
@@ -114,7 +117,7 @@ function editMacro() {
 }
 
 function saveMacro() {
-  if (!editedFlag) return;
+  if (!macroEditedFlag) return;
   try {
     const macro: {
       down: KeyMacroList;
@@ -234,47 +237,47 @@ function showSetting() {
         @update:value="keyboardStore.edited = true"
       />
     </NFormItem>
-    <NModal
-      v-if="keyMapping.type === 'Macro'"
-      v-model:show="showMacroModal"
-      @before-leave="saveMacro"
-    >
-      <NCard style="width: 50%; height: 80%" title="宏编辑">
-        <NFlex vertical style="height: 100%">
-          <div>按下按键执行</div>
-          <NInput
-            type="textarea"
-            style="flex-grow: 1"
-            placeholder="JSON宏代码, 可为空"
-            v-model:value="editedMacroRaw.down"
-            @update:value="editedFlag = true"
-            round
-            clearable
-          />
-          <div>按住执行</div>
-          <NInput
-            type="textarea"
-            style="flex-grow: 1"
-            placeholder="JSON宏代码, 可为空"
-            v-model:value="editedMacroRaw.loop"
-            @update:value="editedFlag = true"
-            round
-            clearable
-          />
-          <div>抬起执行</div>
-          <NInput
-            type="textarea"
-            style="flex-grow: 1"
-            placeholder="JSON宏代码, 可为空"
-            v-model:value="editedMacroRaw.up"
-            @update:value="editedFlag = true"
-            round
-            clearable
-          />
-        </NFlex>
-      </NCard>
-    </NModal>
   </div>
+  <NModal
+    v-if="keyMapping.type === 'Macro'"
+    v-model:show="showMacroModal"
+    @before-leave="saveMacro"
+  >
+    <NCard style="width: 50%; height: 80%" title="宏编辑">
+      <NFlex vertical style="height: 100%">
+        <div>按下按键执行</div>
+        <NInput
+          type="textarea"
+          style="flex-grow: 1"
+          placeholder="JSON宏代码, 可为空"
+          v-model:value="editedMacroRaw.down"
+          @update:value="macroEditedFlag = true"
+          round
+          clearable
+        />
+        <div>按住执行</div>
+        <NInput
+          type="textarea"
+          style="flex-grow: 1"
+          placeholder="JSON宏代码, 可为空"
+          v-model:value="editedMacroRaw.loop"
+          @update:value="macroEditedFlag = true"
+          round
+          clearable
+        />
+        <div>抬起执行</div>
+        <NInput
+          type="textarea"
+          style="flex-grow: 1"
+          placeholder="JSON宏代码, 可为空"
+          v-model:value="editedMacroRaw.up"
+          @update:value="macroEditedFlag = true"
+          round
+          clearable
+        />
+      </NFlex>
+    </NCard>
+  </NModal>
 </template>
 
 <style scoped lang="scss">

src/hotkey.ts

@@ -46,8 +46,13 @@ function clientPosToSkillOffset(
 ): { offsetX: number; offsetY: number } {
   const maxLength = (100 / maskSizeH) * screenSizeH;
   const centerX = maskSizeW * 0.5;
-  const centerY = maskSizeH * 0.55;
-  const cOffsetX = clientPos.x - 70 - centerX;
+  const centerY = maskSizeH * 0.5;
+
+  // The center of the game display is higher than the center of the mask
+  clientPos.y -= maskSizeH * 0.066;
+
+// w450 : h315 = 100 : 70, so the true offsetX is 0.7 * cOffsetX
+  const cOffsetX = (clientPos.x - 70 - centerX)*0.7;
   const cOffsetY = clientPos.y - 30 - centerY;
   const offsetD = Math.sqrt(cOffsetX ** 2 + cOffsetY ** 2);
   if (offsetD == 0) {
@@ -78,6 +83,7 @@ async function sleep(ms: number) {
 }
 
 function calculateMacroPosX(
+  // pos relative to the mask
   posX: [string, number] | number,
   relativeSizeW: number
 ): number {
@@ -99,6 +105,7 @@ function calculateMacroPosX(
 }
 
 function calculateMacroPosY(
+  // pos relative to the mask
   posY: [string, number] | number,
   relativeSizeH: number
 ): number {
@@ -131,8 +138,6 @@ function calculateMacroPosList(
   });
 }
 
-// TODO ? 技能界面实际上是有投影变换的，需要一定的算法，不能仅仅相对坐标 （640,400）
-
 // add shortcuts for observation
 function addObservationShortcuts(
   key: string,