feat: node store interface

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

@@ -9,6 +9,7 @@
   import { Color, type Mesh } from "three";
   import NodeFrag from "./Node.frag";
   import NodeVert from "./Node.vert";
+  import NodeHtml from "./NodeHTML.svelte";
 
   export let node: Node;
   export let inView = true;
@@ -22,32 +23,20 @@
 
   const getNodeHeight = getContext<(n: string) => number>("getNodeHeight");
 
-  const type = node?.tmp?.type;
-
-  const zOffset = (node.tmp?.random || 0) * 0.5;
-  const zLimit = 2 - zOffset;
-
-  const parameters = Object.entries(type?.inputs || {})
-    .filter((p) => p[1].type !== "seed")
-    .filter((p) => !("setting" in p[1]));
-
-  let ref: HTMLDivElement;
   let meshRef: Mesh;
 
-  const height = getNodeHeight(node.type);
+  const height = getNodeHeight?.(node.type);
 
-  $: if (node && ref && meshRef) {
+  $: if (node && meshRef) {
     node.tmp = node.tmp || {};
-    node.tmp.ref = ref;
     node.tmp.mesh = meshRef;
-    updateNodePosition(node);
+    updateNodePosition?.(node);
   }
 
   onMount(() => {
     node.tmp = node.tmp || {};
-    node.tmp.ref = ref;
     node.tmp.mesh = meshRef;
-    updateNodePosition(node);
+    updateNodePosition?.(node);
   });
 </script>
 
@@ -83,51 +72,4 @@
   />
 </T.Mesh>
 
-<div
-  class="node"
-  class:active={isActive}
-  style:--cz={z + zOffset}
-  style:display={inView && z > zLimit ? "block" : "none"}
-  class:selected={isSelected}
-  class:out-of-view={!inView}
-  data-node-id={node.id}
-  bind:this={ref}
->
-  <NodeHeader {node} />
-
-  {#each parameters as [key, value], i}
-    <NodeParameter
-      bind:node
-      id={key}
-      input={value}
-      isLast={i == parameters.length - 1}
-    />
-  {/each}
-</div>
-
-<style>
-  .node {
-    position: absolute;
-    box-sizing: border-box;
-    user-select: none !important;
-    cursor: pointer;
-    width: 200px;
-    color: var(--text-color);
-    transform: translate3d(var(--nx), var(--ny), 0);
-    z-index: 1;
-    opacity: calc((var(--cz) - 2.5) / 3.5);
-    font-weight: 300;
-    --stroke: var(--outline);
-    --stroke-width: 2px;
-  }
-
-  .node.active {
-    --stroke: var(--active);
-    --stroke-width: 2px;
-  }
-
-  .node.selected {
-    --stroke: var(--selected);
-    --stroke-width: 2px;
-  }
-</style>
+<NodeHtml {node} {inView} {isActive} {isSelected} {z} />

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Node } from "@nodes/types";
+  import NodeHeader from "./NodeHeader.svelte";
+  import NodeParameter from "./NodeParameter.svelte";
+  import { getContext, onMount } from "svelte";
+  export let isActive = false;
+  export let isSelected = false;
+  export let inView = true;
+  export let z = 2;
+
+  let ref: HTMLDivElement;
+  export let node: Node;
+  export let position = "absolute";
+
+  const zOffset = (node.tmp?.random || 0) * 0.5;
+  const zLimit = 2 - zOffset;
+
+  const type = node?.tmp?.type;
+
+  const parameters = Object.entries(type?.inputs || {})
+    .filter((p) => p[1].type !== "seed")
+    .filter((p) => !("setting" in p[1]));
+
+  const updateNodePosition =
+    getContext<(n: Node) => void>("updateNodePosition");
+
+  $: if (node && ref) {
+    node.tmp = node.tmp || {};
+    node.tmp.ref = ref;
+    updateNodePosition?.(node);
+  }
+
+  onMount(() => {
+    node.tmp = node.tmp || {};
+    node.tmp.ref = ref;
+    updateNodePosition?.(node);
+  });
+</script>
+
+<div
+  class="node {position}"
+  class:active={isActive}
+  style:--cz={z + zOffset}
+  style:display={inView && z > zLimit ? "block" : "none"}
+  class:selected={isSelected}
+  class:out-of-view={!inView}
+  data-node-id={node.id}
+  bind:this={ref}
+>
+  <NodeHeader {node} />
+
+  {#each parameters as [key, value], i}
+    <NodeParameter
+      bind:node
+      id={key}
+      input={value}
+      isLast={i == parameters.length - 1}
+    />
+  {/each}
+</div>
+
+<style>
+  .node {
+    box-sizing: border-box;
+    user-select: none !important;
+    cursor: pointer;
+    width: 200px;
+    color: var(--text-color);
+    transform: translate3d(var(--nx), var(--ny), 0);
+    z-index: 1;
+    opacity: calc((var(--cz) - 2.5) / 3.5);
+    font-weight: 300;
+    --stroke: var(--outline);
+    --stroke-width: 2px;
+  }
+
+  .node.active {
+    --stroke: var(--active);
+    --stroke-width: 2px;
+  }
+
+  .node.selected {
+    --stroke: var(--selected);
+    --stroke-width: 2px;
+  }
+</style>

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

@@ -14,10 +14,10 @@
   function handleMouseDown(event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
-    setDownSocket({
+    setDownSocket?.({
       node,
       index: 0,
-      position: getSocketPosition(node, 0),
+      position: getSocketPosition?.(node, 0),
     });
   }
 

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

@@ -15,8 +15,10 @@
 
   $: if (node?.props?.[id] !== value) {
     node.props = { ...node.props, [id]: value };
-    graph.save();
-    graph.execute();
+    if (graph) {
+      graph.save();
+      graph.execute();
+    }
   }
 </script>
 

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

@@ -20,8 +20,8 @@
   const socketId = `${node.id}-${id}`;
 
   const graph = getGraphManager();
-  const graphId = graph.id;
-  const inputSockets = graph.inputSockets;
+  const graphId = graph?.id;
+  const inputSockets = graph?.inputSockets;
 
   const elementId = `input-${Math.random().toString(36).substring(7)}`;
 
@@ -34,10 +34,10 @@
   function handleMouseDown(ev: MouseEvent) {
     ev.preventDefault();
     ev.stopPropagation();
-    setDownSocket({
+    setDownSocket?.({
       node,
       index: id,
-      position: getSocketPosition(node, id),
+      position: getSocketPosition?.(node, id),
     });
   }
 
@@ -76,7 +76,7 @@
   class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
-    <div class="content" class:disabled={$inputSockets.has(socketId)}>
+    <div class="content" class:disabled={$inputSockets?.has(socketId)}>
       {#if inputType.label !== false}
         <label for={elementId}>{input.label || id}</label>
       {/if}