From 9241700ada5693b5becedb93ab5bf98a4f80d8a4 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Tue, 12 Mar 2024 18:47:50 +0100
Subject: [PATCH] refactor: move view logic inside graph.svelte

---
 frontend/src/lib/components/Camera.svelte     |   2 +-
 frontend/src/lib/components/Node.svelte       |  11 +-
 frontend/src/lib/components/NodeHeader.svelte |  10 +-
 .../src/lib/components/NodeParameter.svelte   |  59 +++-
 .../components/background/Background.svelte   |  20 +-
 frontend/src/lib/components/debug/index.ts    |   7 +-
 .../lib/components/{ => edges}/Edge.svelte    |   0
 .../lib/components/edges/FloatingEdge.svelte  |   8 +
 .../src/lib/components/graph/Graph.svelte     | 329 ++++++++++--------
 .../src/lib/components/graph/GraphView.svelte |  72 ++++
 frontend/src/lib/components/graph/context.ts  |   4 +-
 frontend/src/lib/components/graph/state.ts    | 129 -------
 frontend/src/lib/graph-manager.ts             | 151 +++++---
 frontend/src/lib/types/index.ts               |   9 +
 frontend/src/routes/+page.svelte              |  34 +-
 frontend/src/routes/app.css                   |   4 +
 16 files changed, 465 insertions(+), 384 deletions(-)
 rename frontend/src/lib/components/{ => edges}/Edge.svelte (100%)
 create mode 100644 frontend/src/lib/components/edges/FloatingEdge.svelte
 create mode 100644 frontend/src/lib/components/graph/GraphView.svelte
 delete mode 100644 frontend/src/lib/components/graph/state.ts

diff --git a/frontend/src/lib/components/Camera.svelte b/frontend/src/lib/components/Camera.svelte
index d586ff8..1b8a475 100644
--- a/frontend/src/lib/components/Camera.svelte
+++ b/frontend/src/lib/components/Camera.svelte
@@ -17,7 +17,6 @@
     position[0] = camera.position.x;
     position[1] = camera.position.z;
     position[2] = camera.zoom;
-
     saveControls();
   }
 
@@ -57,6 +56,7 @@
 
 <T.OrthographicCamera bind:ref={camera} position.y={10} makeDefault>
   <OrbitControls
+    args={[camera, window]}
     bind:ref={controls}
     enableZoom={true}
     zoomSpeed={2}
diff --git a/frontend/src/lib/components/Node.svelte b/frontend/src/lib/components/Node.svelte
index 0025eff..fa0f091 100644
--- a/frontend/src/lib/components/Node.svelte
+++ b/frontend/src/lib/components/Node.svelte
@@ -2,15 +2,13 @@
   import type { Node } from "$lib/types";
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
-  import { getGraphManager } from "./graph/context";
 
   export let node: Node;
-
-  const graph = getGraphManager();
-
   export let inView = true;
 
-  const type = graph.getNodeType(node.type);
+  export let possibleSocketIds: null | Set<string> = null;
+
+  const type = node?.tmp?.type;
 
   const parameters = Object.entries(type?.inputs || {});
 </script>
@@ -18,7 +16,6 @@
 <div
   class="node"
   class:in-view={inView}
-  class:is-moving={node?.tmp?.isMoving}
   data-node-id={node.id}
   style={`--nx:${node.position.x * 10}px;
           --ny: ${node.position.y * 10}px`}
@@ -28,9 +25,9 @@
   {#each parameters as [key, value], i}
     <NodeParameter
       {node}
+      {possibleSocketIds}
       id={key}
       index={i}
-      value={node?.props?.[key]}
       input={value}
       isLast={i == parameters.length - 1}
     />
diff --git a/frontend/src/lib/components/NodeHeader.svelte b/frontend/src/lib/components/NodeHeader.svelte
index 8c173e8..4e4f36e 100644
--- a/frontend/src/lib/components/NodeHeader.svelte
+++ b/frontend/src/lib/components/NodeHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Node } from "$lib/types";
+  import { getContext } from "svelte";
   import { getGraphManager, getGraphState } from "./graph/context";
 
   export let node: Node;
@@ -34,16 +35,15 @@
       Z`.replace(/\s+/g, " ");
   }
 
+  const setDownSocket = getContext("setDownSocket");
+
   function handleMouseDown(event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
-    state.setMouseDown({
-      x: node.position.x + 5,
-      y: node.position.y + 0.625,
+    setDownSocket({
       node,
-      type: node.tmp?.type?.outputs?.[0] || "",
       index: 0,
-      isInput: false,
+      position: [node.position.x + 5, node.position.y + 0.625],
     });
   }
 </script>
diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte
index fb767ed..99d8ef8 100644
--- a/frontend/src/lib/components/NodeParameter.svelte
+++ b/frontend/src/lib/components/NodeParameter.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
   import type { NodeInput } from "$lib/types";
   import type { Node } from "$lib/types";
-  import { getGraphState } from "./graph/context";
+  import { getContext } from "svelte";
 
   export let node: Node;
-  export let value: unknown;
   export let input: NodeInput;
   export let id: string;
   export let index: number;
 
-  export let isLast = false;
+  export let possibleSocketIds: null | Set<string> = null;
 
-  const state = getGraphState();
+  export let isLast = false;
 
   function createPath({ depth = 8, height = 20, y = 50 } = {}) {
     let corner = isLast ? 5 : 0;
@@ -46,21 +45,24 @@
       Z`.replace(/\s+/g, " ");
   }
 
+  const setDownSocket = getContext("setDownSocket");
+
   function handleMouseDown(ev: MouseEvent) {
     ev.preventDefault();
     ev.stopPropagation();
-    state.setMouseDown({
-      x: node.position.x,
-      y: node.position.y + 2.5 + index * 2.5,
+    setDownSocket({
       node,
-      index: index,
-      type: node?.tmp?.type?.inputs?.[id].type || "",
-      isInput: true,
+      index: id,
+      position: [node.position.x, node.position.y + 2.5 + index * 2.5],
     });
   }
 </script>
 
-<div class="wrapper">
+<div
+  class="wrapper"
+  class:disabled={possibleSocketIds &&
+    !possibleSocketIds.has(`${node.id}-${id}`)}
+>
   <div class="content">
     <label>{id}</label>
 
@@ -69,11 +71,16 @@
 
   {#if node.tmp?.type?.inputs?.[id].internal !== true}
     <div
-      class="click-target"
+      class="large target"
+      on:mousedown={handleMouseDown}
+      role="button"
+      tabindex="0"
+    />
+    <div
+      class="small target"
       on:mousedown={handleMouseDown}
       role="button"
       tabindex="0"
-      style={`background: var(--node-hovered-in-${node.tmp?.type?.inputs?.[id].type}`}
     />
   {/if}
 
@@ -85,6 +92,7 @@
     preserveAspectRatio="none"
     style={`
       --path: path("${createPath({ depth: 5, height: 15, y: 50 })}");
+      --hover-path-disabled: path("${createPath({ depth: 0, height: 15, y: 50 })}");
       --hover-path: path("${createPath({ depth: 8, height: 24, y: 50 })}");
     `}
   >
@@ -100,14 +108,24 @@
     transform: translateY(-0.5px);
   }
 
-  .click-target {
+  .target {
     position: absolute;
+    border-radius: 50%;
+  }
+
+  .small.target {
     width: 6px;
     height: 6px;
-    border-radius: 50%;
     top: 9.5px;
     left: -3px;
-    opacity: 0.1;
+  }
+
+  .large.target {
+    width: 15px;
+    height: 15px;
+    top: 5px;
+    left: -7.5px;
+    cursor: unset;
   }
 
   .content {
@@ -142,7 +160,6 @@
   svg {
     position: absolute;
     box-sizing: border-box;
-    /* pointer-events: none; */
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -160,7 +177,11 @@
     d: var(--path);
   }
 
-  .click-target:hover + svg path {
-    d: var(--hover-path) !important;
+  :global(.hovering-sockets) .large:hover ~ svg path {
+    d: var(--hover-path);
+  }
+
+  .disabled svg path {
+    d: var(--hover-path-disabled) !important;
   }
 </style>
diff --git a/frontend/src/lib/components/background/Background.svelte b/frontend/src/lib/components/background/Background.svelte
index 684ce88..d6ff2db 100644
--- a/frontend/src/lib/components/background/Background.svelte
+++ b/frontend/src/lib/components/background/Background.svelte
@@ -8,9 +8,7 @@
   export let minZoom = 4;
   export let maxZoom = 150;
 
-  export let cx = 0;
-  export let cy = 0;
-  export let cz = 30;
+  export let cameraPosition: [number, number, number] = [0, 1, 0];
 
   export let width = globalThis?.innerWidth || 100;
   export let height = globalThis?.innerHeight || 100;
@@ -19,12 +17,16 @@
   let bh = 2;
 
   $: if (width && height) {
-    bw = width / cz;
-    bh = height / cz;
+    bw = width / cameraPosition[2];
+    bh = height / cameraPosition[2];
   }
 </script>
 
-<T.Group position.x={cx} position.z={cy} position.y={-1.0}>
+<T.Group
+  position.x={cameraPosition[0]}
+  position.z={cameraPosition[1]}
+  position.y={-1.0}
+>
   <T.Mesh rotation.x={-Math.PI / 2} position.y={0.2} scale.x={bw} scale.y={bh}>
     <T.PlaneGeometry args={[1, 1]} />
     <T.ShaderMaterial
@@ -54,9 +56,9 @@
           value: 100,
         },
       }}
-      uniforms.cx.value={cx}
-      uniforms.cy.value={cy}
-      uniforms.cz.value={cz}
+      uniforms.cx.value={cameraPosition[0]}
+      uniforms.cy.value={cameraPosition[1]}
+      uniforms.cz.value={cameraPosition[2]}
       uniforms.width.value={width}
       uniforms.height.value={height}
     />
diff --git a/frontend/src/lib/components/debug/index.ts b/frontend/src/lib/components/debug/index.ts
index b539c9b..6db9502 100644
--- a/frontend/src/lib/components/debug/index.ts
+++ b/frontend/src/lib/components/debug/index.ts
@@ -1,12 +1,11 @@
-import type { Vector3 } from "three";
+import { Vector3 } from "three";
 import { lines, points } from "./store";
 
-export function debugPosition(pos: Vector3) {
+export function debugPosition(x: number, y: number) {
   points.update((p) => {
-    p.push(pos);
+    p.push(new Vector3(x, 1, y));
     return p;
   });
-
 }
 
 export function clear() {
diff --git a/frontend/src/lib/components/Edge.svelte b/frontend/src/lib/components/edges/Edge.svelte
similarity index 100%
rename from frontend/src/lib/components/Edge.svelte
rename to frontend/src/lib/components/edges/Edge.svelte
diff --git a/frontend/src/lib/components/edges/FloatingEdge.svelte b/frontend/src/lib/components/edges/FloatingEdge.svelte
new file mode 100644
index 0000000..427c26d
--- /dev/null
+++ b/frontend/src/lib/components/edges/FloatingEdge.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Edge from "./Edge.svelte";
+
+  export let from: { x: number; y: number };
+  export let to: { x: number; y: number };
+</script>
+
+<Edge {from} {to} />
diff --git a/frontend/src/lib/components/graph/Graph.svelte b/frontend/src/lib/components/graph/Graph.svelte
index e68c94f..b262182 100644
--- a/frontend/src/lib/components/graph/Graph.svelte
+++ b/frontend/src/lib/components/graph/Graph.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import Edge from "../Edge.svelte";
-  import { HTML } from "@threlte/extras";
-  import Node from "../Node.svelte";
   import { animate, lerp, snapToGrid } from "$lib/helpers";
   import Debug from "../debug/Debug.svelte";
   import { OrthographicCamera } from "three";
   import Background from "../background/Background.svelte";
   import type { GraphManager } from "$lib/graph-manager";
   import { setContext } from "svelte";
-  import { GraphState } from "./state";
   import Camera from "../Camera.svelte";
+  import GraphView from "./GraphView.svelte";
   import type { Node as NodeType } from "$lib/types";
+  import FloatingEdge from "../edges/FloatingEdge.svelte";
+  import * as debug from "../debug";
+  import type { Socket } from "$lib/types";
 
   export let graph: GraphManager;
   setContext("graphManager", graph);
@@ -18,44 +18,131 @@
   const nodes = graph.nodes;
   const edges = graph.edges;
 
-  const state = new GraphState(graph);
-  setContext("graphState", state);
-  const mouse = state.mouse;
-  const dimensions = state.dimensions;
-  const mouseDown = state.mouseDown;
-  const cameraPosition = state.cameraPosition;
-  const cameraBounds = state.cameraBounds;
-  const activeNodeId = state.activeNodeId;
-  const hoveredSocket = state.hoveredSocket;
-
   let camera: OrthographicCamera;
-
   const minZoom = 4;
   const maxZoom = 150;
+  let mousePosition = [0, 0];
+  let mouseDown: null | [number, number] = null;
+  let cameraPosition: [number, number, number] = [0, 1, 0];
+  let width = 100;
+  let height = 100;
 
-  $: edgePositions = $edges.map((edge) => {
-    const index = Object.keys(edge[2].tmp?.type?.inputs || {}).indexOf(edge[3]);
-    return [
-      edge[0].position.x + 5,
-      edge[0].position.y + 0.625 + edge[1] * 2.5,
-      edge[2].position.x,
-      edge[2].position.y + 2.5 + index * 2.5,
-    ];
+  let activeNodeId = -1;
+  let downSocket: null | Socket = null;
+  let possibleSockets: Socket[] = [];
+  $: possibleSocketIds = possibleSockets?.length
+    ? new Set(possibleSockets.map((s) => `${s.node.id}-${s.index}`))
+    : null;
+  let hoveredSocket: Socket | null = null;
+
+  $: cameraBounds = [
+    cameraPosition[0] - width / cameraPosition[2],
+    cameraPosition[0] + width / cameraPosition[2],
+    cameraPosition[1] - height / cameraPosition[2],
+    cameraPosition[1] + height / cameraPosition[2],
+  ];
+
+  setContext("isNodeInView", (node: NodeType) => {
+    return (
+      node.position.x > cameraBounds[0] &&
+      node.position.x < cameraBounds[1] &&
+      node.position.y > cameraBounds[2] &&
+      node.position.y < cameraBounds[3]
+    );
   });
 
-  function handleMouseMove(event: MouseEvent) {
-    state.setMouseFromEvent(event);
+  setContext("setDownSocket", (socket: Socket) => {
+    downSocket = socket;
 
-    if (!$mouseDown) return;
-    if (state?.possibleSockets?.length) {
+    let { node, index, position } = socket;
+
+    // remove existing edge
+    if (typeof index === "string") {
+      const edges = graph.getEdgesToNode(node);
+      console.log({ edges });
+      for (const edge of edges) {
+        if (edge[3] === index) {
+          node = edge[0];
+          index = edge[1];
+          position = getSocketPosition({ node, index });
+          graph.removeEdge(edge);
+          break;
+        }
+      }
+    }
+
+    mouseDown = position;
+    downSocket = {
+      node,
+      index,
+      position,
+    };
+
+    possibleSockets = graph
+      .getPossibleSockets(downSocket)
+      .map(([node, index]) => {
+        return {
+          node,
+          index,
+          position: getSocketPosition({ node, index }),
+        };
+      });
+  });
+
+  function getSnapLevel() {
+    const z = cameraPosition[2];
+    if (z > 66) {
+      return 8;
+    } else if (z > 55) {
+      return 4;
+    } else if (z > 11) {
+      return 2;
+    } else {
+    }
+    return 1;
+  }
+
+  function getSocketPosition(
+    socket: Omit<Socket, "position">,
+  ): [number, number] {
+    if (typeof socket.index === "number") {
+      return [
+        socket.node.position.x + 5,
+        socket.node.position.y + 0.625 + 2.5 * socket.index,
+      ];
+    } else {
+      const _index = Object.keys(socket.node.tmp?.type?.inputs || {}).indexOf(
+        socket.index,
+      );
+      return [
+        socket.node.position.x,
+        socket.node.position.y + 2.5 + 2.5 * _index,
+      ];
+    }
+  }
+
+  function setMouseFromEvent(event: MouseEvent) {
+    const x = event.clientX;
+    const y = event.clientY;
+
+    mousePosition = [
+      cameraPosition[0] + (x - width / 2) / cameraPosition[2],
+      cameraPosition[1] + (y - height / 2) / cameraPosition[2],
+    ];
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    setMouseFromEvent(event);
+
+    if (!mouseDown) return;
+
+    if (possibleSockets?.length) {
       let smallestDist = 1000;
       let _socket;
-      for (const socket of state.possibleSockets) {
-        const posX = socket.position[0];
-        const posY = socket.position[1];
-
+      for (const socket of possibleSockets) {
         const dist = Math.sqrt(
-          (posX - $mouse[0]) ** 2 + (posY - $mouse[1]) ** 2,
+          (socket.position[0] - mousePosition[0]) ** 2 +
+            (socket.position[1] - mousePosition[1]) ** 2,
         );
         if (dist < smallestDist) {
           smallestDist = dist;
@@ -64,28 +151,27 @@
       }
 
       if (_socket && smallestDist < 0.3) {
-        state.setMouse(_socket.position[0], _socket.position[1]);
-        state.hoveredSocket.set(_socket);
+        mousePosition = _socket.position;
+        hoveredSocket = _socket;
       } else {
-        state.hoveredSocket.set(null);
+        hoveredSocket = null;
       }
     }
 
-    if ($activeNodeId === -1) return;
-
-    const node = graph.getNode($activeNodeId);
+    if (activeNodeId === -1) return;
 
+    const node = graph.getNode(activeNodeId);
     if (!node) return;
 
-    if (!node.tmp) node.tmp = {};
+    node.tmp = node.tmp || {};
     node.tmp.isMoving = true;
 
     let newX =
       (node?.tmp?.downX || 0) +
-      (event.clientX - $mouseDown.x) / $cameraPosition[2];
+      (event.clientX - mouseDown[0]) / cameraPosition[2];
     let newY =
       (node?.tmp?.downY || 0) +
-      (event.clientY - $mouseDown.y) / $cameraPosition[2];
+      (event.clientY - mouseDown[1]) / cameraPosition[2];
 
     if (event.ctrlKey) {
       const snapLevel = getSnapLevel();
@@ -100,54 +186,32 @@
     edges.set($edges);
   }
 
-  function handleMouseDown(ev: MouseEvent) {
-    if ($mouseDown) return;
+  function handleMouseDown(event: MouseEvent) {
+    if (mouseDown) return;
 
-    for (const node of ev.composedPath()) {
+    for (const node of event.composedPath()) {
       let _activeNodeId = (node as unknown as HTMLElement)?.getAttribute?.(
         "data-node-id",
       )!;
       if (_activeNodeId) {
-        $activeNodeId = parseInt(_activeNodeId, 10);
+        activeNodeId = parseInt(_activeNodeId, 10);
         break;
       }
     }
-    if ($activeNodeId < 0) return;
+    if (activeNodeId < 0) return;
 
-    $mouseDown = { x: ev.clientX, y: ev.clientY };
-    const node = graph.getNode($activeNodeId);
+    mouseDown = [event.clientX, event.clientY];
+    const node = graph.getNode(activeNodeId);
     if (!node) return;
     node.tmp = node.tmp || {};
     node.tmp.downX = node.position.x;
     node.tmp.downY = node.position.y;
   }
 
-  function getSnapLevel() {
-    const z = $cameraPosition[2];
-    if (z > 66) {
-      return 8;
-    } else if (z > 55) {
-      return 4;
-    } else if (z > 11) {
-      return 2;
-    } else {
-    }
-    return 1;
-  }
+  function handleMouseUp(event: MouseEvent) {
+    if (event.button !== 0) return;
 
-  function isNodeInView(node: any) {
-    return (
-      node.position.x > $cameraBounds[0] &&
-      node.position.x < $cameraBounds[1] &&
-      node.position.y > $cameraBounds[2] &&
-      node.position.y < $cameraBounds[3]
-    );
-  }
-
-  function handleMouseUp(ev: MouseEvent) {
-    if (ev.button !== 0) return;
-
-    const node = graph.getNode($activeNodeId);
+    const node = graph.getNode(activeNodeId);
     if (node) {
       node.tmp = node.tmp || {};
       node.tmp.isMoving = false;
@@ -157,41 +221,39 @@
       animate(500, (a: number) => {
         node.position.x = lerp(node.position.x, fx, a);
         node.position.y = lerp(node.position.y, fy, a);
+        nodes.set($nodes);
+        edges.set($edges);
         if (node?.tmp?.isMoving) {
           return false;
         }
-        nodes.set($nodes);
-        edges.set($edges);
       });
-      nodes.set($nodes);
-      edges.set($edges);
-    } else if ($hoveredSocket && $mouseDown && $mouseDown?.node) {
-      if ($hoveredSocket.isInput) {
-        const newEdge: [NodeType, number, NodeType, string] = [
-          $hoveredSocket.node,
-          $hoveredSocket.index || 0,
-          $mouseDown.node,
-          Object.keys($mouseDown?.node?.tmp?.type?.inputs || {})[
-            $mouseDown?.index || 0
-          ],
-        ];
-        $edges = [...$edges, newEdge];
+    } else if (hoveredSocket && downSocket) {
+      console.log({ hoveredSocket, downSocket });
+      if (
+        typeof hoveredSocket.index === "number" &&
+        typeof downSocket.index === "string"
+      ) {
+        graph.createEdge(
+          hoveredSocket.node,
+          hoveredSocket.index || 0,
+          downSocket.node,
+          downSocket.index,
+        );
       } else {
-        const newEdge: [NodeType, number, NodeType, string] = [
-          $mouseDown.node,
-          $mouseDown?.index || 0,
-          $hoveredSocket.node,
-          Object.keys($hoveredSocket.node?.tmp?.type?.inputs || {})[
-            $hoveredSocket.index
-          ],
-        ];
-        $edges = [...$edges, newEdge];
+        graph.createEdge(
+          downSocket.node,
+          downSocket.index || 0,
+          hoveredSocket.node,
+          hoveredSocket.index,
+        );
       }
     }
 
-    $mouseDown = false;
-    $hoveredSocket = null;
-    $activeNodeId = -1;
+    mouseDown = null;
+    downSocket = null;
+    possibleSockets = [];
+    hoveredSocket = null;
+    activeNodeId = -1;
   }
 </script>
 
@@ -201,67 +263,30 @@
   on:mousedown={handleMouseDown}
 />
 
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
+
 <Debug />
 
-<Camera bind:camera {maxZoom} {minZoom} bind:position={$cameraPosition} />
+<Camera bind:camera {maxZoom} {minZoom} bind:position={cameraPosition} />
 
-<Background
-  cx={$cameraPosition[0]}
-  cy={$cameraPosition[1]}
-  cz={$cameraPosition[2]}
-  {maxZoom}
-  {minZoom}
-  width={$dimensions[0]}
-  height={$dimensions[1]}
-/>
+<Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
 
 {#if $status === "idle"}
-  {#each edgePositions as [x1, y1, x2, y2]}
-    <Edge
-      from={{
-        x: x1,
-        y: y1,
-      }}
-      to={{
-        x: x2,
-        y: y2,
-      }}
+  {#if downSocket}
+    <FloatingEdge
+      from={{ x: downSocket.position[0], y: downSocket.position[1] }}
+      to={{ x: mousePosition[0], y: mousePosition[1] }}
     />
-  {/each}
-
-  {#if $mouseDown && $mouseDown?.node}
-    <Edge from={$mouseDown} to={{ x: $mouse[0], y: $mouse[1] }} />
   {/if}
-
-  <HTML transform={false}>
-    <div
-      role="tree"
-      tabindex="0"
-      class="wrapper"
-      class:zoom-small={$cameraPosition[2] < 10}
-      style={`--cz: ${$cameraPosition[2]}; ${$mouseDown ? `--node-hovered-${$mouseDown.isInput ? "out" : "in"}-${$mouseDown.type}: red;` : ""}`}
-    >
-      {#each $nodes as node}
-        <Node {node} inView={$cameraPosition && isNodeInView(node)} />
-      {/each}
-    </div>
-  </HTML>
+  <GraphView
+    {nodes}
+    {edges}
+    {cameraPosition}
+    {possibleSocketIds}
+    {downSocket}
+  />
 {:else if $status === "loading"}
   <span>Loading</span>
 {:else if $status === "error"}
   <span>Error</span>
 {/if}
-
-<style>
-  :global(body) {
-    overflow: hidden;
-  }
-
-  .wrapper {
-    position: absolute;
-    z-index: 100;
-    width: 0px;
-    height: 0px;
-    transform: scale(calc(var(--cz) * 0.1));
-  }
-</style>
diff --git a/frontend/src/lib/components/graph/GraphView.svelte b/frontend/src/lib/components/graph/GraphView.svelte
new file mode 100644
index 0000000..cdaf228
--- /dev/null
+++ b/frontend/src/lib/components/graph/GraphView.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Edge as EdgeType, Node as NodeType } from "$lib/types";
+  import { HTML } from "@threlte/extras";
+  import Edge from "../edges/Edge.svelte";
+  import Node from "../Node.svelte";
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  export let nodes: Writable<Map<number, NodeType>>;
+  export let edges: Writable<EdgeType[]>;
+
+  export let cameraPosition = [0, 1, 0];
+  export let downSocket: null | { node: NodeType; index: number | string } =
+    null;
+  export let possibleSocketIds: null | Set<string> = null;
+
+  const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView");
+
+  function getEdgePosition(edge: EdgeType) {
+    const index = Object.keys(edge[2].tmp?.type?.inputs || {}).indexOf(edge[3]);
+    return [
+      edge[0].position.x + 5,
+      edge[0].position.y + 0.625 + edge[1] * 2.5,
+      edge[2].position.x,
+      edge[2].position.y + 2.5 + index * 2.5,
+    ];
+  }
+</script>
+
+{#each $edges as edge}
+  {@const pos = getEdgePosition(edge)}
+  {@const [x1, y1, x2, y2] = pos}
+  <Edge
+    from={{
+      x: x1,
+      y: y1,
+    }}
+    to={{
+      x: x2,
+      y: y2,
+    }}
+  />
+{/each}
+
+<HTML transform={false}>
+  <div
+    role="tree"
+    tabindex="0"
+    class="wrapper"
+    class:zoom-small={cameraPosition[2] < 10}
+    class:hovering-sockets={downSocket}
+    style={`--cz: ${cameraPosition[2]}`}
+  >
+    {#each $nodes.values() as node}
+      <Node
+        {node}
+        inView={cameraPosition && isNodeInView(node)}
+        {possibleSocketIds}
+      />
+    {/each}
+  </div>
+</HTML>
+
+<style>
+  .wrapper {
+    position: absolute;
+    z-index: 100;
+    width: 0px;
+    height: 0px;
+    transform: scale(calc(var(--cz) * 0.1));
+  }
+</style>
diff --git a/frontend/src/lib/components/graph/context.ts b/frontend/src/lib/components/graph/context.ts
index 7eeff01..20e5666 100644
--- a/frontend/src/lib/components/graph/context.ts
+++ b/frontend/src/lib/components/graph/context.ts
@@ -1,11 +1,11 @@
 import type { GraphManager } from "$lib/graph-manager";
 import { getContext } from "svelte";
-import type { GraphState } from "./graph-state";
+import type { GraphView } from "./view";
 
 export function getGraphManager(): GraphManager {
   return getContext("graphManager");
 }
 
-export function getGraphState(): GraphState {
+export function getGraphState(): GraphView {
   return getContext("graphState");
 }
diff --git a/frontend/src/lib/components/graph/state.ts b/frontend/src/lib/components/graph/state.ts
deleted file mode 100644
index f9ebd9b..0000000
--- a/frontend/src/lib/components/graph/state.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { GraphManager } from "$lib/graph-manager";
-import type { Node } from "$lib/types";
-import { derived, get, writable, type Writable } from "svelte/store";
-import * as debug from "../debug";
-
-
-type Socket = {
-  node: Node;
-  index: number;
-  isInput: boolean;
-  type: string;
-  position: [number, number];
-}
-
-export class GraphState {
-
-  activeNodeId: Writable<number> = writable(-1);
-  dimensions: Writable<[number, number]> = writable([100, 100]);
-  mouse: Writable<[number, number]> = writable([0, 0]);
-  mouseDown: Writable<false | ({ x: number, y: number } & Omit<Socket, "position">)> = writable(false);
-  cameraPosition: Writable<[number, number, number]> = writable([0, 1, 0]);
-  cameraBounds = derived([this.cameraPosition, this.dimensions], ([_cameraPosition, [width, height]]) => {
-    return [
-      _cameraPosition[0] - width / _cameraPosition[2],
-      _cameraPosition[0] + width / _cameraPosition[2],
-      _cameraPosition[1] - height / _cameraPosition[2],
-      _cameraPosition[1] + height / _cameraPosition[2],
-    ] as const
-  });
-
-  possibleSockets: Socket[] = [];
-  hoveredSocket: Writable<Socket | null> = writable(null);
-
-  constructor(private graph: GraphManager) {
-    if (globalThis?.innerWidth && globalThis?.innerHeight) {
-      this.dimensions.set([window.innerWidth, window.innerHeight]);
-      globalThis.addEventListener("resize", () => {
-        this.dimensions.set([window.innerWidth, window.innerHeight]);
-      })
-    }
-  }
-
-  setMouse(x: number, y: number) {
-    this.mouse.set([x, y]);
-  }
-
-  setMouseFromEvent(event: MouseEvent) {
-    const x = event.clientX;
-    const y = event.clientY;
-
-    const cameraPosition = get(this.cameraPosition);
-    const dimensions = get(this.dimensions);
-
-    this.mouse.set([
-      cameraPosition[0] + (x - dimensions[0] / 2) / cameraPosition[2],
-      cameraPosition[1] + (y - dimensions[1] / 2) / cameraPosition[2],
-    ]);
-  }
-
-  getSocketPosition(node: Node, index: number | string) {
-    const isOutput = typeof index === "number";
-    if (isOutput) {
-      return [node.position.x + 5, node.position.y + 0.625 + 2.5 * index] as const;
-    } else {
-      const _index = Object.keys(node.tmp?.type?.inputs || {}).indexOf(index);
-      return [node.position.x, node.position.y + 2.5 + 2.5 * _index] as const;
-    }
-  }
-
-  setMouseDown(opts: ({ x: number, y: number } & Omit<Socket, "position">) | false) {
-
-    if (!opts) {
-      this.mouseDown.set(false);
-      return;
-    }
-
-    let { x, y, node, index, isInput, type } = opts;
-
-    if (node && index !== undefined && isInput !== undefined) {
-
-      debug.clear();
-
-      // remove existing edge
-      if (isInput) {
-        const edges = this.graph.getEdgesToNode(node);
-        const key = Object.keys(node.tmp?.type?.inputs || {})[index];
-        for (const edge of edges) {
-          if (edge[3] === key) {
-            node = edge[2];
-            index = 0;
-            const pos = this.getSocketPosition(edge[0], index);
-            x = pos[0];
-            y = pos[1];
-            isInput = false;
-            this.graph.removeEdge(edge);
-            break;
-          }
-        }
-      }
-
-      this.mouseDown.set({ x, y, node, index, isInput, type });
-
-      this.possibleSockets = this.graph.getPossibleSockets(node, index, isInput).map(([node, index]) => {
-        if (isInput) {
-          const key = Object.keys(node.tmp?.type?.inputs || {})[index];
-          return {
-            node,
-            index,
-            isInput,
-            type: node.tmp?.type?.inputs?.[key].type || "",
-            position: [node.position.x + 5, node.position.y + 0.625 + 2.5 * index]
-          }
-        } else {
-          return {
-            node,
-            index,
-            isInput,
-            type: node.tmp?.type?.outputs?.[index] || "",
-            position: [node.position.x, node.position.y + 2.5 + 2.5 * index]
-          }
-        }
-      });
-    }
-
-    console.log("possibleSockets", this.possibleSockets);
-
-  }
-
-}
diff --git a/frontend/src/lib/graph-manager.ts b/frontend/src/lib/graph-manager.ts
index 01f1c45..b75fe7a 100644
--- a/frontend/src/lib/graph-manager.ts
+++ b/frontend/src/lib/graph-manager.ts
@@ -1,5 +1,5 @@
-import { get, writable, type Writable } from "svelte/store";
-import type { Graph, NodeRegistry as INodeRegistry, NodeType, Node, Edge } from "./types";
+import { writable, type Writable } from "svelte/store";
+import type { Graph, NodeRegistry as INodeRegistry, NodeType, Node, Edge, Socket } from "./types";
 
 const nodeTypes: NodeType[] = [
   {
@@ -38,8 +38,8 @@ export class GraphManager {
 
   status: Writable<"loading" | "idle" | "error"> = writable("loading");
 
-  private _nodes: Node[] = [];
-  nodes: Writable<Node[]> = writable([]);
+  private _nodes: Map<number, Node> = new Map();
+  nodes: Writable<Map<number, Node>> = writable(new Map());
   private _edges: Edge[] = [];
   edges: Writable<Edge[]> = writable([]);
 
@@ -54,10 +54,10 @@ export class GraphManager {
 
   async load() {
 
-    const nodes = this.graph.nodes;
+    const nodes = new Map(this.graph.nodes.map(node => [node.id, node]));
 
-    for (const node of nodes) {
-      const nodeType = this.getNodeType(node.type);
+    for (const node of nodes.values()) {
+      const nodeType = this.nodeRegistry.getNode(node.type);
       if (!nodeType) {
         console.error(`Node type not found: ${node.type}`);
         this.status.set("error");
@@ -67,39 +67,110 @@ export class GraphManager {
       node.tmp.type = nodeType;
     }
 
-    this.nodes.set(nodes);
+
     this.edges.set(this.graph.edges.map((edge) => {
-      const from = this._nodes.find((node) => node.id === edge[0]);
-      const to = this._nodes.find((node) => node.id === edge[2]);
-      if (!from || !to) return;
+      const from = nodes.get(edge[0]);
+      const to = nodes.get(edge[2]);
+      if (!from || !to) {
+        console.error("Edge references non-existing node");
+        return;
+      };
+      from.tmp = from.tmp || {};
+      from.tmp.children = from.tmp.children || [];
+      from.tmp.children.push(to);
+      to.tmp = to.tmp || {};
+      to.tmp.parents = to.tmp.parents || [];
+      to.tmp.parents.push(from);
       return [from, edge[1], to, edge[3]] as const;
     })
       .filter(Boolean) as unknown as [Node, number, Node, string][]
     );
 
+    this.nodes.set(nodes);
+    console.log(this._nodes);
+
 
     this.status.set("idle");
   }
 
 
-  getNode(id: number) {
-    return this._nodes.find((node) => node.id === id);
+  getAllNodes() {
+    return Array.from(this._nodes.values());
   }
 
-  getPossibleSockets(node: Node, socketIndex: number, isInput: boolean): [Node, number][] {
+  getNode(id: number) {
+    return this._nodes.get(id);
+  }
 
-    const nodeType = this.getNodeType(node.type);
+  getChildrenOfNode(node: Node) {
+    const children = [];
+    const stack = node.tmp?.children?.slice(0);
+    while (stack?.length) {
+      const child = stack.pop();
+      if (!child) continue;
+      children.push(child);
+      stack.push(...child.tmp?.children || []);
+    }
+    return children;
+  }
+
+  createEdge(from: Node, fromSocket: number, to: Node, toSocket: string) {
+
+
+    const existingEdges = this.getEdgesToNode(to);
+
+    // check if this exact edge already exists
+    const existingEdge = existingEdges.find(e => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket);
+    if (existingEdge) {
+      console.log("Edge already exists");
+      console.log(existingEdge)
+      return;
+    };
+
+    // check if socket types match
+    const fromSocketType = from.tmp?.type?.outputs?.[fromSocket];
+    const toSocketType = to.tmp?.type?.inputs?.[toSocket]?.type;
+
+    if (fromSocketType !== toSocketType) {
+      console.error(`Socket types do not match: ${fromSocketType} !== ${toSocketType}`);
+      return;
+    }
+
+    this.edges.update((edges) => {
+      return [...edges.filter(e => e[2].id !== to.id || e[3] !== toSocket), [from, fromSocket, to, toSocket]];
+    });
+  }
+
+  getParentsOfNode(node: Node) {
+    const parents = [];
+    const stack = node.tmp?.parents?.slice(0);
+    while (stack?.length) {
+      const parent = stack.pop();
+      if (!parent) continue;
+      parents.push(parent);
+      stack.push(...parent.tmp?.parents || []);
+    }
+    return parents;
+  }
+
+  getPossibleSockets({ node, index }: Socket): [Node, string | number][] {
+
+    const nodeType = node?.tmp?.type;
     if (!nodeType) return [];
 
-    const nodes = this._nodes.filter(n => n.id !== node.id);
 
-    const sockets: [Node, number][] = []
-    if (isInput) {
+    const sockets: [Node, string | number][] = []
+    // if index is a string, we are an input looking for outputs
+    if (typeof index === "string") {
 
-      const ownType = Object.values(nodeType?.inputs || {})[socketIndex].type;
+      // filter out self and child nodes
+      const children = new Set(this.getChildrenOfNode(node).map(n => n.id));
+      const nodes = this.getAllNodes().filter(n => n.id !== node.id && !children.has(n.id));
+
+      const ownType = nodeType?.inputs?.[index].type;
 
       for (const node of nodes) {
-        const nodeType = this.getNodeType(node.type);
+        const nodeType = node?.tmp?.type;
         const inputs = nodeType?.outputs;
         if (!inputs) continue;
         for (let index = 0; index < inputs.length; index++) {
@@ -109,31 +180,33 @@ export class GraphManager {
         }
       }
 
-    } else {
+    } else if (typeof index === "number") {
+      // if index is a number, we are an output looking for inputs
 
-      const ownType = nodeType.outputs?.[socketIndex];
+      // filter out self and parent nodes
+      const parents = new Set(this.getParentsOfNode(node).map(n => n.id));
+      const nodes = this.getAllNodes().filter(n => n.id !== node.id && !parents.has(n.id));
+
+      // get edges from this socket
+      const edges = new Map(this.getEdgesFromNode(node).filter(e => e[1] === index).map(e => [e[2].id, e[3]]));
+
+      const ownType = nodeType.outputs?.[index];
 
       for (const node of nodes) {
-        const nodeType = this.getNodeType(node.type);
-        const inputs = nodeType?.inputs;
-        const entries = Object.values(inputs || {});
-        entries.map((input, index) => {
-          if (input.type === ownType) {
-            sockets.push([node, index]);
+        const inputs = node?.tmp?.type?.inputs;
+        if (!inputs) continue;
+        for (const key in inputs) {
+          if (inputs[key].type === ownType && edges.get(node.id) !== key) {
+            sockets.push([node, key]);
           }
-        });
+        }
       }
-
     }
 
     return sockets;
 
   }
 
-  getNodeType(id: string): NodeType {
-    return this.nodeRegistry.getNode(id)!;
-  }
-
   removeEdge(edge: Edge) {
     const id0 = edge[0].id;
     const sid0 = edge[1];
@@ -148,8 +221,8 @@ export class GraphManager {
     return this._edges
       .filter((edge) => edge[2].id === node.id)
       .map((edge) => {
-        const from = this._nodes.find((node) => node.id === edge[0].id);
-        const to = this._nodes.find((node) => node.id === edge[2].id);
+        const from = this.getNode(edge[0].id);
+        const to = this.getNode(edge[2].id);
         if (!from || !to) return;
         return [from, edge[1], to, edge[3]] as const;
       })
@@ -158,10 +231,10 @@ export class GraphManager {
 
   getEdgesFromNode(node: Node) {
     return this._edges
-      .filter((edge) => edge[0] === node.id)
+      .filter((edge) => edge[0].id === node.id)
       .map((edge) => {
-        const from = this._nodes.find((node) => node.id === edge[0]);
-        const to = this._nodes.find((node) => node.id === edge[2]);
+        const from = this.getNode(edge[0].id);
+        const to = this.getNode(edge[2].id);
         if (!from || !to) return;
         return [from, edge[1], to, edge[3]] as const;
       })
diff --git a/frontend/src/lib/types/index.ts b/frontend/src/lib/types/index.ts
index 639ac5b..70d9f2f 100644
--- a/frontend/src/lib/types/index.ts
+++ b/frontend/src/lib/types/index.ts
@@ -6,6 +6,8 @@ export type Node = {
   type: string;
   props?: Record<string, any>,
   tmp?: {
+    parents?: Node[],
+    children?: Node[],
     type?: NodeType;
     downX?: number;
     downY?: number;
@@ -31,6 +33,13 @@ export type NodeType = {
   }
 }
 
+export type Socket = {
+  node: Node;
+  index: number | string;
+  position: [number, number];
+};
+
+
 export interface NodeRegistry {
   getNode: (id: string) => NodeType | undefined;
 }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index f3a1c92..bf10d1d 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -10,26 +10,26 @@
   const graph = GraphManager.createEmptyGraph({ width: 12, height: 12 });
   graph.load();
 
-  onMount(async () => {
-    try {
-      const res = await invoke("greet", { name: "Dude" });
-      console.log({ res });
-    } catch (error) {
-      console.log(error);
-    }
-
-    try {
-      const res2 = await invoke("run_nodes", {});
-      console.log({ res2 });
-    } catch (error) {
-      console.log(error);
-    }
-  });
+  // onMount(async () => {
+  //   try {
+  //     const res = await invoke("greet", { name: "Dude" });
+  //     console.log({ res });
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  //
+  //   try {
+  //     const res2 = await invoke("run_nodes", {});
+  //     console.log({ res2 });
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  // });
 </script>
 
 <div>
-  <Canvas shadows={false} renderMode="on-demand">
-    <PerfMonitor />
+  <Canvas shadows={false} renderMode="on-demand" autoRender={true}>
+    <!-- <PerfMonitor /> -->
     <Graph {graph} />
   </Canvas>
 </div>
diff --git a/frontend/src/routes/app.css b/frontend/src/routes/app.css
index 6e439ab..0cb0dc3 100644
--- a/frontend/src/routes/app.css
+++ b/frontend/src/routes/app.css
@@ -23,3 +23,7 @@
 :root {
   font-family: 'Fira Code', monospace;
 }
+
+body {
+  overflow: hidden;
+}