Remove indicator for autosize text shapes while editing (#2120)

This PR is a fork of #2119

It only has one of the two changes:

* Remove indicator for autosize text shapes while editing.

![2023-10-26 at 13 55 56 - Chocolate
Anaconda](https://github.com/tldraw/tldraw/assets/15892272/ee54db05-e96d-40e6-8003-cc013894f6f9)

I think we should merge this one, and continue discussion of the other
one (alignment).


### Change Type

- [x] `minor` — New feature

### Test Plan

1. Click to draw a text shape.
2. You shouldn't see the shape's indicator while editing it.
3. Drag to draw a text shape.
4. You *should* see the shape's indicator while editing it.

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

### Release Notes

- Removed the indicator from autosize text shapes.
This commit is contained in:
Lu Wilson 2023-10-28 09:32:31 +01:00 committed by GitHub
parent d757e5a32a
commit d018cb9877
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 2 deletions

View file

@ -1105,7 +1105,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
width: number;
};
// (undocumented)
indicator(shape: TLTextShape): JSX.Element;
indicator(shape: TLTextShape): JSX.Element | null;
// (undocumented)
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
// (undocumented)

View file

@ -12553,6 +12553,10 @@
"text": "JSX.Element",
"canonicalReference": "@types/react!__global.JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null"
},
{
"kind": "Content",
"text": ";"
@ -12561,7 +12565,7 @@
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 4
"endIndex": 5
},
"releaseTag": "Public",
"isProtected": false,

View file

@ -17,6 +17,7 @@ import {
textShapeMigrations,
textShapeProps,
toDomPrecision,
useEditor,
} from '@tldraw/editor'
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
@ -141,6 +142,8 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
indicator(shape: TLTextShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds
const editor = useEditor()
if (shape.props.autoSize && editor.editingShapeId === shape.id) return null
return <rect width={toDomPrecision(bounds.width)} height={toDomPrecision(bounds.height)} />
}