fix missing pressure (#546)

This commit is contained in:
Steve Ruiz 2022-01-31 12:25:51 +00:00 committed by GitHub
parent 4c9c757cb5
commit 16076dcdac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 18 deletions

View file

@ -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)
}

View file

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

View file

@ -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