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'
|
2021-06-16 12:09:45 +00:00
|
|
|
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
|
|
|
|
2021-06-22 21:06:51 +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 {
|
2021-05-30 13:14:35 +00:00
|
|
|
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,
|
2021-06-11 10:11:42 +00:00
|
|
|
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,
|
2021-06-11 10:11:42 +00:00
|
|
|
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
|
|
|
|
}
|
|
|
|
|
2021-05-13 10:13:14 +00:00
|
|
|
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 = {
|
2021-05-13 10:13:14 +00:00
|
|
|
target,
|
2021-05-13 06:44:52 +00:00
|
|
|
pointerId: e.pointerId,
|
2021-06-11 10:11:42 +00:00
|
|
|
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
|
2021-05-30 13:14:35 +00:00
|
|
|
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,
|
2021-06-11 10:11:42 +00:00
|
|
|
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
|
|
|
|
}
|
|
|
|
|
2021-06-22 21:06:51 +00:00
|
|
|
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 = {
|
2021-05-13 10:13:14 +00:00
|
|
|
...prev,
|
2021-06-22 21:06:51 +00:00
|
|
|
target,
|
2021-05-13 06:44:52 +00:00
|
|
|
pointerId: e.pointerId,
|
2021-06-11 10:11:42 +00:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2021-06-22 21:06:51 +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 = {
|
2021-05-13 10:13:14 +00:00
|
|
|
...prev,
|
2021-06-22 21:06:51 +00:00
|
|
|
target,
|
2021-06-11 10:11:42 +00:00
|
|
|
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
|
|
|
|
2021-05-30 13:14:35 +00:00
|
|
|
delete this.activePointerId
|
2021-06-15 11:58:51 +00:00
|
|
|
|
|
|
|
if (vec.dist(info.origin, info.point) < 8) {
|
2021-06-18 14:39:07 +00:00
|
|
|
this.pointerUpTime = Date.now()
|
2021-06-15 11:58:51 +00:00
|
|
|
}
|
2021-05-13 06:44:52 +00:00
|
|
|
|
2021-06-18 14:39:07 +00:00
|
|
|
this.pointer = info
|
2021-07-01 14:03:02 +00:00
|
|
|
|
2021-05-13 06:44:52 +00:00
|
|
|
return info
|
|
|
|
}
|
2021-05-13 08:34:56 +00:00
|
|
|
|
2021-06-15 11:58:51 +00:00
|
|
|
wheel = (e: WheelEvent) => {
|
2021-05-13 08:34:56 +00:00
|
|
|
const { shiftKey, ctrlKey, metaKey, altKey } = e
|
2021-06-11 10:11:42 +00:00
|
|
|
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-05-30 13:14:35 +00:00
|
|
|
}
|
|
|
|
|
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
|
|
|
|
2021-06-15 11:58:51 +00:00
|
|
|
return (
|
2021-06-18 14:39:07 +00:00
|
|
|
Date.now() - this.pointerUpTime < DOUBLE_CLICK_DURATION &&
|
2021-07-03 13:28:43 +00:00
|
|
|
vec.dist(origin, point) < 4
|
2021-06-15 11:58:51 +00:00
|
|
|
)
|
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 = {}
|
|
|
|
}
|
2021-06-23 12:46:16 +00:00
|
|
|
|
|
|
|
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()
|