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:
Taha 2024-04-02 17:22:58 +01:00 committed by GitHub
parent 584380ba8b
commit 0e912fe0f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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
/> />