feat: basic edge creation

frontend/src/lib/components/debug/Debug.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
+  import { points, lines } from "./store";
+  import { T } from "@threlte/core";
+</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>
+{/each}
+
+{#each $lines as line}
+  <T.Mesh>
+    <MeshLineGeometry points={line} />
+    <MeshLineMaterial color="red" linewidth={1} attenuate={false} />
+  </T.Mesh>
+{/each}

frontend/src/lib/components/debug/index.ts

@@ -0,0 +1,26 @@
+import type { Vector3 } from "three";
+import { lines, points } from "./store";
+
+export function debugPosition(pos: Vector3) {
+  points.update((p) => {
+    p.push(pos);
+    return p;
+  });
+
+}
+
+export function clear() {
+  points.set([]);
+  lines.set([]);
+}
+
+export function debugLine(line: Vector3[]) {
+  lines.update((l) => {
+    l.push(line);
+    return l;
+  });
+}
+
+import Component from "./Debug.svelte";
+
+export default Component

frontend/src/lib/components/debug/store.ts

@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+import type { Vector3 } from "three";
+
+export const points = writable<Vector3[]>([]);
+
+export const lines = writable<Vector3[][]>([]);