feat(KeyBoard): add steering wheel button

src/App.vue

@@ -11,12 +11,25 @@ import { Store } from "@tauri-apps/plugin-store";
 import { KeyMappingConfig } from "./keyMappingConfig";
 import { onMounted } from "vue";
 import { useGlobalStore } from "./store/global";
+import { useRouter } from "vue-router";
 
 const store = useGlobalStore();
+const router = useRouter();
 
 onMounted(async () => {
-  // loading keyMappingConfigList from local store
+  router.replace({ name: "mask" });
+
   const localStore = new Store("store.bin");
+  // loading screenSize from local store
+  const screenSize = await localStore.get<{ sizeW: number; sizeH: number }>(
+    "screenSize"
+  );
+  if (screenSize !== null) {
+    store.screenSizeW = screenSize.sizeW;
+    store.screenSizeH = screenSize.sizeH;
+  }
+
+  // loading keyMappingConfigList from local store
   let keyMappingConfigList = await localStore.get<KeyMappingConfig[]>(
     "keyMappingConfigList"
   );

src/components/Device.vue

@@ -55,14 +55,6 @@ let deviceWaitForMetadataTask: ((deviceName: string) => void) | null = null;
 
 let unlisten: UnlistenFn | undefined;
 onMounted(async () => {
-  const screenSize = await localStore.get<{ sizeW: number; sizeH: number }>(
-    "screenSize"
-  );
-  if (screenSize !== null) {
-    store.screenSizeW = screenSize.sizeW;
-    store.screenSizeH = screenSize.sizeH;
-  }
-
   unlisten = await listen("device-reply", (event) => {
     try {
       let payload = JSON.parse(event.payload as string);

src/components/Mask.vue

@@ -116,15 +116,15 @@ function refreshKeyMappingButton() {
         }"
       >
         <div class="wheel-container">
-          <i></i>
+          <i />
           <span>{{ button.key.up }}</span>
-          <i></i>
+          <i />
           <span>{{ button.key.left }}</span>
-          <span class="wheel-center"></span>
+          <i />
           <span>{{ button.key.right }}</span>
-          <i></i>
+          <i />
           <span>{{ button.key.down }}</span>
-          <i></i>
+          <i />
         </div>
       </div>
       <div

src/components/keyboard/KeyBoard.vue

@@ -3,6 +3,7 @@ import { onActivated, ref } from "vue";
 import KeyInfo from "./KeyInfo.vue";
 import KeySetting from "./KeySetting.vue";
 import KeyCommon from "./KeyCommon.vue";
+import KeySteeringWheel from "./KeySteeringWheel.vue";
 import { useGlobalStore } from "../../store/global";
 import { useDialog } from "naive-ui";
 import { onBeforeRouteLeave } from "vue-router";
@@ -55,6 +56,7 @@ function setCurButtonKey(curKey: string) {
   } else {
     keyMapping.key = curKey;
   }
+  edited.value = true;
 }
 
 function handleClick(event: MouseEvent) {
@@ -66,6 +68,7 @@ function handleClick(event: MouseEvent) {
         return;
       }
       activeButtonIndex.value = -1;
+      activeSteeringWheelButtonKeyIndex.value = -1;
     }
   } else if (event.button === 2) {
     // right click
@@ -73,6 +76,7 @@ function handleClick(event: MouseEvent) {
       // add button
       if (showSettingFlag.value) showSettingFlag.value = false;
       activeButtonIndex.value = -1;
+      activeSteeringWheelButtonKeyIndex.value = -1;
 
       console.log("弹出新增");
     } else if (
@@ -159,17 +163,26 @@ onBeforeRouteLeave(() => {
     @contextmenu.prevent
   >
     <KeySetting
-      v-model:showKeyInfoFlag="showKeyInfoFlag"
+      v-model:show-key-info-flag="showKeyInfoFlag"
-      v-model:showSettingFlag="showSettingFlag"
+      v-model:show-setting-flag="showSettingFlag"
       v-model:edited="edited"
     />
     <KeyInfo v-model:showKeyInfoFlag="showKeyInfoFlag" />
     <template v-for="(_, index) in store.editKeyMappingList">
-      <KeyCommon
+      <KeySteeringWheel
+        v-if="store.editKeyMappingList[index].type === 'SteeringWheel'"
         @edit="edited = true"
-        @active="activeButtonIndex = index"
         :index="index"
-        :activeIndex="activeButtonIndex"
+        v-model:active-index="activeButtonIndex"
+        v-model:active-steering-wheel-button-key-index="
+          activeSteeringWheelButtonKeyIndex
+        "
+      />
+      <KeyCommon
+        v-else
+        @edit="edited = true"
+        :index="index"
+        v-model:active-index="activeButtonIndex"
       />
     </template>
   </div>

src/components/keyboard/KeyCommon.vue

@@ -4,18 +4,19 @@ import { useGlobalStore } from "../../store/global";
 
 const emit = defineEmits<{
   edit: [];
-  active: [];
 }>();
 
 const props = defineProps<{
   index: number;
-  activeIndex: number;
 }>();
+
+const activeIndex = defineModel("activeIndex", { required: true });
+
 const store = useGlobalStore();
 const elementRef = ref<HTMLElement | null>(null);
 
 function dragHandler(downEvent: MouseEvent) {
-  emit("active");
+  activeIndex.value = props.index;
   const oldX = store.editKeyMappingList[props.index].posX;
   const oldY = store.editKeyMappingList[props.index].posY;
   const element = elementRef.value;

src/components/keyboard/KeySteeringWheel.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useGlobalStore } from "../../store/global";
+import { KeySteeringWheel } from "../../keyMappingConfig";
+
+const emit = defineEmits<{
+  edit: [];
+}>();
+
+const props = defineProps<{
+  index: number;
+}>();
+
+const activeSteeringWheelButtonKeyIndex = defineModel(
+  "activeSteeringWheelButtonKeyIndex",
+  { required: true }
+);
+
+const activeIndex = defineModel("activeIndex", { required: true });
+
+const store = useGlobalStore();
+const elementRef = ref<HTMLElement | null>(null);
+
+const offset = computed(() => {
+  const keyboardElement = document.getElementById(
+    "keyboardElement"
+  ) as HTMLElement;
+  const clientWidth = keyboardElement.clientWidth;
+  const screenSizeW = store.screenSizeW === 0 ? clientWidth : store.screenSizeW;
+  return (
+    ((store.editKeyMappingList[props.index] as KeySteeringWheel).offset *
+      clientWidth) /
+    screenSizeW
+  );
+});
+
+function dragHandler(downEvent: MouseEvent) {
+  activeIndex.value = props.index;
+  const oldX = store.editKeyMappingList[props.index].posX;
+  const oldY = store.editKeyMappingList[props.index].posY;
+  const element = elementRef.value;
+  if (element) {
+    const keyboardElement = document.getElementById(
+      "keyboardElement"
+    ) as HTMLElement;
+    const maxX = keyboardElement.clientWidth - 40;
+    const maxY = keyboardElement.clientHeight - 40;
+
+    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));
+      store.editKeyMappingList[props.index].posX = newX;
+      store.editKeyMappingList[props.index].posY = newY;
+    };
+    window.addEventListener("mousemove", moveHandler);
+    const upHandler = () => {
+      window.removeEventListener("mousemove", moveHandler);
+      window.removeEventListener("mouseup", upHandler);
+      if (
+        oldX !== store.editKeyMappingList[props.index].posX ||
+        oldY !== store.editKeyMappingList[props.index].posY
+      ) {
+        emit("edit");
+      }
+    };
+    window.addEventListener("mouseup", upHandler);
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="{ active: props.index === activeIndex }"
+    :style="{
+      left: `${store.editKeyMappingList[props.index].posX - offset}px`,
+      top: `${store.editKeyMappingList[props.index].posY - offset}px`,
+      width: `${offset * 2}px`,
+      height: `${offset * 2}px`,
+    }"
+    @mousedown="dragHandler"
+    class="key-steering-wheel"
+    ref="elementRef"
+  >
+    <i />
+    <span
+      @mousedown="activeSteeringWheelButtonKeyIndex = 0"
+      :class="{
+        'active-wheel':
+          props.index === activeIndex && activeSteeringWheelButtonKeyIndex == 0,
+      }"
+      >{{
+        (store.editKeyMappingList[props.index] as KeySteeringWheel).key.up
+      }}</span
+    >
+    <i />
+    <span
+      @mousedown="activeSteeringWheelButtonKeyIndex = 2"
+      :class="{
+        'active-wheel':
+          props.index === activeIndex && activeSteeringWheelButtonKeyIndex == 2,
+      }"
+      >{{
+        (store.editKeyMappingList[props.index] as KeySteeringWheel).key.left
+      }}</span
+    >
+    <i />
+    <span
+      @mousedown="activeSteeringWheelButtonKeyIndex = 3"
+      :class="{
+        'active-wheel':
+          props.index === activeIndex && activeSteeringWheelButtonKeyIndex == 3,
+      }"
+      >{{
+        (store.editKeyMappingList[props.index] as KeySteeringWheel).key.right
+      }}</span
+    >
+    <i />
+    <span
+      @mousedown="activeSteeringWheelButtonKeyIndex = 1"
+      :class="{
+        'active-wheel':
+          props.index === activeIndex && activeSteeringWheelButtonKeyIndex == 1,
+      }"
+      >{{
+        (store.editKeyMappingList[props.index] as KeySteeringWheel).key.down
+      }}</span
+    >
+    <i />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.key-steering-wheel {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid var(--blue-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  font-weight: bold;
+
+  display: grid;
+  grid-template-columns: repeat(3, 33%);
+  grid-template-rows: repeat(3, 33%);
+  justify-items: center;
+  align-items: center;
+
+  &:not(.active):hover {
+    border: 2px solid var(--light-color);
+  }
+
+  span {
+    cursor: pointer;
+    &:hover {
+      color: var(--primary-hover-color);
+    }
+  }
+}
+.active {
+  border: 2px solid var(--primary-color);
+  z-index: 2;
+}
+
+.active-wheel {
+  color: var(--primary-color);
+}
+</style>

src/router.ts

@@ -5,7 +5,7 @@ import KeyBoard from "./components/keyboard/KeyBoard.vue";
 import Device from "./components/Device.vue";
 
 const routes = [
-  { path: "/", name: "mask", component: Mask },
+  { path: "/mask", name: "mask", component: Mask },
   { path: "/device", name: "device", component: Device },
   { path: "/setting", name: "setting", component: Setting },
   { path: "/keyboard", name: "keyboard", component: KeyBoard },