Node Editor

Overview#

The Node Editor provides a Unity Shader Graph-style visual programming interface built on React Flow. It enables node-based editing for workflows, data processing pipelines, and scene object control through an intuitive drag-and-drop interface with real-time synchronization.

Node Types#

Regular Nodes#

Special Nodes#

Object Node

• Drag from Hierarchy: Drag scene objects to create nodes
• Display: Shows object name and type
• Components: Collapsible component groups
• Ports: Typed input/output ports for each field
• Sync: Real-time property synchronization
• Width: 320px

Object Group Node

• Filter: By Name (wildcards supported) or Tag
• Toggle: Circular buttons for filter type selection
• Components: Add/remove components via dropdown
• Count: Shows number of filtered objects
• Batch Control: Control multiple objects at once
• Width: 320px

Group Node

• Purpose: Visual organization container
• Header: Draggable with grip indicators
• Rename: Double-click header to edit name
• Resize: Draggable invisible borders
• Hierarchy: Support parent-child relationships
• Style: Semi-transparent background
• Size: Default 400x300px, Min 300x200px

Note Node

• Purpose: Sticky note for comments
• Edit: Double-click to edit (selects all text)
• Resize: Triangle handle at bottom-right
• Theme: Yellow in light mode, dark gray in dark
• Size: Default 250x150px, Min 150x100px

Parameter Node

• Link: Linked to Hyper Parameters panel
• Create: Drag from panel to canvas
• Sync: Synchronized with parameter list
• Delete: Removing parameter deletes all linked nodes

Canvas Controls#

Mouse Controls#

Hyper Parameters Panel#

Located on the left side of the editor, this panel manages differentiable parameters for optimization workflows.

Features#

• Add Parameters: Float, Vector2, Vector3, Vector4, Color, Bool
• Inline Editing: Edit parameter names directly
• Drag to Canvas: Create parameter nodes by dragging
• Delete: Remove parameters and all linked nodes

Differentiable Toggle#

Mark parameters as differentiable for gradient-based optimization:

• Visual Indicator: Connected edges show animated blue dashed outline
• Edge Width: 8px for differentiable connections
• Animation: Backward flow animation (from output to input)
• Color: Preserves original edge color with blue dashed overlay

Real-time Sync System#

Architecture#

User Action → Local State → Store → WebSocket → Other Clients

Key Principles#

• Local-First Updates: Immediate UI response
• Debounced Sync: Batch rapid changes (300ms)
• Interaction Protection: Block sync during drag operations
• Unidirectional Flow: Clear data flow path

State Layers#

1. React Flow State: Immediate UI state for responsiveness
2. Node Editor Store: Coordination layer for state management
3. WebSocket Service: Network communication for multi-client sync
4. Backend Scene: Persistent storage and authoritative state

Debouncing Delays#

Visual Styling#

Port Colors#

Following Unity conventions:

Theme Support#

• Dark Theme: Default theme
• Light Theme: Compatible with light mode
• Theme-Aware: Colors adapt to theme

Selection Styling#

• Highlight: #4a9eff
• No Bounding Box: Cleaner look
• Border: Blue border on selected

Keyboard Shortcuts#

Usage Examples#