Merge pull request #28 from AkiChase/dev

Scrcpy Mask v0.3.0
This commit is contained in:
如初 2024-05-19 11:39:18 +08:00 committed by GitHub
commit b282c77b16
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 1029 additions and 259 deletions

View File

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

View File

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

View File

@ -14,6 +14,8 @@
"window:allow-is-maximizable",
"window:allow-start-dragging",
"window:allow-unmaximize",
"window:allow-set-cursor-position",
"window:allow-set-cursor-visible",
"store:default",
"store:allow-get",
"store:allow-set",

View File

@ -1,4 +1,5 @@
[
{"list":[{"key":{"down":"KeyS","left":"KeyA","right":"KeyD","up":"KeyW"},"note":"方向轮盘","offset":175,"pointerId":1,"posX":183,"posY":566,"type":"SteeringWheel"},{"key":"KeyQ","note":"技能1","pointerId":2,"posX":951,"posY":636,"range":30,"type":"DirectionalSkill"},{"key":"KeyE","note":"技能2","pointerId":2,"posX":1025,"posY":500,"range":30,"type":"DirectionalSkill"},{"key":"AltLeft","note":"技能3","pointerId":2,"posX":1160,"posY":420,"range":30,"type":"DirectionalSkill"},{"key":"Space","note":"取消技能","pointerId":2,"posX":1160,"posY":140,"type":"CancelSkill"},{"key":"KeyB","note":"回城","pointerId":3,"posX":650,"posY":650,"time":80,"type":"Tap"},{"key":"KeyC","note":"回复","pointerId":3,"posX":740,"posY":650,"time":80,"type":"Tap"},{"key":"KeyF","note":"召唤师技能","pointerId":2,"posX":838,"posY":647,"range":50,"type":"DirectionalSkill"},{"key":"M2","note":"攻击","pointerId":3,"posX":1174,"posY":618,"time":80,"type":"Tap"},{"key":"Digit1","note":"技能1升级","pointerId":3,"posX":880,"posY":560,"time":80,"type":"Tap"},{"key":"Digit2","note":"技能2升级","pointerId":3,"posX":960,"posY":430,"time":80,"type":"Tap"},{"key":"Digit3","note":"技能3升级","pointerId":3,"posX":1090,"posY":350,"time":80,"type":"Tap"},{"key":"Digit5","note":"快速购买1","pointerId":3,"posX":133,"posY":289,"time":80,"type":"Tap"},{"key":"Digit6","note":"快速购买2","pointerId":3,"posX":130,"posY":370,"time":80,"type":"Tap"},{"key":"M3","note":"观察","pointerId":4,"posX":1000,"posY":200,"scale":1,"type":"Observation"},{"key":"Tab","macro":{"down":[{"args":["default",5,1185,40,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1220,100,80],"type":"touch"}]},"note":"战绩面板","posX":1185,"posY":40,"type":"Macro"},{"key":"ShiftLeft","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1200,60,80],"type":"touch"}]},"note":"商店","posX":44,"posY":302,"type":"Macro"},{"key":"KeyZ","macro":{"down":[{"args":["default",5,250,230,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,640,150,80],"type":"touch"}]},"note":"地图","posX":250,"posY":230,"type":"Macro"},{"key":"Backquote","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,510,630,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1165,575,80],"type":"touch"},{"args":["default",5,1200,65,80],"type":"touch"},{"args":[200],"type":"sleep"},{"args":["default",5,125,300,80],"type":"touch"}],"loop":null,"up":null},"note":"换装2","posX":236,"posY":66,"type":"Macro"},{"directional":false,"key":"ControlLeft","note":"","pointerId":2,"posX":839,"posY":647,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"directional":false,"key":"M4","note":"","pointerId":2,"posX":952,"posY":636,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"directional":false,"key":"WheelDown","note":"","pointerId":2,"posX":1155,"posY":280,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"key":"Enter","macro":{"down":[{"args":["default",5,1245,280,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1160,560,80],"type":"touch"},{"args":[1],"type":"input-text"}],"loop":null,"up":null},"note":"聊天","posX":1244,"posY":281,"type":"Macro"}],"relativeSize":{"h":720,"w":1280},"title":"AVD-王者荣耀-三技能-导入默认"},
{"list":[{"key":{"down":"KeyS","left":"KeyA","right":"KeyD","up":"KeyW"},"note":"方向轮盘","offset":175,"pointerId":1,"posX":183,"posY":566,"type":"SteeringWheel"},{"key":"KeyQ","note":"技能1","pointerId":2,"posX":952,"posY":636,"range":50,"type":"DirectionalSkill"},{"key":"AltLeft","note":"技能2","pointerId":2,"posX":979,"posY":526,"range":50,"type":"DirectionalSkill"},{"key":"KeyE","note":"技能3","pointerId":2,"posX":1074,"posY":438,"range":50,"type":"DirectionalSkill"},{"key":"Space","note":"取消技能","pointerId":2,"posX":1160,"posY":140,"type":"CancelSkill"},{"key":"KeyB","note":"回城","pointerId":3,"posX":644,"posY":650,"time":80,"type":"Tap"},{"key":"KeyC","note":"回复","pointerId":3,"posX":742,"posY":650,"time":80,"type":"Tap"},{"key":"KeyF","note":"召唤师技能","pointerId":2,"posX":838,"posY":647,"range":50,"type":"DirectionalSkill"},{"key":"M2","note":"攻击","pointerId":3,"posX":1179,"posY":621,"time":80,"type":"Tap"},{"key":"Digit1","note":"技能1升级","pointerId":3,"posX":895,"posY":564,"time":80,"type":"Tap"},{"key":"Digit2","note":"技能2升级","pointerId":3,"posX":922,"posY":456,"time":80,"type":"Tap"},{"key":"Digit3","note":"技能3升级","pointerId":3,"posX":1015,"posY":376,"time":80,"type":"Tap"},{"key":"Digit5","note":"快速购买1","pointerId":3,"posX":133,"posY":289,"time":80,"type":"Tap"},{"key":"Digit6","note":"快速购买2","pointerId":3,"posX":130,"posY":370,"time":80,"type":"Tap"},{"key":"M3","note":"观察","pointerId":4,"posX":1000,"posY":200,"scale":1,"type":"Observation"},{"key":"Tab","macro":{"down":[{"args":["default",5,1185,40,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1220,100,80],"type":"touch"}]},"note":"战绩面板","posX":1185,"posY":40,"type":"Macro"},{"key":"ShiftLeft","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1200,60,80],"type":"touch"}]},"note":"商店","posX":44,"posY":302,"type":"Macro"},{"key":"KeyZ","macro":{"down":[{"args":["default",5,250,230,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,640,150,80],"type":"touch"}]},"note":"地图","posX":250,"posY":230,"type":"Macro"},{"key":"Backquote","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,510,630,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1165,575,80],"type":"touch"},{"args":["default",5,1200,65,80],"type":"touch"},{"args":[200],"type":"sleep"},{"args":["default",5,125,300,80],"type":"touch"}],"loop":null,"up":null},"note":"换装2","posX":236,"posY":66,"type":"Macro"},{"key":"WheelDown","note":"","pointerId":2,"posX":1189,"posY":422,"range":50,"type":"DirectionalSkill"},{"directional":false,"key":"M4","note":"","pointerId":2,"posX":951,"posY":636,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"type":"Macro","key":"Enter","note":"聊天","posX":1250,"posY":307,"macro":{"down":[{"args":["default",5,1245,280,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1160,560,80],"type":"touch"},{"args":[1],"type":"input-text"}],"loop":null,"up":null}},{"type":"TriggerWhenPressedSkill","key":"WheelUp","note":"装备技能","posX":1157,"posY":276,"pointerId":2,"directional":false,"rangeOrTime":80}],"relativeSize":{"h":720,"w":1280},"title":"AVD-王者荣耀-四技能-导入默认"}
{"list":[{"key":{"down":"KeyS","left":"KeyA","right":"KeyD","up":"KeyW"},"note":"方向轮盘","offset":175,"pointerId":1,"posX":183,"posY":566,"type":"SteeringWheel"},{"key":"KeyQ","note":"技能1","pointerId":2,"posX":952,"posY":636,"range":50,"type":"DirectionalSkill"},{"key":"AltLeft","note":"技能2","pointerId":2,"posX":979,"posY":526,"range":50,"type":"DirectionalSkill"},{"key":"KeyE","note":"技能3","pointerId":2,"posX":1074,"posY":438,"range":50,"type":"DirectionalSkill"},{"key":"Space","note":"取消技能","pointerId":2,"posX":1160,"posY":140,"type":"CancelSkill"},{"key":"KeyB","note":"回城","pointerId":3,"posX":644,"posY":650,"time":80,"type":"Tap"},{"key":"KeyC","note":"回复","pointerId":3,"posX":742,"posY":650,"time":80,"type":"Tap"},{"key":"KeyF","note":"召唤师技能","pointerId":2,"posX":838,"posY":647,"range":50,"type":"DirectionalSkill"},{"key":"M2","note":"攻击","pointerId":3,"posX":1179,"posY":621,"time":80,"type":"Tap"},{"key":"Digit1","note":"技能1升级","pointerId":3,"posX":895,"posY":564,"time":80,"type":"Tap"},{"key":"Digit2","note":"技能2升级","pointerId":3,"posX":922,"posY":456,"time":80,"type":"Tap"},{"key":"Digit3","note":"技能3升级","pointerId":3,"posX":1015,"posY":376,"time":80,"type":"Tap"},{"key":"Digit5","note":"快速购买1","pointerId":3,"posX":133,"posY":289,"time":80,"type":"Tap"},{"key":"Digit6","note":"快速购买2","pointerId":3,"posX":130,"posY":370,"time":80,"type":"Tap"},{"key":"M3","note":"观察","pointerId":4,"posX":1000,"posY":200,"scale":1,"type":"Observation"},{"key":"Tab","macro":{"down":[{"args":["default",5,1185,40,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1220,100,80],"type":"touch"}]},"note":"战绩面板","posX":1185,"posY":40,"type":"Macro"},{"key":"ShiftLeft","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1200,60,80],"type":"touch"}]},"note":"商店","posX":44,"posY":302,"type":"Macro"},{"key":"KeyZ","macro":{"down":[{"args":["default",5,250,230,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,640,150,80],"type":"touch"}]},"note":"地图","posX":250,"posY":230,"type":"Macro"},{"key":"Backquote","macro":{"down":[{"args":["default",5,40,300,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,510,630,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1165,575,80],"type":"touch"},{"args":["default",5,1200,65,80],"type":"touch"},{"args":[200],"type":"sleep"},{"args":["default",5,125,300,80],"type":"touch"}],"loop":null,"up":null},"note":"换装2","posX":236,"posY":66,"type":"Macro"},{"key":"WheelDown","note":"","pointerId":2,"posX":1189,"posY":422,"range":50,"type":"DirectionalSkill"},{"directional":false,"key":"M4","note":"","pointerId":2,"posX":951,"posY":636,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"type":"Macro","key":"Enter","note":"聊天","posX":1250,"posY":307,"macro":{"down":[{"args":["default",5,1245,280,80],"type":"touch"},{"args":[150],"type":"sleep"},{"args":["default",5,1160,560,80],"type":"touch"},{"args":[1],"type":"input-text"}],"loop":null,"up":null}},{"type":"TriggerWhenPressedSkill","key":"WheelUp","note":"装备技能","posX":1157,"posY":276,"pointerId":2,"directional":false,"rangeOrTime":80}],"relativeSize":{"h":720,"w":1280},"title":"AVD-王者荣耀-四技能-导入默认"},
{"list":[{"key":"Backquote","note":"准星键","pointerId":0,"posX":640,"posY":361,"scaleX":1,"scaleY":1,"type":"Sight"},{"key":{"down":"KeyS","left":"KeyA","right":"KeyD","up":"KeyW"},"note":"","offset":150,"pointerId":1,"posX":208,"posY":542,"type":"SteeringWheel"},{"key":"KeyC","note":"","pointerId":3,"posX":1085,"posY":668,"time":80,"type":"Tap"},{"key":"KeyZ","note":"","pointerId":3,"posX":1207,"posY":648,"time":80,"type":"Tap"},{"key":"Space","note":"","pointerId":3,"posX":1230,"posY":503,"time":80,"type":"Tap"},{"key":"M3","note":"","pointerId":4,"posX":992,"posY":229,"scale":0.6,"type":"Observation"},{"key":"Digit1","note":"","pointerId":3,"posX":543,"posY":642,"time":80,"type":"Tap"},{"key":"Digit2","note":"","pointerId":3,"posX":729,"posY":644,"time":80,"type":"Tap"},{"key":"ShiftLeft","note":"","pointerId":3,"posX":1075,"posY":194,"time":80,"type":"Tap"},{"key":"KeyF","note":"","pointerId":3,"posX":861,"posY":310,"time":80,"type":"Tap"},{"key":"KeyG","note":"","pointerId":3,"posX":865,"posY":388,"time":80,"type":"Tap"},{"key":"KeyR","note":"","pointerId":3,"posX":976,"posY":674,"time":80,"type":"Tap"},{"key":"KeyE","note":"","pointerId":3,"posX":872,"posY":495,"time":80,"type":"Tap"},{"key":"KeyB","note":"","pointerId":3,"posX":543,"posY":593,"time":80,"type":"Tap"},{"key":"KeyN","note":"","pointerId":3,"posX":721,"posY":589,"time":80,"type":"Tap"},{"drag":false,"note":"","pointerId":2,"posX":1097,"posY":549,"scaleX":0.5,"scaleY":0.5,"type":"Fire"},{"key":"M2","note":"","pointerId":3,"posX":1227,"posY":376,"time":80,"type":"Tap"},{"key":"Tab","macro":{"down":[{"args":["default",5,100,650,80],"type":"touch"}],"loop":null,"up":[{"args":["default",5,1250,40,80],"type":"touch"}]},"note":"背包宏","posX":95,"posY":656,"type":"Macro"},{"key":"M1","note":"地图","pointerId":3,"posX":1244,"posY":43,"time":80,"type":"Tap"},{"key":"KeyV","note":"","pointerId":3,"posX":1156,"posY":300,"time":80,"type":"Tap"},{"key":"M4","note":"","pointerId":3,"posX":862,"posY":180,"time":80,"type":"Tap"},{"key":"KeyT","note":"","pointerId":3,"posX":880,"posY":674,"time":80,"type":"Tap"},{"key":"KeyQ","note":"","pointerId":3,"posX":400,"posY":679,"time":80,"type":"Tap"},{"key":"Digit4","note":"","pointerId":3,"posX":766,"posY":251,"time":80,"type":"Tap"},{"key":"Digit5","note":"","pointerId":3,"posX":770,"posY":320,"time":80,"type":"Tap"},{"key":"Digit3","note":"","pointerId":3,"posX":788,"posY":591,"time":80,"type":"Tap"}],"relativeSize":{"h":720,"w":1280},"title":"AVD-和平精英-导入默认"}
]

View File

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

View File

@ -51,7 +51,9 @@ onActivated(async () => {
if (
applyShortcuts(
maskElement,
store.keyMappingConfigList[store.curKeyMappingIndex]
store.keyMappingConfigList[store.curKeyMappingIndex],
message,
t
)
) {
listenToEvent();
@ -334,7 +336,7 @@ async function checkUpdate() {
top: button.posY - 14 + 'px',
}"
>
{{ button.key }}
{{ button.type === "Fire" ? "Fire" : button.key }}
</div>
</template>
</div>

View File

@ -6,6 +6,9 @@ import KeyCommon from "./KeyCommon.vue";
import KeySteeringWheel from "./KeySteeringWheel.vue";
import KeySkill from "./KeySkill.vue";
import KeyObservation from "./KeyObservation.vue";
import KeySight from "./KeySight.vue";
import KeyFire from "./KeyFire.vue";
import {
KeyDirectionalSkill,
KeySteeringWheel as KeyMappingSteeringWheel,
@ -13,6 +16,8 @@ import {
KeyTap,
KeyMacro,
KeyMapping,
KeySight as KeyMappingKeySight,
KeyFire as KeyMappingKeyFire,
} from "../../keyMappingConfig";
import { useGlobalStore } from "../../store/global";
import { DropdownOption, NDropdown, useDialog, useMessage } from "naive-ui";
@ -52,6 +57,14 @@ const addButtonOptions: DropdownOption[] = [
label: () => t("pages.KeyBoard.addButton.Macro"),
key: "Macro",
},
{
label: () => t("pages.KeyBoard.addButton.Sight"),
key: "Sight",
},
{
label: () => t("pages.KeyBoard.addButton.Fire"),
key: "Fire",
},
];
function onAddButtonSelect(
@ -62,6 +75,8 @@ function onAddButtonSelect(
| "CancelSkill"
| "Observation"
| "Macro"
| "Sight"
| "Fire"
) {
keyboardStore.showButtonAddFlag = false;
const keyMapping = {
@ -70,11 +85,13 @@ function onAddButtonSelect(
note: "",
posX: addButtonPos.value.x - 70,
posY: addButtonPos.value.y - 30,
pointerId: 2, // default skill pointerId
pointerId: 2, // default skill and fire pointerId
};
if (type === "Tap") {
keyMapping.pointerId = 3;
(keyMapping as KeyTap).time = 80;
} else if (type === "SteeringWheel") {
keyMapping.pointerId = 1;
(keyMapping as unknown as KeyMappingSteeringWheel).key = {
left: "NONE1",
right: "NONE2",
@ -87,14 +104,36 @@ function onAddButtonSelect(
} else if (type === "CancelSkill") {
keyMapping.note = t("pages.KeyBoard.addButton.CancelSkill");
} else if (type === "Observation") {
keyMapping.pointerId = 4;
(keyMapping as unknown as KeyMappingObservation).scale = 0.6;
} else if (type === "Macro") {
delete (keyMapping as any).pointerId;
(keyMapping as unknown as KeyMacro).macro = {
down: null,
loop: null,
up: null,
};
delete (keyMapping as any).pointerId;
} else if (type === "Sight") {
for (const mapping of store.editKeyMappingList) {
if (mapping.type === "Sight") {
message.error(t("pages.KeyBoard.addButton.existSight"));
return;
}
}
keyMapping.pointerId = 0;
(keyMapping as unknown as KeyMappingKeySight).scaleX = 0.5;
(keyMapping as unknown as KeyMappingKeySight).scaleY = 0.5;
} else if (type === "Fire") {
for (const mapping of store.editKeyMappingList) {
if (mapping.type === "Fire") {
message.error(t("pages.KeyBoard.addButton.existFire"));
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;
} else return;
keyboardStore.edited = true;
store.editKeyMappingList.push(keyMapping as KeyMapping);
@ -115,7 +154,7 @@ function isKeyUnique(curKey: string): boolean {
return false;
set.add((keyMapping as KeyMappingSteeringWheel).key[name]);
}
} else {
} else if (keyMapping.type !== "Fire") {
if (set.has(keyMapping.key as string)) return false;
set.add(keyMapping.key as string);
}
@ -169,10 +208,11 @@ function setCurButtonKey(curKey: string) {
const curName = nameList[activeSteeringWheelButtonKeyIndex];
keyObject[curName] = curKey;
}
} else {
keyboardStore.edited = true;
} else if (keyMapping.type !== "Fire") {
keyMapping.key = curKey;
keyboardStore.edited = true;
}
keyboardStore.edited = true;
}
function handleClick(event: MouseEvent) {
@ -314,6 +354,14 @@ onBeforeRouteLeave(() => {
v-else-if="store.editKeyMappingList[index].type === 'Observation'"
:index="index"
/>
<KeySight
v-else-if="store.editKeyMappingList[index].type === 'Sight'"
:index="index"
/>
<KeyFire
v-else-if="store.editKeyMappingList[index].type === 'Fire'"
:index="index"
/>
<KeyCommon v-else :index="index" />
</template>
</div>

View File

@ -210,14 +210,14 @@ function showSetting() {
>
<NH4 prefix="bar">{{
keyMapping.type === "CancelSkill"
? "技能取消"
? t("pages.KeyBoard.KeyCommon.cancelSkill")
: keyMapping.type === "Tap"
? "普通点击"
: "宏"
? t("pages.KeyBoard.KeyCommon.tap")
: t("pages.KeyBoard.KeyCommon.macro")
}}</NH4>
<NFormItem
v-if="keyMapping.type === 'Macro'"
:label="$t('pages.KeyBoard.KeyCommon.macro')"
:label="$t('pages.KeyBoard.KeyCommon.macroCode')"
>
<NButton type="success" @click="editMacro">
{{ $t("pages.KeyBoard.KeyCommon.editMacro") }}
@ -267,7 +267,7 @@ function showSetting() {
<NInput
type="textarea"
style="flex-grow: 1"
placeholder="$t('pages.KeyBoard.KeyCommon.macroModal.placeholder')"
:placeholder="$t('pages.KeyBoard.KeyCommon.macroModal.placeholder')"
v-model:value="editedMacroRaw.down"
@update:value="macroEditedFlag = true"
round

View File

@ -0,0 +1,255 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { useGlobalStore } from "../../store/global";
import {
NIcon,
NButton,
NFormItem,
NInput,
NH4,
NInputNumber,
NCheckbox,
} from "naive-ui";
import { CloseCircle, Settings } from "@vicons/ionicons5";
import { KeyFire } from "../../keyMappingConfig";
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(
() => store.editKeyMappingList[props.index] as KeyFire
);
function dragHandler(downEvent: MouseEvent) {
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
if (element) {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxX = keyboardElement.clientWidth - 30;
const maxY = keyboardElement.clientHeight - 30;
const x = downEvent.clientX;
const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => {
let newX = oldX + moveEvent.clientX - x;
let newY = oldY + moveEvent.clientY - y;
newX = Math.max(30, Math.min(newX, maxX));
newY = Math.max(30, Math.min(newY, maxY));
keyMapping.value.posX = newX;
keyMapping.value.posY = newY;
};
window.addEventListener("mousemove", moveHandler);
const upHandler = () => {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
}
}
function delCurKeyMapping() {
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
const settingPosX = ref(0);
const settingPosY = ref(0);
function showSetting() {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxWidth = keyboardElement.clientWidth - 200;
const maxHeight = keyboardElement.clientHeight - 430;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
keyboardStore.showButtonSettingFlag = true;
}
function changeDragSetting() {
keyMapping.value.drag = !keyMapping.value.drag;
keyboardStore.edited = true;
}
</script>
<template>
<div
:class="{ active: isActive }"
:style="{
left: `${keyMapping.posX - 30}px`,
top: `${keyMapping.posY - 30}px`,
}"
@mousedown="dragHandler"
class="key-fire"
ref="elementRef"
>
<NIcon size="25">
<svg
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M562.333538 310.665846a43.716923 43.716923 0 0 0-59.746461-1.181538l-301.528615 276.440615a39.424 39.424 0 0 0-1.181539 57.265231l190.070154 190.227692a39.345231 39.345231 0 0 0 57.225846-1.339077l276.558769-301.528615a43.598769 43.598769 0 0 0-1.260307-59.707077l-160.137847-160.177231zM149.385846 663.236923a41.550769 41.550769 0 0 0-58.564923 0 41.550769 41.550769 0 0 0 0 58.525539l222.641231 222.601846a41.432615 41.432615 0 0 0 58.525538-58.564923L149.385846 663.236923zM879.143385 118.350769c-63.015385-1.851077-195.465846 8.073846-281.796923 109.331693-1.457231 2.953846-15.596308 31.586462 6.222769 53.563076l150.173538 151.000616c5.710769 5.435077 24.339692 19.298462 53.326769 2.953846 40.093538-38.4 109.686154-127.606154 108.819693-282.269538-0.787692-28.750769-26.190769-33.831385-36.745846-34.579693z"
></path>
</svg>
</NIcon>
<NButton
class="key-close-btn"
text
@click="delCurKeyMapping"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
<NIcon size="15">
<CloseCircle />
</NIcon>
</template>
</NButton>
<NButton
class="key-setting-btn"
text
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
<NIcon size="15">
<Settings />
</NIcon>
</template>
</NButton>
</div>
<div
class="key-setting"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">{{ $t("pages.KeyBoard.KeyFire.fire") }}</NH4>
<NCheckbox
@click="changeDragSetting"
:checked="keyMapping.drag"
style="margin-bottom: 20px"
>{{ $t("pages.KeyBoard.KeyFire.drag") }}</NCheckbox
>
<NFormItem :label="$t('pages.KeyBoard.KeyFire.scaleX')">
<NInputNumber
v-model:value="keyMapping.scaleX"
:placeholder="$t('pages.KeyBoard.KeyFire.scalePlaceholder')"
:show-button="false"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.KeyFire.scaleY')">
<NInputNumber
v-model:value="keyMapping.scaleY"
:placeholder="$t('pages.KeyBoard.KeyFire.scalePlaceholder')"
:show-button="false"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.setting.pointerID')">
<NInputNumber
v-model:value="keyMapping.pointerId"
:min="0"
:placeholder="$t('pages.KeyBoard.setting.pointerIDPlaceholder')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.setting.note')">
<NInput
v-model:value="keyMapping.note"
:placeholder="$t('pages.KeyBoard.setting.notePlaceholder')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
</div>
</template>
<style scoped lang="scss">
.key-setting {
position: absolute;
display: flex;
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);
z-index: 3;
}
.key-fire {
position: absolute;
height: 60px;
width: 60px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid var(--blue-color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: bold;
cursor: pointer;
.n-icon {
color: var(--blue-color);
}
&:not(.active):hover {
border: 2px solid var(--light-color);
color: var(--light-color);
.n-icon {
color: var(--light-color);
}
}
.key-close-btn {
position: absolute;
left: 65px;
bottom: 45px;
}
.key-setting-btn {
position: absolute;
left: 65px;
top: 45px;
}
}
.active {
border: 2px solid var(--primary-color);
color: var(--primary-color);
z-index: 2;
.n-icon {
color: var(--primary-color);
}
}
</style>

View File

@ -73,7 +73,7 @@ function showSetting() {
const maxHeight = keyboardElement.clientHeight - 300;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
keyboardStore.showButtonSettingFlag = true;
}
</script>

View File

@ -0,0 +1,237 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { useGlobalStore } from "../../store/global";
import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui";
import { CloseCircle, Settings } from "@vicons/ionicons5";
import { KeySight } from "../../keyMappingConfig";
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(
() => store.editKeyMappingList[props.index] as KeySight
);
function dragHandler(downEvent: MouseEvent) {
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
if (element) {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxX = keyboardElement.clientWidth - 30;
const maxY = keyboardElement.clientHeight - 30;
const x = downEvent.clientX;
const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => {
let newX = oldX + moveEvent.clientX - x;
let newY = oldY + moveEvent.clientY - y;
newX = Math.max(30, Math.min(newX, maxX));
newY = Math.max(30, Math.min(newY, maxY));
keyMapping.value.posX = newX;
keyMapping.value.posY = newY;
};
window.addEventListener("mousemove", moveHandler);
const upHandler = () => {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
}
}
function delCurKeyMapping() {
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
const settingPosX = ref(0);
const settingPosY = ref(0);
function showSetting() {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxWidth = keyboardElement.clientWidth - 200;
const maxHeight = keyboardElement.clientHeight - 380;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
keyboardStore.showButtonSettingFlag = true;
}
</script>
<template>
<div
:class="{ active: isActive }"
:style="{
left: `${keyMapping.posX - 30}px`,
top: `${keyMapping.posY - 30}px`,
}"
@mousedown="dragHandler"
class="key-sight"
ref="elementRef"
>
<NIcon size="25">
<svg
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M65.472 479.232A448 448 0 0 1 481.28 64.32V32a32 32 0 1 1 64 0v32.448a448 448 0 0 1 413.952 415.808h33.152a32 32 0 1 1 0 64h-33.28a448.064 448.064 0 0 1-414.784 413.888v33.28a32 32 0 1 1-64 0v-33.28a448.064 448.064 0 0 1-414.912-414.912H32a32 32 0 1 1 0-64h33.472z m64.192 0h94.72a32 32 0 0 1 0 64h-94.72a384.064 384.064 0 0 0 350.656 350.72V800a32 32 0 0 1 64 0v93.952a384.128 384.128 0 0 0 350.592-349.632h-94.72a32 32 0 1 1 0-64h94.848A384 384 0 0 0 545.28 128.64v94.272a32 32 0 0 1-64 0V128.512a383.744 383.744 0 0 0-351.616 350.72z m318.656 32a64 64 0 1 1 128 0 64 64 0 0 1-128 0z"
></path>
</svg>
</NIcon>
<span>{{ keyMapping.key }}</span>
<NButton
class="key-close-btn"
text
@click="delCurKeyMapping"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
<NIcon size="15">
<CloseCircle />
</NIcon>
</template>
</NButton>
<NButton
class="key-setting-btn"
text
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
<NIcon size="15">
<Settings />
</NIcon>
</template>
</NButton>
</div>
<div
class="key-setting"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">{{ $t('pages.KeyBoard.KeySight.sight') }}</NH4>
<NFormItem :label="$t('pages.KeyBoard.KeySight.scaleX')">
<NInputNumber
v-model:value="keyMapping.scaleX"
:placeholder="$t('pages.KeyBoard.KeySight.scalePlaceholder')"
:show-button="false"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.KeySight.scaleY')">
<NInputNumber
v-model:value="keyMapping.scaleY"
:placeholder="$t('pages.KeyBoard.KeySight.scalePlaceholder')"
:show-button="false"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.setting.pointerID')">
<NInputNumber
v-model:value="keyMapping.pointerId"
:min="0"
:placeholder="$t('pages.KeyBoard.setting.pointerIDPlaceholder')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem :label="$t('pages.KeyBoard.setting.note')">
<NInput
v-model:value="keyMapping.note"
:placeholder="$t('pages.KeyBoard.setting.notePlaceholder')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
</div>
</template>
<style scoped lang="scss">
.key-setting {
position: absolute;
display: flex;
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);
z-index: 3;
}
.key-sight {
position: absolute;
height: 60px;
width: 60px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid var(--blue-color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: bold;
cursor: pointer;
.n-icon {
color: var(--blue-color);
}
&:not(.active):hover {
border: 2px solid var(--light-color);
color: var(--light-color);
.n-icon {
color: var(--light-color);
}
}
.key-close-btn {
position: absolute;
left: 65px;
bottom: 45px;
}
.key-setting-btn {
position: absolute;
left: 65px;
top: 45px;
}
}
.active {
border: 2px solid var(--primary-color);
color: var(--primary-color);
z-index: 2;
.n-icon {
color: var(--primary-color);
}
}
</style>

View File

@ -184,10 +184,10 @@ function showSetting() {
"keyboardElement"
) as HTMLElement;
// setting
const maxWidth = keyboardElement.clientWidth - 200;
const maxHeight = keyboardElement.clientHeight - 420;
const maxWidth = keyboardElement.clientWidth - 220;
const maxHeight = keyboardElement.clientHeight - 430;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
updateRangeIndicator(keyboardElement);
keyboardStore.showButtonSettingFlag = true;
}
@ -373,8 +373,8 @@ function updateRangeIndicator(element?: HTMLElement) {
flex-direction: column;
padding: 10px 20px;
box-sizing: border-box;
width: 200px;
height: 420px;
width: 220px;
height: 430px;
border-radius: 5px;
border: 2px solid var(--light-color);
background-color: var(--bg-color);

View File

@ -79,7 +79,7 @@ function showSetting() {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxWidth = keyboardElement.clientWidth - 150;
const maxWidth = keyboardElement.clientWidth - 179;
const maxHeight = keyboardElement.clientHeight - 300;
settingPosX.value = Math.min(
@ -219,7 +219,7 @@ function showSetting() {
flex-direction: column;
padding: 10px 20px;
box-sizing: border-box;
width: 150px;
width: 170px;
height: 300px;
border-radius: 5px;
border: 2px solid var(--light-color);

View File

@ -1,4 +1,5 @@
// https://github.com/jamiebuilds/tinykeys/pull/193/commits/2598ecb3db6b3948c7acbf0e7bd8b0674961ad61
import { useMessage } from "naive-ui";
import {
SwipeAction,
TouchAction,
@ -9,16 +10,20 @@ import {
KeyCancelSkill,
KeyDirectionalSkill,
KeyDirectionlessSkill,
KeyFire,
KeyMacro,
KeyMacroList,
KeyMappingConfig,
KeyObservation,
KeySight,
KeySteeringWheel,
KeyTap,
KeyTriggerWhenDoublePressedSkill,
KeyTriggerWhenPressedSkill,
} from "./keyMappingConfig";
import { useGlobalStore } from "./store/global";
import { LogicalPosition, getCurrent } from "@tauri-apps/api/window";
import { useI18n } from "vue-i18n";
function clientxToPosx(clientx: number) {
return clientx < 70
@ -144,6 +149,7 @@ function calculateMacroPosList(
function addObservationShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the mask
posX: number,
posY: number,
scale: number,
@ -158,46 +164,23 @@ function addObservationShortcuts(
async () => {
observationMouseX = clientxToPosx(mouseX);
observationMouseY = clientyToPosy(mouseY);
await touch({
action: TouchAction.Down,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
});
await touchX(TouchAction.Down, pointerId, posX, posY);
},
async () => {
await touch({
action: TouchAction.Move,
await touchX(
TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + clientxToPosOffsetx(mouseX, observationMouseX, scale),
y: posY + clientyToPosOffsety(mouseY, observationMouseY, scale),
},
});
posX + clientxToPosOffsetx(mouseX, observationMouseX, scale),
posY + clientyToPosOffsety(mouseY, observationMouseY, scale)
);
},
async () => {
await touch({
action: TouchAction.Up,
await touchX(
TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + clientxToPosOffsetx(mouseX, observationMouseY, scale),
y: posY + clientyToPosOffsety(mouseY, observationMouseY, scale),
},
});
posX + clientxToPosOffsetx(mouseX, observationMouseY, scale),
posY + clientyToPosOffsety(mouseY, observationMouseY, scale)
);
}
);
}
@ -207,6 +190,7 @@ function addTapShortcuts(
key: string,
relativeSize: { w: number; h: number },
time: number,
// pos relative to the mask
posX: number,
posY: number,
pointerId: number
@ -216,19 +200,7 @@ function addTapShortcuts(
addShortcut(
key,
async () => {
await touch({
action: TouchAction.Default,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
time,
});
await touchX(TouchAction.Default, pointerId, posX, posY, time);
},
undefined,
undefined
@ -239,6 +211,7 @@ function addTapShortcuts(
function addCancelSkillShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the mask
posX: number,
posY: number,
pointerId: number
@ -262,33 +235,11 @@ function addCancelSkillShortcuts(
}
let distance = 0;
while (distance <= 20) {
await touch({
action: TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + distance,
y: posY,
},
});
await touchX(TouchAction.Move, pointerId, posX + distance, posY);
await sleep(5);
distance += 1;
}
await touch({
action: TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
});
await touchX(TouchAction.Up, pointerId, posX, posY);
},
undefined,
undefined
@ -299,7 +250,7 @@ function addCancelSkillShortcuts(
function addTriggerWhenPressedSkillShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the device
// pos relative to the mask
posX: number,
posY: number,
directional: boolean,
@ -346,19 +297,7 @@ function addTriggerWhenPressedSkillShortcuts(
key,
async () => {
await upDoublePressedKey();
await touch({
action: TouchAction.Default,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
time: rangeOrTime,
});
await touchX(TouchAction.Default, pointerId, posX, posY, rangeOrTime);
},
undefined,
undefined
@ -371,7 +310,7 @@ const doublePressedDownKey = new Map<string, boolean>();
function addTriggerWhenDoublePressedSkillShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the device
// pos relative to the mask
posX: number,
posY: number,
range: number,
@ -414,18 +353,12 @@ function addTriggerWhenDoublePressedSkillShortcuts(
{ x: mouseX, y: mouseY },
range
);
await touch({
action: TouchAction.Move,
await touchX(
TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + loopSkillOffset.offsetX,
y: posY + loopSkillOffset.offsetY,
},
});
posX + loopSkillOffset.offsetX,
posY + loopSkillOffset.offsetY
);
});
} else {
// second press: touch up
@ -435,18 +368,12 @@ function addTriggerWhenDoublePressedSkillShortcuts(
{ x: mouseX, y: mouseY },
range
);
await touch({
action: TouchAction.Up,
await touchX(
TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + skillOffset.offsetX,
y: posY + skillOffset.offsetY,
},
});
posX + skillOffset.offsetX,
posY + skillOffset.offsetY
);
// set the flag to false
doublePressedDownKey.set(key, false);
}
@ -460,7 +387,7 @@ function addTriggerWhenDoublePressedSkillShortcuts(
function addDirectionlessSkillShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the device
// pos relative to the mask
posX: number,
posY: number,
pointerId: number
@ -473,18 +400,7 @@ function addDirectionlessSkillShortcuts(
async () => {
// up doublepress skill
await upDoublePressedKey();
await touch({
action: TouchAction.Down,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
});
await touchX(TouchAction.Down, pointerId, posX, posY);
},
// loop
undefined,
@ -520,7 +436,7 @@ async function upDoublePressedKey() {
function addDirectionalSkillShortcuts(
key: string,
relativeSize: { w: number; h: number },
// pos relative to the device
// pos relative to the mask
posX: number,
posY: number,
range: number,
@ -561,18 +477,12 @@ function addDirectionalSkillShortcuts(
{ x: mouseX, y: mouseY },
range
);
await touch({
action: TouchAction.Move,
await touchX(
TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + skillOffset.offsetX,
y: posY + skillOffset.offsetY,
},
});
posX + skillOffset.offsetX,
posY + skillOffset.offsetY
);
},
// up
async () => {
@ -580,18 +490,12 @@ function addDirectionalSkillShortcuts(
{ x: mouseX, y: mouseY },
range
);
await touch({
action: TouchAction.Up,
await touchX(
TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX + skillOffset.offsetX,
y: posY + skillOffset.offsetY,
},
});
posX + skillOffset.offsetX,
posY + skillOffset.offsetY
);
},
true
);
@ -601,7 +505,7 @@ function addDirectionalSkillShortcuts(
function addSteeringWheelKeyboardShortcuts(
key: wheelKey,
relativeSize: { w: number; h: number },
// pos relative to the device
// pos relative to the mask
posX: number,
posY: number,
offset: number,
@ -657,15 +561,7 @@ function addSteeringWheelKeyboardShortcuts(
curPosX = newPos.x;
curPosY = newPos.y;
// move to the direction
await touch({
action: TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: newPos,
});
await touchX(TouchAction.Move, pointerId, newPos.x, newPos.y);
};
const unitedUpCB = async () => {
@ -682,18 +578,7 @@ function addSteeringWheelKeyboardShortcuts(
upKeyCBMap.delete(key[k]);
}
// touch up
await touch({
action: TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: curPosX,
y: curPosY,
},
});
await touchX(TouchAction.Up, pointerId, curPosX, curPosY);
// recover the status
curPosX = 0;
curPosY = 0;
@ -711,18 +596,7 @@ function addSteeringWheelKeyboardShortcuts(
upKeyCBMap.set(key[k], unitedUpCB);
// touch down on the center position
await touch({
action: TouchAction.Down,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
});
await touchX(TouchAction.Down, pointerId, posX, posY);
// add loopCB
loopDownKeyCBMap.set(key[k], unitedloopCB);
},
@ -745,50 +619,304 @@ function addClickShortcuts(key: string, pointerId: number) {
addShortcut(
key,
async () => {
await touch({
action: TouchAction.Down,
await touchX(
TouchAction.Down,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: clientxToPosx(mouseX),
y: clientyToPosy(mouseY),
},
});
clientxToPosx(mouseX),
clientyToPosy(mouseY)
);
},
async () => {
await touch({
action: TouchAction.Move,
await touchX(
TouchAction.Move,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: clientxToPosx(mouseX),
y: clientyToPosy(mouseY),
},
});
clientxToPosx(mouseX),
clientyToPosy(mouseY)
);
},
async () => {
await touch({
action: TouchAction.Up,
await touchX(
TouchAction.Up,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: clientxToPosx(mouseX),
y: clientyToPosy(mouseY),
},
});
clientxToPosx(mouseX),
clientyToPosy(mouseY)
);
}
);
}
function addSightShortcuts(
relativeSize: { w: number; h: number },
sightKeyMapping: KeySight,
fireKeyMapping?: KeyFire
) {
const appWindow = getCurrent();
let mouseLock = false;
let msgReactive: ReturnType<typeof message.info> | null = null;
const sightClientX = 70 + sightKeyMapping.posX;
const sightClientY = 30 + sightKeyMapping.posY;
const sightDeviceX = Math.round(
(sightKeyMapping.posX / relativeSize.w) * screenSizeW
);
const sightDeviceY = Math.round(
(sightKeyMapping.posY / relativeSize.h) * screenSizeH
);
const fireDeviceX = fireKeyMapping
? Math.round((fireKeyMapping.posX / relativeSize.w) * screenSizeW)
: 0;
const fireDeviceY = fireKeyMapping
? Math.round((fireKeyMapping.posY / relativeSize.h) * screenSizeH)
: 0;
const removeShortcut = (key: string) => {
loopDownKeyCBMap.delete(key);
downKeyCBMap.delete(key);
upKeyCBMap.delete(key);
downKeyMap.delete(key);
};
const touchRelateToSight = async (action: TouchAction) => {
await touchX(
action,
sightKeyMapping.pointerId,
sightDeviceX +
clientxToPosOffsetx(mouseX, sightDeviceX, sightKeyMapping.scaleX),
sightDeviceY +
clientyToPosOffsety(mouseY, sightDeviceY, sightKeyMapping.scaleY)
);
};
const sightLoopCB = async () => {
await touchRelateToSight(TouchAction.Move);
};
// only scaleX and scaleY are different from sightLoopCB
const fireNoDragLoopCB = fireKeyMapping
? async () => {
await touchX(
TouchAction.Move,
sightKeyMapping.pointerId,
sightDeviceX +
clientxToPosOffsetx(mouseX, sightDeviceX, fireKeyMapping.scaleX),
sightDeviceY +
clientyToPosOffsety(mouseY, sightDeviceY, fireKeyMapping.scaleY)
);
}
: undefined;
const fireDragLoopCB = fireKeyMapping
? async () => {
await touchX(
TouchAction.Move,
fireKeyMapping.pointerId,
fireDeviceX +
accOffsetX +
clientxToPosOffsetx(mouseX, sightDeviceX, fireKeyMapping.scaleX),
fireDeviceY +
accOffsetY +
clientyToPosOffsety(mouseY, sightDeviceY, fireKeyMapping.scaleY)
);
}
: undefined;
let accOffsetX = 0;
let accOffsetY = 0;
const moveLeaveHandler = async () => {
if (fireKeyMapping && fireKeyMapping.drag && downKeyMap.get("M0")) {
// fire drag mode
// stop fireDragLoopCB
loopDownKeyCBMap.delete(sightKeyMapping.key);
// cal accOffset
accOffsetX += clientxToPosOffsetx(
mouseX,
sightDeviceX,
fireKeyMapping.scaleX
);
accOffsetY += clientyToPosOffsety(
mouseY,
sightDeviceY,
fireKeyMapping.scaleY
);
// move mouse
await appWindow.setCursorPosition(
new LogicalPosition(sightClientX, sightClientY)
);
mouseX = sightClientX;
mouseY = sightClientY;
// start fireDragLoopCB
loopDownKeyCBMap.set(sightKeyMapping.key, fireDragLoopCB!);
} else {
// sight mode or fire without drag mode
const fireFlag =
fireKeyMapping && !fireKeyMapping.drag && downKeyMap.get("M0");
// stop sightLoopCB or fireNoDragLoopCB
loopDownKeyCBMap.delete(sightKeyMapping.key);
// touch up
if (fireFlag) {
await touchX(
TouchAction.Move,
sightKeyMapping.pointerId,
sightDeviceX +
clientxToPosOffsetx(mouseX, sightDeviceX, fireKeyMapping.scaleX),
sightDeviceY +
clientyToPosOffsety(mouseY, sightDeviceY, fireKeyMapping.scaleY)
);
} else {
await touchRelateToSight(TouchAction.Up);
}
// move mouse
await appWindow.setCursorPosition(
new LogicalPosition(sightClientX, sightClientY)
);
mouseX = sightClientX;
mouseY = sightClientY;
// touch down
await touchX(
TouchAction.Down,
sightKeyMapping.pointerId,
sightDeviceX,
sightDeviceY
);
// start sightLoopCB or fireNoDragLoopCB
loopDownKeyCBMap.set(
sightKeyMapping.key,
fireFlag ? fireNoDragLoopCB! : sightLoopCB
);
}
};
// add sight shortcut
addShortcut(sightKeyMapping.key, async () => {
if (mouseLock) {
// stop sight mode
loopDownKeyCBMap.delete(sightKeyMapping.key);
await touchRelateToSight(TouchAction.Up);
await appWindow.setCursorVisible(true);
maskElement.removeEventListener("mouseleave", moveLeaveHandler);
maskElement.style.cursor = "pointer";
mouseLock = false;
if (msgReactive) {
msgReactive.destroy();
msgReactive = null;
}
// remove fire key
if (fireKeyMapping) {
removeShortcut("M0");
}
// add click
addClickShortcuts("M0", 0);
} else {
// start sight mode
await appWindow.setCursorVisible(false);
maskElement.addEventListener("mouseleave", moveLeaveHandler);
maskElement.style.cursor = "none";
mouseLock = true;
msgReactive = message.info(
t("pages.Mask.sightMode", [sightKeyMapping.key]),
{
duration: 0,
}
);
await appWindow.setCursorPosition(
new LogicalPosition(sightClientX, sightClientY)
);
mouseX = sightClientX;
mouseY = sightClientY;
await touchX(
TouchAction.Down,
sightKeyMapping.pointerId,
sightDeviceX,
sightDeviceY
);
loopDownKeyCBMap.set(sightKeyMapping.key, sightLoopCB);
// remove click
removeShortcut("M0");
// add fire key
if (fireKeyMapping) {
// fire with drag
addShortcut(
"M0",
async () => {
// stop sightLoopCB
loopDownKeyCBMap.delete(sightKeyMapping.key);
// touch up sight
await touchRelateToSight(TouchAction.Up);
if (!fireKeyMapping.drag) {
// touch down sight
await touchX(
TouchAction.Down,
sightKeyMapping.pointerId,
sightDeviceX,
sightDeviceY
);
} else {
// clear accumulated offset
accOffsetX = 0;
accOffsetY = 0;
}
// move cursor
await appWindow.setCursorPosition(
new LogicalPosition(sightClientX, sightClientY)
);
mouseX = sightClientX;
mouseY = sightClientY;
// touch down fire
await touchX(
TouchAction.Down,
fireKeyMapping.pointerId,
fireDeviceX,
fireDeviceY
);
// start fireDragLoopCB or fireNoDragLoopCB
loopDownKeyCBMap.set(
sightKeyMapping.key,
fireKeyMapping.drag ? fireDragLoopCB! : fireNoDragLoopCB!
);
},
undefined,
async () => {
// stop fireDragLoopCB or fireNoDragLoopCB
loopDownKeyCBMap.delete(sightKeyMapping.key);
// touch up fire
await touchX(
TouchAction.Up,
fireKeyMapping.pointerId,
fireDeviceX +
clientxToPosOffsetx(
mouseX,
sightDeviceX,
fireKeyMapping.scaleX
),
fireDeviceY +
clientyToPosOffsety(mouseY, sightDeviceY, fireKeyMapping.scaleY)
);
// touch down sight
await touchX(
TouchAction.Down,
sightKeyMapping.pointerId,
sightDeviceX,
sightDeviceY
);
// move cursor
await appWindow.setCursorPosition(
new LogicalPosition(sightClientX, sightClientY)
);
mouseX = sightClientX;
mouseY = sightClientY;
// start sightLoopCB
loopDownKeyCBMap.set(sightKeyMapping.key, sightLoopCB);
}
);
}
}
});
}
let screenSizeW: number;
let screenSizeH: number;
let maskSizeW: number;
@ -796,6 +924,8 @@ let maskSizeH: number;
let mouseX = 0;
let mouseY = 0;
let maskElement: HTMLElement;
let message: ReturnType<typeof useMessage>;
let t: ReturnType<typeof useI18n>["t"];
const downKeyMap: Map<string, boolean> = new Map();
const downKeyCBMap: Map<string, () => Promise<void>> = new Map();
@ -1008,19 +1138,13 @@ async function execMacro(
console.error("Invalid touch action: ", cmd.args[0]);
return;
}
await touch({
action: touchAction,
pointerId: cmd.args[1],
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: calculateMacroPosX(cmd.args[2], relativeSize.w),
y: calculateMacroPosY(cmd.args[3], relativeSize.h),
},
time: cmd.args.length > 4 ? cmd.args[4] : undefined,
});
await touchX(
touchAction,
cmd.args[1],
calculateMacroPosX(cmd.args[2], relativeSize.w),
calculateMacroPosY(cmd.args[3], relativeSize.h),
cmd.args.length > 4 ? cmd.args[4] : undefined
);
break;
case "swipe":
let swipeAction;
@ -1195,6 +1319,19 @@ function applyKeyMappingConfigShortcuts(
}
);
break;
case "Sight":
asType<KeySight>(item);
let fireKeyMapping;
for (const keyMapping of keyMappingConfig.list) {
if (keyMapping.type === "Fire") {
fireKeyMapping = keyMapping;
break;
}
}
addSightShortcuts(relativeSize, item, fireKeyMapping);
break;
case "Fire":
break;
default:
console.error("Invalid item type: ", item);
break;
@ -1208,6 +1345,28 @@ function applyKeyMappingConfigShortcuts(
}
}
async function touchX(
action: TouchAction,
pointerId: number,
posX: number,
posY: number,
time?: number
) {
await touch({
action,
pointerId,
screen: {
w: screenSizeW,
h: screenSizeH,
},
pos: {
x: posX,
y: posY,
},
time,
});
}
export function listenToEvent() {
window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);
@ -1250,9 +1409,14 @@ export function updateScreenSizeAndMaskArea(
export function applyShortcuts(
element: HTMLElement,
keyMappingConfig: KeyMappingConfig
keyMappingConfig: KeyMappingConfig,
messageAPI: ReturnType<typeof useMessage>,
i18nT: ReturnType<typeof useI18n>["t"]
) {
maskElement = element;
message = messageAPI;
t = i18nT;
addClickShortcuts("M0", 0);
return applyKeyMappingConfigShortcuts(keyMappingConfig);
}

View File

@ -61,7 +61,8 @@
"title": "Controlled device not found",
"content": "Please go to the device page to control any device",
"positiveText": "To control"
}
},
"sightMode": "Mouse is locked, press {0} to unlock"
},
"Setting": {
"tabs": {
@ -132,13 +133,16 @@
"Skill": "Skill",
"CancelSkill": "CancelSkill",
"Observation": "Observation",
"Macro": "Macro"
"Macro": "Macro",
"Sight": "Front sight",
"Fire": "Fire",
"existFire": "Fire button already exists",
"existSight": "Front sight button already exists"
},
"buttonKeyRepeat": "Key repeat: {0}",
"KeyCommon": {
"macroParseSuccess": "The macro code is parsed successfully, but the correctness of the code is not guaranteed. Please test by yourself.",
"macroParseFailed": "Macro code failed to save, please check whether the code format is correct.",
"macro": "Macro code",
"editMacro": "Edit macro",
"macroModal": {
"title": "Macro editor",
@ -146,7 +150,11 @@
"placeholder": "JSON macro code, can be empty",
"loop": "Macro executed on key press and hold",
"up": "Macro executed on key up"
}
},
"macroCode": "Macro code",
"cancelSkill": "CancelSkill",
"tap": "Tap",
"macro": "Macro"
},
"setting": {
"touchTime": "Touch duration",
@ -218,6 +226,19 @@
"SteeringWheel": {
"steeringWheel": "SteeringWheel",
"offset": "Offset"
},
"KeySight": {
"sight": "Front sight",
"scaleX": "Horizontal sensitivity",
"scalePlaceholder": "Please enter sensitivity",
"scaleY": "Vertical sensitivity"
},
"KeyFire": {
"fire": "Fire",
"drag": "Drag to cast",
"scaleX": "Horizontal sensitivity",
"scalePlaceholder": "Please enter sensitivity",
"scaleY": "Vertical sensitivity"
}
}
},

View File

@ -61,7 +61,8 @@
"content": "请前往设备页面,控制任意设备",
"positiveText": "去控制"
},
"inputBoxPlaceholder": "输入文本后按Enter/Esc"
"inputBoxPlaceholder": "输入文本后按Enter/Esc",
"sightMode": "鼠标已锁定, 按 {0} 键解锁"
},
"Setting": {
"tabs": {
@ -125,7 +126,11 @@
"Skill": "技能",
"CancelSkill": "技能取消",
"Observation": "观察视角",
"Macro": "宏"
"Macro": "宏",
"Sight": "准星",
"Fire": "开火",
"existSight": "已存在准星按钮",
"existFire": "已存在开火按钮"
},
"buttonKeyRepeat": "按键重复: {0}",
"noSaveDialog": {
@ -138,7 +143,6 @@
"KeyCommon": {
"macroParseSuccess": "宏代码解析成功,但不保证代码正确性,请自行测试",
"macroParseFailed": "宏代码保存失败,请检查代码格式是否正确",
"macro": "宏代码",
"editMacro": "编辑宏代码",
"macroModal": {
"title": "宏编辑",
@ -146,7 +150,11 @@
"loop": "按住执行的宏",
"placeholder": "JSON宏代码, 可为空",
"up": "抬起执行的宏"
}
},
"cancelSkill": "技能取消",
"tap": "普通点击",
"macroCode": "宏代码",
"macro": "宏"
},
"setting": {
"touchTime": "触摸时长",
@ -218,6 +226,19 @@
"SteeringWheel": {
"steeringWheel": "键盘行走",
"offset": "偏移"
},
"KeySight": {
"sight": "准星",
"scaleX": "水平灵敏度",
"scaleY": "垂直灵敏度",
"scalePlaceholder": "请输入灵敏度"
},
"KeyFire": {
"fire": "开火",
"drag": "拖动施法",
"scaleX": "水平灵敏度",
"scaleY": "垂直灵敏度",
"scalePlaceholder": "请输入灵敏度"
}
}
},

View File

@ -1,5 +1,6 @@
interface KeyBase {
note: string;
// pos relative to the mask
posX: number;
posY: number;
}
@ -79,6 +80,22 @@ export interface KeyMacro extends KeyBase {
};
}
export interface KeySight extends KeyBase {
type: "Sight";
key: string;
pointerId: number;
scaleX: number;
scaleY: number;
}
export interface KeyFire extends KeyBase {
type: "Fire";
drag: boolean;
pointerId: number;
scaleX: number;
scaleY: number;
}
export type KeyMapping =
| KeySteeringWheel
| KeyDirectionalSkill
@ -88,7 +105,9 @@ export type KeyMapping =
| KeyObservation
| KeyMacro
| KeyCancelSkill
| KeyTap;
| KeyTap
| KeySight
| KeyFire;
export type KeyCommon = KeyMacro | KeyCancelSkill | KeyTap;

View File

@ -45,7 +45,7 @@ export const useGlobalStore = defineStore("global", () => {
if (set.has((keyMapping as KeySteeringWheel).key[name])) return false;
set.add((keyMapping as KeySteeringWheel).key[name]);
}
} else {
} else if (keyMapping.type !== "Fire") {
if (set.has(keyMapping.key as string)) return false;
set.add(keyMapping.key as string);
}