Autosave System Updated and Improved

Author: AttAditya

index.html

@@ -23,13 +23,6 @@
     <meta name="twitter:image" content="https://github.com/GraphScript-Labs/.github/blob/main/Banner.png?raw=true">
 
     <script src="/pwv.js"></script>
-
-    <script defer>
-      if (!window.hasPWV) {
-        const element = document.querySelector(".pywebview-drag-region");
-        element.remove();
-      }
-    </script>
 
     <script>
       document.addEventListener("contextmenu", (event) => {
@@ -55,5 +48,11 @@
     <span class="pywebview-drag-region"></span>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      if (!window.hasPWV) {
+        const element = document.querySelector(".pywebview-drag-region");
+        element.remove();
+      }
+    </script>
   </body>
 </html>

src/components/engine/Node/index.tsx

@@ -5,6 +5,8 @@ import {
 
 import type { NodeModel } from "@defs/Node";
 
+import { useUnsavedChangesContext } from "@utils/unsavedChanges";
+
 import { DynamicIcon } from "@components/commons/DynamicIcon";
 import { Glass } from "@components/commons/Glass";
 import { Input } from "@components/commons/Input";
@@ -16,6 +18,9 @@ export function Node({
 }: {
   node: NodeModel;
 }) {
+  const {
+    setUnsavedChanges,
+  } = useUnsavedChangesContext()!;
   const [active, setActive] = useState(false);
 
   const handleClick: () => void = useCallback(() => {
@@ -71,6 +76,7 @@ export function Node({
                 defaultValue={node.value || ""}
                 onChange={(event) => {
                   node.value = event.target.value;
+                  setUnsavedChanges(true);
                 }}
               />
             </div>

src/utils/appData.tsx

@@ -17,8 +17,9 @@ import { usePalleteContext } from "@utils/pallete";
 import { useVariablesContext } from "@utils/variables";
 import { loadProject, saveProject } from "@utils/engineTools";
 import { packProject } from "@utils/packerTools";
-import { backupProject, getRestoredProject } from "@utils/desktopTools";
+import { backupProject, getRestoredProject, isDesktop } from "@utils/desktopTools";
 import { saveData } from "@utils/persistentTools";
+import { useUnsavedChangesContext } from "@utils/unsavedChanges";
 import {
   getBreadcrumb,
   getWindowTools,
@@ -78,6 +79,11 @@ const createAppDataContext = () => {
       requestPrompt,
     } = usePromptContext()!;
 
+    const {
+      unsavedChanges,
+      setUnsavedChanges,
+    } = useUnsavedChangesContext()!;
+
     const [
       windowTools,
       setWindowTools,
@@ -97,6 +103,8 @@ const createAppDataContext = () => {
       projectId,
       setProjectId,
     ] = useState<string | null>(null);
+
+    const [loaded, setLoaded] = useState<boolean>(false);
 
     useEffect(() => {
       setWindowTools(
@@ -157,24 +165,31 @@ const createAppDataContext = () => {
 
     useEffect(() => {
       (async () => {
+        if (loaded) return;
+
         const existingId = await loadExistingId();
-        const restoredProject = await getRestoredProject();
-        saveData(`p:${existingId}`, restoredProject);
         setProjectId(existingId);
+        if (isDesktop()) {
+          const restoredProject = await getRestoredProject();
+          saveData(`p:${existingId}`, restoredProject);
+        }
 
-        loadProject(
+        await loadProject(
           existingId,
           overrideNodeSystem,
           overrideVariables,
           openNode,
           removeNode,
         );
+
+        setLoaded(true);
       })();
     }, [
       openNode,
       overrideNodeSystem,
       overrideVariables,
       removeNode,
+      loaded,
     ]);
 
     useEffect(() => {
@@ -198,6 +213,21 @@ const createAppDataContext = () => {
     ]);
 
     useEffect(() => {
+      if (!loaded) return;
+      if (!projectId) return;
+      if (!unsavedChanges) return;
+
+      const project = packProject(
+        projectId!,
+        nodeSystem,
+        entries,
+        {
+          states: statesList,
+          customComponents,
+        }
+      );
+
+      backupProject(JSON.stringify(project, null, 2));
       saveProject(
         projectId!,
         nodeSystem,
@@ -207,33 +237,12 @@ const createAppDataContext = () => {
           customComponents,
         },
       );
-    }, [
-      projectId,
-      entries,
-      nodeSystem,
-      statesList,
-      customComponents,
-    ]);
-
-    useEffect(() => {
-      const backupInterval = setInterval(() => {
-        const project = packProject(
-          projectId!,
-          nodeSystem,
-          entries,
-          {
-            states: statesList,
-            customComponents,
-          }
-        );
-
-        backupProject(JSON.stringify(project, null, 2));
-      }, 5000);
 
-      return () => {
-        clearInterval(backupInterval);
-      }
+      setUnsavedChanges(false);
     }, [
+      loaded,
+      unsavedChanges,
+      setUnsavedChanges,
       customComponents,
       entries,
       nodeSystem,

src/utils/nodeSystem.tsx

@@ -11,6 +11,8 @@ import type {
   NodeSystem,
 } from "@defs/Node";
 
+import { useUnsavedChangesContext } from "@utils/unsavedChanges";
+
 const createNodeSystemContext = () => {
   const NodeSystemContext = createContext<{
     nodeSystem: NodeSystem;
@@ -28,6 +30,10 @@ const createNodeSystemContext = () => {
   const NodeSystemProvider = ({ children }: {
     children: ReactNode;
   }) => {
+    const {
+      setUnsavedChanges,
+    } = useUnsavedChangesContext()!;
+
     const [entries, setEntries] = useState<string[]>([
       "ENTRY",
     ]);
@@ -54,14 +60,15 @@ const createNodeSystemContext = () => {
           isEntry: true,
         }
 
+        setUnsavedChanges(true);
         return { ...prev };
       });
 
       setEntries(prev => {
         if (prev.includes(entryName)) return prev;
         return [...prev, entryName];
       });
-    }, []);
+    }, [setUnsavedChanges]);
 
     const addNode = useCallback((
       baseId: string,
@@ -80,10 +87,11 @@ const createNodeSystemContext = () => {
           };
         }
 
+        setUnsavedChanges(true);
         prev[baseId].nodes.push(node);
         return { ...prev };
       });
-    }, []);
+    }, [setUnsavedChanges]);
 
     const removeNode = useCallback((nodeId: string) => {
       setNodeSystem(prev => {
@@ -94,17 +102,19 @@ const createNodeSystemContext = () => {
           n => n.id !== nodeId
         );
 
+        setUnsavedChanges(true);
         return { ...prev };
       });
-    }, []);
+    }, [setUnsavedChanges]);
 
     const overrideNodeSystem = useCallback((
       system: NodeSystem,
       entries: string[],
     ) => {
+      setUnsavedChanges(true);
       setNodeSystem(system);
       setEntries(entries);
-    }, []);
+    }, [setUnsavedChanges]);
 
     const exposed = {
       nodeSystem,

src/utils/rootProvider.tsx

@@ -7,6 +7,7 @@ import { NodeSystemProvider } from "@utils/nodeSystem";
 import { NodeHistoryProvider } from "@utils/nodeHistory";
 import { NodeFactoryProvider } from "@utils/nodeFactory";
 import { AppDataProvider } from "@utils/appData";
+import { UnsavedChangesProvider } from "./unsavedChanges";
 
 type ProviderType = ({ children }: {
   children: ReactNode;
@@ -16,6 +17,7 @@ export function RootProvider({ children }: {
   children: ReactNode;
 }) {
   const providers: ProviderType[] = [
+    UnsavedChangesProvider,
     PromptProvider,
     PalleteProvider,
     VariablesProvider,

src/utils/unsavedChanges.tsx

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react"
+
+const createUnsavedChangesContext = () => {
+  const UnsavedChangesContext = createContext<{
+    unsavedChanges: boolean;
+    setUnsavedChanges: (value: boolean) => void;
+  } | undefined>(undefined);
+
+  const UnsavedChangesProvider = ({ children }: {
+    children: ReactNode
+  }) => {
+    const [unsavedChanges, setUnsavedChanges] = useState(false);
+
+    const exposed = {
+      unsavedChanges,
+      setUnsavedChanges,
+    };
+
+    return (
+      <UnsavedChangesContext.Provider value={exposed}>
+        {children}
+      </UnsavedChangesContext.Provider>
+    );
+  };
+
+  const useUnsavedChangesContext = () => {
+    return useContext(UnsavedChangesContext);
+  };
+
+  return {
+    UnsavedChangesProvider,
+    useUnsavedChangesContext,
+  }
+}
+
+export const {
+  UnsavedChangesProvider,
+  useUnsavedChangesContext,
+} = createUnsavedChangesContext();
+