Why Node-Based?

When designing complex data-flow systems, we face a fundamental choice: Layer-based or Node-based?

Historically, node-based systems were reserved for high-end, professional applications. However, in recent years—driven by the AI explosion—tools like ComfyUI have brought the node-based paradigm into the mainstream. While Blender’s Nodes were influential earlier, ComfyUI truly demonstrated what "clear generation logic" looks like. Even without touching the controls, a user can instantly see how data flows from left to right, how it’s synthesized, and where the final result originates.

We chose a node-based architecture for a very simple reason: Full Visualization of the Calculation Process.

1. Visual Calculation Path: Every step of the operation is transparent. Users can intuitively understand the upstream and downstream dependencies of their data.
2. Extreme Debugging Efficiency: When a result is incorrect, the "Method of Exclusion" allows for incredibly fast pinpointing of the specific faulty node. This is far more efficient than hunting through stacks of layers or hidden modifiers.
3. Explicit Dependency Mapping: While advanced software like Blender introduced concepts like "Attribute Nodes" (Wireless/Hidden Connections) for power users, we currently prioritize physical, transparent links. This ensures that logic remains traceable at all times.

The Input-Output system treats this transparency as a core competency, giving both developers and users a "God's eye view" when navigating complex engineering computations.

System Architecture

The Input-Output engine is architected as a Digital Organism. We separate "Thinking" from "Sensing" to maintain a clean boundary between mathematical logic and user interaction.

• Source: src/engine/Brain.ts
• Role: The central source of truth and the "Command Center".
• Core Responsibilities:
  • Computation: Handles all mathematical evaluations and data transformations.
  • Topology Manager: Orchestrates the "Dirty Chain" to ensure efficient incremental updates.
  • Transaction Log: Maintains an immutable history of all graph changes for perfect Undo/Redo.

These specialized React hooks act as sensory organs, translating physical interactions into digital commands for the Brain.

• Source: src/hooks/nerves/useHand.ts
• Role: Manages all physical interactions with nodes.
• Capabilities: Orchestrates grabbing, scaling, rotating, and autopanning. It composes the utility hooks for a complete motor system.

• Source: src/hooks/nerves/useEye.ts
• Role: Manages the system's "Sight"—the React Flow viewport.
• Capabilities: Handles camera focus, automatic view fitting (fitView), and spatial awareness of nodes on the infinite canvas.

• Source: src/hooks/nerves/useEar.ts
• Role: "Listens" to keyboard events and global shortcuts.
• Capabilities: Dispatches system actions (like Undo/Redo/Delete) and manages low-level key state tracking.

• Source: src/hooks/nerves/useMouth.ts
• Role: Handles all Data I/O—Import (Eating) and Export (Speaking).
• Capabilities: Generates IOGL/JSON blueprints and consumes LaTeX strings to "feed" the Brain new logic.

• Source: src/hooks/nerves/useNose.ts
• Role: Detects data types and property "scents" in a passive manner.

Auxiliary logic providers located at the src/hooks/ root.

• layoutEngine.ts: High-performance ELK-based graph layout calculations.
• useKnife.ts: Surgical tool for slicing connections.
• useSelection.ts: Logic for complex multi-node operations (Bundle, Swap, Reset).
• useClipboard.ts: Persistence layer for "Genetic Copying" (Copy/Paste).

• Source: src/components/Body.tsx
• Role: The physical interface. It "Pulls" current results from the Brain and renders them onto the canvas using the React Flow viewport managed by useEye.