diff --git a/dev/GraphBrowser.tsx b/dev/GraphBrowser.tsx index f450267..5d0549b 100644 --- a/dev/GraphBrowser.tsx +++ b/dev/GraphBrowser.tsx @@ -1,6 +1,6 @@ import "./GraphBrowser.css"; import { type Component, createSignal, onMount } from "solid-js"; -import { currentScene, sceneCache } from "#/engine/Scene.ts"; +import { currentScene } from "#/engine/Scene.ts"; import { type Edge, type Graph, @@ -9,6 +9,8 @@ import { } from "#/lib/Graph.ts"; import { createVector, + fromPolar, + getDirection, getDistance, scale, setDistanceNormal, @@ -26,11 +28,32 @@ function drawNode( ctx: CanvasRenderingContext2D, color: string = "#dbdee1", ): void { - ctx.lineWidth = 2; - ctx.strokeStyle = color; + const text = (node as PhysicsPartial & { name: string }).name; + const metrics = ctx.measureText(text); + + ctx.fillStyle = color; + ctx.beginPath(); - ctx.arc(node.position.x, node.position.y, 8, 0, 2 * Math.PI); - ctx.stroke(); + ctx.arc( + node.position.x - metrics.width / 2, + node.position.y, + 11, + Math.PI * 0.5, + Math.PI * 1.5, + ); + ctx.arc( + node.position.x + metrics.width / 2, + node.position.y, + 11, + -Math.PI * 0.5, + -Math.PI * 1.5, + ); + ctx.fill(); + + ctx.shadowColor = "#000"; + ctx.fillStyle = "#fff"; + ctx.fillText(text, node.position.x, node.position.y); + ctx.shadowColor = "transparent"; } function drawEdge( @@ -38,11 +61,15 @@ function drawEdge( ctx: CanvasRenderingContext2D, color: string = "#dbdee1", ): void { + const tail = edge[0].position; + const tip = edge[1].position; + ctx.lineWidth = 2; ctx.strokeStyle = color; + ctx.beginPath(); - ctx.moveTo(edge[0].position.x, edge[0].position.y); - ctx.lineTo(edge[1].position.x, edge[1].position.y); + ctx.moveTo(tail.x, tail.y); + ctx.lineTo(tip.x, tip.y); ctx.stroke(); } @@ -74,7 +101,7 @@ function applyRepulsion(nodes: Array): void { } function hookEdge([a, b]: Edge): void { - const restLength = 48; + const restLength = 86; const stiffness = 0.2; const direction = createVector(); @@ -133,6 +160,11 @@ export const GraphBrowser: Component<{ alpha: false, })!; + ctx.font = "18px sans-serif"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.shadowBlur = 2; + const damping = 0.8; const animate = (): void => { for (const node of props.graph.keys()) { @@ -169,23 +201,24 @@ export const GraphBrowser: Component<{ ctx.restore(); ctx.clearRect(0, 0, canvasRef.width, canvasRef.height); ctx.save(); - ctx.translate(width() / 2, height() / 2); + const activeRenderNode = nodes.find((n) => n.name === activeNode)!; + ctx.translate( + width() / 2 - activeRenderNode.position.x, + height() / 2 - activeRenderNode.position.y, + ); for (const edge of edges) { - drawEdge(edge, ctx, "#404249"); + drawEdge(edge, ctx); } for (const node of nodes) { - if (node.name === activeNode) { - drawNode(node, ctx, "#ee459e"); + if (activeNeighbours.includes(node.name)) { + drawNode(node, ctx, "#6572f5"); } else { - if (activeNeighbours.includes(node.name)) { - drawNode(node, ctx, "#6572f5"); - } else { - drawNode(node, ctx, "#404249"); - } + drawNode(node, ctx, "#404249"); } } + drawNode(activeRenderNode, ctx, "#ee459e"); setTimeout(animate, 100); }; diff --git a/dev/main.tsx b/dev/main.tsx index 65069bb..d3acfb9 100644 --- a/dev/main.tsx +++ b/dev/main.tsx @@ -138,9 +138,9 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({ - - + +
diff --git a/scenes/testScene/index.ts b/scenes/testScene/index.ts index 849e01b..88fba78 100644 --- a/scenes/testScene/index.ts +++ b/scenes/testScene/index.ts @@ -3,6 +3,6 @@ import data from "./data.json"; const { process, linkScenes } = useScene(data); -linkScenes(["fooScene"] as const); +linkScenes(["fooScene", "barScene"] as const); process((_ctx, _delta) => {});