From 06855046e6833d205bd2679e785b9624112b6350 Mon Sep 17 00:00:00 2001 From: AkiChase <1003019131@qq.com> Date: Wed, 19 Mar 2025 11:03:43 +0800 Subject: [PATCH] feat: add smooth delay for KeySteeringWheel --- src/components/Device.vue | 3 +- src/components/keyboard/KeyBoard.vue | 47 ++++++++----- src/components/keyboard/KeyCommon.vue | 15 +++-- src/components/keyboard/KeyFire.vue | 9 +-- src/components/keyboard/KeyObservation.vue | 9 +-- src/components/keyboard/KeySight.vue | 9 +-- src/components/keyboard/KeySkill.vue | 9 +-- src/components/keyboard/KeySteeringWheel.vue | 27 ++++++-- src/components/keyboard/KeySwipe.vue | 9 +-- src/components/keyboard/config.ts | 39 +++++++++++ src/i18n/en-US.json | 6 +- src/i18n/zh-CN.json | 6 +- src/tools/hotkey.ts | 69 ++++++++++++++------ src/tools/keyMappingConfig.ts | 2 + src/tools/tools.ts | 2 + 15 files changed, 191 insertions(+), 70 deletions(-) create mode 100644 src/components/keyboard/config.ts diff --git a/src/components/Device.vue b/src/components/Device.vue index 39113c9..fff45d5 100644 --- a/src/components/Device.vue +++ b/src/components/Device.vue @@ -495,12 +495,13 @@ function closeWS() { (keyMapping); keyMapping.pointerId = 3; - (keyMapping as KeyTap).time = 80; + keyMapping.time = 80; } else if (type === "Swipe") { + asType(keyMapping); keyMapping.pointerId = 3; - (keyMapping as KeyMappingKeySwipe).pos = [ - { x: keyMapping.posX, y: keyMapping.posY }, - ]; - (keyMapping as KeyMappingKeySwipe).intervalBetweenPos = 100; + keyMapping.pos = [{ x: keyMapping.posX, y: keyMapping.posY }]; + keyMapping.intervalBetweenPos = 100; } else if (type === "SteeringWheel") { + asType(keyMapping); keyMapping.pointerId = 1; - (keyMapping as unknown as KeyMappingSteeringWheel).key = { + keyMapping.key = { left: "NONE1", right: "NONE2", up: "NONE3", down: "NONE4", }; - (keyMapping as unknown as KeyMappingSteeringWheel).offset = 100; + keyMapping.offset = 100; + keyMapping.smoothDelay = 0; + keyMapping.delayStepLength = 25; } else if (type === "DirectionalSkill") { - (keyMapping as unknown as KeyDirectionalSkill).range = 30; + asType(keyMapping); + keyMapping.range = 30; } else if (type === "CancelSkill") { + asType(keyMapping); keyMapping.note = t("pages.KeyBoard.addButton.CancelSkill"); } else if (type === "Observation") { + asType(keyMapping); keyMapping.pointerId = 4; - (keyMapping as unknown as KeyMappingObservation).scale = 0.6; + keyMapping.scale = 0.6; } else if (type === "Macro") { - delete (keyMapping as any).pointerId; - (keyMapping as unknown as KeyMacro).macro = { + delete keyMapping.pointerId; + asType(keyMapping); + keyMapping.macro = { down: null, loop: null, up: null, @@ -137,9 +146,10 @@ function onAddButtonSelect( return; } } + asType(keyMapping); keyMapping.pointerId = 0; - (keyMapping as unknown as KeyMappingKeySight).scaleX = 0.5; - (keyMapping as unknown as KeyMappingKeySight).scaleY = 0.5; + keyMapping.scaleX = 0.5; + keyMapping.scaleY = 0.5; } else if (type === "Fire") { for (const mapping of store.editKeyMappingList) { if (mapping.type === "Fire") { @@ -147,10 +157,11 @@ function onAddButtonSelect( return; } } - delete (keyMapping as any).key; - (keyMapping as unknown as KeyMappingKeyFire).scaleX = 0.5; - (keyMapping as unknown as KeyMappingKeyFire).scaleY = 0.5; - (keyMapping as unknown as KeyMappingKeyFire).drag = false; + delete keyMapping.key; + asType(keyMapping); + keyMapping.scaleX = 0.5; + keyMapping.scaleY = 0.5; + keyMapping.drag = false; } else return; keyboardStore.edited = true; store.editKeyMappingList.push(keyMapping as KeyMapping); diff --git a/src/components/keyboard/KeyCommon.vue b/src/components/keyboard/KeyCommon.vue index 6756510..e2d062a 100644 --- a/src/components/keyboard/KeyCommon.vue +++ b/src/components/keyboard/KeyCommon.vue @@ -14,9 +14,14 @@ import { NInputNumber, } from "naive-ui"; import { CloseCircle, Settings } from "@vicons/ionicons5"; -import { KeyCommon, KeyMacro, KeyMacroList } from "../../tools/keyMappingConfig"; +import { + KeyCommon, + KeyMacro, + KeyMacroList, +} from "../../tools/keyMappingConfig"; import { useKeyboardStore } from "../../store/keyboard"; import { useI18n } from "vue-i18n"; +import { configKeyCommon } from "./config"; const props = defineProps<{ index: number; @@ -154,8 +159,8 @@ function showSetting() { const keyboardElement = document.getElementById( "keyboardElement" ) as HTMLElement; - const maxWidth = keyboardElement.clientWidth - 150; - const maxHeight = keyboardElement.clientHeight - 300; + const maxWidth = keyboardElement.clientWidth - configKeyCommon.settingW; + const maxHeight = keyboardElement.clientHeight - configKeyCommon.settingH; settingPosX.value = Math.min(keyMapping.value.posX + 25, maxWidth); settingPosY.value = Math.min(keyMapping.value.posY - 25, maxHeight); @@ -206,6 +211,8 @@ function showSetting() { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeyCommon.settingW}px`, + height: `${configKeyCommon.settingH}px`, }" > {{ @@ -305,8 +312,6 @@ function showSetting() { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 150px; - height: 300px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/KeyFire.vue b/src/components/keyboard/KeyFire.vue index 700a92b..e2e5e2e 100644 --- a/src/components/keyboard/KeyFire.vue +++ b/src/components/keyboard/KeyFire.vue @@ -13,6 +13,7 @@ import { import { CloseCircle, Settings } from "@vicons/ionicons5"; import { KeyFire } from "../../tools/keyMappingConfig"; import { useKeyboardStore } from "../../store/keyboard"; +import { configKeyFire } from "./config"; const props = defineProps<{ index: number; @@ -77,8 +78,8 @@ function showSetting() { const keyboardElement = document.getElementById( "keyboardElement" ) as HTMLElement; - const maxWidth = keyboardElement.clientWidth - 200; - const maxHeight = keyboardElement.clientHeight - 430; + const maxWidth = keyboardElement.clientWidth - configKeyFire.settingW; + const maxHeight = keyboardElement.clientHeight - configKeyFire.settingH; settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth); settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight); @@ -144,6 +145,8 @@ function changeDragSetting() { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeyFire.settingW}px`, + height: `${configKeyFire.settingH}px`, }" > {{ $t("pages.KeyBoard.KeyFire.fire") }} @@ -194,8 +197,6 @@ function changeDragSetting() { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 200px; - height: 430px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/KeyObservation.vue b/src/components/keyboard/KeyObservation.vue index 45476c9..5e43eca 100644 --- a/src/components/keyboard/KeyObservation.vue +++ b/src/components/keyboard/KeyObservation.vue @@ -5,6 +5,7 @@ import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui"; import { Eye, CloseCircle, Settings } from "@vicons/ionicons5"; import { KeyObservation } from "../../tools/keyMappingConfig"; import { useKeyboardStore } from "../../store/keyboard"; +import { configKeyObservation } from "./config"; const props = defineProps<{ index: number; @@ -69,8 +70,8 @@ function showSetting() { const keyboardElement = document.getElementById( "keyboardElement" ) as HTMLElement; - const maxWidth = keyboardElement.clientWidth - 150; - const maxHeight = keyboardElement.clientHeight - 300; + const maxWidth = keyboardElement.clientWidth - configKeyObservation.settingW; + const maxHeight = keyboardElement.clientHeight - configKeyObservation.settingH; settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth); settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight); @@ -122,6 +123,8 @@ function showSetting() { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeyObservation.settingW}px`, + height: `${configKeyObservation.settingH}px`, }" > {{ $t("pages.KeyBoard.Observation.observation") }} @@ -158,8 +161,6 @@ function showSetting() { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 150px; - height: 300px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/KeySight.vue b/src/components/keyboard/KeySight.vue index 12b994d..71377e9 100644 --- a/src/components/keyboard/KeySight.vue +++ b/src/components/keyboard/KeySight.vue @@ -5,6 +5,7 @@ import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui"; import { CloseCircle, Settings } from "@vicons/ionicons5"; import { KeySight } from "../../tools/keyMappingConfig"; import { useKeyboardStore } from "../../store/keyboard"; +import { configKeySight } from "./config"; const props = defineProps<{ index: number; @@ -69,8 +70,8 @@ function showSetting() { const keyboardElement = document.getElementById( "keyboardElement" ) as HTMLElement; - const maxWidth = keyboardElement.clientWidth - 200; - const maxHeight = keyboardElement.clientHeight - 380; + const maxWidth = keyboardElement.clientWidth - configKeySight.settingW; + const maxHeight = keyboardElement.clientHeight - configKeySight.settingH; settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth); settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight); @@ -132,6 +133,8 @@ function showSetting() { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeySight.settingW}px`, + height: `${configKeySight.settingH}px`, }" > {{ $t('pages.KeyBoard.KeySight.sight') }} @@ -176,8 +179,6 @@ function showSetting() { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 200px; - height: 380px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/KeySkill.vue b/src/components/keyboard/KeySkill.vue index a45a482..590c752 100644 --- a/src/components/keyboard/KeySkill.vue +++ b/src/components/keyboard/KeySkill.vue @@ -18,6 +18,7 @@ import { KeyTriggerWhenPressedSkill, } from "../../tools/keyMappingConfig"; import { useKeyboardStore } from "../../store/keyboard"; +import { configKeySkill } from "./config"; const props = defineProps<{ index: number; @@ -184,8 +185,8 @@ function showSetting() { "keyboardElement" ) as HTMLElement; // setting - const maxWidth = keyboardElement.clientWidth - 220; - const maxHeight = keyboardElement.clientHeight - 430; + const maxWidth = keyboardElement.clientWidth - configKeySkill.settingW; + const maxHeight = keyboardElement.clientHeight - configKeySkill.settingH; settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth); settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight); updateRangeIndicator(keyboardElement); @@ -258,6 +259,8 @@ function updateRangeIndicator(element?: HTMLElement) { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeySkill.settingW}px`, + height: `${configKeySkill.settingH}px`, }" > {{ $t("pages.KeyBoard.KeySkill.skill") }} @@ -373,8 +376,6 @@ function updateRangeIndicator(element?: HTMLElement) { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 220px; - height: 430px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/KeySteeringWheel.vue b/src/components/keyboard/KeySteeringWheel.vue index 94e5aee..a1064fa 100644 --- a/src/components/keyboard/KeySteeringWheel.vue +++ b/src/components/keyboard/KeySteeringWheel.vue @@ -5,6 +5,7 @@ import { KeySteeringWheel } from "../../tools/keyMappingConfig"; import { NButton, NFormItem, NH4, NIcon, NInput, NInputNumber } from "naive-ui"; import { CloseCircle, Move, Settings } from "@vicons/ionicons5"; import { useKeyboardStore } from "../../store/keyboard"; +import { configKeySteeringWheel } from "./config"; const props = defineProps<{ index: number; @@ -79,8 +80,8 @@ function showSetting() { const keyboardElement = document.getElementById( "keyboardElement" ) as HTMLElement; - const maxWidth = keyboardElement.clientWidth - 179; - const maxHeight = keyboardElement.clientHeight - 300; + const maxWidth = keyboardElement.clientWidth - configKeySteeringWheel.settingW; + const maxHeight = keyboardElement.clientHeight - configKeySteeringWheel.settingH; settingPosX.value = Math.min( keyMapping.value.posX + offset.value + 10, @@ -182,6 +183,8 @@ function showSetting() { :style="{ left: `${settingPosX}px`, top: `${settingPosY}px`, + width: `${configKeySteeringWheel.settingW}px`, + height: `${configKeySteeringWheel.settingH}px`, }" > {{ @@ -194,6 +197,24 @@ function showSetting() { @update:value="keyboardStore.edited = true" /> + + + + + + {{ $t("pages.KeyBoard.Swipe.swipe") }} @@ -293,8 +296,6 @@ function swipeTrackClickHandler(event: MouseEvent) { flex-direction: column; padding: 10px 20px; box-sizing: border-box; - width: 150px; - height: 380px; border-radius: 5px; border: 2px solid var(--light-color); background-color: var(--bg-color); diff --git a/src/components/keyboard/config.ts b/src/components/keyboard/config.ts new file mode 100644 index 0000000..ddd8dbb --- /dev/null +++ b/src/components/keyboard/config.ts @@ -0,0 +1,39 @@ +export const configKeyCommon = { + settingW: 150, + settingH: 300, +}; + +export const configKeyFire = { + settingW: 200, + settingH: 430, +}; + +export const configKeyMacro = { + settingW: 200, + settingH: 300, +}; + +export const configKeyObservation = { + settingW: 150, + settingH: 300, +}; + +export const configKeySight = { + settingW: 200, + settingH: 380, +}; + +export const configKeySkill = { + settingW: 220, + settingH: 430, +}; + +export const configKeySteeringWheel = { + settingW: 170, + settingH: 470, +}; + +export const configKeySwipe = { + settingW: 150, + settingH: 380, +}; diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json index 9fddc9d..6b2ad98 100644 --- a/src/i18n/en-US.json +++ b/src/i18n/en-US.json @@ -252,7 +252,11 @@ }, "SteeringWheel": { "steeringWheel": "SteeringWheel", - "offset": "Offset" + "offset": "Offset", + "smoothDelay": "Smooth Delay", + "delayStepLength": "Delay StepLength", + "smoothDelayPlaceholder": "Set 0 to disable smooth delay", + "delayStepLengthPlaceholder": "Smooth delay step length" }, "KeySight": { "sight": "Front sight", diff --git a/src/i18n/zh-CN.json b/src/i18n/zh-CN.json index 2868a33..730dd60 100644 --- a/src/i18n/zh-CN.json +++ b/src/i18n/zh-CN.json @@ -252,7 +252,11 @@ }, "SteeringWheel": { "steeringWheel": "键盘行走", - "offset": "偏移" + "offset": "偏移", + "smoothDelay": "平滑延迟", + "delayStepLength": "延迟步长", + "smoothDelayPlaceholder": "0则禁用平滑延迟", + "delayStepLengthPlaceholder": "平滑延迟的步长" }, "KeySight": { "sight": "准星", diff --git a/src/tools/hotkey.ts b/src/tools/hotkey.ts index e3db519..46ffadf 100644 --- a/src/tools/hotkey.ts +++ b/src/tools/hotkey.ts @@ -32,8 +32,12 @@ import { AndroidMetastate, } from "../frontcommand/android"; import { UIEventsCode } from "../frontcommand/UIEventsCode"; -import { sendInjectKeycode, sendSetClipboard } from "../frontcommand/controlMsg"; +import { + sendInjectKeycode, + sendSetClipboard, +} from "../frontcommand/controlMsg"; import { NonReactiveStore } from "../store/noneReactiveStore"; +import { asType } from "./tools"; function clientxToPosx(clientx: number) { return clientx < 70 @@ -515,19 +519,20 @@ function addDirectionalSkillShortcuts( // add shortcuts for steering wheel function addSteeringWheelKeyboardShortcuts( - key: wheelKey, + key: WheelKey, relativeSize: { w: number; h: number }, // pos relative to the mask posX: number, posY: number, offset: number, - pointerId: number + pointerId: number, + delay?: { smoothDelay: number; delayStepLength: number } ) { - let loopFlag = false; - let curPosX = 0; - let curPosY = 0; posX = Math.round((posX / relativeSize.w) * store.screenSizeW); posY = Math.round((posY / relativeSize.h) * store.screenSizeH); + let loopFlag = false; + let curPosX = posX; + let curPosY = posY; // calculate the end coordinates of the eight directions of the direction wheel let offsetHalf = Math.round(offset / 1.414); @@ -570,8 +575,29 @@ function addSteeringWheelKeyboardShortcuts( let newPos = calculatedPosList[newPosIndex]; if (newPos.x === curPosX && newPos.y === curPosY) return; - curPosX = newPos.x; - curPosY = newPos.y; + // TODO add config in KeySteeringWheel.vue + if (delay) { + const { smoothDelay, delayStepLength } = delay; + let movePosX = curPosX; + let movePosY = curPosY; + + curPosX = newPos.x; + curPosY = newPos.y; + + const delayTimes = Math.floor(smoothDelay / delayStepLength); + const deltaX = Math.floor((newPos.x - movePosX) / delayTimes); + const deltaY = Math.floor((newPos.y - movePosY) / delayTimes); + for (let i = 0; i < delayTimes; i++) { + movePosX += deltaX; + movePosY += deltaY; + await touchX(TouchAction.Move, pointerId, movePosX, movePosY); + await sleep(delayStepLength); + } + } else { + curPosX = newPos.x; + curPosY = newPos.y; + } + // move to the direction await touchX(TouchAction.Move, pointerId, newPos.x, newPos.y); }; @@ -584,7 +610,7 @@ function addSteeringWheelKeyboardShortcuts( downKeyMap.get(key.down) === false ) { // all wheel keys has been released - for (const k of ["left", "right", "up", "down"]) { + for (const k of ["left", "right", "up", "down"] as const) { // only delete the valid key loopDownKeyCBMap.delete(key[k]); upKeyCBMap.delete(key[k]); @@ -592,13 +618,13 @@ function addSteeringWheelKeyboardShortcuts( // touch up await touchX(TouchAction.Up, pointerId, curPosX, curPosY); // recover the status - curPosX = 0; - curPosY = 0; + curPosX = posX; + curPosY = posY; loopFlag = false; } }; - for (const k of ["left", "right", "up", "down"]) { + for (const k of ["left", "right", "up", "down"] as const) { addShortcut( key[k], async () => { @@ -618,13 +644,12 @@ function addSteeringWheelKeyboardShortcuts( } } -interface wheelKey { +type WheelKey = { left: string; right: string; up: string; down: string; - [key: string]: string; -} +}; // add baisc click shortcuts function addClickShortcuts(key: string, pointerId: number) { @@ -1359,9 +1384,6 @@ function execLoopCB() { if (loopFlag) requestAnimationFrame(execLoopCB); } -// change ts type -function asType(_val: any): asserts _val is T {} - function applyKeyMappingConfigShortcuts( keyMappingConfig: KeyMappingConfig ): boolean { @@ -1377,7 +1399,13 @@ function applyKeyMappingConfigShortcuts( item.posX, item.posY, item.offset, - item.pointerId + item.pointerId, + item.smoothDelay === 0 + ? undefined + : { + smoothDelay: item.smoothDelay, + delayStepLength: item.delayStepLength, + } ); break; case "DirectionalSkill": @@ -1513,6 +1541,7 @@ function applyKeyMappingConfigShortcuts( } } +// Wrapping of the touch action async function touchX( action: TouchAction, pointerId: number, @@ -1520,7 +1549,7 @@ async function touchX( posY: number, time?: number ) { - await touch({ + return touch({ action, pointerId, screen: { diff --git a/src/tools/keyMappingConfig.ts b/src/tools/keyMappingConfig.ts index 6dec92a..15c4b18 100644 --- a/src/tools/keyMappingConfig.ts +++ b/src/tools/keyMappingConfig.ts @@ -15,6 +15,8 @@ export interface KeySteeringWheel extends KeyBase { down: string; }; offset: number; + smoothDelay: number; + delayStepLength: number; } export interface KeyDirectionalSkill extends KeyBase { diff --git a/src/tools/tools.ts b/src/tools/tools.ts index 91da23e..258679f 100644 --- a/src/tools/tools.ts +++ b/src/tools/tools.ts @@ -41,3 +41,5 @@ export async function cleanAfterimage() { export function openWebsite(url: string) { shellOpen(url); } + +export function asType(_val: any): asserts _val is T {}