From ef479d0557979f6aad97d922ace62144576ccbd8 Mon Sep 17 00:00:00 2001
From: Max Richter <git@max-richter.dev>
Date: Tue, 2 Dec 2025 17:27:23 +0100
Subject: [PATCH] chore: update

---
 .../graph-interface/components/AddMenu.svelte | 24 ++---
 app/src/lib/graph-interface/edges/Edge.svelte | 32 +++----
 .../graph-interface/edges/FloatingEdge.svelte | 12 ---
 .../lib/graph-interface/graph/Graph.svelte    | 91 +++++++++++++------
 app/src/lib/graph-interface/node/Node.svelte  | 19 ++--
 5 files changed, 95 insertions(+), 83 deletions(-)
 delete mode 100644 app/src/lib/graph-interface/edges/FloatingEdge.svelte

diff --git a/app/src/lib/graph-interface/components/AddMenu.svelte b/app/src/lib/graph-interface/components/AddMenu.svelte
index 835a6d5..906d731 100644
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -4,6 +4,12 @@
   import type { Node, NodeType } from "@nodarium/types";
   import { getGraphManager, getGraphState } from "../graph/state.svelte";
 
+  type Props = {
+    onnode: (n: Node) => void;
+  };
+
+  const { onnode }: Props = $props();
+
   const graph = getGraphManager();
   const graphState = getGraphState();
 
@@ -35,24 +41,12 @@
 
   function handleNodeCreation(nodeType: Node["type"]) {
     if (!graphState.addMenuPosition) return;
-
-    const newNode = graph.createNode({
+    onnode?.({
+      id: -1,
       type: nodeType,
-      position: graphState.addMenuPosition,
+      position: [...graphState.addMenuPosition],
       props: {},
     });
-
-    const edgeInputSocket = graphState.activeSocket;
-    if (edgeInputSocket && newNode) {
-      if (typeof edgeInputSocket.index === "number") {
-        graph.smartConnect(edgeInputSocket.node, newNode);
-      } else {
-        graph.smartConnect(newNode, edgeInputSocket.node);
-      }
-    }
-
-    graphState.activeSocket = null;
-    graphState.addMenuPosition = null;
   }
 
   function handleKeyDown(event: KeyboardEvent) {
diff --git a/app/src/lib/graph-interface/edges/Edge.svelte b/app/src/lib/graph-interface/edges/Edge.svelte
index 5c133b9..83c1660 100644
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -34,12 +34,14 @@
   import { appSettings } from "$lib/settings/app-settings.svelte";
 
   type Props = {
-    from: { x: number; y: number };
-    to: { x: number; y: number };
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
     z: number;
   };
 
-  const { from, to, z }: Props = $props();
+  const { x1, y1, x2, y2, z }: Props = $props();
 
   const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z)));
 
@@ -48,10 +50,9 @@
   let lastId: string | null = null;
 
   function update() {
-    const new_x = to.x - from.x;
-    const new_y = to.y - from.y;
-    const curveId = `${from.x}-${from.y}-${to.x}-${to.y}`;
-
+    const new_x = x2 - x1;
+    const new_y = y2 - y1;
+    const curveId = `${x1}-${y1}-${x2}-${y2}`;
     if (lastId === curveId) {
       return;
     }
@@ -79,15 +80,15 @@
   }
 
   $effect(() => {
-    if (from || to) {
+    if (x1 || x2 || y1 || y2) {
       update();
     }
   });
 </script>
 
 <T.Mesh
-  position.x={from.x}
-  position.z={from.y}
+  position.x={x1}
+  position.z={y1}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   material={circleMaterial}
@@ -96,8 +97,8 @@
 </T.Mesh>
 
 <T.Mesh
-  position.x={to.x}
-  position.z={to.y}
+  position.x={x2}
+  position.z={y2}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   material={circleMaterial}
@@ -105,11 +106,6 @@
   <T.CircleGeometry args={[0.5, 16]} />
 </T.Mesh>
 
-<T.Mesh
-  bind:ref={mesh}
-  position.x={from.x}
-  position.z={from.y}
-  position.y={0.1}
->
+<T.Mesh bind:ref={mesh} position.x={x1} position.z={y1} position.y={0.1}>
   <MeshLineMaterial width={thickness} color={lineColor} />
 </T.Mesh>
diff --git a/app/src/lib/graph-interface/edges/FloatingEdge.svelte b/app/src/lib/graph-interface/edges/FloatingEdge.svelte
deleted file mode 100644
index b65baac..0000000
--- a/app/src/lib/graph-interface/edges/FloatingEdge.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  import Edge from "./Edge.svelte";
-
-  type Props = {
-    from: { x: number; y: number };
-    to: { x: number; y: number };
-    z: number;
-  };
-  const { from, to, z }: Props = $props();
-</script>
-
-<Edge {from} {to} {z} />
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index 743d183..1966644 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Edge } from "@nodarium/types";
+  import type { Edge, Node } from "@nodarium/types";
   import { onMount } from "svelte";
   import { createKeyMap } from "../../helpers/createKeyMap";
   import AddMenu from "../components/AddMenu.svelte";
@@ -8,7 +8,6 @@
   import EdgeEl from "../edges/Edge.svelte";
   import NodeEl from "../node/Node.svelte";
   import Camera from "../components/Camera.svelte";
-  import FloatingEdge from "../edges/FloatingEdge.svelte";
   import { Canvas } from "@threlte/core";
   import HelpView from "../components/HelpView.svelte";
   import { getGraphManager, getGraphState } from "./state.svelte";
@@ -27,10 +26,6 @@
   const fileDropEvents = new FileDropEventManager(graph, graphState);
   const mouseEvents = new MouseEventManager(graph, graphState);
 
-  function getEdgeId(edge: Edge) {
-    return `${edge[0].id}-${edge[1]}-${edge[2].id}-${edge[3]}`;
-  }
-
   function getEdgePosition(edge: Edge) {
     const fromNode = graph.nodes.get(edge[0].id);
     const toNode = graph.nodes.get(edge[2].id);
@@ -45,6 +40,60 @@
     return [pos1[0], pos1[1], pos2[0], pos2[1]];
   }
 
+  function handleNodeCreation(node: Node) {
+    const newNode = graph.createNode({
+      type: node.type,
+      position: node.position,
+      props: node.props,
+    });
+    if (!newNode) return;
+
+    if (graphState.activeSocket) {
+      if (typeof graphState.activeSocket.index === "number") {
+        const socketType =
+          graphState.activeSocket.node.tmp?.type?.outputs?.[
+            graphState.activeSocket.index
+          ];
+
+        const input = Object.entries(newNode?.tmp?.type?.inputs || {}).find(
+          (inp) => inp[1].type === socketType,
+        );
+
+        if (input) {
+          graph.createEdge(
+            graphState.activeSocket.node,
+            graphState.activeSocket.index,
+            newNode,
+            input[0],
+          );
+        }
+      } else {
+        const socketType =
+          graphState.activeSocket.node.tmp?.type?.inputs?.[
+            graphState.activeSocket.index
+          ];
+
+        const output = newNode.tmp?.type?.outputs?.find((out) => {
+          if (socketType?.type === out) return true;
+          if (socketType?.accepts?.includes(out as any)) return true;
+          return false;
+        });
+
+        if (output) {
+          graph.createEdge(
+            newNode,
+            output.indexOf(output),
+            graphState.activeSocket.node,
+            graphState.activeSocket.index,
+          );
+        }
+      }
+    }
+
+    graphState.activeSocket = null;
+    graphState.addMenuPosition = null;
+  }
+
   onMount(() => {
     if (localStorage.getItem("cameraPosition")) {
       const cPosition = JSON.parse(localStorage.getItem("cameraPosition")!);
@@ -120,36 +169,22 @@
 
     {#if graph.status === "idle"}
       {#if graphState.addMenuPosition}
-        <AddMenu />
+        <AddMenu onnode={handleNodeCreation} />
       {/if}
 
       {#if graphState.activeSocket}
-        <FloatingEdge
+        <EdgeEl
           z={graphState.cameraPosition[2]}
-          from={{
-            x: graphState.activeSocket.position[0],
-            y: graphState.activeSocket.position[1],
-          }}
-          to={{
-            x: graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0],
-            y: graphState.edgeEndPosition?.[1] ?? graphState.mousePosition[1],
-          }}
+          x1={graphState.activeSocket.position[0]}
+          y1={graphState.activeSocket.position[1]}
+          x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
+          y2={graphState.edgeEndPosition?.[1] ?? graphState.mousePosition[1]}
         />
       {/if}
 
-      {#each graph.edges as edge (getEdgeId(edge))}
+      {#each graph.edges as edge}
         {@const [x1, y1, x2, y2] = getEdgePosition(edge)}
-        <EdgeEl
-          z={graphState.cameraPosition[2]}
-          from={{
-            x: x1,
-            y: y1,
-          }}
-          to={{
-            x: x2,
-            y: y2,
-          }}
-        />
+        <EdgeEl z={graphState.cameraPosition[2]} {x1} {y1} {x2} {y2} />
       {/each}
 
       <HTML transform={false}>
diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte
index 58abb5e..638d62d 100644
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Node } from "@nodarium/types";
   import { onMount } from "svelte";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph/state.svelte";
   import { T } from "@threlte/core";
   import { type Mesh } from "three";
   import NodeFrag from "./Node.frag";
@@ -21,15 +21,14 @@
 
   const isActive = $derived(graphState.activeNodeId === node.id);
   const isSelected = $derived(graphState.selectedNodes.has(node.id));
-  let strokeColor = $state(colors.selected);
-  $effect(() => {
-    appSettings.value.theme;
-    strokeColor = isSelected
-      ? colors.selected
-      : isActive
-        ? colors.active
-        : colors.outline;
-  });
+  const strokeColor = $derived(
+    appSettings.value.theme &&
+      (isSelected
+        ? colors.selected
+        : isActive
+          ? colors.active
+          : colors.outline),
+  );
 
   let meshRef: Mesh | undefined = $state();