fix: hit testing outside the bounds of resizer and group-annotation

Author: pavanpodila

packages/vyuh_node_flow/lib/annotations/group_annotation_widget.dart

@@ -5,6 +5,7 @@ import '../graph/cursor_theme.dart';
 import '../graph/node_flow_controller.dart';
 import '../graph/node_flow_theme.dart';
 import '../shared/resizer_widget.dart';
+import '../shared/unbounded_widgets.dart';
 import 'group_annotation.dart';
 
 /// Widget that renders a group annotation with resize handles when selected.
@@ -57,52 +58,57 @@ class GroupAnnotationWidget extends StatelessWidget {
           isInteractive: group.isInteractive,
         );
 
+        // Use UnboundedStack to allow hit testing on resize handles
+        // that extend outside the annotation bounds
         return Positioned(
           left: position.dx,
           top: position.dy,
-          child: MouseRegion(
-            cursor: cursor,
-            child: GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onDoubleTap: onDoubleTap,
-              onSecondaryTapUp: onContextMenu != null
-                  ? (details) => onContextMenu!(details.globalPosition)
-                  : null,
-              onPanStart: (_) => controller.startAnnotationDrag(group.id),
-              onPanUpdate: (details) =>
-                  controller.moveAnnotationDrag(details.delta),
-              onPanEnd: (_) => controller.endAnnotationDrag(),
-              child: SizedBox(
-                width: groupSize.width,
-                height: groupSize.height,
-                child: isSelected && group.isResizable
-                    ? ResizerWidget(
-                        handleSize: theme.resizerTheme.handleSize,
-                        color: theme.resizerTheme.color,
-                        borderColor: theme.resizerTheme.borderColor,
-                        borderWidth: theme.resizerTheme.borderWidth,
-                        snapDistance: theme.resizerTheme.snapDistance,
-                        onResizeStart: (handle) => controller.annotations
-                            .startGroupResize(group.id, _toGroupHandle(handle)),
-                        onResizeUpdate: (delta) =>
-                            controller.annotations.updateGroupResize(delta),
-                        onResizeEnd: () =>
-                            controller.annotations.endGroupResize(),
-                        child: _GroupContent(
-                          group: group,
-                          controller: controller,
-                          isSelected: isSelected,
-                          isHighlighted: isHighlighted,
-                        ),
-                      )
-                    : _GroupContent(
-                        group: group,
-                        controller: controller,
-                        isSelected: isSelected,
-                        isHighlighted: isHighlighted,
-                      ),
+          width: groupSize.width,
+          height: groupSize.height,
+          child: UnboundedStack(
+            clipBehavior: Clip.none,
+            children: [
+              // The annotation content
+              Positioned.fill(
+                child: MouseRegion(
+                  cursor: cursor,
+                  child: GestureDetector(
+                    behavior: HitTestBehavior.opaque,
+                    onDoubleTap: onDoubleTap,
+                    onSecondaryTapUp: onContextMenu != null
+                        ? (details) => onContextMenu!(details.globalPosition)
+                        : null,
+                    onPanStart: (_) => controller.startAnnotationDrag(group.id),
+                    onPanUpdate: (details) =>
+                        controller.moveAnnotationDrag(details.delta),
+                    onPanEnd: (_) => controller.endAnnotationDrag(),
+                    child: _GroupContent(
+                      group: group,
+                      controller: controller,
+                      isSelected: isSelected,
+                      isHighlighted: isHighlighted,
+                    ),
+                  ),
+                ),
               ),
-            ),
+              // Resize handles as overlay (only when selected and resizable)
+              if (isSelected && group.isResizable)
+                Positioned.fill(
+                  child: ResizerWidget(
+                    handleSize: theme.resizerTheme.handleSize,
+                    color: theme.resizerTheme.color,
+                    borderColor: theme.resizerTheme.borderColor,
+                    borderWidth: theme.resizerTheme.borderWidth,
+                    snapDistance: theme.resizerTheme.snapDistance,
+                    onResizeStart: (handle) => controller.annotations
+                        .startGroupResize(group.id, _toGroupHandle(handle)),
+                    onResizeUpdate: (delta) =>
+                        controller.annotations.updateGroupResize(delta),
+                    onResizeEnd: () => controller.annotations.endGroupResize(),
+                    child: const SizedBox.expand(),
+                  ),
+                ),
+            ],
           ),
         );
       },

packages/vyuh_node_flow/lib/graph/resizer_theme.dart

@@ -72,7 +72,7 @@ class ResizerTheme {
   ///
   /// Uses white fill with blue border for visibility on light backgrounds.
   static const light = ResizerTheme(
-    handleSize: 10.0,
+    handleSize: 8.0,
     color: Colors.white,
     borderColor: Colors.blue,
     borderWidth: 1.0,
@@ -83,7 +83,7 @@ class ResizerTheme {
   ///
   /// Uses dark fill with lighter blue border for visibility on dark backgrounds.
   static const dark = ResizerTheme(
-    handleSize: 10.0,
+    handleSize: 8.0,
     color: Color(0xFF1E1E1E),
     borderColor: Color(0xFF64B5F6),
     // Colors.blue[300]

packages/vyuh_node_flow/lib/shared/resizer_widget.dart

@@ -242,7 +242,7 @@ class ResizerWidget extends StatelessWidget {
     required this.onResizeStart,
     required this.onResizeUpdate,
     required this.onResizeEnd,
-    this.handleSize = 10.0,
+    this.handleSize = 8.0,
     this.color = Colors.white,
     this.borderColor = Colors.blue,
     this.borderWidth = 1.0,
@@ -351,7 +351,6 @@ class ResizerWidget extends StatelessWidget {
             decoration: BoxDecoration(
               color: color,
               border: Border.all(color: borderColor, width: borderWidth),
-              borderRadius: BorderRadius.circular(2),
             ),
           ),
         ),