feat: implement branch node (almost finsihed)

app/src/lib/result-viewer/Scene.svelte

@@ -7,7 +7,6 @@
     useTexture,
   } from "@threlte/extras";
   import {
-    Texture,
     type BufferGeometry,
     type PerspectiveCamera,
     type Vector3,
@@ -16,7 +15,6 @@
   import { OrbitControls } from "@threlte/extras";
   import { AppSettings } from "../settings/app-settings";
   import localStore from "$lib/helpers/localStore";
-  import { Inspector } from "three-inspect";
 
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];
@@ -89,13 +87,9 @@
   {/if}
   {#await matcap then value}
     <T.Mesh geometry={geo}>
-      <T.MeshMatcapMaterial matcap={value} />
+      <T.MeshMatcapMaterial matcap={value} wireframe={$AppSettings.wireframe} />
       {#if false}
-        <T.MeshStandardMaterial
-          color="green"
-          depthTest={true}
-          wireframe={$AppSettings.wireframe}
-        />
+        <T.MeshStandardMaterial color="green" depthTest={true} />
       {/if}
     </T.Mesh>
   {/await}

app/src/lib/settings/panels/ActiveNode.svelte

@@ -64,11 +64,17 @@
 </script>
 
 {#if node}
-  {#if nodeDefinition && store && Object.keys(nodeDefinition).length > 0}
-    <NestedSettings id="activeNodeSettings" settings={nodeDefinition} {store} />
-  {:else}
-    <p class="mx-4">Active Node has no Settings</p>
-  {/if}
+  {#key node.id}
+    {#if nodeDefinition && store && Object.keys(nodeDefinition).length > 0}
+      <NestedSettings
+        id="activeNodeSettings"
+        settings={nodeDefinition}
+        {store}
+      />
+    {:else}
+      <p class="mx-4">Active Node has no Settings</p>
+    {/if}
+  {/key}
 {:else}
   <p class="mx-4">No active node</p>
 {/if}

app/src/routes/+page.svelte

@@ -49,10 +49,25 @@
   let keymap: ReturnType<typeof createKeyMap>;
 
   function handleResult(event: CustomEvent<Graph>) {
-    res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings));
+    try {
+      res = runtimeExecutor.execute(
+        event.detail,
+        get(settingPanels?.graph?.settings),
+      );
+    } catch (error) {
+      console.log("errors", error);
+    }
 
     if ($AppSettings.centerCamera && viewerCamera && viewerCenter) {
-      viewerControls.target.copy(viewerCenter);
+      if (
+        Number.isNaN(viewerCenter.x) ||
+        Number.isNaN(viewerCenter.y) ||
+        Number.isNaN(viewerCenter.z)
+      ) {
+        // viewerCenter.set(0, 0, 0);
+      } else {
+        viewerControls.target.copy(viewerCenter);
+      }
       viewerControls.update();
     }
   }
@@ -61,7 +76,7 @@
     localStorage.setItem("graph", JSON.stringify(event.detail));
   }
 
-  let settings: Record<string, any> = {
+  let settingPanels: Record<string, any> = {
     general: {
       id: "general",
       icon: "i-tabler-settings",
@@ -90,33 +105,33 @@
   };
 
   $: if (keymap) {
-    settings.shortcuts = {
+    settingPanels.shortcuts = {
       id: "shortcuts",
       icon: "i-tabler-keyboard",
       props: { keymap },
       component: Keymap,
     };
 
-    settings = settings;
+    settingPanels = settingPanels;
   }
 
   $: if (manager) {
-    settings.activeNode.props.manager = manager;
-    settings.nodeStore = {
+    settingPanels.activeNode.props.manager = manager;
+    settingPanels.nodeStore = {
       id: "Node Store",
       icon: "i-tabler-database",
       props: { nodeRegistry, manager },
       component: NodeStore,
     };
-    settings = settings;
+    settingPanels = settingPanels;
   }
 
   $: if (activeNode) {
-    settings.activeNode.props.node = activeNode;
-    settings = settings;
+    settingPanels.activeNode.props.node = activeNode;
+    settingPanels = settingPanels;
   } else {
-    settings.activeNode.props.node = undefined;
-    settings = settings;
+    settingPanels.activeNode.props.node = undefined;
+    settingPanels = settingPanels;
   }
 
   function handleSettings(
@@ -125,25 +140,25 @@
       types: Record<string, unknown>;
     }>,
   ) {
-    settings.general.definition.debug.stressTest.loadGrid.callback =
+    settingPanels.general.definition.debug.stressTest.loadGrid.callback =
       function () {
-        const store = get(settings.general.settings);
+        const store = get(settingPanels.general.settings);
         graph = templates.grid(store.amount, store.amount);
       };
 
-    settings.general.definition.debug.stressTest.loadTree.callback =
+    settingPanels.general.definition.debug.stressTest.loadTree.callback =
       function () {
-        const store = get(settings.general.settings);
+        const store = get(settingPanels.general.settings);
         graph = templates.tree(store.amount);
       };
 
-    settings.graph.settings = writable(ev.detail.values);
-    settings.graph.definition = {
-      ...settings.graph.definition,
+    settingPanels.graph.settings = writable(ev.detail.values);
+    settingPanels.graph.definition = {
+      ...settingPanels.graph.definition,
       ...ev.detail.types,
     };
 
-    settings = settings;
+    settingPanels = settingPanels;
   }
 </script>
 
@@ -168,12 +183,12 @@
           bind:keymap
           showGrid={$AppSettings?.showNodeGrid}
           snapToGrid={$AppSettings?.snapToGrid}
-          settings={settings?.graph?.settings}
+          settings={settingPanels?.graph?.settings}
           on:settings={handleSettings}
           on:result={handleResult}
           on:save={handleSave}
         />
-        <Settings panels={settings}></Settings>
+        <Settings panels={settingPanels}></Settings>
       {/key}
     </Grid.Cell>
   </Grid.Row>