From 0e912fe0f259696450ef364174925ef615275203 Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:22:58 +0100
Subject: [PATCH] Fix text resizing bug (#3327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx b/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx
index 538284975..116945858 100644
--- a/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx
@@ -70,6 +70,9 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 		const { width, height } = this.getMinDimensions(shape)
 
+		const transformOrigin =
+			align === 'start' ? 'top left' : align === 'end' ? 'top right' : 'top center'
+
 		return (
 			<HTMLContainer id={shape.id}>
 				<TextLabel
@@ -87,7 +90,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 					textHeight={height}
 					style={{
 						transform: `scale(${scale})`,
-						transformOrigin: 'top left',
+						transformOrigin: transformOrigin,
 					}}
 					wrap
 				/>