feat: initial node groups

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

@@ -3,13 +3,14 @@
   import type { NodeInstance } from '@nodarium/types';
   import { T } from '@threlte/core';
   import { type Mesh } from 'three';
-  import { getGraphState } from '../graph-state.svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
   import { colors } from '../graph/colors.svelte';
   import { getNodeHeight, getParameterHeight } from '../helpers/nodeHelpers';
   import NodeFrag from './Node.frag';
   import NodeVert from './Node.vert';
   import NodeHtml from './NodeHTML.svelte';
 
+  const graph = getGraphManager();
   const graphState = getGraphState();
 
   type Props = {
@@ -18,7 +19,7 @@
   };
   let { node = $bindable(), inView }: Props = $props();
 
-  const nodeType = $derived(node.state.type!);
+  const nodeType = $derived(graph.getNodeType(node)!);
 
   const isActive = $derived(graphState.activeNodeId === node.id);
   const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -40,7 +41,11 @@
 
   let meshRef: Mesh | undefined = $state();
 
-  const height = getNodeHeight(node.state.type!);
+  const height = $derived(getNodeHeight(nodeType));
+
+  if (node.type.startsWith('__internal/')) {
+    $inspect({ node, nodeType, height, sectionHeights });
+  }
 
   const zoom = $derived(graphState.cameraPosition[2]);
 

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import type { NodeInstance } from '@nodarium/types';
-  import { getGraphState } from '../graph-state.svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
   import NodeHeader from './NodeHeader.svelte';
   import NodeParameter from './NodeParameter.svelte';
 
   let ref: HTMLDivElement;
 
+  const graph = getGraphManager();
   const graphState = getGraphState();
 
   type Props = {
@@ -30,8 +31,12 @@
   const zOffset = Math.random() - 0.5;
   const zLimit = 2 - zOffset;
 
-  const parameters = Object.entries(node.state?.type?.inputs || {}).filter(
-    (p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
+  const nodeType = $derived(graph.getNodeType(node));
+
+  const parameters = $derived(
+    Object.entries(nodeType?.inputs || {}).filter(
+      (p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
+    ) || {}
   );
 
   $effect(() => {

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

@@ -3,7 +3,6 @@
   import type { NodeInstance, Socket } from '@nodarium/types';
   import { getGraphState } from '../graph-state.svelte';
   import { createNodePath } from '../helpers/index.js';
-  import { getSocketPosition } from '../helpers/nodeHelpers';
 
   const graphState = getGraphState();
 
@@ -16,7 +15,7 @@
       graphState.setDownSocket?.({
         node,
         index: 0,
-        position: getSocketPosition?.(node, 0)
+        position: graphState.getSocketPosition?.(node, 0)
       });
     }
   }

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

@@ -2,7 +2,7 @@
   import type { NodeInput, NodeInstance, Socket } from '@nodarium/types';
   import { getGraphManager, getGraphState } from '../graph-state.svelte';
   import { createNodePath } from '../helpers';
-  import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
+  import { getParameterHeight } from '../helpers/nodeHelpers';
   import NodeInputEl from './NodeInput.svelte';
 
   type Props = {
@@ -19,7 +19,7 @@
 
   let { node = $bindable(), input, id, isLast }: Props = $props();
 
-  const nodeType = $derived(node.state.type!);
+  const nodeType = $derived(graph.getNodeType(node)!);
 
   const inputType = $derived(nodeType.inputs?.[id]);
 
@@ -32,7 +32,7 @@
     graphState.setDownSocket({
       node,
       index: id,
-      position: getSocketPosition(node, id)
+      position: graphState.getSocketPosition(node, id)
     });
   }