NodeWidget<T> class

A unified node widget that handles positioning, rendering, and interactions.

This widget is the primary UI component for rendering nodes in the flow graph. It handles:

• Positioning and sizing based on Node state
• Rendering ports at appropriate positions
• Applying theme-based or custom styling
• Managing user interactions (taps, hovers)
• Reactive updates via MobX observables

The widget supports two usage patterns:

1. Custom content: Provide a child widget for complete control over node appearance
2. Default style: Use NodeWidget.defaultStyle for standard node rendering

Appearance can be customized per-node by providing optional appearance parameters which will override values from the theme.

Example with custom content:

NodeWidget<MyData>(
  node: myNode,
  child: MyCustomNodeContent(data: myNode.data),
  onNodeTap: (nodeId) => print('Tapped: $nodeId'),
  backgroundColor: Colors.blue.shade50,
)

Example with default style:

NodeWidget<MyData>.defaultStyle(
  node: myNode,
  connections: connections,
  onPortTap: handlePortTap,
)

See also:

• Node, the data model for nodes
• NodeTheme, which defines default styling
• PortWidget, which renders individual ports