Shikong/scrcpy-mask
1
0
Fork 0
mirror of https://github.com/AkiChase/scrcpy-mask synced 2025-02-22 23:12:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(KeyBoard): use store

Browse Source
This commit is contained in:
AkiChase 2024-04-30 15:01:29 +08:00
parent 2fae4a93b8
commit 9b3c6e4aa2
9 changed files with 174 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/keyboard/KeyBoard.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onActivated, ref } from "vue";
import { onActivated } from "vue";
import KeyInfo from "./KeyInfo.vue";
import KeySetting from "./KeySetting.vue";
import KeyCommon from "./KeyCommon.vue";
@ -10,6 +10,7 @@ import { useGlobalStore } from "../../store/global";
import { useDialog, useMessage } from "naive-ui";
import { onBeforeRouteLeave } from "vue-router";
import KeyObservation from "./KeyObservation.vue";
import { useKeyboardStore } from "../../store/keyboard";
// TODO 打开设置时要关闭active，建议将各种数据打包到一个对象中共享，省的麻烦
// TODO 切换按键方案时提示未保存，然后修改edit
@ -19,17 +20,11 @@ import KeyObservation from "./KeyObservation.vue";
// TODO 添加开发者工具打开按钮
// TODO 添加息屏按键
const showKeyInfoFlag = ref(false);
const showSettingFlag = ref(false);
const showButtonSettingFlag = ref(false);
const store = useGlobalStore();
const keyboardStore = useKeyboardStore();
const dialog = useDialog();
const message = useMessage();
const activeButtonIndex = ref(-1);
const activeSteeringWheelButtonKeyIndex = ref(-1);
let edited = ref(false);
function isKeyUnique(curKey: string): boolean {
const set = new Set<string>();
for (const keyMapping of store.editKeyMappingList) {
@ -60,7 +55,7 @@ function setCurButtonKey(curKey: string) {
return;
}
const keyMapping = store.editKeyMappingList[activeButtonIndex.value];
const keyMapping = store.editKeyMappingList[keyboardStore.activeButtonIndex];
if (keyMapping.type === "SteeringWheel") {
const keyObject = keyMapping.key as {
left: string;
@ -74,45 +69,47 @@ function setCurButtonKey(curKey: string) {
"left",
"right",
];
const activeSteeringWheelButtonKeyIndex =
keyboardStore.activeSteeringWheelButtonKeyIndex;
if (
activeSteeringWheelButtonKeyIndex.value >= 0 &&
activeSteeringWheelButtonKeyIndex.value <= 3
activeSteeringWheelButtonKeyIndex >= 0 &&
activeSteeringWheelButtonKeyIndex <= 3
) {
const curName = nameList[activeSteeringWheelButtonKeyIndex.value];
const curName = nameList[activeSteeringWheelButtonKeyIndex];
keyObject[curName] = curKey;
}
} else {
keyMapping.key = curKey;
}
edited.value = true;
keyboardStore.edited = true;
}
function handleClick(event: MouseEvent) {
if (event.button === 0) {
// left click
if (event.target === document.getElementById("keyboardElement")) {
if (showSettingFlag.value) {
showSettingFlag.value = false;
if (keyboardStore.showSettingFlag) {
keyboardStore.showSettingFlag = false;
} else {
activeButtonIndex.value = -1;
activeSteeringWheelButtonKeyIndex.value = -1;
showButtonSettingFlag.value = false;
keyboardStore.activeButtonIndex = -1;
keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
keyboardStore.showButtonSettingFlag = false;
}
}
} else if (event.button === 2) {
// right click
if (event.target === document.getElementById("keyboardElement")) {
// add button
if (showSettingFlag.value) showSettingFlag.value = false;
activeButtonIndex.value = -1;
activeSteeringWheelButtonKeyIndex.value = -1;
if (keyboardStore.showSettingFlag) keyboardStore.showSettingFlag = false;
keyboardStore.activeButtonIndex = -1;
keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
console.log("弹出新增");
} else if (
// modify key
activeButtonIndex.value !== -1 &&
activeButtonIndex.value < store.editKeyMappingList.length &&
!showButtonSettingFlag.value
keyboardStore.activeButtonIndex !== -1 &&
keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
!keyboardStore.showButtonSettingFlag
) {
const curKey = `M${event.button}`;
setCurButtonKey(curKey);
@ -121,9 +118,9 @@ function handleClick(event: MouseEvent) {
// other click
event.preventDefault();
if (
activeButtonIndex.value !== -1 &&
activeButtonIndex.value < store.editKeyMappingList.length &&
!showButtonSettingFlag.value
keyboardStore.activeButtonIndex !== -1 &&
keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
!keyboardStore.showButtonSettingFlag
) {
const curKey = `M${event.button}`;
setCurButtonKey(curKey);
@ -133,9 +130,9 @@ function handleClick(event: MouseEvent) {
function handleKeyUp(event: KeyboardEvent) {
if (
activeButtonIndex.value !== -1 &&
activeButtonIndex.value < store.editKeyMappingList.length &&
!showButtonSettingFlag.value
keyboardStore.activeButtonIndex !== -1 &&
keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
!keyboardStore.showButtonSettingFlag
) {
const curKey = event.code;
setCurButtonKey(curKey);
@ -144,9 +141,9 @@ function handleKeyUp(event: KeyboardEvent) {
function handleMouseWheel(event: WheelEvent) {
if (
activeButtonIndex.value !== -1 &&
activeButtonIndex.value < store.editKeyMappingList.length &&
!showButtonSettingFlag.value
keyboardStore.activeButtonIndex !== -1 &&
keyboardStore.activeButtonIndex < store.editKeyMappingList.length &&
!keyboardStore.showButtonSettingFlag
) {
if (event.deltaY > 0) {
// WheelDown
@ -159,11 +156,11 @@ function handleMouseWheel(event: WheelEvent) {
}
function resetEditKeyMappingList() {
showSettingFlag.value = false;
activeButtonIndex.value = -1;
activeSteeringWheelButtonKeyIndex.value = -1;
keyboardStore.showSettingFlag = false;
keyboardStore.activeButtonIndex = -1;
keyboardStore.activeSteeringWheelButtonKeyIndex = -1;
store.resetEditKeyMappingList();
edited.value = false;
keyboardStore.edited = false;
}
onActivated(() => {
@ -174,7 +171,7 @@ onActivated(() => {
onBeforeRouteLeave(() => {
document.removeEventListener("keyup", handleKeyUp);
document.removeEventListener("wheel", handleMouseWheel);
if (edited.value) {
if (keyboardStore.edited) {
dialog.warning({
title: "Warning",
content: "当前方案尚未保存，是否保存？",
@ -182,7 +179,7 @@ onBeforeRouteLeave(() => {
negativeText: "取消",
onPositiveClick: () => {
if (store.applyEditKeyMappingList()) {
edited.value = false;
keyboardStore.edited = false;
} else {
message.error("存在重复按键，无法保存");
}
@ -203,23 +200,12 @@ onBeforeRouteLeave(() => {
@mousedown="handleClick"
@contextmenu.prevent
>
<KeySetting
v-model:show-key-info-flag="showKeyInfoFlag"
v-model:show-setting-flag="showSettingFlag"
v-model:edited="edited"
@reset-edit-key-mapping-list="resetEditKeyMappingList"
/>
<KeyInfo v-model:showKeyInfoFlag="showKeyInfoFlag" />
<KeySetting @reset-edit-key-mapping-list="resetEditKeyMappingList" />
<KeyInfo />
<template v-for="(_, index) in store.editKeyMappingList">
<KeySteeringWheel
v-if="store.editKeyMappingList[index].type === 'SteeringWheel'"
@edit="edited = true"
:index="index"
v-model:active-index="activeButtonIndex"
v-model:active-steering-wheel-button-key-index="
activeSteeringWheelButtonKeyIndex
"
v-model:show-button-setting-flag="showButtonSettingFlag"
/>
<KeySkill
v-else-if="
@ -227,25 +213,13 @@ onBeforeRouteLeave(() => {
store.editKeyMappingList[index].type === 'DirectionlessSkill' ||
store.editKeyMappingList[index].type === 'TriggerWhenPressedSkill'
"
@edit="edited = true"
:index="index"
v-model:active-index="activeButtonIndex"
v-model:show-button-setting-flag="showButtonSettingFlag"
/>
<KeyObservation
v-else-if="store.editKeyMappingList[index].type === 'Observation'"
@edit="edited = true"
:index="index"
v-model:active-index="activeButtonIndex"
v-model:show-button-setting-flag="showButtonSettingFlag"
/>
<KeyCommon
v-else
@edit="edited = true"
:index="index"
v-model:active-index="activeButtonIndex"
v-model:show-button-setting-flag="showButtonSettingFlag"
/>
<KeyCommon v-else :index="index" />
</template>
</div>
</template>

34
src/components/keyboard/KeyCommon.vue
View File

@ -15,25 +15,21 @@ import {
} from "naive-ui";
import { CloseCircle, Settings } from "@vicons/ionicons5";
import { KeyMacro, KeyMacroList, KeyTap } from "../../keyMappingConfig";
const emit = defineEmits<{
edit: [];
}>();
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const activeIndex = defineModel("activeIndex", { required: true });
const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
required: true,
});
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const message = useMessage();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(() => props.index === activeIndex.value);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(() => store.editKeyMappingList[props.index]);
const showMacroModal = ref(false);
@ -44,8 +40,8 @@ const editedMacroRaw = ref({
});
function dragHandler(downEvent: MouseEvent) {
activeIndex.value = props.index;
showButtonSettingFlag.value = false;
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
@ -71,7 +67,7 @@ function dragHandler(downEvent: MouseEvent) {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
emit("edit");
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
@ -79,8 +75,8 @@ function dragHandler(downEvent: MouseEvent) {
}
function delCurKeyMapping() {
emit("edit");
activeIndex.value = -1;
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
@ -137,7 +133,7 @@ function saveMacro() {
(keyMapping.value as KeyMacro).macro = macro;
showMacroModal.value = false;
emit("edit");
keyboardStore.edited = true;
message.success("宏代码解析成功，但不保证代码正确性，请自行测试");
} catch (e) {
console.error(e);
@ -156,7 +152,7 @@ function showSetting() {
settingPosX.value = Math.min(keyMapping.value.posX + 25, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 25, maxHeight);
showButtonSettingFlag.value = true;
keyboardStore.showButtonSettingFlag = true;
}
</script>
@ -199,7 +195,7 @@ function showSetting() {
</div>
<div
class="key-setting"
v-if="isActive && showButtonSettingFlag"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
@ -220,14 +216,14 @@ function showSetting() {
v-model:value="(keyMapping as KeyTap).time"
:min="0"
placeholder="请输入触摸时长(ms)"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem label="备注">
<NInput
v-model:value="keyMapping.note"
placeholder="请输入备注"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NModal

41
src/components/keyboard/KeyInfo.vue
View File

@ -2,8 +2,9 @@
import { NIcon } from "naive-ui";
import { CloseCircle } from "@vicons/ionicons5";
import { Ref, ref, watch } from "vue";
import { useKeyboardStore } from "../../store/keyboard";
const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
const keyboardStore = useKeyboardStore();
const mouseX = ref(0);
const mouseY = ref(0);
@ -41,21 +42,24 @@ function mousedownHandler(event: MouseEvent) {
} else keyboardCodeList.value.push(key);
}
watch(showKeyInfoFlag, (value) => {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
if (value) {
keyboardElement.addEventListener("mousemove", mousemoveHandler);
keyboardElement.addEventListener("mousedown", mousedownHandler);
document.addEventListener("keyup", keyupHandler);
} else {
keyboardElement.removeEventListener("mousemove", mousemoveHandler);
keyboardElement.removeEventListener("mousedown", mousedownHandler);
document.removeEventListener("keyup", keyupHandler);
keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
watch(
() => keyboardStore.showKeyInfoFlag,
(value) => {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
if (value) {
keyboardElement.addEventListener("mousemove", mousemoveHandler);
keyboardElement.addEventListener("mousedown", mousedownHandler);
document.addEventListener("keyup", keyupHandler);
} else {
keyboardElement.removeEventListener("mousemove", mousemoveHandler);
keyboardElement.removeEventListener("mousedown", mousedownHandler);
document.removeEventListener("keyup", keyupHandler);
keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
}
}
});
);
let lastPosX = 0;
let lastPosY = 0;
@ -103,10 +107,13 @@ function dragHandler(downEvent: MouseEvent) {
</script>
<template>
<div v-show="showKeyInfoFlag" class="key-info" @contextmenu.prevent>
<div v-show="keyboardStore.showKeyInfoFlag" class="key-info" @contextmenu.prevent>
<div class="key-info-header" @mousedown="dragHandler">
Key Info
<div class="key-info-close" @click="showKeyInfoFlag = false">
<div
class="key-info-close"
@click="keyboardStore.showKeyInfoFlag = false"
>
<NIcon><CloseCircle></CloseCircle></NIcon>
</div>
</div>

32
src/components/keyboard/KeyObservation.vue
View File

@ -4,31 +4,27 @@ import { useGlobalStore } from "../../store/global";
import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui";
import { Eye, CloseCircle, Settings } from "@vicons/ionicons5";
import { KeyObservation } from "../../keyMappingConfig";
const emit = defineEmits<{
edit: [];
}>();
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const activeIndex = defineModel("activeIndex", { required: true });
const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
required: true,
});
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(() => props.index === activeIndex.value);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(
() => store.editKeyMappingList[props.index] as KeyObservation
);
function dragHandler(downEvent: MouseEvent) {
activeIndex.value = props.index;
showButtonSettingFlag.value = false;
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
@ -54,7 +50,7 @@ function dragHandler(downEvent: MouseEvent) {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
emit("edit");
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
@ -62,8 +58,8 @@ function dragHandler(downEvent: MouseEvent) {
}
function delCurKeyMapping() {
emit("edit");
activeIndex.value = -1;
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
@ -78,7 +74,7 @@ function showSetting() {
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
showButtonSettingFlag.value = true;
keyboardStore.showButtonSettingFlag = true;
}
</script>
@ -122,7 +118,7 @@ function showSetting() {
</div>
<div
class="key-setting"
v-if="isActive && showButtonSettingFlag"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
@ -134,14 +130,14 @@ function showSetting() {
v-model:value="keyMapping.scale"
placeholder="请输入灵敏度"
:step="0.1"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem label="备注">
<NInput
v-model:value="keyMapping.note"
placeholder="请输入备注"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
</div>

25
src/components/keyboard/KeySetting.vue
View File

@ -18,19 +18,17 @@ import { Store } from "@tauri-apps/plugin-store";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { loadDefaultKeyconfig } from "../../invoke";
import { KeyMappingConfig } from "../../keyMappingConfig";
import { useKeyboardStore } from "../../store/keyboard";
const emit = defineEmits<{
resetEditKeyMappingList: [];
}>();
const store = useGlobalStore();
const keyboardStore = useKeyboardStore();
const localStore = new Store("store.bin");
const message = useMessage();
const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
const showSettingFlag = defineModel("showSettingFlag", { required: true });
const edited = defineModel("edited", { required: true });
const showImportModal = ref(false);
const showRenameModal = ref(false);
const importModalInputValue = ref("");
@ -126,7 +124,7 @@ function dragHandler(downEvent: MouseEvent) {
localStore.set("keySettingPos", keySettingPos.value);
} else {
// click up
showSettingFlag.value = !showSettingFlag.value;
keyboardStore.showSettingFlag = !keyboardStore.showSettingFlag;
}
};
window.addEventListener("mouseup", upHandler);
@ -240,7 +238,7 @@ function exportKeyMappingConfig() {
function saveKeyMappingConfig() {
if (store.applyEditKeyMappingList()) {
edited.value = false;
keyboardStore.edited = false;
} else {
message.error("存在重复按键，无法保存");
}
@ -322,8 +320,12 @@ function migrateKeyMappingConfig() {
<NIcon><Settings /></NIcon>
</template>
</NButton>
<div class="key-setting" v-show="showSettingFlag">
<NButton text class="key-setting-close" @click="showSettingFlag = false">
<div class="key-setting" v-show="keyboardStore.showSettingFlag">
<NButton
text
class="key-setting-close"
@click="keyboardStore.showSettingFlag = false"
>
<NIcon><CloseCircle></CloseCircle></NIcon>
</NButton>
<NH4 prefix="bar">按键方案</NH4>
@ -334,7 +336,7 @@ function migrateKeyMappingConfig() {
/>
<NP> Relative Size:{{ curRelativeSize.w }}x{{ curRelativeSize.h }} </NP>
<NFlex style="margin-top: 20px">
<template v-if="edited">
<template v-if="keyboardStore.edited">
<NButton type="success" @click="saveKeyMappingConfig">保存方案</NButton>
<NButton type="error" @click="emit('resetEditKeyMappingList')"
>还原方案</NButton
@ -364,7 +366,10 @@ function migrateKeyMappingConfig() {
>
<NButton @click="exportKeyMappingConfig">导出方案</NButton>
<NButton @click="importDefaultKeyMappingConfig">导入默认</NButton>
<NButton @click="showKeyInfoFlag = !showKeyInfoFlag">按键信息</NButton>
<NButton
@click="keyboardStore.showKeyInfoFlag = !keyboardStore.showKeyInfoFlag"
>按键信息</NButton
>
</NFlex>
</div>
<NModal v-model:show="showImportModal">

42
src/components/keyboard/KeySkill.vue
View File

@ -16,28 +16,25 @@ import {
KeyDirectionalSkill,
KeyTriggerWhenPressedSkill,
} from "../../keyMappingConfig";
const emit = defineEmits<{
edit: [];
}>();
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const activeIndex = defineModel("activeIndex", { required: true });
const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
required: true,
});
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(() => props.index === activeIndex.value);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(() => store.editKeyMappingList[props.index]);
function dragHandler(downEvent: MouseEvent) {
activeIndex.value = props.index;
showButtonSettingFlag.value = false;
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
@ -63,7 +60,7 @@ function dragHandler(downEvent: MouseEvent) {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
emit("edit");
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
@ -71,8 +68,9 @@ function dragHandler(downEvent: MouseEvent) {
}
function delCurKeyMapping() {
emit("edit");
activeIndex.value = -1;
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
@ -91,7 +89,7 @@ function changeSkillType(flag: string) {
// the design of skill keymapping type is not good
const t = keyMapping.value.type;
if (flag === "direction") {
emit("edit");
keyboardStore.edited = true;
if (t === "DirectionalSkill") {
delete (keyMapping.value as any).range;
keyMapping.value.type = "DirectionlessSkill";
@ -104,7 +102,7 @@ function changeSkillType(flag: string) {
k.rangeOrTime = k.directional ? 0 : 80;
}
} else if (flag === "trigger") {
emit("edit");
keyboardStore.edited = true;
if (t === "DirectionalSkill") {
const k = keyMapping.value as any;
k.directional = true;
@ -144,7 +142,7 @@ function showSetting() {
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
updateRangeIndicator(keyboardElement);
showButtonSettingFlag.value = true;
keyboardStore.showButtonSettingFlag = true;
}
const rangeIndicatorTop = ref(0);
@ -209,7 +207,7 @@ function updateRangeIndicator(element?: HTMLElement) {
</div>
<div
class="key-setting"
v-if="isActive && showButtonSettingFlag"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
@ -238,7 +236,7 @@ function updateRangeIndicator(element?: HTMLElement) {
:min="0"
:max="100"
@update:value="
emit('edit');
keyboardStore.edited = true;
updateRangeIndicator();
"
/>
@ -249,7 +247,7 @@ function updateRangeIndicator(element?: HTMLElement) {
:min="0"
:max="100"
@update:value="
emit('edit');
keyboardStore.edited = true;
updateRangeIndicator();
"
/>
@ -262,19 +260,19 @@ function updateRangeIndicator(element?: HTMLElement) {
v-model:value="(keyMapping as KeyTriggerWhenPressedSkill).rangeOrTime"
:min="0"
placeholder="请输入触摸时长(ms)"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem label="备注">
<NInput
v-model:value="keyMapping.note"
placeholder="请输入备注"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
</div>
<div
v-if="isActive && showButtonSettingFlag"
v-if="isActive && keyboardStore.showButtonSettingFlag"
class="range-indicator"
:style="{
top: `${rangeIndicatorTop}px`,

57
src/components/keyboard/KeySteeringWheel.vue
View File

@ -4,29 +4,20 @@ import { useGlobalStore } from "../../store/global";
import { KeySteeringWheel } from "../../keyMappingConfig";
import { NButton, NFormItem, NH4, NIcon, NInput, NInputNumber } from "naive-ui";
import { CloseCircle, Move, Settings } from "@vicons/ionicons5";
const emit = defineEmits<{
edit: [];
}>();
import { useKeyboardStore } from "../../store/keyboard";
const props = defineProps<{
index: number;
}>();
const activeSteeringWheelButtonKeyIndex = defineModel(
"activeSteeringWheelButtonKeyIndex",
{ required: true }
);
const activeIndex = defineModel("activeIndex", { required: true });
const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
required: true,
});
const keyboardStore = useKeyboardStore();
const store = useGlobalStore();
const elementRef = ref<HTMLElement | null>(null);
const isActive = computed(() => props.index === activeIndex.value);
const isActive = computed(
() => props.index === keyboardStore.activeButtonIndex
);
const keyMapping = computed(
() => store.editKeyMappingList[props.index] as KeySteeringWheel
);
@ -45,8 +36,8 @@ const offset = computed(() => {
});
function dragHandler(downEvent: MouseEvent) {
activeIndex.value = props.index;
showButtonSettingFlag.value = false;
keyboardStore.activeButtonIndex = props.index;
keyboardStore.showButtonSettingFlag = false;
const oldX = keyMapping.value.posX;
const oldY = keyMapping.value.posY;
const element = elementRef.value;
@ -72,7 +63,7 @@ function dragHandler(downEvent: MouseEvent) {
window.removeEventListener("mousemove", moveHandler);
window.removeEventListener("mouseup", upHandler);
if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
emit("edit");
keyboardStore.edited = true;
}
};
window.addEventListener("mouseup", upHandler);
@ -80,8 +71,8 @@ function dragHandler(downEvent: MouseEvent) {
}
function delCurKeyMapping() {
emit("edit");
activeIndex.value = -1;
keyboardStore.edited = true;
keyboardStore.activeButtonIndex = -1;
store.editKeyMappingList.splice(props.index, 1);
}
@ -99,7 +90,7 @@ function showSetting() {
maxWidth
);
settingPosY.value = Math.min(keyMapping.value.posY - offset.value, maxHeight);
showButtonSettingFlag.value = true;
keyboardStore.showButtonSettingFlag = true;
}
</script>
@ -118,17 +109,19 @@ function showSetting() {
>
<i />
<span
@mousedown="activeSteeringWheelButtonKeyIndex = 0"
@mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 0"
:class="{
'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 0,
'active-wheel':
isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 0,
}"
>{{ keyMapping.key.up }}</span
>
<i />
<span
@mousedown="activeSteeringWheelButtonKeyIndex = 2"
@mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 2"
:class="{
'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 2,
'active-wheel':
isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 2,
}"
>{{ keyMapping.key.left }}</span
>
@ -136,17 +129,19 @@ function showSetting() {
<Move />
</NIcon>
<span
@mousedown="activeSteeringWheelButtonKeyIndex = 3"
@mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 3"
:class="{
'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 3,
'active-wheel':
isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 3,
}"
>{{ keyMapping.key.right }}</span
>
<i />
<span
@mousedown="activeSteeringWheelButtonKeyIndex = 1"
@mousedown="keyboardStore.activeSteeringWheelButtonKeyIndex = 1"
:class="{
'active-wheel': isActive && activeSteeringWheelButtonKeyIndex == 1,
'active-wheel':
isActive && keyboardStore.activeSteeringWheelButtonKeyIndex == 1,
}"
>{{ keyMapping.key.down }}</span
>
@ -186,7 +181,7 @@ function showSetting() {
</div>
<div
class="key-setting"
v-if="isActive && showButtonSettingFlag"
v-if="isActive && keyboardStore.showButtonSettingFlag"
:style="{
left: `${settingPosX}px`,
top: `${settingPosY}px`,
@ -197,14 +192,14 @@ function showSetting() {
<NInputNumber
v-model:value="keyMapping.offset"
:min="1"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
<NFormItem label="备注">
<NInput
v-model:value="keyMapping.note"
placeholder="请输入备注"
@update:value="emit('edit')"
@update:value="keyboardStore.edited = true"
/>
</NFormItem>
</div>

2
src/store/global.ts
View File

@ -10,7 +10,7 @@ import { Store } from "@tauri-apps/plugin-store";
const localStore = new Store("store.bin");
export const useGlobalStore = defineStore("counter", () => {
export const useGlobalStore = defineStore("global", () => {
const showLoadingRef = ref(false);
function showLoading() {
showLoadingRef.value = true;

20
src/store/keyboard.ts Normal file
View File

@ -0,0 +1,20 @@
import { defineStore } from "pinia";
import { ref } from "vue";
export const useKeyboardStore = defineStore("keyboard", () => {
const showKeyInfoFlag = ref(false);
const showSettingFlag = ref(false);
const showButtonSettingFlag = ref(false);
const activeButtonIndex = ref(-1);
const activeSteeringWheelButtonKeyIndex = ref(-1);
const edited = ref(false);
return {
showKeyInfoFlag,
showSettingFlag,
showButtonSettingFlag,
activeButtonIndex,
activeSteeringWheelButtonKeyIndex,
edited,
};
});