feat: drop node on edge

Closes #13

app/src/lib/graph-interface/debug/Debug.svelte

@@ -1,19 +1,44 @@
 <script lang="ts">
-	import { MeshLineGeometry, MeshLineMaterial } from '@threlte/extras';
-	import { points, lines } from './store.js';
-	import { T } from '@threlte/core';
+  import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
+  import { points, lines, rects } from "./store.js";
+  import { T } from "@threlte/core";
+  import { Color } from "three";
 </script>
 
 {#each $points as point}
-	<T.Mesh position.x={point.x} position.y={point.y} position.z={point.z} rotation.x={-Math.PI / 2}>
-		<T.CircleGeometry args={[0.2, 32]} />
-		<T.MeshBasicMaterial color="red" />
-	</T.Mesh>
+  <T.Mesh
+    position.x={point.x}
+    position.y={point.y}
+    position.z={point.z}
+    rotation.x={-Math.PI / 2}
+  >
+    <T.CircleGeometry args={[0.2, 32]} />
+    <T.MeshBasicMaterial color="red" />
+  </T.Mesh>
+{/each}
+
+{#each $rects as rect, i}
+  <T.Mesh
+    position.x={(rect.minX + rect.maxX) / 2}
+    position.y={0}
+    position.z={(rect.minY + rect.maxY) / 2}
+    rotation.x={-Math.PI / 2}
+  >
+    <T.PlaneGeometry args={[rect.maxX - rect.minX, rect.maxY - rect.minY]} />
+    <T.MeshBasicMaterial
+      color={new Color().setHSL((i * 1.77) % 1, 1, 0.5)}
+      opacity={0.9}
+    />
+  </T.Mesh>
 {/each}
 
 {#each $lines as line}
-	<T.Mesh>
-		<MeshLineGeometry points={line} />
-		<MeshLineMaterial color="red" linewidth={1} attenuate={false} />
-	</T.Mesh>
+  <T.Mesh position.y={1}>
+    <MeshLineGeometry points={line.points} />
+    <MeshLineMaterial
+      color={line.color || "red"}
+      linewidth={1}
+      attenuate={false}
+    />
+  </T.Mesh>
 {/each}

app/src/lib/graph-interface/debug/index.ts

@@ -1,5 +1,7 @@
-import { Vector3 } from "three/src/math/Vector3.js";
-import { lines, points } from "./store";
+import type { Box } from '@nodarium/types';
+import { Vector3 } from 'three/src/math/Vector3.js';
+import Component from './Debug.svelte';
+import { lines, points, rects } from './store';
 
 export function debugPosition(x: number, y: number) {
   points.update((p) => {
@@ -8,18 +10,28 @@ export function debugPosition(x: number, y: number) {
   });
 }
 
+export function debugRect(rect: Box) {
+  console.log(rect);
+  rects.update((r) => {
+    r.push(rect);
+    return r;
+  });
+}
+
 export function clear() {
   points.set([]);
   lines.set([]);
+  rects.set([]);
 }
 
-export function debugLine(line: Vector3[]) {
+export function debugLine(points: Vector3[], color?: Color) {
   lines.update((l) => {
-    l.push(line);
+    l.push({ points, color });
     return l;
   });
 }
 
-import Component from "./Debug.svelte";
-
-export default Component
+export default Component;
+export function clearLines() {
+  lines.set([]);
+}

app/src/lib/graph-interface/debug/store.ts

@@ -1,6 +1,8 @@
-import { writable } from "svelte/store";
-import { Vector3 } from "three/src/math/Vector3.js";
+import type { Box } from '@nodarium/types';
+import { writable } from 'svelte/store';
+import type { Color } from 'three';
+import { Vector3 } from 'three/src/math/Vector3.js';
 
 export const points = writable<Vector3[]>([]);
-
-export const lines = writable<Vector3[][]>([]);
+export const rects = writable<Box[]>([]);
+export const lines = writable<{ points: Vector3[]; color?: Color }[]>([]);