Gestures (#19)

* feat: leveraging gesture detectors to handle nodes, ports, annotations. Only connections leverage the top-level listener. This ensures that we can have widgets and interactive widgets inside nodes and annotations, and have it even work outside the original stack bounds.

* feat: enhance interaction handling with connection hover states and streamline zoom-related logic

* fix: connection validation example

* chore(release): publish packages

 - [email protected]

Author: pavanpodila

packages/demo/lib/example_registry.dart

@@ -22,10 +22,11 @@ import 'examples/advanced/workbench.dart';
 import 'examples/basics/callbacks.dart';
 import 'examples/basics/controlling_nodes.dart';
 import 'examples/basics/dynamic_ports.dart';
+// Connections examples
+import 'examples/basics/interactive_widgets.dart';
 import 'examples/basics/minimap.dart';
 import 'examples/basics/node_shapes.dart';
 import 'examples/basics/port_labels.dart';
-// Connections examples
 import 'examples/basics/ports.dart';
 import 'examples/basics/simple.dart';
 
@@ -101,6 +102,14 @@ class ExampleRegistry {
           icon: Icons.monitor_heart,
           builder: (_) => const CallbacksExample(),
         ),
+        Example(
+          id: 'interactive-widgets',
+          title: 'Interactive Node Widgets',
+          description:
+              'Test buttons, text fields, and sliders inside nodes - drag nodes outside bounds to verify gestures work',
+          icon: Icons.touch_app,
+          builder: (_) => const InteractiveWidgetsExample(),
+        ),
       ],
     ),
 

packages/demo/lib/examples/advanced/animated_connections.dart

@@ -263,7 +263,7 @@ class _AnimatedConnectionsExampleState
       position: const Offset(50, 180),
       size: const Size(150, 80),
       data: {'label': 'Data Source'},
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out_right',
           name: 'Output',
@@ -291,15 +291,15 @@ class _AnimatedConnectionsExampleState
       position: const Offset(350, 180),
       size: const Size(150, 80),
       data: {'label': 'Processor Middle'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in_left',
           name: 'Input',
           position: PortPosition.left,
           offset: Offset(-2, 40),
         ),
       ],
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out_right',
           name: 'Output',
@@ -315,7 +315,7 @@ class _AnimatedConnectionsExampleState
       position: const Offset(650, 180),
       size: const Size(150, 80),
       data: {'label': 'Data Sync'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in_left',
           name: 'Input',
@@ -344,15 +344,15 @@ class _AnimatedConnectionsExampleState
       position: const Offset(350, 30),
       size: const Size(150, 80),
       data: {'label': 'Processor Top'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in_bottom',
           name: 'Input',
           position: PortPosition.bottom,
           offset: Offset(75, 2),
         ),
       ],
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out_top',
           name: 'Output',
@@ -368,15 +368,15 @@ class _AnimatedConnectionsExampleState
       position: const Offset(350, 330),
       size: const Size(150, 80),
       data: {'label': 'Processor Bottom'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in_top',
           name: 'Input',
           position: PortPosition.top,
           offset: Offset(75, -2),
         ),
       ],
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out_bottom',
           name: 'Output',

packages/demo/lib/examples/advanced/connection_labels.dart

@@ -164,8 +164,8 @@ class _ConnectionLabelsStore {
         position: const Offset(100, 150),
         data: {'label': 'Source Node'},
         size: const Size(150, 80),
-        inputPorts: const [],
-        outputPorts: const [
+        inputPorts: [],
+        outputPorts: [
           Port(
             id: 'out-1',
             name: 'Out',
@@ -180,24 +180,24 @@ class _ConnectionLabelsStore {
         position: const Offset(400, 150),
         data: {'label': 'Target Node'},
         size: const Size(150, 80),
-        inputPorts: const [
+        inputPorts: [
           Port(
             id: 'in-1',
             name: 'In',
             position: PortPosition.left,
             offset: Offset(-2, 40),
           ),
         ],
-        outputPorts: const [],
+        outputPorts: [],
       ),
       Node<Map<String, dynamic>>(
         id: 'node-3',
         type: 'simple',
         position: const Offset(100, 300),
         data: {'label': 'Input A'},
         size: const Size(150, 80),
-        inputPorts: const [],
-        outputPorts: const [
+        inputPorts: [],
+        outputPorts: [
           Port(
             id: 'out-3',
             name: 'Out',
@@ -212,15 +212,15 @@ class _ConnectionLabelsStore {
         position: const Offset(400, 300),
         data: {'label': 'Output B'},
         size: const Size(150, 80),
-        inputPorts: const [
+        inputPorts: [
           Port(
             id: 'in-4',
             name: 'In',
             position: PortPosition.left,
             offset: Offset(-2, 40),
           ),
         ],
-        outputPorts: const [],
+        outputPorts: [],
       ),
     ];
 

packages/demo/lib/examples/advanced/editable_connections.dart

@@ -52,7 +52,7 @@ class _EditableConnectionsExampleState
         position: const Offset(100, 100),
         data: {'label': 'Input A'},
         size: const Size(150, 100),
-        outputPorts: const [
+        outputPorts: [
           Port(
             id: 'output',
             name: 'Out',
@@ -67,7 +67,7 @@ class _EditableConnectionsExampleState
         position: const Offset(100, 250),
         data: {'label': 'Input B'},
         size: const Size(150, 100),
-        outputPorts: const [
+        outputPorts: [
           Port(
             id: 'output',
             name: 'Out',
@@ -82,7 +82,7 @@ class _EditableConnectionsExampleState
         position: const Offset(400, 150),
         data: {'label': 'Process'},
         size: const Size(150, 120),
-        inputPorts: const [
+        inputPorts: [
           Port(
             id: 'input1',
             name: 'In 1',
@@ -96,7 +96,7 @@ class _EditableConnectionsExampleState
             offset: Offset(-2, 80),
           ),
         ],
-        outputPorts: const [
+        outputPorts: [
           Port(
             id: 'output',
             name: 'Out',
@@ -111,7 +111,7 @@ class _EditableConnectionsExampleState
         position: const Offset(700, 175),
         data: {'label': 'Output'},
         size: const Size(150, 100),
-        inputPorts: const [
+        inputPorts: [
           Port(
             id: 'input',
             name: 'In',

packages/demo/lib/examples/advanced/serialization.dart

@@ -65,7 +65,7 @@ class _SerializationExampleState extends State<SerializationExample> {
       position: const Offset(100, 150),
       size: const Size(150, 80),
       data: {'label': 'Input', 'value': 42},
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out',
           name: 'Output',
@@ -81,15 +81,15 @@ class _SerializationExampleState extends State<SerializationExample> {
       position: const Offset(350, 100),
       size: const Size(150, 100),
       data: {'label': 'Process A', 'operation': 'multiply'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in',
           name: 'Input',
           position: PortPosition.left,
           offset: Offset(-2, 50), // Vertical center of 100 height
         ),
       ],
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out',
           name: 'Result',
@@ -105,15 +105,15 @@ class _SerializationExampleState extends State<SerializationExample> {
       position: const Offset(350, 250),
       size: const Size(150, 100),
       data: {'label': 'Process B', 'operation': 'add'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in',
           name: 'Input',
           position: PortPosition.left,
           offset: Offset(-2, 50), // Vertical center of 100 height
         ),
       ],
-      outputPorts: const [
+      outputPorts: [
         Port(
           id: 'out',
           name: 'Result',
@@ -129,7 +129,7 @@ class _SerializationExampleState extends State<SerializationExample> {
       position: const Offset(600, 150),
       size: const Size(150, 80),
       data: {'label': 'Output', 'format': 'json'},
-      inputPorts: const [
+      inputPorts: [
         Port(
           id: 'in1',
           name: 'Input 1',

packages/demo/lib/examples/advanced/theming.dart

@@ -166,6 +166,7 @@ class _ThemingExampleState extends State<ThemingExample> {
           id: 'in-bottom',
           name: 'Bottom',
           position: PortPosition.bottom,
+          type: PortType.input,
           offset: const Offset(75, 2), // Horizontal center at mid-width
           shape: _selectedPortShape,
           showLabel: true,
@@ -285,32 +286,34 @@ class _ThemingExampleState extends State<ThemingExample> {
   /// Custom port builder that colors ports based on whether they're input or output
   Widget _buildCustomPort(
     BuildContext context,
+    NodeFlowController<Map<String, dynamic>> controller,
     Node<Map<String, dynamic>> node,
     Port port,
     bool isOutput,
     bool isConnected,
-    bool isHighlighted,
+    Rect nodeBounds,
   ) {
     final portTheme = _theme.portTheme;
 
     // Use different colors for input vs output ports
+    // Note: Highlighting is handled via Port.highlighted observable
     final baseColor = isOutput ? Colors.green : Colors.blue;
-    final color = isHighlighted
-        ? baseColor.shade700
-        : isConnected
-        ? baseColor.shade400
-        : baseColor.shade200;
+    final color = isConnected ? baseColor.shade400 : baseColor.shade200;
 
     return PortWidget(
       port: port,
       theme: portTheme,
+      controller: controller,
+      nodeId: node.id,
+      isOutput: isOutput,
+      nodeBounds: nodeBounds,
       isConnected: isConnected,
-      isHighlighted: isHighlighted,
       color: color,
       connectedColor: baseColor.shade400,
-      snappingColor: baseColor.shade700,
+      highlightColor: baseColor.shade300,
+      highlightBorderColor: baseColor.shade900,
       borderColor: baseColor.shade800,
-      borderWidth: isHighlighted ? 2.0 : 1.0,
+      borderWidth: 1.0,
     );
   }
 
@@ -320,6 +323,7 @@ class _ThemingExampleState extends State<ThemingExample> {
     Connection connection,
     ConnectionLabel label,
     Rect position,
+    void Function()? onTap,
   ) {
     final labelTheme = _theme.labelTheme;