feat: 增加图片拖拽进入舞台的功能

Author: Littlefean

app/src/App.tsx

@@ -21,6 +21,8 @@ import { toast } from "sonner";
 import { URI } from "vscode-uri";
 import { cn } from "./utils/cn";
 import { isWindows } from "./utils/platform";
+import { DragFileIntoStageEngine } from "./core/service/dataManageService/dragFileIntoStageEngine/dragFileIntoStageEngine";
+import { Vector } from "@graphif/data-structures";
 
 export default function App() {
   const [maximized, _setMaximized] = useState(false);
@@ -100,34 +102,6 @@ export default function App() {
       }
       setIsWide(window.innerWidth / window.innerHeight > 1.8);
     });
-    const unlisten2 = getCurrentWindow().onDragDropEvent((event) => {
-      if (event.payload.type === "over") {
-        if (event.payload.position.y <= 96) {
-          // 拖拽到标签页栏区域
-          setDropState("open");
-        } else {
-          // 拖拽到画布区域
-          setDropState("append");
-        }
-      } else if (event.payload.type === "leave") {
-        setDropState("none");
-      } else if (event.payload.type === "drop") {
-        setDropState("none");
-        if (event.payload.position.y <= 96) {
-          // 拖拽到标签页栏区域
-          for (const path of event.payload.paths) {
-            if (path.endsWith(".prg") || path.endsWith(".json")) {
-              onOpenFile(URI.file(path), "拖入窗口");
-            } else {
-              toast.error("不支持打开此文件");
-            }
-          }
-        } else {
-          // 拖拽到画布区域
-          toast("追加到画布……待完善");
-        }
-      }
-    });
 
     if (!telemetryEventSent) {
       setTelemetryEventSent(true);
@@ -153,7 +127,6 @@ export default function App() {
 
     return () => {
       unlisten1?.then((f) => f());
-      unlisten2?.then((f) => f());
     };
   }, []);
 
@@ -186,6 +159,43 @@ export default function App() {
     activeProject.canvas.element.addEventListener("pointerup", () => {
       setIgnoreMouseEvents(false);
     });
+    const unlisten2 = getCurrentWindow().onDragDropEvent((event) => {
+      if (event.payload.type === "over") {
+        if (event.payload.position.y <= 96) {
+          // 拖拽到标签页栏区域
+          setDropState("open");
+        } else {
+          // 拖拽到画布区域
+          setDropState("append");
+        }
+      } else if (event.payload.type === "leave") {
+        setDropState("none");
+      } else if (event.payload.type === "drop") {
+        setDropState("none");
+        if (event.payload.position.y <= 96) {
+          // 拖拽到标签页栏区域
+          for (const path of event.payload.paths) {
+            if (path.endsWith(".prg") || path.endsWith(".json")) {
+              onOpenFile(URI.file(path), "拖入窗口");
+            } else {
+              toast.error("不支持打开此文件");
+            }
+          }
+        } else {
+          // 拖拽到画布区域
+          toast("追加到画布……待完善");
+          // console.log(activeProject, event.payload.paths);
+          DragFileIntoStageEngine.handleDrop(
+            activeProject,
+            event.payload.paths,
+            new Vector(event.payload.position.x, event.payload.position.y),
+          );
+        }
+      }
+    });
+    return () => {
+      unlisten2?.then((f) => f());
+    };
   }, [activeProject]);
 
   useEffect(() => {

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

@@ -0,0 +1,54 @@
+import { Project } from "@/core/Project";
+import { Vector } from "@graphif/data-structures";
+import { readFile } from "@tauri-apps/plugin-fs";
+import { CollisionBox } from "@/core/stage/stageObject/collisionBox/collisionBox";
+import { ImageNode } from "@/core/stage/stageObject/entity/ImageNode";
+import { Rectangle } from "@graphif/shapes";
+
+/**
+ * 处理文件拖拽到舞台的引擎
+ */
+export namespace DragFileIntoStageEngine {
+  /**
+   * 处理文件拖拽到舞台
+   * @param project 当前活动的项目
+   * @param pathList 拖拽的文件路径列表
+   * @param mouseLocation 拖拽到的位置（舞台坐标系）
+   */
+  export async function handleDrop(project: Project, pathList: string[], mouseLocation: Vector) {
+    try {
+      for (const filePath of pathList) {
+        // 检查文件是否为PNG格式
+        if (!filePath.toLowerCase().endsWith(".png")) {
+          console.warn(`不支持的文件格式: ${filePath}`);
+          continue;
+        }
+
+        // 使用Tauri的文件系统API读取文件内容
+        const fileData = await readFile(filePath);
+        console.log(`读取文件成功: ${filePath}, 大小: ${fileData.length} bytes`);
+
+        // 创建Blob对象
+        const blob = new Blob([fileData], { type: "image/png" });
+        console.log(`创建Blob成功: ${blob.size} bytes, type: ${blob.type}`);
+
+        // 添加到项目的attachments中
+        const attachmentId = project.addAttachment(blob);
+        console.log(`添加附件成功, ID: ${attachmentId}`);
+
+        // 创建ImageNode并添加到舞台
+        const imageNode = new ImageNode(project, {
+          attachmentId,
+          collisionBox: new CollisionBox([
+            new Rectangle(project.renderer.transformView2World(mouseLocation), new Vector(300, 150)),
+          ]),
+        });
+
+        project.stageManager.add(imageNode);
+        console.log(`创建ImageNode成功并添加到舞台, UUID: ${imageNode.uuid}`);
+      }
+    } catch (error) {
+      console.error(`处理拖拽文件失败: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+}