Merge pull request #239 from pathsim/feature/sync-mimo-ports

sync mimo ports

Author: milanofthe

README.md

@@ -59,6 +59,7 @@ src/
 │   │   ├── core/          # Constants, types, utilities
 │   │   ├── processing/    # Data processing, render queue
 │   │   └── renderers/     # Plotly and SVG renderers
+│   ├── routing/           # Orthogonal wire routing (A* pathfinding)
 │   ├── pyodide/           # Python runtime (backend, bridge)
 │   │   └── backend/       # Modular backend system (registry, state, types)
 │   │       └── pyodide/   # Pyodide Web Worker implementation
@@ -120,6 +121,19 @@ Worker (10 Hz)              Main Thread                 UI (10 Hz)
 - **Non-blocking**: Simulation never waits for plot rendering
 - **extendTraces**: Scope plots append data incrementally instead of full re-render
 
+### Wire Routing
+
+PathView uses Simulink-style orthogonal wire routing with A* pathfinding:
+
+- **Automatic routing**: Wires route around nodes with 90° bends only
+- **User waypoints**: Press `\` on selected edge to add manual waypoints
+- **Draggable waypoints**: Drag waypoint markers to reposition, double-click to delete
+- **Segment dragging**: Drag segment midpoints to create new waypoints
+- **Incremental updates**: Spatial indexing (O(1) node updates) for smooth dragging
+- **Hybrid routing**: Routes through user waypoints: Source → A* → W1 → A* → Target
+
+Key files: `src/lib/routing/` (pathfinder, grid builder, route calculator)
+
 ### Key Abstractions
 
 | Layer | Purpose | Key Files |
@@ -203,6 +217,27 @@ This generates TypeScript files in `src/lib/*/generated/` with:
 
 Start the dev server and check that your block appears in the Block Library panel.
 
+### Port Synchronization
+
+Some blocks process inputs as parallel paths where each input has a corresponding output (e.g., Integrator, Amplifier, Sin). For these blocks, the UI only shows input port controls and outputs auto-sync.
+
+Configure in `src/lib/nodes/uiConfig.ts`:
+
+```typescript
+export const syncPortBlocks = new Set([
+  'Integrator',
+  'Differentiator',
+  'Delay',
+  'PID',
+  'PID_Antiwindup',
+  'Amplifier',
+  'Sin', 'Cos', 'Tan', 'Tanh',
+  'Abs', 'Sqrt', 'Exp', 'Log', 'Log10',
+  'Mod', 'Clip', 'Pow',
+  'SampleHold'
+]);
+```
+
 ---
 
 ## Adding New Toolboxes
@@ -448,6 +483,7 @@ Press `?` to see all shortcuts in the app. Key shortcuts:
 | **Transform** | `R` | Rotate 90° |
 | | `X` / `Y` | Flip H/V |
 | | `Arrows` | Nudge selection |
+| **Wires** | `\` | Add waypoint to selected edge |
 | **View** | `F` | Fit view |
 | | `H` | Go to root |
 | | `T` | Toggle theme |

src/lib/components/nodes/BaseNode.svelte

@@ -89,6 +89,7 @@
 	// Check if this node allows dynamic ports
 	const allowsDynamicInputs = $derived(typeDef?.ports.maxInputs === null);
 	const allowsDynamicOutputs = $derived(typeDef?.ports.maxOutputs === null);
+	const syncPorts = $derived(typeDef?.ports.syncPorts ?? false);
 
 	// Rotation state (0, 1, 2, 3 = 0°, 90°, 180°, 270°) - stored in node params
 	const rotation = $derived((data.params?.['_rotation'] as number) || 0);
@@ -348,8 +349,8 @@
 		</div>
 	{/if}
 
-	<!-- Port controls for dynamic outputs (only show when selected) -->
-	{#if allowsDynamicOutputs && selected}
+	<!-- Port controls for dynamic outputs (only show when selected, hide for syncPorts blocks) -->
+	{#if allowsDynamicOutputs && selected && !syncPorts}
 		<div class="port-controls port-controls-output" class:port-controls-right={rotation === 0} class:port-controls-bottom={rotation === 1} class:port-controls-left={rotation === 2} class:port-controls-top={rotation === 3}>
 			<button class="port-btn" onclick={handleAddOutput} ondblclick={(e) => e.stopPropagation()} title="Add output">+</button>
 			<button class="port-btn" onclick={handleRemoveOutput} ondblclick={(e) => e.stopPropagation()} disabled={data.outputs.length <= minOutputs} title="Remove output">-</button>

src/lib/nodes/defineNode.ts

@@ -19,6 +19,7 @@ interface DefineNodeOptions {
 	minOutputs?: number;
 	maxInputs?: number | null; // null = unlimited
 	maxOutputs?: number | null;
+	syncPorts?: boolean; // When true, output count always equals input count
 
 	// Shape override (defaults based on category)
 	shape?: NodeShape;
@@ -52,6 +53,7 @@ export function defineNode(options: DefineNodeOptions): NodeTypeDefinition {
 		minOutputs = 1,
 		maxInputs = null,
 		maxOutputs = null,
+		syncPorts,
 		shape,
 		params = {}
 	} = options;
@@ -89,7 +91,8 @@ export function defineNode(options: DefineNodeOptions): NodeTypeDefinition {
 			minInputs,
 			minOutputs,
 			maxInputs,
-			maxOutputs
+			maxOutputs,
+			syncPorts
 		},
 
 		params: paramDefs

src/lib/nodes/registry.ts

@@ -6,6 +6,7 @@
 import type { NodeTypeDefinition, NodeCategory, ParamDefinition, ParamType } from './types';
 import { defineNode } from './defineNode';
 import { extractedBlocks, blockConfig, type ExtractedBlock } from './generated/blocks';
+import { syncPortBlocks } from './uiConfig';
 
 class NodeRegistry {
 	private nodes: Map<string, NodeTypeDefinition> = new Map();
@@ -150,6 +151,7 @@ function createNodeFromExtracted(
 		outputs,
 		maxInputs,
 		maxOutputs,
+		syncPorts: syncPortBlocks.has(name),
 		params
 	});
 

src/lib/nodes/uiConfig.ts

@@ -0,0 +1,36 @@
+/**
+ * UI-specific block configuration
+ * Separate from auto-generated blocks.ts to allow UI behavior overrides
+ */
+
+/**
+ * Blocks where output port count must equal input port count.
+ * These blocks process inputs as parallel paths - each input has a corresponding output.
+ * UI shows only input port controls; outputs auto-sync.
+ */
+export const syncPortBlocks = new Set([
+	// Dynamic blocks (parallel integration/differentiation/delay)
+	'Integrator',
+	'Differentiator',
+	'Delay',
+	'PID',
+	'PID_Antiwindup',
+
+	// Algebraic blocks (element-wise operations)
+	'Amplifier',
+	'Sin',
+	'Cos',
+	'Tan',
+	'Tanh',
+	'Abs',
+	'Sqrt',
+	'Exp',
+	'Log',
+	'Log10',
+	'Mod',
+	'Clip',
+	'Pow',
+
+	// Mixed blocks (parallel sampling)
+	'SampleHold'
+]);

src/lib/stores/graph/ports.ts

@@ -66,8 +66,9 @@ function updateParentSubsystem(
 
 /**
  * Internal: Add a port to a node
+ * @param syncFollowUp - If true, this is a follow-up call from syncPorts logic (prevents recursion)
  */
-function addPort(nodeId: string, direction: PortDirection): boolean {
+function addPort(nodeId: string, direction: PortDirection, syncFollowUp = false): boolean {
 	const currentGraph = getCurrentGraph();
 	const node = currentGraph.nodes.get(nodeId);
 	if (!node) return false;
@@ -128,13 +129,19 @@ function addPort(nodeId: string, direction: PortDirection): boolean {
 		[config.portsKey]: [...(n[config.portsKey] as PortInstance[]), newPort]
 	}));
 
+	// Sync outputs to match inputs for parallel-path blocks
+	if (!syncFollowUp && direction === 'input' && typeDef?.ports.syncPorts) {
+		addPort(nodeId, 'output', true);
+	}
+
 	return true;
 }
 
 /**
  * Internal: Remove the last port from a node
+ * @param syncFollowUp - If true, this is a follow-up call from syncPorts logic (prevents recursion)
  */
-function removePort(nodeId: string, direction: PortDirection): boolean {
+function removePort(nodeId: string, direction: PortDirection, syncFollowUp = false): boolean {
 	const currentGraph = getCurrentGraph();
 	const node = currentGraph.nodes.get(nodeId);
 	if (!node) return false;
@@ -194,6 +201,11 @@ function removePort(nodeId: string, direction: PortDirection): boolean {
 		})
 	);
 
+	// Sync outputs to match inputs for parallel-path blocks
+	if (!syncFollowUp && direction === 'input' && typeDef?.ports.syncPorts) {
+		removePort(nodeId, 'output', true);
+	}
+
 	return true;
 }
 

src/lib/types/nodes.ts

@@ -67,6 +67,7 @@ export interface NodeTypeDefinition {
 		minOutputs: number; // minimum number of output ports (default 1)
 		maxInputs: number | null; // null = unlimited
 		maxOutputs: number | null;
+		syncPorts?: boolean; // When true, output count always equals input count (parallel paths)
 	};
 
 	// Parameter definitions