wip

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

@@ -29,8 +29,9 @@ function areSocketsCompatible(
   output: string | undefined,
   inputs: string | (string | undefined)[] | undefined
 ) {
+  if (output === '*') return true;
   if (Array.isArray(inputs) && output) {
-    return inputs.includes(output);
+    return inputs.includes('*') || inputs.includes(output);
   }
   return inputs === output;
 }

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)) {
-      if (key === 'seed') continue;
-      if (!node.inputs) continue;
-      if (node?.inputs?.[key] === undefined) continue;
-      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;
+    for (const key in node.inputs) {
+      const h = this.getParameterHeight(node, key);
+      console.log({ key, h });
+      height += h;
     }
 
     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 (
-      node.position[0] > this.cameraBounds[0] - width
+    const inView = 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(isShape ? 200 : 100);
-
-  const graphState = getGraphState();
-  const graphId = graph?.id;
-
-  const elementId = `input-${Math.random().toString(36).substring(7)}`;
+  const height = $derived(graphState.getParameterHeight(nodeType, id));
 
   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/node-registry/node-registry-client.ts

@@ -15,8 +15,15 @@ export class RemoteNodeRegistry implements NodeRegistry {
 
   constructor(
     private url: string,
-    public cache?: AsyncCache<ArrayBuffer | string>
-  ) {}
+    public cache?: AsyncCache<ArrayBuffer | string>,
+    nodes?: NodeDefinition[]
+  ) {
+    if (nodes?.length) {
+      for (const node of nodes) {
+        this.nodes.set(node.id, node);
+      }
+    }
+  }
 
   async fetchJson(url: string, skipCache = false) {
     const finalUrl = `${this.url}/${url}`;

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

@@ -89,7 +89,7 @@
   };
 </script>
 
-{#if appSettings.value.debug.showPerformancePanel}
+{#if appSettings.value.debug.advancedMode}
   <SmallPerformanceViewer {fps} store={perf} />
 {/if}
 

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/lib/settings/app-settings.svelte.ts

@@ -64,14 +64,9 @@ export const AppSettingTypes = {
       label: 'Show Indices',
       value: false
     },
-    showPerformancePanel: {
+    advancedMode: {
       type: 'boolean',
-      label: 'Show Performance Panel',
-      value: false
-    },
-    showBenchmarkPanel: {
-      type: 'boolean',
-      label: 'Show Benchmark Panel',
+      label: 'Advanced Mode',
       value: false
     },
     showVertices: {
@@ -84,11 +79,6 @@ export const AppSettingTypes = {
       label: 'Show Stem Lines',
       value: false
     },
-    showGraphJson: {
-      type: 'boolean',
-      label: 'Show Graph Source',
-      value: false
-    },
     cache: {
       title: 'Cache',
       useRuntimeCache: {

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';
@@ -32,7 +33,8 @@
   const { data } = $props();
 
   const registryCache = new IndexDBCache('node-registry');
-  const nodeRegistry = new RemoteNodeRegistry('', registryCache);
+
+  const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
   const workerRuntime = new WorkerRuntimeExecutor();
   const runtimeCache = new MemoryRuntimeCache();
   const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
@@ -216,7 +218,7 @@
         <Panel
           id="performance"
           title="Performance"
-          hidden={!appSettings.value.debug.showPerformancePanel}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--brand-speedtest] bg-red-400"
         >
           {#if $performanceStore}
@@ -229,7 +231,7 @@
         <Panel
           id="graph-source"
           title="Graph Source"
-          hidden={!appSettings.value.debug.showGraphJson}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--code]"
         >
           <GraphSource graph={pm.graph ?? manager?.serialize()} />
@@ -237,7 +239,7 @@
         <Panel
           id="benchmark"
           title="Benchmark"
-          hidden={!appSettings.value.debug.showBenchmarkPanel}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--graph] bg-red-400"
         >
           <BenchmarkPanel run={randomGenerate} />

packages/types/src/inputs.ts

@@ -89,6 +89,11 @@ export const NodeInputPathSchema = z.object({
   value: z.array(z.number()).optional()
 });
 
+export const NodeInputAnySchema = z.object({
+  ...DefaultOptionsSchema.shape,
+  type: z.literal('*')
+});
+
 export const NodeInputSchema = z.union([
   NodeInputSeedSchema,
   NodeInputBooleanSchema,
@@ -100,7 +105,8 @@ export const NodeInputSchema = z.union([
   NodeInputSeedSchema,
   NodeInputVec3Schema,
   NodeInputGeometrySchema,
-  NodeInputPathSchema
+  NodeInputPathSchema,
+  NodeInputAnySchema
 ]);
 
 export type NodeInput = z.infer<typeof NodeInputSchema>;

packages/ui/src/lib/app.css

@@ -80,6 +80,7 @@ html {
   --neutral-100: #e7e7e7;
   --neutral-200: #cecece;
   --neutral-300: #7c7c7c;
+  --neutral-350: #808080;
   --neutral-400: #2d2d2d;
   --neutral-500: #171717;
   --neutral-800: #111111;
@@ -107,7 +108,7 @@ body {
 
 html.theme-light {
   --color-text: var(--neutral-800);
-  --color-outline: var(--neutral-300);
+  --color-outline: var(--neutral-350);
   --color-layer-0: var(--neutral-050);
   --color-layer-1: var(--neutral-100);
   --color-layer-2: var(--neutral-200);

packages/ui/src/lib/inputs/InputNumber.svelte

@@ -126,7 +126,7 @@
     <button
       aria-label="step down"
       onmousedown={stepDown}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-left] block h-full w-full text-outline!"></span>
     </button>
@@ -161,7 +161,7 @@
     <button
       aria-label="step up"
       onmousedown={stepUp}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-right] block h-full w-full text-outline!"></span>
     </button>

packages/ui/src/routes/+page.svelte

@@ -73,7 +73,7 @@
         <InputCheckbox bind:value={mirrorShape} />
         <p>mirror</p>
       </label>
-      <p>{JSON.stringify(points)}</p>
+      <p class="max-w-full overflow-hidden">{JSON.stringify(points)}</p>
     {/snippet}
     <div style:width="300px">
       <InputShape bind:value={points} mirror={mirrorShape} />

packages/ui/src/routes/Section.svelte

@@ -12,7 +12,7 @@
 <section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
-    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%] whitespace-pre overflow-hidden text-clip">
+    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%]">
       {#if header}
         {@render header()}
       {:else}