feat: improve get_args functions

app/src/lib/graph-interface/graph-manager.ts

@@ -241,7 +241,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
         let settingId = nodeType.inputs[key].setting;
         if (settingId) {
           settingTypes[settingId] = nodeType.inputs[key];
-          if (settingValues[settingId] === undefined && "value" in type.inputs[key]) {
+          if (settingValues[settingId] === undefined && "value" in nodeType.inputs[key]) {
             settingValues[settingId] = nodeType.inputs[key].value;
           }
         }

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { T } from "@threlte/core";
-  import { Text } from "@threlte/extras";
-  import type { BufferGeometry } from "three";
+  import { MeshLineGeometry, MeshLineMaterial, Text } from "@threlte/extras";
+  import type { BufferGeometry, Vector3 } from "three";
   import { OrbitControls } from "@threlte/extras";
   import { AppSettings } from "../settings/app-settings";
 
-  export let geometry: BufferGeometry[];
+  export let geometries: BufferGeometry[];
+  export let lines: Vector3[][];
+  $: console.log({ geometries, lines });
 
   function getPosition(geo: BufferGeometry, i: number) {
     const pos = [
@@ -21,6 +23,16 @@
   <T.GridHelper args={[20, 20]} />
 {/if}
 
+{#if lines}
+  {#each lines as line}
+    <T.Mesh>
+      <MeshLineGeometry points={line} />
+
+      <MeshLineMaterial width={0.1} depthTest={false} />
+    </T.Mesh>
+  {/each}
+{/if}
+
 <T.PerspectiveCamera position={[-10, 10, 10]} makeDefault fov={50}>
   <OrbitControls />
 </T.PerspectiveCamera>
@@ -28,7 +40,7 @@
 <T.DirectionalLight position={[0, 10, 10]} />
 <T.AmbientLight intensity={0.5} />
 
-{#each geometry as geo}
+{#each geometries as geo}
   {#if $AppSettings.showIndices}
     {#each geo.attributes.position.array as _, i}
       {#if i % 3 === 0}

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
-  import { BufferGeometry, Float32BufferAttribute } from "three";
+  import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+  import { decodeFloat } from "@nodes/utils";
 
   export let result: Int32Array;
 
   let geometries: BufferGeometry[] = [];
+  let lines: Vector3[][] = [];
 
   function createGeometryFromEncodedData(
     encodedData: Int32Array,
@@ -90,9 +92,34 @@
     return res;
   }
 
+  globalThis.parse_args = parse_args;
+
+  function createLineGeometryFromEncodedData(encodedData: Int32Array) {
+    const positions: Vector3[] = [];
+
+    const amount = (encodedData.length - 1) / 4;
+
+    for (let i = 0; i < amount; i++) {
+      const x = decodeFloat(encodedData[1 + i * 4 + 0]);
+      const y = decodeFloat(encodedData[1 + i * 4 + 1]);
+      const z = decodeFloat(encodedData[1 + i * 4 + 2]);
+      positions.push(new Vector3(x, y, z));
+    }
+
+    return positions;
+  }
+
   $: if (result) {
     const inputs = parse_args(result);
 
+    lines = inputs
+      .map((input) => {
+        if (input[0] === 0) {
+          return createLineGeometryFromEncodedData(input);
+        }
+      })
+      .filter(Boolean) as Vector3[][];
+
     geometries = inputs
       .map((input) => {
         if (input[0] === 1) {
@@ -101,9 +128,11 @@
         }
       })
       .filter(Boolean) as BufferGeometry[];
+
+    console.log(lines);
   }
 </script>
 
 <Canvas>
-  <Scene geometry={geometries} />
+  <Scene {geometries} {lines} />
 </Canvas>

app/src/lib/runtime-executor.ts

@@ -150,7 +150,12 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
           }
 
           // if the input is not connected to another node, we use the value from the node itself
-          inputs[key] = node.props?.[key] ?? input?.value;
+          let value = node.props?.[key] ?? input?.value;
+          if (Array.isArray(value)) {
+            inputs[key] = [0, value.length + 1, ...value, 1, 1];
+          } else {
+            inputs[key] = value;
+          }
 
         }
 
@@ -191,10 +196,6 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
               return encodeFloat(value as number);
             }
 
-            if (Array.isArray(value)) {
-              return encodeNestedArray(value);
-            }
-
             return value;
           });
 
@@ -204,13 +205,14 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
           // console.log(`${a2 - a1}ms TRANSFORMED_INPUTS`);
 
-          const encoded_inputs = encodeNestedArray(transformed_inputs);
+          const encoded_inputs = concatEncodedArrays(transformed_inputs);
           const a3 = performance.now();
           console.groupCollapsed(`executing ${node_type.id || node.id}`);
           console.log(`Inputs:`, transformed_inputs);
           console.log(`Encoded Inputs:`, encoded_inputs);
           results[node.id] = node_type.execute(encoded_inputs);
-          console.log("Result:", decodeNestedArray(results[node.id]));
+          console.log("Result:", results[node.id]);
+          console.log("Result (decoded):", decodeNestedArray(results[node.id]));
           console.groupEnd();
           const duration = performance.now() - a3;
           if (duration > 5) {

app/src/lib/settings/Keymap.svelte

@@ -14,7 +14,7 @@
         <div class="command-wrapper">
           <div class="command">
             {#if key.ctrl}
-              <span>Ctrl + </span>
+              <span>Ctrl</span>
             {/if}
             {#if key.shift}
               <span>Shift</span>
@@ -22,7 +22,7 @@
             {#if key.alt}
               <span>Alt</span>
             {/if}
-            <span>{key.key}</span>
+            {key.key}
           </div>
         </div>
         <p>{key.description}</p>
@@ -69,4 +69,9 @@
     display: flex;
     align-items: center;
   }
+
+  span::after {
+    content: " +";
+    opacity: 0.5;
+  }
 </style>

app/src/lib/settings/NestedSettings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import localStore from "$lib/helpers/localStore";
   import type { NodeInput } from "@nodes/types";
   import Input from "@nodes/ui";
   import type { Writable } from "svelte/store";
@@ -7,6 +8,13 @@
     [key: string]: Nested | NodeInput;
   }
 
+  export let id: string;
+
+  $: expandedDetails = localStore<Record<string, boolean>>(
+    `nodes.settings.expanded.${id}`,
+    {},
+  );
+
   export let settings: Nested;
   export let store: Writable<Record<string, any>>;
   export let depth = 0;
@@ -36,7 +44,11 @@
         {/if}
       </div>
     {:else}
-      <details>
+      {#if depth > 0}
+        <hr />
+      {/if}
+
+      <details bind:open={$expandedDetails[key]}>
         <summary>{settings[key]?.__title || key}</summary>
         <div class="content">
           <svelte:self settings={settings[key]} {store} depth={depth + 1} />
@@ -50,11 +62,11 @@
   summary {
     cursor: pointer;
     user-select: none;
+    margin-bottom: 1em;
   }
   details {
-    padding: 1rem;
-    box-sizing: border-box;
-    border-bottom: solid thin var(--outline);
+    padding: 1em;
+    padding-bottom: 0;
   }
 
   .input {
@@ -69,6 +81,7 @@
   .input-boolean {
     display: flex;
     flex-direction: row;
+    align-items: center;
   }
   .input-boolean > label {
     order: 2;
@@ -84,4 +97,12 @@
   .first-level > details {
     border: none;
   }
+  hr {
+    position: absolute;
+    margin: 0;
+    left: 0;
+    right: 0;
+    border: none;
+    border-bottom: solid thin var(--outline);
+  }
 </style>

app/src/lib/settings/Settings.svelte

@@ -90,6 +90,7 @@
         {:else}
           <div class="flex flex-col">
             <NestedSettings
+              id={$activePanel}
               settings={constructNested(panels[$activePanel])}
               store={panels[$activePanel].settings}
             />
@@ -125,6 +126,7 @@
 
   .content {
     background: var(--layer-1);
+    position: relative;
   }
 
   .tabs {

app/src/lib/settings/app-settings.ts

@@ -47,22 +47,6 @@ export const AppSettingTypes = {
       value: true
     }
   },
-  stressTest: {
-    __title: "Stress Test",
-    amount: {
-      type: "integer",
-      min: 2,
-      max: 15
-    },
-    loadGrid: {
-      type: "button",
-      label: "Load Grid"
-    },
-    loadTree: {
-      type: "button",
-      label: "Load Tree"
-    },
-  },
   debug: {
     wireframe: {
       type: "boolean",
@@ -74,6 +58,22 @@ export const AppSettingTypes = {
       label: "Show Indices",
       value: false,
     },
+    stressTest: {
+      __title: "Stress Test",
+      amount: {
+        type: "integer",
+        min: 2,
+        max: 15
+      },
+      loadGrid: {
+        type: "button",
+        label: "Load Grid"
+      },
+      loadTree: {
+        type: "button",
+        label: "Load Tree"
+      },
+    },
   }
 }
 

app/src/routes/+page.svelte

@@ -14,12 +14,13 @@
   import NodeStore from "$lib/node-store/NodeStore.svelte";
   import type { GraphManager } from "$lib/graph-interface/graph-manager";
   import { setContext } from "svelte";
-  import { decodeNestedArray } from "@nodes/utils";
+  import { decodeNestedArray, encodeNestedArray } from "@nodes/utils";
 
   const nodeRegistry = new RemoteNodeRegistry("");
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
 
   globalThis.decode = decodeNestedArray;
+  globalThis.encode = encodeNestedArray;
 
   let res: Int32Array;
 
@@ -82,15 +83,17 @@
       types: Record<string, unknown>;
     }>,
   ) {
-    settings.general.definition.stressTest.loadGrid.callback = function () {
-      const store = get(settings.general.settings);
-      graph = templates.grid(store.amount, store.amount);
-    };
+    settings.general.definition.debug.stressTest.loadGrid.callback =
+      function () {
+        const store = get(settings.general.settings);
+        graph = templates.grid(store.amount, store.amount);
+      };
 
-    settings.general.definition.stressTest.loadTree.callback = function () {
-      const store = get(settings.general.settings);
-      graph = templates.tree(store.amount);
-    };
+    settings.general.definition.debug.stressTest.loadTree.callback =
+      function () {
+        const store = get(settings.general.settings);
+        graph = templates.tree(store.amount);
+      };
 
     settings.graph = {
       icon: "i-tabler-chart-bar",