[fix] text editing outline when scaled (#1826)
This PR counter-scales the outline of editing text shapes. <img width="410" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/7a6652b9-10d3-42a5-a4b3-58508b862f8a"> <img width="654" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/7d536dd8-e40f-495f-b059-cbcd450134c2"> ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Create a text shape 2. Scale it up 3. Edit it 4. Check that the outline isn't ridiculously big
This commit is contained in:
parent
ba7a95d5f0
commit
e76de88668
2 changed files with 6 additions and 4 deletions
|
@ -729,10 +729,6 @@ input,
|
|||
text-shadow: var(--tl-text-outline);
|
||||
}
|
||||
|
||||
.tl-text-shape__wrapper[data-isediting='true'] {
|
||||
outline: calc(var(--tl-scale) * 1.5px) solid var(--color-selected);
|
||||
}
|
||||
|
||||
.tl-text-shape__wrapper[data-align='start'] {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
textShapeMigrations,
|
||||
textShapeProps,
|
||||
toDomPrecision,
|
||||
useValue,
|
||||
} from '@tldraw/editor'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
|
||||
|
@ -85,6 +86,8 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
|||
handleInputPointerDown,
|
||||
} = useEditableText(id, type, text)
|
||||
|
||||
const zoomLevel = useValue('zoomLevel', () => this.editor.zoomLevel, [this.editor])
|
||||
|
||||
return (
|
||||
<HTMLContainer id={shape.id}>
|
||||
<div
|
||||
|
@ -95,6 +98,9 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
|||
data-isediting={isEditing}
|
||||
data-textwrap={true}
|
||||
style={{
|
||||
outline: isEditing
|
||||
? `${1.5 / zoomLevel / shape.props.scale}px solid var(--color-selected)`
|
||||
: '',
|
||||
fontSize: FONT_SIZES[shape.props.size],
|
||||
lineHeight: FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + 'px',
|
||||
transform: `scale(${shape.props.scale})`,
|
||||
|
|
Loading…
Reference in a new issue