✨ 自定义节点文本换行和退出编辑的快捷键

LiRenTech · Jan 23, 2025 · 34934cf · 34934cf
1 parent 5b85754
commit 34934cf
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 16 deletions.
diff --git a/src/core/render/canvas2d/entityRenderer/EntityRenderer.tsx b/src/core/render/canvas2d/entityRenderer/EntityRenderer.tsx
@@ -147,14 +147,14 @@ export namespace EntityRenderer {
       }
     } else {
       // 编辑状态下，显示一些提示信息
-      TextRenderer.renderText(
-        "Esc 或 Ctrl+Enter 退出编辑状态",
-        Renderer.transformWorld2View(
-          node.rectangle.location.add(new Vector(0, -25)),
-        ),
-        20 * Camera.currentScale,
-        StageStyleManager.currentStyle.GridHeavyColor,
-      );
+      // TextRenderer.renderText(
+      //   "Esc 或 Ctrl+Enter 退出编辑状态",
+      //   Renderer.transformWorld2View(
+      //     node.rectangle.location.add(new Vector(0, -25)),
+      //   ),
+      //   20 * Camera.currentScale,
+      //   StageStyleManager.currentStyle.GridHeavyColor,
+      // );
     }
 
     if (node.isSelected) {

diff --git a/src/core/render/domElement/inputElement.tsx b/src/core/render/domElement/inputElement.tsx
@@ -1,5 +1,6 @@
 import { getMultiLineTextSize } from "../../../utils/font";
 import { Vector } from "../../dataStruct/Vector";
+import { Settings } from "../../service/Settings";
 import { Camera } from "../../stage/Camera";
 import { Renderer } from "../canvas2d/renderer";
 
@@ -205,20 +206,88 @@ export namespace InputElement {
           textareaElement.selectionStart = start + 1;
           textareaElement.selectionEnd = start + 1;
         } else if (event.key === "Escape") {
+          // Escape 是通用的取消编辑的快捷键
           resolve(textareaElement.value);
           onChange(textareaElement.value);
           document.body.removeEventListener("click", onOutsideClick);
           removeElement();
-        } else if (event.key === "Enter") {
-          // 如果按下了ctrl键
-          if (event.ctrlKey) {
-            resolve(textareaElement.value);
-            onChange(textareaElement.value);
-            document.body.removeEventListener("click", onOutsideClick);
-            removeElement();
+        }
+
+        const breakLine = () => {
+          const start = textareaElement.selectionStart;
+          const end = textareaElement.selectionEnd;
+          textareaElement.value =
+            textareaElement.value.substring(0, start) +
+            "\n" +
+            textareaElement.value.substring(end);
+          textareaElement.selectionStart = start + 1;
+          textareaElement.selectionEnd = start + 1;
+          // 调整
+          adjustSize(); // 调整textarea
+          onChange(textareaElement.value); // 调整canvas渲染上去的框大小
+        };
+
+        const exitEditMode = () => {
+          resolve(textareaElement.value);
+          onChange(textareaElement.value);
+          document.body.removeEventListener("click", onOutsideClick);
+          removeElement();
+        };
+
+        if (event.key === "Enter") {
+          const isPressedCtrl = event.ctrlKey;
+          const isPressedAlt = event.altKey;
+          const isPressedShift = event.shiftKey;
+          // 先检测是否要退出编辑模式
+          if (textNodeExitEditMode === "enter") {
+            if (!isPressedCtrl && !isPressedAlt && !isPressedShift) {
+              exitEditMode();
+            }
+          } else if (textNodeExitEditMode === "ctrlEnter") {
+            if (isPressedCtrl && !isPressedAlt && !isPressedShift) {
+              exitEditMode();
+            }
+          } else if (textNodeExitEditMode === "altEnter") {
+            if (!isPressedCtrl && isPressedAlt && !isPressedShift) {
+              exitEditMode();
+            }
+          } else if (textNodeExitEditMode === "shiftEnter") {
+            if (!isPressedCtrl && !isPressedAlt && isPressedShift) {
+              exitEditMode();
+            }
+          }
+          // 再检测是否要换行
+          if (textNodeContentLineBreak === "enter") {
+            if (!isPressedCtrl && !isPressedAlt && !isPressedShift) {
+              // breakLine();
+              // 这里什么都不用做，因为换行的功能已经在keydown中实现了
+            }
+          } else if (textNodeContentLineBreak === "ctrlEnter") {
+            if (isPressedCtrl && !isPressedAlt && !isPressedShift) {
+              breakLine();
+            }
+          } else if (textNodeContentLineBreak === "altEnter") {
+            if (!isPressedCtrl && isPressedAlt && !isPressedShift) {
+              breakLine();
+            }
           }
         }
       });
     });
   }
+
+  let textNodeContentLineBreak: Settings.Settings["textNodeContentLineBreak"] =
+    "enter";
+
+  let textNodeExitEditMode: Settings.Settings["textNodeExitEditMode"] =
+    "ctrlEnter";
+
+  export function init() {
+    Settings.watch("textNodeContentLineBreak", (value) => {
+      textNodeContentLineBreak = value;
+    });
+    Settings.watch("textNodeExitEditMode", (value) => {
+      textNodeExitEditMode = value;
+    });
+  }
 }
diff --git a/src/core/service/Settings.tsx b/src/core/service/Settings.tsx
@@ -55,6 +55,8 @@ export namespace Settings {
     moveFriction: number;
     gamepadDeadzone: number;
     mouseRightDragBackground: "cut" | "moveCamera";
+    textNodeContentLineBreak: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
+    textNodeExitEditMode: "enter" | "ctrlEnter" | "altEnter" | "shiftEnter";
     // 音效相关
     soundEnabled: boolean;
     cuttingLineStartSoundFile: string;
@@ -111,6 +113,8 @@ export namespace Settings {
     moveFriction: 0.1,
     gamepadDeadzone: 0.1,
     mouseRightDragBackground: "cut",
+    textNodeContentLineBreak: "enter",
+    textNodeExitEditMode: "ctrlEnter",
     // 音效相关
     soundEnabled: true,
     cuttingLineStartSoundFile: "",

diff --git a/src/locales/en.yml b/src/locales/en.yml
@@ -271,6 +271,25 @@ settings:
     options:
       cut: Cut and Delete Object
       moveCamera: Move View
+  textNodeContentLineBreak:
+    title: 文本节点换行方案
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
+      进而导致无法换行
+  textNodeExitEditMode:
+    title: 文本节点退出编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按Esc键也可以退出，这里还可以再加选一种
   enableDragAutoAlign:
     title: Enable Drag Auto Align Nodes
     description: |

diff --git a/src/locales/zh-CN.yml b/src/locales/zh-CN.yml
@@ -270,6 +270,25 @@ settings:
     options:
       cut: 斩断并删除物体
       moveCamera: 移动视野
+  textNodeContentLineBreak:
+    title: 文本节点换行方案
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
+      进而导致无法换行
+  textNodeExitEditMode:
+    title: 文本节点退出编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按Esc键也可以退出，这里还可以再加选一种
   enableDragAutoAlign:
     title: 鼠标拖动自动吸附对齐节点
     description: |

diff --git a/src/locales/zh-TW.yml b/src/locales/zh-TW.yml
@@ -260,6 +260,25 @@ settings:
     options:
       cut: 斬斷並刪除物體
       moveCamera: 移動視野
+  textNodeContentLineBreak:
+    title: 文本节点换行方案
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      注意不要和文本节点退出编辑模式的按键一样了，这样会导致冲突
+      进而导致无法换行
+  textNodeExitEditMode:
+    title: 文本节点退出编辑模式
+    options:
+      enter: enter
+      ctrlEnter: ctrlEnter
+      altEnter: altEnter
+      shiftEnter: shiftEnter
+    description: |
+      实际上按Esc键也可以退出，这里还可以再加选一种
   enableDragAutoAlign:
     title: 鼠标拖动自动对齐节点
     description: |

diff --git a/src/main.tsx b/src/main.tsx
@@ -40,6 +40,7 @@ import { exists } from "./utils/fs";
 import { exit, openDevtools, writeStderr, writeStdout } from "./utils/otherApi";
 import { getCurrentWindow, isDesktop, isWeb } from "./utils/platform";
 import { Popup } from "./utils/popup";
+import { InputElement } from "./core/render/domElement/inputElement";
 
 const router = createMemoryRouter(routes);
 const Routes = () => <RouterProvider router={router} />;
@@ -88,10 +89,12 @@ async function loadSyncModules() {
   Stage.init();
   StageHistoryManager.init();
   StageStyleManager.init();
-  SoundService.init();
   MouseLocation.init();
   StageManager.init();
+  // 可以稍微晚几秒再初始化都没事的模块
+  SoundService.init();
   KeyboardOnlyEngine.init();
+  InputElement.init();
 }
 
 /**

diff --git a/src/pages/settings/control.tsx b/src/pages/settings/control.tsx
@@ -1,6 +1,8 @@
 import {
   AlignStartVertical,
   Keyboard,
+  ListCheck,
+  ListEnd,
   MousePointerClick,
   Move,
   RotateCw,
@@ -33,6 +35,16 @@ export default function Control() {
         settingKey="mouseRightDragBackground"
         type="select"
       />
+      <SettingField
+        icon={<ListEnd />}
+        settingKey="textNodeContentLineBreak"
+        type="select"
+      />
+      <SettingField
+        icon={<ListCheck />}
+        settingKey="textNodeExitEditMode"
+        type="select"
+      />
       <SettingField
         icon={<AlignStartVertical />}
         settingKey="enableDragAutoAlign"