ElementScope class

A unified interaction scope for draggable elements (nodes, annotations, ports).

This widget provides consistent gesture handling and drag lifecycle management across all interactive elements in the node flow editor. It solves the problem of gesture recognizer callbacks not firing when widgets rebuild during drag operations (due to MobX Observer rebuilds).

Key Features

1. StatefulWidget Architecture: The State object persists across widget rebuilds, maintaining drag state even when the parent Observer rebuilds.

2. Local Drag Tracking: Uses _isDragging to track whether this widget instance started a drag, preventing duplicate start/end calls.

3. Dispose Cleanup: If the widget is removed while dragging (e.g., element deleted), dispose() ensures proper cleanup by calling onDragEnd.

4. Guard Clauses: All drag methods check _isDragging state to prevent invalid operations (double-start, end without start, etc.).

5. Pointer ID Tracking: Tracks which pointer started the drag to prevent interference from other pointers (e.g., trackpad taps during mouse drag).

Gesture Handling

Uses RawGestureDetector with NonTrackpadPanGestureRecognizer to:

• Handle mouse/touch drag gestures
• Reject trackpad gestures (allowing them to bubble up for canvas panning)
• Support double-tap and context menu (right-click) gestures

Widget Tree Structure

ElementScope (StatefulWidget)
└── Listener (immediate tap feedback, pointer ID tracking)
    └── RawGestureDetector (drag, double-tap, context menu)
        └── MouseRegion (cursor, hover callbacks)
            └── child (provided by parent)

Example Usage

For element movement (nodes, annotations):

ElementScope(
  onDragStart: (_) => controller.startNodeDrag(nodeId),
  onDragUpdate: (details) => controller.moveNodeDrag(details.delta),
  onDragEnd: (_) => controller.endNodeDrag(),
  onTap: () => controller.selectNode(nodeId),
  cursor: SystemMouseCursors.grab,
  child: NodeVisual(...),
)

For connection creation (ports):

ElementScope(
  onDragStart: (details) => controller.startConnection(details.globalPosition),
  onDragUpdate: (details) => controller.updateConnection(details.globalPosition),
  onDragEnd: (details) => controller.completeConnection(),
  dragStartBehavior: DragStartBehavior.down, // Start immediately on pointer down
  child: PortVisual(...),
)

See also:

• NodeWidget which uses this for node interactions
• AnnotationWidget which uses this for annotation interactions
• PortWidget which uses this for connection creation