frame label fix (#2016)
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:
parent
fcef86320e
commit
647977ceec
3 changed files with 4 additions and 2 deletions
|
@ -1352,6 +1352,7 @@ input,
|
|||
position: relative;
|
||||
font-size: inherit;
|
||||
white-space: pre;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.tl-frame-label__editing {
|
||||
|
@ -1361,6 +1362,7 @@ input,
|
|||
overflow: visible;
|
||||
background-color: var(--color-panel);
|
||||
border-radius: var(--radius-1);
|
||||
border-color: var(--color-selected);
|
||||
}
|
||||
|
||||
.tl-frame-name-input {
|
||||
|
|
|
@ -81,7 +81,7 @@ export const Shape = track(function Shape({
|
|||
if (!shape) return null
|
||||
|
||||
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
|
||||
// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
|
||||
const dprMultiple = nearestMultiple(dpr)
|
||||
|
|
|
@ -97,7 +97,7 @@ export const FrameHeading = function FrameHeading({
|
|||
maxWidth: `calc(var(--tl-zoom) * ${
|
||||
labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)
|
||||
}px + var(--space-5))`,
|
||||
bottom: Math.ceil(height),
|
||||
bottom: '100%',
|
||||
transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,
|
||||
}}
|
||||
onPointerDown={handlePointerDown}
|
||||
|
|
Loading…
Reference in a new issue