✨ 增加树形结构一键转框嵌套结构的功能

Author: Littlefean

app/src/core/stage/stageManager/concreteMethods/StageSectionPackManager.tsx

@@ -86,6 +86,10 @@ export namespace StageSectionPackManager {
    */
   export function textNodeTreeToSection(rootNode: TextNode): void {
     if (!GraphMethods.isTree(rootNode)) {
+      Dialog.show({
+        title: "非树状结构",
+        content: "请选择一个树状结构的节点作为根节点",
+      });
       return;
     }
     const dfs = (node: TextNode): Section | TextNode => {
@@ -97,21 +101,27 @@ export namespace StageSectionPackManager {
       for (const childNode of childNodes) {
         const transEntity = dfs(childNode);
         childEntityList.push(transEntity);
-        // TODO: 断开主和子之间的连线
+
+        const edges = GraphMethods.getEdgesBetween(node, childNode);
+        for (const edge of edges) {
+          StageManager.deleteEdge(edge);
+        }
       }
-      const section = targetTextNodeToSection(node);
+      const section = targetTextNodeToSection(node, true);
 
       StageSectionInOutManager.goInSection(childEntityList, section);
       return section;
     };
     dfs(rootNode);
+    StageHistoryManager.recordStep();
   }
 
   /**
    * 将指定的文本节点转换成Section
-   * @param textNode
+   * @param textNode 要转换的节点
+   * @param ignoreEdges 是否忽略边的影响
    */
-  export function targetTextNodeToSection(textNode: TextNode): Section {
+  export function targetTextNodeToSection(textNode: TextNode, ignoreEdges: boolean = false): Section {
     // 获取这个节点的父级Section
     const fatherSections = SectionMethods.getFatherSections(textNode);
     const rect = textNode.collisionBox.getRectangle().expandFromCenter(50);
@@ -136,13 +146,15 @@ export namespace StageSectionPackManager {
       StageSectionInOutManager.goInSection([newSection], fatherSection);
     }
 
-    // 将所有连向它的东西连到新的Section
-    for (const fatherConnection of fatherConnections) {
-      StageManager.connectEntity(fatherConnection, newSection);
-    }
-    // 将所有连向新的Section的东西连到它
-    for (const childConnection of childConnections) {
-      StageManager.connectEntity(newSection, childConnection);
+    if (!ignoreEdges) {
+      // 将所有连向它的东西连到新的Section
+      for (const fatherConnection of fatherConnections) {
+        StageManager.connectEntity(fatherConnection, newSection);
+      }
+      // 将所有连向新的Section的东西连到它
+      for (const childConnection of childConnections) {
+        StageManager.connectEntity(newSection, childConnection);
+      }
     }
     // 更新section的碰撞箱
     newSection.adjustLocationAndSize();

app/src/pages/_popup_panel/_align_panel.tsx

@@ -11,6 +11,7 @@ import {
   LayoutGrid,
   Magnet,
   Network,
+  SquareSquare,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Dialog } from "../../components/dialog";
@@ -22,6 +23,8 @@ import { cn } from "../../utils/cn";
 import { ToolbarItem } from "../_toolbar";
 import { StageEntityMoveManager } from "../../core/stage/stageManager/concreteMethods/StageEntityMoveManager";
 import { StageAutoAlignManager } from "../../core/stage/stageManager/concreteMethods/StageAutoAlignManager";
+import { StageSectionPackManager } from "../../core/stage/stageManager/concreteMethods/StageSectionPackManager";
+import { TextNode } from "../../core/stage/stageObject/entity/TextNode";
 export default function AlignNodePanel() {
   const [isEnableDragAutoAlign, setEnableDragAutoAlign] = useState(false);
 
@@ -198,6 +201,21 @@ export default function AlignNodePanel() {
             StageEntityMoveManager.layoutToTightSquare();
           }}
         />
+        <ToolbarItem
+          description="将树形结构变成框嵌套结构"
+          icon={<SquareSquare />}
+          handleFunction={() => {
+            const selectedNodes = StageManager.getSelectedEntities().filter((node) => node instanceof TextNode);
+            if (selectedNodes.length !== 1) {
+              Dialog.show({
+                title: "选择节点数量不为1",
+                content: "必须只选择一个根节点才可以进行树形结构变成框嵌套结构",
+              });
+              return;
+            }
+            StageSectionPackManager.textNodeTreeToSection(selectedNodes[0]);
+          }}
+        />
         <ToolbarItem
           description={isEnableDragAutoAlign ? "拖动吸附对齐：开启" : "拖动吸附对齐：关闭"}
           icon={<Magnet className={cn(!isEnableDragAutoAlign && "text-panel-details-text", "transition-transform")} />}