Fix text resizing bug (#3327)
Fixes a bug with text resizing on text shapes, now the transform origin is set depending on the alignment. ![2024-04-02 at 16 50 49 - Aqua Snail](https://github.com/tldraw/tldraw/assets/98838967/86b59691-e950-4367-8632-03ae6dfef7f6) ![2024-04-02 at 16 49 37 - Teal Tuna](https://github.com/tldraw/tldraw/assets/98838967/6b6c97a8-fc53-45a0-8282-6bd63e77507b) ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Make a text shape 2. resize it 3. It should stay within the bounds ### Release Notes - Fixes an issue with text shapes overflowing their bounds when resized.
This commit is contained in:
parent
584380ba8b
commit
0e912fe0f2
1 changed files with 4 additions and 1 deletions
|
@ -70,6 +70,9 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
||||||
|
|
||||||
const { width, height } = this.getMinDimensions(shape)
|
const { width, height } = this.getMinDimensions(shape)
|
||||||
|
|
||||||
|
const transformOrigin =
|
||||||
|
align === 'start' ? 'top left' : align === 'end' ? 'top right' : 'top center'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HTMLContainer id={shape.id}>
|
<HTMLContainer id={shape.id}>
|
||||||
<TextLabel
|
<TextLabel
|
||||||
|
@ -87,7 +90,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
||||||
textHeight={height}
|
textHeight={height}
|
||||||
style={{
|
style={{
|
||||||
transform: `scale(${scale})`,
|
transform: `scale(${scale})`,
|
||||||
transformOrigin: 'top left',
|
transformOrigin: transformOrigin,
|
||||||
}}
|
}}
|
||||||
wrap
|
wrap
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue