Skip to content
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

fix: multi-line text wrapping exception #1887

Merged
merged 1 commit into from
Jan 2, 2025
Merged

Conversation

wang1212
Copy link
Member

@wang1212 wang1212 commented Jan 1, 2025

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / Document optimization
  • TypeScript definition update
  • Refactoring
  • Performance improvement
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

#1833

💡 Background and solution

see #1876

When calculating the line break position, a more accurate result is obtained by adopting a strategy of character-by-character measurement cache combined with whole-text measurement. Among them, when the whole-text measurement strategy is used to approximate the optimal value character by character near the threshold, it is not considered that when a single character cannot be displayed, the character-by-character correction will cause the starting character position of each line to return to the beginning of the whole text, resulting in abnormal display after multiple lines of text are wrapped.

In order to deal with this edge case, the index of the last character of each line should be recorded, and when calculating the line break position of the current line, the starting character index of the current line should be used as the boundary condition.

Before

image

After

image

📝 Changelog

Language Changelog
🇺🇸 English fix: multi-line text wrapping exception
🇨🇳 Chinese fix: 多行文本换行异常

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

Walkthrough

This pull request addresses a bug related to multi-line text wrapping exceptions. The solution involves a more precise calculation of line break positions by using a character-by-character measurement cache combined with whole-text measurement. The fix ensures that the starting character index of each line is used as a boundary condition to handle edge cases where a single character cannot be displayed, preventing abnormal display after multiple lines of text are wrapped.

Changes

File Summary
.changeset/popular-items-wave.md Added a changeset for the patch fixing the multi-line text wrapping exception.
tests/demos/bugfix/textWordWrap.ts Modified test cases to adjust wordWrapWidth and added new test cases to cover edge cases for text wrapping.
packages/g-lite/src/services/TextService.ts Updated the text wrapping logic to record the index of the last character of each line and use it as a boundary condition for calculating line break positions.

@@ -360,6 +360,7 @@ export class TextService {
let lines: string[] = [];
let currentLineIndex = 0;
let currentLineWidth = 0;
let prevLineLastCharIndex = 0;

Choose a reason for hiding this comment

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

Introduced prevLineLastCharIndex to keep track of the last character index of each line, which is crucial for handling edge cases in text wrapping.

@lvisei lvisei merged commit 9d6fd39 into release Jan 2, 2025
2 checks passed
@lvisei lvisei deleted the fix-multi-txt-wrap branch January 2, 2025 02:30
lvisei added a commit that referenced this pull request Jan 2, 2025
* fix: multi-line text wrapping exception (#1887)

* Version Packages (#1888)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: 不如怀念(云谌) <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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.

2 participants