[android] Fix text labels and link button getting misaligned (#2132)

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.
This commit is contained in:
Lu Wilson 2023-10-31 13:34:23 +00:00 committed by GitHub
parent e0e410ab5d
commit 5719cc76c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 19 deletions

View file

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

View file

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