wip

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -1,4 +1,4 @@
-import type { NodeInstance, Socket } from '@nodarium/types';
+import type { NodeDefinition, NodeInstance, Socket } from '@nodarium/types';
 import { getContext, setContext } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { OrthographicCamera, Vector3 } from 'three';
@@ -159,6 +159,24 @@ export class GraphState {
     return 1;
   }
 
+  getParameterHeight(node: NodeDefinition, inputKey: string) {
+    const input = node.inputs?.[inputKey];
+    if (!input) {
+      return 100;
+    }
+
+    if (input.type === 'shape' && input.external !== true) {
+      return 200;
+    }
+    if (
+      input?.label !== '' && !input.external && input.type !== 'path'
+      && input.type !== 'geometry'
+    ) {
+      return 100;
+    }
+    return 50;
+  }
+
   getSocketPosition(
     node: NodeInstance,
     index: string | number
@@ -169,10 +187,21 @@ export class GraphState {
         (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
       ];
     } else {
-      const _index = Object.keys(node.state?.type?.inputs || {}).indexOf(index);
+      let height = 5;
+      let nodeType = node.state.type!;
+      const inputs = nodeType.inputs || {};
+      for (const inputKey in inputs) {
+        const h = this.getParameterHeight(nodeType, inputKey) / 10;
+        console.log({ inputKey, h });
+        if (inputKey === index) {
+          height += h / 2;
+          break;
+        }
+        height += h;
+      }
       return [
         node?.state?.x ?? node.position[0],
-        (node?.state?.y ?? node.position[1]) + 10 + 10 * _index
+        (node?.state?.y ?? node.position[1]) + height
       ];
     }
   }
@@ -187,25 +216,16 @@ export class GraphState {
       return 5;
     }
     let height = 5;
+    console.log('Get Node Height', nodeTypeId);
 
-    for (const key of Object.keys(node.inputs)) {
+    for (const key in node.inputs) {
-      if (key === 'seed') continue;
+      const h = this.getParameterHeight(node, key);
-      if (!node.inputs) continue;
+      console.log({ key, h });
-      if (node?.inputs?.[key] === undefined) continue;
+      height += h;
-      if ('setting' in node.inputs[key]) continue;
-      if (node.inputs[key].hidden) continue;
-      if (
-        node.inputs[key].type === 'shape'
-        && node.inputs[key].external !== true
-        && node.inputs[key].internal !== false
-      ) {
-        height += 20;
-        continue;
-      }
-      height += 10;
     }
 
     this.nodeHeightCache[nodeTypeId] = height;
+    console.log(this.nodeHeightCache);
     return height;
   }
 
@@ -337,12 +357,12 @@ export class GraphState {
   isNodeInView(node: NodeInstance) {
     const height = this.getNodeHeight(node.type);
     const width = 20;
-    return (
+    const inView = node.position[0] > this.cameraBounds[0] - width
-      node.position[0] > this.cameraBounds[0] - width
       && node.position[0] < this.cameraBounds[1]
       && node.position[1] > this.cameraBounds[2] - height
-      && node.position[1] < this.cameraBounds[3]
+      && node.position[1] < this.cameraBounds[3];
-    );
+    console.log({ inView, height });
+    return inView;
   }
 
   openNodePalette() {

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { appSettings } from '$lib/settings/app-settings.svelte';
   import type { NodeInstance } from '@nodarium/types';
   import { getGraphState } from '../graph-state.svelte';
   import { createNodePath } from '../helpers/index.js';
@@ -47,6 +48,9 @@
 
 <div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
   <div class="content">
+    {#if appSettings.value.debug.advancedMode}
+      <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
+    {/if}
     {node.type.split('/').pop()}
   </div>
   <div

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -12,19 +12,18 @@
   };
 
   const graph = getGraphManager();
+  const graphState = getGraphState();
+  const graphId = graph?.id;
+  const elementId = `input-${Math.random().toString(36).substring(7)}`;
 
   let { node = $bindable(), input, id, isLast }: Props = $props();
 
-  const inputType = $derived(node?.state?.type?.inputs?.[id]);
+  const nodeType = $derived(node.state.type!);
+
+  const inputType = $derived(nodeType.inputs?.[id]);
 
   const socketId = $derived(`${node.id}-${id}`);
-  const isShape = $derived(input.type === 'shape' && input.external !== true);
+  const height = $derived(graphState.getParameterHeight(nodeType, id));
-  const height = $derived(isShape ? 200 : 100);
-
-  const graphState = getGraphState();
-  const graphId = graph?.id;
-
-  const elementId = `input-${Math.random().toString(36).substring(7)}`;
 
   function handleMouseDown(ev: MouseEvent) {
     ev.preventDefault();
@@ -36,7 +35,7 @@
     });
   }
 
-  const leftBump = $derived(node.state?.type?.inputs?.[id].internal !== true);
+  const leftBump = $derived(nodeType.inputs?.[id].internal !== true);
   const cornerBottom = $derived(isLast ? 5 : 0);
   const aspectRatio = 0.5;
 
@@ -74,10 +73,6 @@
       {#if inputType?.label !== ''}
         <label for={elementId} title={input.description}>{input.label || id}</label>
       {/if}
-      <span
-        class="absolute i-[tabler--help-circle] size-4 block top-2 right-2 opacity-30"
-        title={JSON.stringify(input, null, 2)}
-      ></span>
       {#if inputType?.external !== true}
         <NodeInputEl {graph} {elementId} bind:node {input} {id} />
       {/if}

app/src/lib/node-registry/debugNode.ts

@@ -0,0 +1,23 @@
+const data: Record<string, unknown> = {};
+
+export function clearDebugData() {
+  for (const key in data) {
+    delete data[key];
+  }
+}
+
+export function getDebugData() {
+  return { ...data };
+}
+
+export const debugNode = {
+  id: 'max/plantarium/debug',
+  inputs: {
+    a: {
+      type: '*'
+    }
+  },
+  execute(data: Int32Array) {
+    return data;
+  }
+} as const;

app/src/lib/runtime/runtime-executor.ts

@@ -59,6 +59,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
   private definitionMap: Map<string, NodeDefinition> = new Map();
 
   private seed = Math.floor(Math.random() * 100000000);
+  private debugData: Record<string, Int32Array> = {};
 
   perf?: PerformanceStore;
 
@@ -139,6 +140,14 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
       nodes.push(node);
     }
 
+    for (const node of graphNodes) {
+      if (node.type.endsWith('/debug')) {
+        node.state = node.state || {};
+        node.state.depth = Math.min(...node.state.parents.map(s => s.state.depth), 1) - 1;
+        nodes.push(node);
+      }
+    }
+
     return [outputNode, nodes] as const;
   }
 
@@ -146,6 +155,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     this.perf?.addPoint('runtime');
 
     let a = performance.now();
+    this.debugData = {};
 
     // Then we add some metadata to the graph
     const [outputNode, nodes] = await this.addMetaData(graph);
@@ -245,6 +255,9 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
         log.log(`Inputs:`, inputs);
         a = performance.now();
         results[node.id] = node_type.execute(encoded_inputs);
+        if (node_type.id.endsWith('/debug')) {
+          this.debugData[node.id] = results[node.id];
+        }
         log.log('Executed', node.type, node.id);
         b = performance.now();
 
@@ -273,6 +286,10 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     return res as unknown as Int32Array;
   }
 
+  getDebugData() {
+    return this.debugData;
+  }
+
   getPerformanceData() {
     return this.perf?.get();
   }

app/src/lib/runtime/worker-runtime-executor-backend.ts

@@ -1,3 +1,4 @@
+import { debugNode } from '$lib/node-registry/debugNode';
 import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
 import type { Graph } from '@nodarium/types';
 import { createPerformanceStore } from '@nodarium/utils';
@@ -5,7 +6,7 @@ import { MemoryRuntimeExecutor } from './runtime-executor';
 import { MemoryRuntimeCache } from './runtime-executor-cache';
 
 const indexDbCache = new IndexDBCache('node-registry');
-const nodeRegistry = new RemoteNodeRegistry('', indexDbCache);
+const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [debugNode]);
 
 const cache = new MemoryRuntimeCache();
 const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
@@ -43,3 +44,7 @@ export async function executeGraph(
 export function getPerformanceData() {
   return performanceStore.get();
 }
+
+export function getDebugData() {
+  return executor.getDebugData();
+}

app/src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import Grid from '$lib/grid';
   import { debounceAsyncFunction } from '$lib/helpers';
   import { createKeyMap } from '$lib/helpers/createKeyMap';
+  import { debugNode } from '$lib/node-registry/debugNode.js';
   import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
   import NodeStore from '$lib/node-store/NodeStore.svelte';
   import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
@@ -33,19 +34,6 @@
 
   const registryCache = new IndexDBCache('node-registry');
 
-  const debugNode = {
-    id: 'max/plantarium/debug',
-    inputs: {
-      a: {
-        type: '*'
-      }
-    },
-    execute(data: Int32Array) {
-      console.log({ data });
-      return data;
-    }
-  } as const;
-
   const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
   const workerRuntime = new WorkerRuntimeExecutor();
   const runtimeCache = new MemoryRuntimeCache();