feat(KeySkill): add range indicator

src-tauri/resource/default-key-config.json

@@ -1 +1,3 @@
-[{"relativeSize":{"w":1280,"h":720},"title":"王者荣耀-暃","list":[{"type":"SteeringWheel","note":"方向轮盘","key":{"left":"KeyA","right":"KeyD","up":"KeyW","down":"KeyS"},"posX":180,"posY":560,"offset":100,"pointerId":1},{"type":"DirectionalSkill","note":"技能1","key":"KeyQ","posX":950,"posY":610,"range":200,"pointerId":2},{"type":"DirectionalSkill","note":"技能2","key":"AltLeft","posX":1025,"posY":500,"range":200,"pointerId":2},{"type":"DirectionalSkill","note":"技能3","key":"KeyE","posX":1160,"posY":420,"range":200,"pointerId":2},{"type":"TriggerWhenPressedSkill","note":"技能3","key":"M4","posX":1160,"posY":420,"directional":true,"rangeOrTime":0,"pointerId":2},{"type":"DirectionlessSkill","note":"无方向装备技能","key":"M1","posX":1150,"posY":280,"pointerId":2},{"type":"CancelSkill","note":"取消技能","key":"Space","posX":1160,"posY":140,"pointerId":2},{"type":"Tap","note":"回城","key":"KeyB","time":80,"posX":650,"posY":650,"pointerId":3},{"type":"Tap","note":"回复","key":"KeyC","time":80,"posX":740,"posY":650,"pointerId":3},{"type":"DirectionalSkill","note":"召唤师技能","key":"KeyF","posX":840,"posY":650,"range":200,"pointerId":2},{"type":"TriggerWhenPressedSkill","note":"无方向召唤师技能","key":"ControlLeft","posX":840,"posY":650,"directional":false,"rangeOrTime":80,"pointerId":3},{"type":"Tap","note":"攻击","key":"M2","time":80,"posX":1165,"posY":620,"pointerId":3},{"type":"Tap","note":"技能1升级","key":"Digit1","time":80,"posX":880,"posY":560,"pointerId":3},{"type":"Tap","note":"技能2升级","key":"Digit2","time":80,"posX":960,"posY":430,"pointerId":3},{"type":"Tap","note":"技能3升级","key":"Digit3","time":80,"posX":1090,"posY":350,"pointerId":3},{"type":"Tap","note":"快速购买1","key":"Digit5","time":80,"posX":130,"posY":300,"pointerId":3},{"type":"Tap","note":"快速购买2","key":"Digit6","time":80,"posX":130,"posY":370,"pointerId":3},{"type":"TriggerWhenPressedSkill","note":"装备技能","key":"WheelDown","posX":1150,"posY":280,"directional":false,"rangeOrTime":80,"pointerId":3},{"type":"Observation","note":"观察","key":"M3","posX":1000,"posY":200,"scale":0.5,"pointerId":4},{"type":"Macro","note":"战绩面板","key":"Tab","macro":{"down":[{"type":"touch","args":["default",5,1185,40,80]}],"loop":null,"up":[{"type":"touch","args":["default",5,1220,100,80]}]},"posX":1185,"posY":40,"pointerId":5},{"type":"Macro","note":"商店","key":"ShiftLeft","macro":{"down":[{"type":"touch","args":["default",5,40,300,80]}],"loop":null,"up":[{"type":"touch","args":["default",5,1200,60,80]}]},"posX":40,"posY":300,"pointerId":5},{"type":"Macro","note":"地图","key":"KeyZ","macro":{"down":[{"type":"touch","args":["default",5,250,230,80]}],"loop":null,"up":[{"type":"touch","args":["default",5,640,150,80]}]},"posX":250,"posY":230,"pointerId":5}]}]
+[
+    {"list":[{"key":{"down":"KeyS","left":"KeyA","right":"KeyD","up":"KeyW"},"note":"方向轮盘","offset":175,"pointerId":1,"posX":180,"posY":560,"type":"SteeringWheel"},{"key":"KeyQ","note":"技能1","pointerId":2,"posX":950,"posY":610,"range":50,"type":"DirectionalSkill"},{"key":"AltLeft","note":"技能2","pointerId":2,"posX":1025,"posY":500,"range":50,"type":"DirectionalSkill"},{"key":"KeyE","note":"技能3","pointerId":2,"posX":1160,"posY":420,"range":50,"type":"DirectionalSkill"},{"directional":true,"key":"M4","note":"技能3","pointerId":2,"posX":1160,"posY":420,"rangeOrTime":0,"type":"TriggerWhenPressedSkill"},{"key":"M1","note":"无方向装备技能","pointerId":2,"posX":1150,"posY":280,"type":"DirectionlessSkill"},{"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":840,"posY":650,"range":50,"type":"DirectionalSkill"},{"directional":false,"key":"ControlLeft","note":"无方向召唤师技能","pointerId":3,"posX":840,"posY":650,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"key":"M2","note":"攻击","pointerId":3,"posX":1165,"posY":620,"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":130,"posY":300,"time":80,"type":"Tap"},{"key":"Digit6","note":"快速购买2","pointerId":3,"posX":130,"posY":370,"time":80,"type":"Tap"},{"directional":false,"key":"WheelDown","note":"装备技能","pointerId":3,"posX":1150,"posY":280,"rangeOrTime":80,"type":"TriggerWhenPressedSkill"},{"key":"M3","note":"观察","pointerId":4,"posX":1000,"posY":200,"scale":0.5,"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":"战绩面板","pointerId":5,"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":"商店","pointerId":5,"posX":40,"posY":300,"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":"地图","pointerId":5,"posX":250,"posY":230,"type":"Macro"}],"relativeSize":{"h":720,"w":1280},"title":"王者荣耀-暃"}
+]

src/components/keyboard/KeyBoard.vue

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

src/components/keyboard/KeySkill.vue

@@ -133,17 +133,40 @@ function changeSkillType(flag: string) {
 
 const settingPosX = ref(0);
 const settingPosY = ref(0);
+
 function showSetting() {
   const keyboardElement = document.getElementById(
     "keyboardElement"
   ) as HTMLElement;
+  // setting
   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);
+  updateRangeIndicator(keyboardElement);
   showButtonSettingFlag.value = true;
 }
+
+const rangeIndicatorTop = ref(0);
+const indicatorLength = ref(0);
+function updateRangeIndicator(element?: HTMLElement) {
+  if (!element)
+    element = document.getElementById("keyboardElement") as HTMLElement;
+
+  if (!isDirectionless.value) {
+    // indicator
+    const range =
+      keyMapping.value.type === "DirectionalSkill"
+        ? (keyMapping.value as KeyDirectionalSkill).range
+        : (keyMapping.value as KeyTriggerWhenPressedSkill).rangeOrTime;
+    indicatorLength.value = Math.round(
+      ((element.clientHeight * range) / 100) * 2
+    );
+    rangeIndicatorTop.value = Math.round(
+      element.clientHeight / 2 - indicatorLength.value / 4
+    );
+  }
+}
 </script>
 
 <template>
@@ -214,7 +237,10 @@ function showSetting() {
         placeholder="请输入技能范围"
         :min="0"
         :max="100"
-        @update:value="emit('edit')"
+        @update:value="
+          emit('edit');
+          updateRangeIndicator();
+        "
       />
       <NInputNumber
         v-else
@@ -222,7 +248,10 @@ function showSetting() {
         placeholder="请输入技能范围"
         :min="0"
         :max="100"
-        @update:value="emit('edit')"
+        @update:value="
+          emit('edit');
+          updateRangeIndicator();
+        "
       />
     </NFormItem>
     <NFormItem
@@ -244,9 +273,28 @@ function showSetting() {
       />
     </NFormItem>
   </div>
+  <div
+    v-if="isActive && showButtonSettingFlag"
+    class="range-indicator"
+    :style="{
+      top: `${rangeIndicatorTop}px`,
+      width: `${indicatorLength}px`,
+      height: `${indicatorLength}px`,
+    }"
+  ></div>
 </template>
 
 <style scoped lang="scss">
+.range-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+
+  background-color: var(--blue-color);
+  clip-path: polygon(0 0, 100% 0, 50% 25%);
+}
+
 .key-setting {
   position: absolute;
   display: flex;

src/components/keyboard/KeySteeringWheel.vue

@@ -32,14 +32,16 @@ const keyMapping = computed(
 );
 
 const offset = computed(() => {
-  const keyboardElement = document.getElementById(
+  const keyboardElement = document.getElementById("keyboardElement");
-    "keyboardElement"
+  if (keyboardElement) {
-  ) as HTMLElement;
+    const clientWidth = keyboardElement.clientWidth;
-  const clientWidth = keyboardElement.clientWidth;
+    const screenSizeW =
-  const screenSizeW = store.screenSizeW === 0 ? clientWidth : store.screenSizeW;
+      store.screenSizeW === 0 ? clientWidth : store.screenSizeW;
-  return (
+    return (
-    ((keyMapping.value as KeySteeringWheel).offset * clientWidth) / screenSizeW
+      ((keyMapping.value as KeySteeringWheel).offset * clientWidth) /
-  );
+      screenSizeW
+    );
+  } else return (keyMapping.value as KeySteeringWheel).offset;
 });
 
 function dragHandler(downEvent: MouseEvent) {