WIP

dev/GraphBrowser.css

@@ -0,0 +1,11 @@
+.graph-browser {
+	border-radius: var(--sp-1);
+	overflow: hidden;
+
+	canvas {
+		display: block;
+		user-select: none;
+		height: 100%;
+		width: 100%;
+	}
+}

dev/GraphBrowser.tsx

@@ -0,0 +1,28 @@
+import "./GraphBrowser.css";
+import { type Component, createSignal, onMount } from "solid-js";
+import { createGraph, type Edge, type Graph, type Node } from "#/lib/Graph.ts";
+import type { Vector } from "#/lib/Vector.ts";
+
+export const GraphBrowser: Component<{
+	graph: Graph<{ position: Vector; label: string }>;
+}> = (props) => {
+	let canvasRef!: HTMLCanvasElement;
+
+	const [width, setWidth] = createSignal(100);
+	const [height, setHeight] = createSignal(100);
+
+	onMount(() => {
+		const ctx: CanvasRenderingContext2D = canvasRef.getContext("2d", {
+			alpha: false,
+		})!;
+
+		setWidth(canvasRef.parentElement!.offsetWidth);
+		setHeight(width());
+	});
+
+	return (
+		<div class="graph-browser">
+			<canvas ref={canvasRef} width={width()} height={height()}></canvas>
+		</div>
+	);
+};

dev/main.tsx

@@ -12,6 +12,9 @@ import {
 } from "#/dev/icons/index.ts";
 import { currentScene, loadScene, type SceneData } 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[]> {
 	const indexRef: string[] = await (await fetch(`/api/scenes`)).json();
@@ -30,6 +33,21 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 
 const scenesRaw = await fetchScenes();
 
+type TestNode = Node<{ position: Vector; label: string }>;
+
+const nodes: Array<TestNode> = [
+	{ position: createVector(), label: "foo" },
+	{ position: createVector(), label: "bar" },
+	{ position: createVector(), label: "lol" },
+];
+
+const edges: Array<Edge<TestNode>> = [
+	[nodes[0], nodes[1]],
+	[nodes[1], nodes[2]],
+];
+
+const graph = createGraph<TestNode>(nodes, edges);
+
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	gameContainer,
 }) => {
@@ -133,6 +151,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
 				<ItemList name="Entities" handler={setActiveEntity} items={entities} />
+
+				<GraphBrowser graph={graph} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>