From a4a29fdb5eda3963ecac8d8da2b8bb08e3e7a857 Mon Sep 17 00:00:00 2001
From: AkiChase <1003019131@qq.com>
Date: Tue, 30 Apr 2024 10:59:46 +0800
Subject: [PATCH] bug(Key): fix drag range

---
 src/components/Mask.vue                    |  2 ++
 src/components/keyboard/KeyCommon.vue      |  9 +++++----
 src/components/keyboard/KeyObservation.vue |  9 +++++----
 src/components/keyboard/KeySkill.vue       | 11 ++++++-----
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index a1563cd..b5027ec 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -118,6 +118,8 @@ function toStartServer() {
   border-right: 1px solid var(--bg-color);
   border-bottom: 1px solid var(--bg-color);
   border-radius: 0 0 5px 0;
+  user-select: none;
+  -webkit-user-select: none;
 
   & > .mask-button {
     position: absolute;
diff --git a/src/components/keyboard/KeyCommon.vue b/src/components/keyboard/KeyCommon.vue
index 78e0147..1dea78d 100644
--- a/src/components/keyboard/KeyCommon.vue
+++ b/src/components/keyboard/KeyCommon.vue
@@ -53,16 +53,16 @@ function dragHandler(downEvent: MouseEvent) {
     const keyboardElement = document.getElementById(
       "keyboardElement"
     ) as HTMLElement;
-    const maxX = keyboardElement.clientWidth - 40;
-    const maxY = keyboardElement.clientHeight - 40;
+    const maxX = keyboardElement.clientWidth - 20;
+    const maxY = keyboardElement.clientHeight - 20;
 
     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(0, Math.min(newX, maxX));
-      newY = Math.max(0, Math.min(newY, maxY));
+      newX = Math.max(20, Math.min(newX, maxX));
+      newY = Math.max(20, Math.min(newY, maxY));
       keyMapping.value.posX = newX;
       keyMapping.value.posY = newY;
     };
@@ -292,6 +292,7 @@ function showSetting() {
   position: absolute;
   height: 40px;
   width: 40px;
+  box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid var(--blue-color);
   display: flex;
diff --git a/src/components/keyboard/KeyObservation.vue b/src/components/keyboard/KeyObservation.vue
index 80f9397..54a3e61 100644
--- a/src/components/keyboard/KeyObservation.vue
+++ b/src/components/keyboard/KeyObservation.vue
@@ -36,16 +36,16 @@ function dragHandler(downEvent: MouseEvent) {
     const keyboardElement = document.getElementById(
       "keyboardElement"
     ) as HTMLElement;
-    const maxX = keyboardElement.clientWidth - 60;
-    const maxY = keyboardElement.clientHeight - 60;
+    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(0, Math.min(newX, maxX));
-      newY = Math.max(0, Math.min(newY, maxY));
+      newX = Math.max(30, Math.min(newX, maxX));
+      newY = Math.max(30, Math.min(newY, maxY));
       keyMapping.value.posX = newX;
       keyMapping.value.posY = newY;
     };
@@ -166,6 +166,7 @@ function showSetting() {
   position: absolute;
   height: 60px;
   width: 60px;
+  box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid var(--blue-color);
   display: flex;
diff --git a/src/components/keyboard/KeySkill.vue b/src/components/keyboard/KeySkill.vue
index 37d35cd..27238fe 100644
--- a/src/components/keyboard/KeySkill.vue
+++ b/src/components/keyboard/KeySkill.vue
@@ -45,16 +45,16 @@ function dragHandler(downEvent: MouseEvent) {
     const keyboardElement = document.getElementById(
       "keyboardElement"
     ) as HTMLElement;
-    const maxX = keyboardElement.clientWidth - 60;
-    const maxY = keyboardElement.clientHeight - 60;
+    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(0, Math.min(newX, maxX));
-      newY = Math.max(0, Math.min(newY, maxY));
+      newX = Math.max(30, Math.min(newX, maxX));
+      newY = Math.max(30, Math.min(newY, maxY));
       keyMapping.value.posX = newX;
       keyMapping.value.posY = newY;
     };
@@ -290,7 +290,7 @@ function updateRangeIndicator(element?: HTMLElement) {
   left: 0;
   right: 0;
   margin: auto;
-
+  border-radius: 50%;
   background-color: var(--blue-color);
   clip-path: polygon(0 0, 100% 0, 50% 25%);
 }
@@ -314,6 +314,7 @@ function updateRangeIndicator(element?: HTMLElement) {
   height: 60px;
   width: 60px;
   border-radius: 50%;
+  box-sizing: border-box;
   border: 2px solid var(--blue-color);
   display: flex;
   flex-direction: column;