feat: ctrl + shift + G 将文本节点转换为框的时候，自动将其内部左上角和右下角塞入质点

Author: Littlefean

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

@@ -270,7 +270,7 @@ export class AutoAlign {
     // 检测树形结构
     if (!this.project.graphMethods.isTree(selectedRootEntity)) {
       // 不是树形结构，不做任何处理
-      toast.error("选择的节点必须是树形结构的根节点");
+      toast.error("选择的节点必须是树形结构，不能有菱形、环、等复杂结构");
       return;
     }
     this.project.autoLayoutFastTree.autoLayoutFastTreeMode(selectedRootEntity);

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

@@ -164,12 +164,41 @@ export class SectionPackManager {
     });
     newSection.adjustLocationAndSize();
 
+    // 创建左上角和右下角的质点
+    const radius = ConnectPoint.CONNECT_POINT_SHRINK_RADIUS;
+    const sectionRectangle = newSection.collisionBox.getRectangle();
+
+    // 左上角质点
+    const topLeftLocation = sectionRectangle.location.clone();
+    const topLeftCollisionBox = new CollisionBox([new Rectangle(topLeftLocation, Vector.same(radius * 2))]);
+    const topLeftPoint = new ConnectPoint(this.project, {
+      collisionBox: topLeftCollisionBox,
+    });
+
+    // 右下角质点
+    const bottomRightLocation = sectionRectangle.location
+      .clone()
+      .add(new Vector(sectionRectangle.size.x - radius * 2, sectionRectangle.size.y - radius * 2));
+    const bottomRightCollisionBox = new CollisionBox([new Rectangle(bottomRightLocation, Vector.same(radius * 2))]);
+    const bottomRightPoint = new ConnectPoint(this.project, {
+      collisionBox: bottomRightCollisionBox,
+    });
+
+    // 将质点添加到舞台
+    this.project.stageManager.add(topLeftPoint);
+    this.project.stageManager.add(bottomRightPoint);
+
     // 将新的Section加入舞台
     this.project.stageManager.add(newSection);
     for (const fatherSection of fatherSections) {
       this.project.sectionInOutManager.goInSection([newSection], fatherSection);
+      // 将质点放入Section
+      // this.project.sectionInOutManager.goInSection([topLeftPoint, bottomRightPoint], fatherSection);
     }
 
+    // 将质点放入Section
+    this.project.sectionInOutManager.goInSection([topLeftPoint, bottomRightPoint], newSection);
+
     if (!ignoreEdges) {
       for (const edge of this.project.stageManager.getAssociations()) {
         if (edge instanceof Edge) {

app/src/core/stage/stageObject/entity/Section.tsx

@@ -9,6 +9,7 @@ import { getTextSize } from "@/utils/font";
 import { Color, ProgressNumber, Vector } from "@graphif/data-structures";
 import { id, passExtraAtArg1, passObject, serializable } from "@graphif/serializer";
 import { Line, Rectangle, Shape } from "@graphif/shapes";
+import { Value } from "platejs";
 
 @passExtraAtArg1
 @passObject
@@ -84,7 +85,7 @@ export class Section extends ConnectableEntity {
       isHidden = false,
       isCollapsed = false,
       children = [] as Entity[],
-      details = [],
+      details = [] as Value,
     } = {},
     public unknown = false,
   ) {