Skip to content

Commit

Permalink
Merge pull request #119 from ak424/arrow_tip_radius
Browse files Browse the repository at this point in the history
Feature to add curve with custom radius to the arrow tip
  • Loading branch information
bensonarafat authored Sep 22, 2024
2 parents 061bc10 + 4c21560 commit 7bd0543
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 9 deletions.
82 changes: 73 additions & 9 deletions lib/src/bubble_shape.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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(
Expand All @@ -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),
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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(
Expand Down Expand Up @@ -288,6 +351,7 @@ class BubbleShape extends ShapeBorder {
preferredDirection: preferredDirection,
target: target,
borderRadius: borderRadius,
arrowTipRadius: arrowTipRadius,
arrowBaseWidth: arrowBaseWidth,
arrowTipDistance: arrowTipDistance,
borderColor: borderColor,
Expand Down
3 changes: 3 additions & 0 deletions lib/src/super_tooltip.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -427,6 +429,7 @@ class _SuperTooltipState extends State<SuperTooltip>
shape: BubbleShape(
arrowBaseWidth: widget.arrowBaseWidth,
arrowTipDistance: widget.arrowTipDistance,
arrowTipRadius: widget.arrowTipRadius,
borderColor: widget.borderColor,
borderRadius: widget.borderRadius,
borderWidth: widget.borderWidth,
Expand Down

0 comments on commit 7bd0543

Please sign in to comment.