Merge pull request #270 from Afroz-Shaikh/fix/plain-needle-hittest-area

Fix : HitTest Area fix for Plain Needle

Author: geekruchika

lib/src/radial_gauge/pointer/needle_pointer_painter.dart

@@ -144,6 +144,7 @@ class RenderNeedlePointer extends RenderBox {
   @override
   bool hitTestSelf(Offset position) {
     Offset calulatedPosition = localToGlobal(position);
+
     if (needlePointerRect.contains(calulatedPosition)) {
       return true;
     } else if (needlePointerRect.contains(position)) {
@@ -156,7 +157,6 @@ class RenderNeedlePointer extends RenderBox {
 
   @override
   void performLayout() {
-    // size = Size(_needleWidth + _tailRadius, _needleHeight);
     size = Size(constraints.maxWidth, constraints.maxHeight);
   }
 
@@ -227,8 +227,25 @@ class RenderNeedlePointer extends RenderBox {
 
     needlePath.close();
 
-    needlePointerRect = needlePath;
-    // canvas.drawPath(needlePath, Paint()..color = Colors.green);
+    final hitTestWidth = _needleWidth;
+
+    final dx = needleEndX - needleStartX;
+    final dy = needleEndY - needleStartY;
+
+    final norm = sqrt(dx * dx + dy * dy);
+    final perpX = -dy / norm * hitTestWidth / 2;
+    final perpY = dx / norm * hitTestWidth / 2;
+
+    final hitTestPath = Path()
+      ..moveTo(needleStartX + perpX, needleStartY + perpY)
+      ..lineTo(needleEndX + perpX, needleEndY + perpY)
+      ..lineTo(needleEndX - perpX, needleEndY - perpY)
+      ..lineTo(needleStartX - perpX, needleStartY - perpY)
+      ..close();
+
+    needlePointerRect =
+        _needleStyle == NeedleStyle.gaugeNeedle ? needlePath : hitTestPath;
+
 // Needle  Pointer paint
     if (getNeedleStyle == NeedleStyle.gaugeNeedle) {
       canvas.drawPath(needlePath, needlePaint);
@@ -247,26 +264,3 @@ class RenderNeedlePointer extends RenderBox {
     return newValue;
   }
 }
-
-// @override
-// void applyPaintTransform(RenderBox child, Matrix4 transform) {
-//   if (child is RenderNeedlePointer) {
-//     final centerX = size.width / 2;
-//     final centerY = size.height / 2;
-
-//     transform.translate(centerX, centerY);
-//     double value = calculateValueAngle(
-//         child.getValue, getRadialGauge.track.start, getRadialGauge.track.end);
-//     double startAngle = (getRadialGauge.track.startAngle - 180) * (pi / 180);
-//     double endAngle = (getRadialGauge.track.endAngle - 180) * (pi / 180);
-//     double angle = startAngle + (value / 100) * (endAngle - startAngle);
-//     double toRotateAngle = angle - (pi / 2);
-//     transform.rotateZ(toRotateAngle); // Specify the rotation in radians
-//     transform.translate(
-//         -centerX - child.getNeedleWidth / 2 - child.getTailRadius / 2,
-//         -centerY - child.getNeedleHeight + child.getTailRadius / 2);
-
-//     super.applyPaintTransform(child, transform);
-//     markNeedsLayout();
-//   }
-// }

lib/src/radial_gauge/pointer/radial_widget_painter.dart

@@ -69,25 +69,33 @@ class RenderRadialWidgetPointer extends RenderProxyBox {
   void paint(PaintingContext context, Offset offset) {
     double gaugeStart = _radialGauge.track.start;
     double gaugeEnd = _radialGauge.track.end;
+    double containerWidth = constraints.maxWidth;
+    double containerHeight = constraints.maxHeight;
+    double containerShortestSide = min(containerWidth, containerHeight);
+
+    final childSize = child?.computeDryLayout(constraints);
+    final childOffsetX = (childSize?.width ?? 0.0) / 2;
+    final childOffsetY = (childSize?.height ?? 0.0) / 2;
 
-    // final center = Offset(offset.dx, offset.dy);
     final center = Offset(
-        1440 * _radialGauge.xCenterCoordinate -
-            2 * _radialGauge.track.thickness,
-        900 * _radialGauge.yCenterCoordinate - _radialGauge.track.thickness);
+        containerWidth * _radialGauge.xCenterCoordinate + offset.dx,
+        containerHeight * _radialGauge.yCenterCoordinate + offset.dy);
+
     double value = calculateValueAngle(_value, gaugeStart, gaugeEnd);
     double startAngle = (_radialGauge.track.startAngle - 180) * (pi / 180);
     double endAngle = (_radialGauge.track.endAngle - 180) * (pi / 180);
 
     final double angle = startAngle + (value / 100) * (endAngle - startAngle);
 
     double circlePointerOffset =
-        (900 / 2 - _radialGauge.track.thickness) * _radialGauge.radiusFactor;
+        (containerShortestSide / 2 - _radialGauge.track.thickness) *
+            _radialGauge.radiusFactor;
+
+    double circlePointerEndX =
+        center.dx + circlePointerOffset * cos(angle) - childOffsetX;
+    double circlePointerEndY =
+        center.dy + circlePointerOffset * sin(angle) - childOffsetY;
 
-    double circlePointerEndX = center.dx + circlePointerOffset * cos(angle);
-    double circlePointerEndY = center.dy + circlePointerOffset * sin(angle);
-    // canvas.drawCircle(Offset(circlePointerEndX, circlePointerEndY), 30,
-    //     Paint()..color = Colors.red);
     super.paint(context, Offset(circlePointerEndX, circlePointerEndY));
   }
 

pubspec.yaml

@@ -1,7 +1,7 @@
 name: geekyants_flutter_gauges
 description: A linear gauge package for Flutter that displays progress
   and can be customized for appearance and behavior.
-version: 1.0.3
+version: 1.0.4
 homepage: https://github.com/GeekyAnts/GaugesFlutter
 
 environment: