-
Notifications
You must be signed in to change notification settings - Fork 782
/
interactions.ts
289 lines (243 loc) · 8.65 KB
/
interactions.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
import browser from '@interactjs/utils/browser'
import domObjects from '@interactjs/utils/domObjects'
import { nodeContains } from '@interactjs/utils/domUtils'
import * as pointerUtils from '@interactjs/utils/pointerUtils'
import type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'
import type { ActionName, Listener } from '@interactjs/core/types'
/* eslint-disable import/no-duplicates -- for typescript module augmentations */
import './interactablePreventDefault'
import interactablePreventDefault from './interactablePreventDefault'
import InteractionBase from './Interaction'
/* eslint-enable import/no-duplicates */
import type { SearchDetails } from './interactionFinder'
import finder from './interactionFinder'
declare module '@interactjs/core/scope' {
interface Scope {
Interaction: typeof InteractionBase
interactions: {
new: <T extends ActionName>(options: any) => InteractionBase<T>
list: Array<InteractionBase<ActionName>>
listeners: { [type: string]: Listener }
docEvents: Array<{ type: string; listener: Listener }>
pointerMoveTolerance: number
}
prevTouchTime: number
}
interface SignalArgs {
'interactions:find': {
interaction: InteractionBase
searchDetails: SearchDetails
}
}
}
const methodNames = [
'pointerDown',
'pointerMove',
'pointerUp',
'updatePointer',
'removePointer',
'windowBlur',
]
function install(scope: Scope) {
const listeners = {} as any
for (const method of methodNames) {
listeners[method] = doOnInteractions(method, scope)
}
const pEventTypes = browser.pEventTypes
let docEvents: typeof scope.interactions.docEvents
if (domObjects.PointerEvent) {
docEvents = [
{ type: pEventTypes.down, listener: releasePointersOnRemovedEls },
{ type: pEventTypes.down, listener: listeners.pointerDown },
{ type: pEventTypes.move, listener: listeners.pointerMove },
{ type: pEventTypes.up, listener: listeners.pointerUp },
{ type: pEventTypes.cancel, listener: listeners.pointerUp },
]
} else {
docEvents = [
{ type: 'mousedown', listener: listeners.pointerDown },
{ type: 'mousemove', listener: listeners.pointerMove },
{ type: 'mouseup', listener: listeners.pointerUp },
{ type: 'touchstart', listener: releasePointersOnRemovedEls },
{ type: 'touchstart', listener: listeners.pointerDown },
{ type: 'touchmove', listener: listeners.pointerMove },
{ type: 'touchend', listener: listeners.pointerUp },
{ type: 'touchcancel', listener: listeners.pointerUp },
]
}
docEvents.push({
type: 'blur',
listener(event) {
for (const interaction of scope.interactions.list) {
interaction.documentBlur(event)
}
},
})
// for ignoring browser's simulated mouse events
scope.prevTouchTime = 0
scope.Interaction = class<T extends ActionName> extends InteractionBase<T> {
get pointerMoveTolerance() {
return scope.interactions.pointerMoveTolerance
}
set pointerMoveTolerance(value) {
scope.interactions.pointerMoveTolerance = value
}
_now() {
return scope.now()
}
}
scope.interactions = {
// all active and idle interactions
list: [],
new<T extends ActionName>(options: { pointerType?: string; scopeFire?: Scope['fire'] }) {
options.scopeFire = (name, arg) => scope.fire(name, arg)
const interaction = new scope.Interaction<T>(options as Required<typeof options>)
scope.interactions.list.push(interaction)
return interaction
},
listeners,
docEvents,
pointerMoveTolerance: 1,
}
function releasePointersOnRemovedEls() {
// for all inactive touch interactions with pointers down
for (const interaction of scope.interactions.list) {
if (!interaction.pointerIsDown || interaction.pointerType !== 'touch' || interaction._interacting) {
continue
}
// if a pointer is down on an element that is no longer in the DOM tree
for (const pointer of interaction.pointers) {
if (!scope.documents.some(({ doc }) => nodeContains(doc, pointer.downTarget))) {
// remove the pointer from the interaction
interaction.removePointer(pointer.pointer, pointer.event)
}
}
}
}
scope.usePlugin(interactablePreventDefault)
}
function doOnInteractions(method: string, scope: Scope) {
return function (event: Event) {
const interactions = scope.interactions.list
const pointerType = pointerUtils.getPointerType(event)
const [eventTarget, curEventTarget] = pointerUtils.getEventTargets(event)
const matches: any[] = [] // [ [pointer, interaction], ...]
if (/^touch/.test(event.type)) {
scope.prevTouchTime = scope.now()
// @ts-expect-error
for (const changedTouch of event.changedTouches) {
const pointer = changedTouch
const pointerId = pointerUtils.getPointerId(pointer)
const searchDetails: SearchDetails = {
pointer,
pointerId,
pointerType,
eventType: event.type,
eventTarget,
curEventTarget,
scope,
}
const interaction = getInteraction(searchDetails)
matches.push([
searchDetails.pointer,
searchDetails.eventTarget,
searchDetails.curEventTarget,
interaction,
])
}
} else {
let invalidPointer = false
if (!browser.supportsPointerEvent && /mouse/.test(event.type)) {
// ignore mouse events while touch interactions are active
for (let i = 0; i < interactions.length && !invalidPointer; i++) {
invalidPointer = interactions[i].pointerType !== 'mouse' && interactions[i].pointerIsDown
}
// try to ignore mouse events that are simulated by the browser
// after a touch event
invalidPointer =
invalidPointer ||
scope.now() - scope.prevTouchTime < 500 ||
// on iOS and Firefox Mobile, MouseEvent.timeStamp is zero if simulated
event.timeStamp === 0
}
if (!invalidPointer) {
const searchDetails = {
pointer: event as PointerEvent,
pointerId: pointerUtils.getPointerId(event as PointerEvent),
pointerType,
eventType: event.type,
curEventTarget,
eventTarget,
scope,
}
const interaction = getInteraction(searchDetails)
matches.push([
searchDetails.pointer,
searchDetails.eventTarget,
searchDetails.curEventTarget,
interaction,
])
}
}
// eslint-disable-next-line no-shadow
for (const [pointer, eventTarget, curEventTarget, interaction] of matches) {
interaction[method](pointer, event, eventTarget, curEventTarget)
}
}
}
function getInteraction(searchDetails: SearchDetails) {
const { pointerType, scope } = searchDetails
const foundInteraction = finder.search(searchDetails)
const signalArg = { interaction: foundInteraction, searchDetails }
scope.fire('interactions:find', signalArg)
return signalArg.interaction || scope.interactions.new({ pointerType })
}
function onDocSignal<T extends 'scope:add-document' | 'scope:remove-document'>(
{ doc, scope, options }: SignalArgs[T],
eventMethodName: 'add' | 'remove',
) {
const {
interactions: { docEvents },
events,
} = scope
const eventMethod = events[eventMethodName]
if (scope.browser.isIOS && !options.events) {
options.events = { passive: false }
}
// delegate event listener
for (const eventType in events.delegatedEvents) {
eventMethod(doc, eventType, events.delegateListener)
eventMethod(doc, eventType, events.delegateUseCapture, true)
}
const eventOptions = options && options.events
for (const { type, listener } of docEvents) {
eventMethod(doc, type, listener, eventOptions)
}
}
const interactions: Plugin = {
id: 'core/interactions',
install,
listeners: {
'scope:add-document': (arg) => onDocSignal(arg, 'add'),
'scope:remove-document': (arg) => onDocSignal(arg, 'remove'),
'interactable:unset': ({ interactable }, scope) => {
// Stop and destroy related interactions when an Interactable is unset
for (let i = scope.interactions.list.length - 1; i >= 0; i--) {
const interaction = scope.interactions.list[i]
if (interaction.interactable !== interactable) {
continue
}
interaction.stop()
scope.fire('interactions:destroy', { interaction })
interaction.destroy()
if (scope.interactions.list.length > 2) {
scope.interactions.list.splice(i, 1)
}
}
},
},
onDocSignal,
doOnInteractions,
methodNames,
}
export default interactions