fix missing pressure (#546)

packages/tldraw/src/state/TldrawApp.ts

@@ -3081,7 +3081,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
   /* ----------------- 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<TDSnapshot> {
       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<TDSnapshot> {
 
   // 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<TDSnapshot> {
   }
 
   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<TDSnapshot> {
 
   // 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<TDSnapshot> {
 
   // 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<TDSnapshot> {
   }
 
   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<TDSnapshot> {
 
   // 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<TDSnapshot> {
   }
 
   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)
   }

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],
+    ])
+  })
+})

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