feat: Add PaddingSides to text #11476
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit e8b18b2:
|
|
I'm working on fixing "setting width/height on constructor" problem |
| * @category filters | ||
| * @advanced | ||
| */ | ||
| export class PaddingSides |
There was a problem hiding this comment.
Can this not be a class? The usages below are mostly normalizing a value or doing some compute. This can be function and doesn't add much value as a class.
| this.top = (sides as any)[0]; | ||
| this.right = (sides as any)[1]; | ||
| this.bottom = (sides as any)[2]; | ||
| this.left = (sides as any)[3]; |
There was a problem hiding this comment.
Please do not cast any here. Consider adding a type-guard function instead to keep from using any.
function isNumberList(value: unknown): value is [number, number, number, number] {
return value instanceof Array
&& value.length === 4
&& value.every(v => typeof v === 'number');
}| @@ -478,124 +476,6 @@ export abstract class AbstractText< | |||
| this.onViewUpdate(); | |||
| } | |||
|
|
|||
| /** | |||
There was a problem hiding this comment.
I'm not sure I understand why you're removing width, height, getSize and setSize from here. Can you clarify?
There was a problem hiding this comment.
Yes, that was main idea - if I add adjustTexture , and adjust frame/orig/trim - the logic for texts can be the same as for sprite. - because sprite QUAD is calculated correctly.
However, now I see that its not like that, there are edge cases, like, text bounds do not account for children. I think Sprite behaviour should be the same?
Anyway, this is more draft PR than real, I need help, and all your messages are super-helpful!
| @@ -12,6 +13,8 @@ import type { Renderable } from '../../rendering/renderers/shared/Renderable'; | |||
| import type { Renderer } from '../../rendering/renderers/types'; | |||
| import type { BitmapText } from './BitmapText'; | |||
|
|
|||
| const tempPadding = new PaddingSides(); | |||
There was a problem hiding this comment.
Don't add these side effects. Consider something like Color's shared static instance.
| * @category filters | ||
| * @standard | ||
| */ | ||
| export type IPaddingSidesLike = PaddingSides | [number, number, number, number] | number; |
There was a problem hiding this comment.
I think it's better to be more explicit here about the shape of this input as an object rather than an array. It's easier to not misunderstand the order for folks that aren't familiar with CSS padding ordering.
interface { top: number; left: number; bottom: number; right: number }
New CSS-like API feature:
textStyle.padding = [top, right, bottom, left]Improve code quality by affecting texture frame/orig/trim , remove override methods like
setSizebecause they are the same as Sprite now