✨ 支持序列化ConnectPoint

Author: zty012

app/src/core/stage/stageObject/abstract/StageEntity.tsx

@@ -1,6 +1,7 @@
+import { StageObject } from "@/core/stage/stageObject/abstract/StageObject";
 import { Vector } from "@graphif/data-structures";
+import { serializable } from "@graphif/serializer";
 import { Rectangle } from "@graphif/shapes";
-import { StageObject } from "@/core/stage/stageObject/abstract/StageObject";
 /**
  * 一切独立存在、能被移动的东西，且放在框里能被连带移动的东西
  * 实体
@@ -24,6 +25,7 @@ export abstract class Entity extends StageObject {
    */
   abstract moveTo(location: Vector): void;
 
+  @serializable
   public details: string = "";
   public isEditingDetails: boolean = false;
   /** 用于交互使用，比如鼠标悬浮显示details */

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

@@ -1,35 +1,34 @@
-import { Vector } from "@graphif/data-structures";
-import { Rectangle } from "@graphif/shapes";
-import { Serialized } from "@/types/node";
 import { Project } from "@/core/Project";
 import { CircleChangeRadiusEffect } from "@/core/service/feedbackService/effectEngine/concrete/CircleChangeRadiusEffect";
 import { ConnectableEntity } from "@/core/stage/stageObject/abstract/ConnectableEntity";
 import { CollisionBox } from "@/core/stage/stageObject/collisionBox/collisionBox";
+import { Vector } from "@graphif/data-structures";
+import { passExtraAtArg1, passObject, serializable } from "@graphif/serializer";
+import { Rectangle } from "@graphif/shapes";
 
-// TODO: 这里继承了ConnectableEntity的话，TextNode模块就会报错，原因未知
+// HACK: 【现在没问题了2025-7-9】这里继承了ConnectableEntity的话，TextNode模块就会报错，原因未知
 // Uncaught ReferenceError: can't access lexical declaration 'ConnectableEntity' before initialization
+@passExtraAtArg1
+@passObject
 export class ConnectPoint extends ConnectableEntity {
   get geometryCenter(): Vector {
-    return this.location;
+    return this.collisionBox.getRectangle().center;
   }
 
   isHiddenBySectionCollapse: boolean = false;
 
-  private _collisionBox: CollisionBox;
-
-  public get collisionBox(): CollisionBox {
-    return this._collisionBox;
-  }
+  @serializable
+  collisionBox: CollisionBox;
+  @serializable
   uuid: string;
-  private location: Vector;
 
   private _radius = 10;
   get radius(): number {
     return this._radius;
   }
   set radius(value: number) {
     this._radius = value;
-    const rectangle = this._collisionBox.shapes[0];
+    const rectangle = this.collisionBox.shapes[0];
     if (rectangle instanceof Rectangle) {
       rectangle.size = new Vector(value * 2, value * 2);
       rectangle.location = this.geometryCenter.subtract(new Vector(value, value));
@@ -72,36 +71,31 @@ export class ConnectPoint extends ConnectableEntity {
 
   constructor(
     protected readonly project: Project,
-    { uuid, location = [0, 0], details = "" }: Partial<Serialized.ConnectPoint> & { uuid: string },
+    {
+      uuid = crypto.randomUUID() as string,
+      collisionBox = new CollisionBox([new Rectangle(Vector.getZero(), Vector.getZero())]),
+      details = "",
+    },
     public unknown = false,
   ) {
-    // super();
+    super();
     this.uuid = uuid;
-    this.location = new Vector(...location);
+    this.collisionBox = collisionBox;
     this.details = details;
-    this._collisionBox = new CollisionBox([
-      new Rectangle(this.location.subtract(new Vector(10, 10)), new Vector(20, 20)),
-    ]);
     this.radius = 1;
   }
 
   move(delta: Vector): void {
-    this.location = this.location.add(delta);
-
-    const rectangle = this._collisionBox.shapes[0];
-    if (rectangle instanceof Rectangle) {
-      rectangle.location = rectangle.location.add(delta);
-    }
+    const newRectangle = this.collisionBox.getRectangle();
+    newRectangle.location = newRectangle.location.add(delta);
+    this.collisionBox.shapes[0] = newRectangle;
     this.updateFatherSectionByMove();
   }
 
   moveTo(location: Vector): void {
-    this.location = location;
-
-    const rectangle = this._collisionBox.shapes[0];
-    if (rectangle instanceof Rectangle) {
-      rectangle.location = location.subtract(new Vector(10, 10));
-    }
+    const newRectangle = this.collisionBox.getRectangle();
+    newRectangle.location = location;
+    this.collisionBox.shapes[0] = newRectangle;
     this.updateFatherSectionByMove();
   }
 }