Refactor: remove dead code, centralize port positioning

Author: milanofthe

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, snapTo2G } from '$lib/constants/dimensions';
+	import { NODE, snapTo2G, getPortPositionCalc } from '$lib/constants/dimensions';
 	import PlotPreview from './PlotPreview.svelte';
 
 	interface Props {
@@ -149,22 +149,6 @@
 			: snapTo2G(NODE.baseWidth)
 	);
 
-	// Calculate port position as offset from center (using calc for CSS)
-	// This ensures ports stay grid-aligned regardless of actual node dimensions
-	// because the node center is at a grid-aligned position
-	function getPortPositionCalc(index: number, total: number): string {
-		if (total <= 0 || total === 1) {
-			return '50%'; // Single port at center
-		}
-		// 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)`;
-	}
-
 	// Check if this is a Subsystem or Interface node (using shapes utility)
 	const isSubsystemNode = $derived(isSubsystem(data));
 	const isInterfaceNode = $derived(data.type === NODE_TYPES.INTERFACE);

src/lib/constants/dimensions.ts

@@ -33,8 +33,6 @@ export const HANDLE = {
 export const EVENT = {
 	/** Total bounding box size: 8 grid units = 80px */
 	size: G.px(8),
-	/** Center point (size / 2): 4 grid units = 40px */
-	center: G.x4,
 	/** Diamond shape size (rotated square) */
 	diamondSize: 56,
 	/** Diamond offset from center (diamondSize / 2) */
@@ -53,70 +51,23 @@ export function snapTo2G(value: number): number {
 }
 
 /**
- * Calculate node dimensions based on ports, content, and rotation.
- *
- * Design principles:
- * - Node center is the local origin (positioned via CSS transform)
- * - All dimensions are multiples of 2G (20px) for symmetric expansion
- * - Port spacing = 2G (20px)
- * - Ports are centered on their edge
- *
- * @param inputCount - Number of input ports
- * @param outputCount - Number of output ports
- * @param rotation - Node rotation (0, 1, 2, 3)
- * @param contentHeight - Optional extra height for content (pinned params, etc.)
- */
-export function calculateNodeDimensions(
-	inputCount: number,
-	outputCount: number,
-	rotation: number,
-	contentHeight: number = 0
-): { width: number; height: number } {
-	const isVertical = rotation === 1 || rotation === 3;
-	const maxPorts = Math.max(inputCount, outputCount);
-
-	// Minimum dimension to fit ports with padding
-	// For N ports: need (N-1) * spacing + padding on each end
-	// Simplified: N * portSpacing gives enough room
-	const minPortDimension = Math.max(1, maxPorts) * NODE.portSpacing;
-
-	if (isVertical) {
-		// Ports on top/bottom, width accommodates them
-		const width = snapTo2G(Math.max(NODE.baseWidth, minPortDimension));
-		const height = snapTo2G(Math.max(NODE.baseHeight, NODE.baseHeight + contentHeight));
-		return { width, height };
-	}
-
-	// Ports on left/right, height accommodates them
-	const width = snapTo2G(Math.max(NODE.baseWidth, NODE.baseWidth));
-	const height = snapTo2G(Math.max(NODE.baseHeight, minPortDimension, NODE.baseHeight + contentHeight));
-	return { width, height };
-}
-
-/**
- * Calculate the position of a port along an edge (in pixels).
- * Returns a grid-aligned position.
+ * 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
- * @param edgeLength - Length of the edge in pixels
- * @returns Position in pixels from the start of the edge
+ * @returns CSS position value (e.g., "50%" or "calc(50% + 10px)")
  */
-export function calculatePortPosition(
-	index: number,
-	total: number,
-	edgeLength: number
-): number {
-	if (total <= 0) return edgeLength / 2;
-	if (total === 1) return edgeLength / 2;
-
-	// Calculate span of all ports
+export function getPortPositionCalc(index: number, total: number): string {
+	if (total <= 0 || total === 1) {
+		return '50%'; // Single port at center
+	}
+	// For N ports with spacing S: span = (N-1)*S, offset from center = -span/2 + i*S
 	const span = (total - 1) * NODE.portSpacing;
-	// Center the ports on the edge
-	const startOffset = (edgeLength - span) / 2;
-	// Position of this port
-	const position = startOffset + index * NODE.portSpacing;
-
-	// Snap to grid for safety (should already be aligned if dimensions are correct)
-	return G.snap(position);
+	const offsetFromCenter = -span / 2 + index * NODE.portSpacing;
+	if (offsetFromCenter === 0) {
+		return '50%';
+	}
+	return `calc(50% + ${offsetFromCenter}px)`;
 }

src/lib/constants/grid.ts

@@ -20,20 +20,12 @@ export const G = {
 	unit: GRID_SIZE,
 	/** 2 grid units - standard port spacing */
 	x2: GRID_SIZE * 2,
-	/** 3 grid units */
-	x3: GRID_SIZE * 3,
-	/** 4 grid units */
+	/** 4 grid units - standard node base height */
 	x4: GRID_SIZE * 4,
-	/** 5 grid units */
-	x5: GRID_SIZE * 5,
 	/** 10 grid units - standard node width */
 	x10: GRID_SIZE * 10,
 	/** Convert grid units to pixels */
-	px: (units: number) => units * GRID_SIZE,
-	/** Snap a pixel value to nearest grid point */
-	snap: (value: number) => Math.round(value / GRID_SIZE) * GRID_SIZE,
-	/** Check if a value is on grid */
-	isAligned: (value: number) => value % GRID_SIZE === 0,
+	px: (units: number) => units * GRID_SIZE
 } as const;
 
 /** SvelteFlow snap grid configuration [x, y] */