feat: remove snapping circle functionality to simplify port interaction visuals and theme configuration

Author: pavanpodila

packages/vyuh_node_flow/lib/src/ports/port_theme.dart

@@ -43,7 +43,6 @@ class PortTheme {
   /// - [connectedColor]: Color when the port has active connections
   /// - [highlightColor]: Color when port is highlighted during connection drag
   /// - [highlightBorderColor]: Border color when port is highlighted
-  /// - [snappingColor]: Color for the snapping circle shown around port during hover
   /// - [borderColor]: Color of the port's border
   /// - [borderWidth]: Width of the port's border in logical pixels
   /// - [showLabel]: Whether to show port labels globally (default: false)
@@ -57,7 +56,6 @@ class PortTheme {
     required this.connectedColor,
     required this.highlightColor,
     required this.highlightBorderColor,
-    required this.snappingColor,
     required this.borderColor,
     required this.borderWidth,
     this.shape = MarkerShapes.capsuleHalf,
@@ -96,12 +94,6 @@ class PortTheme {
   /// that the port is a valid target.
   final Color highlightBorderColor;
 
-  /// The color for the snapping circle shown around the port during hover.
-  ///
-  /// This semi-transparent circle provides visual feedback for the snap area
-  /// around the port where connections can be made.
-  final Color snappingColor;
-
   /// The color of the port's border.
   ///
   /// When [borderWidth] is greater than 0, this color is used for the
@@ -173,7 +165,6 @@ class PortTheme {
     Color? connectedColor,
     Color? highlightColor,
     Color? highlightBorderColor,
-    Color? snappingColor,
     Color? borderColor,
     double? borderWidth,
     MarkerShape? shape,
@@ -188,7 +179,6 @@ class PortTheme {
       connectedColor: connectedColor ?? this.connectedColor,
       highlightColor: highlightColor ?? this.highlightColor,
       highlightBorderColor: highlightBorderColor ?? this.highlightBorderColor,
-      snappingColor: snappingColor ?? this.snappingColor,
       borderColor: borderColor ?? this.borderColor,
       borderWidth: borderWidth ?? this.borderWidth,
       shape: shape ?? this.shape,
@@ -217,7 +207,6 @@ class PortTheme {
     connectedColor: Color(0xFF2196F3),
     highlightColor: Color(0xFF42A5F5),
     highlightBorderColor: Color(0xFF000000),
-    snappingColor: Color(0x4042A5F5),
     borderColor: Colors.transparent,
     borderWidth: 0.0,
     showLabel: false,
@@ -247,7 +236,6 @@ class PortTheme {
     connectedColor: Color(0xFF64B5F6),
     highlightColor: Color(0xFF90CAF9),
     highlightBorderColor: Color(0xFFFFFFFF),
-    snappingColor: Color(0x4090CAF9),
     borderColor: Colors.transparent,
     borderWidth: 0.0,
     showLabel: false,

packages/vyuh_node_flow/lib/src/ports/port_widget.dart

@@ -337,45 +337,25 @@ class _PortWidgetState<T> extends State<PortWidget<T>> {
             builder: (_) {
               // Access observables directly inside Observer for MobX tracking
               final isHighlighted = widget.port.highlighted.value;
-              // Use getter which accesses .value internally for MobX reactivity
-              final isConnecting =
-                  widget.controller.interaction.isCreatingConnection;
 
-              // During connection drag: only show snapping circle for valid (highlighted) targets
-              // When idle: show snapping circle on hover for visual feedback
-              final showSnappingCircle = isConnecting
-                  ? isHighlighted
-                  : _isHovered;
+              // Port highlights when:
+              // 1. Hovered over (idle state) - provides interactive feedback
+              // 2. Valid target during connection drag - isHighlighted set by controller
+              final showHighlight = _isHovered || isHighlighted;
 
-              return UnboundedStack(
+              return Stack(
                 clipBehavior: Clip.none,
                 children: [
-                  // Snapping circle - shows on hover OR when highlighted during connection drag
-                  if (showSnappingCircle)
-                    Positioned(
-                      left: -widget.snapDistance,
-                      top: -widget.snapDistance,
-                      right: -widget.snapDistance,
-                      bottom: -widget.snapDistance,
-                      child: IgnorePointer(
-                        child: DecoratedBox(
-                          decoration: BoxDecoration(
-                            color: widget.theme.snappingColor,
-                            shape: BoxShape.circle,
-                          ),
-                        ),
-                      ),
-                    ),
-                  // Marker shape - visual appearance reacts to highlighted state
+                  // Marker shape - visual appearance reacts to hover and highlight state
                   Positioned.fill(
                     child: IgnorePointer(
                       child: PortShapeWidget(
                         shape: widget.port.shape ?? widget.theme.shape,
                         position: widget.port.position,
                         size: effectiveSize,
-                        color: _getPortColorFromHighlight(isHighlighted),
+                        color: _getPortColorFromHighlight(showHighlight),
                         borderColor: _getBorderColorFromHighlight(
-                          isHighlighted,
+                          showHighlight,
                         ),
                         borderWidth: _getBorderWidth(),
                       ),