clamp x-box and check-box lines to stay within box at small scales (#1860)
Closes [#2737](https://github.com/tldraw/brivate/issues/2737) For the checkbox and x-box the inner lines are inset slightly from the edges to account for the stroke width. Alas at tiny box sizes (the box is creates as w:1,h:1 during a drag-to-create interaction) this was ending up with the insets overflowing such that they left the box on the other side, creating miscalculations during the initial resizing. This PR clamps the positions of the x-box and checkbox inner lines so they don't escape the bounds of the box. ### 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 - Fixes a regression introduced by the geometry refactor related to x-box and checkbox resizing.
This commit is contained in:
parent
930abaf5d7
commit
9d8a0b0a8d
1 changed files with 23 additions and 4 deletions
|
@ -1109,9 +1109,18 @@ function getXBoxLines(w: number, h: number, sw: number, dash: TLDefaultDashStyle
|
|||
]
|
||||
}
|
||||
|
||||
const clampX = (x: number) => Math.max(0, Math.min(w, x))
|
||||
const clampY = (y: number) => Math.max(0, Math.min(h, y))
|
||||
|
||||
return [
|
||||
[new Vec2d(sw * inset, sw * inset), new Vec2d(w - sw * inset, h - sw * inset)],
|
||||
[new Vec2d(sw * inset, h - sw * inset), new Vec2d(w - sw * inset, sw * inset)],
|
||||
[
|
||||
new Vec2d(clampX(sw * inset), clampY(sw * inset)),
|
||||
new Vec2d(clampX(w - sw * inset), clampY(h - sw * inset)),
|
||||
],
|
||||
[
|
||||
new Vec2d(clampX(sw * inset), clampY(h - sw * inset)),
|
||||
new Vec2d(clampX(w - sw * inset), clampY(sw * inset)),
|
||||
],
|
||||
]
|
||||
}
|
||||
|
||||
|
@ -1119,8 +1128,18 @@ function getCheckBoxLines(w: number, h: number) {
|
|||
const size = Math.min(w, h) * 0.82
|
||||
const ox = (w - size) / 2
|
||||
const oy = (h - size) / 2
|
||||
|
||||
const clampX = (x: number) => Math.max(0, Math.min(w, x))
|
||||
const clampY = (y: number) => Math.max(0, Math.min(h, y))
|
||||
|
||||
return [
|
||||
[new Vec2d(ox + size * 0.25, oy + size * 0.52), new Vec2d(ox + size * 0.45, oy + size * 0.82)],
|
||||
[new Vec2d(ox + size * 0.45, oy + size * 0.82), new Vec2d(ox + size * 0.82, oy + size * 0.22)],
|
||||
[
|
||||
new Vec2d(clampX(ox + size * 0.25), clampY(oy + size * 0.52)),
|
||||
new Vec2d(clampX(ox + size * 0.45), clampY(oy + size * 0.82)),
|
||||
],
|
||||
[
|
||||
new Vec2d(clampX(ox + size * 0.45), clampY(oy + size * 0.82)),
|
||||
new Vec2d(clampX(ox + size * 0.82), clampY(oy + size * 0.22)),
|
||||
],
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue