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

Fix drag distance (#3873)

Browse source 
This PR fixes a bug where the drag distance for an interaction was being
measured in page space rather than screen space. It should be measured
in screen space. The actual check for `isDragging` is a little ugly but
this is correct.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Test Plan

1. Zoom in
2. Drag the center handle of an arrow shape

- [x] Unit Tests

### Release Notes

- Fixed a bug where the minimum distance for a drag was wrong when
zoomed in or out.
This commit is contained in:
Steve Ruiz 2024-06-04 14:16:23 +02:00 committed by GitHub
parent 38c573aacc
commit 930ea64d35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/lib/editor/Editor.ts
View file

@ -8730,7 +8730,7 @@ export class Editor extends EventEmitter<TLEventMap> {
if (
inputs.isPointing &&
!inputs.isDragging &&
Vec.Dist2(originPagePoint, currentPagePoint) >
Vec.Dist2(originPagePoint, currentPagePoint) * this.getZoomLevel() >
(instanceState.isCoarsePointer
? this.options.coarseDragDistanceSquared
: this.options.dragDistanceSquared) /

36
packages/tldraw/src/test/Editor.test.tsx
View file

@ -678,3 +678,39 @@ describe('middle-click panning', () => {
expect(editor.inputs.isPanning).toBe(false)
})
})
describe('dragging', () => {
it('drags correctly at 100% zoom', () => {
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 0).pointerDown()
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 1)
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 5)
expect(editor.inputs.isDragging).toBe(true)
})
it('drags correctly at 150% zoom', () => {
editor.setCamera({ x: 0, y: 0, z: 8 }).forceTick()
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 0).pointerDown()
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 2)
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 5)
expect(editor.inputs.isDragging).toBe(true)
})
it('drags correctly at 50% zoom', () => {
editor.setCamera({ x: 0, y: 0, z: 0.1 }).forceTick()
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 0).pointerDown()
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 2)
expect(editor.inputs.isDragging).toBe(false)
editor.pointerMove(0, 5)
expect(editor.inputs.isDragging).toBe(true)
})
})