✨ 增加了滚轮/shift+滚轮的自定义设置，缩放/纵向移动画布

Author: Littlefean

app/src/core/service/Settings.tsx

@@ -70,6 +70,8 @@ export namespace Settings {
     textNodeStartEditMode: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
     textNodeSelectAllWhenStartEditByKeyboard: boolean;
     textNodeSelectAllWhenStartEditByMouseClick: boolean;
+    mouseWheelMode: "zoom" | "move";
+    mouseWheelWithShiftMode: "zoom" | "move";
     // 音效相关
     soundEnabled: boolean;
     cuttingLineStartSoundFile: string;
@@ -140,6 +142,8 @@ export namespace Settings {
     textNodeStartEditMode: "enter",
     textNodeSelectAllWhenStartEditByKeyboard: false,
     textNodeSelectAllWhenStartEditByMouseClick: true,
+    mouseWheelMode: "zoom",
+    mouseWheelWithShiftMode: "move",
     // 音效相关
     soundEnabled: true,
     cuttingLineStartSoundFile: "",

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

@@ -210,24 +210,45 @@ ControllerCamera.mousewheel = (event: WheelEvent) => {
   //   console.log(vector.toString());
   //   // return false;
   // }
-
-  // 滚轮纵向滚动是缩放
-  if (event.deltaY > 0) {
-    Camera.targetScale *= 0.8;
-  } else if (event.deltaY < 0) {
-    Camera.targetScale *= 1.2;
+  if (Controller.pressingKeySet.has("shift")) {
+    if (Camera.mouseWheelWithShiftMode === "zoom") {
+      zoomCameraByMouseWheel(event);
+    } else {
+      moveCameraByMouseWheel(event);
+    }
+  } else {
+    if (Camera.mouseWheelMode === "zoom") {
+      zoomCameraByMouseWheel(event);
+    } else {
+      moveCameraByMouseWheel(event);
+    }
   }
 
   // 滚轮横向滚动是水平移动
   if (event.deltaX > 0) {
     // 左移动
-    Camera.location = Camera.location.add(new Vector((-Camera.moveAmplitude * 100) / Camera.currentScale, 0));
+    Camera.location = Camera.location.add(new Vector((-Camera.moveAmplitude * 50) / Camera.currentScale, 0));
   } else if (event.deltaX < 0) {
     // 右移动
-    Camera.location = Camera.location.add(new Vector((Camera.moveAmplitude * 100) / Camera.currentScale, 0));
+    Camera.location = Camera.location.add(new Vector((Camera.moveAmplitude * 50) / Camera.currentScale, 0));
   }
 };
-
+function zoomCameraByMouseWheel(event: WheelEvent) {
+  if (event.deltaY > 0) {
+    Camera.targetScale *= 0.8;
+  } else if (event.deltaY < 0) {
+    Camera.targetScale *= 1.2;
+  }
+}
+function moveCameraByMouseWheel(event: WheelEvent) {
+  if (event.deltaY > 0) {
+    // 向上滚动是上移
+    Camera.location = Camera.location.add(new Vector(0, (Camera.moveAmplitude * 50) / Camera.currentScale));
+  } else if (event.deltaY < 0) {
+    // 向下滚动是下移
+    Camera.location = Camera.location.subtract(new Vector(0, (Camera.moveAmplitude * 50) / Camera.currentScale));
+  }
+}
 /**
  * 如果使用了鼠标滚轮，则x或y的滚动必有一个接近100
  * @param event

app/src/core/stage/Camera.tsx

@@ -47,9 +47,6 @@ export namespace Camera {
   /** 当前的 画布/摄像机移动的速度矢量 */
   export let speed: Vector = Vector.getZero();
 
-  /** 当前的 移动加速度 */
-  export const accelerate: Vector = Vector.getZero();
-
   /**
    * 可以看成一个九宫格，主要用于处理 w s a d 按键移动，
    * 当同时按下w和s，这个值会是(-1,-1)，表示朝着左上移动
@@ -84,6 +81,8 @@ 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
   let cameraKeyboardScaleRate = 0.2;
 
   // IDEA: 突然有一个好点子
@@ -256,6 +255,12 @@ export namespace Camera {
     Settings.watch("cameraKeyboardScaleRate", (value) => {
       cameraKeyboardScaleRate = value;
     });
+    Settings.watch("mouseWheelMode", (value) => {
+      mouseWheelMode = value;
+    });
+    Settings.watch("mouseWheelWithShiftMode", (value) => {
+      mouseWheelWithShiftMode = value;
+    });
   }
 
   /**

app/src/locales/en.yml

@@ -364,6 +364,16 @@ settings:
     title: Enable Drag Auto Align Nodes
     description: |
       When enabled, nodes will automatically align with other nodes along the x-axis and y-axis when dragged and released
+  mouseWheelMode:
+    title: mouse Wheel Mode
+    options:
+      zoom: zoom
+      move: move
+  mouseWheelWithShiftMode:
+    title: mouse Wheel Mode When Press Shift
+    options:
+      zoom: zoom
+      move: move
   rectangleSelectWhenLeft:
     title: Strategy for Left Rectangle Selection
     description: |

app/src/locales/zh_CN.yml

@@ -351,6 +351,16 @@ settings:
     title: 鼠标拖动自动吸附对齐节点
     description: |
       开启后，拖动节点并松开时会与其他节点在x轴、y轴方向对齐
+  mouseWheelMode:
+    title: 鼠标滚轮模式
+    options:
+      zoom: 缩放
+      move: 移动
+  mouseWheelWithShiftMode:
+    title: 按住Shift时，鼠标滚轮模式
+    options:
+      zoom: 缩放
+      move: 移动
   rectangleSelectWhenLeft:
     title: 向左框选的策略
     description: |

app/src/locales/zh_TW.yml

@@ -334,6 +334,16 @@ settings:
     title: 鼠标拖动自动对齐节点
     description: |
       开启后，拖动节点并松开时会与其他节点在x轴、y轴方向对齐
+  mouseWheelMode:
+    title: 鼠标滚轮模式
+    options:
+      zoom: 缩放
+      move: 移动
+  mouseWheelWithShiftMode:
+    title: 按住Shift时，鼠标滚轮模式
+    options:
+      zoom: 缩放
+      move: 移动
   rectangleSelectWhenLeft:
     title: 向左框选的策略
     description: |

app/src/pages/settings/control.tsx

@@ -26,6 +26,8 @@ export default function Control() {
       <FieldGroup title="Mouse 鼠标设定" icon={<Mouse />}>
         <SettingField icon={<MousePointerClick />} settingKey="mouseRightDragBackground" type="select" />
         <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
+        <SettingField icon={<Mouse />} settingKey="mouseWheelMode" type="select" />
+        <SettingField icon={<Mouse />} settingKey="mouseWheelWithShiftMode" type="select" />
       </FieldGroup>
       <FieldGroup title="RectangleSelect 框选" icon={<SquareDashedMousePointer />}>
         <SettingField icon={<SquareArrowDownRight />} settingKey="rectangleSelectWhenRight" type="select" />

app/src/pages/settings/visual.tsx

@@ -75,7 +75,11 @@ export default function Visual() {
         <SettingField icon={<Bug />} settingKey="showDebug" type="switch" />
         <SettingField icon={<VenetianMask />} settingKey="protectingPrivacy" type="switch" />
       </FieldGroup>
-      <FieldGroup title="Testing Functions 实验性功能" icon={<FlaskConical />}>
+      <FieldGroup
+        title="Testing Functions 实验性功能"
+        description="如果您不了解下面的设置，请不要修改它们。否则您会感觉出现灵异事件"
+        icon={<FlaskConical />}
+      >
         <SettingField icon={<Ratio />} settingKey="limitCameraInCycleSpace" type="switch" />
         <SettingField
           icon={<Scaling />}