Skip to content

[FTD #4] support circle for multi lines text, updated images #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

TobiasRump
Copy link
Collaborator

🛠 Fix: Multi-line circle rendering issue

📌 Related Issue

Closes #4

Circled test works fine when the text, that is circled is, spans only over on line. However if there is a line break involved, the circle around the text does not fit anymore as seen inside the screenshot..

✅ What’s Changed

This PR updates the circle styling logic to ensure that multi-line text is consistently circled inline. Previously, the circle was rendered inside the text , leading to inconsistent and visually incorrect results.

Additionally, I changes the open circle default and added functionalities to change the open site manually.

🔍 Confirmation

  • Confirmed the multiline text is circled.

📸 Before / After

Before After
before after

@TobiasRump TobiasRump force-pushed the bugfix/FTD-4-circled-text-breaks-in-multiple-lines branch from 2945b43 to dbaecdf Compare June 25, 2025 22:21
@TobiasRump TobiasRump requested a review from jay-k98 June 25, 2025 22:22
@TobiasRump TobiasRump self-assigned this Jun 25, 2025
@@ -57,7 +56,7 @@ class ClosedCirclePainter extends TextDecoratorPainter with CircleConstraints {
canvas.drawOval(
Rect.fromCenter(
center: centerOffset,
width: scaledHorizontalRadius,
width: size.width * 1.1,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we implement this magic number as a param?

Comment on lines +48 to +49
final scaledVerticalRadiusBottomCircle = circleSize.verticalRadius * 3.5;
const verticalOffset = 2.5;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The centering looks off now and this makes the circle still overlap the circle. See:

Bildschirmfoto 2025-06-26 um 10 36 19

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vertical centering looks off here

Comment on lines +55 to +56
final scaledHorizontalRadius = circleSize.horizontalRadius * 2;
final scaledVerticalRadiusBottomCircle = circleSize.verticalRadius * 3;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make those magic numbers as params?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Circled Text breaks in multiple lines
2 participants