From 5719cc76c12c379d700e59912edb74127ded218e Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Tue, 31 Oct 2023 13:34:23 +0000
Subject: [PATCH] [android] Fix text labels and link button getting misaligned
 (#2132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes https://github.com/tldraw/tldraw/issues/2131

Before:


https://github.com/tldraw/tldraw/assets/15892272/c64d4ac5-6665-4c41-bf20-a5dbecdf4e1f

After:

![2023-10-31 at 12 20 21 - Chocolate
Dragonfly](https://github.com/tldraw/tldraw/assets/15892272/2b8ec620-8602-48ec-a0c1-e203b7eb1f38)


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On android, make a geo shape.
2. Add a text label to it.
3. Add a link to it.
4. Resize it.
5. Make sure the label and link don't wiggle around.
6. Repeat with a link on an image shape.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixed a bug where labels and links could lose alignment on android.
---
 .../src/lib/shapes/geo/GeoShapeUtil.tsx       | 38 +++++++++++--------
 .../src/lib/shapes/image/ImageShapeUtil.tsx   |  6 +--
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
index 0aca51f9c..316694c8a 100644
--- a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
@@ -5,6 +5,7 @@ import {
 	Ellipse2d,
 	Geometry2d,
 	Group2d,
+	HTMLContainer,
 	PI2,
 	Polygon2d,
 	Polyline2d,
@@ -521,22 +522,27 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		return (
 			<>
 				<SVGContainer id={id}>{getShape()}</SVGContainer>
-				<TextLabel
-					id={id}
-					type={type}
-					font={font}
-					fill={fill}
-					size={size}
-					align={align}
-					verticalAlign={verticalAlign}
-					text={text}
-					labelColor={labelColor}
-					wrap
-					bounds={props.geo === 'cloud' ? this.getGeometry(shape).bounds : undefined}
-				/>
-				{shape.props.url && (
-					<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.zoomLevel} />
-				)}
+				<HTMLContainer
+					id={shape.id}
+					style={{ overflow: 'hidden', width: shape.props.w, height: shape.props.h }}
+				>
+					<TextLabel
+						id={id}
+						type={type}
+						font={font}
+						fill={fill}
+						size={size}
+						align={align}
+						verticalAlign={verticalAlign}
+						text={text}
+						labelColor={labelColor}
+						wrap
+						bounds={props.geo === 'cloud' ? this.getGeometry(shape).bounds : undefined}
+					/>
+					{shape.props.url && (
+						<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.zoomLevel} />
+					)}
+				</HTMLContainer>
 			</>
 		)
 	}
diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
index 3c1485d7c..e4107e971 100644
--- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
@@ -154,10 +154,10 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 							<div className="tl-image__tg">GIF</div>
 						)}
 					</div>
+					{'url' in shape.props && shape.props.url && (
+						<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.zoomLevel} />
+					)}
 				</HTMLContainer>
-				{'url' in shape.props && shape.props.url && (
-					<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.zoomLevel} />
-				)}
 			</>
 		)
 	}