From 16076dcdacc1e44188bf3a6c6fa3d227363c530f Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Mon, 31 Jan 2022 12:25:51 +0000 Subject: [PATCH] fix missing pressure (#546) --- packages/tldraw/src/state/TldrawApp.ts | 30 +++++----- .../sessions/DrawSession/DrawSession.spec.ts | 56 ++++++++++++++++++- packages/tldraw/src/test/TldrawTestApp.tsx | 16 +++++- 3 files changed, 84 insertions(+), 18 deletions(-) diff --git a/packages/tldraw/src/state/TldrawApp.ts b/packages/tldraw/src/state/TldrawApp.ts index 9cc96854e..574dd982e 100644 --- a/packages/tldraw/src/state/TldrawApp.ts +++ b/packages/tldraw/src/state/TldrawApp.ts @@ -3081,7 +3081,7 @@ export class TldrawApp extends StateManager { /* ----------------- Pointer Events ----------------- */ updateInputs: TLPointerEventHandler = (info) => { - this.currentPoint = [...this.getPagePoint(info.point), info.pressure] + this.currentPoint = this.getPagePoint(info.point).concat(info.pressure) this.shiftKey = info.shiftKey this.altKey = info.altKey this.ctrlKey = info.ctrlKey @@ -3118,7 +3118,7 @@ export class TldrawApp extends StateManager { return } this.isPointing = true - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) if (this.isForcePanning) return this.currentTool.onPointerDown?.(info, e) @@ -3159,7 +3159,7 @@ export class TldrawApp extends StateManager { // Shape onPointShape: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onPointShape?.(info, e) } @@ -3170,13 +3170,13 @@ export class TldrawApp extends StateManager { } onDoubleClickShape: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onDoubleClickShape?.(info, e) } onRightPointShape: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onRightPointShape?.(info, e) } @@ -3198,19 +3198,19 @@ export class TldrawApp extends StateManager { // Bounds (bounding box background) onPointBounds: TLBoundsEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onPointBounds?.(info, e) } onDoubleClickBounds: TLBoundsEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onDoubleClickBounds?.(info, e) } onRightPointBounds: TLBoundsEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onRightPointBounds?.(info, e) } @@ -3237,13 +3237,13 @@ export class TldrawApp extends StateManager { // Bounds handles (corners, edges) onPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onPointBoundsHandle?.(info, e) } onDoubleClickBoundsHandle: TLBoundsHandleEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onDoubleClickBoundsHandle?.(info, e) // hack time to reset the size / clipping of an image @@ -3264,7 +3264,7 @@ export class TldrawApp extends StateManager { } onRightPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onRightPointBoundsHandle?.(info, e) } @@ -3291,19 +3291,19 @@ export class TldrawApp extends StateManager { // Handles (ie the handles of a selected arrow) onPointHandle: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onPointHandle?.(info, e) } onDoubleClickHandle: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onDoubleClickHandle?.(info, e) } onRightPointHandle: TLPointerEventHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onRightPointHandle?.(info, e) } @@ -3356,7 +3356,7 @@ export class TldrawApp extends StateManager { } onShapeClone: TLShapeCloneHandler = (info, e) => { - this.originPoint = this.getPagePoint(info.point) + this.originPoint = this.getPagePoint(info.point).concat(info.pressure) this.updateInputs(info, e) this.currentTool.onShapeClone?.(info, e) } diff --git a/packages/tldraw/src/state/sessions/DrawSession/DrawSession.spec.ts b/packages/tldraw/src/state/sessions/DrawSession/DrawSession.spec.ts index 8cfb41728..8ede89609 100644 --- a/packages/tldraw/src/state/sessions/DrawSession/DrawSession.spec.ts +++ b/packages/tldraw/src/state/sessions/DrawSession/DrawSession.spec.ts @@ -1,5 +1,5 @@ import { TldrawTestApp } from '~test' -import { TDShapeType, TDStatus } from '~types' +import { DrawShape, TDShapeType, TDStatus } from '~types' describe('Draw session', () => { it('begins, updateSession', () => { @@ -40,3 +40,57 @@ describe('Draw session', () => { expect(app.getShape(shape.id)).toBeTruthy() }) }) + +describe('When drawing...', () => { + it('Creates pressure data if not present', () => { + const app = new TldrawTestApp().reset() + app + .selectTool(TDShapeType.Draw) + .pointCanvas([0, 0]) + .movePointer([1, 0]) + .movePointer([2, 0]) + .movePointer([4, 0]) + .movePointer([8, 0]) + .movePointer([16, 0]) + .movePointer([24, 0]) + .completeSession() + const shape = app.shapes[0] as DrawShape + expect(shape.type).toBe(TDShapeType.Draw) + expect(shape.points).toMatchObject([ + [0, 0, 0.5], + [0, 0, 0.5], + [1, 0, 0.5], + [2, 0, 0.5], + [4, 0, 0.5], + [8, 0, 0.5], + [16, 0, 0.5], + [24, 0, 0.5], + ]) + }) + + it('Uses pressure data if present', () => { + const app = new TldrawTestApp().reset() + app + .selectTool(TDShapeType.Draw) + .pointCanvas([0, 0, 0.1]) + .movePointer([1, 0, 0.2]) + .movePointer([2, 0, 0.3]) + .movePointer([4, 0, 0.4]) + .movePointer([8, 0, 0.5]) + .movePointer([16, 0, 0.6]) + .movePointer([24, 0, 0.7]) + .completeSession() + const shape = app.shapes[0] as DrawShape + expect(shape.type).toBe(TDShapeType.Draw) + expect(shape.points).toMatchObject([ + [0, 0, 0.1], + [0, 0, 0.1], + [1, 0, 0.2], + [2, 0, 0.3], + [4, 0, 0.4], + [8, 0, 0.5], + [16, 0, 0.6], + [24, 0, 0.7], + ]) + }) +}) diff --git a/packages/tldraw/src/test/TldrawTestApp.tsx b/packages/tldraw/src/test/TldrawTestApp.tsx index 3023cb104..cc213669c 100644 --- a/packages/tldraw/src/test/TldrawTestApp.tsx +++ b/packages/tldraw/src/test/TldrawTestApp.tsx @@ -6,6 +6,7 @@ interface PointerOptions { id?: number x?: number y?: number + pressure?: number shiftKey?: boolean altKey?: boolean ctrlKey?: boolean @@ -128,14 +129,25 @@ export class TldrawTestApp extends TldrawApp { } getPoint(options: PointerOptions | number[] = {} as PointerOptions): PointerEvent { - const opts = Array.isArray(options) ? { x: options[0], y: options[1] } : options - const { id = 1, x = 0, y = 0, shiftKey = false, altKey = false, ctrlKey = false } = opts + const opts = Array.isArray(options) + ? { x: options[0], y: options[1], pressure: options[2] } + : options + const { + id = 1, + x = 0, + y = 0, + pressure = 0.5, + shiftKey = false, + altKey = false, + ctrlKey = false, + } = opts return { shiftKey, altKey, ctrlKey, pointerId: id, + pressure, clientX: x, clientY: y, } as PointerEvent