feat: init

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -1,8 +1,8 @@
 import type { NodeInstance, Socket } from "@nodarium/types";
 import { getContext, setContext } from "svelte";
-import { SvelteSet } from "svelte/reactivity";
+import { SvelteMap, SvelteSet } from "svelte/reactivity";
 import type { GraphManager } from "./graph-manager.svelte";
-import type { OrthographicCamera } from "three";
+import type { Mesh, OrthographicCamera, Vector3 } from "three";
 
 
 const graphStateKey = Symbol("graph-state");
@@ -46,6 +46,8 @@ export class GraphState {
   width = $state(100);
   height = $state(100);
 
+  edgeGeometries = new SvelteMap<string, { geo: Mesh, points: Vector3[] }>();
+
   wrapper = $state<HTMLDivElement>(null!);
   rect: DOMRect = $derived(
     (this.wrapper && this.width && this.height) ? this.wrapper.getBoundingClientRect() : new DOMRect(0, 0, 0, 0),
@@ -97,6 +99,14 @@ export class GraphState {
 
   isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";
 
+  setEdgeGeometry(edgeId: string, edgeGeometry: { geo: Mesh, points: Vector3[] }) {
+    this.edgeGeometries.set(edgeId, edgeGeometry);
+  }
+
+  removeEdgeGeometry(edgeId: string) {
+    this.edgeGeometries.delete(edgeId);
+  }
+
   updateNodePosition(node: NodeInstance) {
     if (
       node.state.x === node.position[0] &&

app/src/lib/graph-interface/graph/events.ts

@@ -112,16 +112,38 @@ export class FileDropEventManager {
 }
 
 
+class EdgeInteractionManager {
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState) { };
+
+  handleMouseDown() {
+    const edges = this.graph.edges;
+    console.log(edges)
+  }
+
+  handleMouseMove() {
+  }
+
+  handleMouseUp() {
+  }
+}
+
+
 export class MouseEventManager {
 
+  edgeInteractionManager: EdgeInteractionManager
 
   constructor(
     private graph: GraphManager,
     private state: GraphState
-  ) { }
+  ) {
 
+    this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
+  }
 
   handleMouseUp(event: MouseEvent) {
+    this.edgeInteractionManager.handleMouseUp();
     this.state.isPanning = false;
     if (!this.state.mouseDown) return;
 
@@ -312,6 +334,7 @@ export class MouseEventManager {
         this.state.activeNodeId = clickedNodeId;
         this.state.clearSelection();
       }
+      this.edgeInteractionManager.handleMouseDown();
     } else if (event.ctrlKey) {
       this.state.boxSelection = true;
     }
@@ -397,6 +420,7 @@ export class MouseEventManager {
 
     // here we are handling dragging of nodes
     if (this.state.activeNodeId !== -1 && this.state.mouseDownNodeId !== -1) {
+      this.edgeInteractionManager.handleMouseMove();
       const node = this.graph.getNode(this.state.activeNodeId);
       if (!node || event.buttons !== 1) return;