diff --git a/packages/tldraw/src/state/TldrawApp.spec.ts b/packages/tldraw/src/state/TldrawApp.spec.ts index 93969a653..883aef6d3 100644 --- a/packages/tldraw/src/state/TldrawApp.spec.ts +++ b/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') + }) +}) diff --git a/packages/tldraw/src/state/TldrawApp.ts b/packages/tldraw/src/state/TldrawApp.ts index 409662591..e655495be 100644 --- a/packages/tldraw/src/state/TldrawApp.ts +++ b/packages/tldraw/src/state/TldrawApp.ts @@ -240,6 +240,8 @@ export class TldrawApp extends StateManager { isForcePanning = false + isErasingWithPen = false + isPastePrevented = false editingStartTime = -1 @@ -3782,6 +3784,10 @@ export class TldrawApp extends StateManager { 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 { 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) diff --git a/packages/tldraw/src/state/__snapshots__/TldrawApp.spec.ts.snap b/packages/tldraw/src/state/__snapshots__/TldrawApp.spec.ts.snap index f09ff8574..660a0501a 100644 --- a/packages/tldraw/src/state/__snapshots__/TldrawApp.spec.ts.snap +++ b/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], diff --git a/packages/tldraw/src/test/TldrawTestApp.tsx b/packages/tldraw/src/test/TldrawTestApp.tsx index b35c89baa..32fe0c289 100644 --- a/packages/tldraw/src/test/TldrawTestApp.tsx +++ b/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()) + } }