Merge branch 'dev'

i18n/translations.zh.json

@@ -1,10 +1,10 @@
 {
   "__language__": "中文",
   "File": "檔案",
-  "New": "新增",
+  "New": "重來",
   "Save": "存檔",
   "Load": "讀檔",
-  "Save As": "存成",
+  "Save As": "存成檔案",
   "Import": "匯入",
   "Export": "匯出",
   "Edit": "編輯",

package.json

@@ -33,6 +33,8 @@
     "pixi.js": "^7.4.2",
     "react": "^18",
     "react-dom": "^18",
+    "save-as-file": "^0.3.0",
+    "use-file-picker": "^2.1.2",
     "use-undo": "^1.1.1"
   },
   "devDependencies": {

src/app/lib/useMenu.ts

@@ -1,8 +1,23 @@
-import { useState } from "react";
+import { useState, Dispatch, SetStateAction, useEffect } from "react";
 import { useTranslation } from "next-export-i18n";
+
+import { useFilePicker } from "use-file-picker";
+import saveFile from "save-as-file";
+
 import { IMenu } from "@/components/MenuBar/lib/types";
 
-export function useMenu(): [
+import {
+  Variable,
+  Link,
+  Stock,
+  Flow,
+  IItems,
+} from "@/components/SystemMapCanvas/lib/types";
+
+export function useMenu(
+  setItems0: Dispatch<SetStateAction<IItems>>,
+  items: IItems,
+): [
   number,
   number,
   number,
@@ -21,10 +36,49 @@ export function useMenu(): [
   const [canUndo, setCanUndo] = useState<boolean>(false);
   const [canRedo, setCanRedo] = useState<boolean>(false);
 
+  const { openFilePicker, filesContent, loading } = useFilePicker({
+    accept: ".json",
+    multiple: false,
+  });
+
+  useEffect(() => {
+    if (loading) {
+      return;
+    }
+    if (filesContent[0] === undefined) {
+      return;
+    }
+    const items0 = JSON.parse(filesContent[0].content);
+    setItems0(items0);
+  }, [filesContent]);
+
   function handleMenuItem(arg: any) {
     console.log("handleMenuItem", arg);
   }
 
+  function handleNew(arg: any) {
+    setItems0({
+      variables: new Array<Variable>(),
+      links: new Array<Link>(),
+      stocks: new Array<Stock>(),
+      flows: new Array<Flow>(),
+    });
+  }
+
+  function handleSave(arg: any) {
+    console.log("handleSave", arg);
+  }
+
+  function handleLoad(arg: any) {
+    openFilePicker();
+  }
+
+  function handleSaveAs(arg: any) {
+    const json = JSON.stringify(items);
+    const file = new File([json], "", { type: "application/json" });
+    saveFile(file, "system-map.json");
+  }
+
   function handleZoomIn(arg: any) {
     setCmdZoomIn(cmdZoomIn + 1);
   }
@@ -52,23 +106,26 @@ export function useMenu(): [
       items: [
         {
           label: t("New"),
-          handler: handleMenuItem,
+          handler: handleNew,
           arg: "New",
+          enabled: true,
         },
         {
           label: t("Save"),
-          handler: handleMenuItem,
+          handler: handleSave,
           arg: "Save",
         },
         {
           label: t("Load"),
-          handler: handleMenuItem,
+          handler: handleLoad,
           arg: "Load",
+          enabled: true,
         },
         {
           label: t("Save As"),
-          handler: handleMenuItem,
+          handler: handleSaveAs,
           arg: "Save As",
+          enabled: true,
         },
         {
           label: t("Import"),

src/app/page.tsx

@@ -4,13 +4,38 @@ import { Suspense, useState } from "react";
 
 import { useMenu } from "./lib/useMenu";
 import { useMode } from "./lib/useMode";
-import { useItem } from "./lib/useItem";
 
 import { MenuBar } from "@/components/MenuBar/MenuBar";
 import { SystemMapCanvasMode } from "@/components/SystemMapCanvas/SystemMapCanvasMode";
 import { SystemMapCanvas } from "@/components/SystemMapCanvas/SystemMapCanvas";
 
+import {
+  Variable,
+  Link,
+  Stock,
+  Flow,
+  IItems,
+} from "@/components/SystemMapCanvas/lib/types";
+
 function HomeImp() {
+  const [items0, setItems0] = useState<IItems>({
+    variables: new Array<Variable>(),
+    links: new Array<Link>(),
+    stocks: new Array<Stock>(),
+    flows: new Array<Flow>(),
+  });
+
+  const [items, setItems] = useState<IItems>({
+    variables: new Array<Variable>(),
+    links: new Array<Link>(),
+    stocks: new Array<Stock>(),
+    flows: new Array<Flow>(),
+  });
+
+  const [toggleLinkDirection, setToggleLinkDirection] =
+    useState<boolean>(false);
+  const [deleteItem, setDeleteItem] = useState<boolean>(false);
+
   const [
     cmdZoomIn,
     cmdZoomOut,
@@ -19,19 +44,27 @@ function HomeImp() {
     handlerCanUndoChanged,
     handlerCanRedoChanged,
     menus,
-  ] = useMenu();
+  ] = useMenu(setItems0, items);
+
   const [
     mode,
     modes,
     handleModeClick,
     labelToggleLinkDirection,
     lableDeleteItem,
   ] = useMode();
-  const [items, handleItemsChange] = useItem();
 
-  const [toggleLinkDirection, setToggleLinkDirection] =
-    useState<boolean>(false);
-  const [deleteItem, setDeleteItem] = useState<boolean>(false);
+  function handleItemsChange(items: IItems): void {
+    setItems(items);
+  }
+
+  function handleToggleLinkDirection(): void {
+    setToggleLinkDirection(!toggleLinkDirection);
+  }
+
+  function handleDeleteItem(): void {
+    setDeleteItem(!deleteItem);
+  }
 
   return (
     <>
@@ -50,17 +83,13 @@ function HomeImp() {
             );
           })}
           <button
-            onClick={() => {
-              setToggleLinkDirection(!toggleLinkDirection);
-            }}
+            onClick={handleToggleLinkDirection}
             className={toggleLinkDirection ? "btn-mode-selected" : "btn-mode"}
           >
             {labelToggleLinkDirection}
           </button>
           <button
-            onClick={() => {
-              setDeleteItem(!deleteItem);
-            }}
+            onClick={handleDeleteItem}
             className={deleteItem ? "btn-mode-selected" : "btn-mode"}
           >
             {lableDeleteItem}
@@ -77,7 +106,7 @@ function HomeImp() {
         cmdRedo={cmdRedo}
         onCanUndoChanged={handlerCanUndoChanged}
         onCanRedoChanged={handlerCanRedoChanged}
-        items={items}
+        items={items0}
         onItemsChange={handleItemsChange}
       />
     </>

src/components/SystemMapCanvas/SystemMapCanvas.tsx

@@ -50,6 +50,7 @@ export const SystemMapCanvas = ({
     state: EStateCanvas.Idle,
     items: items,
     cmdUndoAdd: 0,
+    cmdUndoReset: 0,
     toggleLinkDirection: toggleLinkDirection,
     deleteItem: deleteItem,
   });
@@ -163,6 +164,18 @@ export const SystemMapCanvas = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deleteItem]);
 
+  useEffect(() => {
+    dispatch({ type: "NewMap", items: items });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+
+  useEffect(() => {
+    resetItems(state.items);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.cmdUndoReset]);
+
   function handleEdit(item: string) {
     if (isVariable(item)) {
       setEditingText(item);