✨ 增加向左向右框选的不同框选策略

Littlefean · Littlefean · commit 305c8b2d3de6 · 2025-02-05T17:38:46.000+08:00
diff --git a/app/src/core/service/Settings.tsx b/app/src/core/service/Settings.tsx
@@ -52,6 +52,8 @@ export namespace Settings {
     // 控制相关
     enableCollision: boolean; // 暂无
     enableDragAutoAlign: boolean;
+    rectangleSelectWhenLeft: "intersect" | "contain";
+    rectangleSelectWhenRight: "intersect" | "contain";
     scaleExponent: number;
     allowMoveCameraByWSAD: boolean;
     cameraKeyboardMoveReverse: boolean;
@@ -119,6 +121,8 @@ export namespace Settings {
     // 控制相关
     enableCollision: true,
     enableDragAutoAlign: true,
+    rectangleSelectWhenLeft: "contain",
+    rectangleSelectWhenRight: "intersect",
     scaleExponent: 0.11,
     allowMoveCameraByWSAD: false,
     cameraKeyboardMoveReverse: false,
diff --git a/app/src/core/service/controlService/controller/concrete/ControllerRectangleSelect.tsx b/app/src/core/service/controlService/controller/concrete/ControllerRectangleSelect.tsx
@@ -1,8 +1,10 @@
 import { Rectangle } from "../../../../dataStruct/shape/Rectangle";
 import { Vector } from "../../../../dataStruct/Vector";
 import { Renderer } from "../../../../render/canvas2d/renderer";
+import { Stage } from "../../../../stage/Stage";
 import { SectionMethods } from "../../../../stage/stageManager/basicMethods/SectionMethods";
 import { StageManager } from "../../../../stage/stageManager/StageManager";
+import { StageObject } from "../../../../stage/stageObject/abstract/StageObject";
 import { Section } from "../../../../stage/stageObject/entity/Section";
 import { Controller } from "../Controller";
 import { ControllerClass } from "../ControllerClass";
@@ -104,6 +106,9 @@ class ControllerRectangleSelectClass extends ControllerClass {
 
     // 更新框选框
     this.selectingRectangle = Rectangle.fromTwoPoints(this.selectStartLocation, this.selectEndLocation);
+    // 更新框选方向
+    this.isSelectDirectionRight = this.selectStartLocation.x < this.selectEndLocation.x;
+
     // 框选框在 section框中的限制情况
     if (this.mouseDownSection !== null) {
       this.selectingRectangle = Rectangle.getIntersectionRectangle(
@@ -127,7 +132,7 @@ class ControllerRectangleSelectClass extends ControllerClass {
         if (entity.isHiddenBySectionCollapse) {
           continue;
         }
-        if (entity.collisionBox.isIntersectsWithRectangle(this.selectingRectangle)) {
+        if (this.isSelectWithEntity(entity)) {
           if (Controller.lastSelectedEntityUUID.has(entity.uuid)) {
             entity.isSelected = false;
           } else {
@@ -136,7 +141,7 @@ class ControllerRectangleSelectClass extends ControllerClass {
         }
       }
       for (const edge of StageManager.getLineEdges()) {
-        if (edge.collisionBox.isIntersectsWithRectangle(this.selectingRectangle)) {
+        if (this.isSelectWithEntity(edge)) {
           if (Controller.lastSelectedEdgeUUID.has(edge.uuid)) {
             edge.isSelected = false;
           } else {
@@ -159,7 +164,7 @@ class ControllerRectangleSelectClass extends ControllerClass {
             continue;
           }
 
-          if (otherEntities.collisionBox.isIntersectsWithRectangle(this.selectingRectangle)) {
+          if (this.isSelectWithEntity(otherEntities)) {
             otherEntities.isSelected = true;
             isHaveEntity = true;
           }
@@ -173,7 +178,7 @@ class ControllerRectangleSelectClass extends ControllerClass {
           if (edge.isHiddenBySectionCollapse) {
             continue;
           }
-          if (edge.collisionBox.isIntersectsWithRectangle(this.selectingRectangle)) {
+          if (this.isSelectWithEntity(edge)) {
             edge.isSelected = true;
           }
         }
@@ -186,6 +191,34 @@ class ControllerRectangleSelectClass extends ControllerClass {
     ControllerRectangleSelect.lastMoveLocation = worldLocation.clone();
   };
 
+  /**
+   * 判断当前的框选框是否选中了某个实体
+   * @param entity
+   */
+  private isSelectWithEntity(entity: StageObject) {
+    if (entity.collisionBox && this.selectingRectangle) {
+      const mode = this.getSelectMode();
+      if (mode === "intersect") {
+        return entity.collisionBox.isIntersectsWithRectangle(this.selectingRectangle);
+      } else {
+        return entity.collisionBox.isContainedByRectangle(this.selectingRectangle);
+      }
+    }
+    return false;
+  }
+  /**
+   * 当前的框选框的方向
+   */
+  private isSelectDirectionRight = false;
+  // 获取此时此刻应该的框选逻辑
+  private getSelectMode(): "contain" | "intersect" {
+    if (this.isSelectDirectionRight) {
+      return Stage.rectangleSelectWhenRight;
+    } else {
+      return Stage.rectangleSelectWhenLeft;
+    }
+  }
+
   public mouseup = (event: MouseEvent) => {
     if (event.button !== 0) {
       return;
diff --git a/app/src/core/stage/Stage.tsx b/app/src/core/stage/Stage.tsx
@@ -110,6 +110,8 @@ export namespace Stage {
   export let enableDragAutoAlign = true;
 
   export let textNodeSelectAllWhenStartEditByMouseClick = true;
+  export let rectangleSelectWhenLeft: "contain" | "intersect" = "contain";
+  export let rectangleSelectWhenRight: "contain" | "intersect" = "intersect";
 
   export function init() {
     autoSaveEngine.init();
@@ -123,5 +125,11 @@ export namespace Stage {
     Settings.watch("textNodeSelectAllWhenStartEditByMouseClick", (value) => {
       textNodeSelectAllWhenStartEditByMouseClick = value;
     });
+    Settings.watch("rectangleSelectWhenLeft", (value) => {
+      rectangleSelectWhenLeft = value;
+    });
+    Settings.watch("rectangleSelectWhenRight", (value) => {
+      rectangleSelectWhenRight = value;
+    });
   }
 }
diff --git a/app/src/locales/en.yml b/app/src/locales/en.yml
@@ -359,6 +359,23 @@ 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
+  rectangleSelectWhenLeft:
+    title: Strategy for Left Rectangle Selection
+    description: |
+      Choose the strategy for selecting with a rectangle when dragging left.
+      Complete containment means the selection rectangle must completely cover the bounding rectangle of the entity.
+      Partial containment means the selection rectangle only needs to touch a part of the entity's bounding rectangle to select it.
+    options:
+      intersect: Partial Containment
+      contain: Complete Containment
+  rectangleSelectWhenRight:
+    title: Strategy for Right Rectangle Selection
+    description: |
+      Choose the strategy for selecting with a rectangle when dragging right.
+    options:
+      intersect: Partial Containment
+      contain: Complete Containment
+
   cuttingLineStartSoundFile:
     title: Cutting Line Start Sound File
     description: |
diff --git a/app/src/locales/zh_CN.yml b/app/src/locales/zh_CN.yml
@@ -346,6 +346,22 @@ settings:
     title: 鼠标拖动自动吸附对齐节点
     description: |
       开启后，拖动节点并松开时会与其他节点在x轴、y轴方向对齐
+  rectangleSelectWhenLeft:
+    title: 向左框选的策略
+    description: |
+      选择鼠标向左框选的策略，包含完全覆盖框选和非完全覆盖框选
+      完全覆盖框选是指矩形框选框必须完全覆盖实体的外接矩形
+      非完全覆盖框选是指矩形框选框只要碰到一点点实体的外接矩形，就能够选中了
+    options:
+      intersect: 非完全覆盖框选
+      contain: 完全覆盖框选
+  rectangleSelectWhenRight:
+    title: 向右框选的策略
+    description: |
+      选择鼠标向右框选的策略
+    options:
+      intersect: 非完全覆盖框选
+      contain: 完全覆盖框选
   # 声音
   cuttingLineStartSoundFile:
     title: 斩断线开始的声音文件
diff --git a/app/src/locales/zh_TW.yml b/app/src/locales/zh_TW.yml
@@ -329,6 +329,22 @@ settings:
     title: 鼠标拖动自动对齐节点
     description: |
       开启后，拖动节点并松开时会与其他节点在x轴、y轴方向对齐
+  rectangleSelectWhenLeft:
+    title: 向左框选的策略
+    description: |
+      选择鼠标向左框选的策略，包含完全覆盖框选和非完全覆盖框选
+      完全覆盖框选是指矩形框选框必须完全覆盖实体的外接矩形
+      非完全覆盖框选是指矩形框选框只要碰到一点点实体的外接矩形，就能够选中了
+    options:
+      intersect: 非完全覆盖框选
+      contain: 完全覆盖框选
+  rectangleSelectWhenRight:
+    title: 向右框选的策略
+    description: |
+      选择鼠标向右框选的策略
+    options:
+      intersect: 非完全覆盖框选
+      contain: 完全覆盖框选
   # 聲音
   cuttingLineStartSoundFile:
     title: 斬斷線開始的聲音文件
diff --git a/app/src/pages/settings/control.tsx b/app/src/pages/settings/control.tsx
@@ -12,6 +12,9 @@ import {
   RotateCw,
   ScanEye,
   Skull,
+  SquareArrowDownRight,
+  SquareArrowUpLeft,
+  SquareDashedMousePointer,
   TextCursorInput,
   TextSelect,
 } from "lucide-react";
@@ -24,6 +27,10 @@ export default function Control() {
         <SettingField icon={<MousePointerClick />} settingKey="mouseRightDragBackground" type="select" />
         <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
       </FieldGroup>
+      <FieldGroup title="RectangleSelect 框选" icon={<SquareDashedMousePointer />}>
+        <SettingField icon={<SquareArrowDownRight />} settingKey="rectangleSelectWhenRight" type="select" />
+        <SettingField icon={<SquareArrowUpLeft />} settingKey="rectangleSelectWhenLeft" type="select" />
+      </FieldGroup>
 
       <FieldGroup title="TextNode 文本节点" icon={<TextSelect />}>
         <SettingField icon={<ListRestart />} settingKey="textNodeStartEditMode" type="select" />
