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

[improvement] dragging start distance on coarse pointer (#1220)

Browse source 
This PR slightly increases the distance needed to initiate a drag when
using a coarse pointer.
This commit is contained in:
Steve Ruiz 2023-05-05 15:48:49 +01:00 committed by GitHub
parent f315ea2250
commit aab47a1474
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/editor/src/lib/app/App.ts
View file

@ -65,6 +65,7 @@ import { TLShapeDef } from '../config/TLShapeDefinition'
import {
ANIMATION_MEDIUM_MS,
BLACKLISTED_PROPS,
COARSE_DRAG_DISTANCE,
DEFAULT_ANIMATION_OPTIONS,
DRAG_DISTANCE,
FOLLOW_CHASE_PAN_SNAP,
@ -3631,7 +3632,8 @@ export class App extends EventEmitter {
if (
!inputs.isDragging &&
inputs.isPointing &&
originPagePoint.dist(currentPagePoint) > DRAG_DISTANCE / this.zoomLevel
originPagePoint.dist(currentPagePoint) >
(this.isCoarsePointer ? COARSE_DRAG_DISTANCE : DRAG_DISTANCE) / this.zoomLevel
) {
inputs.isDragging = true
}
@ -3718,7 +3720,8 @@ export class App extends EventEmitter {
if (
!inputs.isDragging &&
inputs.isPointing &&
originPagePoint.dist(currentPagePoint) > DRAG_DISTANCE / this.zoomLevel
originPagePoint.dist(currentPagePoint) >
(this.isCoarsePointer ? COARSE_DRAG_DISTANCE : DRAG_DISTANCE) / this.zoomLevel
) {
inputs.isDragging = true
}

10
packages/editor/src/lib/app/managers/ClickManager.ts
View file

@ -1,5 +1,10 @@
import { Vec2d } from '@tldraw/primitives'
import { DOUBLE_CLICK_DURATION, DRAG_DISTANCE, MULTI_CLICK_DURATION } from '../../constants'
import {
COARSE_DRAG_DISTANCE,
DOUBLE_CLICK_DURATION,
DRAG_DISTANCE,
MULTI_CLICK_DURATION,
} from '../../constants'
import { uniqueId } from '../../utils/data'
import type { App } from '../App'
import { TLClickEventInfo, TLPointerEventInfo } from '../types/event-types'
@ -221,7 +226,8 @@ export class ClickManager {
if (
this._clickState !== 'idle' &&
this._clickScreenPoint &&
this._clickScreenPoint.dist(this.app.inputs.currentScreenPoint) > DRAG_DISTANCE
this._clickScreenPoint.dist(this.app.inputs.currentScreenPoint) >
(this.app.isCoarsePointer ? COARSE_DRAG_DISTANCE : DRAG_DISTANCE)
) {
this.cancelDoubleClickTimeout()
}

3
packages/editor/src/lib/constants.ts
View file

@ -61,6 +61,9 @@ export const DOUBLE_CLICK_DURATION = 450
/** @internal */
export const MULTI_CLICK_DURATION = 200
/** @internal */
export const COARSE_DRAG_DISTANCE = 6
/** @internal */
export const DRAG_DISTANCE = 4

42
packages/editor/src/lib/test/tools/__snapshots__/resizing.test.ts.snap
View file

@ -1,42 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`When resizing a shape with children Resizes a rotated draw shape: draw shape after rotating 1`] = `
Object {
"id": "shape:lineA",
"index": "a3",
"isLocked": false,
"parentId": "shape:boxA",
"props": Object {
"color": "black",
"dash": "draw",
"fill": "none",
"isClosed": false,
"isComplete": false,
"isPen": false,
"opacity": "1",
"segments": Array [
Object {
"points": Array [
Object {
"x": 0,
"y": 0,
"z": 0.5,
},
Object {
"x": 110.00000000000001,
"y": 110.00000000000001,
"z": 0.5,
},
],
"type": "free",
},
],
"size": "m",
},
"rotation": 3.141592653589793,
"type": "draw",
"typeName": "shape",
"x": 100,
"y": 100,
}
`;

9
packages/editor/src/lib/test/tools/resizing.test.ts
View file

@ -3828,7 +3828,7 @@ it('uses the cross cursor when create resizing', () => {
})
describe('Resizing text from the right edge', () => {
it('Resizes text from the right edge', () => {
it.only('Resizes text from the right edge', () => {
const id = app.createShapeId()
app.createShapes([{ id, type: 'text', props: { text: 'H' } }])
app.updateShapes([{ id, type: 'text', props: { text: 'Hello World' } }]) // auto size
@ -3837,6 +3837,9 @@ describe('Resizing text from the right edge', () => {
const bounds = app.getBoundsById(id)!
// @ts-expect-error
app._isCoarsePointer.set(false)
// Resize from the right edge
app.pointerDown(bounds.maxX, bounds.midY, { target: 'selection', handle: 'right' }) // right edge
app.expectToBeIn('select.pointing_resize_handle')
@ -3867,13 +3870,15 @@ describe('Resizing text from the right edge', () => {
app.pointerDown(bounds.maxX, bounds.midY, { target: 'selection', handle: 'right' }) // right edge
app.expectToBeIn('select.pointing_resize_handle')
app.pointerMove(bounds.maxX + 5, bounds.midY, { target: 'selection', handle: 'right' })
app.expectToBeIn('select.pointing_resize_handle')
app.pointerMove(bounds.maxX + 10, bounds.midY, { target: 'selection', handle: 'right' })
app.expectToBeIn('select.resizing')
app.pointerUp()
app.expectShapeToMatch({
id,
type: 'text',
props: { text: 'Hello World', w: bounds.width + 5 },
props: { text: 'Hello World', w: bounds.width + 10 },
})
})
})