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

feat(KeyBoard): optimize the display of button setting

Browse Source
This commit is contained in:
AkiChase 2024-04-29 17:52:29 +08:00
parent 934c90cc2d
commit 79c70de696
6 changed files with 116 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@ import { useDialog, useMessage } from "naive-ui";
import { onBeforeRouteLeave } from "vue-router";
import KeyObservation from "./KeyObservation.vue";
// TODO 设置面板的出现位置，不应该超出范围
// TODO 为技能添加圆形边框范围，将range属性转换为技能的灵敏度，鼠标移动按比例缩放，100时技能范围最大，最不灵敏，0时就是直接指向对应方向的技能边框的
// TODO 右键空白区域添加按键
// TODO 设置界面添加本地数据编辑器（类似utools）

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

@ -14,11 +14,7 @@ import {
NInputNumber,
} from "naive-ui";
import { CloseCircle, Settings } from "@vicons/ionicons5";
import {
KeyMacro,
KeyMacroList,
KeyTap,
} from "../../keyMappingConfig";
import { KeyMacro, KeyMacroList, KeyTap } from "../../keyMappingConfig";
const emit = defineEmits<{
edit: [];
@ -148,6 +144,20 @@ function saveMacro() {
message.error("宏代码保存失败，请检查代码格式是否正确");
}
}
const settingPosX = ref(0);
const settingPosY = ref(0);
function showSetting() {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxWidth = keyboardElement.clientWidth - 150;
const maxHeight = keyboardElement.clientHeight - 220;
settingPosX.value = Math.min(keyMapping.value.posX + 25, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 25, maxHeight);
showButtonSettingFlag.value = true;
}
</script>
<template>
@ -177,7 +187,7 @@ function saveMacro() {
<NButton
class="key-setting-btn"
text
@click="showButtonSettingFlag = true"
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
@ -191,8 +201,8 @@ function saveMacro() {
class="key-setting"
v-if="isActive && showButtonSettingFlag"
:style="{
left: `${keyMapping.posX + 25}px`,
top: `${keyMapping.posY - 45}px`,
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">{{
@ -269,7 +279,9 @@ function saveMacro() {
display: flex;
flex-direction: column;
padding: 10px 20px;
width: 100px;
box-sizing: border-box;
width: 150px;
height: 220px;
border-radius: 5px;
border: 2px solid var(--light-color);
background-color: var(--bg-color);

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

@ -1,8 +1,7 @@
<script setup lang="ts">
import { NIcon } from "naive-ui";
import { CloseCircle } from "@vicons/ionicons5";
import { Ref, onActivated, ref } from "vue";
import { onBeforeRouteLeave } from "vue-router";
import { Ref, ref, watch } from "vue";
const showKeyInfoFlag = defineModel("showKeyInfoFlag", { required: true });
@ -28,7 +27,7 @@ function mousemoveHandler(event: MouseEvent) {
const keyboardCodeList: Ref<string[]> = ref([]);
function keyupHandler(event: KeyboardEvent) {
event.preventDefault();
if (keyboardCodeList.value.length > 10) {
if (keyboardCodeList.value.length > 5) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(event.code);
} else keyboardCodeList.value.push(event.code);
@ -36,27 +35,25 @@ function keyupHandler(event: KeyboardEvent) {
function mousedownHandler(event: MouseEvent) {
const key = `M${event.button}`;
if (keyboardCodeList.value.length > 10) {
if (keyboardCodeList.value.length > 5) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(key);
} else keyboardCodeList.value.push(key);
}
onActivated(() => {
const keyboardElement = document.getElementById("keyboardElement");
if (keyboardElement) {
watch(showKeyInfoFlag, (value) => {
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
if (value) {
keyboardElement.addEventListener("mousemove", mousemoveHandler);
keyboardElement.addEventListener("mousedown", mousedownHandler);
document.addEventListener("keyup", keyupHandler);
}
});
onBeforeRouteLeave(() => {
const keyboardElement = document.getElementById("keyboardElement");
if (keyboardElement) {
} else {
keyboardElement.removeEventListener("mousemove", mousemoveHandler);
keyboardElement.removeEventListener("mousedown", mousedownHandler);
document.removeEventListener("keyup", keyupHandler);
keyboardCodeList.value.splice(0, keyboardCodeList.value.length);
}
});
@ -70,14 +67,27 @@ function dragHandler(downEvent: MouseEvent) {
const target = downEvent.target;
downEvent.preventDefault();
target.style.setProperty("cursor", "grabbing");
const element = downEvent.target.parentElement;
const keyboardElement = document.getElementById(
"keyboardElement"
) as HTMLElement;
const maxWidth = keyboardElement.clientWidth - 120;
const maxHeight = keyboardElement.clientHeight - 200;
const x = downEvent.clientX;
const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => {
let left = lastPosX + moveEvent.clientX - x;
let top = lastPosY + moveEvent.clientY - y;
element?.style.setProperty("left", `${left < 0 ? 0 : left}px`);
element?.style.setProperty("top", `${top < 0 ? 0 : top}px`);
const newX = lastPosX + moveEvent.clientX - x;
const newY = lastPosY + moveEvent.clientY - y;
element?.style.setProperty(
"left",
`${Math.max(0, Math.min(newX, maxWidth))}px`
);
element?.style.setProperty(
"top",
`${Math.max(0, Math.min(newY, maxHeight))}px`
);
};
window.addEventListener("mousemove", moveHandler);
const upHandler = (upEvent: MouseEvent) => {
@ -117,8 +127,10 @@ function dragHandler(downEvent: MouseEvent) {
color: var(--light-color);
background-color: var(--content-bg-color);
width: 120px;
height: 200px;
border-radius: 10px;
position: absolute;
text-align: center;
z-index: 8;
.key-info-header {
@ -127,7 +139,6 @@ function dragHandler(downEvent: MouseEvent) {
font-weight: bold;
height: 20px;
border-radius: 10px 10px 0 0;
text-align: center;
cursor: grab;
position: relative;
@ -152,8 +163,10 @@ function dragHandler(downEvent: MouseEvent) {
}
.key-info-content {
text-align: center;
height: 180px;
box-sizing: border-box;
border: 1px solid var(--gray-color);
border-radius: 0 0 10px 10px;
padding: 10px;
}
}

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

@ -66,6 +66,20 @@ function delCurKeyMapping() {
activeIndex.value = -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 - 150;
const maxHeight = keyboardElement.clientHeight - 220;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
showButtonSettingFlag.value = true;
}
</script>
<template>
@ -96,7 +110,7 @@ function delCurKeyMapping() {
<NButton
class="key-setting-btn"
text
@click="showButtonSettingFlag = true"
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
@ -110,8 +124,8 @@ function delCurKeyMapping() {
class="key-setting"
v-if="isActive && showButtonSettingFlag"
:style="{
left: `${keyMapping.posX + 25}px`,
top: `${keyMapping.posY - 45}px`,
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">观察视角</NH4>
@ -139,7 +153,9 @@ function delCurKeyMapping() {
display: flex;
flex-direction: column;
padding: 10px 20px;
width: 100px;
box-sizing: border-box;
width: 150px;
height: 220px;
border-radius: 5px;
border: 2px solid var(--light-color);
background-color: var(--bg-color);

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

@ -130,6 +130,20 @@ function changeSkillType(flag: string) {
}
}
}
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 - 350;
settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
settingPosY.value = Math.min(keyMapping.value.posY - 30, maxHeight);
showButtonSettingFlag.value = true;
}
</script>
<template>
@ -160,7 +174,7 @@ function changeSkillType(flag: string) {
<NButton
class="key-setting-btn"
text
@click="showButtonSettingFlag = true"
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
>
<template #icon>
@ -174,8 +188,8 @@ function changeSkillType(flag: string) {
class="key-setting"
v-if="isActive && showButtonSettingFlag"
:style="{
left: `${keyMapping.posX + 65}px`,
top: `${keyMapping.posY - 90}px`,
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">技能</NH4>
@ -238,7 +252,9 @@ function changeSkillType(flag: string) {
display: flex;
flex-direction: column;
padding: 10px 20px;
width: 120px;
box-sizing: border-box;
width: 200px;
height: 350px;
border-radius: 5px;
border: 2px solid var(--light-color);
background-color: var(--bg-color);

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

@ -82,6 +82,23 @@ function delCurKeyMapping() {
activeIndex.value = -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 - 150;
const maxHeight = keyboardElement.clientHeight - 220;
settingPosX.value = Math.min(
keyMapping.value.posX + offset.value + 10,
maxWidth
);
settingPosY.value = Math.min(keyMapping.value.posY - offset.value, maxHeight);
showButtonSettingFlag.value = true;
}
</script>
<template>
@ -151,7 +168,7 @@ function delCurKeyMapping() {
<NButton
class="key-setting-btn"
text
@click="showButtonSettingFlag = true"
@click="showSetting"
:type="isActive ? 'primary' : 'info'"
:style="{
left: `${offset * 2 + 10}px`,
@ -169,8 +186,8 @@ function delCurKeyMapping() {
class="key-setting"
v-if="isActive && showButtonSettingFlag"
:style="{
left: `${keyMapping.posX + offset + 10}px`,
top: `${keyMapping.posY - 120}px`,
left: `${settingPosX}px`,
top: `${settingPosY}px`,
}"
>
<NH4 prefix="bar">键盘行走</NH4>
@ -197,7 +214,9 @@ function delCurKeyMapping() {
display: flex;
flex-direction: column;
padding: 10px 20px;
width: 100px;
box-sizing: border-box;
width: 150px;
height: 220px;
border-radius: 5px;
border: 2px solid var(--light-color);
background-color: var(--bg-color);