[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:
parent
e0e410ab5d
commit
5719cc76c1
2 changed files with 25 additions and 19 deletions
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue