Persistence, Projects Options

Author: AttAditya

src/App.tsx

@@ -3,15 +3,20 @@ import { useEffect } from "react";
 import { useNodeFactoryContext } from "@utils/nodeFactory";
 import { useNodeSystemContext } from "@utils/nodeSystem";
 import { useNodeHistoryContext } from "@utils/nodeHistory";
-import { downloadScript } from "@utils/compilerTools";
 import { usePromptContext } from "@utils/prompt";
 import { usePalleteContext } from "@utils/pallete";
 import { useVariablesContext } from "@utils/variables";
+import { loadProject, saveProject } from "@utils/engineTools";
+import {
+  getBreadcrumb,
+  getWindowTools,
+  loadActiveProjectId,
+  updatePalleteRegistry,
+} from "@utils/projectTools";
 
 import { AppWindow } from "@components/window/AppWindow";
 import { Canvas } from "@components/engine/Canvas";
 import { Prompt } from "@components/commons/Prompt";
-import { loadProject, saveProject } from "@utils/engineTools";
 
 export default function App() {
   const { newNode } = useNodeFactoryContext()!;
@@ -49,92 +54,54 @@ export default function App() {
     requestPrompt,
   } = usePromptContext()!;
 
-  const windowTools = [
-    {
-      name: "Refresh",
-      icon: "RefreshCw",
-      action: () => window.location.reload(),
-    },
-    {
-      name: "Close Node",
-      icon: "CircleChevronUp",
-      action: closeNode,
-      disabled: isEntry(activeNode)
-    },
-    {
-      name: "Load Project",
-      icon: "HardDriveUpload",
-      action: () => loadProject(
+  const windowTools = getWindowTools(
+    closeNode,
+    isEntry,
+    activeNode,
+    overrideNodeSystem,
+    overrideVariables,
+    openNode,
+    removeNode,
+    nodeSystem,
+    entries,
+    statesList,
+    customComponents,
+  );
+
+  const windowExtraTitle = getBreadcrumb(
+    nodeHistory,
+    activeNode,
+  );
+
+  useEffect(() => {
+    (async () => {
+      const requireLoading = await loadActiveProjectId();
+      if (!requireLoading) return;
+      
+      loadProject(
         overrideNodeSystem,
         overrideVariables,
         openNode,
         removeNode,
-      ),
-    },
-    {
-      name: "Save Project",
-      icon: "HardDriveDownload",
-      action: () => saveProject(
-        nodeSystem,
-        entries,
-        {
-          states: statesList,
-          customComponents,
-        }
-      ),
-    },
-    {
-      name: "Compile Project",
-      icon: "Rocket",
-      action: () => downloadScript(nodeSystem, entries),
-    },
-  ];
-
-  const windowExtraTitle = [
-    ...nodeHistory.current,
-    activeNode
-  ].join(" > ");
+      )
+    })();
+  }, [
+    overrideNodeSystem,
+    overrideVariables,
+    openNode,
+    removeNode,
+  ]);
 
   useEffect(() => {
-    entries.map(
-      entry => ({
-        name: entry,
-        icon: "Component",
-        action: () => openNode(entry, true),
-      })
-    ).forEach(suggestion => addSuggestion(
-      suggestion, "Entries"
-    ));
-
-    addSuggestion({
-      name: "New Entry",
-      icon: "NotebookPen",
-      action: () => {
-        (async () => {
-          const entryName = (
-            await requestPrompt(
-              "Enter the name of the new Entry Point"
-            )
-          )?.trim().toUpperCase();
-          
-          if (!entryName) return;
-          createEntry(entryName);
-          openNode(entryName, true);
-        })();
-      }
-    }, "Create");
-
-    addSuggestion({
-      name: "New Component",
-      icon: "Puzzle",
-      action: promptComponent,
-    }, "Register");
-
-    addSuggestion({
-      name: "New State",
-      icon: "Puzzle",
-      action: promptState,
-    }, "Register");
+    updatePalleteRegistry(
+      addSuggestion,
+      openNode,
+      entries,
+      createEntry,
+      requestPrompt,
+      promptComponent,
+      promptState,
+    )
   }, [
     addSuggestion,
     openNode,
@@ -145,6 +112,22 @@ export default function App() {
     promptState,
   ]);
 
+  useEffect(() => {
+    saveProject(
+      nodeSystem,
+      entries,
+      {
+        states: statesList,
+        customComponents,
+      },
+    );
+  }, [
+    entries,
+    nodeSystem,
+    statesList,
+    customComponents,
+  ]);
+
   return (<>
     <AppWindow
       tools={windowTools}

src/defs/PyWebview.tsx

@@ -8,6 +8,7 @@ export interface PyWebview {
       file_types?: string[],
     ) => Promise<void>;
     load_file: () => Promise<string>;
+    load_project_id: () => Promise<string | null>;
   }
 }
 

src/utils/desktopTools.ts

@@ -71,12 +71,18 @@ const setupDesktopTools = () => {
     return promise;
   }
 
+  const loadProjectId = async (): Promise<string | null> => {
+    if (!isDesktop()) return null;
+    return pwv!.api.load_project_id() || null;
+  }
+
   return {
     isDesktop,
     closeWindow,
     toggleWindowFullscreen,
     saveFile,
     loadFile,
+    loadProjectId,
   }
 };
 
@@ -86,5 +92,6 @@ export const {
   toggleWindowFullscreen,
   saveFile,
   loadFile,
+  loadProjectId,
 } = setupDesktopTools();
 

src/utils/engineTools.ts

@@ -6,6 +6,7 @@ import type {
 } from "@defs/Node";
 
 import { loadFile, saveFile } from "@utils/desktopTools";
+import { loadData, saveData } from "./persistentTools";
 
 type PackedNode = {
   id: string;
@@ -34,13 +35,24 @@ type PackedNodeSystem = {
 };
 
 const setupEngineTools = () => {
+  let projectId: string | null = null;
+  
+  const setProjectId = (id: string) => {
+    projectId = id;
+  };
+
+  const getProjectId = (): string | null => {
+    return projectId;
+  };
+
   const saveProject = (
     nodeSystem: NodeSystem,
     entries: string[],
     variables: {
       states: Variable[];
       customComponents: Variable[];
     },
+    download: boolean = false,
   ) => {
     const savedNodes: PackedNodeMap = {};
 
@@ -82,12 +94,33 @@ const setupEngineTools = () => {
 
     const packedSystem = packNodeSystem(nodeSystem);
     const dataJSON = JSON.stringify({
+      projectId,
       entries,
       nodes: savedNodes,
       system: packedSystem,
       variables,
     });
 
+    if (!download) {
+      if (projectId) {
+        saveData(`p:${projectId}`, dataJSON);
+        saveData("activeProjectId", projectId);
+        
+        const projectMap = JSON.parse(
+          loadData(`projectMap`) || "{}"
+        );
+
+        projectMap[projectId] = {
+          id: projectId,
+          status: "accessible",
+        };
+
+        saveData(`projectMap`, JSON.stringify(projectMap));
+      }
+
+      return;
+    }
+
     saveFile(dataJSON, "project.json", [
       "Project Files (*.json)",
       "All Files (*.*)"
@@ -96,7 +129,7 @@ const setupEngineTools = () => {
 
   const loadProject = async (
     overrideNodeSystem: (
-      system: NodeSystem, 
+      system: NodeSystem,
       entries: string[],
     ) => void,
     overrideVariables: (
@@ -105,11 +138,15 @@ const setupEngineTools = () => {
     ) => void,
     openNode: (nodeId: string) => void,
     removeNode: (nodeId: string) => void,
+    upload: boolean = false,
   ) => {
-    const fileContents: string | null = await loadFile();
+    let fileContents: string | null = loadData(`p:${projectId}`);
+    
+    if (upload) fileContents = await loadFile();
     if (!fileContents) return;
 
     const data: {
+      projectId: string;
       entries: string[];
       nodes: PackedNodeMap;
       system: PackedNodeSystem;
@@ -169,6 +206,8 @@ const setupEngineTools = () => {
       loadedSystem[baseId] = group;
     }
 
+    setProjectId(data.projectId);
+
     overrideNodeSystem(
       loadedSystem,
       data.entries
@@ -183,11 +222,15 @@ const setupEngineTools = () => {
   return {
     saveProject,
     loadProject,
+    setProjectId,
+    getProjectId,
   }
 };
 
 export const {
   saveProject,
   loadProject,
+  setProjectId,
+  getProjectId,
 } = setupEngineTools();
 

src/utils/persistentTools.ts

@@ -0,0 +1,28 @@
+const setupPersistentTools = () => {
+  const persistenceKey = 'graphscript-persistence:';
+
+  const saveData = (key: string, value: string) => {
+    localStorage.setItem(`${persistenceKey}${key}`, value);
+  };
+
+  const loadData = (key: string): string | null => {
+    return localStorage.getItem(`${persistenceKey}${key}`);
+  };
+
+  const wipeData = (key: string) => {
+    localStorage.removeItem(`${persistenceKey}${key}`);
+  };
+
+  return {
+    saveData,
+    loadData,
+    wipeData,
+  }
+};
+
+export const {
+  saveData,
+  loadData,
+  wipeData,
+} = setupPersistentTools();
+