✨ fix: #315 添加横向滚动画面的鼠标滚轮设置项

Author: Littlefean

app/src/core/service/Settings.tsx

@@ -71,9 +71,9 @@ export namespace Settings {
     textNodeStartEditMode: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
     textNodeSelectAllWhenStartEditByKeyboard: boolean;
     textNodeSelectAllWhenStartEditByMouseClick: boolean;
-    mouseWheelMode: "zoom" | "move";
-    mouseWheelWithShiftMode: "zoom" | "move";
-    mouseWheelWithCtrlMode: "zoom" | "move";
+    mouseWheelMode: "zoom" | "move" | "moveX";
+    mouseWheelWithShiftMode: "zoom" | "move" | "moveX";
+    mouseWheelWithCtrlMode: "zoom" | "move" | "moveX";
     // 音效相关
     soundEnabled: boolean;
     cuttingLineStartSoundFile: string;

app/src/core/service/controlService/controller/concrete/ControllerCamera.tsx

@@ -179,8 +179,10 @@ ControllerCamera.mousewheel = (event: WheelEvent) => {
   if (Controller.pressingKeySet.has("shift")) {
     if (Camera.mouseWheelWithShiftMode === "zoom") {
       zoomCameraByMouseWheel(event);
-    } else {
+    } else if (Camera.mouseWheelWithShiftMode === "move") {
       moveCameraByMouseWheel(event);
+    } else if (Camera.mouseWheelWithShiftMode === "moveX") {
+      moveXCameraByMouseWheel(event);
     }
   } else if (Controller.pressingKeySet.has("control")) {
     // 不要在节点上滚动
@@ -189,13 +191,21 @@ ControllerCamera.mousewheel = (event: WheelEvent) => {
       // 给这个entity一个特效
       Stage.effectMachine.addEffect(EntityCreateFlashEffect.fromRectangle(entity.collisionBox.getRectangle()));
     } else {
-      zoomCameraByMouseWheel(event);
+      if (Camera.mouseWheelWithCtrlMode === "zoom") {
+        zoomCameraByMouseWheel(event);
+      } else if (Camera.mouseWheelWithCtrlMode === "move") {
+        moveCameraByMouseWheel(event);
+      } else if (Camera.mouseWheelWithCtrlMode === "moveX") {
+        moveXCameraByMouseWheel(event);
+      }
     }
   } else {
     if (Camera.mouseWheelMode === "zoom") {
       zoomCameraByMouseWheel(event);
-    } else {
+    } else if (Camera.mouseWheelMode === "move") {
       moveCameraByMouseWheel(event);
+    } else if (Camera.mouseWheelMode === "moveX") {
+      moveXCameraByMouseWheel(event);
     }
   }
 
@@ -224,6 +234,15 @@ function moveCameraByMouseWheel(event: WheelEvent) {
     Camera.location = Camera.location.subtract(new Vector(0, (Camera.moveAmplitude * 50) / Camera.currentScale));
   }
 }
+function moveXCameraByMouseWheel(event: WheelEvent) {
+  if (event.deltaY > 0) {
+    // 向上滚动是左移
+    Camera.location = Camera.location.add(new Vector((Camera.moveAmplitude * 50) / Camera.currentScale, 0));
+  } else if (event.deltaY < 0) {
+    // 向下滚动是右移
+    Camera.location = Camera.location.add(new Vector((-Camera.moveAmplitude * 50) / Camera.currentScale, 0));
+  }
+}
 /**
  * 如果使用了鼠标滚轮，则x或y的滚动必有一个接近100
  * @param event

app/src/core/stage/Camera.tsx

@@ -81,9 +81,9 @@ export namespace Camera {
   export let limitCameraInCycleSpace = false;
   export let cameraCycleSpaceSizeX = 1000;
   export let cameraCycleSpaceSizeY = 1000;
-  export let mouseWheelMode: "zoom" | "move" = "zoom"; // zoom or move
-  export let mouseWheelWithShiftMode: "zoom" | "move" = "zoom"; // zoom or move
-  export let mouseWheelWithCtrlMode: "zoom" | "move" = "zoom"; // zoom or move
+  export let mouseWheelMode: Settings.Settings["mouseWheelMode"] = "zoom";
+  export let mouseWheelWithShiftMode: Settings.Settings["mouseWheelWithShiftMode"] = "zoom";
+  export let mouseWheelWithCtrlMode: Settings.Settings["mouseWheelWithCtrlMode"] = "zoom";
   let cameraKeyboardScaleRate = 0.2;
 
   // IDEA: 突然有一个好点子

app/src/locales/en.yml

@@ -374,16 +374,19 @@ settings:
     options:
       zoom: zoom
       move: move
+      moveX: move X
   mouseWheelWithShiftMode:
     title: mouse Wheel Mode When Press Shift
     options:
       zoom: zoom
       move: move
+      moveX: move X
   mouseWheelWithCtrlMode:
     title: mouse Wheel Mode When Press Ctrl
     options:
       zoom: zoom
       move: move
+      moveX: move X
   rectangleSelectWhenLeft:
     title: Strategy for Left Rectangle Selection
     description: |

app/src/locales/zh_CN.yml

@@ -360,17 +360,20 @@ settings:
     title: 鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   mouseWheelWithShiftMode:
     title: 按住Shift时，鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   mouseWheelWithCtrlMode:
     title: 按住Ctrl时，鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   rectangleSelectWhenLeft:
     title: 向左框选的策略
     description: |

app/src/locales/zh_TW.yml

@@ -343,17 +343,20 @@ settings:
     title: 鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   mouseWheelWithShiftMode:
     title: 按住Shift时，鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   mouseWheelWithCtrlMode:
     title: 按住Ctrl时，鼠标滚轮模式
     options:
       zoom: 缩放
-      move: 移动
+      move: 纵向移动
+      moveX: 横向移动
   rectangleSelectWhenLeft:
     title: 向左框选的策略
     description: |