From 1d5f74bca29c6bb28bef6035aa09a1e35884b40a Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Sat, 16 Mar 2024 22:54:54 -0400
Subject: test: begin writing tests

---
 src/components/NodeEditor.tsx | 67 ++++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 33 deletions(-)

(limited to 'src/components/NodeEditor.tsx')

diff --git a/src/components/NodeEditor.tsx b/src/components/NodeEditor.tsx
index 758fb76..4cb7011 100644
--- a/src/components/NodeEditor.tsx
+++ b/src/components/NodeEditor.tsx
@@ -87,7 +87,7 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 			const filter = pb.filter('project.id = {:id}', { id: project.id });
 			const projectNodes = await pb.collection('nodes').getFullList({ filter });
 			const projectLinks = await pb.collection('links').getFullList({ filter });
-			const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, node.name));
+			const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, nodeRegistry[node.type]));
 			nodes.value = nodes.value.concat(instances);
 		})();
 	}, []);
@@ -237,14 +237,13 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 		scale.value *= 1 + delta;
 	}), []);
 
-	const addNode = useCallback(async (name: string, info: NodeInfo<any, any>) => {
-		const node = await pb.collection('nodes').create({ x: 100, y: 100, type: name, project: projectId, collapsed: false });
-		alert(JSON.stringify(node));
+	const addNode = useCallback(async (type: string, info: NodeInfo<any, any>) => {
+		const node = await pb.collection('nodes').create({ x: 100, y: 100, type, project: project.id, collapsed: false });
 		nodes.value = nodes.value.concat(instantiateNode(node.id, node.x, node.y, info));
 	}, []);
 
 	return (
-		<div class="__NodeEditor">
+		<>
 			<Toolbar title={project.name}>
 				<ButtonMenu label="Add">
 					{Object.entries(nodeRegistry).map(([name, node]) => (
@@ -252,34 +251,36 @@ const NodeEditor = ({ project }: NodeEditorProps) => {
 					))}
 				</ButtonMenu>
 			</Toolbar>
-		<svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
-			<pattern
-				id="bg-grid-major"
-				patternUnits="userSpaceOnUse"
-				x={offsetX} y={offsetY}
-				width={120 * scale.value} height={120 * scale.value}
-			>
-				<pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-					<circle cx="2" cy="2" r="1" fill="var(--surface)" />
-				</pattern>
-				<g transform={`scale(${scale})`}>
-					<rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" />
-					<circle cx="2" cy="2" r="2" fill="var(--surface)" />
-				</g>
-			</pattern>
-			<rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" />
-			<g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}>
-				{allLinks.value.map(({fromX, fromY, toX, toY}) => (
-					<Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} />
-				))}
-				<SocketHandlers.Provider value={socketHandlers}>
-					{nodes.value.map(node => (
-						<node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} />
-					))}
-				</SocketHandlers.Provider>
-			</g>
-		</svg>
-		</div>
+			<main>
+				<svg class="__NodeEditor" width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
+					<pattern
+						id="bg-grid-major"
+						patternUnits="userSpaceOnUse"
+						x={offsetX} y={offsetY}
+						width={120 * scale.value} height={120 * scale.value}
+					>
+						<pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+							<circle cx="2" cy="2" r="1" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" />
+						</pattern>
+						<g transform={`scale(${scale})`}>
+							<rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" />
+							<circle cx="2" cy="2" r="2" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" />
+						</g>
+					</pattern>
+					<rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" />
+					<g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}>
+						{allLinks.value.map(({fromX, fromY, toX, toY}) => (
+							<Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} />
+						))}
+						<SocketHandlers.Provider value={socketHandlers}>
+							{nodes.value.map(node => (
+								<node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} />
+							))}
+						</SocketHandlers.Provider>
+					</g>
+				</svg>
+			</main>
+		</>
 	);
 };
 
-- 
cgit v1.2.3