westures-core 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +3 -14
- package/dist/index.js +1249 -22
- package/dist/index.js.map +1 -1
- package/package.json +30 -14
- package/src/Input.js +6 -2
- package/src/Region.js +40 -10
- package/src/State.js +39 -37
package/dist/index.js
CHANGED
|
@@ -1,22 +1,1249 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"use strict";
|
|
7
|
-
|
|
8
|
-
"use strict";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
/**
|
|
2
|
+
* The global API interface for westures-core. Exposes all classes, constants,
|
|
3
|
+
* and routines used by the package. Use responsibly.
|
|
4
|
+
*
|
|
5
|
+
* @namespace westures-core
|
|
6
|
+
*/ "use strict";
|
|
7
|
+
var $de0d6a332419bf3c$exports = {};
|
|
8
|
+
"use strict";
|
|
9
|
+
let $de0d6a332419bf3c$var$g_id = 0;
|
|
10
|
+
/**
|
|
11
|
+
* The Gesture class that all gestures inherit from. A custom gesture class will
|
|
12
|
+
* need to override some or all of the four phase "hooks": start, move, end, and
|
|
13
|
+
* cancel.
|
|
14
|
+
*
|
|
15
|
+
* @memberof westures-core
|
|
16
|
+
*
|
|
17
|
+
* @param {string} type - The name of the gesture.
|
|
18
|
+
* @param {Element} element - The element to which to associate the gesture.
|
|
19
|
+
* @param {Function} handler - The function handler to execute when a gesture
|
|
20
|
+
* is recognized on the associated element.
|
|
21
|
+
* @param {object} [options] - Generic gesture options
|
|
22
|
+
* @param {westures-core.STATE_KEYS[]} [options.enableKeys=[]] - List of keys
|
|
23
|
+
* which will enable the gesture. The gesture will not be recognized unless one
|
|
24
|
+
* of these keys is pressed while the interaction occurs. If not specified or an
|
|
25
|
+
* empty list, the gesture is treated as though the enable key is always down.
|
|
26
|
+
* @param {westures-core.STATE_KEYS[]} [options.disableKeys=[]] - List of keys
|
|
27
|
+
* which will disable the gesture. The gesture will not be recognized if one of
|
|
28
|
+
* these keys is pressed while the interaction occurs. If not specified or an
|
|
29
|
+
* empty list, the gesture is treated as though the disable key is never down.
|
|
30
|
+
* @param {number} [options.minInputs=1] - The minimum number of pointers that
|
|
31
|
+
* must be active for the gesture to be recognized. Uses >=.
|
|
32
|
+
* @param {number} [options.maxInputs=Number.MAX_VALUE] - The maximum number of
|
|
33
|
+
* pointers that may be active for the gesture to be recognized. Uses <=.
|
|
34
|
+
*/ class $de0d6a332419bf3c$var$Gesture {
|
|
35
|
+
constructor(type, element, handler, options = {}){
|
|
36
|
+
if (typeof type !== "string") throw new TypeError("Gestures require a string type / name");
|
|
37
|
+
/**
|
|
38
|
+
* The name of the gesture. (e.g. 'pan' or 'tap' or 'pinch').
|
|
39
|
+
*
|
|
40
|
+
* @type {string}
|
|
41
|
+
*/ this.type = type;
|
|
42
|
+
/**
|
|
43
|
+
* The unique identifier for each gesture. This allows for distinctions
|
|
44
|
+
* across instances of Gestures that are created on the fly (e.g.
|
|
45
|
+
* gesture-tap-1, gesture-tap-2).
|
|
46
|
+
*
|
|
47
|
+
* @type {string}
|
|
48
|
+
*/ this.id = `gesture-${this.type}-${$de0d6a332419bf3c$var$g_id++}`;
|
|
49
|
+
/**
|
|
50
|
+
* The element to which to associate the gesture.
|
|
51
|
+
*
|
|
52
|
+
* @type {Element}
|
|
53
|
+
*/ this.element = element;
|
|
54
|
+
/**
|
|
55
|
+
* The function handler to execute when the gesture is recognized on the
|
|
56
|
+
* associated element.
|
|
57
|
+
*
|
|
58
|
+
* @type {Function}
|
|
59
|
+
*/ this.handler = handler;
|
|
60
|
+
/**
|
|
61
|
+
* The options. Can usually be adjusted live, though be careful doing this.
|
|
62
|
+
*
|
|
63
|
+
* @type {object}
|
|
64
|
+
*/ this.options = {
|
|
65
|
+
...$de0d6a332419bf3c$var$Gesture.DEFAULTS,
|
|
66
|
+
...options
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Determines whether this gesture is enabled.
|
|
71
|
+
*
|
|
72
|
+
* @param {westures-core.State} state - The input state object of the current
|
|
73
|
+
* region.
|
|
74
|
+
*
|
|
75
|
+
* @return {boolean} true if enabled, false otherwise.
|
|
76
|
+
*/ isEnabled(state) {
|
|
77
|
+
const count = state.active.length;
|
|
78
|
+
const event = state.event;
|
|
79
|
+
const { enableKeys: enableKeys , disableKeys: disableKeys , minInputs: minInputs , maxInputs: maxInputs } = this.options;
|
|
80
|
+
return minInputs <= count && maxInputs >= count && (enableKeys.length === 0 || enableKeys.some((k)=>event[k])) && !disableKeys.some((k)=>event[k]);
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Event hook for the start phase of a gesture.
|
|
84
|
+
*
|
|
85
|
+
* @param {westures-core.State} state - The input state object of the current
|
|
86
|
+
* region.
|
|
87
|
+
*
|
|
88
|
+
* @return {?Object} Gesture is considered recognized if an Object is
|
|
89
|
+
* returned.
|
|
90
|
+
*/ start() {
|
|
91
|
+
return null;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Event hook for the move phase of a gesture.
|
|
95
|
+
*
|
|
96
|
+
* @param {westures-core.State} state - The input state object of the current
|
|
97
|
+
* region.
|
|
98
|
+
*
|
|
99
|
+
* @return {?Object} Gesture is considered recognized if an Object is
|
|
100
|
+
* returned.
|
|
101
|
+
*/ move() {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Event hook for the end phase of a gesture.
|
|
106
|
+
*
|
|
107
|
+
* @param {westures-core.State} state - The input state object of the current
|
|
108
|
+
* region.
|
|
109
|
+
*
|
|
110
|
+
* @return {?Object} Gesture is considered recognized if an Object is
|
|
111
|
+
* returned.
|
|
112
|
+
*/ end() {
|
|
113
|
+
return null;
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Event hook for when an input is cancelled.
|
|
117
|
+
*
|
|
118
|
+
* @param {westures-core.State} state - The input state object of the current
|
|
119
|
+
* region.
|
|
120
|
+
*
|
|
121
|
+
* @return {?Object} Gesture is considered recognized if an Object is
|
|
122
|
+
* returned.
|
|
123
|
+
*/ cancel() {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Evalutes the given gesture hook, and dispatches any data that is produced
|
|
128
|
+
* by calling [recognize]{@link westures-core.Gesture#recognize}.
|
|
129
|
+
*
|
|
130
|
+
* @param {string} hook - Must be one of 'start', 'move', 'end', or 'cancel'.
|
|
131
|
+
* @param {westures-core.State} state - The current State instance.
|
|
132
|
+
*/ evaluateHook(hook, state) {
|
|
133
|
+
const data = this[hook](state);
|
|
134
|
+
if (data) this.recognize(hook, state, data);
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Recognize a Gesture by calling the handler. Standardizes the way the
|
|
138
|
+
* handler is called so that classes extending Gesture can circumvent the
|
|
139
|
+
* evaluateHook approach but still provide results that have a common format.
|
|
140
|
+
*
|
|
141
|
+
* Note that the properties in the "data" object will receive priority when
|
|
142
|
+
* constructing the results. This can be used to override standard results
|
|
143
|
+
* such as the phase or the centroid.
|
|
144
|
+
*
|
|
145
|
+
* @param {string} hook - Must be one of 'start', 'move', 'end', or 'cancel'.
|
|
146
|
+
* @param {westures-core.State} state - current input state.
|
|
147
|
+
* @param {Object} data - Results data specific to the recognized gesture.
|
|
148
|
+
*/ recognize(hook, state, data) {
|
|
149
|
+
this.handler({
|
|
150
|
+
centroid: state.centroid,
|
|
151
|
+
event: state.event,
|
|
152
|
+
phase: hook,
|
|
153
|
+
type: this.type,
|
|
154
|
+
target: this.element,
|
|
155
|
+
...data
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
$de0d6a332419bf3c$var$Gesture.DEFAULTS = {
|
|
160
|
+
enableKeys: [],
|
|
161
|
+
disableKeys: [],
|
|
162
|
+
minInputs: 1,
|
|
163
|
+
maxInputs: Number.MAX_VALUE
|
|
164
|
+
};
|
|
165
|
+
$de0d6a332419bf3c$exports = $de0d6a332419bf3c$var$Gesture;
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
var $e2125e2e71e37a0c$exports = {};
|
|
169
|
+
"use strict";
|
|
170
|
+
var $0ca7bfe1c074e8ca$exports = {};
|
|
171
|
+
"use strict";
|
|
172
|
+
var $6c3676f10a43b740$exports = {};
|
|
173
|
+
"use strict";
|
|
174
|
+
/**
|
|
175
|
+
* The Point2D class stores and operates on 2-dimensional points, represented as
|
|
176
|
+
* x and y coordinates.
|
|
177
|
+
*
|
|
178
|
+
* @memberof westures-core
|
|
179
|
+
*
|
|
180
|
+
* @param {number} [ x=0 ] - The x coordinate of the point.
|
|
181
|
+
* @param {number} [ y=0 ] - The y coordinate of the point.
|
|
182
|
+
*/ class $6c3676f10a43b740$var$Point2D {
|
|
183
|
+
constructor(x = 0, y = 0){
|
|
184
|
+
/**
|
|
185
|
+
* The x coordinate of the point.
|
|
186
|
+
*
|
|
187
|
+
* @type {number}
|
|
188
|
+
*/ this.x = x;
|
|
189
|
+
/**
|
|
190
|
+
* The y coordinate of the point.
|
|
191
|
+
*
|
|
192
|
+
* @type {number}
|
|
193
|
+
*/ this.y = y;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Calculates the angle between this point and the given point.
|
|
197
|
+
*
|
|
198
|
+
* @param {!westures-core.Point2D} point - Projected point for calculating the
|
|
199
|
+
* angle.
|
|
200
|
+
*
|
|
201
|
+
* @return {number} Radians along the unit circle where the projected
|
|
202
|
+
* point lies.
|
|
203
|
+
*/ angleTo(point) {
|
|
204
|
+
return Math.atan2(point.y - this.y, point.x - this.x);
|
|
205
|
+
}
|
|
206
|
+
/**
|
|
207
|
+
* Determine the angle from the centroid to each of the points.
|
|
208
|
+
*
|
|
209
|
+
* @param {!westures-core.Point2D[]} points - the Point2D objects to calculate
|
|
210
|
+
* the angles to.
|
|
211
|
+
*
|
|
212
|
+
* @returns {number[]}
|
|
213
|
+
*/ anglesTo(points) {
|
|
214
|
+
return points.map((point)=>this.angleTo(point));
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Determine the average distance from this point to the provided array of
|
|
218
|
+
* points.
|
|
219
|
+
*
|
|
220
|
+
* @param {!westures-core.Point2D[]} points - the Point2D objects to calculate
|
|
221
|
+
* the average distance to.
|
|
222
|
+
*
|
|
223
|
+
* @return {number} The average distance from this point to the provided
|
|
224
|
+
* points.
|
|
225
|
+
*/ averageDistanceTo(points) {
|
|
226
|
+
return this.totalDistanceTo(points) / points.length;
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* Clone this point.
|
|
230
|
+
*
|
|
231
|
+
* @return {westures-core.Point2D} A new Point2D, identical to this point.
|
|
232
|
+
*/ clone() {
|
|
233
|
+
return new $6c3676f10a43b740$var$Point2D(this.x, this.y);
|
|
234
|
+
}
|
|
235
|
+
/**
|
|
236
|
+
* Calculates the distance between two points.
|
|
237
|
+
*
|
|
238
|
+
* @param {!westures-core.Point2D} point - Point to which the distance is
|
|
239
|
+
* calculated.
|
|
240
|
+
*
|
|
241
|
+
* @return {number} The distance between the two points, a.k.a. the
|
|
242
|
+
* hypoteneuse.
|
|
243
|
+
*/ distanceTo(point) {
|
|
244
|
+
return Math.hypot(point.x - this.x, point.y - this.y);
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* Subtract the given point from this point.
|
|
248
|
+
*
|
|
249
|
+
* @param {!westures-core.Point2D} point - Point to subtract from this point.
|
|
250
|
+
*
|
|
251
|
+
* @return {westures-core.Point2D} A new Point2D, which is the result of (this
|
|
252
|
+
* - point).
|
|
253
|
+
*/ minus(point) {
|
|
254
|
+
return new $6c3676f10a43b740$var$Point2D(this.x - point.x, this.y - point.y);
|
|
255
|
+
}
|
|
256
|
+
/**
|
|
257
|
+
* Return the summation of this point to the given point.
|
|
258
|
+
*
|
|
259
|
+
* @param {!westures-core.Point2D} point - Point to add to this point.
|
|
260
|
+
*
|
|
261
|
+
* @return {westures-core.Point2D} A new Point2D, which is the addition of the
|
|
262
|
+
* two points.
|
|
263
|
+
*/ plus(point) {
|
|
264
|
+
return new $6c3676f10a43b740$var$Point2D(this.x + point.x, this.y + point.y);
|
|
265
|
+
}
|
|
266
|
+
/**
|
|
267
|
+
* Calculates the total distance from this point to an array of points.
|
|
268
|
+
*
|
|
269
|
+
* @param {!westures-core.Point2D[]} points - The array of Point2D objects to
|
|
270
|
+
* calculate the total distance to.
|
|
271
|
+
*
|
|
272
|
+
* @return {number} The total distance from this point to the provided points.
|
|
273
|
+
*/ totalDistanceTo(points) {
|
|
274
|
+
return points.reduce((d, p)=>d + this.distanceTo(p), 0);
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* Calculates the centroid of a list of points.
|
|
278
|
+
*
|
|
279
|
+
* @param {westures-core.Point2D[]} points - The array of Point2D objects for
|
|
280
|
+
* which to calculate the centroid.
|
|
281
|
+
*
|
|
282
|
+
* @return {westures-core.Point2D} The centroid of the provided points.
|
|
283
|
+
*/ static centroid(points = []) {
|
|
284
|
+
if (points.length === 0) return null;
|
|
285
|
+
const total = $6c3676f10a43b740$var$Point2D.sum(points);
|
|
286
|
+
total.x /= points.length;
|
|
287
|
+
total.y /= points.length;
|
|
288
|
+
return total;
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* Calculates the sum of the given points.
|
|
292
|
+
*
|
|
293
|
+
* @param {westures-core.Point2D[]} points - The Point2D objects to sum up.
|
|
294
|
+
*
|
|
295
|
+
* @return {westures-core.Point2D} A new Point2D representing the sum of the
|
|
296
|
+
* given points.
|
|
297
|
+
*/ static sum(points = []) {
|
|
298
|
+
return points.reduce((total, pt)=>{
|
|
299
|
+
total.x += pt.x;
|
|
300
|
+
total.y += pt.y;
|
|
301
|
+
return total;
|
|
302
|
+
}, new $6c3676f10a43b740$var$Point2D(0, 0));
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
$6c3676f10a43b740$exports = $6c3676f10a43b740$var$Point2D;
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
var $be6f0e84320366a7$exports = {};
|
|
309
|
+
"use strict";
|
|
310
|
+
/**
|
|
311
|
+
* List of events that trigger the cancel phase.
|
|
312
|
+
*
|
|
313
|
+
* @memberof westures-core
|
|
314
|
+
* @type {string[]}
|
|
315
|
+
*/ const $be6f0e84320366a7$var$CANCEL_EVENTS = [
|
|
316
|
+
"blur",
|
|
317
|
+
"pointercancel",
|
|
318
|
+
"touchcancel",
|
|
319
|
+
"mouseleave"
|
|
320
|
+
];
|
|
321
|
+
/**
|
|
322
|
+
* List of keyboard events that trigger a restart.
|
|
323
|
+
*
|
|
324
|
+
* @memberof westures-core
|
|
325
|
+
* @type {string[]}
|
|
326
|
+
*/ const $be6f0e84320366a7$var$KEYBOARD_EVENTS = [
|
|
327
|
+
"keydown",
|
|
328
|
+
"keyup"
|
|
329
|
+
];
|
|
330
|
+
/**
|
|
331
|
+
* List of mouse events to listen to.
|
|
332
|
+
*
|
|
333
|
+
* @memberof westures-core
|
|
334
|
+
* @type {string[]}
|
|
335
|
+
*/ const $be6f0e84320366a7$var$MOUSE_EVENTS = [
|
|
336
|
+
"mousedown",
|
|
337
|
+
"mousemove",
|
|
338
|
+
"mouseup"
|
|
339
|
+
];
|
|
340
|
+
/**
|
|
341
|
+
* List of pointer events to listen to.
|
|
342
|
+
*
|
|
343
|
+
* @memberof westures-core
|
|
344
|
+
* @type {string[]}
|
|
345
|
+
*/ const $be6f0e84320366a7$var$POINTER_EVENTS = [
|
|
346
|
+
"pointerdown",
|
|
347
|
+
"pointermove",
|
|
348
|
+
"pointerup"
|
|
349
|
+
];
|
|
350
|
+
/**
|
|
351
|
+
* List of touch events to listen to.
|
|
352
|
+
*
|
|
353
|
+
* @memberof westures-core
|
|
354
|
+
* @type {string[]}
|
|
355
|
+
*/ const $be6f0e84320366a7$var$TOUCH_EVENTS = [
|
|
356
|
+
"touchend",
|
|
357
|
+
"touchmove",
|
|
358
|
+
"touchstart"
|
|
359
|
+
];
|
|
360
|
+
/**
|
|
361
|
+
* List of potentially state-modifying keys.
|
|
362
|
+
* Entries are: ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].
|
|
363
|
+
*
|
|
364
|
+
* @memberof westures-core
|
|
365
|
+
* @type {string[]}
|
|
366
|
+
*/ const $be6f0e84320366a7$var$STATE_KEYS = [
|
|
367
|
+
"altKey",
|
|
368
|
+
"ctrlKey",
|
|
369
|
+
"metaKey",
|
|
370
|
+
"shiftKey"
|
|
371
|
+
];
|
|
372
|
+
/**
|
|
373
|
+
* List of the 'key' values on KeyboardEvent objects of the potentially
|
|
374
|
+
* state-modifying keys.
|
|
375
|
+
*
|
|
376
|
+
* @memberof westures-core
|
|
377
|
+
* @type {string[]}
|
|
378
|
+
*/ const $be6f0e84320366a7$var$STATE_KEY_STRINGS = [
|
|
379
|
+
"Alt",
|
|
380
|
+
"Control",
|
|
381
|
+
"Meta",
|
|
382
|
+
"Shift"
|
|
383
|
+
];
|
|
384
|
+
/**
|
|
385
|
+
* The cancel phase.
|
|
386
|
+
*
|
|
387
|
+
* @memberof westures-core
|
|
388
|
+
* @type {string}
|
|
389
|
+
*/ const $be6f0e84320366a7$var$CANCEL = "cancel";
|
|
390
|
+
/**
|
|
391
|
+
* The end phase.
|
|
392
|
+
*
|
|
393
|
+
* @memberof westures-core
|
|
394
|
+
* @type {string}
|
|
395
|
+
*/ const $be6f0e84320366a7$var$END = "end";
|
|
396
|
+
/**
|
|
397
|
+
* The move phase.
|
|
398
|
+
*
|
|
399
|
+
* @memberof westures-core
|
|
400
|
+
* @type {string}
|
|
401
|
+
*/ const $be6f0e84320366a7$var$MOVE = "move";
|
|
402
|
+
/**
|
|
403
|
+
* The start phase.
|
|
404
|
+
*
|
|
405
|
+
* @memberof westures-core
|
|
406
|
+
* @type {string}
|
|
407
|
+
*/ const $be6f0e84320366a7$var$START = "start";
|
|
408
|
+
/**
|
|
409
|
+
* The recognized phases.
|
|
410
|
+
*
|
|
411
|
+
* @memberof westures-core
|
|
412
|
+
* @type {list.<string>}
|
|
413
|
+
*/ const $be6f0e84320366a7$var$PHASES = [
|
|
414
|
+
$be6f0e84320366a7$var$START,
|
|
415
|
+
$be6f0e84320366a7$var$MOVE,
|
|
416
|
+
$be6f0e84320366a7$var$END,
|
|
417
|
+
$be6f0e84320366a7$var$CANCEL
|
|
418
|
+
];
|
|
419
|
+
/**
|
|
420
|
+
* Object that normalizes the names of window events to be either of type start,
|
|
421
|
+
* move, end, or cancel.
|
|
422
|
+
*
|
|
423
|
+
* @memberof westures-core
|
|
424
|
+
* @type {object}
|
|
425
|
+
*/ const $be6f0e84320366a7$var$PHASE = {
|
|
426
|
+
blur: $be6f0e84320366a7$var$CANCEL,
|
|
427
|
+
pointercancel: $be6f0e84320366a7$var$CANCEL,
|
|
428
|
+
touchcancel: $be6f0e84320366a7$var$CANCEL,
|
|
429
|
+
mouseup: $be6f0e84320366a7$var$END,
|
|
430
|
+
pointerup: $be6f0e84320366a7$var$END,
|
|
431
|
+
touchend: $be6f0e84320366a7$var$END,
|
|
432
|
+
mousemove: $be6f0e84320366a7$var$MOVE,
|
|
433
|
+
pointermove: $be6f0e84320366a7$var$MOVE,
|
|
434
|
+
touchmove: $be6f0e84320366a7$var$MOVE,
|
|
435
|
+
mousedown: $be6f0e84320366a7$var$START,
|
|
436
|
+
pointerdown: $be6f0e84320366a7$var$START,
|
|
437
|
+
touchstart: $be6f0e84320366a7$var$START
|
|
438
|
+
};
|
|
439
|
+
$be6f0e84320366a7$exports = {
|
|
440
|
+
CANCEL_EVENTS: $be6f0e84320366a7$var$CANCEL_EVENTS,
|
|
441
|
+
KEYBOARD_EVENTS: $be6f0e84320366a7$var$KEYBOARD_EVENTS,
|
|
442
|
+
MOUSE_EVENTS: $be6f0e84320366a7$var$MOUSE_EVENTS,
|
|
443
|
+
POINTER_EVENTS: $be6f0e84320366a7$var$POINTER_EVENTS,
|
|
444
|
+
TOUCH_EVENTS: $be6f0e84320366a7$var$TOUCH_EVENTS,
|
|
445
|
+
STATE_KEYS: $be6f0e84320366a7$var$STATE_KEYS,
|
|
446
|
+
STATE_KEY_STRINGS: $be6f0e84320366a7$var$STATE_KEY_STRINGS,
|
|
447
|
+
CANCEL: $be6f0e84320366a7$var$CANCEL,
|
|
448
|
+
END: $be6f0e84320366a7$var$END,
|
|
449
|
+
MOVE: $be6f0e84320366a7$var$MOVE,
|
|
450
|
+
START: $be6f0e84320366a7$var$START,
|
|
451
|
+
PHASE: $be6f0e84320366a7$var$PHASE,
|
|
452
|
+
PHASES: $be6f0e84320366a7$var$PHASES
|
|
453
|
+
};
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
var $0ca7bfe1c074e8ca$require$PHASE = $be6f0e84320366a7$exports.PHASE;
|
|
457
|
+
/**
|
|
458
|
+
* @private
|
|
459
|
+
* @inner
|
|
460
|
+
* @memberof westures-core.PointerData
|
|
461
|
+
*
|
|
462
|
+
* @return {Event} The Event object which corresponds to the given identifier.
|
|
463
|
+
* Contains clientX, clientY values.
|
|
464
|
+
*/ function $0ca7bfe1c074e8ca$var$getEventObject(event, identifier) {
|
|
465
|
+
if (event.changedTouches) return Array.from(event.changedTouches).find((touch)=>{
|
|
466
|
+
return touch.identifier === identifier;
|
|
467
|
+
});
|
|
468
|
+
return event;
|
|
469
|
+
}
|
|
470
|
+
/**
|
|
471
|
+
* Low-level storage of pointer data based on incoming data from an interaction
|
|
472
|
+
* event.
|
|
473
|
+
*
|
|
474
|
+
* @memberof westures-core
|
|
475
|
+
*
|
|
476
|
+
* @param {Event} event - The event object being wrapped.
|
|
477
|
+
* @param {number} identifier - The index of touch if applicable
|
|
478
|
+
*/ class $0ca7bfe1c074e8ca$var$PointerData {
|
|
479
|
+
constructor(event, identifier){
|
|
480
|
+
const { clientX: clientX , clientY: clientY } = $0ca7bfe1c074e8ca$var$getEventObject(event, identifier);
|
|
481
|
+
/**
|
|
482
|
+
* The original event object.
|
|
483
|
+
*
|
|
484
|
+
* @type {Event}
|
|
485
|
+
*/ this.event = event;
|
|
486
|
+
/**
|
|
487
|
+
* The type or 'phase' of this batch of pointer data. 'start' or 'move' or
|
|
488
|
+
* 'end' or 'cancel'
|
|
489
|
+
*
|
|
490
|
+
* @type {string}
|
|
491
|
+
*/ this.type = $0ca7bfe1c074e8ca$require$PHASE[event.type];
|
|
492
|
+
/**
|
|
493
|
+
* The timestamp of the event in milliseconds elapsed since January 1, 1970,
|
|
494
|
+
* 00:00:00 UTC.
|
|
495
|
+
*
|
|
496
|
+
* @type {number}
|
|
497
|
+
*/ this.time = Date.now();
|
|
498
|
+
/**
|
|
499
|
+
* The (x,y) coordinate of the event, wrapped in a Point2D.
|
|
500
|
+
*
|
|
501
|
+
* @type {westures-core.Point2D}
|
|
502
|
+
*/ this.point = new $6c3676f10a43b740$exports(clientX, clientY);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
$0ca7bfe1c074e8ca$exports = $0ca7bfe1c074e8ca$var$PointerData;
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
var $4559ecf940edc78d$exports = {};
|
|
509
|
+
"use strict";
|
|
510
|
+
const $4559ecf940edc78d$var$PI_2 = 2 * Math.PI;
|
|
511
|
+
const $4559ecf940edc78d$var$PI_NVE = -Math.PI;
|
|
512
|
+
/**
|
|
513
|
+
* Helper function to regulate angular differences, so they don't jump from 0 to
|
|
514
|
+
* 2 * PI or vice versa.
|
|
515
|
+
*
|
|
516
|
+
* @memberof westures-core
|
|
517
|
+
*
|
|
518
|
+
* @param {number} a - Angle in radians.
|
|
519
|
+
* @param {number} b - Angle in radians.
|
|
520
|
+
|
|
521
|
+
* @return {number} c, given by: c = a - b such that |c| < PI
|
|
522
|
+
*/ function $4559ecf940edc78d$var$angularDifference(a, b) {
|
|
523
|
+
let diff = a - b;
|
|
524
|
+
if (diff < $4559ecf940edc78d$var$PI_NVE) diff += $4559ecf940edc78d$var$PI_2;
|
|
525
|
+
else if (diff > Math.PI) diff -= $4559ecf940edc78d$var$PI_2;
|
|
526
|
+
return diff;
|
|
527
|
+
}
|
|
528
|
+
/**
|
|
529
|
+
* In case event.composedPath() is not available.
|
|
530
|
+
*
|
|
531
|
+
* @memberof westures-core
|
|
532
|
+
*
|
|
533
|
+
* @param {Event} event
|
|
534
|
+
*
|
|
535
|
+
* @return {Element[]} The elements along the composed path of the event.
|
|
536
|
+
*/ function $4559ecf940edc78d$var$getPropagationPath(event) {
|
|
537
|
+
if (typeof event.composedPath === "function") return event.composedPath();
|
|
538
|
+
const path = [];
|
|
539
|
+
for(let node = event.target; node !== document; node = node.parentNode)path.push(node);
|
|
540
|
+
path.push(document);
|
|
541
|
+
path.push(window);
|
|
542
|
+
return path;
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
545
|
+
* Performs a set filter operation.
|
|
546
|
+
*
|
|
547
|
+
* @memberof westures-core
|
|
548
|
+
*
|
|
549
|
+
* @param {Set} set - The set to filter.
|
|
550
|
+
* @param {Function} predicate - Function to test elements of 'set'. Receives
|
|
551
|
+
* one argument: the current set element.
|
|
552
|
+
*
|
|
553
|
+
* @return {Set} Set consisting of elements in 'set' for which 'predicate' is
|
|
554
|
+
* true.
|
|
555
|
+
*/ function $4559ecf940edc78d$var$setFilter(set, predicate) {
|
|
556
|
+
const result = new Set();
|
|
557
|
+
set.forEach((element)=>{
|
|
558
|
+
if (predicate(element)) result.add(element);
|
|
559
|
+
});
|
|
560
|
+
return result;
|
|
561
|
+
}
|
|
562
|
+
/**
|
|
563
|
+
* Performs a set difference operation.
|
|
564
|
+
*
|
|
565
|
+
* @memberof westures-core
|
|
566
|
+
*
|
|
567
|
+
* @param {Set} left - Base set.
|
|
568
|
+
* @param {Set} right - Set of elements to remove from 'left'.
|
|
569
|
+
*
|
|
570
|
+
* @return {Set} Set consisting of elements in 'left' that are not in
|
|
571
|
+
* 'right'.
|
|
572
|
+
*/ function $4559ecf940edc78d$var$setDifference(left, right) {
|
|
573
|
+
return $4559ecf940edc78d$var$setFilter(left, (element)=>!right.has(element));
|
|
574
|
+
}
|
|
575
|
+
$4559ecf940edc78d$exports = {
|
|
576
|
+
angularDifference: $4559ecf940edc78d$var$angularDifference,
|
|
577
|
+
getPropagationPath: $4559ecf940edc78d$var$getPropagationPath,
|
|
578
|
+
setDifference: $4559ecf940edc78d$var$setDifference,
|
|
579
|
+
setFilter: $4559ecf940edc78d$var$setFilter
|
|
580
|
+
};
|
|
581
|
+
|
|
582
|
+
|
|
583
|
+
var $e2125e2e71e37a0c$require$getPropagationPath = $4559ecf940edc78d$exports.getPropagationPath;
|
|
584
|
+
/**
|
|
585
|
+
* Tracks a single input and contains information about the current, previous,
|
|
586
|
+
* and initial events.
|
|
587
|
+
*
|
|
588
|
+
* @memberof westures-core
|
|
589
|
+
*
|
|
590
|
+
* @param {(PointerEvent | MouseEvent | TouchEvent)} event - The input event
|
|
591
|
+
* which will initialize this Input object.
|
|
592
|
+
* @param {number} identifier - The identifier for this input, so that it can
|
|
593
|
+
* be located in subsequent Event objects.
|
|
594
|
+
*/ class $e2125e2e71e37a0c$var$Input {
|
|
595
|
+
constructor(event, identifier, headless = false){
|
|
596
|
+
const currentData = new $0ca7bfe1c074e8ca$exports(event, identifier);
|
|
597
|
+
/**
|
|
598
|
+
* The set of elements along the original event's propagation path at the
|
|
599
|
+
* time it was dispatched.
|
|
600
|
+
*
|
|
601
|
+
* @type {WeakSet.<Element>}
|
|
602
|
+
*/ if (headless) this.initialElements = new WeakSet([
|
|
603
|
+
event.target
|
|
604
|
+
]);
|
|
605
|
+
else this.initialElements = new WeakSet($e2125e2e71e37a0c$require$getPropagationPath(event));
|
|
606
|
+
/**
|
|
607
|
+
* Holds the initial data from the mousedown / touchstart / pointerdown that
|
|
608
|
+
* began this input.
|
|
609
|
+
*
|
|
610
|
+
* @type {westures-core.PointerData}
|
|
611
|
+
*/ this.initial = currentData;
|
|
612
|
+
/**
|
|
613
|
+
* Holds the most current pointer data for this Input.
|
|
614
|
+
*
|
|
615
|
+
* @type {westures-core.PointerData}
|
|
616
|
+
*/ this.current = currentData;
|
|
617
|
+
/**
|
|
618
|
+
* Holds the previous pointer data for this Input.
|
|
619
|
+
*
|
|
620
|
+
* @type {westures-core.PointerData}
|
|
621
|
+
*/ this.previous = currentData;
|
|
622
|
+
/**
|
|
623
|
+
* The identifier for the pointer / touch / mouse button associated with
|
|
624
|
+
* this input.
|
|
625
|
+
*
|
|
626
|
+
* @type {number}
|
|
627
|
+
*/ this.identifier = identifier;
|
|
628
|
+
}
|
|
629
|
+
/**
|
|
630
|
+
* The phase of the input: 'start' or 'move' or 'end' or 'cancel'
|
|
631
|
+
*
|
|
632
|
+
* @type {string}
|
|
633
|
+
*/ get phase() {
|
|
634
|
+
return this.current.type;
|
|
635
|
+
}
|
|
636
|
+
/**
|
|
637
|
+
* The timestamp of the initiating event for this input.
|
|
638
|
+
*
|
|
639
|
+
* @type {number}
|
|
640
|
+
*/ get startTime() {
|
|
641
|
+
return this.initial.time;
|
|
642
|
+
}
|
|
643
|
+
/**
|
|
644
|
+
* The amount of time elapsed between the start of this input and its latest
|
|
645
|
+
* event.
|
|
646
|
+
*
|
|
647
|
+
* @type {number}
|
|
648
|
+
*/ get elapsedTime() {
|
|
649
|
+
return this.current.time - this.initial.time;
|
|
650
|
+
}
|
|
651
|
+
/**
|
|
652
|
+
* @return {number} The distance between the initiating event for this input
|
|
653
|
+
* and its current event.
|
|
654
|
+
*/ totalDistance() {
|
|
655
|
+
return this.initial.point.distanceTo(this.current.point);
|
|
656
|
+
}
|
|
657
|
+
/**
|
|
658
|
+
* Saves the given raw event in PointerData form as the current data for this
|
|
659
|
+
* input, pushing the old current data into the previous slot, and tossing
|
|
660
|
+
* out the old previous data.
|
|
661
|
+
*
|
|
662
|
+
* @param {Event} event - The event object to wrap with a PointerData.
|
|
663
|
+
*/ update(event) {
|
|
664
|
+
this.previous = this.current;
|
|
665
|
+
this.current = new $0ca7bfe1c074e8ca$exports(event, this.identifier);
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
$e2125e2e71e37a0c$exports = $e2125e2e71e37a0c$var$Input;
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
|
|
672
|
+
|
|
673
|
+
var $b66a0f22c18e3e3d$exports = {};
|
|
674
|
+
"use strict";
|
|
675
|
+
var $639be6fb478a6d5a$exports = {};
|
|
676
|
+
"use strict";
|
|
677
|
+
|
|
678
|
+
var $639be6fb478a6d5a$require$CANCEL = $be6f0e84320366a7$exports.CANCEL;
|
|
679
|
+
var $639be6fb478a6d5a$require$END = $be6f0e84320366a7$exports.END;
|
|
680
|
+
var $639be6fb478a6d5a$require$MOVE = $be6f0e84320366a7$exports.MOVE;
|
|
681
|
+
var $639be6fb478a6d5a$require$PHASE = $be6f0e84320366a7$exports.PHASE;
|
|
682
|
+
var $639be6fb478a6d5a$require$START = $be6f0e84320366a7$exports.START;
|
|
683
|
+
var $639be6fb478a6d5a$require$MOUSE_EVENTS = $be6f0e84320366a7$exports.MOUSE_EVENTS;
|
|
684
|
+
var $639be6fb478a6d5a$require$POINTER_EVENTS = $be6f0e84320366a7$exports.POINTER_EVENTS;
|
|
685
|
+
var $639be6fb478a6d5a$require$TOUCH_EVENTS = $be6f0e84320366a7$exports.TOUCH_EVENTS;
|
|
686
|
+
|
|
687
|
+
|
|
688
|
+
const $639be6fb478a6d5a$var$symbols = {
|
|
689
|
+
inputs: Symbol.for("inputs")
|
|
690
|
+
};
|
|
691
|
+
/**
|
|
692
|
+
* Keeps track of currently active and ending input points on the interactive
|
|
693
|
+
* surface.
|
|
694
|
+
*
|
|
695
|
+
* @memberof westures-core
|
|
696
|
+
*
|
|
697
|
+
* @param {Element} element - The element underpinning the associated Region.
|
|
698
|
+
* @param {boolean} [headless=false] - Whether westures is operating in
|
|
699
|
+
* "headless" mode.
|
|
700
|
+
*/ class $639be6fb478a6d5a$var$State {
|
|
701
|
+
constructor(element, headless = false){
|
|
702
|
+
/**
|
|
703
|
+
* Keep a reference to the element for the associated region.
|
|
704
|
+
*
|
|
705
|
+
* @type {Element}
|
|
706
|
+
*/ this.element = element;
|
|
707
|
+
/**
|
|
708
|
+
* Whether westures is operating in "headless" mode.
|
|
709
|
+
*
|
|
710
|
+
* @type {boolean}
|
|
711
|
+
*/ this.headless = headless;
|
|
712
|
+
/**
|
|
713
|
+
* Keeps track of the current Input objects.
|
|
714
|
+
*
|
|
715
|
+
* @alias [@@inputs]
|
|
716
|
+
* @type {Map.<westures-core.Input>}
|
|
717
|
+
* @memberof westure-core.State
|
|
718
|
+
*/ this[$639be6fb478a6d5a$var$symbols.inputs] = new Map();
|
|
719
|
+
/**
|
|
720
|
+
* All currently valid inputs, including those that have ended.
|
|
721
|
+
*
|
|
722
|
+
* @type {westures-core.Input[]}
|
|
723
|
+
*/ this.inputs = [];
|
|
724
|
+
/**
|
|
725
|
+
* The array of currently active inputs, sourced from the current Input
|
|
726
|
+
* objects. "Active" is defined as not being in the 'end' phase.
|
|
727
|
+
*
|
|
728
|
+
* @type {westures-core.Input[]}
|
|
729
|
+
*/ this.active = [];
|
|
730
|
+
/**
|
|
731
|
+
* The array of latest point data for the currently active inputs, sourced
|
|
732
|
+
* from this.active.
|
|
733
|
+
*
|
|
734
|
+
* @type {westures-core.Point2D[]}
|
|
735
|
+
*/ this.activePoints = [];
|
|
736
|
+
/**
|
|
737
|
+
* The centroid of the currently active points.
|
|
738
|
+
*
|
|
739
|
+
* @type {westures-core.Point2D}
|
|
740
|
+
*/ this.centroid = {};
|
|
741
|
+
/**
|
|
742
|
+
* The latest event that the state processed.
|
|
743
|
+
*
|
|
744
|
+
* @type {Event}
|
|
745
|
+
*/ this.event = null;
|
|
746
|
+
}
|
|
747
|
+
/**
|
|
748
|
+
* Deletes all inputs that are in the 'end' phase.
|
|
749
|
+
*/ clearEndedInputs() {
|
|
750
|
+
this[$639be6fb478a6d5a$var$symbols.inputs].forEach((v, k)=>{
|
|
751
|
+
if (v.phase === "end") this[$639be6fb478a6d5a$var$symbols.inputs].delete(k);
|
|
752
|
+
});
|
|
753
|
+
}
|
|
754
|
+
/**
|
|
755
|
+
* @param {string} phase - One of 'start', 'move', 'end', or 'cancel'.
|
|
756
|
+
*
|
|
757
|
+
* @return {westures-core.Input[]} Inputs in the given phase.
|
|
758
|
+
*/ getInputsInPhase(phase) {
|
|
759
|
+
return this.inputs.filter((i)=>i.phase === phase);
|
|
760
|
+
}
|
|
761
|
+
/**
|
|
762
|
+
* @param {string} phase - One of 'start', 'move', 'end', or 'cancel'.
|
|
763
|
+
*
|
|
764
|
+
* @return {westures-core.Input[]} Inputs <b>not</b> in the given phase.
|
|
765
|
+
*/ getInputsNotInPhase(phase) {
|
|
766
|
+
return this.inputs.filter((i)=>i.phase !== phase);
|
|
767
|
+
}
|
|
768
|
+
/**
|
|
769
|
+
* @return {boolean} True if there are no active inputs. False otherwise.
|
|
770
|
+
*/ hasNoInputs() {
|
|
771
|
+
return this[$639be6fb478a6d5a$var$symbols.inputs].size === 0;
|
|
772
|
+
}
|
|
773
|
+
/**
|
|
774
|
+
* Update the input with the given identifier using the given event.
|
|
775
|
+
*
|
|
776
|
+
* @private
|
|
777
|
+
*
|
|
778
|
+
* @param {Event} event - The event being captured.
|
|
779
|
+
* @param {number} identifier - The identifier of the input to update.
|
|
780
|
+
*/ updateInput(event, identifier) {
|
|
781
|
+
switch($639be6fb478a6d5a$require$PHASE[event.type]){
|
|
782
|
+
case $639be6fb478a6d5a$require$START:
|
|
783
|
+
this[$639be6fb478a6d5a$var$symbols.inputs].set(identifier, new $e2125e2e71e37a0c$exports(event, identifier, this.headless));
|
|
784
|
+
if (!this.headless) try {
|
|
785
|
+
this.element.setPointerCapture(identifier);
|
|
786
|
+
} catch (e) {
|
|
787
|
+
// NOP: Optional operation failed.
|
|
788
|
+
}
|
|
789
|
+
break;
|
|
790
|
+
// All of 'end', 'move', and 'cancel' perform updates, hence the
|
|
791
|
+
// following fall-throughs
|
|
792
|
+
case $639be6fb478a6d5a$require$END:
|
|
793
|
+
if (!this.headless) try {
|
|
794
|
+
this.element.releasePointerCapture(identifier);
|
|
795
|
+
} catch (e) {
|
|
796
|
+
// NOP: Optional operation failed.
|
|
797
|
+
}
|
|
798
|
+
case $639be6fb478a6d5a$require$CANCEL:
|
|
799
|
+
case $639be6fb478a6d5a$require$MOVE:
|
|
800
|
+
if (this[$639be6fb478a6d5a$var$symbols.inputs].has(identifier)) this[$639be6fb478a6d5a$var$symbols.inputs].get(identifier).update(event);
|
|
801
|
+
break;
|
|
802
|
+
default:
|
|
803
|
+
console.warn(`Unrecognized event type: ${event.type}`);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
/**
|
|
807
|
+
* Updates the inputs with new information based upon a new event being fired.
|
|
808
|
+
*
|
|
809
|
+
* @private
|
|
810
|
+
* @param {Event} event - The event being captured.
|
|
811
|
+
*/ updateAllInputs(event) {
|
|
812
|
+
if ($639be6fb478a6d5a$require$POINTER_EVENTS.includes(event.type)) this.updateInput(event, event.pointerId);
|
|
813
|
+
else if ($639be6fb478a6d5a$require$MOUSE_EVENTS.includes(event.type)) {
|
|
814
|
+
if (event.button === 0) this.updateInput(event, event.button);
|
|
815
|
+
} else if ($639be6fb478a6d5a$require$TOUCH_EVENTS.includes(event.type)) Array.from(event.changedTouches).forEach((touch)=>{
|
|
816
|
+
this.updateInput(event, touch.identifier);
|
|
817
|
+
});
|
|
818
|
+
else throw new Error(`Unexpected event type: ${event.type}`);
|
|
819
|
+
this.updateFields(event);
|
|
820
|
+
}
|
|
821
|
+
/**
|
|
822
|
+
* Updates the convenience fields.
|
|
823
|
+
*
|
|
824
|
+
* @private
|
|
825
|
+
* @param {Event} event - Event with which to update the convenience fields.
|
|
826
|
+
*/ updateFields(event) {
|
|
827
|
+
this.inputs = Array.from(this[$639be6fb478a6d5a$var$symbols.inputs].values());
|
|
828
|
+
this.active = this.getInputsNotInPhase("end");
|
|
829
|
+
this.activePoints = this.active.map((i)=>i.current.point);
|
|
830
|
+
this.centroid = $6c3676f10a43b740$exports.centroid(this.activePoints);
|
|
831
|
+
this.event = event;
|
|
832
|
+
}
|
|
833
|
+
}
|
|
834
|
+
$639be6fb478a6d5a$exports = $639be6fb478a6d5a$var$State;
|
|
835
|
+
|
|
836
|
+
|
|
837
|
+
|
|
838
|
+
var $b66a0f22c18e3e3d$require$CANCEL_EVENTS = $be6f0e84320366a7$exports.CANCEL_EVENTS;
|
|
839
|
+
var $b66a0f22c18e3e3d$require$KEYBOARD_EVENTS = $be6f0e84320366a7$exports.KEYBOARD_EVENTS;
|
|
840
|
+
var $b66a0f22c18e3e3d$require$MOUSE_EVENTS = $be6f0e84320366a7$exports.MOUSE_EVENTS;
|
|
841
|
+
var $b66a0f22c18e3e3d$require$POINTER_EVENTS = $be6f0e84320366a7$exports.POINTER_EVENTS;
|
|
842
|
+
var $b66a0f22c18e3e3d$require$TOUCH_EVENTS = $be6f0e84320366a7$exports.TOUCH_EVENTS;
|
|
843
|
+
var $b66a0f22c18e3e3d$require$STATE_KEY_STRINGS = $be6f0e84320366a7$exports.STATE_KEY_STRINGS;
|
|
844
|
+
var $b66a0f22c18e3e3d$require$PHASE = $be6f0e84320366a7$exports.PHASE;
|
|
845
|
+
var $b66a0f22c18e3e3d$require$CANCEL = $be6f0e84320366a7$exports.CANCEL;
|
|
846
|
+
var $b66a0f22c18e3e3d$require$END = $be6f0e84320366a7$exports.END;
|
|
847
|
+
var $b66a0f22c18e3e3d$require$START = $be6f0e84320366a7$exports.START;
|
|
848
|
+
|
|
849
|
+
var $b66a0f22c18e3e3d$require$setDifference = $4559ecf940edc78d$exports.setDifference;
|
|
850
|
+
var $b66a0f22c18e3e3d$require$setFilter = $4559ecf940edc78d$exports.setFilter;
|
|
851
|
+
/**
|
|
852
|
+
* Allows the user to specify the control region which will listen for user
|
|
853
|
+
* input events.
|
|
854
|
+
*
|
|
855
|
+
* @memberof westures-core
|
|
856
|
+
*
|
|
857
|
+
* @param {Element} [element=null] - The element which should listen to input
|
|
858
|
+
* events. If not provided, will be set to the window unless operating in
|
|
859
|
+
* "headless" mode.
|
|
860
|
+
* @param {object} [options]
|
|
861
|
+
* @param {boolean} [options.capture=false] - Whether the region uses the
|
|
862
|
+
* capture phase of input events. If false, uses the bubbling phase.
|
|
863
|
+
* @param {boolean} [options.preferPointer=true] - If false, the region listens
|
|
864
|
+
* to mouse/touch events instead of pointer events.
|
|
865
|
+
* @param {boolean} [options.preventDefault=true] - Whether the default
|
|
866
|
+
* browser functionality should be disabled. This option should most likely be
|
|
867
|
+
* ignored. Here there by dragons if set to false.
|
|
868
|
+
* @param {string} [options.touchAction='none'] - Value to set the CSS
|
|
869
|
+
* 'touch-action' property to on elements added to the region.
|
|
870
|
+
* @param {boolean} [options.headless=false] - Set to true to turn on "headless"
|
|
871
|
+
* mode. This mode is intended for use outside of a browser environment. It does
|
|
872
|
+
* not listen to window events, so instead you will have to send events directly
|
|
873
|
+
* into the region. Pointer down/move/up events should be sent to
|
|
874
|
+
* Region.arbitrate(event), cancel events should be sent to
|
|
875
|
+
* Region.cancel(event), and keyboard events should be sent to
|
|
876
|
+
* Region.handleKeyboardEvent(event). You do not need to supply an element to
|
|
877
|
+
* the Region constructor in this mode, but you will still need to attach
|
|
878
|
+
* elements to Gestures, and the events you pass in should specify event.target
|
|
879
|
+
* appropriately, in order to select which gestures to run.
|
|
880
|
+
*/ class $b66a0f22c18e3e3d$var$Region {
|
|
881
|
+
constructor(element = null, options = {}){
|
|
882
|
+
options = {
|
|
883
|
+
...$b66a0f22c18e3e3d$var$Region.DEFAULTS,
|
|
884
|
+
...options
|
|
885
|
+
};
|
|
886
|
+
if (element === null) {
|
|
887
|
+
if (options.headless) element = null;
|
|
888
|
+
else element = window;
|
|
889
|
+
}
|
|
890
|
+
/**
|
|
891
|
+
* The list of relations between elements, their gestures, and the handlers.
|
|
892
|
+
*
|
|
893
|
+
* @type {Set.<westures-core.Gesture>}
|
|
894
|
+
*/ this.gestures = new Set();
|
|
895
|
+
/**
|
|
896
|
+
* The list of active gestures for the current input session.
|
|
897
|
+
*
|
|
898
|
+
* @type {Set.<westures-core.Gesture>}
|
|
899
|
+
*/ this.activeGestures = new Set();
|
|
900
|
+
/**
|
|
901
|
+
* The base list of potentially active gestures for the current input
|
|
902
|
+
* session.
|
|
903
|
+
*
|
|
904
|
+
* @type {Set.<westures-core.Gesture>}
|
|
905
|
+
*/ this.potentialGestures = new Set();
|
|
906
|
+
/**
|
|
907
|
+
* The element being bound to.
|
|
908
|
+
*
|
|
909
|
+
* @type {Element}
|
|
910
|
+
*/ this.element = element;
|
|
911
|
+
/**
|
|
912
|
+
* The user-supplied options for the Region.
|
|
913
|
+
*
|
|
914
|
+
* @type {object}
|
|
915
|
+
*/ this.options = options;
|
|
916
|
+
/**
|
|
917
|
+
* The internal state object for a Region. Keeps track of inputs.
|
|
918
|
+
*
|
|
919
|
+
* @type {westures-core.State}
|
|
920
|
+
*/ this.state = new $639be6fb478a6d5a$exports(this.element, options.headless);
|
|
921
|
+
if (!options.headless) // Begin operating immediately.
|
|
922
|
+
this.activate();
|
|
923
|
+
}
|
|
924
|
+
/**
|
|
925
|
+
* Activates the region by adding event listeners for all appropriate input
|
|
926
|
+
* events to the region's element.
|
|
927
|
+
*
|
|
928
|
+
* @private
|
|
929
|
+
*/ activate() {
|
|
930
|
+
/*
|
|
931
|
+
* Listening to both mouse and touch comes with the difficulty that
|
|
932
|
+
* preventDefault() must be called to prevent both events from iterating
|
|
933
|
+
* through the system. However I have left it as an option to the end user,
|
|
934
|
+
* which defaults to calling preventDefault(), in case there's a use-case I
|
|
935
|
+
* haven't considered or am not aware of.
|
|
936
|
+
*
|
|
937
|
+
* It also may be a good idea to keep regions small in large pages.
|
|
938
|
+
*
|
|
939
|
+
* See:
|
|
940
|
+
* https://www.html5rocks.com/en/mobile/touchandmouse/
|
|
941
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
|
|
942
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
|
|
943
|
+
*/ let eventNames = [];
|
|
944
|
+
if (this.options.preferPointer && window.PointerEvent) eventNames = $b66a0f22c18e3e3d$require$POINTER_EVENTS;
|
|
945
|
+
else eventNames = $b66a0f22c18e3e3d$require$MOUSE_EVENTS.concat($b66a0f22c18e3e3d$require$TOUCH_EVENTS);
|
|
946
|
+
// Bind detected browser events to the region element.
|
|
947
|
+
const arbitrate = this.arbitrate.bind(this);
|
|
948
|
+
eventNames.forEach((eventName)=>{
|
|
949
|
+
this.element.addEventListener(eventName, arbitrate, {
|
|
950
|
+
capture: this.options.capture,
|
|
951
|
+
once: false,
|
|
952
|
+
passive: false
|
|
953
|
+
});
|
|
954
|
+
});
|
|
955
|
+
const cancel = this.cancel.bind(this);
|
|
956
|
+
$b66a0f22c18e3e3d$require$CANCEL_EVENTS.forEach((eventName)=>{
|
|
957
|
+
window.addEventListener(eventName, cancel);
|
|
958
|
+
});
|
|
959
|
+
const handleKeyboardEvent = this.handleKeyboardEvent.bind(this);
|
|
960
|
+
$b66a0f22c18e3e3d$require$KEYBOARD_EVENTS.forEach((eventName)=>{
|
|
961
|
+
window.addEventListener(eventName, handleKeyboardEvent);
|
|
962
|
+
});
|
|
963
|
+
}
|
|
964
|
+
/**
|
|
965
|
+
* Handles a cancel event. Resets the state and the active / potential gesture
|
|
966
|
+
* lists.
|
|
967
|
+
*
|
|
968
|
+
* @private
|
|
969
|
+
* @param {Event} event - The event emitted from the window object.
|
|
970
|
+
*/ cancel(event) {
|
|
971
|
+
if (this.options.preventDefault && typeof event.preventDefault === "function") event.preventDefault();
|
|
972
|
+
this.state.inputs.forEach((input)=>{
|
|
973
|
+
input.update(event);
|
|
974
|
+
});
|
|
975
|
+
this.activeGestures.forEach((gesture)=>{
|
|
976
|
+
gesture.evaluateHook($b66a0f22c18e3e3d$require$CANCEL, this.state);
|
|
977
|
+
});
|
|
978
|
+
this.state = new $639be6fb478a6d5a$exports(this.element, this.options.headless);
|
|
979
|
+
this.resetActiveGestures();
|
|
980
|
+
}
|
|
981
|
+
/**
|
|
982
|
+
* Handles a keyboard event, triggering a restart of any gestures that need
|
|
983
|
+
* it.
|
|
984
|
+
*
|
|
985
|
+
* @private
|
|
986
|
+
* @param {KeyboardEvent} event - The keyboard event.
|
|
987
|
+
*/ handleKeyboardEvent(event) {
|
|
988
|
+
if ($b66a0f22c18e3e3d$require$STATE_KEY_STRINGS.indexOf(event.key) >= 0) {
|
|
989
|
+
this.state.event = event;
|
|
990
|
+
const oldActiveGestures = this.activeGestures;
|
|
991
|
+
this.setActiveGestures();
|
|
992
|
+
$b66a0f22c18e3e3d$require$setDifference(oldActiveGestures, this.activeGestures).forEach((gesture)=>{
|
|
993
|
+
gesture.evaluateHook($b66a0f22c18e3e3d$require$END, this.state);
|
|
994
|
+
});
|
|
995
|
+
$b66a0f22c18e3e3d$require$setDifference(this.activeGestures, oldActiveGestures).forEach((gesture)=>{
|
|
996
|
+
gesture.evaluateHook($b66a0f22c18e3e3d$require$START, this.state);
|
|
997
|
+
});
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
/**
|
|
1001
|
+
* Resets the active gestures.
|
|
1002
|
+
*
|
|
1003
|
+
* @private
|
|
1004
|
+
*/ resetActiveGestures() {
|
|
1005
|
+
this.potentialGestures = new Set();
|
|
1006
|
+
this.activeGestures = new Set();
|
|
1007
|
+
}
|
|
1008
|
+
/**
|
|
1009
|
+
* Selects active gestures from the list of potentially active gestures.
|
|
1010
|
+
*
|
|
1011
|
+
* @private
|
|
1012
|
+
*/ setActiveGestures() {
|
|
1013
|
+
this.activeGestures = $b66a0f22c18e3e3d$require$setFilter(this.potentialGestures, (gesture)=>{
|
|
1014
|
+
return gesture.isEnabled(this.state);
|
|
1015
|
+
});
|
|
1016
|
+
}
|
|
1017
|
+
/**
|
|
1018
|
+
* Selects the potentially active gestures.
|
|
1019
|
+
*
|
|
1020
|
+
* @private
|
|
1021
|
+
*/ setPotentialGestures() {
|
|
1022
|
+
const input = this.state.inputs[0];
|
|
1023
|
+
this.potentialGestures = $b66a0f22c18e3e3d$require$setFilter(this.gestures, (gesture)=>{
|
|
1024
|
+
return input.initialElements.has(gesture.element);
|
|
1025
|
+
});
|
|
1026
|
+
}
|
|
1027
|
+
/**
|
|
1028
|
+
* Selects the gestures that are active for the current input sequence.
|
|
1029
|
+
*
|
|
1030
|
+
* @private
|
|
1031
|
+
* @param {Event} event - The event emitted from the window object.
|
|
1032
|
+
* @param {boolean} isInitial - Whether this is an initial contact.
|
|
1033
|
+
*/ updateActiveGestures(event, isInitial) {
|
|
1034
|
+
if ($b66a0f22c18e3e3d$require$PHASE[event.type] === $b66a0f22c18e3e3d$require$START) {
|
|
1035
|
+
if (isInitial) this.setPotentialGestures();
|
|
1036
|
+
this.setActiveGestures();
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
/**
|
|
1040
|
+
* Evaluates whether the current input session has completed.
|
|
1041
|
+
*
|
|
1042
|
+
* @private
|
|
1043
|
+
* @param {Event} event - The event emitted from the window object.
|
|
1044
|
+
*/ pruneActiveGestures(event) {
|
|
1045
|
+
if ($b66a0f22c18e3e3d$require$PHASE[event.type] === $b66a0f22c18e3e3d$require$END) {
|
|
1046
|
+
if (this.state.hasNoInputs()) this.resetActiveGestures();
|
|
1047
|
+
else this.setActiveGestures();
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
/**
|
|
1051
|
+
* All input events flow through this function. It makes sure that the input
|
|
1052
|
+
* state is maintained, determines which gestures to analyze based on the
|
|
1053
|
+
* initial position of the inputs, calls the relevant gesture hooks, and
|
|
1054
|
+
* dispatches gesture data.
|
|
1055
|
+
*
|
|
1056
|
+
* @private
|
|
1057
|
+
* @param {Event} event - The event emitted from the window object.
|
|
1058
|
+
*/ arbitrate(event) {
|
|
1059
|
+
const isInitial = this.state.hasNoInputs();
|
|
1060
|
+
this.state.updateAllInputs(event);
|
|
1061
|
+
this.updateActiveGestures(event, isInitial);
|
|
1062
|
+
if (this.activeGestures.size > 0) {
|
|
1063
|
+
if (this.options.preventDefault && typeof event.preventDefault === "function") event.preventDefault();
|
|
1064
|
+
this.activeGestures.forEach((gesture)=>{
|
|
1065
|
+
gesture.evaluateHook($b66a0f22c18e3e3d$require$PHASE[event.type], this.state);
|
|
1066
|
+
});
|
|
1067
|
+
}
|
|
1068
|
+
this.state.clearEndedInputs();
|
|
1069
|
+
this.pruneActiveGestures(event);
|
|
1070
|
+
}
|
|
1071
|
+
/**
|
|
1072
|
+
* Adds the given gesture to the region.
|
|
1073
|
+
*
|
|
1074
|
+
* @param {westures-core.Gesture} gesture - Instantiated gesture to add.
|
|
1075
|
+
*/ addGesture(gesture) {
|
|
1076
|
+
if (!this.options.headless) gesture.element.style.touchAction = this.options.touchAction;
|
|
1077
|
+
this.gestures.add(gesture);
|
|
1078
|
+
}
|
|
1079
|
+
/**
|
|
1080
|
+
* Removes the given gesture from the region.
|
|
1081
|
+
*
|
|
1082
|
+
* @param {westures-core.Gesture} gesture - Instantiated gesture to add.
|
|
1083
|
+
*/ removeGesture(gesture) {
|
|
1084
|
+
this.gestures.delete(gesture);
|
|
1085
|
+
this.potentialGestures.delete(gesture);
|
|
1086
|
+
this.activeGestures.delete(gesture);
|
|
1087
|
+
}
|
|
1088
|
+
/**
|
|
1089
|
+
* Retrieves Gestures by their associated element.
|
|
1090
|
+
*
|
|
1091
|
+
* @param {Element} element - The element for which to find gestures.
|
|
1092
|
+
*
|
|
1093
|
+
* @return {westures-core.Gesture[]} Gestures to which the element is bound.
|
|
1094
|
+
*/ getGesturesByElement(element) {
|
|
1095
|
+
return $b66a0f22c18e3e3d$require$setFilter(this.gestures, (gesture)=>gesture.element === element);
|
|
1096
|
+
}
|
|
1097
|
+
/**
|
|
1098
|
+
* Remove all gestures bound to the given element.
|
|
1099
|
+
*
|
|
1100
|
+
* @param {Element} element - The element to unbind.
|
|
1101
|
+
*/ removeGesturesByElement(element) {
|
|
1102
|
+
this.getGesturesByElement(element).forEach((g)=>this.removeGesture(g));
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
$b66a0f22c18e3e3d$var$Region.DEFAULTS = {
|
|
1106
|
+
capture: false,
|
|
1107
|
+
preferPointer: true,
|
|
1108
|
+
preventDefault: true,
|
|
1109
|
+
touchAction: "none",
|
|
1110
|
+
headless: false
|
|
1111
|
+
};
|
|
1112
|
+
$b66a0f22c18e3e3d$exports = $b66a0f22c18e3e3d$var$Region;
|
|
1113
|
+
|
|
1114
|
+
|
|
1115
|
+
var $01c3d7b128023e4f$exports = {};
|
|
1116
|
+
"use strict";
|
|
1117
|
+
const $01c3d7b128023e4f$var$cascade = Symbol("cascade");
|
|
1118
|
+
const $01c3d7b128023e4f$var$smooth = Symbol("smooth");
|
|
1119
|
+
/**
|
|
1120
|
+
* Determines whether to apply smoothing. Smoothing is on by default but turned
|
|
1121
|
+
* off if either:<br>
|
|
1122
|
+
* 1. The user explicitly requests that it be turned off.<br>
|
|
1123
|
+
* 2. The active pointer is not "coarse".<br>
|
|
1124
|
+
*
|
|
1125
|
+
* @see {@link
|
|
1126
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia}
|
|
1127
|
+
*
|
|
1128
|
+
* @inner
|
|
1129
|
+
* @memberof westures-core.Smoothable
|
|
1130
|
+
*
|
|
1131
|
+
* @param {boolean} isRequested - Whether smoothing was requested by the user.
|
|
1132
|
+
*
|
|
1133
|
+
* @returns {boolean} Whether to apply smoothing.
|
|
1134
|
+
*/ function $01c3d7b128023e4f$var$smoothingIsApplicable(isRequested) {
|
|
1135
|
+
if (isRequested) try {
|
|
1136
|
+
return window.matchMedia("(pointer: coarse)").matches;
|
|
1137
|
+
} catch (e) {
|
|
1138
|
+
return true;
|
|
1139
|
+
}
|
|
1140
|
+
return false;
|
|
1141
|
+
}
|
|
1142
|
+
/**
|
|
1143
|
+
* A Smoothable datatype is one that is capable of smoothing out a series of
|
|
1144
|
+
* values as they come in, one at a time, providing a more consistent series. It
|
|
1145
|
+
* does this by creating some inertia in the values using a cascading average.
|
|
1146
|
+
* (For those who are interested in such things, this effectively means that it
|
|
1147
|
+
* provides a practical application of Zeno's Dichotomy).
|
|
1148
|
+
*
|
|
1149
|
+
* @example
|
|
1150
|
+
* const x = new Smoothable({ identity: 1 });
|
|
1151
|
+
* const a = x.next(1); // 1.0
|
|
1152
|
+
* const b = x.next(1.2); // 1.1
|
|
1153
|
+
* const c = x.next(0.9); // 1.0
|
|
1154
|
+
* const d = x.next(0.6); // 0.8
|
|
1155
|
+
* const e = x.next(1.2); // 1.0
|
|
1156
|
+
* const f = x.next(1.6); // 1.3
|
|
1157
|
+
* x.restart();
|
|
1158
|
+
* const g = x.next(0); // 0.5
|
|
1159
|
+
*
|
|
1160
|
+
* @memberof westures-core
|
|
1161
|
+
*
|
|
1162
|
+
* @param {Object} [options]
|
|
1163
|
+
* @param {boolean} [options.applySmoothing=true] Whether to apply smoothing to
|
|
1164
|
+
* the data.
|
|
1165
|
+
* @param {*} [options.identity=0] The identity value of this smoothable data.
|
|
1166
|
+
*/ class $01c3d7b128023e4f$var$Smoothable {
|
|
1167
|
+
constructor(options = {}){
|
|
1168
|
+
const final_options = {
|
|
1169
|
+
...$01c3d7b128023e4f$var$Smoothable.DEFAULTS,
|
|
1170
|
+
...options
|
|
1171
|
+
};
|
|
1172
|
+
/**
|
|
1173
|
+
* The function through which smoothed emits are passed.
|
|
1174
|
+
*
|
|
1175
|
+
* @method
|
|
1176
|
+
* @param {*} data - The data to emit.
|
|
1177
|
+
*
|
|
1178
|
+
* @return {*} The smoothed out data.
|
|
1179
|
+
*/ this.next = null;
|
|
1180
|
+
if ($01c3d7b128023e4f$var$smoothingIsApplicable(final_options.applySmoothing)) this.next = this[$01c3d7b128023e4f$var$smooth].bind(this);
|
|
1181
|
+
else this.next = (data)=>data;
|
|
1182
|
+
/**
|
|
1183
|
+
* The "identity" value of the data that will be smoothed.
|
|
1184
|
+
*
|
|
1185
|
+
* @type {*}
|
|
1186
|
+
* @default 0
|
|
1187
|
+
*/ this.identity = final_options.identity;
|
|
1188
|
+
/**
|
|
1189
|
+
* The cascading average of outgoing values.
|
|
1190
|
+
*
|
|
1191
|
+
* @memberof westures-core.Smoothable
|
|
1192
|
+
* @alias [@@cascade]
|
|
1193
|
+
* @type {object}
|
|
1194
|
+
*/ this[$01c3d7b128023e4f$var$cascade] = this.identity;
|
|
1195
|
+
}
|
|
1196
|
+
/**
|
|
1197
|
+
* Restart the Smoothable gesture.
|
|
1198
|
+
*/ restart() {
|
|
1199
|
+
this[$01c3d7b128023e4f$var$cascade] = this.identity;
|
|
1200
|
+
}
|
|
1201
|
+
/**
|
|
1202
|
+
* Smooth out the outgoing data.
|
|
1203
|
+
*
|
|
1204
|
+
* @memberof westures-core.Smoothable
|
|
1205
|
+
* @alias [@@smooth]
|
|
1206
|
+
* @param {object} data - The next batch of data to emit.
|
|
1207
|
+
*
|
|
1208
|
+
* @return {?object}
|
|
1209
|
+
*/ [$01c3d7b128023e4f$var$smooth](data) {
|
|
1210
|
+
const average = this.average(this[$01c3d7b128023e4f$var$cascade], data);
|
|
1211
|
+
this[$01c3d7b128023e4f$var$cascade] = average;
|
|
1212
|
+
return average;
|
|
1213
|
+
}
|
|
1214
|
+
/**
|
|
1215
|
+
* Average out two values, as part of the smoothing algorithm. Override this
|
|
1216
|
+
* method if the data being smoothed is not a Number.
|
|
1217
|
+
*
|
|
1218
|
+
* @param {number} a
|
|
1219
|
+
* @param {number} b
|
|
1220
|
+
*
|
|
1221
|
+
* @return {number} The average of 'a' and 'b'
|
|
1222
|
+
*/ average(a, b) {
|
|
1223
|
+
return (a + b) / 2;
|
|
1224
|
+
}
|
|
1225
|
+
}
|
|
1226
|
+
$01c3d7b128023e4f$var$Smoothable.DEFAULTS = {
|
|
1227
|
+
applySmoothing: true,
|
|
1228
|
+
identity: 0
|
|
1229
|
+
};
|
|
1230
|
+
$01c3d7b128023e4f$exports = $01c3d7b128023e4f$var$Smoothable;
|
|
1231
|
+
|
|
1232
|
+
|
|
1233
|
+
|
|
1234
|
+
|
|
1235
|
+
|
|
1236
|
+
module.exports = {
|
|
1237
|
+
Gesture: $de0d6a332419bf3c$exports,
|
|
1238
|
+
Input: $e2125e2e71e37a0c$exports,
|
|
1239
|
+
Point2D: $6c3676f10a43b740$exports,
|
|
1240
|
+
PointerData: $0ca7bfe1c074e8ca$exports,
|
|
1241
|
+
Region: $b66a0f22c18e3e3d$exports,
|
|
1242
|
+
Smoothable: $01c3d7b128023e4f$exports,
|
|
1243
|
+
State: $639be6fb478a6d5a$exports,
|
|
1244
|
+
...$be6f0e84320366a7$exports,
|
|
1245
|
+
...$4559ecf940edc78d$exports
|
|
1246
|
+
};
|
|
1247
|
+
|
|
1248
|
+
|
|
1249
|
+
//# sourceMappingURL=index.js.map
|