From aab47a14743a6bb9fc232ef2b3b5db9800f1bfa7 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Fri, 5 May 2023 15:48:49 +0100 Subject: [PATCH] [improvement] dragging start distance on coarse pointer (#1220) This PR slightly increases the distance needed to initiate a drag when using a coarse pointer. --- packages/editor/src/lib/app/App.ts | 7 +++- .../src/lib/app/managers/ClickManager.ts | 10 ++++- packages/editor/src/lib/constants.ts | 3 ++ .../tools/__snapshots__/resizing.test.ts.snap | 42 ------------------- .../src/lib/test/tools/resizing.test.ts | 9 +++- 5 files changed, 23 insertions(+), 48 deletions(-) delete mode 100644 packages/editor/src/lib/test/tools/__snapshots__/resizing.test.ts.snap diff --git a/packages/editor/src/lib/app/App.ts b/packages/editor/src/lib/app/App.ts index 96a39df87..472ed896d 100644 --- a/packages/editor/src/lib/app/App.ts +++ b/packages/editor/src/lib/app/App.ts @@ -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 } diff --git a/packages/editor/src/lib/app/managers/ClickManager.ts b/packages/editor/src/lib/app/managers/ClickManager.ts index 775bc56cf..83f7e652c 100644 --- a/packages/editor/src/lib/app/managers/ClickManager.ts +++ b/packages/editor/src/lib/app/managers/ClickManager.ts @@ -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() } diff --git a/packages/editor/src/lib/constants.ts b/packages/editor/src/lib/constants.ts index c23449613..075b542d2 100644 --- a/packages/editor/src/lib/constants.ts +++ b/packages/editor/src/lib/constants.ts @@ -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 diff --git a/packages/editor/src/lib/test/tools/__snapshots__/resizing.test.ts.snap b/packages/editor/src/lib/test/tools/__snapshots__/resizing.test.ts.snap deleted file mode 100644 index 5cf806c3a..000000000 --- a/packages/editor/src/lib/test/tools/__snapshots__/resizing.test.ts.snap +++ /dev/null @@ -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, -} -`; diff --git a/packages/editor/src/lib/test/tools/resizing.test.ts b/packages/editor/src/lib/test/tools/resizing.test.ts index 079fa6734..835bf57e7 100644 --- a/packages/editor/src/lib/test/tools/resizing.test.ts +++ b/packages/editor/src/lib/test/tools/resizing.test.ts @@ -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 }, }) }) })