refactor: consolidate routing/dimension magic constants into routing/constants and dimensions

Author: milanofthe

src/lib/components/FlowCanvas.svelte

@@ -36,6 +36,7 @@
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { GRID_SIZE, SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
+	import { DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '$lib/constants/dimensions';
 	import { shallowEqualArray, shallowEqualRecord } from '$lib/utils/shallowEqual';
 	import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 	import type { EventInstance } from '$lib/events/types';
@@ -274,8 +275,8 @@
 		if (portIndex >= ports.length) return null;
 
 		const rotation = (nodeData.params?.['_rotation'] as number) || 0;
-		const width = node.measured?.width ?? node.width ?? 80;
-		const height = node.measured?.height ?? node.height ?? 40;
+		const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+		const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 
 		// Calculate port offset from center based on rotation
 		const portCount = ports.length;
@@ -739,8 +740,8 @@
 				changedNodeIds.add(node.id);
 
 				// Incrementally update grid obstacle for this node
-				const width = node.measured?.width ?? node.width ?? 80;
-				const height = node.measured?.height ?? node.height ?? 40;
+				const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+				const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 				routingStore.updateNodeBounds(node.id, {
 					x: snappedX - width / 2,
 					y: snappedY - height / 2,

src/lib/components/edges/OrthogonalEdge.svelte

@@ -24,7 +24,7 @@
 	import { routingStore, type PortInfo } from '$lib/stores/routing';
 	import { historyStore } from '$lib/stores/history';
 	import { screenToFlow } from '$lib/utils/viewUtils';
-	import { GRID_SIZE } from '$lib/routing/constants';
+	import { GRID_SIZE, EDGE_SOURCE_OFFSET, EDGE_TARGET_OFFSET, EDGE_CORNER_RADIUS } from '$lib/routing/constants';
 	import type { RouteResult, Direction } from '$lib/routing';
 	import type { Waypoint } from '$lib/types/nodes';
 
@@ -201,8 +201,8 @@
 	// Offset to start/end path at handle tips (not centers)
 	// Source: small inset from handle edge
 	// Target: larger offset to leave room for arrowhead
-	const sourceOffset = 0.5;
-	const targetOffset = 4.5;
+	const sourceOffset = EDGE_SOURCE_OFFSET;
+	const targetOffset = EDGE_TARGET_OFFSET;
 
 	// Adjusted source position based on handle direction
 	const adjustedSource = $derived(() => {
@@ -226,8 +226,7 @@
 		return { x, y };
 	});
 
-	// Corner radius for bends (0.5G = 5px)
-	const CORNER_RADIUS = 5;
+	const CORNER_RADIUS = EDGE_CORNER_RADIUS;
 
 	/**
 	 * Build SVG path with rounded corners using quadratic bezier curves

src/lib/constants/dimensions.ts

@@ -19,6 +19,13 @@ export const NODE = {
 	borderWidth: 1
 } as const;
 
+/**
+ * Fallback node width/height used when xyflow has not yet measured a node.
+ * Re-exported so callers don't inline the magic numbers.
+ */
+export const DEFAULT_NODE_WIDTH = NODE.baseWidth;
+export const DEFAULT_NODE_HEIGHT = NODE.baseHeight;
+
 /** Handle (port connector) dimensions */
 export const HANDLE = {
 	/** Width of horizontal handles (rotation 0, 2): 1 grid unit */

src/lib/routing/constants.ts

@@ -21,3 +21,25 @@ export const HANDLE_OFFSET = G.unit / 2;
 
 /** Arrow head length - stub should start within arrowhead (0.25 grid units = 2.5px) */
 export const ARROW_INSET = G.unit / 4;
+
+/** How many routes to recompute synchronously before yielding to the browser. */
+export const ASYNC_BATCH_SIZE = 8;
+
+/** Merge user waypoints closer than this many pixels. */
+export const WAYPOINT_MERGE_THRESHOLD = 15;
+
+/** Treat three waypoints as collinear if the middle one is within this many pixels of the line. */
+export const WAYPOINT_COLLINEAR_THRESHOLD = 5;
+
+/** Default routing-context padding around node bounds (in pixels). */
+export const ROUTING_CONTEXT_PADDING = 100;
+
+/**
+ * Sub-pixel offsets that pull the visible edge endpoint slightly out of the
+ * handle hitbox so the rounded corner geometry doesn't overlap the port.
+ */
+export const EDGE_SOURCE_OFFSET = 0.5;
+export const EDGE_TARGET_OFFSET = 4.5;
+
+/** Rounded-corner radius for orthogonal edges (in pixels). */
+export const EDGE_CORNER_RADIUS = 5;

src/lib/routing/index.ts

@@ -9,7 +9,18 @@ export { calculateRoute, calculateRouteWithWaypoints, calculateSimpleRoute, getP
 export { SparseGrid } from './gridBuilder';
 
 // Constants used by FlowCanvas
-export { ROUTING_MARGIN, HANDLE_OFFSET, ARROW_INSET } from './constants';
+export {
+	ROUTING_MARGIN,
+	HANDLE_OFFSET,
+	ARROW_INSET,
+	ASYNC_BATCH_SIZE,
+	WAYPOINT_MERGE_THRESHOLD,
+	WAYPOINT_COLLINEAR_THRESHOLD,
+	ROUTING_CONTEXT_PADDING,
+	EDGE_SOURCE_OFFSET,
+	EDGE_TARGET_OFFSET,
+	EDGE_CORNER_RADIUS
+} from './constants';
 
 // Types
 export type { Bounds, RoutingContext, RouteResult, Direction, PortStub } from './types';

src/lib/stores/routing.ts

@@ -6,7 +6,18 @@ import { writable, derived, get } from 'svelte/store';
 import type { Position } from '$lib/types/common';
 import type { Connection, Waypoint } from '$lib/types/nodes';
 import type { RoutingContext, RouteResult, Bounds, Direction, PortStub } from '$lib/routing';
-import { calculateRoute, calculateRouteWithWaypoints, calculateSimpleRoute, getPathCells, ROUTING_MARGIN } from '$lib/routing';
+import {
+	calculateRoute,
+	calculateRouteWithWaypoints,
+	calculateSimpleRoute,
+	getPathCells,
+	ROUTING_MARGIN,
+	ASYNC_BATCH_SIZE,
+	WAYPOINT_MERGE_THRESHOLD,
+	WAYPOINT_COLLINEAR_THRESHOLD,
+	ROUTING_CONTEXT_PADDING
+} from '$lib/routing';
+import { DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '$lib/constants/dimensions';
 import { SparseGrid } from '$lib/routing/gridBuilder';
 import { generateId } from '$lib/stores/utils';
 import { graphStore } from '$lib/stores/graph';
@@ -53,9 +64,6 @@ function hashRouteInputs(
 	return `${sourcePos.x},${sourcePos.y}|${targetPos.x},${targetPos.y}|${sourceDir}|${targetDir}|${wpHash}`;
 }
 
-/** Number of routes to calculate per async batch before yielding to browser */
-const ASYNC_BATCH_SIZE = 8;
-
 interface RoutingState {
 	/** Cached routes by connection ID */
 	routes: Map<string, RouteResult>;
@@ -734,8 +742,8 @@ export const routingStore = {
 		const sourcePos = sourceInfo?.position || null;
 		const targetPos = targetInfo?.position || null;
 
-		const MERGE_THRESHOLD = 15; // Pixels - merge waypoints closer than this
-		const COLLINEAR_THRESHOLD = 5; // Pixels - consider collinear if deviation less than this
+		const MERGE_THRESHOLD = WAYPOINT_MERGE_THRESHOLD;
+		const COLLINEAR_THRESHOLD = WAYPOINT_COLLINEAR_THRESHOLD;
 
 		// Helper to check if point is collinear with prev and next
 		const isCollinear = (prev: Position, curr: Position, next: Position): boolean => {
@@ -856,7 +864,7 @@ export const routingStore = {
  */
 export function buildRoutingContext(
 	nodes: Array<{ id: string; position: Position; width?: number; height?: number; measured?: { width?: number; height?: number } }>,
-	padding = 100
+	padding = ROUTING_CONTEXT_PADDING
 ): { nodeBounds: Map<string, Bounds>; canvasBounds: Bounds } {
 	const nodeBounds = new Map<string, Bounds>();
 
@@ -866,8 +874,8 @@ export function buildRoutingContext(
 	let maxY = -Infinity;
 
 	for (const node of nodes) {
-		const width = node.measured?.width ?? node.width ?? 80;
-		const height = node.measured?.height ?? node.height ?? 40;
+		const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+		const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 
 		// Node position is center (nodeOrigin = [0.5, 0.5])
 		const left = node.position.x - width / 2;