houston...

dev/GraphBrowser.tsx

@@ -1,5 +1,6 @@
 import "./GraphBrowser.css";
 import { type Component, createSignal, onMount } from "solid-js";
+import { currentScene, sceneCache } from "#/engine/Scene.ts";
 import {
 	type Edge,
 	type Graph,
@@ -92,25 +93,13 @@ function hookEdge<T extends PhysicsPartial>([a, b]: Edge<T>): void {
 }
 
 export const GraphBrowser: Component<{
-	graph: Graph<PhysicsPartial & { label: string }>;
+	graph: Graph<string>;
 }> = (props) => {
 	let canvasRef!: HTMLCanvasElement;
 
 	const [width] = createSignal(300);
 	const [height] = createSignal(300);
 
-	const nodes: Array<Node<PhysicsPartial>> = [...props.graph.keys()];
-
-	const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
-		(acc, [node, neighbours]) => {
-			for (const neighbour of neighbours) {
-				acc.push([node, neighbour]);
-			}
-			return acc;
-		},
-		[] as Array<Edge<PhysicsPartial>>,
-	);
-
 	onMount(() => {
 		const ctx: CanvasRenderingContext2D = canvasRef.getContext("2d", {
 			alpha: false,
@@ -118,8 +107,34 @@ export const GraphBrowser: Component<{
 
 		const damping = 0.8;
 
-		const activeNode = props.graph.keys().find((_, i) => i === 3);
-		const activeNeighbours = getNeighbours(props.graph, activeNode);
+		const nodes: Array<Node<PhysicsPartial & { name: string }>> = [
+			...props.graph.keys(),
+		].map((node: string) => ({
+			name: node,
+			position: createVector(Math.random(), Math.random()),
+			velocity: createVector(),
+			acceleration: createVector(),
+		}));
+
+		const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
+			(acc, [name, neighbours]) => {
+				const node = nodes.find((n) => n.name === name)!;
+				for (const neighbour of neighbours) {
+					const n = nodes.find((node) => node.name === neighbour);
+					if (n !== undefined) {
+						acc.push([node, n]);
+					}
+				}
+				return acc;
+			},
+			[] as Array<Edge<PhysicsPartial>>,
+		);
+
+		const activeNode = props.graph
+			.keys()
+			.find((name) => name === currentScene.data.name);
+
+		const activeNeighbours = getNeighbours(props.graph, activeNode!);
 
 		const animate = (): void => {
 			applyRepulsion(nodes);
@@ -151,14 +166,10 @@ export const GraphBrowser: Component<{
 			}
 
 			for (const node of nodes) {
-				if (node === activeNode) {
+				if (node.name === activeNode) {
 					drawNode(node, ctx, "#ee459e");
 				} else {
-					if (
-						activeNeighbours.includes(
-							node as PhysicsPartial & { label: string },
-						)
-					) {
+					if (activeNeighbours.includes(node.name)) {
 						drawNode(node, ctx, "#6572f5");
 					} else {
 						drawNode(node, ctx, "#404249");

dev/main.tsx

@@ -10,10 +10,13 @@ import {
 	FileIcon,
 	ZoomScanIcon,
 } from "#/dev/icons/index.ts";
-import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
+import {
+	currentScene,
+	type SceneData,
+	sceneGraph,
+	setScene,
+} from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
-import { createGraph, type Edge, type Node } from "#/lib/Graph.ts";
-import { createVector, type Vector } from "#/lib/Vector.ts";
 import { GraphBrowser } from "./GraphBrowser.tsx";
 
 async function fetchScenes(): Promise<string[]> {
@@ -33,46 +36,6 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 
 const scenesRaw = await fetchScenes();
 
-type TestNode = Node<{
-	position: Vector;
-	velocity: Vector;
-	acceleration: Vector;
-	label: string;
-}>;
-
-function createTestNode(label: string): TestNode {
-	return {
-		label,
-		position: createVector(Math.random(), Math.random()),
-		velocity: createVector(),
-		acceleration: createVector(),
-	};
-}
-
-const nodes: Array<TestNode> = [
-	createTestNode("foo"),
-	createTestNode("bar"),
-	createTestNode("lol"),
-	createTestNode("hai"),
-	createTestNode("sea"),
-	createTestNode("vot"),
-	createTestNode("zoe"),
-	createTestNode("asm"),
-];
-
-const edges: Array<Edge<TestNode>> = [
-	[nodes[0], nodes[1]],
-	[nodes[0], nodes[2]],
-	[nodes[1], nodes[2]],
-	[nodes[2], nodes[3]],
-	[nodes[4], nodes[5]],
-	[nodes[4], nodes[3]],
-	[nodes[5], nodes[6]],
-	[nodes[3], nodes[6]],
-];
-
-const graph = createGraph<TestNode>(nodes, edges);
-
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	gameContainer,
 }) => {
@@ -103,7 +66,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 	const setCurrentScene = async (items: ItemsRef): Promise<void> => {
 		const name = items.find((ref) => ref.item.isActive)!.item.label;
-		await loadScene(name);
+		await setScene(name);
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
@@ -177,7 +140,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
 				<ItemList name="Entities" handler={setActiveEntity} items={entities} />
 
-				<GraphBrowser graph={graph} />
+				<GraphBrowser graph={sceneGraph} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>