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

clamp x-box and check-box lines to stay within box at small scales (#1860)

Browse source 
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:
David Sheldrick 2023-09-08 12:37:50 +01:00 committed by GitHub
parent 930abaf5d7
commit 9d8a0b0a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
View file

@ -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 [ 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 size = Math.min(w, h) * 0.82
const ox = (w - size) / 2 const ox = (w - size) / 2
const oy = (h - 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 [ 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)),
],
] ]
} }