chore: move some more components to svelte 5

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

@@ -17,7 +17,7 @@
     inView: boolean;
     z: number;
   };
-  const { node, inView, z }: Props = $props();
+  let { node = $bindable(), inView, z }: Props = $props();
 
   const isActive = $derived(graphState.activeNodeId === node.id);
   const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -41,13 +41,11 @@
   const height = getNodeHeight?.(node.type);
 
   $effect(() => {
-    node.tmp = node.tmp || {};
     node.tmp.mesh = meshRef;
-    updateNodePosition?.(node);
   });
 
   onMount(() => {
-    node.tmp = node.tmp || {};
+    if (!node.tmp) node.tmp = {};
     node.tmp.mesh = meshRef;
     updateNodePosition?.(node);
   });
@@ -79,4 +77,4 @@
   />
 </T.Mesh>
 
-<NodeHtml {node} {inView} {isActive} {isSelected} {z} />
+<NodeHtml bind:node {inView} {isActive} {isSelected} {z} />

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

@@ -59,7 +59,7 @@
 
   {#each parameters as [key, value], i}
     <NodeParameter
-      bind:node
+      {node}
       id={key}
       input={value}
       isLast={i == parameters.length - 1}

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

@@ -3,7 +3,7 @@
   import type { Node, Socket } from "@nodes/types";
   import { getContext } from "svelte";
 
-  export let node: Node;
+  const { node = $bindable<Node>() } = $props();
 
   const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
   const getSocketPosition =
@@ -33,14 +33,14 @@
     rightBump,
     aspectRatio,
   });
-  const pathDisabled = createNodePath({
-    depth: 0,
-    height: 15,
-    y: 50,
-    cornerTop,
-    rightBump,
-    aspectRatio,
-  });
+  // const pathDisabled = createNodePath({
+  //   depth: 0,
+  //   height: 15,
+  //   y: 50,
+  //   cornerTop,
+  //   rightBump,
+  //   aspectRatio,
+  // });
   const pathHover = createNodePath({
     depth: 8.5,
     height: 50,
@@ -59,7 +59,7 @@
     class="click-target"
     role="button"
     tabindex="0"
-    on:mousedown={handleMouseDown}
+    onmousedown={handleMouseDown}
   ></div>
   <svg
     xmlns="http://www.w3.org/2000/svg"

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

@@ -17,7 +17,7 @@
     isLast?: boolean;
   };
 
-  const { node = $bindable(), input, id, isLast }: Props = $props();
+  const { node, input, id, isLast }: Props = $props();
 
   const inputType = node?.tmp?.type?.inputs?.[id]!;
 
@@ -26,7 +26,6 @@
   const graph = getGraphManager();
   const graphState = getGraphState();
   const graphId = graph?.id;
-  const inputSockets = graph?.inputSockets;
 
   const elementId = `input-${Math.random().toString(36).substring(7)}`;
 
@@ -83,7 +82,7 @@
   class:disabled={!graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
-    <div class="content" class:disabled={$inputSockets?.has(socketId)}>
+    <div class="content" class:disabled={graph.inputSockets?.has(socketId)}>
       {#if inputType.label !== ""}
         <label for={elementId}>{input.label || id}</label>
       {/if}