Add support for Microsoft Surface Pen eraser (#1009)

packages/tldraw/src/state/TldrawApp.spec.ts

@@ -797,3 +797,22 @@ describe('When space panning', () => {
     expect(app.currentTool.status).toBe('idle')
   })
 })
+
+describe('When using a pen eraser', () => {
+  it('switches to eraser tool when using the draw tool and back when letting go', () => {
+    const app = new TldrawTestApp()
+    app.selectTool(TDShapeType.Draw)
+    app.pressEraser()
+    expect(app.currentTool.type).toBe('erase')
+    app.releaseEraser()
+    expect(app.currentTool.type).toBe(TDShapeType.Draw)
+  })
+  it('does not switch when using other tools', () => {
+    const app = new TldrawTestApp()
+    app.selectTool('select')
+    app.pressEraser()
+    expect(app.currentTool.type).toBe('select')
+    app.releaseEraser()
+    expect(app.currentTool.type).toBe('select')
+  })
+})

packages/tldraw/src/state/TldrawApp.ts

@@ -240,6 +240,8 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
   isForcePanning = false
 
+  isErasingWithPen = false
+
   isPastePrevented = false
 
   editingStartTime = -1
@@ -3782,6 +3784,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     this.originPoint = this.getPagePoint(info.point).concat(info.pressure)
     this.updateInputs(info, e)
     if (this.isForcePanning) return
+    if (this.currentTool.type === TDShapeType.Draw && e.pointerType === 'pen' && e.button === 5) {
+      this.selectTool('erase')
+      this.isErasingWithPen = true
+    }
     this.currentTool.onPointerDown?.(info, e)
   }
 
@@ -3790,6 +3796,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     if (!this.shiftKey) this.isForcePanning = false
     this.updateInputs(info, e)
     this.currentTool.onPointerUp?.(info, e)
+    if (this.isErasingWithPen && e.pointerType === 'pen' && e.button === 5) {
+      this.selectTool(TDShapeType.Draw)
+      this.isErasingWithPen = false
+    }
   }
 
   // Canvas (background)

packages/tldraw/src/state/__snapshots__/TldrawApp.spec.ts.snap

@@ -401,6 +401,7 @@ TldrawTestApp {
   "insertContent": [Function],
   "isCreating": false,
   "isDirty": false,
+  "isErasingWithPen": false,
   "isForcePanning": false,
   "isPastePrevented": false,
   "isPaused": false,
@@ -496,6 +497,7 @@ TldrawTestApp {
   "pointCanvas": [Function],
   "pointShape": [Function],
   "pointer": -1,
+  "pressEraser": [Function],
   "pressKey": [Function],
   "prevSelectedIds": Array [],
   "preventPaste": [Function],
@@ -508,6 +510,7 @@ TldrawTestApp {
   "redo": [Function],
   "redoSelect": [Function],
   "refreshBoundingBoxes": [Function],
+  "releaseEraser": [Function],
   "releaseKey": [Function],
   "removeUser": [Function],
   "renamePage": [Function],

packages/tldraw/src/test/TldrawTestApp.tsx

@@ -166,6 +166,13 @@ export class TldrawTestApp extends TldrawApp {
     } as PointerEvent
   }
 
+  getEraser(): React.PointerEvent {
+    return {
+      pointerType: 'pen',
+      button: 5,
+    } as React.PointerEvent
+  }
+
   expectSelectedIdsToBe = (b: string[]) => {
     expect(new Set(this.selectedIds)).toEqual(new Set(b))
     return this
@@ -199,4 +206,12 @@ export class TldrawTestApp extends TldrawApp {
     this.onKeyUp(key, inputs.keyup(e), e)
     return this
   }
+
+  pressEraser = () => {
+    this.onPointerDown(inputs.pointerDown(this.getPoint(), 'canvas'), this.getEraser())
+  }
+
+  releaseEraser = () => {
+    this.onPointerUp(inputs.pointerUp(this.getPoint(), 'canvas'), this.getEraser())
+  }
 }