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

bug(Key): fix drag range

Browse Source
This commit is contained in:
AkiChase 2024-04-30 10:59:46 +08:00
parent 19c81ec743
commit a4a29fdb5e
4 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Mask.vue
View File

@ -118,6 +118,8 @@ function toStartServer() {
border-right: 1px solid var(--bg-color); border-right: 1px solid var(--bg-color);
border-bottom: 1px solid var(--bg-color); border-bottom: 1px solid var(--bg-color);
border-radius: 0 0 5px 0; border-radius: 0 0 5px 0;
user-select: none;
-webkit-user-select: none;
& > .mask-button { & > .mask-button {
position: absolute; position: absolute;

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

@ -53,16 +53,16 @@ function dragHandler(downEvent: MouseEvent) {
const keyboardElement = document.getElementById( const keyboardElement = document.getElementById(
"keyboardElement" "keyboardElement"
) as HTMLElement; ) as HTMLElement;
const maxX = keyboardElement.clientWidth - 40; const maxX = keyboardElement.clientWidth - 20;
const maxY = keyboardElement.clientHeight - 40; const maxY = keyboardElement.clientHeight - 20;
const x = downEvent.clientX; const x = downEvent.clientX;
const y = downEvent.clientY; const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => { const moveHandler = (moveEvent: MouseEvent) => {
let newX = oldX + moveEvent.clientX - x; let newX = oldX + moveEvent.clientX - x;
let newY = oldY + moveEvent.clientY - y; let newY = oldY + moveEvent.clientY - y;
newX = Math.max(0, Math.min(newX, maxX)); newX = Math.max(20, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY)); newY = Math.max(20, Math.min(newY, maxY));
keyMapping.value.posX = newX; keyMapping.value.posX = newX;
keyMapping.value.posY = newY; keyMapping.value.posY = newY;
}; };
@ -292,6 +292,7 @@ function showSetting() {
position: absolute; position: absolute;
height: 40px; height: 40px;
width: 40px; width: 40px;
box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--blue-color); border: 2px solid var(--blue-color);
display: flex; display: flex;

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

@ -36,16 +36,16 @@ function dragHandler(downEvent: MouseEvent) {
const keyboardElement = document.getElementById( const keyboardElement = document.getElementById(
"keyboardElement" "keyboardElement"
) as HTMLElement; ) as HTMLElement;
const maxX = keyboardElement.clientWidth - 60; const maxX = keyboardElement.clientWidth - 30;
const maxY = keyboardElement.clientHeight - 60; const maxY = keyboardElement.clientHeight - 30;
const x = downEvent.clientX; const x = downEvent.clientX;
const y = downEvent.clientY; const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => { const moveHandler = (moveEvent: MouseEvent) => {
let newX = oldX + moveEvent.clientX - x; let newX = oldX + moveEvent.clientX - x;
let newY = oldY + moveEvent.clientY - y; let newY = oldY + moveEvent.clientY - y;
newX = Math.max(0, Math.min(newX, maxX)); newX = Math.max(30, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY)); newY = Math.max(30, Math.min(newY, maxY));
keyMapping.value.posX = newX; keyMapping.value.posX = newX;
keyMapping.value.posY = newY; keyMapping.value.posY = newY;
}; };
@ -166,6 +166,7 @@ function showSetting() {
position: absolute; position: absolute;
height: 60px; height: 60px;
width: 60px; width: 60px;
box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--blue-color); border: 2px solid var(--blue-color);
display: flex; display: flex;

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

@ -45,16 +45,16 @@ function dragHandler(downEvent: MouseEvent) {
const keyboardElement = document.getElementById( const keyboardElement = document.getElementById(
"keyboardElement" "keyboardElement"
) as HTMLElement; ) as HTMLElement;
const maxX = keyboardElement.clientWidth - 60; const maxX = keyboardElement.clientWidth - 30;
const maxY = keyboardElement.clientHeight - 60; const maxY = keyboardElement.clientHeight - 30;
const x = downEvent.clientX; const x = downEvent.clientX;
const y = downEvent.clientY; const y = downEvent.clientY;
const moveHandler = (moveEvent: MouseEvent) => { const moveHandler = (moveEvent: MouseEvent) => {
let newX = oldX + moveEvent.clientX - x; let newX = oldX + moveEvent.clientX - x;
let newY = oldY + moveEvent.clientY - y; let newY = oldY + moveEvent.clientY - y;
newX = Math.max(0, Math.min(newX, maxX)); newX = Math.max(30, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY)); newY = Math.max(30, Math.min(newY, maxY));
keyMapping.value.posX = newX; keyMapping.value.posX = newX;
keyMapping.value.posY = newY; keyMapping.value.posY = newY;
}; };
@ -290,7 +290,7 @@ function updateRangeIndicator(element?: HTMLElement) {
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
border-radius: 50%;
background-color: var(--blue-color); background-color: var(--blue-color);
clip-path: polygon(0 0, 100% 0, 50% 25%); clip-path: polygon(0 0, 100% 0, 50% 25%);
} }
@ -314,6 +314,7 @@ function updateRangeIndicator(element?: HTMLElement) {
height: 60px; height: 60px;
width: 60px; width: 60px;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box;
border: 2px solid var(--blue-color); border: 2px solid var(--blue-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;