feat: some shit

app/src/routes/+page.svelte

@@ -5,9 +5,10 @@
   import type { Graph, Node } from "@nodes/types";
   import Viewer from "$lib/result-viewer/Viewer.svelte";
   import Settings from "$lib/settings/Settings.svelte";
-  import { AppSettingTypes, AppSettings } from "$lib/settings/app-settings";
-  import { appSettings as _appSettings, AppSettingTypes as _AppSettingTypes} from "$lib/settings/app-settings.svelte";
-  import { writable } from "svelte/store";
+  import {
+    appSettings,
+    AppSettingTypes,
+  } from "$lib/settings/app-settings.svelte";
   import Keymap from "$lib/settings/panels/Keymap.svelte";
   import { createKeyMap } from "$lib/helpers/createKeyMap";
   import NodeStore from "$lib/node-store/NodeStore.svelte";
@@ -27,6 +28,7 @@
   import { createPerformanceStore } from "@nodes/utils";
   import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte";
   import { debounceAsyncFunction } from "$lib/helpers";
+  import { onMount } from "svelte";
 
   let performanceStore = createPerformanceStore();
 
@@ -38,24 +40,26 @@
   const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
   memoryRuntime.perf = performanceStore;
 
-  $: runtime = $AppSettings.useWorker ? workerRuntime : memoryRuntime;
+  const runtime = $derived(
+    appSettings.debug.useWorker ? workerRuntime : memoryRuntime,
+  );
 
-  let activeNode: Node | undefined;
-  let scene: Group;
-  let updateViewerResult: (result: Int32Array) => void;
+  let activeNode = $state<Node | undefined>(undefined);
+  let scene = $state<Group>(null!);
 
   let graph = localStorage.getItem("graph")
     ? JSON.parse(localStorage.getItem("graph")!)
     : templates.defaultPlant;
 
-  let graphInterface: ReturnType<typeof GraphInterface>;
-  $: manager = graphInterface?.manager;
-  $: managerStatus = manager?.status;
-  $: keymap = graphInterface?.keymap;
+  let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
+  let viewerComponent = $state<ReturnType<typeof Viewer>>();
+  const manager = $derived(graphInterface?.manager);
+  const managerStatus = $derived(manager?.status);
 
   async function randomGenerate() {
+    if (!manager) return;
     const g = manager.serialize();
-    const s = { ...$graphSettings, randomSeed: true };
+    const s = { ...graphSettings, randomSeed: true };
     await handleUpdate(g, s);
   }
 
@@ -66,18 +70,18 @@
       callback: randomGenerate,
     },
   ]);
-  let graphSettings = writable<Record<string, any>>({});
-  let graphSettingTypes = {};
+  let graphSettings = $state<Record<string, any>>({});
+  let graphSettingTypes = $state({});
 
   const handleUpdate = debounceAsyncFunction(
-    async (g: Graph, s: Record<string, any>) => {
+    async (g: Graph, s: Record<string, any> = graphSettings) => {
       performanceStore.startRun();
       try {
         let a = performance.now();
-        const graphResult = await runtime.execute(g, s);
+        const graphResult = await runtime.execute(g, $state.snapshot(s));
         let b = performance.now();
 
-        if ($AppSettings.useWorker) {
+        if (appSettings.debug.useWorker) {
           let perfData = await runtime.getPerformanceData();
           let lastRun = perfData?.at(-1);
           if (lastRun?.total) {
@@ -91,7 +95,7 @@
           }
         }
 
-        updateViewerResult(graphResult);
+        viewerComponent?.update(graphResult);
       } catch (error) {
         console.log("errors", error);
       } finally {
@@ -100,32 +104,35 @@
     },
   );
 
-  $: if (AppSettings) {
-    //@ts-ignore
-    AppSettingTypes.debug.stressTest.loadGrid.callback = () => {
-      graph = templates.grid($AppSettings.amount, $AppSettings.amount);
-    };
-    //@ts-ignore
-    AppSettingTypes.debug.stressTest.loadTree.callback = () => {
-      graph = templates.tree($AppSettings.amount);
-    };
-    //@ts-ignore
-    AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
-      graph = templates.lottaFaces;
-    };
-    //@ts-ignore
-    AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
-      graph = templates.lottaNodes;
-    };
-    //@ts-ignore
-    AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
-      graph = templates.lottaNodesAndFaces;
-    };
-  }
+  // $ if (AppSettings) {
+  //   //@ts-ignore
+  //   AppSettingTypes.debug.stressTest.loadGrid.callback = () => {
+  //     graph = templates.grid($AppSettings.amount, $AppSettings.amount);
+  //   };
+  //   //@ts-ignore
+  //   AppSettingTypes.debug.stressTest.loadTree.callback = () => {
+  //     graph = templates.tree($AppSettings.amount);
+  //   };
+  //   //@ts-ignore
+  //   AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
+  //     graph = templates.lottaFaces;
+  //   };
+  //   //@ts-ignore
+  //   AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
+  //     graph = templates.lottaNodes;
+  //   };
+  //   //@ts-ignore
+  //   AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
+  //     graph = templates.lottaNodesAndFaces;
+  //   };
+  // }
 
   function handleSave(graph: Graph) {
     localStorage.setItem("graph", JSON.stringify(graph));
   }
+  onMount(() => {
+    handleUpdate(graph);
+  });
 </script>
 
 <svelte:document on:keydown={applicationKeymap.handleKeyboardEvent} />
@@ -134,10 +141,10 @@
   <Grid.Row>
     <Grid.Cell>
       <Viewer
-        perf={performanceStore}
         bind:scene
-        bind:update={updateViewerResult}
-        centerCamera={$AppSettings.centerCamera}
+        bind:this={viewerComponent}
+        perf={performanceStore}
+        centerCamera={appSettings.centerCamera}
       />
     </Grid.Cell>
     <Grid.Cell>
@@ -146,21 +153,21 @@
           bind:this={graphInterface}
           {graph}
           registry={nodeRegistry}
+          showGrid={appSettings.nodeInterface.showNodeGrid}
+          snapToGrid={appSettings.nodeInterface.snapToGrid}
           bind:activeNode
-          showGrid={$AppSettings.showNodeGrid}
-          snapToGrid={$AppSettings.snapToGrid}
-          bind:showHelp={$AppSettings.showHelp}
+          bind:showHelp={appSettings.nodeInterface.showHelp}
           bind:settings={graphSettings}
           bind:settingTypes={graphSettingTypes}
-          onresult={(result) => handleUpdate(result, $graphSettings)}
+          onresult={(result) => handleUpdate(result)}
           onsave={(graph) => handleSave(graph)}
         />
         <Settings>
           <Panel id="general" title="General" icon="i-tabler-settings">
             <NestedSettings
               id="general"
-              value={_appSettings}
-              type={_AppSettingTypes}
+              value={appSettings}
+              type={AppSettingTypes}
             />
           </Panel>
           <Panel
@@ -168,10 +175,12 @@
             title="Keyboard Shortcuts"
             icon="i-tabler-keyboard"
           >
-            <Keymap title="Application" keymap={applicationKeymap} />
-            {#if keymap}
-              <Keymap title="Node-Editor" {keymap} />
-            {/if}
+            <Keymap
+              keymaps={[
+                { keymap: applicationKeymap, title: "Application" },
+                { keymap: graphInterface.keymap, title: "Node-Editor" },
+              ]}
+            />
           </Panel>
           <Panel id="exports" title="Exporter" icon="i-tabler-package-export">
             <ExportSettings {scene} />
@@ -188,7 +197,7 @@
             id="performance"
             title="Performance"
             classes="text-red-400"
-            hidden={!$AppSettings.showPerformancePanel}
+            hidden={!appSettings.debug.showPerformancePanel}
             icon="i-tabler-brand-speedtest"
           >
             {#if $performanceStore}
@@ -199,7 +208,7 @@
             id="benchmark"
             title="Benchmark"
             classes="text-red-400"
-            hidden={!$AppSettings.showBenchmarkPanel}
+            hidden={!appSettings.debug.showBenchmarkPanel}
             icon="i-tabler-graph"
           >
             <BenchmarkPanel run={randomGenerate} />