From 8099b08dfb2f140d527df684044da3274106e787 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Fri, 8 Mar 2024 14:51:35 +0000
Subject: Add min/max x/y inputs to PlotNode

---
 src/node.module.css  |  3 +++
 src/nodes/Plot.tsx   | 34 ++++++++++++++++++++++++----------
 src/nodes/Viewer.tsx |  8 +++++---
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/node.module.css b/src/node.module.css
index bfd5fb1..76ef2df 100644
--- a/src/node.module.css
+++ b/src/node.module.css
@@ -7,6 +7,7 @@
 .node {
 	background-color: var(--surface);
 	min-width: 180px;
+	width: fit-content;
 	font-size: 0.9rem;
 	margin: 4px;
 	padding-bottom: 8px;
@@ -33,6 +34,7 @@
 		font-size: 1em;
 		text-align: right;
 		width: 100%;
+		max-width: 200px;
 		margin-right: 12px;
 		padding-top: 3px;
 		padding-bottom: 2px;
@@ -98,6 +100,7 @@
 					position: relative;
 					left: 8px;
 					width: 0;
+					white-space: nowrap;
 					padding-bottom: 2px;
 				}
 			}
diff --git a/src/nodes/Plot.tsx b/src/nodes/Plot.tsx
index d7be295..fbec1f4 100644
--- a/src/nodes/Plot.tsx
+++ b/src/nodes/Plot.tsx
@@ -1,30 +1,44 @@
-import { NodeShell, InputAny, NodeComponentProps, NodeInfo } from '../node.tsx';
+import { NodeShell, InputAny, InputNumber, NodeComponentProps, NodeInfo } from '../node.tsx';
 
 export interface PlotInputs {
 	data: any;
+	minX: number;
+	minY: number;
+	maxX: number;
+	maxY: number;
 }
 
 export interface PlotOutputs {}
 
 export const Plot = ({ id, x, y, inputs }: NodeComponentProps<PlotInputs>) => {
 	const data = inputs.data.value;
-	const scale = 100;
-	const dx = 0;
-	const dy = 0;
+	const width = 400;
+	const height = 400;
+	const dx = inputs.maxX.value - inputs.minX.value;
+	const dy = inputs.maxY.value - inputs.minY.value;
+
 	let path = '';
 	if (data !== null && data.length > 3) {
 		for (let i = 0; i < data.length; i += Math.max(2, Math.floor(data.length / 1000))) {
 			if (i >= data.length) break;
-			path += (i ? 'L' : 'M') + (data[i] * scale + dx) + ' ' + (data[i+1] * scale + dy);
+			const X = (data[i] - inputs.minX.value) / dx * width;
+			const Y = height - (data[i+1] - inputs.minY.value) / dy * height;
+			path += (i ? 'L' : 'M') + X + ' ' + Y;
 		}
 	}
-	//alert(path);
+	//alert(dx);
 	return (
 		<NodeShell name="Plot" id={id} x={x} y={y}>
 			<InputAny name="data" label="Data" />
-			<svg width="200" height="200">
-				<path fill="none" stroke="blue" stroke-width="2" d={path} />
-			</svg>
+			<InputNumber name="minX" label="Min X" value={inputs.minX} />
+			<InputNumber name="minY" label="Min Y" value={inputs.minY} />
+			<InputNumber name="maxX" label="Max X" value={inputs.maxX} />
+			<InputNumber name="maxY" label="Max Y" value={inputs.maxY} />
+			<li>
+				<svg width={width} height={height} style="background-color:white;margin:4px 8px 0 8px;">
+					<path fill="none" stroke="blue" stroke-width="2" d={path} />
+				</svg>
+			</li>
 		</NodeShell>
 	);
 };
@@ -32,5 +46,5 @@ export const Plot = ({ id, x, y, inputs }: NodeComponentProps<PlotInputs>) => {
 export const PlotNode: NodeInfo<PlotInputs, PlotOutputs> = {
 	component: Plot,
 	func: () => ({}),
-	inputs: { data: null },
+	inputs: { data: null, minX: -10, minY: -10, maxX: 10, maxY: 10 },
 };
\ No newline at end of file
diff --git a/src/nodes/Viewer.tsx b/src/nodes/Viewer.tsx
index addd0ab..b4b7758 100644
--- a/src/nodes/Viewer.tsx
+++ b/src/nodes/Viewer.tsx
@@ -14,9 +14,11 @@ export const Viewer = ({ id, x, y, inputs }: NodeComponentProps<ViewerInputs>) =
 	return (
 		<NodeShell name="Viewer" id={id} x={x} y={y}>
 			<InputAny name="value" label="Value" />
-			<pre style="padding-left: 8px; white-space: pre-wrap; overflow-wrap: anywhere;">
-				{JSON.stringify(data)}
-			</pre>
+			<li>
+				<pre style="padding-left: 8px; white-space: pre-wrap; overflow-wrap: anywhere;">
+					{JSON.stringify(data)}
+				</pre>
+			</li>
 		</NodeShell>
 	);
 };
-- 
cgit v1.2.3