✨ 增加了进入编辑状态的按键配置项

Author: Littlefean

app/src/core/render/domElement/inputElement.tsx

@@ -1,4 +1,5 @@
 import { getMultiLineTextSize } from "../../../utils/font";
+import { getEnterKey } from "../../../utils/keyboardFunctions";
 import { Vector } from "../../dataStruct/Vector";
 import { EntityDashTipEffect } from "../../service/feedbackService/effectEngine/concrete/EntityDashTipEffect";
 import { EntityShakeEffect } from "../../service/feedbackService/effectEngine/concrete/EntityShakeEffect";
@@ -271,23 +272,7 @@ export namespace InputElement {
     for (const textNode of textNodes) {
       Stage.effectMachine.addEffect(EntityShakeEffect.fromEntity(textNode));
     }
-    Stage.effectMachine.addEffect(TextRiseEffect.default("您可能记错了快捷键"));
-  }
-
-  function getEnterKey(event: KeyboardEvent): "enter" | "ctrlEnter" | "shiftEnter" | "altEnter" | "other" {
-    if (event.key === "Enter") {
-      if (event.ctrlKey) {
-        return "ctrlEnter";
-      } else if (event.altKey) {
-        return "altEnter";
-      } else if (event.shiftKey) {
-        return "shiftEnter";
-      } else {
-        return "enter";
-      }
-    } else {
-      return "other";
-    }
+    Stage.effectMachine.addEffect(TextRiseEffect.default("您可能记错了退出或换行的控制设置"));
   }
 
   let textNodeContentLineBreak: Settings.Settings["textNodeContentLineBreak"] = "enter";

app/src/core/service/Settings.tsx

@@ -62,6 +62,7 @@ export namespace Settings {
     mouseRightDragBackground: "cut" | "moveCamera";
     textNodeContentLineBreak: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
     textNodeExitEditMode: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
+    textNodeStartEditMode: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
     // 音效相关
     soundEnabled: boolean;
     cuttingLineStartSoundFile: string;
@@ -124,6 +125,7 @@ export namespace Settings {
     mouseRightDragBackground: "cut",
     textNodeContentLineBreak: "enter",
     textNodeExitEditMode: "ctrlEnter",
+    textNodeStartEditMode: "enter",
     // 音效相关
     soundEnabled: true,
     cuttingLineStartSoundFile: "",

app/src/core/service/controlService/keyboardOnlyEngine/keyboardOnlyEngine.tsx

@@ -1,10 +1,15 @@
 import { Dialog } from "../../../../components/dialog";
+import { getEnterKey } from "../../../../utils/keyboardFunctions";
 import { Vector } from "../../../dataStruct/Vector";
 import { EdgeRenderer } from "../../../render/canvas2d/entityRenderer/edge/EdgeRenderer";
 import { Camera } from "../../../stage/Camera";
 import { Stage } from "../../../stage/Stage";
 import { StageManager } from "../../../stage/stageManager/StageManager";
 import { ConnectableEntity } from "../../../stage/stageObject/abstract/ConnectableEntity";
+import { EntityDashTipEffect } from "../../feedbackService/effectEngine/concrete/EntityDashTipEffect";
+import { EntityShakeEffect } from "../../feedbackService/effectEngine/concrete/EntityShakeEffect";
+import { TextRiseEffect } from "../../feedbackService/effectEngine/concrete/TextRiseEffect";
+import { Settings } from "../../Settings";
 import { editTextNode } from "../controller/concrete/utilsControl";
 import { KeyboardOnlyDirectionController } from "./keyboardOnlyDirectionController";
 import { NewTargetLocationSelector } from "./newTargetLocationSelector";
@@ -23,9 +28,14 @@ export namespace KeyboardOnlyEngine {
     return targetLocationController.location;
   }
 
+  let textNodeStartEditMode: Settings.Settings["textNodeStartEditMode"] = "enter";
+
   export function init() {
     bindKeyEvents();
     targetLocationController.init();
+    Settings.watch("textNodeStartEditMode", (value) => {
+      textNodeStartEditMode = value;
+    });
   }
 
   export function logicTick() {
@@ -43,12 +53,19 @@ export namespace KeyboardOnlyEngine {
         //   createStart();
         // }
       } else if (event.key === "Enter") {
-        // 这个还必须在down的位置上，因为在up上会导致无限触发
-        const selectedNode = StageManager.getTextNodes().find((node) => node.isSelected);
-        if (!selectedNode) return;
-        event.preventDefault(); // 这个prevent必须开启，否则会立刻在刚创建的输入框里输入一个换行符。
-        // 编辑节点
-        editTextNode(selectedNode, false);
+        const enterKeyDetail = getEnterKey(event);
+        if (textNodeStartEditMode === enterKeyDetail) {
+          // 这个还必须在down的位置上，因为在up上会导致无限触发
+          const selectedNode = StageManager.getTextNodes().find((node) => node.isSelected);
+          if (!selectedNode) return;
+          event.preventDefault(); // 这个prevent必须开启，否则会立刻在刚创建的输入框里输入一个换行符。
+          addSuccessEffect();
+          // 编辑节点
+          editTextNode(selectedNode, false);
+        } else {
+          // 用户可能记错了快捷键
+          addFailEffect();
+        }
       } else if (event.key === "F2") {
         const selectedNode = StageManager.getTextNodes().find((node) => node.isSelected);
         if (!selectedNode) return;
@@ -67,6 +84,20 @@ export namespace KeyboardOnlyEngine {
     // });
   }
 
+  function addSuccessEffect() {
+    const textNodes = StageManager.getTextNodes().filter((textNode) => textNode.isSelected);
+    for (const textNode of textNodes) {
+      Stage.effectMachine.addEffect(new EntityDashTipEffect(50, textNode.collisionBox.getRectangle()));
+    }
+  }
+
+  function addFailEffect() {
+    const textNodes = StageManager.getTextNodes().filter((textNode) => textNode.isSelected);
+    for (const textNode of textNodes) {
+      Stage.effectMachine.addEffect(EntityShakeEffect.fromEntity(textNode));
+    }
+    Stage.effectMachine.addEffect(TextRiseEffect.default("您可能记错了节点进入编辑状态的控制键设置"));
+  }
   /**
    * 是否达到了按下Tab键的前置条件
    */

app/src/locales/en.yml

@@ -320,6 +320,15 @@ settings:
     description: |
       注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
       进而导致无法换行
+  textNodeStartEditMode:
+    title: 文本节点进入编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按F2键也可以进入编辑模式，这里还可以再加选一种
   textNodeExitEditMode:
     title: 文本节点退出编辑模式
     options:

app/src/locales/zh_CN.yml

@@ -303,6 +303,15 @@ settings:
     description: |
       注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
       进而导致无法换行
+  textNodeStartEditMode:
+    title: 文本节点进入编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按F2键也可以进入编辑模式，这里还可以再加选一种
   textNodeExitEditMode:
     title: 文本节点退出编辑模式
     options:

app/src/locales/zh_TW.yml

@@ -291,6 +291,15 @@ settings:
     description: |
       注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
       进而导致无法换行
+  textNodeStartEditMode:
+    title: 文本节点进入编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按F2键也可以进入编辑模式，这里还可以再加选一种
   textNodeExitEditMode:
     title: 文本节点退出编辑模式
     options:

app/src/pages/settings/control.tsx

@@ -5,6 +5,7 @@ import {
   Keyboard,
   ListCheck,
   ListEnd,
+  ListRestart,
   Mouse,
   MousePointerClick,
   Move,
@@ -20,12 +21,13 @@ export default function Control() {
     <>
       <FieldGroup title="Mouse 鼠标设定" icon={<Mouse />}>
         <SettingField icon={<MousePointerClick />} settingKey="mouseRightDragBackground" type="select" />
+        <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
       </FieldGroup>
 
       <FieldGroup title="TextNode 文本节点" icon={<TextSelect />}>
+        <SettingField icon={<ListRestart />} settingKey="textNodeStartEditMode" type="select" />
         <SettingField icon={<ListEnd />} settingKey="textNodeContentLineBreak" type="select" />
         <SettingField icon={<ListCheck />} settingKey="textNodeExitEditMode" type="select" />
-        <SettingField icon={<AlignStartVertical />} settingKey="enableDragAutoAlign" type="switch" />
       </FieldGroup>
 
       <FieldGroup title="Edge 连线" icon={<GitCompareArrows />}>

app/src/utils/keyboardFunctions.tsx

@@ -0,0 +1,15 @@
+export function getEnterKey(event: KeyboardEvent): "enter" | "ctrlEnter" | "shiftEnter" | "altEnter" | "other" {
+  if (event.key === "Enter") {
+    if (event.ctrlKey) {
+      return "ctrlEnter";
+    } else if (event.altKey) {
+      return "altEnter";
+    } else if (event.shiftKey) {
+      return "shiftEnter";
+    } else {
+      return "enter";
+    }
+  } else {
+    return "other";
+  }
+}