-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Allow all overflowing characters to extend to the next cell if followed by a space (Emojis etc) #997
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This fixes #974?
src/renderer/TextRenderLayer.ts
Outdated
} | ||
|
||
// Set the correct character font for the current context | ||
let font; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of doing this use this._ctx.save()
before you change .font and .restore()
after. This allows you to temporarily change the style and then revert the changes after restore.
src/renderer/TextRenderLayer.ts
Outdated
* Whether a character is overlapping to the | ||
* next cell. | ||
*/ | ||
private _isOverlapping(char: string): boolean { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's also pass in char code
, maybe the CharData
object would be easier since we need 2 of its props?
src/renderer/TextRenderLayer.ts
Outdated
* next cell. | ||
*/ | ||
private _isOverlapping(char: string): boolean { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The common case:
if (code < 256) {
return false;
}
It should be safe to assume this.
src/renderer/TextRenderLayer.ts
Outdated
if (font) this._ctx.font = font; | ||
|
||
// Cache and return | ||
return this._characterOverlapCache[char] = overlaps; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's make this 2 lines, I always have to have a second look as doing this behaves very differently in different languages.
src/renderer/TextRenderLayer.ts
Outdated
// Measure the width of the character, but Math.floor it | ||
// because that is what the renderer does when it calculates | ||
// the character dimensions we are comparing against | ||
const overlaps = Math.floor(this._ctx.measureText(char).width) > this._characterWidth; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This function seems a lot faster than I was expecting 😄
Fixes #974
This PR tries to provide a more generic way of detecting overlapping characters and allowing them to be drawn to the next cell if that cell is empty (space). The first time a character is seen, it will measure the width of that character and then check if the character is overlapping. It will then cache that result, so subsequent character appearances don't have to be measured again. The cache will be cleared if the font, or the measured character width changes.