chore: move some more components to svelte 5

app/src/routes/+page.svelte

@@ -26,8 +26,6 @@
   import { IndexDBCache, RemoteNodeRegistry } from "@nodes/registry";
   import { createPerformanceStore } from "@nodes/utils";
   import BenchmarkPanel from "$lib/sidebar/panels/BenchmarkPanel.svelte";
-  import { debounceAsyncFunction } from "$lib/helpers";
-  import { onMount } from "svelte";
 
   let performanceStore = createPerformanceStore();
 
@@ -45,14 +43,15 @@
   let activeNode = $state<Node | undefined>(undefined);
   let scene = $state<Group>(null!);
 
-  let graph = localStorage.getItem("graph")
-    ? JSON.parse(localStorage.getItem("graph")!)
-    : templates.defaultPlant;
+  let graph = $state(
+    localStorage.getItem("graph")
+      ? JSON.parse(localStorage.getItem("graph")!)
+      : templates.defaultPlant,
+  );
 
   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;
@@ -69,74 +68,86 @@
     },
   ]);
   let graphSettings = $state<Record<string, any>>({});
-  let graphSettingTypes = $state({
+  type BooleanSchema = {
+    [key: string]: {
+      type: "boolean";
+      value: false;
+    };
+  };
+  let graphSettingTypes = $state<BooleanSchema>({
     randomSeed: { type: "boolean", value: false },
   });
 
-  const handleUpdate = debounceAsyncFunction(
-    async (g: Graph, s: Record<string, any> = graphSettings) => {
-      performanceStore.startRun();
-      try {
-        let a = performance.now();
-        const graphResult = await runtime.execute(g, $state.snapshot(s));
-        let b = performance.now();
+  let runIndex = 0;
+  const handleUpdate = async (
+    g: Graph,
+    s: Record<string, any> = graphSettings,
+  ) => {
+    runIndex++;
+    performanceStore.startRun();
+    try {
+      let a = performance.now();
+      const graphResult = await runtime.execute(
+        $state.snapshot(g),
+        $state.snapshot(s),
+      );
+      let b = performance.now();
 
-        if (appSettings.debug.useWorker) {
-          let perfData = await runtime.getPerformanceData();
-          let lastRun = perfData?.at(-1);
-          if (lastRun?.total) {
-            lastRun.runtime = lastRun.total;
-            delete lastRun.total;
-            performanceStore.mergeData(lastRun);
-            performanceStore.addPoint(
-              "worker-transfer",
-              b - a - lastRun.runtime[0],
-            );
-          }
+      if (appSettings.debug.useWorker) {
+        let perfData = await runtime.getPerformanceData();
+        let lastRun = perfData?.at(-1);
+        if (lastRun?.total) {
+          lastRun.runtime = lastRun.total;
+          delete lastRun.total;
+          performanceStore.mergeData(lastRun);
+          performanceStore.addPoint(
+            "worker-transfer",
+            b - a - lastRun.runtime[0],
+          );
         }
-
-        viewerComponent?.update(graphResult);
-      } catch (error) {
-        console.log("errors", error);
-      } finally {
-        performanceStore.stopRun();
       }
-    },
-  );
+      viewerComponent?.update(graphResult);
+    } catch (error) {
+      console.log("errors", error);
+    } finally {
+      performanceStore.stopRun();
+    }
+  };
 
-  // $ 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;
-  //   };
-  // }
+  $effect(() => {
+    //@ts-ignore
+    AppSettingTypes.debug.stressTest.loadGrid.callback = () => {
+      graph = templates.grid(
+        appSettings.debug.amount.value,
+        appSettings.debug.amount.value,
+      );
+    };
+    //@ts-ignore
+    AppSettingTypes.debug.stressTest.loadTree.callback = () => {
+      graph = templates.tree(appSettings.debug.amount.value);
+    };
+    //@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} />
-<div class="wrapper manager-{$managerStatus}">
+<svelte:document onkeydown={applicationKeymap.handleKeyboardEvent} />
+
+<div class="wrapper manager-{manager?.status}">
   <header></header>
   <Grid.Row>
     <Grid.Cell>
@@ -148,93 +159,91 @@
       />
     </Grid.Cell>
     <Grid.Cell>
-      {#key graph}
-        <GraphInterface
-          bind:this={graphInterface}
-          {graph}
-          registry={nodeRegistry}
-          showGrid={appSettings.nodeInterface.showNodeGrid}
-          snapToGrid={appSettings.nodeInterface.snapToGrid}
-          bind:activeNode
-          bind:showHelp={appSettings.nodeInterface.showHelp}
-          bind:settings={graphSettings}
-          bind:settingTypes={graphSettingTypes}
-          onresult={(result) => handleUpdate(result)}
-          onsave={(graph) => handleSave(graph)}
-        />
-        <Sidebar>
-          <Panel id="general" title="General" icon="i-tabler-settings">
-            <NestedSettings
-              id="general"
-              value={appSettings}
-              type={AppSettingTypes}
-            />
-          </Panel>
-          <Panel
-            id="shortcuts"
-            title="Keyboard Shortcuts"
-            icon="i-tabler-keyboard"
-          >
-            <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} />
-          </Panel>
-          <Panel
-            id="node-store"
-            classes="text-green-400"
-            title="Node Store"
-            icon="i-tabler-database"
-          >
-            <NodeStore registry={nodeRegistry} />
-          </Panel>
-          <Panel
-            id="performance"
-            title="Performance"
-            classes="text-red-400"
-            hidden={!appSettings.debug.showPerformancePanel}
-            icon="i-tabler-brand-speedtest"
-          >
-            {#if $performanceStore}
-              <PerformanceViewer data={$performanceStore} />
-            {/if}
-          </Panel>
-          <Panel
-            id="benchmark"
-            title="Benchmark"
-            classes="text-red-400"
-            hidden={!appSettings.debug.showBenchmarkPanel}
-            icon="i-tabler-graph"
-          >
-            <BenchmarkPanel run={randomGenerate} />
-          </Panel>
-          <Panel
+      <GraphInterface
+        {graph}
+        bind:this={graphInterface}
+        registry={nodeRegistry}
+        showGrid={appSettings.nodeInterface.showNodeGrid}
+        snapToGrid={appSettings.nodeInterface.snapToGrid}
+        bind:activeNode
+        bind:showHelp={appSettings.nodeInterface.showHelp}
+        bind:settings={graphSettings}
+        bind:settingTypes={graphSettingTypes}
+        onresult={(result) => handleUpdate(result)}
+        onsave={(graph) => handleSave(graph)}
+      />
+      <Sidebar>
+        <Panel id="general" title="General" icon="i-tabler-settings">
+          <NestedSettings
+            id="general"
+            value={appSettings}
+            type={AppSettingTypes}
+          />
+        </Panel>
+        <Panel
+          id="shortcuts"
+          title="Keyboard Shortcuts"
+          icon="i-tabler-keyboard"
+        >
+          <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} />
+        </Panel>
+        <Panel
+          id="node-store"
+          classes="text-green-400"
+          title="Node Store"
+          icon="i-tabler-database"
+        >
+          <NodeStore registry={nodeRegistry} />
+        </Panel>
+        <Panel
+          id="performance"
+          title="Performance"
+          classes="text-red-400"
+          hidden={!appSettings.debug.showPerformancePanel}
+          icon="i-tabler-brand-speedtest"
+        >
+          {#if $performanceStore}
+            <PerformanceViewer data={$performanceStore} />
+          {/if}
+        </Panel>
+        <Panel
+          id="benchmark"
+          title="Benchmark"
+          classes="text-red-400"
+          hidden={!appSettings.debug.showBenchmarkPanel}
+          icon="i-tabler-graph"
+        >
+          <BenchmarkPanel run={randomGenerate} />
+        </Panel>
+        <Panel
+          id="graph-settings"
+          title="Graph Settings"
+          classes="text-blue-400"
+          icon="i-custom-graph"
+        >
+          <NestedSettings
             id="graph-settings"
-            title="Graph Settings"
-            classes="text-blue-400"
-            icon="i-custom-graph"
-          >
-            <NestedSettings
-              id="graph-settings"
-              type={graphSettingTypes}
-              bind:value={graphSettings}
-            />
-          </Panel>
-          <Panel
-            id="active-node"
-            title="Node Settings"
-            classes="text-blue-400"
-            icon="i-tabler-adjustments"
-          >
-            <ActiveNodeSettings {manager} node={activeNode} />
-          </Panel>
-        </Sidebar>
-      {/key}
+            type={graphSettingTypes}
+            bind:value={graphSettings}
+          />
+        </Panel>
+        <Panel
+          id="active-node"
+          title="Node Settings"
+          classes="text-blue-400"
+          icon="i-tabler-adjustments"
+        >
+          <ActiveNodeSettings {manager} node={activeNode} />
+        </Panel>
+      </Sidebar>
     </Grid.Cell>
   </Grid.Row>
 </div>

app/src/routes/test/+page.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-  import {
-    decodeFloat,
-    encodeFloat,
-    decodeNestedArray,
-    encodeNestedArray,
-    concatEncodedArrays,
-  } from "@nodes/utils";
-
-  console.clear();
-
-  {
-    const encodedPositions = new Int32Array([
-      encodeFloat(1.1),
-      encodeFloat(2.0),
-      encodeFloat(3.0),
-      encodeFloat(4.0),
-      encodeFloat(5.0),
-      encodeFloat(6.0),
-      encodeFloat(7.0),
-      encodeFloat(8.0),
-      encodeFloat(9.0),
-    ]);
-
-    // Create a Float32Array using the same buffer that backs the Int32Array
-    const floatView = new Float32Array(encodedPositions.buffer);
-    console.log({ encodedPositions, floatView });
-  }
-
-  if (false) {
-    const input_a = encodeNestedArray([1, 2, 3]);
-    const input_b = 2;
-    const input_c = 89;
-    const input_d = encodeNestedArray([4, 5, 6]);
-
-    const output = concatNestedArrays([input_a, input_b, input_c, input_d]);
-
-    const decoded = decodeNestedArray(output);
-    console.log("CONCAT", [input_a, input_b, input_c, input_d]);
-    console.log(output);
-    console.log(decoded);
-  }
-
-  if (false) {
-    let maxError = 0;
-    new Array(10_000).fill(null).forEach((v, i) => {
-      const input = i < 5_000 ? i : Math.random() * 100;
-      const encoded = encodeFloat(input);
-      const output = decodeFloat(encoded[0], encoded[1]);
-
-      const error = Math.abs(input - output);
-      if (error > maxError) {
-        maxError = error;
-      }
-    });
-
-    console.log("DECODE FLOAT");
-    console.log(maxError);
-    console.log(encodeFloat(2.0));
-    console.log("----");
-  }
-
-  if (false) {
-    console.log("Turning Int32Array into Array");
-    const test_size = 2_000_000;
-    const a = new Int32Array(test_size);
-    let t0 = performance.now();
-    for (let i = 0; i < test_size; i++) {
-      a[i] = Math.floor(Math.random() * 100);
-    }
-    console.log("TIME", performance.now() - t0);
-    t0 = performance.now();
-    const b = [...a.slice(0, test_size)];
-    console.log("TIME", performance.now() - t0);
-    console.log(typeof b, Array.isArray(b), b instanceof Int32Array);
-  }
-
-  if (false) {
-    // const input = [5, [6, 1], [7, 2, [5, 1]]];
-    // const input = [5, [], [6, []], []];
-    // const input = [52];
-    const input = [0, 0, [0, 2, 0, 128, 0, 128], 0, 128];
-
-    console.log("INPUT");
-    console.log(input);
-
-    let encoded = encodeNestedArray(input);
-    // encoded = [];
-    console.log("ENCODED");
-    console.log(encoded);
-
-    encoded = [0, 2, 1, 0, 4, 4, 2, 4, 1, 2, 2, 0, 3, 2, 3, 1, 1, 1, 1];
-
-    const decoded = decodeNestedArray(encoded);
-    console.log("DECODED");
-    console.log(decoded);
-
-    console.log("EQUALS", JSON.stringify(input) === JSON.stringify(decoded));
-  }
-</script>