1 | 'use strict';
|
---|
2 |
|
---|
3 | var maths = require('./maths-83bc6f64.cjs.prod.js');
|
---|
4 |
|
---|
5 | function _toPrimitive(input, hint) {
|
---|
6 | if (typeof input !== "object" || input === null) return input;
|
---|
7 | var prim = input[Symbol.toPrimitive];
|
---|
8 | if (prim !== undefined) {
|
---|
9 | var res = prim.call(input, hint || "default");
|
---|
10 | if (typeof res !== "object") return res;
|
---|
11 | throw new TypeError("@@toPrimitive must return a primitive value.");
|
---|
12 | }
|
---|
13 | return (hint === "string" ? String : Number)(input);
|
---|
14 | }
|
---|
15 |
|
---|
16 | function _toPropertyKey(arg) {
|
---|
17 | var key = _toPrimitive(arg, "string");
|
---|
18 | return typeof key === "symbol" ? key : String(key);
|
---|
19 | }
|
---|
20 |
|
---|
21 | function _defineProperty(obj, key, value) {
|
---|
22 | key = _toPropertyKey(key);
|
---|
23 | if (key in obj) {
|
---|
24 | Object.defineProperty(obj, key, {
|
---|
25 | value: value,
|
---|
26 | enumerable: true,
|
---|
27 | configurable: true,
|
---|
28 | writable: true
|
---|
29 | });
|
---|
30 | } else {
|
---|
31 | obj[key] = value;
|
---|
32 | }
|
---|
33 | return obj;
|
---|
34 | }
|
---|
35 |
|
---|
36 | function ownKeys(e, r) {
|
---|
37 | var t = Object.keys(e);
|
---|
38 | if (Object.getOwnPropertySymbols) {
|
---|
39 | var o = Object.getOwnPropertySymbols(e);
|
---|
40 | r && (o = o.filter(function (r) {
|
---|
41 | return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
---|
42 | })), t.push.apply(t, o);
|
---|
43 | }
|
---|
44 | return t;
|
---|
45 | }
|
---|
46 | function _objectSpread2(e) {
|
---|
47 | for (var r = 1; r < arguments.length; r++) {
|
---|
48 | var t = null != arguments[r] ? arguments[r] : {};
|
---|
49 | r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
---|
50 | _defineProperty(e, r, t[r]);
|
---|
51 | }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
---|
52 | Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
---|
53 | });
|
---|
54 | }
|
---|
55 | return e;
|
---|
56 | }
|
---|
57 |
|
---|
58 | const EVENT_TYPE_MAP = {
|
---|
59 | pointer: {
|
---|
60 | start: 'down',
|
---|
61 | change: 'move',
|
---|
62 | end: 'up'
|
---|
63 | },
|
---|
64 | mouse: {
|
---|
65 | start: 'down',
|
---|
66 | change: 'move',
|
---|
67 | end: 'up'
|
---|
68 | },
|
---|
69 | touch: {
|
---|
70 | start: 'start',
|
---|
71 | change: 'move',
|
---|
72 | end: 'end'
|
---|
73 | },
|
---|
74 | gesture: {
|
---|
75 | start: 'start',
|
---|
76 | change: 'change',
|
---|
77 | end: 'end'
|
---|
78 | }
|
---|
79 | };
|
---|
80 | function capitalize(string) {
|
---|
81 | if (!string) return '';
|
---|
82 | return string[0].toUpperCase() + string.slice(1);
|
---|
83 | }
|
---|
84 | const actionsWithoutCaptureSupported = ['enter', 'leave'];
|
---|
85 | function hasCapture(capture = false, actionKey) {
|
---|
86 | return capture && !actionsWithoutCaptureSupported.includes(actionKey);
|
---|
87 | }
|
---|
88 | function toHandlerProp(device, action = '', capture = false) {
|
---|
89 | const deviceProps = EVENT_TYPE_MAP[device];
|
---|
90 | const actionKey = deviceProps ? deviceProps[action] || action : action;
|
---|
91 | return 'on' + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? 'Capture' : '');
|
---|
92 | }
|
---|
93 | const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture'];
|
---|
94 | function parseProp(prop) {
|
---|
95 | let eventKey = prop.substring(2).toLowerCase();
|
---|
96 | const passive = !!~eventKey.indexOf('passive');
|
---|
97 | if (passive) eventKey = eventKey.replace('passive', '');
|
---|
98 | const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture';
|
---|
99 | const capture = !!~eventKey.indexOf(captureKey);
|
---|
100 | if (capture) eventKey = eventKey.replace('capture', '');
|
---|
101 | return {
|
---|
102 | device: eventKey,
|
---|
103 | capture,
|
---|
104 | passive
|
---|
105 | };
|
---|
106 | }
|
---|
107 | function toDomEventType(device, action = '') {
|
---|
108 | const deviceProps = EVENT_TYPE_MAP[device];
|
---|
109 | const actionKey = deviceProps ? deviceProps[action] || action : action;
|
---|
110 | return device + actionKey;
|
---|
111 | }
|
---|
112 | function isTouch(event) {
|
---|
113 | return 'touches' in event;
|
---|
114 | }
|
---|
115 | function getPointerType(event) {
|
---|
116 | if (isTouch(event)) return 'touch';
|
---|
117 | if ('pointerType' in event) return event.pointerType;
|
---|
118 | return 'mouse';
|
---|
119 | }
|
---|
120 | function getCurrentTargetTouchList(event) {
|
---|
121 | return Array.from(event.touches).filter(e => {
|
---|
122 | var _event$currentTarget, _event$currentTarget$;
|
---|
123 | return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target));
|
---|
124 | });
|
---|
125 | }
|
---|
126 | function getTouchList(event) {
|
---|
127 | return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches;
|
---|
128 | }
|
---|
129 | function getValueEvent(event) {
|
---|
130 | return isTouch(event) ? getTouchList(event)[0] : event;
|
---|
131 | }
|
---|
132 | function distanceAngle(P1, P2) {
|
---|
133 | try {
|
---|
134 | const dx = P2.clientX - P1.clientX;
|
---|
135 | const dy = P2.clientY - P1.clientY;
|
---|
136 | const cx = (P2.clientX + P1.clientX) / 2;
|
---|
137 | const cy = (P2.clientY + P1.clientY) / 2;
|
---|
138 | const distance = Math.hypot(dx, dy);
|
---|
139 | const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
|
---|
140 | const origin = [cx, cy];
|
---|
141 | return {
|
---|
142 | angle,
|
---|
143 | distance,
|
---|
144 | origin
|
---|
145 | };
|
---|
146 | } catch (_unused) {}
|
---|
147 | return null;
|
---|
148 | }
|
---|
149 | function touchIds(event) {
|
---|
150 | return getCurrentTargetTouchList(event).map(touch => touch.identifier);
|
---|
151 | }
|
---|
152 | function touchDistanceAngle(event, ids) {
|
---|
153 | const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier));
|
---|
154 | return distanceAngle(P1, P2);
|
---|
155 | }
|
---|
156 | function pointerId(event) {
|
---|
157 | const valueEvent = getValueEvent(event);
|
---|
158 | return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId;
|
---|
159 | }
|
---|
160 | function pointerValues(event) {
|
---|
161 | const valueEvent = getValueEvent(event);
|
---|
162 | return [valueEvent.clientX, valueEvent.clientY];
|
---|
163 | }
|
---|
164 | const LINE_HEIGHT = 40;
|
---|
165 | const PAGE_HEIGHT = 800;
|
---|
166 | function wheelValues(event) {
|
---|
167 | let {
|
---|
168 | deltaX,
|
---|
169 | deltaY,
|
---|
170 | deltaMode
|
---|
171 | } = event;
|
---|
172 | if (deltaMode === 1) {
|
---|
173 | deltaX *= LINE_HEIGHT;
|
---|
174 | deltaY *= LINE_HEIGHT;
|
---|
175 | } else if (deltaMode === 2) {
|
---|
176 | deltaX *= PAGE_HEIGHT;
|
---|
177 | deltaY *= PAGE_HEIGHT;
|
---|
178 | }
|
---|
179 | return [deltaX, deltaY];
|
---|
180 | }
|
---|
181 | function scrollValues(event) {
|
---|
182 | var _ref, _ref2;
|
---|
183 | const {
|
---|
184 | scrollX,
|
---|
185 | scrollY,
|
---|
186 | scrollLeft,
|
---|
187 | scrollTop
|
---|
188 | } = event.currentTarget;
|
---|
189 | return [(_ref = scrollX !== null && scrollX !== void 0 ? scrollX : scrollLeft) !== null && _ref !== void 0 ? _ref : 0, (_ref2 = scrollY !== null && scrollY !== void 0 ? scrollY : scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0];
|
---|
190 | }
|
---|
191 | function getEventDetails(event) {
|
---|
192 | const payload = {};
|
---|
193 | if ('buttons' in event) payload.buttons = event.buttons;
|
---|
194 | if ('shiftKey' in event) {
|
---|
195 | const {
|
---|
196 | shiftKey,
|
---|
197 | altKey,
|
---|
198 | metaKey,
|
---|
199 | ctrlKey
|
---|
200 | } = event;
|
---|
201 | Object.assign(payload, {
|
---|
202 | shiftKey,
|
---|
203 | altKey,
|
---|
204 | metaKey,
|
---|
205 | ctrlKey
|
---|
206 | });
|
---|
207 | }
|
---|
208 | return payload;
|
---|
209 | }
|
---|
210 |
|
---|
211 | function call(v, ...args) {
|
---|
212 | if (typeof v === 'function') {
|
---|
213 | return v(...args);
|
---|
214 | } else {
|
---|
215 | return v;
|
---|
216 | }
|
---|
217 | }
|
---|
218 | function noop() {}
|
---|
219 | function chain(...fns) {
|
---|
220 | if (fns.length === 0) return noop;
|
---|
221 | if (fns.length === 1) return fns[0];
|
---|
222 | return function () {
|
---|
223 | let result;
|
---|
224 | for (const fn of fns) {
|
---|
225 | result = fn.apply(this, arguments) || result;
|
---|
226 | }
|
---|
227 | return result;
|
---|
228 | };
|
---|
229 | }
|
---|
230 | function assignDefault(value, fallback) {
|
---|
231 | return Object.assign({}, fallback, value || {});
|
---|
232 | }
|
---|
233 |
|
---|
234 | const BEFORE_LAST_KINEMATICS_DELAY = 32;
|
---|
235 | class Engine {
|
---|
236 | constructor(ctrl, args, key) {
|
---|
237 | this.ctrl = ctrl;
|
---|
238 | this.args = args;
|
---|
239 | this.key = key;
|
---|
240 | if (!this.state) {
|
---|
241 | this.state = {};
|
---|
242 | this.computeValues([0, 0]);
|
---|
243 | this.computeInitial();
|
---|
244 | if (this.init) this.init();
|
---|
245 | this.reset();
|
---|
246 | }
|
---|
247 | }
|
---|
248 | get state() {
|
---|
249 | return this.ctrl.state[this.key];
|
---|
250 | }
|
---|
251 | set state(state) {
|
---|
252 | this.ctrl.state[this.key] = state;
|
---|
253 | }
|
---|
254 | get shared() {
|
---|
255 | return this.ctrl.state.shared;
|
---|
256 | }
|
---|
257 | get eventStore() {
|
---|
258 | return this.ctrl.gestureEventStores[this.key];
|
---|
259 | }
|
---|
260 | get timeoutStore() {
|
---|
261 | return this.ctrl.gestureTimeoutStores[this.key];
|
---|
262 | }
|
---|
263 | get config() {
|
---|
264 | return this.ctrl.config[this.key];
|
---|
265 | }
|
---|
266 | get sharedConfig() {
|
---|
267 | return this.ctrl.config.shared;
|
---|
268 | }
|
---|
269 | get handler() {
|
---|
270 | return this.ctrl.handlers[this.key];
|
---|
271 | }
|
---|
272 | reset() {
|
---|
273 | const {
|
---|
274 | state,
|
---|
275 | shared,
|
---|
276 | ingKey,
|
---|
277 | args
|
---|
278 | } = this;
|
---|
279 | shared[ingKey] = state._active = state.active = state._blocked = state._force = false;
|
---|
280 | state._step = [false, false];
|
---|
281 | state.intentional = false;
|
---|
282 | state._movement = [0, 0];
|
---|
283 | state._distance = [0, 0];
|
---|
284 | state._direction = [0, 0];
|
---|
285 | state._delta = [0, 0];
|
---|
286 | state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]];
|
---|
287 | state.args = args;
|
---|
288 | state.axis = undefined;
|
---|
289 | state.memo = undefined;
|
---|
290 | state.elapsedTime = state.timeDelta = 0;
|
---|
291 | state.direction = [0, 0];
|
---|
292 | state.distance = [0, 0];
|
---|
293 | state.overflow = [0, 0];
|
---|
294 | state._movementBound = [false, false];
|
---|
295 | state.velocity = [0, 0];
|
---|
296 | state.movement = [0, 0];
|
---|
297 | state.delta = [0, 0];
|
---|
298 | state.timeStamp = 0;
|
---|
299 | }
|
---|
300 | start(event) {
|
---|
301 | const state = this.state;
|
---|
302 | const config = this.config;
|
---|
303 | if (!state._active) {
|
---|
304 | this.reset();
|
---|
305 | this.computeInitial();
|
---|
306 | state._active = true;
|
---|
307 | state.target = event.target;
|
---|
308 | state.currentTarget = event.currentTarget;
|
---|
309 | state.lastOffset = config.from ? call(config.from, state) : state.offset;
|
---|
310 | state.offset = state.lastOffset;
|
---|
311 | state.startTime = state.timeStamp = event.timeStamp;
|
---|
312 | }
|
---|
313 | }
|
---|
314 | computeValues(values) {
|
---|
315 | const state = this.state;
|
---|
316 | state._values = values;
|
---|
317 | state.values = this.config.transform(values);
|
---|
318 | }
|
---|
319 | computeInitial() {
|
---|
320 | const state = this.state;
|
---|
321 | state._initial = state._values;
|
---|
322 | state.initial = state.values;
|
---|
323 | }
|
---|
324 | compute(event) {
|
---|
325 | const {
|
---|
326 | state,
|
---|
327 | config,
|
---|
328 | shared
|
---|
329 | } = this;
|
---|
330 | state.args = this.args;
|
---|
331 | let dt = 0;
|
---|
332 | if (event) {
|
---|
333 | state.event = event;
|
---|
334 | if (config.preventDefault && event.cancelable) state.event.preventDefault();
|
---|
335 | state.type = event.type;
|
---|
336 | shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size;
|
---|
337 | shared.locked = !!document.pointerLockElement;
|
---|
338 | Object.assign(shared, getEventDetails(event));
|
---|
339 | shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0;
|
---|
340 | dt = event.timeStamp - state.timeStamp;
|
---|
341 | state.timeStamp = event.timeStamp;
|
---|
342 | state.elapsedTime = state.timeStamp - state.startTime;
|
---|
343 | }
|
---|
344 | if (state._active) {
|
---|
345 | const _absoluteDelta = state._delta.map(Math.abs);
|
---|
346 | maths.V.addTo(state._distance, _absoluteDelta);
|
---|
347 | }
|
---|
348 | if (this.axisIntent) this.axisIntent(event);
|
---|
349 | const [_m0, _m1] = state._movement;
|
---|
350 | const [t0, t1] = config.threshold;
|
---|
351 | const {
|
---|
352 | _step,
|
---|
353 | values
|
---|
354 | } = state;
|
---|
355 | if (config.hasCustomTransform) {
|
---|
356 | if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0];
|
---|
357 | if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1];
|
---|
358 | } else {
|
---|
359 | if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0;
|
---|
360 | if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1;
|
---|
361 | }
|
---|
362 | state.intentional = _step[0] !== false || _step[1] !== false;
|
---|
363 | if (!state.intentional) return;
|
---|
364 | const movement = [0, 0];
|
---|
365 | if (config.hasCustomTransform) {
|
---|
366 | const [v0, v1] = values;
|
---|
367 | movement[0] = _step[0] !== false ? v0 - _step[0] : 0;
|
---|
368 | movement[1] = _step[1] !== false ? v1 - _step[1] : 0;
|
---|
369 | } else {
|
---|
370 | movement[0] = _step[0] !== false ? _m0 - _step[0] : 0;
|
---|
371 | movement[1] = _step[1] !== false ? _m1 - _step[1] : 0;
|
---|
372 | }
|
---|
373 | if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement);
|
---|
374 | const previousOffset = state.offset;
|
---|
375 | const gestureIsActive = state._active && !state._blocked || state.active;
|
---|
376 | if (gestureIsActive) {
|
---|
377 | state.first = state._active && !state.active;
|
---|
378 | state.last = !state._active && state.active;
|
---|
379 | state.active = shared[this.ingKey] = state._active;
|
---|
380 | if (event) {
|
---|
381 | if (state.first) {
|
---|
382 | if ('bounds' in config) state._bounds = call(config.bounds, state);
|
---|
383 | if (this.setup) this.setup();
|
---|
384 | }
|
---|
385 | state.movement = movement;
|
---|
386 | this.computeOffset();
|
---|
387 | }
|
---|
388 | }
|
---|
389 | const [ox, oy] = state.offset;
|
---|
390 | const [[x0, x1], [y0, y1]] = state._bounds;
|
---|
391 | state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0];
|
---|
392 | state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false;
|
---|
393 | state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false;
|
---|
394 | const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0];
|
---|
395 | state.offset = maths.computeRubberband(state._bounds, state.offset, rubberband);
|
---|
396 | state.delta = maths.V.sub(state.offset, previousOffset);
|
---|
397 | this.computeMovement();
|
---|
398 | if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) {
|
---|
399 | state.delta = maths.V.sub(state.offset, previousOffset);
|
---|
400 | const absoluteDelta = state.delta.map(Math.abs);
|
---|
401 | maths.V.addTo(state.distance, absoluteDelta);
|
---|
402 | state.direction = state.delta.map(Math.sign);
|
---|
403 | state._direction = state._delta.map(Math.sign);
|
---|
404 | if (!state.first && dt > 0) {
|
---|
405 | state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt];
|
---|
406 | state.timeDelta = dt;
|
---|
407 | }
|
---|
408 | }
|
---|
409 | }
|
---|
410 | emit() {
|
---|
411 | const state = this.state;
|
---|
412 | const shared = this.shared;
|
---|
413 | const config = this.config;
|
---|
414 | if (!state._active) this.clean();
|
---|
415 | if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return;
|
---|
416 | const memo = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, {
|
---|
417 | [this.aliasKey]: state.values
|
---|
418 | }));
|
---|
419 | if (memo !== undefined) state.memo = memo;
|
---|
420 | }
|
---|
421 | clean() {
|
---|
422 | this.eventStore.clean();
|
---|
423 | this.timeoutStore.clean();
|
---|
424 | }
|
---|
425 | }
|
---|
426 |
|
---|
427 | function selectAxis([dx, dy], threshold) {
|
---|
428 | const absDx = Math.abs(dx);
|
---|
429 | const absDy = Math.abs(dy);
|
---|
430 | if (absDx > absDy && absDx > threshold) {
|
---|
431 | return 'x';
|
---|
432 | }
|
---|
433 | if (absDy > absDx && absDy > threshold) {
|
---|
434 | return 'y';
|
---|
435 | }
|
---|
436 | return undefined;
|
---|
437 | }
|
---|
438 | class CoordinatesEngine extends Engine {
|
---|
439 | constructor(...args) {
|
---|
440 | super(...args);
|
---|
441 | _defineProperty(this, "aliasKey", 'xy');
|
---|
442 | }
|
---|
443 | reset() {
|
---|
444 | super.reset();
|
---|
445 | this.state.axis = undefined;
|
---|
446 | }
|
---|
447 | init() {
|
---|
448 | this.state.offset = [0, 0];
|
---|
449 | this.state.lastOffset = [0, 0];
|
---|
450 | }
|
---|
451 | computeOffset() {
|
---|
452 | this.state.offset = maths.V.add(this.state.lastOffset, this.state.movement);
|
---|
453 | }
|
---|
454 | computeMovement() {
|
---|
455 | this.state.movement = maths.V.sub(this.state.offset, this.state.lastOffset);
|
---|
456 | }
|
---|
457 | axisIntent(event) {
|
---|
458 | const state = this.state;
|
---|
459 | const config = this.config;
|
---|
460 | if (!state.axis && event) {
|
---|
461 | const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold;
|
---|
462 | state.axis = selectAxis(state._movement, threshold);
|
---|
463 | }
|
---|
464 | state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis;
|
---|
465 | }
|
---|
466 | restrictToAxis(v) {
|
---|
467 | if (this.config.axis || this.config.lockDirection) {
|
---|
468 | switch (this.state.axis) {
|
---|
469 | case 'x':
|
---|
470 | v[1] = 0;
|
---|
471 | break;
|
---|
472 | case 'y':
|
---|
473 | v[0] = 0;
|
---|
474 | break;
|
---|
475 | }
|
---|
476 | }
|
---|
477 | }
|
---|
478 | }
|
---|
479 |
|
---|
480 | const identity = v => v;
|
---|
481 | const DEFAULT_RUBBERBAND = 0.15;
|
---|
482 | const commonConfigResolver = {
|
---|
483 | enabled(value = true) {
|
---|
484 | return value;
|
---|
485 | },
|
---|
486 | eventOptions(value, _k, config) {
|
---|
487 | return _objectSpread2(_objectSpread2({}, config.shared.eventOptions), value);
|
---|
488 | },
|
---|
489 | preventDefault(value = false) {
|
---|
490 | return value;
|
---|
491 | },
|
---|
492 | triggerAllEvents(value = false) {
|
---|
493 | return value;
|
---|
494 | },
|
---|
495 | rubberband(value = 0) {
|
---|
496 | switch (value) {
|
---|
497 | case true:
|
---|
498 | return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND];
|
---|
499 | case false:
|
---|
500 | return [0, 0];
|
---|
501 | default:
|
---|
502 | return maths.V.toVector(value);
|
---|
503 | }
|
---|
504 | },
|
---|
505 | from(value) {
|
---|
506 | if (typeof value === 'function') return value;
|
---|
507 | if (value != null) return maths.V.toVector(value);
|
---|
508 | },
|
---|
509 | transform(value, _k, config) {
|
---|
510 | const transform = value || config.shared.transform;
|
---|
511 | this.hasCustomTransform = !!transform;
|
---|
512 | return transform || identity;
|
---|
513 | },
|
---|
514 | threshold(value) {
|
---|
515 | return maths.V.toVector(value, 0);
|
---|
516 | }
|
---|
517 | };
|
---|
518 |
|
---|
519 | const DEFAULT_AXIS_THRESHOLD = 0;
|
---|
520 | const coordinatesConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
|
---|
521 | axis(_v, _k, {
|
---|
522 | axis
|
---|
523 | }) {
|
---|
524 | this.lockDirection = axis === 'lock';
|
---|
525 | if (!this.lockDirection) return axis;
|
---|
526 | },
|
---|
527 | axisThreshold(value = DEFAULT_AXIS_THRESHOLD) {
|
---|
528 | return value;
|
---|
529 | },
|
---|
530 | bounds(value = {}) {
|
---|
531 | if (typeof value === 'function') {
|
---|
532 | return state => coordinatesConfigResolver.bounds(value(state));
|
---|
533 | }
|
---|
534 | if ('current' in value) {
|
---|
535 | return () => value.current;
|
---|
536 | }
|
---|
537 | if (typeof HTMLElement === 'function' && value instanceof HTMLElement) {
|
---|
538 | return value;
|
---|
539 | }
|
---|
540 | const {
|
---|
541 | left = -Infinity,
|
---|
542 | right = Infinity,
|
---|
543 | top = -Infinity,
|
---|
544 | bottom = Infinity
|
---|
545 | } = value;
|
---|
546 | return [[left, right], [top, bottom]];
|
---|
547 | }
|
---|
548 | });
|
---|
549 |
|
---|
550 | const KEYS_DELTA_MAP = {
|
---|
551 | ArrowRight: (displacement, factor = 1) => [displacement * factor, 0],
|
---|
552 | ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0],
|
---|
553 | ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor],
|
---|
554 | ArrowDown: (displacement, factor = 1) => [0, displacement * factor]
|
---|
555 | };
|
---|
556 | class DragEngine extends CoordinatesEngine {
|
---|
557 | constructor(...args) {
|
---|
558 | super(...args);
|
---|
559 | _defineProperty(this, "ingKey", 'dragging');
|
---|
560 | }
|
---|
561 | reset() {
|
---|
562 | super.reset();
|
---|
563 | const state = this.state;
|
---|
564 | state._pointerId = undefined;
|
---|
565 | state._pointerActive = false;
|
---|
566 | state._keyboardActive = false;
|
---|
567 | state._preventScroll = false;
|
---|
568 | state._delayed = false;
|
---|
569 | state.swipe = [0, 0];
|
---|
570 | state.tap = false;
|
---|
571 | state.canceled = false;
|
---|
572 | state.cancel = this.cancel.bind(this);
|
---|
573 | }
|
---|
574 | setup() {
|
---|
575 | const state = this.state;
|
---|
576 | if (state._bounds instanceof HTMLElement) {
|
---|
577 | const boundRect = state._bounds.getBoundingClientRect();
|
---|
578 | const targetRect = state.currentTarget.getBoundingClientRect();
|
---|
579 | const _bounds = {
|
---|
580 | left: boundRect.left - targetRect.left + state.offset[0],
|
---|
581 | right: boundRect.right - targetRect.right + state.offset[0],
|
---|
582 | top: boundRect.top - targetRect.top + state.offset[1],
|
---|
583 | bottom: boundRect.bottom - targetRect.bottom + state.offset[1]
|
---|
584 | };
|
---|
585 | state._bounds = coordinatesConfigResolver.bounds(_bounds);
|
---|
586 | }
|
---|
587 | }
|
---|
588 | cancel() {
|
---|
589 | const state = this.state;
|
---|
590 | if (state.canceled) return;
|
---|
591 | state.canceled = true;
|
---|
592 | state._active = false;
|
---|
593 | setTimeout(() => {
|
---|
594 | this.compute();
|
---|
595 | this.emit();
|
---|
596 | }, 0);
|
---|
597 | }
|
---|
598 | setActive() {
|
---|
599 | this.state._active = this.state._pointerActive || this.state._keyboardActive;
|
---|
600 | }
|
---|
601 | clean() {
|
---|
602 | this.pointerClean();
|
---|
603 | this.state._pointerActive = false;
|
---|
604 | this.state._keyboardActive = false;
|
---|
605 | super.clean();
|
---|
606 | }
|
---|
607 | pointerDown(event) {
|
---|
608 | const config = this.config;
|
---|
609 | const state = this.state;
|
---|
610 | if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return;
|
---|
611 | const ctrlIds = this.ctrl.setEventIds(event);
|
---|
612 | if (config.pointerCapture) {
|
---|
613 | event.target.setPointerCapture(event.pointerId);
|
---|
614 | }
|
---|
615 | if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return;
|
---|
616 | this.start(event);
|
---|
617 | this.setupPointer(event);
|
---|
618 | state._pointerId = pointerId(event);
|
---|
619 | state._pointerActive = true;
|
---|
620 | this.computeValues(pointerValues(event));
|
---|
621 | this.computeInitial();
|
---|
622 | if (config.preventScrollAxis && getPointerType(event) !== 'mouse') {
|
---|
623 | state._active = false;
|
---|
624 | this.setupScrollPrevention(event);
|
---|
625 | } else if (config.delay > 0) {
|
---|
626 | this.setupDelayTrigger(event);
|
---|
627 | if (config.triggerAllEvents) {
|
---|
628 | this.compute(event);
|
---|
629 | this.emit();
|
---|
630 | }
|
---|
631 | } else {
|
---|
632 | this.startPointerDrag(event);
|
---|
633 | }
|
---|
634 | }
|
---|
635 | startPointerDrag(event) {
|
---|
636 | const state = this.state;
|
---|
637 | state._active = true;
|
---|
638 | state._preventScroll = true;
|
---|
639 | state._delayed = false;
|
---|
640 | this.compute(event);
|
---|
641 | this.emit();
|
---|
642 | }
|
---|
643 | pointerMove(event) {
|
---|
644 | const state = this.state;
|
---|
645 | const config = this.config;
|
---|
646 | if (!state._pointerActive) return;
|
---|
647 | const id = pointerId(event);
|
---|
648 | if (state._pointerId !== undefined && id !== state._pointerId) return;
|
---|
649 | const _values = pointerValues(event);
|
---|
650 | if (document.pointerLockElement === event.target) {
|
---|
651 | state._delta = [event.movementX, event.movementY];
|
---|
652 | } else {
|
---|
653 | state._delta = maths.V.sub(_values, state._values);
|
---|
654 | this.computeValues(_values);
|
---|
655 | }
|
---|
656 | maths.V.addTo(state._movement, state._delta);
|
---|
657 | this.compute(event);
|
---|
658 | if (state._delayed && state.intentional) {
|
---|
659 | this.timeoutStore.remove('dragDelay');
|
---|
660 | state.active = false;
|
---|
661 | this.startPointerDrag(event);
|
---|
662 | return;
|
---|
663 | }
|
---|
664 | if (config.preventScrollAxis && !state._preventScroll) {
|
---|
665 | if (state.axis) {
|
---|
666 | if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') {
|
---|
667 | state._active = false;
|
---|
668 | this.clean();
|
---|
669 | return;
|
---|
670 | } else {
|
---|
671 | this.timeoutStore.remove('startPointerDrag');
|
---|
672 | this.startPointerDrag(event);
|
---|
673 | return;
|
---|
674 | }
|
---|
675 | } else {
|
---|
676 | return;
|
---|
677 | }
|
---|
678 | }
|
---|
679 | this.emit();
|
---|
680 | }
|
---|
681 | pointerUp(event) {
|
---|
682 | this.ctrl.setEventIds(event);
|
---|
683 | try {
|
---|
684 | if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) {
|
---|
685 | ;
|
---|
686 | event.target.releasePointerCapture(event.pointerId);
|
---|
687 | }
|
---|
688 | } catch (_unused) {
|
---|
689 | }
|
---|
690 | const state = this.state;
|
---|
691 | const config = this.config;
|
---|
692 | if (!state._active || !state._pointerActive) return;
|
---|
693 | const id = pointerId(event);
|
---|
694 | if (state._pointerId !== undefined && id !== state._pointerId) return;
|
---|
695 | this.state._pointerActive = false;
|
---|
696 | this.setActive();
|
---|
697 | this.compute(event);
|
---|
698 | const [dx, dy] = state._distance;
|
---|
699 | state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold;
|
---|
700 | if (state.tap && config.filterTaps) {
|
---|
701 | state._force = true;
|
---|
702 | } else {
|
---|
703 | const [_dx, _dy] = state._delta;
|
---|
704 | const [_mx, _my] = state._movement;
|
---|
705 | const [svx, svy] = config.swipe.velocity;
|
---|
706 | const [sx, sy] = config.swipe.distance;
|
---|
707 | const sdt = config.swipe.duration;
|
---|
708 | if (state.elapsedTime < sdt) {
|
---|
709 | const _vx = Math.abs(_dx / state.timeDelta);
|
---|
710 | const _vy = Math.abs(_dy / state.timeDelta);
|
---|
711 | if (_vx > svx && Math.abs(_mx) > sx) state.swipe[0] = Math.sign(_dx);
|
---|
712 | if (_vy > svy && Math.abs(_my) > sy) state.swipe[1] = Math.sign(_dy);
|
---|
713 | }
|
---|
714 | }
|
---|
715 | this.emit();
|
---|
716 | }
|
---|
717 | pointerClick(event) {
|
---|
718 | if (!this.state.tap && event.detail > 0) {
|
---|
719 | event.preventDefault();
|
---|
720 | event.stopPropagation();
|
---|
721 | }
|
---|
722 | }
|
---|
723 | setupPointer(event) {
|
---|
724 | const config = this.config;
|
---|
725 | const device = config.device;
|
---|
726 | if (config.pointerLock) {
|
---|
727 | event.currentTarget.requestPointerLock();
|
---|
728 | }
|
---|
729 | if (!config.pointerCapture) {
|
---|
730 | this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
|
---|
731 | this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
|
---|
732 | this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this));
|
---|
733 | }
|
---|
734 | }
|
---|
735 | pointerClean() {
|
---|
736 | if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) {
|
---|
737 | document.exitPointerLock();
|
---|
738 | }
|
---|
739 | }
|
---|
740 | preventScroll(event) {
|
---|
741 | if (this.state._preventScroll && event.cancelable) {
|
---|
742 | event.preventDefault();
|
---|
743 | }
|
---|
744 | }
|
---|
745 | setupScrollPrevention(event) {
|
---|
746 | this.state._preventScroll = false;
|
---|
747 | persistEvent(event);
|
---|
748 | const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), {
|
---|
749 | passive: false
|
---|
750 | });
|
---|
751 | this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove);
|
---|
752 | this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove);
|
---|
753 | this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event);
|
---|
754 | }
|
---|
755 | setupDelayTrigger(event) {
|
---|
756 | this.state._delayed = true;
|
---|
757 | this.timeoutStore.add('dragDelay', () => {
|
---|
758 | this.state._step = [0, 0];
|
---|
759 | this.startPointerDrag(event);
|
---|
760 | }, this.config.delay);
|
---|
761 | }
|
---|
762 | keyDown(event) {
|
---|
763 | const deltaFn = KEYS_DELTA_MAP[event.key];
|
---|
764 | if (deltaFn) {
|
---|
765 | const state = this.state;
|
---|
766 | const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
|
---|
767 | this.start(event);
|
---|
768 | state._delta = deltaFn(this.config.keyboardDisplacement, factor);
|
---|
769 | state._keyboardActive = true;
|
---|
770 | maths.V.addTo(state._movement, state._delta);
|
---|
771 | this.compute(event);
|
---|
772 | this.emit();
|
---|
773 | }
|
---|
774 | }
|
---|
775 | keyUp(event) {
|
---|
776 | if (!(event.key in KEYS_DELTA_MAP)) return;
|
---|
777 | this.state._keyboardActive = false;
|
---|
778 | this.setActive();
|
---|
779 | this.compute(event);
|
---|
780 | this.emit();
|
---|
781 | }
|
---|
782 | bind(bindFunction) {
|
---|
783 | const device = this.config.device;
|
---|
784 | bindFunction(device, 'start', this.pointerDown.bind(this));
|
---|
785 | if (this.config.pointerCapture) {
|
---|
786 | bindFunction(device, 'change', this.pointerMove.bind(this));
|
---|
787 | bindFunction(device, 'end', this.pointerUp.bind(this));
|
---|
788 | bindFunction(device, 'cancel', this.pointerUp.bind(this));
|
---|
789 | bindFunction('lostPointerCapture', '', this.pointerUp.bind(this));
|
---|
790 | }
|
---|
791 | if (this.config.keys) {
|
---|
792 | bindFunction('key', 'down', this.keyDown.bind(this));
|
---|
793 | bindFunction('key', 'up', this.keyUp.bind(this));
|
---|
794 | }
|
---|
795 | if (this.config.filterTaps) {
|
---|
796 | bindFunction('click', '', this.pointerClick.bind(this), {
|
---|
797 | capture: true,
|
---|
798 | passive: false
|
---|
799 | });
|
---|
800 | }
|
---|
801 | }
|
---|
802 | }
|
---|
803 | function persistEvent(event) {
|
---|
804 | 'persist' in event && typeof event.persist === 'function' && event.persist();
|
---|
805 | }
|
---|
806 |
|
---|
807 | const isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement;
|
---|
808 | function supportsTouchEvents() {
|
---|
809 | return isBrowser && 'ontouchstart' in window;
|
---|
810 | }
|
---|
811 | function isTouchScreen() {
|
---|
812 | return supportsTouchEvents() || isBrowser && window.navigator.maxTouchPoints > 1;
|
---|
813 | }
|
---|
814 | function supportsPointerEvents() {
|
---|
815 | return isBrowser && 'onpointerdown' in window;
|
---|
816 | }
|
---|
817 | function supportsPointerLock() {
|
---|
818 | return isBrowser && 'exitPointerLock' in window.document;
|
---|
819 | }
|
---|
820 | function supportsGestureEvents() {
|
---|
821 | try {
|
---|
822 | return 'constructor' in GestureEvent;
|
---|
823 | } catch (e) {
|
---|
824 | return false;
|
---|
825 | }
|
---|
826 | }
|
---|
827 | const SUPPORT = {
|
---|
828 | isBrowser,
|
---|
829 | gesture: supportsGestureEvents(),
|
---|
830 | touch: supportsTouchEvents(),
|
---|
831 | touchscreen: isTouchScreen(),
|
---|
832 | pointer: supportsPointerEvents(),
|
---|
833 | pointerLock: supportsPointerLock()
|
---|
834 | };
|
---|
835 |
|
---|
836 | const DEFAULT_PREVENT_SCROLL_DELAY = 250;
|
---|
837 | const DEFAULT_DRAG_DELAY = 180;
|
---|
838 | const DEFAULT_SWIPE_VELOCITY = 0.5;
|
---|
839 | const DEFAULT_SWIPE_DISTANCE = 50;
|
---|
840 | const DEFAULT_SWIPE_DURATION = 250;
|
---|
841 | const DEFAULT_KEYBOARD_DISPLACEMENT = 10;
|
---|
842 | const DEFAULT_DRAG_AXIS_THRESHOLD = {
|
---|
843 | mouse: 0,
|
---|
844 | touch: 0,
|
---|
845 | pen: 8
|
---|
846 | };
|
---|
847 | const dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
---|
848 | device(_v, _k, {
|
---|
849 | pointer: {
|
---|
850 | touch = false,
|
---|
851 | lock = false,
|
---|
852 | mouse = false
|
---|
853 | } = {}
|
---|
854 | }) {
|
---|
855 | this.pointerLock = lock && SUPPORT.pointerLock;
|
---|
856 | if (SUPPORT.touch && touch) return 'touch';
|
---|
857 | if (this.pointerLock) return 'mouse';
|
---|
858 | if (SUPPORT.pointer && !mouse) return 'pointer';
|
---|
859 | if (SUPPORT.touch) return 'touch';
|
---|
860 | return 'mouse';
|
---|
861 | },
|
---|
862 | preventScrollAxis(value, _k, {
|
---|
863 | preventScroll
|
---|
864 | }) {
|
---|
865 | this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined;
|
---|
866 | if (!SUPPORT.touchscreen || preventScroll === false) return undefined;
|
---|
867 | return value ? value : preventScroll !== undefined ? 'y' : undefined;
|
---|
868 | },
|
---|
869 | pointerCapture(_v, _k, {
|
---|
870 | pointer: {
|
---|
871 | capture = true,
|
---|
872 | buttons = 1,
|
---|
873 | keys = true
|
---|
874 | } = {}
|
---|
875 | }) {
|
---|
876 | this.pointerButtons = buttons;
|
---|
877 | this.keys = keys;
|
---|
878 | return !this.pointerLock && this.device === 'pointer' && capture;
|
---|
879 | },
|
---|
880 | threshold(value, _k, {
|
---|
881 | filterTaps = false,
|
---|
882 | tapsThreshold = 3,
|
---|
883 | axis = undefined
|
---|
884 | }) {
|
---|
885 | const threshold = maths.V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0);
|
---|
886 | this.filterTaps = filterTaps;
|
---|
887 | this.tapsThreshold = tapsThreshold;
|
---|
888 | return threshold;
|
---|
889 | },
|
---|
890 | swipe({
|
---|
891 | velocity = DEFAULT_SWIPE_VELOCITY,
|
---|
892 | distance = DEFAULT_SWIPE_DISTANCE,
|
---|
893 | duration = DEFAULT_SWIPE_DURATION
|
---|
894 | } = {}) {
|
---|
895 | return {
|
---|
896 | velocity: this.transform(maths.V.toVector(velocity)),
|
---|
897 | distance: this.transform(maths.V.toVector(distance)),
|
---|
898 | duration
|
---|
899 | };
|
---|
900 | },
|
---|
901 | delay(value = 0) {
|
---|
902 | switch (value) {
|
---|
903 | case true:
|
---|
904 | return DEFAULT_DRAG_DELAY;
|
---|
905 | case false:
|
---|
906 | return 0;
|
---|
907 | default:
|
---|
908 | return value;
|
---|
909 | }
|
---|
910 | },
|
---|
911 | axisThreshold(value) {
|
---|
912 | if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD;
|
---|
913 | return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
|
---|
914 | },
|
---|
915 | keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) {
|
---|
916 | return value;
|
---|
917 | }
|
---|
918 | });
|
---|
919 |
|
---|
920 | function clampStateInternalMovementToBounds(state) {
|
---|
921 | const [ox, oy] = state.overflow;
|
---|
922 | const [dx, dy] = state._delta;
|
---|
923 | const [dirx, diry] = state._direction;
|
---|
924 | if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
|
---|
925 | state._movement[0] = state._movementBound[0];
|
---|
926 | }
|
---|
927 | if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
|
---|
928 | state._movement[1] = state._movementBound[1];
|
---|
929 | }
|
---|
930 | }
|
---|
931 |
|
---|
932 | const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
|
---|
933 | const PINCH_WHEEL_RATIO = 100;
|
---|
934 | class PinchEngine extends Engine {
|
---|
935 | constructor(...args) {
|
---|
936 | super(...args);
|
---|
937 | _defineProperty(this, "ingKey", 'pinching');
|
---|
938 | _defineProperty(this, "aliasKey", 'da');
|
---|
939 | }
|
---|
940 | init() {
|
---|
941 | this.state.offset = [1, 0];
|
---|
942 | this.state.lastOffset = [1, 0];
|
---|
943 | this.state._pointerEvents = new Map();
|
---|
944 | }
|
---|
945 | reset() {
|
---|
946 | super.reset();
|
---|
947 | const state = this.state;
|
---|
948 | state._touchIds = [];
|
---|
949 | state.canceled = false;
|
---|
950 | state.cancel = this.cancel.bind(this);
|
---|
951 | state.turns = 0;
|
---|
952 | }
|
---|
953 | computeOffset() {
|
---|
954 | const {
|
---|
955 | type,
|
---|
956 | movement,
|
---|
957 | lastOffset
|
---|
958 | } = this.state;
|
---|
959 | if (type === 'wheel') {
|
---|
960 | this.state.offset = maths.V.add(movement, lastOffset);
|
---|
961 | } else {
|
---|
962 | this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]];
|
---|
963 | }
|
---|
964 | }
|
---|
965 | computeMovement() {
|
---|
966 | const {
|
---|
967 | offset,
|
---|
968 | lastOffset
|
---|
969 | } = this.state;
|
---|
970 | this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]];
|
---|
971 | }
|
---|
972 | axisIntent() {
|
---|
973 | const state = this.state;
|
---|
974 | const [_m0, _m1] = state._movement;
|
---|
975 | if (!state.axis) {
|
---|
976 | const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1);
|
---|
977 | if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
|
---|
978 | }
|
---|
979 | }
|
---|
980 | restrictToAxis(v) {
|
---|
981 | if (this.config.lockDirection) {
|
---|
982 | if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0;
|
---|
983 | }
|
---|
984 | }
|
---|
985 | cancel() {
|
---|
986 | const state = this.state;
|
---|
987 | if (state.canceled) return;
|
---|
988 | setTimeout(() => {
|
---|
989 | state.canceled = true;
|
---|
990 | state._active = false;
|
---|
991 | this.compute();
|
---|
992 | this.emit();
|
---|
993 | }, 0);
|
---|
994 | }
|
---|
995 | touchStart(event) {
|
---|
996 | this.ctrl.setEventIds(event);
|
---|
997 | const state = this.state;
|
---|
998 | const ctrlTouchIds = this.ctrl.touchIds;
|
---|
999 | if (state._active) {
|
---|
1000 | if (state._touchIds.every(id => ctrlTouchIds.has(id))) return;
|
---|
1001 | }
|
---|
1002 | if (ctrlTouchIds.size < 2) return;
|
---|
1003 | this.start(event);
|
---|
1004 | state._touchIds = Array.from(ctrlTouchIds).slice(0, 2);
|
---|
1005 | const payload = touchDistanceAngle(event, state._touchIds);
|
---|
1006 | if (!payload) return;
|
---|
1007 | this.pinchStart(event, payload);
|
---|
1008 | }
|
---|
1009 | pointerStart(event) {
|
---|
1010 | if (event.buttons != null && event.buttons % 2 !== 1) return;
|
---|
1011 | this.ctrl.setEventIds(event);
|
---|
1012 | event.target.setPointerCapture(event.pointerId);
|
---|
1013 | const state = this.state;
|
---|
1014 | const _pointerEvents = state._pointerEvents;
|
---|
1015 | const ctrlPointerIds = this.ctrl.pointerIds;
|
---|
1016 | if (state._active) {
|
---|
1017 | if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return;
|
---|
1018 | }
|
---|
1019 | if (_pointerEvents.size < 2) {
|
---|
1020 | _pointerEvents.set(event.pointerId, event);
|
---|
1021 | }
|
---|
1022 | if (state._pointerEvents.size < 2) return;
|
---|
1023 | this.start(event);
|
---|
1024 | const payload = distanceAngle(...Array.from(_pointerEvents.values()));
|
---|
1025 | if (!payload) return;
|
---|
1026 | this.pinchStart(event, payload);
|
---|
1027 | }
|
---|
1028 | pinchStart(event, payload) {
|
---|
1029 | const state = this.state;
|
---|
1030 | state.origin = payload.origin;
|
---|
1031 | this.computeValues([payload.distance, payload.angle]);
|
---|
1032 | this.computeInitial();
|
---|
1033 | this.compute(event);
|
---|
1034 | this.emit();
|
---|
1035 | }
|
---|
1036 | touchMove(event) {
|
---|
1037 | if (!this.state._active) return;
|
---|
1038 | const payload = touchDistanceAngle(event, this.state._touchIds);
|
---|
1039 | if (!payload) return;
|
---|
1040 | this.pinchMove(event, payload);
|
---|
1041 | }
|
---|
1042 | pointerMove(event) {
|
---|
1043 | const _pointerEvents = this.state._pointerEvents;
|
---|
1044 | if (_pointerEvents.has(event.pointerId)) {
|
---|
1045 | _pointerEvents.set(event.pointerId, event);
|
---|
1046 | }
|
---|
1047 | if (!this.state._active) return;
|
---|
1048 | const payload = distanceAngle(...Array.from(_pointerEvents.values()));
|
---|
1049 | if (!payload) return;
|
---|
1050 | this.pinchMove(event, payload);
|
---|
1051 | }
|
---|
1052 | pinchMove(event, payload) {
|
---|
1053 | const state = this.state;
|
---|
1054 | const prev_a = state._values[1];
|
---|
1055 | const delta_a = payload.angle - prev_a;
|
---|
1056 | let delta_turns = 0;
|
---|
1057 | if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a);
|
---|
1058 | this.computeValues([payload.distance, payload.angle - 360 * delta_turns]);
|
---|
1059 | state.origin = payload.origin;
|
---|
1060 | state.turns = delta_turns;
|
---|
1061 | state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]];
|
---|
1062 | this.compute(event);
|
---|
1063 | this.emit();
|
---|
1064 | }
|
---|
1065 | touchEnd(event) {
|
---|
1066 | this.ctrl.setEventIds(event);
|
---|
1067 | if (!this.state._active) return;
|
---|
1068 | if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) {
|
---|
1069 | this.state._active = false;
|
---|
1070 | this.compute(event);
|
---|
1071 | this.emit();
|
---|
1072 | }
|
---|
1073 | }
|
---|
1074 | pointerEnd(event) {
|
---|
1075 | const state = this.state;
|
---|
1076 | this.ctrl.setEventIds(event);
|
---|
1077 | try {
|
---|
1078 | event.target.releasePointerCapture(event.pointerId);
|
---|
1079 | } catch (_unused) {}
|
---|
1080 | if (state._pointerEvents.has(event.pointerId)) {
|
---|
1081 | state._pointerEvents.delete(event.pointerId);
|
---|
1082 | }
|
---|
1083 | if (!state._active) return;
|
---|
1084 | if (state._pointerEvents.size < 2) {
|
---|
1085 | state._active = false;
|
---|
1086 | this.compute(event);
|
---|
1087 | this.emit();
|
---|
1088 | }
|
---|
1089 | }
|
---|
1090 | gestureStart(event) {
|
---|
1091 | if (event.cancelable) event.preventDefault();
|
---|
1092 | const state = this.state;
|
---|
1093 | if (state._active) return;
|
---|
1094 | this.start(event);
|
---|
1095 | this.computeValues([event.scale, event.rotation]);
|
---|
1096 | state.origin = [event.clientX, event.clientY];
|
---|
1097 | this.compute(event);
|
---|
1098 | this.emit();
|
---|
1099 | }
|
---|
1100 | gestureMove(event) {
|
---|
1101 | if (event.cancelable) event.preventDefault();
|
---|
1102 | if (!this.state._active) return;
|
---|
1103 | const state = this.state;
|
---|
1104 | this.computeValues([event.scale, event.rotation]);
|
---|
1105 | state.origin = [event.clientX, event.clientY];
|
---|
1106 | const _previousMovement = state._movement;
|
---|
1107 | state._movement = [event.scale - 1, event.rotation];
|
---|
1108 | state._delta = maths.V.sub(state._movement, _previousMovement);
|
---|
1109 | this.compute(event);
|
---|
1110 | this.emit();
|
---|
1111 | }
|
---|
1112 | gestureEnd(event) {
|
---|
1113 | if (!this.state._active) return;
|
---|
1114 | this.state._active = false;
|
---|
1115 | this.compute(event);
|
---|
1116 | this.emit();
|
---|
1117 | }
|
---|
1118 | wheel(event) {
|
---|
1119 | const modifierKey = this.config.modifierKey;
|
---|
1120 | if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find(k => event[k]) : !event[modifierKey])) return;
|
---|
1121 | if (!this.state._active) this.wheelStart(event);else this.wheelChange(event);
|
---|
1122 | this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
|
---|
1123 | }
|
---|
1124 | wheelStart(event) {
|
---|
1125 | this.start(event);
|
---|
1126 | this.wheelChange(event);
|
---|
1127 | }
|
---|
1128 | wheelChange(event) {
|
---|
1129 | const isR3f = ('uv' in event);
|
---|
1130 | if (!isR3f) {
|
---|
1131 | if (event.cancelable) {
|
---|
1132 | event.preventDefault();
|
---|
1133 | }
|
---|
1134 | }
|
---|
1135 | const state = this.state;
|
---|
1136 | state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
|
---|
1137 | maths.V.addTo(state._movement, state._delta);
|
---|
1138 | clampStateInternalMovementToBounds(state);
|
---|
1139 | this.state.origin = [event.clientX, event.clientY];
|
---|
1140 | this.compute(event);
|
---|
1141 | this.emit();
|
---|
1142 | }
|
---|
1143 | wheelEnd() {
|
---|
1144 | if (!this.state._active) return;
|
---|
1145 | this.state._active = false;
|
---|
1146 | this.compute();
|
---|
1147 | this.emit();
|
---|
1148 | }
|
---|
1149 | bind(bindFunction) {
|
---|
1150 | const device = this.config.device;
|
---|
1151 | if (!!device) {
|
---|
1152 | bindFunction(device, 'start', this[device + 'Start'].bind(this));
|
---|
1153 | bindFunction(device, 'change', this[device + 'Move'].bind(this));
|
---|
1154 | bindFunction(device, 'end', this[device + 'End'].bind(this));
|
---|
1155 | bindFunction(device, 'cancel', this[device + 'End'].bind(this));
|
---|
1156 | bindFunction('lostPointerCapture', '', this[device + 'End'].bind(this));
|
---|
1157 | }
|
---|
1158 | if (this.config.pinchOnWheel) {
|
---|
1159 | bindFunction('wheel', '', this.wheel.bind(this), {
|
---|
1160 | passive: false
|
---|
1161 | });
|
---|
1162 | }
|
---|
1163 | }
|
---|
1164 | }
|
---|
1165 |
|
---|
1166 | const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
|
---|
1167 | device(_v, _k, {
|
---|
1168 | shared,
|
---|
1169 | pointer: {
|
---|
1170 | touch = false
|
---|
1171 | } = {}
|
---|
1172 | }) {
|
---|
1173 | const sharedConfig = shared;
|
---|
1174 | if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
|
---|
1175 | if (SUPPORT.touch && touch) return 'touch';
|
---|
1176 | if (SUPPORT.touchscreen) {
|
---|
1177 | if (SUPPORT.pointer) return 'pointer';
|
---|
1178 | if (SUPPORT.touch) return 'touch';
|
---|
1179 | }
|
---|
1180 | },
|
---|
1181 | bounds(_v, _k, {
|
---|
1182 | scaleBounds = {},
|
---|
1183 | angleBounds = {}
|
---|
1184 | }) {
|
---|
1185 | const _scaleBounds = state => {
|
---|
1186 | const D = assignDefault(call(scaleBounds, state), {
|
---|
1187 | min: -Infinity,
|
---|
1188 | max: Infinity
|
---|
1189 | });
|
---|
1190 | return [D.min, D.max];
|
---|
1191 | };
|
---|
1192 | const _angleBounds = state => {
|
---|
1193 | const A = assignDefault(call(angleBounds, state), {
|
---|
1194 | min: -Infinity,
|
---|
1195 | max: Infinity
|
---|
1196 | });
|
---|
1197 | return [A.min, A.max];
|
---|
1198 | };
|
---|
1199 | if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()];
|
---|
1200 | return state => [_scaleBounds(state), _angleBounds(state)];
|
---|
1201 | },
|
---|
1202 | threshold(value, _k, config) {
|
---|
1203 | this.lockDirection = config.axis === 'lock';
|
---|
1204 | const threshold = maths.V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
|
---|
1205 | return threshold;
|
---|
1206 | },
|
---|
1207 | modifierKey(value) {
|
---|
1208 | if (value === undefined) return 'ctrlKey';
|
---|
1209 | return value;
|
---|
1210 | },
|
---|
1211 | pinchOnWheel(value = true) {
|
---|
1212 | return value;
|
---|
1213 | }
|
---|
1214 | });
|
---|
1215 |
|
---|
1216 | class MoveEngine extends CoordinatesEngine {
|
---|
1217 | constructor(...args) {
|
---|
1218 | super(...args);
|
---|
1219 | _defineProperty(this, "ingKey", 'moving');
|
---|
1220 | }
|
---|
1221 | move(event) {
|
---|
1222 | if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
|
---|
1223 | if (!this.state._active) this.moveStart(event);else this.moveChange(event);
|
---|
1224 | this.timeoutStore.add('moveEnd', this.moveEnd.bind(this));
|
---|
1225 | }
|
---|
1226 | moveStart(event) {
|
---|
1227 | this.start(event);
|
---|
1228 | this.computeValues(pointerValues(event));
|
---|
1229 | this.compute(event);
|
---|
1230 | this.computeInitial();
|
---|
1231 | this.emit();
|
---|
1232 | }
|
---|
1233 | moveChange(event) {
|
---|
1234 | if (!this.state._active) return;
|
---|
1235 | const values = pointerValues(event);
|
---|
1236 | const state = this.state;
|
---|
1237 | state._delta = maths.V.sub(values, state._values);
|
---|
1238 | maths.V.addTo(state._movement, state._delta);
|
---|
1239 | this.computeValues(values);
|
---|
1240 | this.compute(event);
|
---|
1241 | this.emit();
|
---|
1242 | }
|
---|
1243 | moveEnd(event) {
|
---|
1244 | if (!this.state._active) return;
|
---|
1245 | this.state._active = false;
|
---|
1246 | this.compute(event);
|
---|
1247 | this.emit();
|
---|
1248 | }
|
---|
1249 | bind(bindFunction) {
|
---|
1250 | bindFunction('pointer', 'change', this.move.bind(this));
|
---|
1251 | bindFunction('pointer', 'leave', this.moveEnd.bind(this));
|
---|
1252 | }
|
---|
1253 | }
|
---|
1254 |
|
---|
1255 | const moveConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
---|
1256 | mouseOnly: (value = true) => value
|
---|
1257 | });
|
---|
1258 |
|
---|
1259 | class ScrollEngine extends CoordinatesEngine {
|
---|
1260 | constructor(...args) {
|
---|
1261 | super(...args);
|
---|
1262 | _defineProperty(this, "ingKey", 'scrolling');
|
---|
1263 | }
|
---|
1264 | scroll(event) {
|
---|
1265 | if (!this.state._active) this.start(event);
|
---|
1266 | this.scrollChange(event);
|
---|
1267 | this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this));
|
---|
1268 | }
|
---|
1269 | scrollChange(event) {
|
---|
1270 | if (event.cancelable) event.preventDefault();
|
---|
1271 | const state = this.state;
|
---|
1272 | const values = scrollValues(event);
|
---|
1273 | state._delta = maths.V.sub(values, state._values);
|
---|
1274 | maths.V.addTo(state._movement, state._delta);
|
---|
1275 | this.computeValues(values);
|
---|
1276 | this.compute(event);
|
---|
1277 | this.emit();
|
---|
1278 | }
|
---|
1279 | scrollEnd() {
|
---|
1280 | if (!this.state._active) return;
|
---|
1281 | this.state._active = false;
|
---|
1282 | this.compute();
|
---|
1283 | this.emit();
|
---|
1284 | }
|
---|
1285 | bind(bindFunction) {
|
---|
1286 | bindFunction('scroll', '', this.scroll.bind(this));
|
---|
1287 | }
|
---|
1288 | }
|
---|
1289 |
|
---|
1290 | const scrollConfigResolver = coordinatesConfigResolver;
|
---|
1291 |
|
---|
1292 | class WheelEngine extends CoordinatesEngine {
|
---|
1293 | constructor(...args) {
|
---|
1294 | super(...args);
|
---|
1295 | _defineProperty(this, "ingKey", 'wheeling');
|
---|
1296 | }
|
---|
1297 | wheel(event) {
|
---|
1298 | if (!this.state._active) this.start(event);
|
---|
1299 | this.wheelChange(event);
|
---|
1300 | this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
|
---|
1301 | }
|
---|
1302 | wheelChange(event) {
|
---|
1303 | const state = this.state;
|
---|
1304 | state._delta = wheelValues(event);
|
---|
1305 | maths.V.addTo(state._movement, state._delta);
|
---|
1306 | clampStateInternalMovementToBounds(state);
|
---|
1307 | this.compute(event);
|
---|
1308 | this.emit();
|
---|
1309 | }
|
---|
1310 | wheelEnd() {
|
---|
1311 | if (!this.state._active) return;
|
---|
1312 | this.state._active = false;
|
---|
1313 | this.compute();
|
---|
1314 | this.emit();
|
---|
1315 | }
|
---|
1316 | bind(bindFunction) {
|
---|
1317 | bindFunction('wheel', '', this.wheel.bind(this));
|
---|
1318 | }
|
---|
1319 | }
|
---|
1320 |
|
---|
1321 | const wheelConfigResolver = coordinatesConfigResolver;
|
---|
1322 |
|
---|
1323 | class HoverEngine extends CoordinatesEngine {
|
---|
1324 | constructor(...args) {
|
---|
1325 | super(...args);
|
---|
1326 | _defineProperty(this, "ingKey", 'hovering');
|
---|
1327 | }
|
---|
1328 | enter(event) {
|
---|
1329 | if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
|
---|
1330 | this.start(event);
|
---|
1331 | this.computeValues(pointerValues(event));
|
---|
1332 | this.compute(event);
|
---|
1333 | this.emit();
|
---|
1334 | }
|
---|
1335 | leave(event) {
|
---|
1336 | if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
|
---|
1337 | const state = this.state;
|
---|
1338 | if (!state._active) return;
|
---|
1339 | state._active = false;
|
---|
1340 | const values = pointerValues(event);
|
---|
1341 | state._movement = state._delta = maths.V.sub(values, state._values);
|
---|
1342 | this.computeValues(values);
|
---|
1343 | this.compute(event);
|
---|
1344 | state.delta = state.movement;
|
---|
1345 | this.emit();
|
---|
1346 | }
|
---|
1347 | bind(bindFunction) {
|
---|
1348 | bindFunction('pointer', 'enter', this.enter.bind(this));
|
---|
1349 | bindFunction('pointer', 'leave', this.leave.bind(this));
|
---|
1350 | }
|
---|
1351 | }
|
---|
1352 |
|
---|
1353 | const hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
|
---|
1354 | mouseOnly: (value = true) => value
|
---|
1355 | });
|
---|
1356 |
|
---|
1357 | const EngineMap = new Map();
|
---|
1358 | const ConfigResolverMap = new Map();
|
---|
1359 | function registerAction(action) {
|
---|
1360 | EngineMap.set(action.key, action.engine);
|
---|
1361 | ConfigResolverMap.set(action.key, action.resolver);
|
---|
1362 | }
|
---|
1363 | const dragAction = {
|
---|
1364 | key: 'drag',
|
---|
1365 | engine: DragEngine,
|
---|
1366 | resolver: dragConfigResolver
|
---|
1367 | };
|
---|
1368 | const hoverAction = {
|
---|
1369 | key: 'hover',
|
---|
1370 | engine: HoverEngine,
|
---|
1371 | resolver: hoverConfigResolver
|
---|
1372 | };
|
---|
1373 | const moveAction = {
|
---|
1374 | key: 'move',
|
---|
1375 | engine: MoveEngine,
|
---|
1376 | resolver: moveConfigResolver
|
---|
1377 | };
|
---|
1378 | const pinchAction = {
|
---|
1379 | key: 'pinch',
|
---|
1380 | engine: PinchEngine,
|
---|
1381 | resolver: pinchConfigResolver
|
---|
1382 | };
|
---|
1383 | const scrollAction = {
|
---|
1384 | key: 'scroll',
|
---|
1385 | engine: ScrollEngine,
|
---|
1386 | resolver: scrollConfigResolver
|
---|
1387 | };
|
---|
1388 | const wheelAction = {
|
---|
1389 | key: 'wheel',
|
---|
1390 | engine: WheelEngine,
|
---|
1391 | resolver: wheelConfigResolver
|
---|
1392 | };
|
---|
1393 |
|
---|
1394 | exports.ConfigResolverMap = ConfigResolverMap;
|
---|
1395 | exports.EngineMap = EngineMap;
|
---|
1396 | exports.SUPPORT = SUPPORT;
|
---|
1397 | exports._defineProperty = _defineProperty;
|
---|
1398 | exports._objectSpread2 = _objectSpread2;
|
---|
1399 | exports.chain = chain;
|
---|
1400 | exports.dragAction = dragAction;
|
---|
1401 | exports.hoverAction = hoverAction;
|
---|
1402 | exports.isTouch = isTouch;
|
---|
1403 | exports.moveAction = moveAction;
|
---|
1404 | exports.parseProp = parseProp;
|
---|
1405 | exports.pinchAction = pinchAction;
|
---|
1406 | exports.registerAction = registerAction;
|
---|
1407 | exports.scrollAction = scrollAction;
|
---|
1408 | exports.toDomEventType = toDomEventType;
|
---|
1409 | exports.toHandlerProp = toHandlerProp;
|
---|
1410 | exports.touchIds = touchIds;
|
---|
1411 | exports.wheelAction = wheelAction;
|
---|