feat: 增加广度树形生长方向的节点提示（在节点旁预测反斜杠键生长节点的位置并提示）并增加渲染的开关设置项：“显示树形生长方向提示”

Author: Littlefean

app/src/core/render/canvas2d/entityRenderer/textNode/TextNodeRenderer.tsx

@@ -80,7 +80,7 @@ export class TextNodeRenderer {
         );
       }
       // 渲染键盘树形模式方向提示（仅在键盘操作模式下且非编辑状态时显示）
-      if (this.project.keyboardOnlyEngine.isOpenning() && !node.isEditing) {
+      if (this.project.keyboardOnlyEngine.isOpenning() && !node.isEditing && Settings.showTreeDirectionHint) {
         this.renderKeyboardTreeHint(node);
       }
     }
@@ -171,6 +171,30 @@ export class TextNodeRenderer {
         this.project.textRenderer.renderTextFromCenter(key, viewPos, 13 * this.project.camera.currentScale, hintColor);
       }
     }
+
+    // 反斜杠（\）广度生长：在父节点方向确定的新兄弟节点预测位置画一个虚框
+    // onBroadGenerateNode 创建的是父节点的新子节点（当前选中节点的兄弟）
+    // 父节点方向 left/right → 新兄弟在当前节点下方
+    // 父节点方向 up/down   → 新兄弟在当前节点右侧
+    const parents = this.project.graphMethods.nodeParentArray(node);
+    if (parents.length === 1) {
+      const parentNode = parents[0];
+      const parentDirection = this.project.keyboardOnlyTreeEngine.getNodePreDirection(parentNode);
+      const SIBLING_GAP = 10;
+      let previewLocation: Vector;
+      if (parentDirection === "right" || parentDirection === "left") {
+        previewLocation = rect.leftBottom.add(new Vector(0, SIBLING_GAP));
+      } else {
+        previewLocation = rect.rightTop.add(new Vector(SIBLING_GAP, 0));
+      }
+      const previewCenter = previewLocation.add(new Vector(rect.width / 2, rect.height / 2));
+      this.project.textRenderer.renderTextFromCenter(
+        "backslash \\",
+        this.project.renderer.transformWorld2View(previewCenter),
+        10 * this.project.camera.currentScale,
+        hintColor,
+      );
+    }
   }
 
   /**

app/src/core/service/Settings.tsx

@@ -19,6 +19,7 @@ export const settingsSchema = z.object({
   showBackgroundCartesian: z.boolean().default(true),
   enableTagTextNodesBigDisplay: z.boolean().default(true),
   showTextNodeBorder: z.boolean().default(true),
+  showTreeDirectionHint: z.boolean().default(true),
   lineStyle: z.union([z.literal("straight"), z.literal("bezier"), z.literal("vertical")]).default("straight"),
   sectionBitTitleRenderType: z.union([z.literal("none"), z.literal("top"), z.literal("cover")]).default("cover"),
   nodeDetailsPanel: z.union([z.literal("small"), z.literal("vditor")]).default("vditor"),

app/src/core/service/SettingsIcons.tsx

@@ -157,6 +157,7 @@ export const settingsIcons = {
   showBackgroundCartesian: Move3d,
   enableTagTextNodesBigDisplay: Tag,
   showTextNodeBorder: Square,
+  showTreeDirectionHint: ListTree,
   lineStyle: Spline,
   sectionBitTitleRenderType: SquareM,
   sectionBigTitleThresholdRatio: Ratio,

app/src/locales/en.yml

@@ -782,6 +782,11 @@ settings:
   showTextNodeBorder:
     title: Show Text Node Border
     description: "Controls whether to show the text node border or not.\n"
+  showTreeDirectionHint:
+    title: Show Tree Growth Direction Hints
+    description: |
+      When a text node is selected, display keyboard hints (tab/W W/S S/A A/D D) around the node indicating tree growth directions.
+      When disabled, these hint labels will not be rendered.
   autoLayoutWhenTreeGenerate:
     title: Automatically update layout when growing nodes
     description: "After it is turned on, the layout will be automatically updated

app/src/locales/id.yml

@@ -269,6 +269,11 @@ settings:
     title: Tampilkan Batas Node Teks
     description: |
       Mengontrol apakah menampilkan batas node teks
+  showTreeDirectionHint:
+    title: Tampilkan Petunjuk Arah Pertumbuhan Pohon
+    description: |
+      Saat node teks dipilih, tampilkan petunjuk keyboard (tab/W W/S S/A A/D D) di sekitar node yang menunjukkan arah pertumbuhan pohon.
+      Saat dinonaktifkan, label petunjuk ini tidak akan dirender.
   sectionBitTitleRenderType:
     title: Jenis Render Judul Besar Ringkasan Kotak
     options:

app/src/locales/zh_CN.yml

@@ -278,6 +278,11 @@ settings:
     title: 显示文本节点边框
     description: |
       控制是否显示文本节点的边框
+  showTreeDirectionHint:
+    title: 显示树形生长方向提示
+    description: |
+      选中文本节点时，在节点四周显示 tab/W W/S S/A A/D D 等键盘树形生长方向提示。
+      关闭后不再渲染这些提示文字。
   sectionBitTitleRenderType:
     title: 框的缩略大标题渲染类型
     options:

app/src/locales/zh_TW.yml

@@ -278,6 +278,11 @@ settings:
     title: 顯示文本節點邊框
     description: |
       控制是否顯示文本節點的邊框
+  showTreeDirectionHint:
+    title: 顯示樹形生長方向提示
+    description: |
+      選中文本節點時，在節點四周顯示 tab/W W/S S/A A/D D 等鍵盤樹形生長方向提示。
+      關閉後不再渲染這些提示文字。
   sectionBitTitleRenderType:
     title: 框的縮略大標題渲染類型
     options:

app/src/locales/zh_TWC.yml

@@ -322,6 +322,9 @@ settings:
   showTextNodeBorder:
     title: 顯示文字節點邊框
     description: 控制是否顯示文字節點的邊框
+  showTreeDirectionHint:
+    title: 顯示樹形生長方向提示
+    description: 選中文字節點時，在節點四周顯示 tab/W W/S S/A A/D D 等鍵盤樹形生長方向提示。關閉後不再渲染這些提示文字。
   sectionBitTitleRenderType:
     title: 框的縮略大標題渲染類型
     options:

app/src/sub/SettingsWindow/settings.tsx

@@ -217,7 +217,7 @@ const categories = {
       "stealthModeReverseMask",
       "stealthModeMaskShape",
     ],
-    node: ["enableTagTextNodesBigDisplay", "showTextNodeBorder"],
+    node: ["enableTagTextNodesBigDisplay", "showTextNodeBorder", "showTreeDirectionHint"],
     edge: ["lineStyle"],
     section: [
       "sectionBitTitleRenderType",