From 4c21560b6064eba9b688fb374bc76e848e6478ce Mon Sep 17 00:00:00 2001 From: Arav Khandelwal Date: Tue, 3 Sep 2024 12:24:26 +0530 Subject: [PATCH] custom radius addition for arros tip curve --- lib/src/bubble_shape.dart | 82 +++++++++++++++++++++++++++++++++----- lib/src/super_tooltip.dart | 3 ++ 2 files changed, 76 insertions(+), 9 deletions(-) diff --git a/lib/src/bubble_shape.dart b/lib/src/bubble_shape.dart index 3dbfeaa..a33070e 100644 --- a/lib/src/bubble_shape.dart +++ b/lib/src/bubble_shape.dart @@ -9,6 +9,7 @@ class BubbleShape extends ShapeBorder { required this.preferredDirection, required this.target, required this.borderRadius, + required this.arrowTipRadius, required this.arrowBaseWidth, required this.arrowTipDistance, required this.borderColor, @@ -24,6 +25,7 @@ class BubbleShape extends ShapeBorder { final double arrowBaseWidth; final double arrowTipDistance; final double borderRadius; + final double arrowTipRadius; final Color borderColor; final double borderWidth; final double? left, top, right, bottom; @@ -93,7 +95,24 @@ class BubbleShape extends ShapeBorder { ), rect.top, ) - ..lineTo(target.dx, target.dy + arrowTipDistance) // up to arrow tip + // up to arrow tip where the curve starts + ..lineTo( + target.dx + arrowTipRadius / sqrt(2), //sin and cos 45 = 1/root(2) + target.dy + + arrowTipDistance - + (arrowTipRadius - arrowTipRadius / sqrt(2))) + + //arc for the tip + ..arcToPoint( + Offset( + target.dx - arrowTipRadius / sqrt(2), + target.dy + + arrowTipDistance - + (arrowTipRadius - arrowTipRadius / sqrt(2))), + radius: Radius.circular(arrowTipRadius), + clockwise: false) + + // down / ..lineTo( max( min( @@ -103,8 +122,7 @@ class BubbleShape extends ShapeBorder { rect.left + topLeftRadius, ), rect.top, - ) // down / - + ) ..lineTo(rect.left + topLeftRadius, rect.top) ..arcToPoint( Offset(rect.left, rect.top + topLeftRadius), @@ -130,10 +148,23 @@ class BubbleShape extends ShapeBorder { rect.right - bottomRightRadius), rect.bottom) - // up to arrow tip \ - ..lineTo(target.dx, target.dy - arrowTipDistance) + // down to arrow tip curvature start\ + ..lineTo( + target.dx + arrowTipRadius / sqrt(2), //sin and cos 45 = 1/root(2) + target.dy - + arrowTipDistance + + (arrowTipRadius - arrowTipRadius / sqrt(2))) - // down / + //arc for the tip + ..arcToPoint( + Offset( + target.dx - arrowTipRadius / sqrt(2), + target.dy - + arrowTipDistance + + (arrowTipRadius - arrowTipRadius / sqrt(2))), + radius: Radius.circular(arrowTipRadius)) + + // up / ..lineTo( max( min(target.dx - arrowBaseWidth / 2, @@ -155,8 +186,25 @@ class BubbleShape extends ShapeBorder { min(target.dy - arrowBaseWidth / 2, rect.bottom - bottomRightRadius - arrowBaseWidth), rect.top + topRightRadius)) + + // right to arrow tip to the start point of the arc \ ..lineTo( - target.dx - arrowTipDistance, target.dy) // right to arrow tip \ + target.dx - + arrowTipDistance + + (arrowTipRadius - arrowTipRadius / sqrt(2)), + target.dy - arrowTipRadius / sqrt(2)) + + //arc for the tip + ..arcToPoint( + Offset( + target.dx - + arrowTipDistance + + (arrowTipRadius - arrowTipRadius / sqrt(2)), + target.dy + arrowTipRadius / sqrt(2), + ), + radius: Radius.circular(arrowTipRadius), + ) + // left / ..lineTo( rect.right, @@ -181,8 +229,23 @@ class BubbleShape extends ShapeBorder { rect.bottom - bottomLeftRadius - arrowBaseWidth), rect.top + topLeftRadius)) - //left to arrow tip / - ..lineTo(target.dx + arrowTipDistance, target.dy) + //left to arrow tip till curve start/ + + ..lineTo( + target.dx + + arrowTipDistance - + (arrowTipRadius - arrowTipRadius / sqrt(2)), + target.dy - arrowTipRadius / sqrt(2)) + + //arc for the tip + ..arcToPoint( + Offset( + target.dx + + arrowTipDistance - + (arrowTipRadius - arrowTipRadius / sqrt(2)), + target.dy + arrowTipRadius / sqrt(2)), + radius: Radius.circular(arrowTipRadius), + clockwise: false) // right \ ..lineTo( @@ -288,6 +351,7 @@ class BubbleShape extends ShapeBorder { preferredDirection: preferredDirection, target: target, borderRadius: borderRadius, + arrowTipRadius: arrowTipRadius, arrowBaseWidth: arrowBaseWidth, arrowTipDistance: arrowTipDistance, borderColor: borderColor, diff --git a/lib/src/super_tooltip.dart b/lib/src/super_tooltip.dart index c46463f..9e9ef80 100644 --- a/lib/src/super_tooltip.dart +++ b/lib/src/super_tooltip.dart @@ -44,6 +44,7 @@ class SuperTooltip extends StatefulWidget { final Duration fadeOutDuration; final double arrowLength; final double arrowBaseWidth; + final double arrowTipRadius; final double arrowTipDistance; final double borderRadius; final double borderWidth; @@ -120,6 +121,7 @@ class SuperTooltip extends StatefulWidget { this.fadeOutDuration = const Duration(milliseconds: 0), this.arrowLength = 20.0, this.arrowBaseWidth = 20.0, + this.arrowTipRadius = 0.0, this.arrowTipDistance = 2.0, this.touchThroughAreaShape = ClipAreaShape.oval, this.touchThroughAreaCornerRadius = 5.0, @@ -426,6 +428,7 @@ class _SuperTooltipState extends State shape: BubbleShape( arrowBaseWidth: widget.arrowBaseWidth, arrowTipDistance: widget.arrowTipDistance, + arrowTipRadius: widget.arrowTipRadius, borderColor: widget.borderColor, borderRadius: widget.borderRadius, borderWidth: widget.borderWidth,