✨ 完善保存功能，但还有漏洞（快捷键保存总是变成另存为）

Author: Littlefean

src/core/controller/Controller.tsx

@@ -676,6 +676,10 @@ export namespace Controller {
   function keydown(event: KeyboardEvent) {
     const key = event.key.toLowerCase();
     pressingKeySet.add(key);
+    if (key === "s" && pressingKeySet.has("control")) {
+      // 保存
+      console.log("Save");
+    }
     if (keyMap[key]) {
       // 当按下某一个方向的时候,相当于朝着某个方向赋予一次加速度
       Camera.accelerateCommander = Camera.accelerateCommander
@@ -692,6 +696,7 @@ export namespace Controller {
     } else if (key === "enter") {
       // 开始编辑选中的连线
     }
+    
   }
 
   function keyup(event: KeyboardEvent) {
@@ -711,6 +716,7 @@ export namespace Controller {
         .limitY(-1, 1);
     }
     setCursorName("default");
+    
   }
 
   function touchstart(e: TouchEvent) {

src/core/effect/concrete/ViewFlashEffect.tsx

@@ -0,0 +1,15 @@
+import { Color } from "../../Color";
+import { ProgressNumber } from "../../ProgressNumber";
+import { Effect } from "../effect";
+
+/**
+ * 屏幕闪颜色效果
+ */
+export class ViewFlashEffect extends Effect {
+  constructor(
+    public color: Color,
+    public override timeProgress: ProgressNumber = new ProgressNumber(0, 100),
+  ) {
+    super(timeProgress);
+  }
+}

src/core/render/canvas2d/EffectRenderer.tsx

@@ -4,7 +4,9 @@ import { CircleFlameEffect } from "../../effect/concrete/CircleFlameEffect";
 import { LineCuttingEffect } from "../../effect/concrete/LineCuttingEffect";
 import { LineEffect } from "../../effect/concrete/LineEffect";
 import { TextRiseEffect } from "../../effect/concrete/TextRiseEffect";
+import { ViewFlashEffect } from "../../effect/concrete/ViewFlashEffect";
 import { easeInOutSine } from "../../effect/easings";
+import { Rectangle } from "../../Rectangle";
 import { Camera } from "../../stage/Camera";
 import { Vector } from "../../Vector";
 import { Renderer } from "./renderer";
@@ -111,4 +113,19 @@ export namespace EffectRenderer {
       effect.lineWidth * effect.timeProgress.rate,
     );
   }
+  export function renderViewFlashEffect(effect: ViewFlashEffect) {
+    if (effect.timeProgress.isFull) {
+      return;
+    }
+    RenderUtils.renderRect(
+      new Rectangle(new Vector(-10000, -10000), new Vector(20000, 20000)),
+      mixColors(
+        effect.color,
+        new Color(0, 0, 0, 0),
+        effect.timeProgress.rate,
+      ),
+      Color.Transparent,
+      0,
+    );
+  }
 }

src/core/render/canvas2d/renderer.tsx

@@ -14,6 +14,7 @@ import { CircleFlameEffect } from "../../effect/concrete/CircleFlameEffect";
 import { LineCuttingEffect } from "../../effect/concrete/LineCuttingEffect";
 import { LineEffect } from "../../effect/concrete/LineEffect";
 import { Line } from "../../Line";
+import { ViewFlashEffect } from "../../effect/concrete/ViewFlashEffect";
 
 /**
  * 渲染器
@@ -378,6 +379,8 @@ export namespace Renderer {
         EffectRenderer.renderLineEffect(effect);
       } else if (effect instanceof LineCuttingEffect) {
         EffectRenderer.renderLineCuttingEffect(effect);
+      } else if (effect instanceof ViewFlashEffect) {
+        EffectRenderer.renderViewFlashEffect(effect);
       }
     }
   }

src/pages/_app_menu.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { cn } from "../utils/cn";
 import {
   AppWindow,
@@ -33,6 +33,9 @@ import { Camera } from "../core/stage/Camera";
 import { Edge } from "../core/Edge";
 import { NodeDumper } from "../core/NodeDumper";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
+import { Stage } from "../core/stage/Stage";
+import { ViewFlashEffect } from "../core/effect/concrete/ViewFlashEffect";
+import { Color } from "../core/Color";
 
 export default function AppMenu({
   className = "",
@@ -43,7 +46,7 @@ export default function AppMenu({
 }) {
   const navigate = useNavigate();
   const dialog = useDialog();
-  const [, setFile] = useRecoilState(fileAtom);
+  const [file, setFile] = useRecoilState(fileAtom);
 
   const onNew = () => {
     NodeManager.destroy();
@@ -107,30 +110,21 @@ export default function AppMenu({
   };
 
   const onSave = async () => {
-    const path = await openFileDialog({
-      title: "保存文件",
-      directory: false,
-      multiple: false,
-      filters: [
-        {
-          name: "Project Graph",
-          extensions: ["json"],
-        },
-      ],
-    });
+    let path: string | null = file;
+    console.log("准备保存，当前路径是", path);
 
-    if (!path) {
+    if (file === "Project Graph") {
+      // 如果文件名为 "Project Graph" 则说明是新建文件。
+      // 要走另存为流程
+      console.log("要走另存为流程");
+      onSaveNew();
       return;
     }
 
     try {
       const data = NodeDumper.dumpToV3(); // 获取当前节点和边的数据
       await writeTextFile(path, JSON.stringify(data, null, 2)); // 将数据写入文件
-      dialog.show({
-        title: "保存成功",
-        content: `文件已保存到 ${path}`,
-        type: "success",
-      });
+      Stage.effects.push(new ViewFlashEffect(Color.Black));
     } catch (e) {
       dialog.show({
         title: "保存失败",
@@ -173,6 +167,23 @@ export default function AppMenu({
     }
   };
 
+  useEffect(() => {
+    // 绑定快捷键
+    const keyDownFunction = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === "n") {
+        onNew();
+      } else if (e.ctrlKey && e.key === "o") {
+        onOpen();
+      } else if (e.ctrlKey && e.key === "s") {
+        onSave();
+      }
+    };
+    document.addEventListener("keydown", keyDownFunction);
+    return () => {
+      document.removeEventListener("keydown", keyDownFunction);
+    };
+  }, []);
+
   return (
     <div
       className={cn(
@@ -192,7 +203,7 @@ export default function AppMenu({
           打开
         </Col>
         <Col icon={<Save />} onClick={onSave}>
-          覆盖保存
+          保存
         </Col>
         <Col icon={<Save />} onClick={onSaveNew}>
           另存为
@@ -217,7 +228,7 @@ export default function AppMenu({
         <Col icon={<TestTube2 />} onClick={() => navigate("/test")}>
           测试
         </Col>
-        {/* <Col
+        <Col
           icon={<TestTube2 />}
           onClick={() =>
             dialog.show({
@@ -227,14 +238,18 @@ export default function AppMenu({
             })
           }
         >
-          查看舞台序列化信息
+          json
+        </Col>
+        <Col
+          icon={<TestTube2 />}
+          onClick={() => {
+            console.log(NodeManager.nodes);
+            console.log(NodeManager.edges);
+            console.log(file);
+          }}
+        >
+          print
         </Col>
-        <Col icon={<TestTube2 />} onClick={() => {
-          console.log(NodeManager.nodes);
-          console.log(NodeManager.edges);
-        }}>
-          NodeManager log查看
-        </Col> */}
       </Row>
       <Row icon={<AppWindow />} title="窗口">
         <Col icon={<RefreshCcw />} onClick={() => window.location.reload()}>