Add grid lines and ticks to Plot node

1 files changed, 61 insertions, 12 deletions

diff --git a/src/nodes/Plot.tsx b/src/nodes/Plot.tsx
index fbec1f4..649246a 100644
--- a/src/nodes/Plot.tsx
+++ b/src/nodes/Plot.tsx
@@ -1,4 +1,5 @@
 import { NodeShell, InputAny, InputNumber, NodeComponentProps, NodeInfo } from '../node.tsx';
+import { useComputed } from '@preact/signals';
 
 export interface PlotInputs {
 	data: any;
@@ -11,32 +12,80 @@ export interface PlotInputs {
 export interface PlotOutputs {}
 
 export const Plot = ({ id, x, y, inputs }: NodeComponentProps<PlotInputs>) => {
+	const { minX, maxX, minY, maxY } = inputs;
 	const data = inputs.data.value;
 	const width = 400;
 	const height = 400;
-	const dx = inputs.maxX.value - inputs.minX.value;
-	const dy = inputs.maxY.value - inputs.minY.value;
+	const xtickCount = 5;
+	const ytickCount = 5;
+	const dx = useComputed(() => maxX.value - minX.value);
+	const dy = useComputed(() => maxY.value - 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;
-			const X = (data[i] - inputs.minX.value) / dx * width;
-			const Y = height - (data[i+1] - inputs.minY.value) / dy * height;
+			const X = (data[i] - minX.value) / dx.value * width;
+			const Y = height - (data[i+1] - minY.value) / dy.value * height;
 			path += (i ? 'L' : 'M') + X + ' ' + Y;
 		}
 	}
-	//alert(dx);
+
+	let xticks = [];
+	for (let x = minX.value; x <= maxX.value; x += dx.value / xtickCount) {
+		xticks.push([x.toFixed(1), (x - minX.value) / dx.value * width]);
+	}
+	let yticks = [];
+	for (let y = minY.value; y <= maxY.value; y += dy.value / ytickCount) {
+		yticks.push([y.toFixed(1), height - (y - minY.value) / dy.value * height]);
+	}
+
+	const onMouseDown = (event: MouseEvent) => {
+		event.stopPropagation();
+		const onMouseMove = (event: MouseEvent) => {
+			minX.value -= event.movementX / width * dx.value;
+			minY.value += event.movementY / height * dy.value;
+		};
+		const onMouseUp = () => {
+			document.removeEventListener('mousemove', onMouseMove);
+			document.removeEventListener('mouseup', onMouseUp);
+		};
+		document.addEventListener('mousemove', onMouseMove);
+		document.addEventListener('mouseup', onMouseUp);
+	};
+
 	return (
 		<NodeShell name="Plot" id={id} x={x} y={y}>
 			<InputAny name="data" label="Data" />
-			<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} />
+			<InputNumber name="minX" label="Min X" value={minX} />
+			<InputNumber name="minY" label="Min Y" value={minY} />
+			<InputNumber name="maxX" label="Max X" value={maxX} />
+			<InputNumber name="maxY" label="Max Y" value={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
+					width={width + 64}
+					height={height + 64}
+					onMouseDown={onMouseDown}
+					style="background-color:white;margin:4px 8px 0 8px;"
+				>
+					{xticks.map(([lbl, x]) => (
+						<>
+							<path fill="none" stroke="black" stroke-width="1.5" d={`M ${x+32} ${height+32} v8`} />
+							<path fill="none" stroke="#aaa" stroke-width="1.5" d={`M ${x+32} ${height+32} v${-height}`} />
+							<text x={x+24} y={height+56}>{lbl}</text>
+						</>
+					))}
+					{yticks.map(([lbl, y]) => (
+						<>
+							<path fill="none" stroke="black" stroke-width="1.5" d={`M ${32} ${y+32} h-8`} />
+							<path fill="none" stroke="#aaa" stroke-width="1.5" d={`M ${32} ${y+32} h${width}`} />
+							<text x={4} y={y+36}>{lbl}</text>
+						</>
+					))}
+					<path fill="none" stroke="black" stroke-width="1.5" d={`M ${-minX.value/dx.value*width+32} ${height+32} v${-height}`} />
+					<path fill="none" stroke="black" stroke-width="1.5" d={`M ${32} ${height+minY.value/dy.value*height+32} h${width}`} />
+					<rect fill="none" stroke="black" stroke-width="2" x="32" y="32" width={width} height={height} />
+					<path fill="none" stroke="blue" stroke-width="2" transform="translate(32,32)" d={path} />
 				</svg>
 			</li>
 		</NodeShell>
@@ -47,4 +96,4 @@ export const PlotNode: NodeInfo<PlotInputs, PlotOutputs> = {
 	component: Plot,
 	func: () => ({}),
 	inputs: { data: null, minX: -10, minY: -10, maxX: 10, maxY: 10 },
-};
\ No newline at end of file
+};