From f0f4c001379d1b1dd8ac4c7293e683a78eac85a0 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 7 May 2026 21:12:23 +0200
Subject: [PATCH] feat: use beforeunload to make sure graph is saved

---
 app/src/routes/+page.svelte | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 593ac20..15a8261 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -7,7 +7,7 @@
   import { debugNode } from '$lib/node-registry/debugNode';
   import { groupNode } from '$lib/node-registry/groupNode.js';
   import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
-  import NodeStore from '$lib/node-store/NodeStore.svelte';
+
   import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
   import { ProjectManager } from '$lib/project-manager/project-manager.svelte';
   import ProjectManagerEl from '$lib/project-manager/ProjectManager.svelte';
@@ -35,6 +35,7 @@
 
   let performanceStore = createPerformanceStore();
   let planty = $state<ReturnType<typeof Planty>>();
+  let pendingSave = false;
 
   const { data } = $props();
 
@@ -52,8 +53,8 @@
   );
 
   $effect(() => {
-    workerRuntime.useRegistryCache = appSettings.value.debug.cache.useRuntimeCache;
-    workerRuntime.useRuntimeCache = appSettings.value.debug.cache.useRegistryCache;
+    workerRuntime.useRegistryCache = appSettings.value.debug.cache.useRegistryCache;
+    workerRuntime.useRuntimeCache = appSettings.value.debug.cache.useRuntimeCache;
 
     if (appSettings.value.debug.cache.useRegistryCache) {
       nodeRegistry.cache = registryCache;
@@ -68,6 +69,16 @@
     }
   });
 
+  $effect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (pendingSave) {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  });
+
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
   let isExecuting = $state(false);
@@ -288,7 +299,7 @@
             bind:showHelp={appSettings.value.nodeInterface.showHelp}
             bind:settings={graphSettings}
             bind:settingTypes={graphSettingTypes}
-            onsave={(g) => pm.saveGraph(g)}
+            onsave={async (g) => { pendingSave = true; await pm.saveGraph(g); pendingSave = false; }}
             onresult={(result) => handleUpdate(result as Graph)}
           />
         {/key}
@@ -317,15 +328,7 @@
         <Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
           <ExportSettings {scene} />
         </Panel>
-        {#if 0 > 1}
-          <Panel
-            id="node-store"
-            title="Node Store"
-            icon="i-[tabler--database] bg-green-400"
-          >
-            <NodeStore registry={nodeRegistry} />
-          </Panel>
-        {/if}
+
         <Panel
           id="performance"
           title="Performance"