PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

frame label fix (#2016)

Browse source 
Frame labels lost their editing outline at some point. 🤷🏼 any idea how
this happened?

## Before
![Kapture 2023-10-04 at 13 47
28](https://github.com/tldraw/tldraw/assets/1242537/5da612e3-6456-493d-a4d7-4a5b953284bb)

## After
![Kapture 2023-10-04 at 13 49
55](https://github.com/tldraw/tldraw/assets/1242537/1608af3b-aac8-4f1c-8a9b-09aab19b07fb)


### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add a brief release note for your PR here.
This commit is contained in:
David Sheldrick 2023-10-04 16:46:59 +01:00 committed by GitHub
parent fcef86320e
commit 647977ceec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/editor.css
View file

@ -1352,6 +1352,7 @@ input,
position: relative; position: relative;
font-size: inherit; font-size: inherit;
white-space: pre; white-space: pre;
border: 1px solid transparent;
} }
.tl-frame-label__editing { .tl-frame-label__editing {
@ -1361,6 +1362,7 @@ input,
overflow: visible; overflow: visible;
background-color: var(--color-panel); background-color: var(--color-panel);
border-radius: var(--radius-1); border-radius: var(--radius-1);
border-color: var(--color-selected);
} }
.tl-frame-name-input { .tl-frame-name-input {

2
packages/editor/src/lib/components/Shape.tsx
View file

@ -81,7 +81,7 @@ export const Shape = track(function Shape({
if (!shape) return null if (!shape) return null
const bounds = editor.getShapeGeometry(shape).bounds const bounds = editor.getShapeGeometry(shape).bounds
const dpr = editor.instanceState.devicePixelRatio const dpr = Math.floor(editor.instanceState.devicePixelRatio * 100) / 100
// dprMultiple is the smallest number we can multiply dpr by to get an integer // dprMultiple is the smallest number we can multiply dpr by to get an integer
// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively) // it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
const dprMultiple = nearestMultiple(dpr) const dprMultiple = nearestMultiple(dpr)

2
packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx
View file

@ -97,7 +97,7 @@ export const FrameHeading = function FrameHeading({
maxWidth: `calc(var(--tl-zoom) * ${ maxWidth: `calc(var(--tl-zoom) * ${
labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height) labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)
}px + var(--space-5))`, }px + var(--space-5))`,
bottom: Math.ceil(height), bottom: '100%',
transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`, transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,
}} }}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}