NodeWidget<T> class

A unified node widget that handles positioning, rendering, and interactions for both regular nodes and annotations.

This widget is the primary UI component for rendering all graph elements. It handles:

• Positioning and sizing based on Node state
• Rendering ports at appropriate positions (for nodes in middle layer)
• Applying theme-based or custom styling
• Reactive updates via MobX observables
• Gesture handling (tap, double-tap, drag, context menu, hover)
• Resize handles for resizable elements (annotations)
• Self-rendering nodes via Node.buildWidget

Gesture handling is delegated to ElementScope which provides:

• Consistent drag lifecycle management
• Proper cleanup on widget disposal
• Guard clauses to prevent duplicate start/end calls

The widget supports three rendering modes:

1. Self-rendering: When Node.buildWidget returns non-null, it's used directly
2. Custom content: Provide a child widget for complete control over node appearance
3. Default style: Use NodeWidget.defaultStyle for standard node rendering

Layer-Based Behavior

The widget automatically adjusts behavior based on Node.layer:

• Background/Foreground: Uses annotation drag methods and styling
• Middle (default): Uses node drag methods and styling

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),
  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
• ElementScope, which handles gesture lifecycle
• ResizerWidget, which provides resize handles for resizable nodes