tldraw/state/inputs.tsx

247 lines
5.1 KiB
TypeScript
Raw Normal View History

2021-06-01 21:49:32 +00:00
import React from 'react'
2021-06-30 20:56:42 +00:00
import { KeyboardInfo, PointerInfo } from 'types'
import vec from 'utils/vec'
2021-06-24 08:18:14 +00:00
import { isDarwin, getPoint } from 'utils'
2021-05-13 06:44:52 +00:00
const DOUBLE_CLICK_DURATION = 250
2021-06-04 16:08:43 +00:00
2021-05-13 06:44:52 +00:00
class Inputs {
activePointerId?: number
2021-06-18 14:39:07 +00:00
pointerUpTime = 0
2021-06-30 20:56:42 +00:00
2021-06-18 14:39:07 +00:00
pointer: PointerInfo
2021-06-30 20:56:42 +00:00
points: Record<string, PointerInfo> = {}
keyboard: KeyboardInfo
keys: Record<string, boolean> = {}
2021-05-13 06:44:52 +00:00
2021-06-01 21:49:32 +00:00
touchStart(e: TouchEvent | React.TouchEvent, target: string) {
const { shiftKey, ctrlKey, metaKey, altKey } = e
2021-06-18 14:39:07 +00:00
e.preventDefault()
2021-06-01 21:49:32 +00:00
const touch = e.changedTouches[0]
const info = {
target,
pointerId: touch.identifier,
origin: getPoint(touch),
point: getPoint(touch),
2021-06-06 07:33:30 +00:00
pressure: 0.5,
2021-06-01 21:49:32 +00:00
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
this.points[touch.identifier] = info
this.activePointerId = touch.identifier
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-06-01 21:49:32 +00:00
return info
}
touchMove(e: TouchEvent | React.TouchEvent) {
const { shiftKey, ctrlKey, metaKey, altKey } = e
2021-06-18 14:39:07 +00:00
e.preventDefault()
2021-06-01 21:49:32 +00:00
const touch = e.changedTouches[0]
const prev = this.points[touch.identifier]
const info = {
...prev,
pointerId: touch.identifier,
point: getPoint(touch),
2021-06-06 07:33:30 +00:00
pressure: 0.5,
2021-06-01 21:49:32 +00:00
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
if (this.points[touch.identifier]) {
this.points[touch.identifier] = info
}
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-06-01 21:49:32 +00:00
return info
}
pointerDown(e: PointerEvent | React.PointerEvent, target: string) {
2021-05-13 06:44:52 +00:00
const { shiftKey, ctrlKey, metaKey, altKey } = e
2021-05-13 08:34:56 +00:00
const info = {
target,
2021-05-13 06:44:52 +00:00
pointerId: e.pointerId,
origin: getPoint(e),
point: getPoint(e),
2021-06-06 07:33:30 +00:00
pressure: e.pressure || 0.5,
2021-05-13 06:44:52 +00:00
shiftKey,
ctrlKey,
2021-05-13 08:34:56 +00:00
metaKey: isDarwin() ? metaKey : ctrlKey,
2021-05-13 06:44:52 +00:00
altKey,
}
2021-05-13 08:34:56 +00:00
this.points[e.pointerId] = info
this.activePointerId = e.pointerId
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-07-04 18:45:07 +00:00
2021-05-13 08:34:56 +00:00
return info
2021-05-13 06:44:52 +00:00
}
2021-05-14 22:56:41 +00:00
pointerEnter(e: PointerEvent | React.PointerEvent, target: string) {
const { shiftKey, ctrlKey, metaKey, altKey } = e
const info = {
target,
pointerId: e.pointerId,
origin: getPoint(e),
point: getPoint(e),
2021-06-06 07:33:30 +00:00
pressure: e.pressure || 0.5,
2021-05-14 22:56:41 +00:00
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-05-14 22:56:41 +00:00
return info
}
pointerMove(e: PointerEvent | React.PointerEvent, target = '') {
2021-05-13 06:44:52 +00:00
const { shiftKey, ctrlKey, metaKey, altKey } = e
2021-05-13 08:34:56 +00:00
const prev = this.points[e.pointerId]
const info = {
...prev,
target,
2021-05-13 06:44:52 +00:00
pointerId: e.pointerId,
point: getPoint(e),
2021-06-06 07:33:30 +00:00
pressure: e.pressure || 0.5,
2021-05-13 06:44:52 +00:00
shiftKey,
ctrlKey,
2021-05-13 08:34:56 +00:00
metaKey: isDarwin() ? metaKey : ctrlKey,
2021-05-13 06:44:52 +00:00
altKey,
}
2021-05-13 08:34:56 +00:00
if (this.points[e.pointerId]) {
this.points[e.pointerId] = info
}
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-05-13 08:34:56 +00:00
return info
2021-05-13 06:44:52 +00:00
}
pointerUp = (e: PointerEvent | React.PointerEvent, target = '') => {
2021-05-13 08:34:56 +00:00
const { shiftKey, ctrlKey, metaKey, altKey } = e
2021-05-13 06:44:52 +00:00
2021-05-13 08:34:56 +00:00
const prev = this.points[e.pointerId]
const info = {
...prev,
target,
origin: prev?.origin || getPoint(e),
point: getPoint(e),
2021-06-06 07:33:30 +00:00
pressure: e.pressure || 0.5,
2021-05-13 08:34:56 +00:00
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
2021-05-13 06:44:52 +00:00
delete this.points[e.pointerId]
2021-06-18 15:19:10 +00:00
delete this.activePointerId
if (vec.dist(info.origin, info.point) < 8) {
2021-06-18 14:39:07 +00:00
this.pointerUpTime = Date.now()
}
2021-05-13 06:44:52 +00:00
2021-06-18 14:39:07 +00:00
this.pointer = info
2021-05-13 06:44:52 +00:00
return info
}
2021-05-13 08:34:56 +00:00
wheel = (e: WheelEvent) => {
2021-05-13 08:34:56 +00:00
const { shiftKey, ctrlKey, metaKey, altKey } = e
return { point: getPoint(e), shiftKey, ctrlKey, metaKey, altKey }
2021-05-13 08:34:56 +00:00
}
2021-05-19 21:24:41 +00:00
2021-07-04 18:45:07 +00:00
canAccept = (pointerId: PointerEvent['pointerId']): boolean => {
pointerId
return true
}
2021-07-04 18:45:07 +00:00
// canAccept = (pointerId: PointerEvent['pointerId']) => {
// return (
// this.activePointerId === undefined || this.activePointerId === pointerId
// )
// }
2021-06-04 16:08:43 +00:00
isDoubleClick() {
2021-06-18 14:39:07 +00:00
if (!this.pointer) return
2021-06-15 12:20:22 +00:00
2021-06-18 14:39:07 +00:00
const { origin, point } = this.pointer
2021-06-15 12:20:22 +00:00
return (
2021-06-18 14:39:07 +00:00
Date.now() - this.pointerUpTime < DOUBLE_CLICK_DURATION &&
vec.dist(origin, point) < 4
)
2021-06-04 16:08:43 +00:00
}
2021-06-18 15:19:10 +00:00
clear() {
this.activePointerId = undefined
this.pointer = undefined
this.points = {}
}
resetDoubleClick() {
this.pointerUpTime = 0
}
2021-06-30 20:56:42 +00:00
keydown = (e: KeyboardEvent | React.KeyboardEvent): KeyboardInfo => {
const { shiftKey, ctrlKey, metaKey, altKey } = e
this.keys[e.key] = true
return {
key: e.key,
keys: Object.keys(this.keys),
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
}
keyup = (e: KeyboardEvent | React.KeyboardEvent): KeyboardInfo => {
const { shiftKey, ctrlKey, metaKey, altKey } = e
delete this.keys[e.key]
return {
key: e.key,
keys: Object.keys(this.keys),
shiftKey,
ctrlKey,
metaKey: isDarwin() ? metaKey : ctrlKey,
altKey,
}
}
2021-07-04 18:45:07 +00:00
reset() {
this.activePointerId = undefined
this.pointerUpTime = 0
this.pointer = undefined
this.points = {}
this.keyboard = undefined
this.keys = {}
}
2021-05-13 06:44:52 +00:00
}
export default new Inputs()