Merge pull request #230 from pathsim/feature/grid-aligned-routing

grid aligned everything

Author: milanofthe

src/lib/components/FlowCanvas.svelte

@@ -29,6 +29,7 @@
 	import { nodeUpdatesStore } from '$lib/stores/nodeUpdates';
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
+	import { SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
 	import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 	import type { EventInstance } from '$lib/events/types';
 
@@ -772,7 +773,7 @@
 		onnodecontextmenu={handleNodeContextMenu}
 		onedgecontextmenu={handleEdgeContextMenu}
 		onpanecontextmenu={handlePaneContextMenu}
-		{...{ snapToGrid: true, snapGrid: [15, 15] } as any}
+		{...{ snapToGrid: true, snapGrid: SNAP_GRID } as any}
 		deleteKeyCode={['Delete', 'Backspace']}
 		selectionKeyCode={['Shift']}
 		multiSelectionKeyCode={['Shift', 'Meta', 'Control']}
@@ -785,7 +786,7 @@
 		proOptions={{ hideAttribution: true }}
 	>
 		<FlowUpdater pendingUpdates={pendingNodeUpdates} onUpdatesProcessed={clearPendingUpdates} />
-		<Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+		<Background variant={BackgroundVariant.Dots} gap={BACKGROUND_GAP} size={1} />
 	</SvelteFlow>
 </div>
 

src/lib/components/nodes/BaseNode.svelte

@@ -11,7 +11,7 @@
 	import { showTooltip, hideTooltip } from '$lib/components/Tooltip.svelte';
 	import { paramInput } from '$lib/actions/paramInput';
 	import { plotDataStore } from '$lib/plotting/processing/plotDataStore';
-	import { NODE } from '$lib/constants/dimensions';
+	import { NODE, snapTo2G, getPortPositionCalc } from '$lib/constants/dimensions';
 	import PlotPreview from './PlotPreview.svelte';
 
 	interface Props {
@@ -26,6 +26,14 @@
 	const typeDef = $derived(nodeRegistry.get(data.type));
 	const category = $derived(typeDef?.category || 'Algebraic');
 
+	// Get valid pinned params (filter out any that no longer exist in the type definition)
+	// Defined early since it's needed for dimension calculations
+	const validPinnedParams = $derived(() => {
+		if (!data.pinnedParams?.length || !typeDef) return [];
+		const paramNames = new Set(typeDef.params.map(p => p.name));
+		return data.pinnedParams.filter(name => paramNames.has(name));
+	});
+
 	// Recording node hover preview
 	const isRecordingNode = $derived(category === 'Recording');
 	let isHovered = $state(false);
@@ -127,17 +135,19 @@
 
 	const maxPortsOnSide = $derived(Math.max(data.inputs.length, data.outputs.length));
 
-	// For horizontal layout: height grows with ports; for vertical: width grows
-	const nodeHeight = $derived(isVertical ? NODE.baseHeight : Math.max(NODE.baseHeight, maxPortsOnSide * NODE.portSpacing + 10));
-	const nodeWidth = $derived(isVertical ? Math.max(NODE.baseWidth, maxPortsOnSide * NODE.portSpacing + 20) : NODE.baseWidth);
-
-	// Calculate port positions using percentages for proper centering
-	function getPortPosition(index: number, total: number): string {
-		if (total === 1) return '50%';
-		// Distribute evenly with padding from edges
-		const percent = ((index + 1) / (total + 1)) * 100;
-		return `${percent}%`;
-	}
+	// Minimum node dimensions based on port count (grid-aligned to 2G)
+	// Content can expand beyond these minimums
+	const minPortDimension = $derived(Math.max(1, maxPortsOnSide) * NODE.portSpacing);
+	const minNodeHeight = $derived(
+		isVertical
+			? snapTo2G(NODE.baseHeight)
+			: snapTo2G(Math.max(NODE.baseHeight, minPortDimension))
+	);
+	const minNodeWidth = $derived(
+		isVertical
+			? snapTo2G(Math.max(NODE.baseWidth, minPortDimension))
+			: snapTo2G(NODE.baseWidth)
+	);
 
 	// Check if this is a Subsystem or Interface node (using shapes utility)
 	const isSubsystemNode = $derived(isSubsystem(data));
@@ -193,13 +203,6 @@
 	// Custom node color (defaults to pathsim-blue)
 	const nodeColor = $derived(data.color || 'var(--accent)');
 
-	// Get valid pinned params (filter out any that no longer exist in the type definition)
-	const validPinnedParams = $derived(() => {
-		if (!data.pinnedParams?.length || !typeDef) return [];
-		const paramNames = new Set(typeDef.params.map(p => p.name));
-		return data.pinnedParams.filter(name => paramNames.has(name));
-	});
-
 	// Handle pinned param change
 	function handlePinnedParamChange(paramName: string, value: string) {
 		graphStore.updateNodeParams(id, { [paramName]: value });
@@ -282,7 +285,7 @@
 	class:preview-hovered={showPreview}
 	class:subsystem-type={isSubsystemType}
 	data-rotation={rotation}
-	style="min-width: {nodeWidth}px; min-height: {nodeHeight}px; --node-color: {nodeColor};"
+	style="min-width: {minNodeWidth}px; min-height: {minNodeHeight}px; --node-color: {nodeColor};"
 	ondblclick={handleDoubleClick}
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
@@ -361,7 +364,7 @@
 				type="target"
 				position={inputPosition()}
 				id={port.id}
-				style={isVertical ? `left: ${getPortPosition(i, data.inputs.length)};` : `top: ${getPortPosition(i, data.inputs.length)};`}
+				style={isVertical ? `left: ${getPortPositionCalc(i, data.inputs.length)};` : `top: ${getPortPositionCalc(i, data.inputs.length)};`}
 				class="handle handle-input"
 				onmouseenter={(e) => handleInputMouseEnter(e, port)}
 				onmouseleave={() => handleInputMouseLeave(port)}
@@ -376,7 +379,7 @@
 				type="source"
 				position={outputPosition()}
 				id={port.id}
-				style={isVertical ? `left: ${getPortPosition(i, data.outputs.length)};` : `top: ${getPortPosition(i, data.outputs.length)};`}
+				style={isVertical ? `left: ${getPortPositionCalc(i, data.outputs.length)};` : `top: ${getPortPositionCalc(i, data.outputs.length)};`}
 				class="handle handle-output"
 				onmouseenter={(e) => handleOutputMouseEnter(e, port)}
 				onmouseleave={() => handleOutputMouseLeave(port)}
@@ -388,12 +391,14 @@
 <style>
 	.node {
 		position: relative;
-		min-width: 90px;
-		min-height: 36px;
+		/* Center node on its position point (node center = local origin) */
+		transform: translate(-50%, -50%);
+		/* Dimensions set via inline style using grid constants */
+		display: flex;
+		flex-direction: column;
 		background: var(--surface-raised);
 		border: 1px solid var(--edge);
 		font-size: 10px;
-		transition: all 0.15s ease;
 		overflow: visible;
 	}
 
@@ -412,7 +417,8 @@
 
 	.shape-diamond {
 		border-radius: 4px;
-		transform: rotate(45deg);
+		/* Compose with center transform */
+		transform: translate(-50%, -50%) rotate(45deg);
 	}
 
 	.shape-diamond .node-content {
@@ -447,7 +453,7 @@
 		z-index: 1000 !important;
 	}
 
-	/* Inner wrapper for proper border-radius clipping */
+	/* Inner wrapper for content */
 	.node-inner {
 		border-radius: inherit;
 		overflow: hidden;

src/lib/components/nodes/EventNode.svelte

@@ -45,6 +45,8 @@
 <style>
 	.event-node {
 		position: relative;
+		/* Center event on its position point (center = local origin) */
+		transform: translate(-50%, -50%);
 		cursor: pointer;
 	}
 

src/lib/constants/dimensions.ts

@@ -1,63 +1,73 @@
 /**
  * Dimension constants for nodes, handles, and events
  * Single source of truth - used by both live canvas (CSS) and SVG export
+ *
+ * All dimensions are designed to align with the grid system defined in grid.ts
  */
 
-/** Node dimension constants */
+import { GRID_SIZE, G } from './grid';
+
+/** Node dimension constants (grid-aligned) */
 export const NODE = {
-	/** Base width in pixels */
-	baseWidth: 90,
-	/** Base height in pixels */
-	baseHeight: 36,
-	/** Spacing between ports in pixels */
-	portSpacing: 18,
+	/** Base width: 10 grid units = 100px */
+	baseWidth: G.x10,
+	/** Base height: 4 grid units = 40px */
+	baseHeight: G.x4,
+	/** Spacing between ports: 2 grid units = 20px */
+	portSpacing: G.x2,
 	/** Border width in pixels */
 	borderWidth: 1
 } as const;
 
 /** Handle (port connector) dimensions */
 export const HANDLE = {
-	/** Width of horizontal handles (rotation 0, 2) */
-	width: 10,
+	/** Width of horizontal handles (rotation 0, 2): 1 grid unit */
+	width: GRID_SIZE,
 	/** Height of horizontal handles (rotation 0, 2) */
 	height: 8,
 	/** Inset from outer to inner path for hollow effect */
 	hollowInset: 1.5
 } as const;
 
-/** Event node dimensions */
+/** Event node dimensions (grid-aligned) */
 export const EVENT = {
-	/** Total bounding box size */
-	size: 80,
-	/** Center point (size / 2) */
-	center: 40,
+	/** Total bounding box size: 8 grid units = 80px */
+	size: G.px(8),
 	/** Diamond shape size (rotated square) */
 	diamondSize: 56,
 	/** Diamond offset from center (diamondSize / 2) */
 	diamondOffset: 28
 } as const;
 
-/** Export padding */
-export const EXPORT_PADDING = 40;
+/** Export padding: 4 grid units = 40px */
+export const EXPORT_PADDING = G.x4;
 
-/** Calculate node dimensions based on ports and rotation */
-export function calculateNodeDimensions(
-	inputCount: number,
-	outputCount: number,
-	rotation: number
-): { width: number; height: number } {
-	const isVertical = rotation === 1 || rotation === 3;
-	const maxPorts = Math.max(inputCount, outputCount);
+/**
+ * Round up to next 2G (20px) boundary for symmetric expansion.
+ * This ensures nodes expand evenly from center.
+ */
+export function snapTo2G(value: number): number {
+	return Math.ceil(value / G.x2) * G.x2;
+}
 
-	if (isVertical) {
-		return {
-			width: Math.max(NODE.baseWidth, maxPorts * NODE.portSpacing + 20),
-			height: NODE.baseHeight
-		};
+/**
+ * Calculate port position as CSS calc() expression.
+ * Uses offset from center to ensure grid alignment regardless of node size,
+ * since the node center is always at a grid-aligned position.
+ *
+ * @param index - Port index (0-based)
+ * @param total - Total number of ports on this edge
+ * @returns CSS position value (e.g., "50%" or "calc(50% + 10px)")
+ */
+export function getPortPositionCalc(index: number, total: number): string {
+	if (total <= 0 || total === 1) {
+		return '50%'; // Single port at center
 	}
-
-	return {
-		width: NODE.baseWidth,
-		height: Math.max(NODE.baseHeight, maxPorts * NODE.portSpacing + 10)
-	};
+	// For N ports with spacing S: span = (N-1)*S, offset from center = -span/2 + i*S
+	const span = (total - 1) * NODE.portSpacing;
+	const offsetFromCenter = -span / 2 + index * NODE.portSpacing;
+	if (offsetFromCenter === 0) {
+		return '50%';
+	}
+	return `calc(50% + ${offsetFromCenter}px)`;
 }

src/lib/constants/grid.ts

@@ -0,0 +1,35 @@
+/**
+ * Unified Grid System
+ *
+ * Single source of truth for all grid-related dimensions.
+ * All node, port, and edge positioning should align to this grid.
+ *
+ * Design principle:
+ * - Base grid unit: 10px
+ * - Port spacing: 2 grid units (20px) - works for both even and odd port counts
+ * - Node dimensions: multiples of grid unit
+ * - Edges route along grid lines
+ */
+
+/** Base grid unit in pixels */
+export const GRID_SIZE = 10;
+
+/** Grid calculation helpers */
+export const G = {
+	/** Base unit in pixels */
+	unit: GRID_SIZE,
+	/** 2 grid units - standard port spacing */
+	x2: GRID_SIZE * 2,
+	/** 4 grid units - standard node base height */
+	x4: GRID_SIZE * 4,
+	/** 10 grid units - standard node width */
+	x10: GRID_SIZE * 10,
+	/** Convert grid units to pixels */
+	px: (units: number) => units * GRID_SIZE
+} as const;
+
+/** SvelteFlow snap grid configuration [x, y] */
+export const SNAP_GRID: [number, number] = [GRID_SIZE, GRID_SIZE];
+
+/** Background dot/grid spacing (2G for visual clarity) */
+export const BACKGROUND_GAP = G.x2;

src/lib/export/svg/renderer.ts

@@ -12,7 +12,7 @@ import { get } from 'svelte/store';
 import { graphStore } from '$lib/stores/graph';
 import { eventStore } from '$lib/stores/events';
 import { getThemeColors } from '$lib/constants/theme';
-import { EVENT } from '$lib/constants/dimensions';
+import { NODE, EVENT } from '$lib/constants/dimensions';
 import { getHandlePath } from '$lib/constants/handlePaths';
 import type { ExportOptions, RenderContext, Bounds } from './types';
 import { DEFAULT_OPTIONS } from './types';
@@ -132,14 +132,17 @@ function renderHandles(nodeId: string, nodeX: number, nodeY: number, ctx: Render
 // ============================================================================
 
 function renderNode(node: NodeInstance, ctx: RenderContext): string {
-	const { x, y } = node.position;
 	const wrapper = document.querySelector(`[data-id="${node.id}"]`) as HTMLElement;
 	if (!wrapper) return '';
 
 	const dims = getNodeDimensions(node.id);
 	if (!dims) return '';
 	const { width, height } = dims;
 
+	// Position is center-origin, convert to top-left for SVG
+	const x = node.position.x - width / 2;
+	const y = node.position.y - height / 2;
+
 	const nodeEl = wrapper.querySelector('.node') as HTMLElement;
 	if (!nodeEl) return '';
 
@@ -217,8 +220,9 @@ function renderEvent(event: EventInstance, ctx: RenderContext): string {
 		eventType = typeEl?.textContent || '';
 	}
 
-	const cx = event.position.x + EVENT.center;
-	const cy = event.position.y + EVENT.center;
+	// Position is center-origin, so position IS the center
+	const cx = event.position.x;
+	const cy = event.position.y;
 	const color = event.color || ctx.theme.accent;
 
 	const parts: string[] = [];
@@ -261,19 +265,25 @@ function calculateBounds(nodes: NodeInstance[], events: EventInstance[]): Bounds
 
 	for (const node of nodes) {
 		const dims = getNodeDimensions(node.id);
-		const width = dims?.width ?? 90;
-		const height = dims?.height ?? 36;
-		bounds.minX = Math.min(bounds.minX, node.position.x);
-		bounds.minY = Math.min(bounds.minY, node.position.y);
-		bounds.maxX = Math.max(bounds.maxX, node.position.x + width);
-		bounds.maxY = Math.max(bounds.maxY, node.position.y + height);
+		const width = dims?.width ?? NODE.baseWidth;
+		const height = dims?.height ?? NODE.baseHeight;
+		// Position is center-origin, calculate corners
+		const left = node.position.x - width / 2;
+		const top = node.position.y - height / 2;
+		bounds.minX = Math.min(bounds.minX, left);
+		bounds.minY = Math.min(bounds.minY, top);
+		bounds.maxX = Math.max(bounds.maxX, left + width);
+		bounds.maxY = Math.max(bounds.maxY, top + height);
 	}
 
 	for (const event of events) {
-		bounds.minX = Math.min(bounds.minX, event.position.x);
-		bounds.minY = Math.min(bounds.minY, event.position.y);
-		bounds.maxX = Math.max(bounds.maxX, event.position.x + EVENT.size);
-		bounds.maxY = Math.max(bounds.maxY, event.position.y + EVENT.size);
+		// Events also use center-origin
+		const left = event.position.x - EVENT.size / 2;
+		const top = event.position.y - EVENT.size / 2;
+		bounds.minX = Math.min(bounds.minX, left);
+		bounds.minY = Math.min(bounds.minY, top);
+		bounds.maxX = Math.max(bounds.maxX, left + EVENT.size);
+		bounds.maxY = Math.max(bounds.maxY, top + EVENT.size);
 	}
 
 	return isFinite(bounds.minX) ? bounds : { minX: 0, minY: 0, maxX: 200, maxY: 200 };