+import { computed, ref } from "vue";
+import { useGlobalStore } from "../../store/global";
+import {
+ NIcon,
+ NButton,
+ NFormItem,
+ NInput,
+ NH4,
+ NInputNumber,
+ useMessage,
+} from "naive-ui";
+import { Analytics, CloseCircle, Settings } from "@vicons/ionicons5";
+import { useKeyboardStore } from "../../store/keyboard";
+import { KeySwipe } from "../../keyMappingConfig";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+ index: number;
+}>();
+
+const keyboardStore = useKeyboardStore();
+const message = useMessage();
+const store = useGlobalStore();
+const { t } = useI18n();
+
+const elementRef = ref
(null);
+
+const isActive = computed(
+ () => props.index === keyboardStore.activeButtonIndex
+);
+const keyMapping = computed(
+ () => store.editKeyMappingList[props.index] as KeySwipe
+);
+
+const trackPoints = computed(() => {
+ let s = "";
+ if (isActive.value) {
+ for (const point of keyMapping.value.pos) {
+ s += `${point.x},${point.y} `;
+ }
+ }
+ return s;
+});
+
+function dragHandler(downEvent: MouseEvent) {
+ keyboardStore.activeButtonIndex = props.index;
+ keyboardStore.showButtonSettingFlag = false;
+ const oldX = keyMapping.value.posX;
+ const oldY = keyMapping.value.posY;
+ const element = elementRef.value;
+ if (element) {
+ const keyboardElement = document.getElementById(
+ "keyboardElement"
+ ) as HTMLElement;
+ 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(30, Math.min(newX, maxX));
+ newY = Math.max(30, Math.min(newY, maxY));
+ keyMapping.value.posX = newX;
+ keyMapping.value.posY = newY;
+ };
+ window.addEventListener("mousemove", moveHandler);
+ const upHandler = () => {
+ window.removeEventListener("mousemove", moveHandler);
+ window.removeEventListener("mouseup", upHandler);
+ if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
+ keyboardStore.edited = true;
+ }
+ };
+ window.addEventListener("mouseup", upHandler);
+ }
+}
+
+function delCurKeyMapping() {
+ keyboardStore.edited = true;
+ keyboardStore.activeButtonIndex = -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 - 380;
+
+ settingPosX.value = Math.min(keyMapping.value.posX + 40, maxWidth);
+ settingPosY.value = Math.min(keyMapping.value.posY - 40, maxHeight);
+ keyboardStore.showButtonSettingFlag = true;
+}
+
+function editSwipePoints() {
+ message.info(t("pages.KeyBoard.Swipe.editTips"));
+ keyboardStore.showButtonSettingFlag = false;
+ keyboardStore.editSwipePointsFlag = true;
+}
+
+function swipePointDragHandlue(downEvent: MouseEvent, index: number) {
+ if (downEvent.button === 2) {
+ // del point
+ keyMapping.value.pos.splice(index, 1);
+ return;
+ }
+ if (downEvent.button !== 0) return;
+
+ const oldX = keyMapping.value.pos[index].x;
+ const oldY = keyMapping.value.pos[index].y;
+ const keyboardElement = document.getElementById(
+ "keyboardElement"
+ ) as HTMLElement;
+ const maxX = keyboardElement.clientWidth;
+ const maxY = keyboardElement.clientHeight;
+
+ 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));
+ keyMapping.value.pos[index].x = newX;
+ keyMapping.value.pos[index].y = newY;
+ };
+ const upHandler = () => {
+ window.removeEventListener("mousemove", moveHandler);
+ window.removeEventListener("mouseup", upHandler);
+ };
+ window.addEventListener("mousemove", moveHandler);
+ window.addEventListener("mouseup", upHandler);
+}
+
+function swipeTrackClickHandler(event: MouseEvent) {
+ if (event.button !== 0) return;
+ console.log(event.target, event.currentTarget);
+ if (event.target !== event.currentTarget) return;
+ keyMapping.value.pos.push({ x: event.clientX - 70, y: event.clientY - 30 });
+}
+
+
+
+
+
+
{{ keyMapping.key }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("pages.KeyBoard.Swipe.swipe") }}
+
+ {{
+ $t("pages.KeyBoard.Swipe.editPos")
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
index c2d7f55..d96ce2c 100644
--- a/src/i18n/en-US.json
+++ b/src/i18n/en-US.json
@@ -151,7 +151,8 @@
"Sight": "Front sight",
"Fire": "Fire",
"existFire": "Fire button already exists",
- "existSight": "Front sight button already exists"
+ "existSight": "Front sight button already exists",
+ "Swipe": "Swipe"
},
"buttonKeyRepeat": "Key repeat: {0}",
"KeyCommon": {
@@ -253,6 +254,14 @@
"scaleX": "Horizontal sensitivity",
"scalePlaceholder": "Please enter sensitivity",
"scaleY": "Vertical sensitivity"
+ },
+ "Swipe": {
+ "swipe": "Swipe",
+ "interval": "Swipe time interval",
+ "intervalPlaceholder": "Enter the time interval between points",
+ "pos": "Points",
+ "editPos": "Edit",
+ "editTips": "Left-click on a blank area to add a new coordinate point. \nLeft-click and drag to move a specific point, and right-click to delete the point."
}
}
},
diff --git a/src/i18n/zh-CN.json b/src/i18n/zh-CN.json
index 1ab4e23..f474ebf 100644
--- a/src/i18n/zh-CN.json
+++ b/src/i18n/zh-CN.json
@@ -144,7 +144,8 @@
"Sight": "准星",
"Fire": "开火",
"existSight": "已存在准星按钮",
- "existFire": "已存在开火按钮"
+ "existFire": "已存在开火按钮",
+ "Swipe": "滑动"
},
"buttonKeyRepeat": "按键重复: {0}",
"noSaveDialog": {
@@ -253,6 +254,14 @@
"scaleX": "水平灵敏度",
"scaleY": "垂直灵敏度",
"scalePlaceholder": "请输入灵敏度"
+ },
+ "Swipe": {
+ "swipe": "滑动",
+ "interval": "滑动时间间隔",
+ "intervalPlaceholder": "输入坐标点之间的时间间隔",
+ "pos": "坐标点",
+ "editPos": "编辑",
+ "editTips": "左键点击空白区域添加新坐标点。左键拖拽移动特定坐标点，右键删除特定坐标点"
}
}
},
diff --git a/src/store/keyboard.ts b/src/store/keyboard.ts
index 3fb3a3b..9f97c01 100644
--- a/src/store/keyboard.ts
+++ b/src/store/keyboard.ts
@@ -6,6 +6,7 @@ export const useKeyboardStore = defineStore("keyboard", () => {
const showSettingFlag = ref(false);
const showButtonSettingFlag = ref(false);
const showButtonAddFlag = ref(false);
+ const editSwipePointsFlag = ref(false);
const activeButtonIndex = ref(-1);
const activeSteeringWheelButtonKeyIndex = ref(-1);
const edited = ref(false);
@@ -15,6 +16,7 @@ export const useKeyboardStore = defineStore("keyboard", () => {
showSettingFlag,
showButtonSettingFlag,
showButtonAddFlag,
+ editSwipePointsFlag,
activeButtonIndex,
activeSteeringWheelButtonKeyIndex,
edited,