✨ 支持SvgNode

Author: zty012

app/src/core/render/canvas2d/basicRenderer/svgRenderer.tsx

@@ -1,5 +1,6 @@
-import { Vector } from "@graphif/data-structures";
 import { Project, service } from "@/core/Project";
+import { Base64 } from "@/utils/base64";
+import { Vector } from "@graphif/data-structures";
 
 @service("svgRenderer")
 export class SvgRenderer {
@@ -65,10 +66,7 @@ export class SvgRenderer {
       img.onerror = (error) => {
         reject(error);
       };
-      // img.src = "data:image/svg+xml;base64," + btoa(svg);
-      // 以上方法，出现汉字会报错，因此改用 encodeURIComponent
-      // 直接使用 URI 编码（无需 Base64）
-      img.src = "data:image/svg+xml," + encodeURIComponent(svg);
+      img.src = "data:image/svg+xml;base64," + Base64.encode(svg);
     });
   }
 

app/src/core/render/canvas2d/entityRenderer/svgNode/SvgNodeRenderer.tsx

@@ -25,18 +25,11 @@ export class SvgNodeRenderer {
         16 * this.project.camera.currentScale,
         this.project.stageStyleManager.currentStyle.CollideBoxPreSelected,
       );
-    } else if (svgNode.state === "loaded") {
+    } else if (svgNode.state === "success") {
       this.project.svgRenderer.renderSvgFromLeftTopWithoutSize(
         svgNode.content,
-        this.project.renderer.transformWorld2View(svgNode.location),
-        svgNode.scaleNumber,
-      );
-    } else if (svgNode.state === "error") {
-      this.project.textRenderer.renderTextFromCenter(
-        "Error",
-        svgNode.collisionBox.getRectangle().center,
-        16 * this.project.camera.currentScale,
-        this.project.stageStyleManager.currentStyle.effects.warningShadow,
+        this.project.renderer.transformWorld2View(svgNode.collisionBox.getRectangle().location),
+        svgNode.scale,
       );
     }
 

app/src/core/service/dataManageService/copyEngine/copyEngine.tsx

@@ -1,5 +1,4 @@
 import { Project, service } from "@/core/Project";
-import { SerializedDataAdder } from "@/core/stage/stageManager/concreteMethods/StageSerializedAdder";
 import { Entity } from "@/core/stage/stageObject/abstract/StageEntity";
 import { CollisionBox } from "@/core/stage/stageObject/collisionBox/collisionBox";
 import { ImageNode } from "@/core/stage/stageObject/entity/ImageNode";
@@ -154,7 +153,7 @@ export class CopyEngine {
     if (this.isVirtualClipboardEmpty()) {
       this.readClipboard();
     } else {
-      SerializedDataAdder.addSerializedData(this.copyBoardData, this.copyBoardMouseVector);
+      // SerializedDataAdder.addSerializedData(this.copyBoardData, this.copyBoardMouseVector);
     }
     if (isMac) {
       // mac下无法直接粘贴，还要点一个按钮，但这导致
@@ -167,7 +166,7 @@ export class CopyEngine {
   }
 
   pasteWithOriginLocation() {
-    SerializedDataAdder.addSerializedData(this.copyBoardData);
+    // SerializedDataAdder.addSerializedData(this.copyBoardData);
   }
 
   private updateRectangle() {
@@ -223,7 +222,7 @@ export class CopyEngine {
       });
       this.copyEnginePasteImage(blob);
     } catch (err) {
-      console.error("图片剪贴板是空的", err);
+      console.warn("图片剪贴板是空的", err);
     }
   }
 
@@ -236,11 +235,8 @@ export class CopyEngine {
     if (isSvgString(item)) {
       // 是SVG类型
       entity = new SvgNode(this.project, {
-        uuid: crypto.randomUUID(),
         content: item,
-        location: [MouseLocation.x, MouseLocation.y],
-        size: [400, 100],
-        color: [0, 0, 0, 0],
+        collisionBox,
       });
     } else if (PathString.isValidURL(item)) {
       // 是URL类型
@@ -341,15 +337,12 @@ function isSvgString(str: string): boolean {
   const trimmed = str.trim();
 
   // 基础结构检查
-  if (
-    !trimmed.startsWith("<svg") || // 是否以 <svg 开头
-    !trimmed.endsWith("</svg>") // 是否以 </svg> 结尾
-  ) {
-    return false;
+  if (trimmed.startsWith("<svg") || trimmed.endsWith("</svg>")) {
+    return true;
   }
 
   // 提取 <svg> 标签的属性部分
-  const openTagMatch = trimmed.match(/<svg\s+([^>]*)>/i);
+  const openTagMatch = trimmed.match(/<svg/i);
   if (!openTagMatch) return false; // 无有效属性则直接失败
 
   // 检查是否存在 xmlns 命名空间声明

app/src/core/stage/stageManager/StageHistoryManager.tsx

@@ -88,7 +88,7 @@ export class HistoryManager {
       return applyPatch(acc, patch).newDocument;
     }, this.initialStage);
     // 反序列化得到舞台对象
-    const stage = deserialize(data);
+    const stage = deserialize(data, this.project);
     return stage;
   }
 }

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

@@ -1,94 +1,90 @@
-import { Color, Vector } from "@graphif/data-structures";
-import { Rectangle } from "@graphif/shapes";
-import { Serialized } from "@/types/node";
 import { Project } from "@/core/Project";
-import { SvgRenderer } from "@/core/render/canvas2d/basicRenderer/svgRenderer";
 import { ConnectableEntity } from "@/core/stage/stageObject/abstract/ConnectableEntity";
 import { CollisionBox } from "@/core/stage/stageObject/collisionBox/collisionBox";
+import { Color, Vector } from "@graphif/data-structures";
+import { passExtraAtArg1, passObject, serializable } from "@graphif/serializer";
+import { Rectangle } from "@graphif/shapes";
 
 /**
  * Svg 节点
  */
+@passExtraAtArg1
+@passObject
 export class SvgNode extends ConnectableEntity {
+  @serializable
   color: Color = Color.Transparent;
+  @serializable
   uuid: string;
+  @serializable
   details: string;
-  scaleNumber: number;
-  public collisionBox: CollisionBox;
+  @serializable
+  scale: number;
+  @serializable
+  collisionBox: CollisionBox;
+  @serializable
   content: string;
-  location: Vector;
-  originSize: Vector;
-  state: "loading" | "loaded" | "error" = "loading";
+  state: "loading" | "success" = "loading";
   isHiddenBySectionCollapse: boolean = false;
 
+  originalSize: Vector = Vector.getZero();
+
   constructor(
     protected readonly project: Project,
     {
-      uuid,
+      uuid = crypto.randomUUID(),
       details = "",
       content = "",
-      location = [0, 0],
+      collisionBox = new CollisionBox([new Rectangle(Vector.getZero(), Vector.getZero())]),
       scale = 1,
-      color = [0, 0, 0, 0],
-    }: Partial<Serialized.SvgNode> & { uuid: string },
+      color = Color.Transparent,
+    },
   ) {
     super();
     this.uuid = uuid;
     this.details = details;
-    this.scaleNumber = scale;
+    this.scale = scale;
     this.content = content;
-    this.location = new Vector(...location);
-    this.color = new Color(...color);
-
-    this.originSize = new Vector(100, 100);
-    // 解析svg尺寸
-    SvgRenderer.getSvgOriginalSize(content)
-      .then((size) => {
-        this.originSize = size;
-        this.collisionBox = new CollisionBox([
-          new Rectangle(new Vector(...location), this.originSize.multiply(this.scaleNumber)),
-        ]);
-        this.state = "loaded";
-      })
-      .catch((error) => {
-        this.state = "error";
-        console.error(error);
-      });
-
-    this.collisionBox = new CollisionBox([
-      new Rectangle(new Vector(...location), this.originSize.multiply(this.scaleNumber)),
-    ]);
+    this.collisionBox = collisionBox;
+    this.color = color;
+    // 获取SVG原始大小
+    this.project.svgRenderer.getSvgOriginalSize(content).then((size) => {
+      this.originalSize = size;
+      this.collisionBox = new CollisionBox([
+        new Rectangle(this.collisionBox.getRectangle().location, this.originalSize.multiply(this.scale)),
+      ]);
+      this.state = "success";
+    });
   }
 
   public get geometryCenter(): Vector {
     return this.collisionBox.getRectangle().center;
   }
 
   public scaleUpdate(scaleDiff: number) {
-    this.scaleNumber += scaleDiff;
-    if (this.scaleNumber < 0.1) {
-      this.scaleNumber = 0.1;
+    this.scale += scaleDiff;
+    if (this.scale < 0.1) {
+      this.scale = 0.1;
     }
-    if (this.scaleNumber > 10) {
-      this.scaleNumber = 10;
+    if (this.scale > 10) {
+      this.scale = 10;
     }
 
-    this.collisionBox = new CollisionBox([new Rectangle(this.location, this.originSize.multiply(this.scaleNumber))]);
+    this.collisionBox = new CollisionBox([
+      new Rectangle(this.collisionBox.getRectangle().location, this.originalSize.multiply(this.scale)),
+    ]);
   }
 
   move(delta: Vector): void {
     const newRectangle = this.collisionBox.getRectangle().clone();
     newRectangle.location = newRectangle.location.add(delta);
     this.collisionBox.shapes[0] = newRectangle;
-    this.location = newRectangle.location.clone();
     this.updateFatherSectionByMove();
   }
 
   moveTo(location: Vector): void {
     const newRectangle = this.collisionBox.getRectangle().clone();
     newRectangle.location = location.clone();
     this.collisionBox.shapes[0] = newRectangle;
-    this.location = newRectangle.location.clone();
     this.updateFatherSectionByMove();
   }