1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | import getAgent from '@egjs/agent';
|
10 | import Component, { ComponentEvent } from '@egjs/component';
|
11 | import { getObserver, ReactiveSubscribe } from '@cfcs/core';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var extendStatics = function (d, b) {
|
30 | extendStatics = Object.setPrototypeOf || {
|
31 | __proto__: []
|
32 | } instanceof Array && function (d, b) {
|
33 | d.__proto__ = b;
|
34 | } || function (d, b) {
|
35 | for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
36 | };
|
37 |
|
38 | return extendStatics(d, b);
|
39 | };
|
40 |
|
41 | function __extends(d, b) {
|
42 | extendStatics(d, b);
|
43 |
|
44 | function __() {
|
45 | this.constructor = d;
|
46 | }
|
47 |
|
48 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
49 | }
|
50 | var __assign = function () {
|
51 | __assign = Object.assign || function __assign(t) {
|
52 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
53 | s = arguments[i];
|
54 |
|
55 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
56 | }
|
57 |
|
58 | return t;
|
59 | };
|
60 |
|
61 | return __assign.apply(this, arguments);
|
62 | };
|
63 | function __decorate(decorators, target, key, desc) {
|
64 | var c = arguments.length,
|
65 | r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
66 | d;
|
67 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
68 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
69 | }
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | var win;
|
78 |
|
79 | if (typeof window === "undefined") {
|
80 |
|
81 | win = {
|
82 | navigator: {
|
83 | userAgent: ""
|
84 | }
|
85 | };
|
86 | } else {
|
87 | win = window;
|
88 | }
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 | var DIRECTION_NONE = 1;
|
95 | var DIRECTION_LEFT = 2;
|
96 | var DIRECTION_RIGHT = 4;
|
97 | var DIRECTION_HORIZONTAL = 2 | 4;
|
98 | var DIRECTION_UP = 8;
|
99 | var DIRECTION_DOWN = 16;
|
100 | var DIRECTION_VERTICAL = 8 | 16;
|
101 | var DIRECTION_ALL = 2 | 4 | 8 | 16;
|
102 | var MOUSE_LEFT = "left";
|
103 | var MOUSE_RIGHT = "right";
|
104 | var MOUSE_MIDDLE = "middle";
|
105 | var ANY = "any";
|
106 | var NONE = "none";
|
107 | var SHIFT = "shift";
|
108 | var CTRL = "ctrl";
|
109 | var ALT = "alt";
|
110 | var META = "meta";
|
111 | var VELOCITY_INTERVAL = 16;
|
112 | var AXES_METHODS = ["connect", "disconnect", "get", "setTo", "setBy", "setOptions", "setAxis", "stopAnimation", "updateAnimation", "isBounceArea"];
|
113 | var AXES_EVENTS = ["hold", "release", "change", "animationStart", "animationEnd", "finish"];
|
114 | var IOS_EDGE_THRESHOLD = 30;
|
115 | var IS_IOS_SAFARI = "ontouchstart" in win && getAgent().browser.name === "safari";
|
116 | var TRANSFORM = function () {
|
117 | if (typeof document === "undefined") {
|
118 | return "";
|
119 | }
|
120 |
|
121 | var bodyStyle = (document.head || document.getElementsByTagName("head")[0]).style;
|
122 | var target = ["transform", "webkitTransform", "msTransform", "mozTransform"];
|
123 |
|
124 | for (var i = 0, len = target.length; i < len; i++) {
|
125 | if (target[i] in bodyStyle) {
|
126 | return target[i];
|
127 | }
|
128 | }
|
129 |
|
130 | return "";
|
131 | }();
|
132 | var PREVENT_DRAG_CSSPROPS = {
|
133 | "user-select": "none",
|
134 | "-webkit-user-drag": "none"
|
135 | };
|
136 |
|
137 | var toArray = function (nodes) {
|
138 |
|
139 |
|
140 | var el = [];
|
141 |
|
142 | for (var i = 0, len = nodes.length; i < len; i++) {
|
143 | el.push(nodes[i]);
|
144 | }
|
145 |
|
146 | return el;
|
147 | };
|
148 | var $ = function (param, multi) {
|
149 | if (multi === void 0) {
|
150 | multi = false;
|
151 | }
|
152 |
|
153 | var el;
|
154 |
|
155 | if (typeof param === "string") {
|
156 |
|
157 |
|
158 | var match = param.match(/^<([a-z]+)\s*([^>]*)>/);
|
159 |
|
160 | if (match) {
|
161 |
|
162 | var dummy = document.createElement("div");
|
163 | dummy.innerHTML = param;
|
164 | el = toArray(dummy.childNodes);
|
165 | } else {
|
166 |
|
167 | el = toArray(document.querySelectorAll(param));
|
168 | }
|
169 |
|
170 | if (!multi) {
|
171 | el = el.length >= 1 ? el[0] : undefined;
|
172 | }
|
173 | } else if (param === win) {
|
174 |
|
175 | el = param;
|
176 | } else if ("value" in param || "current" in param) {
|
177 | el = param.value || param.current;
|
178 | } else if (param.nodeName && (param.nodeType === 1 || param.nodeType === 9)) {
|
179 |
|
180 | el = param;
|
181 | } else if ("jQuery" in win && param instanceof jQuery || param.constructor.prototype.jquery) {
|
182 |
|
183 | el = multi ? param.toArray() : param.get(0);
|
184 | } else if (Array.isArray(param)) {
|
185 | el = param.map(function (v) {
|
186 | return $(v);
|
187 | });
|
188 |
|
189 | if (!multi) {
|
190 | el = el.length >= 1 ? el[0] : undefined;
|
191 | }
|
192 | }
|
193 |
|
194 | return el;
|
195 | };
|
196 | var raf = win.requestAnimationFrame || win.webkitRequestAnimationFrame;
|
197 | var caf = win.cancelAnimationFrame || win.webkitCancelAnimationFrame;
|
198 |
|
199 | if (raf && !caf) {
|
200 | var keyInfo_1 = {};
|
201 | var oldraf_1 = raf;
|
202 |
|
203 | raf = function (callback) {
|
204 | var wrapCallback = function (timestamp) {
|
205 | if (keyInfo_1[key]) {
|
206 | callback(timestamp);
|
207 | }
|
208 | };
|
209 |
|
210 | var key = oldraf_1(wrapCallback);
|
211 | keyInfo_1[key] = true;
|
212 | return key;
|
213 | };
|
214 |
|
215 | caf = function (key) {
|
216 | delete keyInfo_1[key];
|
217 | };
|
218 | } else if (!(raf && caf)) {
|
219 | raf = function (callback) {
|
220 | return win.setTimeout(function () {
|
221 | callback(win.performance && win.performance.now && win.performance.now() || new Date().getTime());
|
222 | }, 16);
|
223 | };
|
224 |
|
225 | caf = win.clearTimeout;
|
226 | }
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 | var requestAnimationFrame = function (fp) {
|
235 | return raf(fp);
|
236 | };
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 | var cancelAnimationFrame = function (key) {
|
245 | caf(key);
|
246 | };
|
247 | var map = function (obj, callback) {
|
248 | var tranformed = {};
|
249 |
|
250 | for (var k in obj) {
|
251 | if (k) {
|
252 | tranformed[k] = callback(obj[k], k);
|
253 | }
|
254 | }
|
255 |
|
256 | return tranformed;
|
257 | };
|
258 | var filter = function (obj, callback) {
|
259 | var filtered = {};
|
260 |
|
261 | for (var k in obj) {
|
262 | if (k && callback(obj[k], k)) {
|
263 | filtered[k] = obj[k];
|
264 | }
|
265 | }
|
266 |
|
267 | return filtered;
|
268 | };
|
269 | var every = function (obj, callback) {
|
270 | for (var k in obj) {
|
271 | if (k && !callback(obj[k], k)) {
|
272 | return false;
|
273 | }
|
274 | }
|
275 |
|
276 | return true;
|
277 | };
|
278 | var equal = function (target, base) {
|
279 | return every(target, function (v, k) {
|
280 | return v === base[k];
|
281 | });
|
282 | };
|
283 | var roundNumFunc = {};
|
284 | var roundNumber = function (num, roundUnit) {
|
285 |
|
286 | if (!roundNumFunc[roundUnit]) {
|
287 | roundNumFunc[roundUnit] = getRoundFunc(roundUnit);
|
288 | }
|
289 |
|
290 | return roundNumFunc[roundUnit](num);
|
291 | };
|
292 | var roundNumbers = function (num, roundUnit) {
|
293 | if (!num || !roundUnit) {
|
294 | return num;
|
295 | }
|
296 |
|
297 | return map(num, function (value, key) {
|
298 | return roundNumber(value, typeof roundUnit === "number" ? roundUnit : roundUnit[key]);
|
299 | });
|
300 | };
|
301 | var getDecimalPlace = function (val) {
|
302 | if (!isFinite(val)) {
|
303 | return 0;
|
304 | }
|
305 |
|
306 | var v = "".concat(val);
|
307 |
|
308 | if (v.indexOf("e") >= 0) {
|
309 |
|
310 |
|
311 | var p = 0;
|
312 | var e = 1;
|
313 |
|
314 | while (Math.round(val * e) / e !== val) {
|
315 | e *= 10;
|
316 | p++;
|
317 | }
|
318 |
|
319 | return p;
|
320 | }
|
321 |
|
322 |
|
323 |
|
324 | return v.indexOf(".") >= 0 ? v.length - v.indexOf(".") - 1 : 0;
|
325 | };
|
326 | var inversePow = function (n) {
|
327 |
|
328 |
|
329 | return 1 / Math.pow(10, n);
|
330 | };
|
331 | var getRoundFunc = function (v) {
|
332 | var p = v < 1 ? Math.pow(10, getDecimalPlace(v)) : 1;
|
333 | return function (n) {
|
334 | if (v === 0) {
|
335 | return 0;
|
336 | }
|
337 |
|
338 | return Math.round(Math.round(n / v) * v * p) / p;
|
339 | };
|
340 | };
|
341 | var getAngle = function (posX, posY) {
|
342 | return Math.atan2(posY, posX) * 180 / Math.PI;
|
343 | };
|
344 | var isCssPropsFromAxes = function (originalCssProps) {
|
345 | var same = true;
|
346 | Object.keys(PREVENT_DRAG_CSSPROPS).forEach(function (prop) {
|
347 | if (!originalCssProps || originalCssProps[prop] !== PREVENT_DRAG_CSSPROPS[prop]) {
|
348 | same = false;
|
349 | }
|
350 | });
|
351 | return same;
|
352 | };
|
353 | var getDirection = function (useHorizontal, useVertical) {
|
354 | if (useHorizontal && useVertical) {
|
355 | return DIRECTION_ALL;
|
356 | } else if (useHorizontal) {
|
357 | return DIRECTION_HORIZONTAL;
|
358 | } else if (useVertical) {
|
359 | return DIRECTION_VERTICAL;
|
360 | } else {
|
361 | return DIRECTION_NONE;
|
362 | }
|
363 | };
|
364 | var useDirection = function (checkType, direction, userDirection) {
|
365 | if (userDirection) {
|
366 | return !!(direction === DIRECTION_ALL || direction & checkType && userDirection & checkType);
|
367 | } else {
|
368 | return !!(direction & checkType);
|
369 | }
|
370 | };
|
371 | var setCssProps = function (element, option, direction) {
|
372 | var _a;
|
373 |
|
374 | var touchActionMap = (_a = {}, _a[DIRECTION_NONE] = "auto", _a[DIRECTION_ALL] = "none", _a[DIRECTION_VERTICAL] = "pan-x", _a[DIRECTION_HORIZONTAL] = "pan-y", _a);
|
375 | var oldCssProps = {};
|
376 |
|
377 | if (element && element.style) {
|
378 | var touchAction = option.touchAction ? option.touchAction : touchActionMap[direction];
|
379 |
|
380 | var newCssProps_1 = __assign(__assign({}, PREVENT_DRAG_CSSPROPS), {
|
381 | "touch-action": element.style["touch-action"] === "none" ? "none" : touchAction
|
382 | });
|
383 |
|
384 | Object.keys(newCssProps_1).forEach(function (prop) {
|
385 | oldCssProps[prop] = element.style[prop];
|
386 | element.style[prop] = newCssProps_1[prop];
|
387 | });
|
388 | }
|
389 |
|
390 | return oldCssProps;
|
391 | };
|
392 | var revertCssProps = function (element, originalCssProps) {
|
393 | if (element && element.style && originalCssProps) {
|
394 | Object.keys(originalCssProps).forEach(function (prop) {
|
395 | element.style[prop] = originalCssProps[prop];
|
396 | });
|
397 | }
|
398 |
|
399 | return;
|
400 | };
|
401 |
|
402 | var EventManager =
|
403 |
|
404 | function () {
|
405 | function EventManager(_axes) {
|
406 | this._axes = _axes;
|
407 | }
|
408 | |
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 |
|
418 |
|
419 |
|
420 |
|
421 |
|
422 |
|
423 |
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 |
|
436 |
|
437 | var __proto = EventManager.prototype;
|
438 |
|
439 | __proto.hold = function (pos, option) {
|
440 | var roundPos = this._getRoundPos(pos).roundPos;
|
441 |
|
442 | this._axes.trigger(new ComponentEvent("hold", {
|
443 | pos: roundPos,
|
444 | input: option.input || null,
|
445 | inputEvent: option.event || null,
|
446 | isTrusted: true
|
447 | }));
|
448 | };
|
449 | |
450 |
|
451 |
|
452 |
|
453 |
|
454 |
|
455 |
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 |
|
463 |
|
464 |
|
465 |
|
466 |
|
467 |
|
468 | |
469 |
|
470 |
|
471 |
|
472 |
|
473 |
|
474 |
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 | |
488 |
|
489 |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 |
|
495 |
|
496 |
|
497 |
|
498 |
|
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 |
|
505 |
|
506 |
|
507 |
|
508 |
|
509 |
|
510 |
|
511 |
|
512 |
|
513 |
|
514 |
|
515 |
|
516 |
|
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 | __proto.triggerRelease = function (param) {
|
527 | var _a = this._getRoundPos(param.destPos, param.depaPos),
|
528 | roundPos = _a.roundPos,
|
529 | roundDepa = _a.roundDepa;
|
530 |
|
531 | param.destPos = roundPos;
|
532 | param.depaPos = roundDepa;
|
533 | param.setTo = this._createUserControll(param.destPos, param.duration);
|
534 |
|
535 | this._axes.trigger(new ComponentEvent("release", __assign(__assign({}, param), {
|
536 | bounceRatio: this._getBounceRatio(roundPos)
|
537 | })));
|
538 | };
|
539 | |
540 |
|
541 |
|
542 |
|
543 |
|
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 |
|
551 |
|
552 |
|
553 |
|
554 |
|
555 |
|
556 |
|
557 |
|
558 |
|
559 |
|
560 |
|
561 |
|
562 |
|
563 |
|
564 |
|
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 |
|
573 |
|
574 |
|
575 |
|
576 |
|
577 |
|
578 |
|
579 | __proto.triggerChange = function (pos, depaPos, option, holding) {
|
580 | var _this = this;
|
581 |
|
582 | if (holding === void 0) {
|
583 | holding = false;
|
584 | }
|
585 |
|
586 | var animationManager = this.animationManager;
|
587 | var axisManager = animationManager.axisManager;
|
588 | var eventInfo = animationManager.getEventInfo();
|
589 |
|
590 | var _a = this._getRoundPos(pos, depaPos),
|
591 | roundPos = _a.roundPos,
|
592 | roundDepa = _a.roundDepa;
|
593 |
|
594 | var moveTo = axisManager.moveTo(roundPos, roundDepa);
|
595 | var inputEvent = (option === null || option === void 0 ? void 0 : option.event) || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.event) || null;
|
596 | var param = {
|
597 | pos: moveTo.pos,
|
598 | delta: moveTo.delta,
|
599 | bounceRatio: this._getBounceRatio(moveTo.pos),
|
600 | holding: holding,
|
601 | inputEvent: inputEvent,
|
602 | isTrusted: !!inputEvent,
|
603 | input: (option === null || option === void 0 ? void 0 : option.input) || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.input) || null,
|
604 | set: inputEvent ? this._createUserControll(moveTo.pos) : function () {}
|
605 |
|
606 | };
|
607 | var event = new ComponentEvent("change", param);
|
608 |
|
609 | this._axes.trigger(event);
|
610 |
|
611 | Object.keys(moveTo.pos).forEach(function (axis) {
|
612 | var p = moveTo.pos[axis];
|
613 | getObserver(_this._axes, axis, p).current = p;
|
614 | });
|
615 |
|
616 | if (inputEvent) {
|
617 | axisManager.set(param.set().destPos);
|
618 | }
|
619 |
|
620 | return !event.isCanceled();
|
621 | };
|
622 | |
623 |
|
624 |
|
625 |
|
626 |
|
627 |
|
628 |
|
629 |
|
630 |
|
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 |
|
637 |
|
638 |
|
639 |
|
640 |
|
641 |
|
642 |
|
643 |
|
644 |
|
645 |
|
646 |
|
647 |
|
648 |
|
649 |
|
650 |
|
651 |
|
652 |
|
653 |
|
654 |
|
655 |
|
656 |
|
657 |
|
658 |
|
659 |
|
660 |
|
661 | __proto.triggerAnimationStart = function (param) {
|
662 | var _a = this._getRoundPos(param.destPos, param.depaPos),
|
663 | roundPos = _a.roundPos,
|
664 | roundDepa = _a.roundDepa;
|
665 |
|
666 | param.destPos = roundPos;
|
667 | param.depaPos = roundDepa;
|
668 | param.setTo = this._createUserControll(param.destPos, param.duration);
|
669 | var event = new ComponentEvent("animationStart", param);
|
670 |
|
671 | this._axes.trigger(event);
|
672 |
|
673 | return !event.isCanceled();
|
674 | };
|
675 | |
676 |
|
677 |
|
678 |
|
679 |
|
680 |
|
681 |
|
682 |
|
683 |
|
684 |
|
685 |
|
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 |
|
692 |
|
693 |
|
694 |
|
695 |
|
696 |
|
697 |
|
698 | __proto.triggerAnimationEnd = function (isTrusted) {
|
699 | if (isTrusted === void 0) {
|
700 | isTrusted = false;
|
701 | }
|
702 |
|
703 | this._axes.trigger(new ComponentEvent("animationEnd", {
|
704 | isTrusted: isTrusted
|
705 | }));
|
706 | };
|
707 | |
708 |
|
709 |
|
710 |
|
711 |
|
712 |
|
713 |
|
714 |
|
715 |
|
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 |
|
726 |
|
727 |
|
728 |
|
729 |
|
730 | __proto.triggerFinish = function (isTrusted) {
|
731 | if (isTrusted === void 0) {
|
732 | isTrusted = false;
|
733 | }
|
734 |
|
735 | this._axes.trigger(new ComponentEvent("finish", {
|
736 | isTrusted: isTrusted
|
737 | }));
|
738 | };
|
739 |
|
740 | __proto.setAnimationManager = function (animationManager) {
|
741 | this.animationManager = animationManager;
|
742 | };
|
743 |
|
744 | __proto.destroy = function () {
|
745 | this._axes.off();
|
746 | };
|
747 |
|
748 | __proto._createUserControll = function (pos, duration) {
|
749 | if (duration === void 0) {
|
750 | duration = 0;
|
751 | }
|
752 |
|
753 |
|
754 | var userControl = {
|
755 | destPos: __assign({}, pos),
|
756 | duration: duration
|
757 | };
|
758 | return function (toPos, userDuration) {
|
759 | if (toPos) {
|
760 | userControl.destPos = __assign({}, toPos);
|
761 | }
|
762 |
|
763 | if (userDuration !== undefined) {
|
764 | userControl.duration = userDuration;
|
765 | }
|
766 |
|
767 | return userControl;
|
768 | };
|
769 | };
|
770 |
|
771 | __proto._getRoundPos = function (pos, depaPos) {
|
772 |
|
773 | var roundUnit = this._axes.options.round;
|
774 |
|
775 |
|
776 |
|
777 | return {
|
778 | roundPos: roundNumbers(pos, roundUnit),
|
779 | roundDepa: roundNumbers(depaPos, roundUnit)
|
780 | };
|
781 | };
|
782 |
|
783 | __proto._getBounceRatio = function (pos) {
|
784 | return this._axes.axisManager.map(pos, function (v, opt) {
|
785 | if (v < opt.range[0] && opt.bounce[0] !== 0) {
|
786 | return (opt.range[0] - v) / opt.bounce[0];
|
787 | } else if (v > opt.range[1] && opt.bounce[1] !== 0) {
|
788 | return (v - opt.range[1]) / opt.bounce[1];
|
789 | } else {
|
790 | return 0;
|
791 | }
|
792 | });
|
793 | };
|
794 |
|
795 | return EventManager;
|
796 | }();
|
797 |
|
798 | var InterruptManager =
|
799 |
|
800 | function () {
|
801 | function InterruptManager(_options) {
|
802 | this._options = _options;
|
803 | this._prevented = false;
|
804 | }
|
805 |
|
806 | var __proto = InterruptManager.prototype;
|
807 |
|
808 | __proto.isInterrupting = function () {
|
809 |
|
810 | return this._options.interruptable || this._prevented;
|
811 | };
|
812 |
|
813 | __proto.isInterrupted = function () {
|
814 | return !this._options.interruptable && this._prevented;
|
815 | };
|
816 |
|
817 | __proto.setInterrupt = function (prevented) {
|
818 | if (!this._options.interruptable) {
|
819 | this._prevented = prevented;
|
820 | }
|
821 | };
|
822 |
|
823 | return InterruptManager;
|
824 | }();
|
825 |
|
826 |
|
827 |
|
828 |
|
829 |
|
830 | var getInsidePosition = function (destPos, range, circular, bounce) {
|
831 | var toDestPos = destPos;
|
832 | var targetRange = [circular[0] ? range[0] : bounce ? range[0] - bounce[0] : range[0], circular[1] ? range[1] : bounce ? range[1] + bounce[1] : range[1]];
|
833 | toDestPos = Math.max(targetRange[0], toDestPos);
|
834 | toDestPos = Math.min(targetRange[1], toDestPos);
|
835 | return toDestPos;
|
836 | };
|
837 |
|
838 | var isOutside = function (pos, range) {
|
839 | return pos < range[0] || pos > range[1];
|
840 | };
|
841 |
|
842 | var isEndofBounce = function (pos, range, bounce, circular) {
|
843 | return !circular[0] && pos === range[0] - bounce[0] || !circular[1] && pos === range[1] + bounce[1];
|
844 | };
|
845 | var getDuration = function (distance, deceleration) {
|
846 | var duration = Math.sqrt(distance / deceleration * 2);
|
847 |
|
848 | return duration < 100 ? 0 : duration;
|
849 | };
|
850 | var isCircularable = function (destPos, range, circular) {
|
851 | return circular[1] && destPos > range[1] || circular[0] && destPos < range[0];
|
852 | };
|
853 | var getCirculatedPos = function (pos, range, circular) {
|
854 | var toPos = pos;
|
855 | var min = range[0];
|
856 | var max = range[1];
|
857 | var length = max - min;
|
858 |
|
859 | if (circular[1] && pos > max) {
|
860 |
|
861 | toPos = (toPos - max) % length + min;
|
862 | }
|
863 |
|
864 | if (circular[0] && pos < min) {
|
865 |
|
866 | toPos = (toPos - min) % length + max;
|
867 | }
|
868 |
|
869 | return toPos;
|
870 | };
|
871 |
|
872 | var AxisManager =
|
873 |
|
874 | function () {
|
875 | function AxisManager(_axis) {
|
876 | var _this = this;
|
877 |
|
878 | this._axis = _axis;
|
879 |
|
880 | this._complementOptions();
|
881 |
|
882 | this._pos = Object.keys(this._axis).reduce(function (pos, v) {
|
883 | pos[v] = _this._axis[v].startPos;
|
884 | return pos;
|
885 | }, {});
|
886 | }
|
887 |
|
888 | var __proto = AxisManager.prototype;
|
889 |
|
890 | __proto.getDelta = function (depaPos, destPos) {
|
891 | var fullDepaPos = this.get(depaPos);
|
892 | return map(this.get(destPos), function (v, k) {
|
893 | return v - fullDepaPos[k];
|
894 | });
|
895 | };
|
896 |
|
897 | __proto.get = function (axes) {
|
898 | var _this = this;
|
899 |
|
900 | if (axes && Array.isArray(axes)) {
|
901 | return axes.reduce(function (acc, v) {
|
902 | if (v && v in _this._pos) {
|
903 | acc[v] = _this._pos[v];
|
904 | }
|
905 |
|
906 | return acc;
|
907 | }, {});
|
908 | } else {
|
909 | return __assign(__assign({}, this._pos), axes || {});
|
910 | }
|
911 | };
|
912 |
|
913 | __proto.moveTo = function (pos, depaPos) {
|
914 | if (depaPos === void 0) {
|
915 | depaPos = this._pos;
|
916 | }
|
917 |
|
918 | var delta = map(this._pos, function (v, key) {
|
919 | return key in pos && key in depaPos ? pos[key] - depaPos[key] : 0;
|
920 | });
|
921 | this.set(this.map(pos, function (v, opt) {
|
922 | return opt ? getCirculatedPos(v, opt.range, opt.circular) : 0;
|
923 | }));
|
924 | return {
|
925 | pos: __assign({}, this._pos),
|
926 | delta: delta
|
927 | };
|
928 | };
|
929 |
|
930 | __proto.set = function (pos) {
|
931 | for (var k in pos) {
|
932 | if (k && k in this._pos) {
|
933 | this._pos[k] = pos[k];
|
934 | }
|
935 | }
|
936 | };
|
937 |
|
938 | __proto.every = function (pos, callback) {
|
939 | var axisOptions = this._axis;
|
940 | return every(pos, function (value, key) {
|
941 | return callback(value, axisOptions[key], key);
|
942 | });
|
943 | };
|
944 |
|
945 | __proto.filter = function (pos, callback) {
|
946 | var axisOptions = this._axis;
|
947 | return filter(pos, function (value, key) {
|
948 | return callback(value, axisOptions[key], key);
|
949 | });
|
950 | };
|
951 |
|
952 | __proto.map = function (pos, callback) {
|
953 | var axisOptions = this._axis;
|
954 | return map(pos, function (value, key) {
|
955 | return callback(value, axisOptions[key], key);
|
956 | });
|
957 | };
|
958 |
|
959 | __proto.isOutside = function (axes) {
|
960 | return !this.every(axes ? this.get(axes) : this._pos, function (v, opt) {
|
961 | return !isOutside(v, opt.range);
|
962 | });
|
963 | };
|
964 |
|
965 | __proto.getAxisOptions = function (key) {
|
966 | return this._axis[key];
|
967 | };
|
968 |
|
969 | __proto.setAxis = function (axis) {
|
970 | var _this = this;
|
971 |
|
972 | Object.keys(axis).forEach(function (key) {
|
973 | if (!_this._axis[key]) {
|
974 | throw new Error("Axis ".concat(key, " does not exist in Axes instance"));
|
975 | }
|
976 |
|
977 | _this._axis[key] = __assign(__assign({}, _this._axis[key]), axis[key]);
|
978 | });
|
979 |
|
980 | this._complementOptions();
|
981 | };
|
982 | |
983 |
|
984 |
|
985 |
|
986 |
|
987 |
|
988 | __proto._complementOptions = function () {
|
989 | var _this = this;
|
990 |
|
991 | Object.keys(this._axis).forEach(function (axis) {
|
992 | _this._axis[axis] = __assign({
|
993 | range: [0, 100],
|
994 | startPos: _this._axis[axis].range[0],
|
995 | bounce: [0, 0],
|
996 | circular: [false, false]
|
997 | }, _this._axis[axis]);
|
998 | ["bounce", "circular"].forEach(function (v) {
|
999 | var axisOption = _this._axis;
|
1000 | var key = axisOption[axis][v];
|
1001 |
|
1002 | if (/string|number|boolean/.test(typeof key)) {
|
1003 | axisOption[axis][v] = [key, key];
|
1004 | }
|
1005 | });
|
1006 | });
|
1007 | };
|
1008 |
|
1009 | return AxisManager;
|
1010 | }();
|
1011 |
|
1012 | var SUPPORT_TOUCH = ("ontouchstart" in win);
|
1013 | var SUPPORT_POINTER = ("PointerEvent" in win);
|
1014 | var SUPPORT_MSPOINTER = ("MSPointerEvent" in win);
|
1015 | var SUPPORT_POINTER_EVENTS = SUPPORT_POINTER || SUPPORT_MSPOINTER;
|
1016 | var isValidKey = function (event, inputKey) {
|
1017 | if (!inputKey || inputKey.indexOf(ANY) > -1 || inputKey.indexOf(NONE) > -1 && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey || inputKey.indexOf(SHIFT) > -1 && event.shiftKey || inputKey.indexOf(CTRL) > -1 && event.ctrlKey || inputKey.indexOf(ALT) > -1 && event.altKey || inputKey.indexOf(META) > -1 && event.metaKey) {
|
1018 | return true;
|
1019 | }
|
1020 |
|
1021 | return false;
|
1022 | };
|
1023 |
|
1024 | var EventInput =
|
1025 |
|
1026 | function () {
|
1027 | function EventInput() {
|
1028 | var _this = this;
|
1029 |
|
1030 | this._stopContextMenu = function (event) {
|
1031 | event.preventDefault();
|
1032 | win.removeEventListener("contextmenu", _this._stopContextMenu);
|
1033 | };
|
1034 | }
|
1035 |
|
1036 | var __proto = EventInput.prototype;
|
1037 |
|
1038 | __proto.extendEvent = function (event) {
|
1039 | var _a;
|
1040 |
|
1041 | var prevEvent = this.prevEvent;
|
1042 |
|
1043 | var center = this._getCenter(event);
|
1044 |
|
1045 | var movement = prevEvent ? this._getMovement(event) : {
|
1046 | x: 0,
|
1047 | y: 0
|
1048 | };
|
1049 | var scale = prevEvent ? this._getScale(event) : 1;
|
1050 | var angle = prevEvent ? getAngle(center.x - prevEvent.center.x, center.y - prevEvent.center.y) : 0;
|
1051 | var deltaX = prevEvent ? prevEvent.deltaX + movement.x : movement.x;
|
1052 | var deltaY = prevEvent ? prevEvent.deltaY + movement.y : movement.y;
|
1053 | var offsetX = movement.x;
|
1054 | var offsetY = movement.y;
|
1055 | var latestInterval = this._latestInterval;
|
1056 | var timeStamp = Date.now();
|
1057 | var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
|
1058 | var velocityX = prevEvent ? prevEvent.velocityX : 0;
|
1059 | var velocityY = prevEvent ? prevEvent.velocityY : 0;
|
1060 |
|
1061 | if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
|
1062 | if (latestInterval) {
|
1063 | _a = [(deltaX - latestInterval.deltaX) / deltaTime, (deltaY - latestInterval.deltaY) / deltaTime], velocityX = _a[0], velocityY = _a[1];
|
1064 | }
|
1065 |
|
1066 | this._latestInterval = {
|
1067 | timestamp: timeStamp,
|
1068 | deltaX: deltaX,
|
1069 | deltaY: deltaY
|
1070 | };
|
1071 | }
|
1072 |
|
1073 | return {
|
1074 | srcEvent: event,
|
1075 | scale: scale,
|
1076 | angle: angle,
|
1077 | center: center,
|
1078 | deltaX: deltaX,
|
1079 | deltaY: deltaY,
|
1080 | offsetX: offsetX,
|
1081 | offsetY: offsetY,
|
1082 | velocityX: velocityX,
|
1083 | velocityY: velocityY,
|
1084 | preventSystemEvent: true
|
1085 | };
|
1086 | };
|
1087 |
|
1088 | __proto._getDistance = function (start, end) {
|
1089 | var x = end.clientX - start.clientX;
|
1090 | var y = end.clientY - start.clientY;
|
1091 | return Math.sqrt(x * x + y * y);
|
1092 | };
|
1093 |
|
1094 | __proto._getButton = function (event) {
|
1095 | var buttonCodeMap = {
|
1096 | 1: MOUSE_LEFT,
|
1097 | 2: MOUSE_RIGHT,
|
1098 | 4: MOUSE_MIDDLE
|
1099 | };
|
1100 | var button = this._isTouchEvent(event) ? MOUSE_LEFT : buttonCodeMap[event.buttons];
|
1101 | return button ? button : null;
|
1102 | };
|
1103 |
|
1104 | __proto._isTouchEvent = function (event) {
|
1105 | return event.type && event.type.indexOf("touch") > -1;
|
1106 | };
|
1107 |
|
1108 | __proto._isValidButton = function (button, inputButton) {
|
1109 | return inputButton.indexOf(button) > -1;
|
1110 | };
|
1111 |
|
1112 | __proto._isValidEvent = function (event, inputKey, inputButton) {
|
1113 | return (!inputKey || isValidKey(event, inputKey)) && (!inputButton || this._isValidButton(this._getButton(event), inputButton));
|
1114 | };
|
1115 |
|
1116 | __proto._preventMouseButton = function (event, button) {
|
1117 | if (button === MOUSE_RIGHT) {
|
1118 | win.addEventListener("contextmenu", this._stopContextMenu);
|
1119 | } else if (button === MOUSE_MIDDLE) {
|
1120 | event.preventDefault();
|
1121 | }
|
1122 | };
|
1123 |
|
1124 | return EventInput;
|
1125 | }();
|
1126 |
|
1127 | var MouseEventInput =
|
1128 |
|
1129 | function (_super) {
|
1130 | __extends(MouseEventInput, _super);
|
1131 |
|
1132 | function MouseEventInput() {
|
1133 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
1134 |
|
1135 | _this.start = ["mousedown"];
|
1136 | _this.move = ["mousemove"];
|
1137 | _this.end = ["mouseup"];
|
1138 | return _this;
|
1139 | }
|
1140 |
|
1141 | var __proto = MouseEventInput.prototype;
|
1142 |
|
1143 | __proto.onEventStart = function (event, inputKey, inputButton) {
|
1144 | var button = this._getButton(event);
|
1145 |
|
1146 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1147 | return null;
|
1148 | }
|
1149 |
|
1150 | this._preventMouseButton(event, button);
|
1151 |
|
1152 | return this.extendEvent(event);
|
1153 | };
|
1154 |
|
1155 | __proto.onEventMove = function (event, inputKey, inputButton) {
|
1156 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1157 | return null;
|
1158 | }
|
1159 |
|
1160 | return this.extendEvent(event);
|
1161 | };
|
1162 |
|
1163 | __proto.onEventEnd = function () {
|
1164 | return;
|
1165 | };
|
1166 |
|
1167 | __proto.onRelease = function () {
|
1168 | this.prevEvent = null;
|
1169 | return;
|
1170 | };
|
1171 |
|
1172 | __proto.getTouches = function (event, inputButton) {
|
1173 | if (inputButton) {
|
1174 | var buttonCodeMap = {
|
1175 | 1: MOUSE_LEFT,
|
1176 | 2: MOUSE_MIDDLE,
|
1177 | 3: MOUSE_RIGHT
|
1178 | };
|
1179 | return this._isValidButton(buttonCodeMap[event.which], inputButton) && this.end.indexOf(event.type) === -1 ? 1 : 0;
|
1180 | }
|
1181 |
|
1182 | return 0;
|
1183 | };
|
1184 |
|
1185 | __proto._getScale = function () {
|
1186 | return 1;
|
1187 | };
|
1188 |
|
1189 | __proto._getCenter = function (event) {
|
1190 | return {
|
1191 | x: event.clientX,
|
1192 | y: event.clientY
|
1193 | };
|
1194 | };
|
1195 |
|
1196 | __proto._getMovement = function (event) {
|
1197 | var prev = this.prevEvent.srcEvent;
|
1198 | return {
|
1199 | x: event.clientX - prev.clientX,
|
1200 | y: event.clientY - prev.clientY
|
1201 | };
|
1202 | };
|
1203 |
|
1204 | return MouseEventInput;
|
1205 | }(EventInput);
|
1206 |
|
1207 | var TouchEventInput =
|
1208 |
|
1209 | function (_super) {
|
1210 | __extends(TouchEventInput, _super);
|
1211 |
|
1212 | function TouchEventInput() {
|
1213 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
1214 |
|
1215 | _this.start = ["touchstart"];
|
1216 | _this.move = ["touchmove"];
|
1217 | _this.end = ["touchend", "touchcancel"];
|
1218 | return _this;
|
1219 | }
|
1220 |
|
1221 | var __proto = TouchEventInput.prototype;
|
1222 |
|
1223 | __proto.onEventStart = function (event, inputKey) {
|
1224 | this._baseTouches = event.touches;
|
1225 |
|
1226 | if (!this._isValidEvent(event, inputKey)) {
|
1227 | return null;
|
1228 | }
|
1229 |
|
1230 | return this.extendEvent(event);
|
1231 | };
|
1232 |
|
1233 | __proto.onEventMove = function (event, inputKey) {
|
1234 | if (!this._isValidEvent(event, inputKey)) {
|
1235 | return null;
|
1236 | }
|
1237 |
|
1238 | return this.extendEvent(event);
|
1239 | };
|
1240 |
|
1241 | __proto.onEventEnd = function (event) {
|
1242 | this._baseTouches = event.touches;
|
1243 | return;
|
1244 | };
|
1245 |
|
1246 | __proto.onRelease = function () {
|
1247 | this.prevEvent = null;
|
1248 | this._baseTouches = null;
|
1249 | return;
|
1250 | };
|
1251 |
|
1252 | __proto.getTouches = function (event) {
|
1253 | return event.touches.length;
|
1254 | };
|
1255 |
|
1256 | __proto._getScale = function (event) {
|
1257 | if (event.touches.length !== 2 || this._baseTouches.length < 2) {
|
1258 | return null;
|
1259 | }
|
1260 |
|
1261 | return this._getDistance(event.touches[0], event.touches[1]) / this._getDistance(this._baseTouches[0], this._baseTouches[1]);
|
1262 | };
|
1263 |
|
1264 | __proto._getCenter = function (event) {
|
1265 | return {
|
1266 | x: event.touches[0].clientX,
|
1267 | y: event.touches[0].clientY
|
1268 | };
|
1269 | };
|
1270 |
|
1271 | __proto._getMovement = function (event) {
|
1272 | var prev = this.prevEvent.srcEvent;
|
1273 |
|
1274 | if (event.touches[0].identifier !== prev.touches[0].identifier) {
|
1275 | return {
|
1276 | x: 0,
|
1277 | y: 0
|
1278 | };
|
1279 | }
|
1280 |
|
1281 | return {
|
1282 | x: event.touches[0].clientX - prev.touches[0].clientX,
|
1283 | y: event.touches[0].clientY - prev.touches[0].clientY
|
1284 | };
|
1285 | };
|
1286 |
|
1287 | return TouchEventInput;
|
1288 | }(EventInput);
|
1289 |
|
1290 | var PointerEventInput =
|
1291 |
|
1292 | function (_super) {
|
1293 | __extends(PointerEventInput, _super);
|
1294 |
|
1295 | function PointerEventInput() {
|
1296 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
1297 |
|
1298 | _this.start = SUPPORT_POINTER ? ["pointerdown"] : ["MSPointerDown"];
|
1299 | _this.move = SUPPORT_POINTER ? ["pointermove"] : ["MSPointerMove"];
|
1300 | _this.end = SUPPORT_POINTER ? ["pointerup", "pointercancel"] : ["MSPointerUp", "MSPointerCancel"];
|
1301 |
|
1302 | _this._firstInputs = [];
|
1303 | _this._recentInputs = [];
|
1304 | return _this;
|
1305 | }
|
1306 |
|
1307 | var __proto = PointerEventInput.prototype;
|
1308 |
|
1309 | __proto.onEventStart = function (event, inputKey, inputButton) {
|
1310 | var button = this._getButton(event);
|
1311 |
|
1312 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1313 | return null;
|
1314 | }
|
1315 |
|
1316 | this._preventMouseButton(event, button);
|
1317 |
|
1318 | this._updatePointerEvent(event);
|
1319 |
|
1320 | return this.extendEvent(event);
|
1321 | };
|
1322 |
|
1323 | __proto.onEventMove = function (event, inputKey, inputButton) {
|
1324 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1325 | return null;
|
1326 | }
|
1327 |
|
1328 | this._updatePointerEvent(event);
|
1329 |
|
1330 | return this.extendEvent(event);
|
1331 | };
|
1332 |
|
1333 | __proto.onEventEnd = function (event) {
|
1334 | this._removePointerEvent(event);
|
1335 | };
|
1336 |
|
1337 | __proto.onRelease = function () {
|
1338 | this.prevEvent = null;
|
1339 | this._firstInputs = [];
|
1340 | this._recentInputs = [];
|
1341 | return;
|
1342 | };
|
1343 |
|
1344 | __proto.getTouches = function () {
|
1345 | return this._recentInputs.length;
|
1346 | };
|
1347 |
|
1348 | __proto._getScale = function () {
|
1349 | if (this._recentInputs.length !== 2) {
|
1350 | return null;
|
1351 | }
|
1352 |
|
1353 | return this._getDistance(this._recentInputs[0], this._recentInputs[1]) / this._getDistance(this._firstInputs[0], this._firstInputs[1]);
|
1354 | };
|
1355 |
|
1356 | __proto._getCenter = function (event) {
|
1357 | return {
|
1358 | x: event.clientX,
|
1359 | y: event.clientY
|
1360 | };
|
1361 | };
|
1362 |
|
1363 | __proto._getMovement = function (event) {
|
1364 | var prev = this.prevEvent.srcEvent;
|
1365 |
|
1366 | if (event.pointerId !== prev.pointerId) {
|
1367 | return {
|
1368 | x: 0,
|
1369 | y: 0
|
1370 | };
|
1371 | }
|
1372 |
|
1373 | return {
|
1374 | x: event.clientX - prev.clientX,
|
1375 | y: event.clientY - prev.clientY
|
1376 | };
|
1377 | };
|
1378 |
|
1379 | __proto._updatePointerEvent = function (event) {
|
1380 | var _this = this;
|
1381 |
|
1382 | var addFlag = false;
|
1383 |
|
1384 | this._recentInputs.forEach(function (e, i) {
|
1385 | if (e.pointerId === event.pointerId) {
|
1386 | addFlag = true;
|
1387 | _this._recentInputs[i] = event;
|
1388 | }
|
1389 | });
|
1390 |
|
1391 | if (!addFlag) {
|
1392 | this._firstInputs.push(event);
|
1393 |
|
1394 | this._recentInputs.push(event);
|
1395 | }
|
1396 | };
|
1397 |
|
1398 | __proto._removePointerEvent = function (event) {
|
1399 | this._firstInputs = this._firstInputs.filter(function (x) {
|
1400 | return x.pointerId !== event.pointerId;
|
1401 | });
|
1402 | this._recentInputs = this._recentInputs.filter(function (x) {
|
1403 | return x.pointerId !== event.pointerId;
|
1404 | });
|
1405 | };
|
1406 |
|
1407 | return PointerEventInput;
|
1408 | }(EventInput);
|
1409 |
|
1410 | var TouchMouseEventInput =
|
1411 |
|
1412 | function (_super) {
|
1413 | __extends(TouchMouseEventInput, _super);
|
1414 |
|
1415 | function TouchMouseEventInput() {
|
1416 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
1417 |
|
1418 | _this.start = ["mousedown", "touchstart"];
|
1419 | _this.move = ["mousemove", "touchmove"];
|
1420 | _this.end = ["mouseup", "touchend", "touchcancel"];
|
1421 | return _this;
|
1422 | }
|
1423 |
|
1424 | var __proto = TouchMouseEventInput.prototype;
|
1425 |
|
1426 | __proto.onEventStart = function (event, inputKey, inputButton) {
|
1427 | var button = this._getButton(event);
|
1428 |
|
1429 | if (this._isTouchEvent(event)) {
|
1430 | this._baseTouches = event.touches;
|
1431 | }
|
1432 |
|
1433 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1434 | return null;
|
1435 | }
|
1436 |
|
1437 | this._preventMouseButton(event, button);
|
1438 |
|
1439 | return this.extendEvent(event);
|
1440 | };
|
1441 |
|
1442 | __proto.onEventMove = function (event, inputKey, inputButton) {
|
1443 | if (!this._isValidEvent(event, inputKey, inputButton)) {
|
1444 | return null;
|
1445 | }
|
1446 |
|
1447 | return this.extendEvent(event);
|
1448 | };
|
1449 |
|
1450 | __proto.onEventEnd = function (event) {
|
1451 | if (this._isTouchEvent(event)) {
|
1452 | this._baseTouches = event.touches;
|
1453 | }
|
1454 |
|
1455 | return;
|
1456 | };
|
1457 |
|
1458 | __proto.onRelease = function () {
|
1459 | this.prevEvent = null;
|
1460 | this._baseTouches = null;
|
1461 | return;
|
1462 | };
|
1463 |
|
1464 | __proto.getTouches = function (event) {
|
1465 | return this._isTouchEvent(event) ? event.touches.length : 0;
|
1466 | };
|
1467 |
|
1468 | __proto._getScale = function (event) {
|
1469 | if (this._isTouchEvent(event)) {
|
1470 | if (event.touches.length !== 2 || this._baseTouches.length < 2) {
|
1471 | return 1;
|
1472 | }
|
1473 |
|
1474 | return this._getDistance(event.touches[0], event.touches[1]) / this._getDistance(this._baseTouches[0], this._baseTouches[1]);
|
1475 | }
|
1476 |
|
1477 | return this.prevEvent.scale;
|
1478 | };
|
1479 |
|
1480 | __proto._getCenter = function (event) {
|
1481 | if (this._isTouchEvent(event)) {
|
1482 | return {
|
1483 | x: event.touches[0].clientX,
|
1484 | y: event.touches[0].clientY
|
1485 | };
|
1486 | }
|
1487 |
|
1488 | return {
|
1489 | x: event.clientX,
|
1490 | y: event.clientY
|
1491 | };
|
1492 | };
|
1493 |
|
1494 | __proto._getMovement = function (event) {
|
1495 | var _this = this;
|
1496 |
|
1497 | var prev = this.prevEvent.srcEvent;
|
1498 |
|
1499 | var _a = [event, prev].map(function (e) {
|
1500 | if (_this._isTouchEvent(e)) {
|
1501 | return {
|
1502 | id: e.touches[0].identifier,
|
1503 | x: e.touches[0].clientX,
|
1504 | y: e.touches[0].clientY
|
1505 | };
|
1506 | }
|
1507 |
|
1508 | return {
|
1509 | id: null,
|
1510 | x: e.clientX,
|
1511 | y: e.clientY
|
1512 | };
|
1513 | }),
|
1514 | nextSpot = _a[0],
|
1515 | prevSpot = _a[1];
|
1516 |
|
1517 | return nextSpot.id === prevSpot.id ? {
|
1518 | x: nextSpot.x - prevSpot.x,
|
1519 | y: nextSpot.y - prevSpot.y
|
1520 | } : {
|
1521 | x: 0,
|
1522 | y: 0
|
1523 | };
|
1524 | };
|
1525 |
|
1526 | return TouchMouseEventInput;
|
1527 | }(EventInput);
|
1528 |
|
1529 | var toAxis = function (source, offset) {
|
1530 | return offset.reduce(function (acc, v, i) {
|
1531 | if (source[i]) {
|
1532 | acc[source[i]] = v;
|
1533 | }
|
1534 |
|
1535 | return acc;
|
1536 | }, {});
|
1537 | };
|
1538 | var convertInputType = function (inputType) {
|
1539 | if (inputType === void 0) {
|
1540 | inputType = [];
|
1541 | }
|
1542 |
|
1543 | var hasTouch = false;
|
1544 | var hasMouse = false;
|
1545 | var hasPointer = false;
|
1546 | inputType.forEach(function (v) {
|
1547 | switch (v) {
|
1548 | case "mouse":
|
1549 | hasMouse = true;
|
1550 | break;
|
1551 |
|
1552 | case "touch":
|
1553 | hasTouch = SUPPORT_TOUCH;
|
1554 | break;
|
1555 |
|
1556 | case "pointer":
|
1557 | hasPointer = SUPPORT_POINTER_EVENTS;
|
1558 |
|
1559 | }
|
1560 | });
|
1561 |
|
1562 | if (hasPointer) {
|
1563 | return new PointerEventInput();
|
1564 | } else if (hasTouch && hasMouse) {
|
1565 | return new TouchMouseEventInput();
|
1566 | } else if (hasTouch) {
|
1567 | return new TouchEventInput();
|
1568 | } else if (hasMouse) {
|
1569 | return new MouseEventInput();
|
1570 | }
|
1571 |
|
1572 | return null;
|
1573 | };
|
1574 | function getAddEventOptions(eventName) {
|
1575 |
|
1576 |
|
1577 | return eventName.indexOf("touch") > -1 ? {
|
1578 | passive: false
|
1579 | } : false;
|
1580 | }
|
1581 |
|
1582 | var InputObserver =
|
1583 |
|
1584 | function () {
|
1585 | function InputObserver(_a) {
|
1586 | var options = _a.options,
|
1587 | interruptManager = _a.interruptManager,
|
1588 | eventManager = _a.eventManager,
|
1589 | axisManager = _a.axisManager,
|
1590 | animationManager = _a.animationManager;
|
1591 | this._isOutside = false;
|
1592 | this._moveDistance = null;
|
1593 | this._isStopped = false;
|
1594 | this.options = options;
|
1595 | this._interruptManager = interruptManager;
|
1596 | this._eventManager = eventManager;
|
1597 | this._axisManager = axisManager;
|
1598 | this._animationManager = animationManager;
|
1599 | }
|
1600 |
|
1601 | var __proto = InputObserver.prototype;
|
1602 |
|
1603 | __proto.get = function (input) {
|
1604 | return this._axisManager.get(input.axes);
|
1605 | };
|
1606 |
|
1607 | __proto.hold = function (input, event) {
|
1608 | if (this._interruptManager.isInterrupted() || !input.axes.length) {
|
1609 | return;
|
1610 | }
|
1611 |
|
1612 | var changeOption = {
|
1613 | input: input,
|
1614 | event: event
|
1615 | };
|
1616 | this._isStopped = false;
|
1617 |
|
1618 | this._interruptManager.setInterrupt(true);
|
1619 |
|
1620 | this._animationManager.stopAnimation(changeOption);
|
1621 |
|
1622 | if (!this._moveDistance) {
|
1623 | this._eventManager.hold(this._axisManager.get(), changeOption);
|
1624 | }
|
1625 |
|
1626 | this._isOutside = this._axisManager.isOutside(input.axes);
|
1627 | this._moveDistance = this._axisManager.get(input.axes);
|
1628 | };
|
1629 |
|
1630 | __proto.change = function (input, event, offset, useAnimation) {
|
1631 | if (this._isStopped || !this._interruptManager.isInterrupting() || this._axisManager.every(offset, function (v) {
|
1632 | return v === 0;
|
1633 | })) {
|
1634 | return;
|
1635 | }
|
1636 |
|
1637 | var nativeEvent = event.srcEvent ? event.srcEvent : event;
|
1638 |
|
1639 | if (nativeEvent.__childrenAxesAlreadyChanged) {
|
1640 | return;
|
1641 | }
|
1642 |
|
1643 | var depaPos = this._moveDistance || this._axisManager.get(input.axes);
|
1644 |
|
1645 | var destPos;
|
1646 |
|
1647 | destPos = map(depaPos, function (v, k) {
|
1648 | return v + (offset[k] || 0);
|
1649 | });
|
1650 |
|
1651 | if (this._moveDistance) {
|
1652 | this._moveDistance = this._axisManager.map(destPos, function (v, _a) {
|
1653 | var circular = _a.circular,
|
1654 | range = _a.range;
|
1655 | return circular && (circular[0] || circular[1]) ? getCirculatedPos(v, range, circular) : v;
|
1656 | });
|
1657 | }
|
1658 |
|
1659 |
|
1660 | if (this._isOutside && this._axisManager.every(depaPos, function (v, opt) {
|
1661 | return !isOutside(v, opt.range);
|
1662 | })) {
|
1663 | this._isOutside = false;
|
1664 | }
|
1665 |
|
1666 | depaPos = this._atOutside(depaPos);
|
1667 | destPos = this._atOutside(destPos);
|
1668 |
|
1669 | if (!this.options.nested || !this._isEndofAxis(offset, depaPos, destPos)) {
|
1670 | nativeEvent.__childrenAxesAlreadyChanged = true;
|
1671 | }
|
1672 |
|
1673 | var changeOption = {
|
1674 | input: input,
|
1675 | event: event
|
1676 | };
|
1677 |
|
1678 | if (useAnimation) {
|
1679 | var duration = this._animationManager.getDuration(destPos, depaPos);
|
1680 |
|
1681 | this._animationManager.animateTo(destPos, duration, changeOption);
|
1682 | } else {
|
1683 | var isCanceled = !this._eventManager.triggerChange(destPos, depaPos, changeOption, true);
|
1684 |
|
1685 | if (isCanceled) {
|
1686 | this._isStopped = true;
|
1687 | this._moveDistance = null;
|
1688 |
|
1689 | this._animationManager.finish(false);
|
1690 | }
|
1691 | }
|
1692 | };
|
1693 |
|
1694 | __proto.release = function (input, event, velocity, inputDuration) {
|
1695 | if (this._isStopped || !this._interruptManager.isInterrupting() || !this._moveDistance) {
|
1696 | return;
|
1697 | }
|
1698 |
|
1699 | var nativeEvent = event.srcEvent ? event.srcEvent : event;
|
1700 |
|
1701 | if (nativeEvent.__childrenAxesAlreadyReleased) {
|
1702 | velocity = velocity.map(function () {
|
1703 | return 0;
|
1704 | });
|
1705 | }
|
1706 |
|
1707 | var pos = this._axisManager.get(input.axes);
|
1708 |
|
1709 | var depaPos = this._axisManager.get();
|
1710 |
|
1711 | var displacement = this._animationManager.getDisplacement(velocity);
|
1712 |
|
1713 | var offset = toAxis(input.axes, displacement);
|
1714 |
|
1715 | var destPos = this._axisManager.get(this._axisManager.map(offset, function (v, opt, k) {
|
1716 | if (opt.circular && (opt.circular[0] || opt.circular[1])) {
|
1717 | return pos[k] + v;
|
1718 | } else {
|
1719 | return getInsidePosition(pos[k] + v, opt.range, opt.circular, opt.bounce);
|
1720 | }
|
1721 | }));
|
1722 |
|
1723 | nativeEvent.__childrenAxesAlreadyReleased = true;
|
1724 |
|
1725 | var duration = this._animationManager.getDuration(destPos, pos, inputDuration);
|
1726 |
|
1727 | if (duration === 0) {
|
1728 | destPos = __assign({}, depaPos);
|
1729 | }
|
1730 |
|
1731 |
|
1732 | var param = {
|
1733 | depaPos: depaPos,
|
1734 | destPos: destPos,
|
1735 | duration: duration,
|
1736 | delta: this._axisManager.getDelta(depaPos, destPos),
|
1737 | inputEvent: event,
|
1738 | input: input,
|
1739 | isTrusted: true
|
1740 | };
|
1741 |
|
1742 | this._eventManager.triggerRelease(param);
|
1743 |
|
1744 | this._moveDistance = null;
|
1745 |
|
1746 | var userWish = this._animationManager.getUserControl(param);
|
1747 |
|
1748 | var isEqual = equal(userWish.destPos, depaPos);
|
1749 | var changeOption = {
|
1750 | input: input,
|
1751 | event: event
|
1752 | };
|
1753 |
|
1754 | if (isEqual || userWish.duration === 0) {
|
1755 | if (!isEqual) {
|
1756 | this._eventManager.triggerChange(userWish.destPos, depaPos, changeOption, true);
|
1757 | }
|
1758 |
|
1759 | this._interruptManager.setInterrupt(false);
|
1760 |
|
1761 | if (this._axisManager.isOutside()) {
|
1762 | this._animationManager.restore(changeOption);
|
1763 | } else {
|
1764 | this._eventManager.triggerFinish(true);
|
1765 | }
|
1766 | } else {
|
1767 | this._animationManager.animateTo(userWish.destPos, userWish.duration, changeOption);
|
1768 | }
|
1769 | };
|
1770 |
|
1771 |
|
1772 | __proto._atOutside = function (pos) {
|
1773 | var _this = this;
|
1774 |
|
1775 | if (this._isOutside) {
|
1776 | return this._axisManager.map(pos, function (v, opt) {
|
1777 | var tn = opt.range[0] - opt.bounce[0];
|
1778 | var tx = opt.range[1] + opt.bounce[1];
|
1779 | return v > tx ? tx : v < tn ? tn : v;
|
1780 | });
|
1781 | } else {
|
1782 | return this._axisManager.map(pos, function (v, opt) {
|
1783 | var min = opt.range[0];
|
1784 | var max = opt.range[1];
|
1785 | var out = opt.bounce;
|
1786 | var circular = opt.circular;
|
1787 |
|
1788 | if (circular[0] && v < min || circular[1] && v > max) {
|
1789 | return v;
|
1790 | } else if (v < min) {
|
1791 |
|
1792 | return min - _this._animationManager.interpolate(min - v, out[0]);
|
1793 | } else if (v > max) {
|
1794 |
|
1795 | return max + _this._animationManager.interpolate(v - max, out[1]);
|
1796 | }
|
1797 |
|
1798 | return v;
|
1799 | });
|
1800 | }
|
1801 | };
|
1802 |
|
1803 | __proto._isEndofAxis = function (offset, depaPos, destPos) {
|
1804 | return this._axisManager.every(depaPos, function (value, option, key) {
|
1805 | return offset[key] === 0 || depaPos[key] === destPos[key] && isEndofBounce(value, option.range, option.bounce, option.circular);
|
1806 | });
|
1807 | };
|
1808 |
|
1809 | return InputObserver;
|
1810 | }();
|
1811 |
|
1812 | var clamp = function (value, min, max) {
|
1813 | return Math.max(Math.min(value, max), min);
|
1814 | };
|
1815 |
|
1816 | var AnimationManager =
|
1817 |
|
1818 | function () {
|
1819 | function AnimationManager(_a) {
|
1820 | var options = _a.options,
|
1821 | interruptManager = _a.interruptManager,
|
1822 | eventManager = _a.eventManager,
|
1823 | axisManager = _a.axisManager;
|
1824 | this._options = options;
|
1825 | this.interruptManager = interruptManager;
|
1826 | this.eventManager = eventManager;
|
1827 | this.axisManager = axisManager;
|
1828 | this.animationEnd = this.animationEnd.bind(this);
|
1829 | }
|
1830 |
|
1831 | var __proto = AnimationManager.prototype;
|
1832 |
|
1833 | __proto.getDuration = function (depaPos, destPos, wishDuration) {
|
1834 | var _this = this;
|
1835 |
|
1836 | var duration;
|
1837 |
|
1838 | if (typeof wishDuration !== "undefined") {
|
1839 | duration = wishDuration;
|
1840 | } else {
|
1841 | var durations_1 = map(destPos, function (v, k) {
|
1842 | return getDuration(Math.abs(v - depaPos[k]), _this._options.deceleration);
|
1843 | });
|
1844 | duration = Object.keys(durations_1).reduce(function (max, v) {
|
1845 | return Math.max(max, durations_1[v]);
|
1846 | }, -Infinity);
|
1847 | }
|
1848 |
|
1849 | return clamp(duration, this._options.minimumDuration, this._options.maximumDuration);
|
1850 | };
|
1851 |
|
1852 | __proto.getDisplacement = function (velocity) {
|
1853 | var totalVelocity = Math.pow(velocity.reduce(function (total, v) {
|
1854 | return total + v * v;
|
1855 | }, 0), 1 / velocity.length);
|
1856 | var duration = Math.abs(totalVelocity / -this._options.deceleration);
|
1857 | return velocity.map(function (v) {
|
1858 | return v / 2 * duration;
|
1859 | });
|
1860 | };
|
1861 |
|
1862 | __proto.stopAnimation = function (option) {
|
1863 | if (this._animateParam) {
|
1864 | var orgPos_1 = this.axisManager.get();
|
1865 | var pos = this.axisManager.map(orgPos_1, function (v, opt) {
|
1866 | return getCirculatedPos(v, opt.range, opt.circular);
|
1867 | });
|
1868 |
|
1869 | if (!every(pos, function (v, k) {
|
1870 | return orgPos_1[k] === v;
|
1871 | })) {
|
1872 | this.eventManager.triggerChange(pos, orgPos_1, option, !!option);
|
1873 | }
|
1874 |
|
1875 | this._animateParam = null;
|
1876 |
|
1877 | if (this._raf) {
|
1878 | cancelAnimationFrame(this._raf);
|
1879 | }
|
1880 |
|
1881 | this._raf = null;
|
1882 | this.eventManager.triggerAnimationEnd(!!(option === null || option === void 0 ? void 0 : option.event));
|
1883 | }
|
1884 | };
|
1885 |
|
1886 | __proto.getEventInfo = function () {
|
1887 | if (this._animateParam && this._animateParam.input && this._animateParam.inputEvent) {
|
1888 | return {
|
1889 | input: this._animateParam.input,
|
1890 | event: this._animateParam.inputEvent
|
1891 | };
|
1892 | } else {
|
1893 | return null;
|
1894 | }
|
1895 | };
|
1896 |
|
1897 | __proto.restore = function (option) {
|
1898 | var pos = this.axisManager.get();
|
1899 | var destPos = this.axisManager.map(pos, function (v, opt) {
|
1900 | return Math.min(opt.range[1], Math.max(opt.range[0], v));
|
1901 | });
|
1902 | this.stopAnimation();
|
1903 | this.animateTo(destPos, this.getDuration(pos, destPos), option);
|
1904 | };
|
1905 |
|
1906 | __proto.animationEnd = function () {
|
1907 | var beforeParam = this.getEventInfo();
|
1908 | this._animateParam = null;
|
1909 |
|
1910 | var circularTargets = this.axisManager.filter(this.axisManager.get(), function (v, opt) {
|
1911 | return isCircularable(v, opt.range, opt.circular);
|
1912 | });
|
1913 |
|
1914 | if (Object.keys(circularTargets).length > 0) {
|
1915 | this.setTo(this.axisManager.map(circularTargets, function (v, opt) {
|
1916 | return getCirculatedPos(v, opt.range, opt.circular);
|
1917 | }));
|
1918 | }
|
1919 |
|
1920 | this.interruptManager.setInterrupt(false);
|
1921 | this.eventManager.triggerAnimationEnd(!!beforeParam);
|
1922 |
|
1923 | if (this.axisManager.isOutside()) {
|
1924 | this.restore(beforeParam);
|
1925 | } else {
|
1926 | this.finish(!!beforeParam);
|
1927 | }
|
1928 | };
|
1929 |
|
1930 | __proto.finish = function (isTrusted) {
|
1931 | this._animateParam = null;
|
1932 | this.interruptManager.setInterrupt(false);
|
1933 | this.eventManager.triggerFinish(isTrusted);
|
1934 | };
|
1935 |
|
1936 | __proto.getUserControl = function (param) {
|
1937 | var userWish = param.setTo();
|
1938 | userWish.destPos = this.axisManager.get(userWish.destPos);
|
1939 | userWish.duration = clamp(userWish.duration, this._options.minimumDuration, this._options.maximumDuration);
|
1940 | return userWish;
|
1941 | };
|
1942 |
|
1943 | __proto.animateTo = function (destPos, duration, option) {
|
1944 | var _this = this;
|
1945 |
|
1946 | this.stopAnimation();
|
1947 |
|
1948 | var param = this._createAnimationParam(destPos, duration, option);
|
1949 |
|
1950 | var depaPos = __assign({}, param.depaPos);
|
1951 |
|
1952 | var retTrigger = this.eventManager.triggerAnimationStart(param);
|
1953 |
|
1954 | var userWish = this.getUserControl(param);
|
1955 |
|
1956 | if (!retTrigger && this.axisManager.every(userWish.destPos, function (v, opt) {
|
1957 | return isCircularable(v, opt.range, opt.circular);
|
1958 | })) {
|
1959 | console.warn("You can't stop the 'animation' event when 'circular' is true.");
|
1960 | }
|
1961 |
|
1962 | if (retTrigger && !equal(userWish.destPos, depaPos)) {
|
1963 | var inputEvent = (option === null || option === void 0 ? void 0 : option.event) || null;
|
1964 |
|
1965 | this._animateLoop({
|
1966 | depaPos: depaPos,
|
1967 | destPos: userWish.destPos,
|
1968 | duration: userWish.duration,
|
1969 | delta: this.axisManager.getDelta(depaPos, userWish.destPos),
|
1970 | isTrusted: !!inputEvent,
|
1971 | inputEvent: inputEvent,
|
1972 | input: (option === null || option === void 0 ? void 0 : option.input) || null
|
1973 | }, function () {
|
1974 | return _this.animationEnd();
|
1975 | });
|
1976 | }
|
1977 | };
|
1978 |
|
1979 | __proto.setTo = function (pos, duration) {
|
1980 | if (duration === void 0) {
|
1981 | duration = 0;
|
1982 | }
|
1983 |
|
1984 | var axes = Object.keys(pos);
|
1985 | var orgPos = this.axisManager.get(axes);
|
1986 |
|
1987 | if (equal(pos, orgPos)) {
|
1988 | return this;
|
1989 | }
|
1990 |
|
1991 | this.interruptManager.setInterrupt(true);
|
1992 | var movedPos = filter(pos, function (v, k) {
|
1993 | return orgPos[k] !== v;
|
1994 | });
|
1995 |
|
1996 | if (!Object.keys(movedPos).length) {
|
1997 | return this;
|
1998 | }
|
1999 |
|
2000 | movedPos = this.axisManager.map(movedPos, function (v, opt) {
|
2001 | var range = opt.range,
|
2002 | circular = opt.circular;
|
2003 |
|
2004 | if (circular && (circular[0] || circular[1])) {
|
2005 | return v;
|
2006 | } else {
|
2007 | return getInsidePosition(v, range, circular);
|
2008 | }
|
2009 | });
|
2010 |
|
2011 | if (equal(movedPos, orgPos)) {
|
2012 | return this;
|
2013 | }
|
2014 |
|
2015 | if (duration > 0) {
|
2016 | this.animateTo(movedPos, duration);
|
2017 | } else {
|
2018 | this.stopAnimation();
|
2019 | this.eventManager.triggerChange(movedPos);
|
2020 | this.finish(false);
|
2021 | }
|
2022 |
|
2023 | return this;
|
2024 | };
|
2025 |
|
2026 | __proto.setBy = function (pos, duration) {
|
2027 | if (duration === void 0) {
|
2028 | duration = 0;
|
2029 | }
|
2030 |
|
2031 | return this.setTo(map(this.axisManager.get(Object.keys(pos)), function (v, k) {
|
2032 | return v + pos[k];
|
2033 | }), duration);
|
2034 | };
|
2035 |
|
2036 | __proto._createAnimationParam = function (pos, duration, option) {
|
2037 | var depaPos = this.axisManager.get();
|
2038 | var destPos = pos;
|
2039 | var inputEvent = (option === null || option === void 0 ? void 0 : option.event) || null;
|
2040 | return {
|
2041 | depaPos: depaPos,
|
2042 | destPos: destPos,
|
2043 | duration: clamp(duration, this._options.minimumDuration, this._options.maximumDuration),
|
2044 | delta: this.axisManager.getDelta(depaPos, destPos),
|
2045 | inputEvent: inputEvent,
|
2046 | input: (option === null || option === void 0 ? void 0 : option.input) || null,
|
2047 | isTrusted: !!inputEvent,
|
2048 | done: this.animationEnd
|
2049 | };
|
2050 | };
|
2051 |
|
2052 | __proto._animateLoop = function (param, complete) {
|
2053 | var _this = this;
|
2054 |
|
2055 | if (param.duration) {
|
2056 | this._animateParam = __assign(__assign({}, param), {
|
2057 | startTime: new Date().getTime()
|
2058 | });
|
2059 | var originalIntendedPos_1 = map(param.destPos, function (v) {
|
2060 | return v;
|
2061 | });
|
2062 |
|
2063 | var state_1 = this._initState(this._animateParam);
|
2064 |
|
2065 | var loop_1 = function () {
|
2066 | _this._raf = null;
|
2067 | var animateParam = _this._animateParam;
|
2068 |
|
2069 | var nextState = _this._getNextState(state_1);
|
2070 |
|
2071 | var isCanceled = !_this.eventManager.triggerChange(nextState.pos, state_1.pos);
|
2072 | state_1 = nextState;
|
2073 |
|
2074 | if (nextState.finished) {
|
2075 | animateParam.destPos = _this._getFinalPos(animateParam.destPos, originalIntendedPos_1);
|
2076 |
|
2077 | if (!equal(animateParam.destPos, _this.axisManager.get(Object.keys(animateParam.destPos)))) {
|
2078 | _this.eventManager.triggerChange(animateParam.destPos, nextState.pos);
|
2079 | }
|
2080 |
|
2081 | complete();
|
2082 | return;
|
2083 | } else if (isCanceled) {
|
2084 | _this.finish(false);
|
2085 | } else {
|
2086 | _this._raf = requestAnimationFrame(loop_1);
|
2087 | }
|
2088 | };
|
2089 |
|
2090 | loop_1();
|
2091 | } else {
|
2092 | this.eventManager.triggerChange(param.destPos);
|
2093 | complete();
|
2094 | }
|
2095 | };
|
2096 | |
2097 |
|
2098 |
|
2099 |
|
2100 |
|
2101 |
|
2102 |
|
2103 |
|
2104 |
|
2105 |
|
2106 |
|
2107 |
|
2108 | __proto._getFinalPos = function (destPos, originalIntendedPos) {
|
2109 | var _this = this;
|
2110 |
|
2111 |
|
2112 |
|
2113 | var ERROR_LIMIT = 0.000001;
|
2114 | var finalPos = map(destPos, function (value, key) {
|
2115 | if (value >= originalIntendedPos[key] - ERROR_LIMIT && value <= originalIntendedPos[key] + ERROR_LIMIT) {
|
2116 |
|
2117 | return originalIntendedPos[key];
|
2118 | } else {
|
2119 |
|
2120 | var roundUnit = _this._getRoundUnit(value, key);
|
2121 |
|
2122 | var result = roundNumber(value, roundUnit);
|
2123 | return result;
|
2124 | }
|
2125 | });
|
2126 | return finalPos;
|
2127 | };
|
2128 |
|
2129 | __proto._getRoundUnit = function (val, key) {
|
2130 | var roundUnit = this._options.round;
|
2131 |
|
2132 | var minRoundUnit = null;
|
2133 |
|
2134 |
|
2135 | if (!roundUnit) {
|
2136 |
|
2137 | var options = this.axisManager.getAxisOptions(key);
|
2138 | minRoundUnit = inversePow(Math.max(getDecimalPlace(options.range[0]), getDecimalPlace(options.range[1]), getDecimalPlace(val)));
|
2139 | }
|
2140 |
|
2141 | return minRoundUnit || roundUnit;
|
2142 | };
|
2143 |
|
2144 | return AnimationManager;
|
2145 | }();
|
2146 |
|
2147 | var EasingManager =
|
2148 |
|
2149 | function (_super) {
|
2150 | __extends(EasingManager, _super);
|
2151 |
|
2152 | function EasingManager() {
|
2153 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
2154 |
|
2155 | _this._useDuration = true;
|
2156 | return _this;
|
2157 | }
|
2158 |
|
2159 | var __proto = EasingManager.prototype;
|
2160 |
|
2161 | __proto.interpolate = function (displacement, threshold) {
|
2162 | var initSlope = this._easing(0.00001) / 0.00001;
|
2163 | return this._easing(displacement / (threshold * initSlope)) * threshold;
|
2164 | };
|
2165 |
|
2166 | __proto.updateAnimation = function (options) {
|
2167 | var _a;
|
2168 |
|
2169 | var animateParam = this._animateParam;
|
2170 |
|
2171 | if (!animateParam) {
|
2172 | return;
|
2173 | }
|
2174 |
|
2175 | var diffTime = new Date().getTime() - animateParam.startTime;
|
2176 | var pos = (options === null || options === void 0 ? void 0 : options.destPos) || animateParam.destPos;
|
2177 | var duration = (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : animateParam.duration;
|
2178 |
|
2179 | if ((options === null || options === void 0 ? void 0 : options.restart) || duration <= diffTime) {
|
2180 | this.setTo(pos, duration - diffTime);
|
2181 | return;
|
2182 | }
|
2183 |
|
2184 | if (options === null || options === void 0 ? void 0 : options.destPos) {
|
2185 | var currentPos = this.axisManager.get();
|
2186 |
|
2187 |
|
2188 |
|
2189 |
|
2190 | this._initialEasingPer = this._prevEasingPer;
|
2191 | animateParam.delta = this.axisManager.getDelta(currentPos, pos);
|
2192 | animateParam.destPos = pos;
|
2193 | }
|
2194 |
|
2195 | if (options === null || options === void 0 ? void 0 : options.duration) {
|
2196 | var ratio = (diffTime + this._durationOffset) / animateParam.duration;
|
2197 |
|
2198 |
|
2199 |
|
2200 | this._durationOffset = ratio * duration - diffTime;
|
2201 | animateParam.duration = duration;
|
2202 | }
|
2203 | };
|
2204 |
|
2205 | __proto._initState = function (info) {
|
2206 | this._initialEasingPer = 0;
|
2207 | this._prevEasingPer = 0;
|
2208 | this._durationOffset = 0;
|
2209 | return {
|
2210 | pos: info.depaPos,
|
2211 | easingPer: 0,
|
2212 | finished: false
|
2213 | };
|
2214 | };
|
2215 |
|
2216 | __proto._getNextState = function (prevState) {
|
2217 | var _this = this;
|
2218 |
|
2219 | var animateParam = this._animateParam;
|
2220 | var prevPos = prevState.pos;
|
2221 | var destPos = animateParam.destPos;
|
2222 | var directions = map(prevPos, function (value, key) {
|
2223 | return value <= destPos[key] ? 1 : -1;
|
2224 | });
|
2225 | var diffTime = new Date().getTime() - animateParam.startTime;
|
2226 | var ratio = (diffTime + this._durationOffset) / animateParam.duration;
|
2227 |
|
2228 | var easingPer = this._easing(ratio);
|
2229 |
|
2230 | var toPos = this.axisManager.map(prevPos, function (pos, options, key) {
|
2231 | var nextPos = ratio >= 1 ? destPos[key] : pos + animateParam.delta[key] * (easingPer - _this._prevEasingPer) / (1 - _this._initialEasingPer);
|
2232 |
|
2233 |
|
2234 |
|
2235 | var circulatedPos = getCirculatedPos(nextPos, options.range, options.circular);
|
2236 |
|
2237 | if (nextPos !== circulatedPos) {
|
2238 |
|
2239 | var rangeOffset = directions[key] * (options.range[1] - options.range[0]);
|
2240 | destPos[key] -= rangeOffset;
|
2241 | prevPos[key] -= rangeOffset;
|
2242 | }
|
2243 |
|
2244 | return circulatedPos;
|
2245 | });
|
2246 | this._prevEasingPer = easingPer;
|
2247 | return {
|
2248 | pos: toPos,
|
2249 | easingPer: easingPer,
|
2250 | finished: easingPer >= 1
|
2251 | };
|
2252 | };
|
2253 |
|
2254 | __proto._easing = function (p) {
|
2255 | return p > 1 ? 1 : this._options.easing(p);
|
2256 | };
|
2257 |
|
2258 | return EasingManager;
|
2259 | }(AnimationManager);
|
2260 |
|
2261 |
|
2262 |
|
2263 |
|
2264 |
|
2265 |
|
2266 |
|
2267 |
|
2268 |
|
2269 |
|
2270 |
|
2271 |
|
2272 |
|
2273 |
|
2274 |
|
2275 |
|
2276 |
|
2277 |
|
2278 |
|
2279 |
|
2280 |
|
2281 |
|
2282 |
|
2283 |
|
2284 |
|
2285 |
|
2286 |
|
2287 |
|
2288 |
|
2289 |
|
2290 |
|
2291 |
|
2292 |
|
2293 |
|
2294 |
|
2295 |
|
2296 |
|
2297 |
|
2298 |
|
2299 |
|
2300 |
|
2301 |
|
2302 |
|
2303 |
|
2304 |
|
2305 |
|
2306 |
|
2307 |
|
2308 |
|
2309 |
|
2310 |
|
2311 |
|
2312 |
|
2313 |
|
2314 |
|
2315 |
|
2316 |
|
2317 |
|
2318 |
|
2319 |
|
2320 |
|
2321 |
|
2322 |
|
2323 |
|
2324 |
|
2325 |
|
2326 |
|
2327 |
|
2328 |
|
2329 |
|
2330 |
|
2331 |
|
2332 |
|
2333 |
|
2334 |
|
2335 |
|
2336 |
|
2337 |
|
2338 |
|
2339 |
|
2340 |
|
2341 |
|
2342 |
|
2343 |
|
2344 |
|
2345 |
|
2346 |
|
2347 |
|
2348 |
|
2349 |
|
2350 |
|
2351 |
|
2352 |
|
2353 |
|
2354 |
|
2355 |
|
2356 |
|
2357 |
|
2358 |
|
2359 |
|
2360 |
|
2361 |
|
2362 |
|
2363 |
|
2364 |
|
2365 | var Axes =
|
2366 |
|
2367 | function (_super) {
|
2368 | __extends(Axes, _super);
|
2369 | |
2370 |
|
2371 |
|
2372 |
|
2373 |
|
2374 | function Axes(axis, options, startPos) {
|
2375 | if (axis === void 0) {
|
2376 | axis = {};
|
2377 | }
|
2378 |
|
2379 | if (options === void 0) {
|
2380 | options = {};
|
2381 | }
|
2382 |
|
2383 | if (startPos === void 0) {
|
2384 | startPos = {};
|
2385 | }
|
2386 |
|
2387 | var _this = _super.call(this) || this;
|
2388 |
|
2389 | _this.axis = axis;
|
2390 | _this._inputs = [];
|
2391 | _this.options = __assign({
|
2392 | easing: function (x) {
|
2393 | return 1 - Math.pow(1 - x, 3);
|
2394 | },
|
2395 | interruptable: true,
|
2396 | maximumDuration: Infinity,
|
2397 | minimumDuration: 0,
|
2398 | deceleration: 0.0006,
|
2399 | round: null,
|
2400 | nested: false
|
2401 | }, options);
|
2402 | Object.keys(startPos).forEach(function (key) {
|
2403 | _this.axis[key].startPos = startPos[key];
|
2404 | });
|
2405 | _this.interruptManager = new InterruptManager(_this.options);
|
2406 | _this.axisManager = new AxisManager(_this.axis);
|
2407 | _this.eventManager = new EventManager(_this);
|
2408 | _this.animationManager = new EasingManager(_this);
|
2409 | _this.inputObserver = new InputObserver(_this);
|
2410 |
|
2411 | _this.eventManager.setAnimationManager(_this.animationManager);
|
2412 |
|
2413 | _this.eventManager.triggerChange(_this.axisManager.get());
|
2414 |
|
2415 | return _this;
|
2416 | }
|
2417 | |
2418 |
|
2419 |
|
2420 |
|
2421 |
|
2422 |
|
2423 |
|
2424 |
|
2425 |
|
2426 |
|
2427 |
|
2428 |
|
2429 |
|
2430 |
|
2431 |
|
2432 |
|
2433 |
|
2434 |
|
2435 |
|
2436 |
|
2437 |
|
2438 |
|
2439 |
|
2440 |
|
2441 |
|
2442 |
|
2443 |
|
2444 | var __proto = Axes.prototype;
|
2445 |
|
2446 | __proto.connect = function (axes, inputType) {
|
2447 | var mapped;
|
2448 |
|
2449 | if (typeof axes === "string") {
|
2450 | mapped = axes.split(" ");
|
2451 | } else {
|
2452 | mapped = axes.concat();
|
2453 | }
|
2454 |
|
2455 |
|
2456 | if (~this._inputs.indexOf(inputType)) {
|
2457 | this.disconnect(inputType);
|
2458 | }
|
2459 |
|
2460 | inputType.mapAxes(mapped);
|
2461 | inputType.connect(this.inputObserver);
|
2462 |
|
2463 | this._inputs.push(inputType);
|
2464 |
|
2465 | return this;
|
2466 | };
|
2467 | |
2468 |
|
2469 |
|
2470 |
|
2471 |
|
2472 |
|
2473 |
|
2474 |
|
2475 |
|
2476 |
|
2477 |
|
2478 |
|
2479 |
|
2480 |
|
2481 |
|
2482 |
|
2483 |
|
2484 |
|
2485 |
|
2486 |
|
2487 |
|
2488 |
|
2489 |
|
2490 |
|
2491 |
|
2492 |
|
2493 |
|
2494 |
|
2495 |
|
2496 |
|
2497 | __proto.disconnect = function (inputType) {
|
2498 | if (inputType) {
|
2499 | var index = this._inputs.indexOf(inputType);
|
2500 |
|
2501 | if (index >= 0) {
|
2502 | this._inputs[index].disconnect();
|
2503 |
|
2504 | this._inputs.splice(index, 1);
|
2505 | }
|
2506 | } else {
|
2507 | this._inputs.forEach(function (v) {
|
2508 | return v.disconnect();
|
2509 | });
|
2510 |
|
2511 | this._inputs = [];
|
2512 | }
|
2513 |
|
2514 | return this;
|
2515 | };
|
2516 | |
2517 |
|
2518 |
|
2519 |
|
2520 |
|
2521 |
|
2522 |
|
2523 |
|
2524 |
|
2525 |
|
2526 |
|
2527 |
|
2528 |
|
2529 |
|
2530 |
|
2531 |
|
2532 |
|
2533 |
|
2534 |
|
2535 |
|
2536 |
|
2537 |
|
2538 |
|
2539 |
|
2540 |
|
2541 | __proto.get = function (axes) {
|
2542 | return this.axisManager.get(axes);
|
2543 | };
|
2544 | |
2545 |
|
2546 |
|
2547 |
|
2548 |
|
2549 |
|
2550 |
|
2551 |
|
2552 |
|
2553 |
|
2554 |
|
2555 |
|
2556 |
|
2557 |
|
2558 |
|
2559 |
|
2560 |
|
2561 |
|
2562 |
|
2563 |
|
2564 |
|
2565 |
|
2566 |
|
2567 |
|
2568 |
|
2569 |
|
2570 |
|
2571 |
|
2572 |
|
2573 |
|
2574 |
|
2575 | __proto.setTo = function (pos, duration) {
|
2576 | if (duration === void 0) {
|
2577 | duration = 0;
|
2578 | }
|
2579 |
|
2580 | this.animationManager.setTo(pos, duration);
|
2581 | return this;
|
2582 | };
|
2583 | |
2584 |
|
2585 |
|
2586 |
|
2587 |
|
2588 |
|
2589 |
|
2590 |
|
2591 |
|
2592 |
|
2593 |
|
2594 |
|
2595 |
|
2596 |
|
2597 |
|
2598 |
|
2599 |
|
2600 |
|
2601 |
|
2602 |
|
2603 |
|
2604 |
|
2605 |
|
2606 |
|
2607 |
|
2608 |
|
2609 |
|
2610 |
|
2611 |
|
2612 |
|
2613 |
|
2614 | __proto.setBy = function (pos, duration) {
|
2615 | if (duration === void 0) {
|
2616 | duration = 0;
|
2617 | }
|
2618 |
|
2619 | this.animationManager.setBy(pos, duration);
|
2620 | return this;
|
2621 | };
|
2622 | |
2623 |
|
2624 |
|
2625 |
|
2626 |
|
2627 |
|
2628 |
|
2629 |
|
2630 |
|
2631 |
|
2632 |
|
2633 |
|
2634 |
|
2635 |
|
2636 |
|
2637 |
|
2638 |
|
2639 |
|
2640 |
|
2641 |
|
2642 |
|
2643 |
|
2644 |
|
2645 |
|
2646 |
|
2647 |
|
2648 |
|
2649 |
|
2650 | __proto.setOptions = function (options) {
|
2651 | this.options = __assign(__assign({}, this.options), options);
|
2652 | return this;
|
2653 | };
|
2654 | |
2655 |
|
2656 |
|
2657 |
|
2658 |
|
2659 |
|
2660 |
|
2661 |
|
2662 |
|
2663 |
|
2664 |
|
2665 |
|
2666 |
|
2667 |
|
2668 |
|
2669 |
|
2670 |
|
2671 |
|
2672 |
|
2673 |
|
2674 |
|
2675 |
|
2676 |
|
2677 |
|
2678 |
|
2679 |
|
2680 |
|
2681 |
|
2682 | __proto.setAxis = function (axis) {
|
2683 | this.axisManager.setAxis(axis);
|
2684 | return this;
|
2685 | };
|
2686 | |
2687 |
|
2688 |
|
2689 |
|
2690 |
|
2691 |
|
2692 |
|
2693 |
|
2694 |
|
2695 |
|
2696 |
|
2697 |
|
2698 |
|
2699 |
|
2700 |
|
2701 |
|
2702 |
|
2703 |
|
2704 |
|
2705 |
|
2706 | __proto.stopAnimation = function () {
|
2707 | this.animationManager.stopAnimation();
|
2708 | this.animationManager.finish(false);
|
2709 | return this;
|
2710 | };
|
2711 | |
2712 |
|
2713 |
|
2714 |
|
2715 |
|
2716 |
|
2717 |
|
2718 |
|
2719 |
|
2720 |
|
2721 |
|
2722 |
|
2723 |
|
2724 |
|
2725 |
|
2726 |
|
2727 |
|
2728 |
|
2729 |
|
2730 |
|
2731 |
|
2732 |
|
2733 |
|
2734 |
|
2735 |
|
2736 |
|
2737 |
|
2738 |
|
2739 |
|
2740 |
|
2741 | __proto.updateAnimation = function (options) {
|
2742 | this.animationManager.updateAnimation(options);
|
2743 | return this;
|
2744 | };
|
2745 | |
2746 |
|
2747 |
|
2748 |
|
2749 |
|
2750 |
|
2751 |
|
2752 |
|
2753 |
|
2754 |
|
2755 |
|
2756 |
|
2757 |
|
2758 |
|
2759 |
|
2760 |
|
2761 |
|
2762 |
|
2763 |
|
2764 |
|
2765 |
|
2766 |
|
2767 |
|
2768 |
|
2769 |
|
2770 |
|
2771 | __proto.isBounceArea = function (axes) {
|
2772 | return this.axisManager.isOutside(axes);
|
2773 | };
|
2774 | |
2775 |
|
2776 |
|
2777 |
|
2778 |
|
2779 |
|
2780 | __proto.destroy = function () {
|
2781 | this.disconnect();
|
2782 | this.eventManager.destroy();
|
2783 | };
|
2784 | |
2785 |
|
2786 |
|
2787 |
|
2788 |
|
2789 |
|
2790 |
|
2791 |
|
2792 |
|
2793 |
|
2794 |
|
2795 |
|
2796 |
|
2797 |
|
2798 | Axes.VERSION = "3.8.3";
|
2799 |
|
2800 |
|
2801 | |
2802 |
|
2803 |
|
2804 |
|
2805 |
|
2806 |
|
2807 |
|
2808 |
|
2809 |
|
2810 |
|
2811 |
|
2812 |
|
2813 |
|
2814 | Axes.TRANSFORM = TRANSFORM;
|
2815 | |
2816 |
|
2817 |
|
2818 |
|
2819 |
|
2820 |
|
2821 | Axes.DIRECTION_NONE = DIRECTION_NONE;
|
2822 | |
2823 |
|
2824 |
|
2825 |
|
2826 |
|
2827 |
|
2828 | Axes.DIRECTION_LEFT = DIRECTION_LEFT;
|
2829 | |
2830 |
|
2831 |
|
2832 |
|
2833 |
|
2834 |
|
2835 | Axes.DIRECTION_RIGHT = DIRECTION_RIGHT;
|
2836 | |
2837 |
|
2838 |
|
2839 |
|
2840 |
|
2841 |
|
2842 | Axes.DIRECTION_UP = DIRECTION_UP;
|
2843 | |
2844 |
|
2845 |
|
2846 |
|
2847 |
|
2848 |
|
2849 | Axes.DIRECTION_DOWN = DIRECTION_DOWN;
|
2850 | |
2851 |
|
2852 |
|
2853 |
|
2854 |
|
2855 |
|
2856 | Axes.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
|
2857 | |
2858 |
|
2859 |
|
2860 |
|
2861 |
|
2862 |
|
2863 | Axes.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
|
2864 | |
2865 |
|
2866 |
|
2867 |
|
2868 |
|
2869 |
|
2870 | Axes.DIRECTION_ALL = DIRECTION_ALL;
|
2871 | Axes = __decorate([ReactiveSubscribe], Axes);
|
2872 | return Axes;
|
2873 | }(Component);
|
2874 |
|
2875 |
|
2876 |
|
2877 |
|
2878 |
|
2879 |
|
2880 | var getDirectionByAngle = function (angle, thresholdAngle) {
|
2881 | if (thresholdAngle < 0 || thresholdAngle > 90) {
|
2882 | return DIRECTION_NONE;
|
2883 | }
|
2884 |
|
2885 | var toAngle = Math.abs(angle);
|
2886 | return toAngle > thresholdAngle && toAngle < 180 - thresholdAngle ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL;
|
2887 | };
|
2888 |
|
2889 |
|
2890 |
|
2891 |
|
2892 |
|
2893 |
|
2894 |
|
2895 |
|
2896 |
|
2897 |
|
2898 |
|
2899 |
|
2900 |
|
2901 |
|
2902 |
|
2903 |
|
2904 |
|
2905 |
|
2906 |
|
2907 |
|
2908 |
|
2909 |
|
2910 |
|
2911 |
|
2912 |
|
2913 |
|
2914 |
|
2915 |
|
2916 |
|
2917 |
|
2918 |
|
2919 |
|
2920 |
|
2921 |
|
2922 |
|
2923 |
|
2924 |
|
2925 |
|
2926 |
|
2927 |
|
2928 |
|
2929 |
|
2930 |
|
2931 |
|
2932 |
|
2933 |
|
2934 |
|
2935 |
|
2936 |
|
2937 |
|
2938 |
|
2939 |
|
2940 |
|
2941 |
|
2942 |
|
2943 |
|
2944 |
|
2945 |
|
2946 |
|
2947 |
|
2948 |
|
2949 |
|
2950 |
|
2951 |
|
2952 |
|
2953 | var PanInput =
|
2954 |
|
2955 | function () {
|
2956 | |
2957 |
|
2958 |
|
2959 | function PanInput(el, options) {
|
2960 | var _this = this;
|
2961 |
|
2962 | this.axes = [];
|
2963 | this.element = null;
|
2964 | this._enabled = false;
|
2965 | this._activeEvent = null;
|
2966 | this._atRightEdge = false;
|
2967 | this._rightEdgeTimer = 0;
|
2968 | this._dragged = false;
|
2969 | this._isOverThreshold = false;
|
2970 |
|
2971 | this._preventClickWhenDragged = function (e) {
|
2972 | if (_this._dragged) {
|
2973 | e.preventDefault();
|
2974 | e.stopPropagation();
|
2975 | }
|
2976 |
|
2977 | _this._dragged = false;
|
2978 | };
|
2979 |
|
2980 | this._voidFunction = function () {};
|
2981 |
|
2982 | this.element = $(el);
|
2983 | this.options = __assign({
|
2984 | inputType: ["touch", "mouse", "pointer"],
|
2985 | inputKey: [ANY],
|
2986 | inputButton: [MOUSE_LEFT],
|
2987 | scale: [1, 1],
|
2988 | thresholdAngle: 45,
|
2989 | threshold: 0,
|
2990 | preventClickOnDrag: false,
|
2991 | iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
|
2992 | releaseOnScroll: false,
|
2993 | touchAction: null
|
2994 | }, options);
|
2995 | this._onPanstart = this._onPanstart.bind(this);
|
2996 | this._onPanmove = this._onPanmove.bind(this);
|
2997 | this._onPanend = this._onPanend.bind(this);
|
2998 | }
|
2999 |
|
3000 | var __proto = PanInput.prototype;
|
3001 |
|
3002 | __proto.mapAxes = function (axes) {
|
3003 | this._direction = getDirection(!!axes[0], !!axes[1]);
|
3004 | this.axes = axes;
|
3005 | };
|
3006 |
|
3007 | __proto.connect = function (observer) {
|
3008 | if (this._activeEvent) {
|
3009 | this._detachElementEvent();
|
3010 |
|
3011 | this._detachWindowEvent(this._activeEvent);
|
3012 | }
|
3013 |
|
3014 | this._attachElementEvent(observer);
|
3015 |
|
3016 | this._originalCssProps = setCssProps(this.element, this.options, this._direction);
|
3017 | return this;
|
3018 | };
|
3019 |
|
3020 | __proto.disconnect = function () {
|
3021 | this._detachElementEvent();
|
3022 |
|
3023 | this._detachWindowEvent(this._activeEvent);
|
3024 |
|
3025 | if (!isCssPropsFromAxes(this._originalCssProps)) {
|
3026 | revertCssProps(this.element, this._originalCssProps);
|
3027 | }
|
3028 |
|
3029 | this._direction = DIRECTION_NONE;
|
3030 | return this;
|
3031 | };
|
3032 | |
3033 |
|
3034 |
|
3035 |
|
3036 |
|
3037 |
|
3038 | __proto.destroy = function () {
|
3039 | this.disconnect();
|
3040 | this.element = null;
|
3041 | };
|
3042 | |
3043 |
|
3044 |
|
3045 |
|
3046 |
|
3047 |
|
3048 |
|
3049 | __proto.enable = function () {
|
3050 | this._enabled = true;
|
3051 | return this;
|
3052 | };
|
3053 | |
3054 |
|
3055 |
|
3056 |
|
3057 |
|
3058 |
|
3059 |
|
3060 | __proto.disable = function () {
|
3061 | this._enabled = false;
|
3062 | return this;
|
3063 | };
|
3064 | |
3065 |
|
3066 |
|
3067 |
|
3068 |
|
3069 |
|
3070 |
|
3071 | __proto.isEnabled = function () {
|
3072 | return this._enabled;
|
3073 | };
|
3074 | |
3075 |
|
3076 |
|
3077 |
|
3078 |
|
3079 |
|
3080 |
|
3081 | __proto.release = function () {
|
3082 | var activeEvent = this._activeEvent;
|
3083 | var prevEvent = activeEvent.prevEvent;
|
3084 | activeEvent.onRelease();
|
3085 |
|
3086 | this._observer.release(this, prevEvent, [0, 0]);
|
3087 |
|
3088 | this._detachWindowEvent(activeEvent);
|
3089 |
|
3090 | return this;
|
3091 | };
|
3092 |
|
3093 | __proto._onPanstart = function (event) {
|
3094 | var _a = this.options,
|
3095 | inputKey = _a.inputKey,
|
3096 | inputButton = _a.inputButton;
|
3097 | var activeEvent = this._activeEvent;
|
3098 | var panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
|
3099 |
|
3100 | if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
|
3101 | return;
|
3102 | }
|
3103 |
|
3104 | if (panEvent.srcEvent.cancelable !== false) {
|
3105 | var edgeThreshold = this.options.iOSEdgeSwipeThreshold;
|
3106 | this._dragged = false;
|
3107 | this._isOverThreshold = false;
|
3108 |
|
3109 | this._observer.hold(this, panEvent);
|
3110 |
|
3111 | this._atRightEdge = IS_IOS_SAFARI && panEvent.center.x > window.innerWidth - edgeThreshold;
|
3112 |
|
3113 | this._attachWindowEvent(activeEvent);
|
3114 |
|
3115 | activeEvent.prevEvent = panEvent;
|
3116 | }
|
3117 | };
|
3118 |
|
3119 | __proto._onPanmove = function (event) {
|
3120 | var _this = this;
|
3121 |
|
3122 | var _a = this.options,
|
3123 | iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
|
3124 | preventClickOnDrag = _a.preventClickOnDrag,
|
3125 | releaseOnScroll = _a.releaseOnScroll,
|
3126 | inputKey = _a.inputKey,
|
3127 | inputButton = _a.inputButton,
|
3128 | threshold = _a.threshold,
|
3129 | thresholdAngle = _a.thresholdAngle;
|
3130 | var activeEvent = this._activeEvent;
|
3131 | var panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
|
3132 | var touches = activeEvent.getTouches(event, inputButton);
|
3133 |
|
3134 | if (touches === 0 || releaseOnScroll && panEvent && !panEvent.srcEvent.cancelable) {
|
3135 | this._onPanend(event);
|
3136 |
|
3137 | return;
|
3138 | }
|
3139 |
|
3140 | if (!panEvent || !this._enabled || touches > 1) {
|
3141 | return;
|
3142 | }
|
3143 |
|
3144 | var userDirection = getDirectionByAngle(panEvent.angle, thresholdAngle);
|
3145 | var useHorizontal = useDirection(DIRECTION_HORIZONTAL, this._direction, userDirection);
|
3146 | var useVertical = useDirection(DIRECTION_VERTICAL, this._direction, userDirection);
|
3147 |
|
3148 | if (activeEvent.prevEvent && IS_IOS_SAFARI) {
|
3149 | var swipeLeftToRight = panEvent.center.x < 0;
|
3150 |
|
3151 | if (swipeLeftToRight) {
|
3152 |
|
3153 | this.release();
|
3154 | return;
|
3155 | } else if (this._atRightEdge) {
|
3156 | clearTimeout(this._rightEdgeTimer);
|
3157 |
|
3158 | var swipeRightToLeft = panEvent.deltaX < -iOSEdgeSwipeThreshold;
|
3159 |
|
3160 | if (swipeRightToLeft) {
|
3161 | this._atRightEdge = false;
|
3162 | } else {
|
3163 |
|
3164 | this._rightEdgeTimer = window.setTimeout(function () {
|
3165 | return _this.release();
|
3166 | }, 100);
|
3167 | }
|
3168 | }
|
3169 | }
|
3170 |
|
3171 | var distance = this._getDistance([panEvent.deltaX, panEvent.deltaY], [useHorizontal, useVertical]);
|
3172 |
|
3173 | var offset = this._getOffset([panEvent.offsetX, panEvent.offsetY], [useHorizontal, useVertical]);
|
3174 |
|
3175 | var prevent = offset.some(function (v) {
|
3176 | return v !== 0;
|
3177 | });
|
3178 |
|
3179 | if (prevent) {
|
3180 | if (panEvent.srcEvent.cancelable !== false) {
|
3181 | panEvent.srcEvent.preventDefault();
|
3182 | }
|
3183 |
|
3184 | panEvent.srcEvent.stopPropagation();
|
3185 | }
|
3186 |
|
3187 | panEvent.preventSystemEvent = prevent;
|
3188 |
|
3189 | if (prevent && (this._isOverThreshold || distance >= threshold)) {
|
3190 | this._dragged = preventClickOnDrag;
|
3191 | this._isOverThreshold = true;
|
3192 |
|
3193 | this._observer.change(this, panEvent, toAxis(this.axes, offset));
|
3194 | }
|
3195 |
|
3196 | activeEvent.prevEvent = panEvent;
|
3197 | };
|
3198 |
|
3199 | __proto._onPanend = function (event) {
|
3200 | var inputButton = this.options.inputButton;
|
3201 | var activeEvent = this._activeEvent;
|
3202 | activeEvent.onEventEnd(event);
|
3203 |
|
3204 | if (!this._enabled || activeEvent.getTouches(event, inputButton) !== 0) {
|
3205 | return;
|
3206 | }
|
3207 |
|
3208 | this._detachWindowEvent(activeEvent);
|
3209 |
|
3210 | clearTimeout(this._rightEdgeTimer);
|
3211 | var prevEvent = activeEvent.prevEvent;
|
3212 | var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
|
3213 | activeEvent.onRelease();
|
3214 |
|
3215 | this._observer.release(this, prevEvent, velocity);
|
3216 | };
|
3217 |
|
3218 | __proto._attachWindowEvent = function (activeEvent) {
|
3219 | var _this = this;
|
3220 |
|
3221 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
|
3222 | window.addEventListener(event, _this._onPanmove, getAddEventOptions(event));
|
3223 | });
|
3224 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.end.forEach(function (event) {
|
3225 | window.addEventListener(event, _this._onPanend, getAddEventOptions(event));
|
3226 | });
|
3227 | };
|
3228 |
|
3229 | __proto._detachWindowEvent = function (activeEvent) {
|
3230 | var _this = this;
|
3231 |
|
3232 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
|
3233 | window.removeEventListener(event, _this._onPanmove);
|
3234 | });
|
3235 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.end.forEach(function (event) {
|
3236 | window.removeEventListener(event, _this._onPanend);
|
3237 | });
|
3238 | };
|
3239 |
|
3240 | __proto._getOffset = function (properties, direction) {
|
3241 | var scale = this.options.scale;
|
3242 | return [direction[0] ? properties[0] * scale[0] : 0, direction[1] ? properties[1] * scale[1] : 0];
|
3243 | };
|
3244 |
|
3245 | __proto._getDistance = function (delta, direction) {
|
3246 | return Math.sqrt(Number(direction[0]) * Math.pow(delta[0], 2) + Number(direction[1]) * Math.pow(delta[1], 2));
|
3247 | };
|
3248 |
|
3249 | __proto._attachElementEvent = function (observer) {
|
3250 | var _this = this;
|
3251 |
|
3252 | var activeEvent = convertInputType(this.options.inputType);
|
3253 | var element = this.element;
|
3254 |
|
3255 | if (!activeEvent) {
|
3256 | return;
|
3257 | }
|
3258 |
|
3259 | if (!element) {
|
3260 | throw new Error("Element to connect input does not exist.");
|
3261 | }
|
3262 |
|
3263 | this._observer = observer;
|
3264 | this._enabled = true;
|
3265 | this._activeEvent = activeEvent;
|
3266 | element.addEventListener("click", this._preventClickWhenDragged, true);
|
3267 | activeEvent.start.forEach(function (event) {
|
3268 | element.addEventListener(event, _this._onPanstart);
|
3269 | });
|
3270 |
|
3271 | activeEvent.move.forEach(function (event) {
|
3272 | element.addEventListener(event, _this._voidFunction);
|
3273 | });
|
3274 | };
|
3275 |
|
3276 | __proto._detachElementEvent = function () {
|
3277 | var _this = this;
|
3278 |
|
3279 | var activeEvent = this._activeEvent;
|
3280 | var element = this.element;
|
3281 |
|
3282 | if (element) {
|
3283 | element.removeEventListener("click", this._preventClickWhenDragged, true);
|
3284 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
|
3285 | element.removeEventListener(event, _this._onPanstart);
|
3286 | });
|
3287 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
|
3288 | element.removeEventListener(event, _this._voidFunction);
|
3289 | });
|
3290 | }
|
3291 |
|
3292 | this._enabled = false;
|
3293 | this._observer = null;
|
3294 | };
|
3295 |
|
3296 | return PanInput;
|
3297 | }();
|
3298 |
|
3299 |
|
3300 |
|
3301 |
|
3302 |
|
3303 |
|
3304 |
|
3305 |
|
3306 |
|
3307 |
|
3308 |
|
3309 |
|
3310 |
|
3311 |
|
3312 |
|
3313 |
|
3314 |
|
3315 |
|
3316 |
|
3317 |
|
3318 |
|
3319 |
|
3320 |
|
3321 |
|
3322 |
|
3323 | var RotatePanInput =
|
3324 |
|
3325 | function (_super) {
|
3326 | __extends(RotatePanInput, _super);
|
3327 | |
3328 |
|
3329 |
|
3330 |
|
3331 |
|
3332 | function RotatePanInput(el, options) {
|
3333 | var _this = _super.call(this, el, options) || this;
|
3334 |
|
3335 | _this._prevQuadrant = null;
|
3336 | _this._lastDiff = 0;
|
3337 | return _this;
|
3338 | }
|
3339 |
|
3340 | var __proto = RotatePanInput.prototype;
|
3341 |
|
3342 | __proto.mapAxes = function (axes) {
|
3343 | this._direction = Axes.DIRECTION_ALL;
|
3344 | this.axes = axes;
|
3345 | };
|
3346 |
|
3347 | __proto._onPanstart = function (event) {
|
3348 | var _a = this.options,
|
3349 | inputKey = _a.inputKey,
|
3350 | inputButton = _a.inputButton;
|
3351 | var activeEvent = this._activeEvent;
|
3352 | var panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
|
3353 |
|
3354 | if (!panEvent || !this.isEnabled()) {
|
3355 | return;
|
3356 | }
|
3357 |
|
3358 | var rect = this.element.getBoundingClientRect();
|
3359 |
|
3360 | this._observer.hold(this, panEvent);
|
3361 |
|
3362 | this._attachWindowEvent(activeEvent);
|
3363 |
|
3364 |
|
3365 | this._coefficientForDistanceToAngle = 360 / (rect.width * Math.PI);
|
3366 |
|
3367 |
|
3368 | this._rotateOrigin = [rect.left + (rect.width - 1) / 2, rect.top + (rect.height - 1) / 2];
|
3369 |
|
3370 | this._prevAngle = null;
|
3371 |
|
3372 | this._triggerChange(panEvent);
|
3373 |
|
3374 | activeEvent.prevEvent = panEvent;
|
3375 | };
|
3376 |
|
3377 | __proto._onPanmove = function (event) {
|
3378 | var _a = this.options,
|
3379 | inputKey = _a.inputKey,
|
3380 | inputButton = _a.inputButton;
|
3381 | var activeEvent = this._activeEvent;
|
3382 | var panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
|
3383 |
|
3384 | if (!panEvent || !this.isEnabled()) {
|
3385 | return;
|
3386 | }
|
3387 |
|
3388 | if (panEvent.srcEvent.cancelable !== false) {
|
3389 | panEvent.srcEvent.preventDefault();
|
3390 | }
|
3391 |
|
3392 | panEvent.srcEvent.stopPropagation();
|
3393 |
|
3394 | this._triggerChange(panEvent);
|
3395 |
|
3396 | activeEvent.prevEvent = panEvent;
|
3397 | };
|
3398 |
|
3399 | __proto._onPanend = function (event) {
|
3400 | var activeEvent = this._activeEvent;
|
3401 | activeEvent.onEventEnd(event);
|
3402 |
|
3403 | if (!this.isEnabled()) {
|
3404 | return;
|
3405 | }
|
3406 |
|
3407 | var prevEvent = activeEvent.prevEvent;
|
3408 |
|
3409 | this._triggerChange(prevEvent);
|
3410 |
|
3411 | var vx = prevEvent.velocityX;
|
3412 | var vy = prevEvent.velocityY;
|
3413 | var velocity = Math.sqrt(vx * vx + vy * vy) * (this._lastDiff > 0 ? -1 : 1);
|
3414 |
|
3415 | activeEvent.onRelease();
|
3416 |
|
3417 | this._observer.release(this, prevEvent, [velocity * this._coefficientForDistanceToAngle]);
|
3418 |
|
3419 | this._detachWindowEvent(activeEvent);
|
3420 | };
|
3421 |
|
3422 | __proto._triggerChange = function (event) {
|
3423 | var _a = this._getPosFromOrigin(event.center.x, event.center.y),
|
3424 | x = _a.x,
|
3425 | y = _a.y;
|
3426 |
|
3427 | var angle = getAngle(x, y);
|
3428 | var positiveAngle = angle < 0 ? 360 + angle : angle;
|
3429 |
|
3430 | var quadrant = this._getQuadrant(event.center.x, event.center.y);
|
3431 |
|
3432 | var diff = this._getDifference(this._prevAngle, positiveAngle, this._prevQuadrant, quadrant);
|
3433 |
|
3434 | this._prevAngle = positiveAngle;
|
3435 | this._prevQuadrant = quadrant;
|
3436 |
|
3437 | if (diff === 0) {
|
3438 | return;
|
3439 | }
|
3440 |
|
3441 | this._lastDiff = diff;
|
3442 |
|
3443 | this._observer.change(this, event, toAxis(this.axes, [-diff]));
|
3444 |
|
3445 | };
|
3446 |
|
3447 | __proto._getDifference = function (prevAngle, angle, prevQuadrant, quadrant) {
|
3448 | var diff;
|
3449 |
|
3450 | if (prevAngle === null) {
|
3451 | diff = 0;
|
3452 | } else if (prevQuadrant === 1 && quadrant === 4) {
|
3453 | diff = -prevAngle - (360 - angle);
|
3454 | } else if (prevQuadrant === 4 && quadrant === 1) {
|
3455 | diff = 360 - prevAngle + angle;
|
3456 | } else {
|
3457 | diff = angle - prevAngle;
|
3458 | }
|
3459 |
|
3460 | return diff;
|
3461 | };
|
3462 |
|
3463 | __proto._getPosFromOrigin = function (posX, posY) {
|
3464 | return {
|
3465 | x: posX - this._rotateOrigin[0],
|
3466 | y: this._rotateOrigin[1] - posY
|
3467 | };
|
3468 | };
|
3469 |
|
3470 | __proto._getQuadrant = function (posX, posY) {
|
3471 | |
3472 |
|
3473 |
|
3474 |
|
3475 |
|
3476 |
|
3477 |
|
3478 |
|
3479 |
|
3480 | var _a = this._getPosFromOrigin(posX, posY),
|
3481 | x = _a.x,
|
3482 | y = _a.y;
|
3483 |
|
3484 | var q = 0;
|
3485 |
|
3486 | if (x >= 0 && y >= 0) {
|
3487 | q = 1;
|
3488 | } else if (x < 0 && y >= 0) {
|
3489 | q = 2;
|
3490 | } else if (x < 0 && y < 0) {
|
3491 | q = 3;
|
3492 | } else if (x >= 0 && y < 0) {
|
3493 | q = 4;
|
3494 | }
|
3495 |
|
3496 | return q;
|
3497 | };
|
3498 |
|
3499 | return RotatePanInput;
|
3500 | }(PanInput);
|
3501 |
|
3502 |
|
3503 |
|
3504 |
|
3505 |
|
3506 |
|
3507 |
|
3508 |
|
3509 |
|
3510 |
|
3511 |
|
3512 |
|
3513 |
|
3514 |
|
3515 |
|
3516 |
|
3517 |
|
3518 |
|
3519 |
|
3520 |
|
3521 |
|
3522 |
|
3523 |
|
3524 |
|
3525 |
|
3526 |
|
3527 |
|
3528 |
|
3529 |
|
3530 |
|
3531 | var PinchInput =
|
3532 |
|
3533 | function () {
|
3534 | |
3535 |
|
3536 |
|
3537 | function PinchInput(el, options) {
|
3538 | this.axes = [];
|
3539 | this.element = null;
|
3540 | this._pinchFlag = false;
|
3541 | this._enabled = false;
|
3542 | this._activeEvent = null;
|
3543 | this._isOverThreshold = false;
|
3544 | this.element = $(el);
|
3545 | this.options = __assign({
|
3546 | scale: 1,
|
3547 | threshold: 0,
|
3548 | inputType: ["touch", "pointer"],
|
3549 | touchAction: "none"
|
3550 | }, options);
|
3551 | this._onPinchStart = this._onPinchStart.bind(this);
|
3552 | this._onPinchMove = this._onPinchMove.bind(this);
|
3553 | this._onPinchEnd = this._onPinchEnd.bind(this);
|
3554 | }
|
3555 |
|
3556 | var __proto = PinchInput.prototype;
|
3557 |
|
3558 | __proto.mapAxes = function (axes) {
|
3559 | this.axes = axes;
|
3560 | };
|
3561 |
|
3562 | __proto.connect = function (observer) {
|
3563 | if (this._activeEvent) {
|
3564 | this._detachEvent();
|
3565 | }
|
3566 |
|
3567 | this._attachEvent(observer);
|
3568 |
|
3569 | this._originalCssProps = setCssProps(this.element, this.options, DIRECTION_ALL);
|
3570 | return this;
|
3571 | };
|
3572 |
|
3573 | __proto.disconnect = function () {
|
3574 | this._detachEvent();
|
3575 |
|
3576 | if (!isCssPropsFromAxes(this._originalCssProps)) {
|
3577 | revertCssProps(this.element, this._originalCssProps);
|
3578 | }
|
3579 |
|
3580 | return this;
|
3581 | };
|
3582 | |
3583 |
|
3584 |
|
3585 |
|
3586 |
|
3587 |
|
3588 | __proto.destroy = function () {
|
3589 | this.disconnect();
|
3590 | this.element = null;
|
3591 | };
|
3592 | |
3593 |
|
3594 |
|
3595 |
|
3596 |
|
3597 |
|
3598 |
|
3599 | __proto.enable = function () {
|
3600 | this._enabled = true;
|
3601 | return this;
|
3602 | };
|
3603 | |
3604 |
|
3605 |
|
3606 |
|
3607 |
|
3608 |
|
3609 |
|
3610 | __proto.disable = function () {
|
3611 | this._enabled = false;
|
3612 | return this;
|
3613 | };
|
3614 | |
3615 |
|
3616 |
|
3617 |
|
3618 |
|
3619 |
|
3620 |
|
3621 | __proto.isEnabled = function () {
|
3622 | return this._enabled;
|
3623 | };
|
3624 |
|
3625 | __proto._onPinchStart = function (event) {
|
3626 | var activeEvent = this._activeEvent;
|
3627 | var pinchEvent = activeEvent.onEventStart(event);
|
3628 |
|
3629 | if (!pinchEvent || !this._enabled || activeEvent.getTouches(event) !== 2) {
|
3630 | return;
|
3631 | }
|
3632 |
|
3633 | this._baseValue = this._observer.get(this)[this.axes[0]];
|
3634 |
|
3635 | this._observer.hold(this, event);
|
3636 |
|
3637 | this._pinchFlag = true;
|
3638 | this._isOverThreshold = false;
|
3639 | activeEvent.prevEvent = pinchEvent;
|
3640 | };
|
3641 |
|
3642 | __proto._onPinchMove = function (event) {
|
3643 | var threshold = this.options.threshold;
|
3644 | var activeEvent = this._activeEvent;
|
3645 | var pinchEvent = activeEvent.onEventMove(event);
|
3646 |
|
3647 | if (!pinchEvent || !this._pinchFlag || !this._enabled || activeEvent.getTouches(event) !== 2) {
|
3648 | return;
|
3649 | }
|
3650 |
|
3651 | var distance = this._getDistance(pinchEvent.scale);
|
3652 |
|
3653 | var offset = this._getOffset(pinchEvent.scale, activeEvent.prevEvent.scale);
|
3654 |
|
3655 | if (this._isOverThreshold || distance >= threshold) {
|
3656 | this._isOverThreshold = true;
|
3657 |
|
3658 | this._observer.change(this, event, toAxis(this.axes, [offset]));
|
3659 | }
|
3660 |
|
3661 | activeEvent.prevEvent = pinchEvent;
|
3662 | };
|
3663 |
|
3664 | __proto._onPinchEnd = function (event) {
|
3665 | var activeEvent = this._activeEvent;
|
3666 | activeEvent.onEventEnd(event);
|
3667 |
|
3668 | if (!this._pinchFlag || !this._enabled || activeEvent.getTouches(event) >= 2) {
|
3669 | return;
|
3670 | }
|
3671 |
|
3672 | activeEvent.onRelease();
|
3673 |
|
3674 | this._observer.release(this, event, [0], 0);
|
3675 |
|
3676 | this._baseValue = null;
|
3677 | this._pinchFlag = false;
|
3678 | };
|
3679 |
|
3680 | __proto._attachEvent = function (observer) {
|
3681 | var _this = this;
|
3682 |
|
3683 | var activeEvent = convertInputType(this.options.inputType);
|
3684 | var element = this.element;
|
3685 |
|
3686 | if (!activeEvent) {
|
3687 | return;
|
3688 | }
|
3689 |
|
3690 | if (!element) {
|
3691 | throw new Error("Element to connect input does not exist.");
|
3692 | }
|
3693 |
|
3694 | this._observer = observer;
|
3695 | this._enabled = true;
|
3696 | this._activeEvent = activeEvent;
|
3697 | activeEvent.start.forEach(function (event) {
|
3698 | element.addEventListener(event, _this._onPinchStart, false);
|
3699 | });
|
3700 | activeEvent.move.forEach(function (event) {
|
3701 | element.addEventListener(event, _this._onPinchMove, false);
|
3702 | });
|
3703 | activeEvent.end.forEach(function (event) {
|
3704 | element.addEventListener(event, _this._onPinchEnd, false);
|
3705 | });
|
3706 | };
|
3707 |
|
3708 | __proto._detachEvent = function () {
|
3709 | var _this = this;
|
3710 |
|
3711 | var activeEvent = this._activeEvent;
|
3712 | var element = this.element;
|
3713 |
|
3714 | if (element) {
|
3715 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
|
3716 | element.removeEventListener(event, _this._onPinchStart, false);
|
3717 | });
|
3718 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
|
3719 | element.removeEventListener(event, _this._onPinchMove, false);
|
3720 | });
|
3721 | activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.end.forEach(function (event) {
|
3722 | element.removeEventListener(event, _this._onPinchEnd, false);
|
3723 | });
|
3724 | }
|
3725 |
|
3726 | this._enabled = false;
|
3727 | this._observer = null;
|
3728 | };
|
3729 |
|
3730 | __proto._getOffset = function (pinchScale, prev) {
|
3731 | if (prev === void 0) {
|
3732 | prev = 1;
|
3733 | }
|
3734 |
|
3735 | return this._baseValue * (pinchScale - prev) * this.options.scale;
|
3736 | };
|
3737 |
|
3738 | __proto._getDistance = function (pinchScale) {
|
3739 | return Math.abs(pinchScale - 1);
|
3740 | };
|
3741 |
|
3742 | return PinchInput;
|
3743 | }();
|
3744 |
|
3745 |
|
3746 |
|
3747 |
|
3748 |
|
3749 |
|
3750 |
|
3751 |
|
3752 |
|
3753 |
|
3754 |
|
3755 |
|
3756 |
|
3757 |
|
3758 |
|
3759 |
|
3760 |
|
3761 |
|
3762 |
|
3763 |
|
3764 |
|
3765 |
|
3766 |
|
3767 |
|
3768 |
|
3769 |
|
3770 |
|
3771 |
|
3772 |
|
3773 |
|
3774 |
|
3775 |
|
3776 |
|
3777 |
|
3778 |
|
3779 |
|
3780 |
|
3781 |
|
3782 |
|
3783 |
|
3784 |
|
3785 |
|
3786 |
|
3787 |
|
3788 |
|
3789 |
|
3790 |
|
3791 | var WheelInput =
|
3792 |
|
3793 | function () {
|
3794 | |
3795 |
|
3796 |
|
3797 | function WheelInput(el, options) {
|
3798 | this.axes = [];
|
3799 | this.element = null;
|
3800 | this._enabled = false;
|
3801 | this._holding = false;
|
3802 | this._timer = null;
|
3803 | this.element = $(el);
|
3804 | this.options = __assign({
|
3805 | inputKey: [ANY],
|
3806 | scale: 1,
|
3807 | releaseDelay: 300,
|
3808 | useNormalized: true,
|
3809 | useAnimation: false
|
3810 | }, options);
|
3811 | this._onWheel = this._onWheel.bind(this);
|
3812 | }
|
3813 |
|
3814 | var __proto = WheelInput.prototype;
|
3815 |
|
3816 | __proto.mapAxes = function (axes) {
|
3817 |
|
3818 | this._direction = getDirection(!!axes[1], !!axes[0]);
|
3819 | this.axes = axes;
|
3820 | };
|
3821 |
|
3822 | __proto.connect = function (observer) {
|
3823 | this._detachEvent();
|
3824 |
|
3825 | this._attachEvent(observer);
|
3826 |
|
3827 | return this;
|
3828 | };
|
3829 |
|
3830 | __proto.disconnect = function () {
|
3831 | this._detachEvent();
|
3832 |
|
3833 | return this;
|
3834 | };
|
3835 | |
3836 |
|
3837 |
|
3838 |
|
3839 |
|
3840 |
|
3841 | __proto.destroy = function () {
|
3842 | this.disconnect();
|
3843 | this.element = null;
|
3844 | };
|
3845 | |
3846 |
|
3847 |
|
3848 |
|
3849 |
|
3850 |
|
3851 |
|
3852 | __proto.enable = function () {
|
3853 | this._enabled = true;
|
3854 | return this;
|
3855 | };
|
3856 | |
3857 |
|
3858 |
|
3859 |
|
3860 |
|
3861 |
|
3862 |
|
3863 | __proto.disable = function () {
|
3864 | this._enabled = false;
|
3865 | return this;
|
3866 | };
|
3867 | |
3868 |
|
3869 |
|
3870 |
|
3871 |
|
3872 |
|
3873 |
|
3874 | __proto.isEnabled = function () {
|
3875 | return this._enabled;
|
3876 | };
|
3877 |
|
3878 | __proto._onWheel = function (event) {
|
3879 | var _this = this;
|
3880 |
|
3881 | if (!this._enabled || !isValidKey(event, this.options.inputKey)) {
|
3882 | return;
|
3883 | }
|
3884 |
|
3885 | var offset = this._getOffset([event.deltaY, event.deltaX], [useDirection(DIRECTION_VERTICAL, this._direction), useDirection(DIRECTION_HORIZONTAL, this._direction)]);
|
3886 |
|
3887 | if (offset[0] === 0 && offset[1] === 0) {
|
3888 | return;
|
3889 | }
|
3890 |
|
3891 | event.preventDefault();
|
3892 |
|
3893 | if (!this._holding) {
|
3894 | this._observer.hold(this, event);
|
3895 |
|
3896 | this._holding = true;
|
3897 | }
|
3898 |
|
3899 | this._observer.change(this, event, toAxis(this.axes, offset), this.options.useAnimation);
|
3900 |
|
3901 | clearTimeout(this._timer);
|
3902 | this._timer = setTimeout(function () {
|
3903 | if (_this._holding) {
|
3904 | _this._holding = false;
|
3905 |
|
3906 | _this._observer.release(_this, event, [0]);
|
3907 | }
|
3908 | }, this.options.releaseDelay);
|
3909 | };
|
3910 |
|
3911 | __proto._getOffset = function (properties, direction) {
|
3912 | var scale = this.options.scale;
|
3913 | var useNormalized = this.options.useNormalized;
|
3914 | return [direction[0] && properties[0] ? (properties[0] > 0 ? -1 : 1) * (useNormalized ? 1 : Math.abs(properties[0])) * scale : 0, direction[1] && properties[1] ? (properties[1] > 0 ? -1 : 1) * (useNormalized ? 1 : Math.abs(properties[1])) * scale : 0];
|
3915 | };
|
3916 |
|
3917 | __proto._attachEvent = function (observer) {
|
3918 | var element = this.element;
|
3919 |
|
3920 | if (!element) {
|
3921 | throw new Error("Element to connect input does not exist.");
|
3922 | }
|
3923 |
|
3924 | this._observer = observer;
|
3925 | element.addEventListener("wheel", this._onWheel);
|
3926 | this._enabled = true;
|
3927 | };
|
3928 |
|
3929 | __proto._detachEvent = function () {
|
3930 | var element = this.element;
|
3931 |
|
3932 | if (element) {
|
3933 | this.element.removeEventListener("wheel", this._onWheel);
|
3934 | }
|
3935 |
|
3936 | this._enabled = false;
|
3937 | this._observer = null;
|
3938 |
|
3939 | if (this._timer) {
|
3940 | clearTimeout(this._timer);
|
3941 | this._timer = null;
|
3942 | }
|
3943 | };
|
3944 |
|
3945 | return WheelInput;
|
3946 | }();
|
3947 |
|
3948 | var KEY_LEFT_ARROW = 37;
|
3949 | var KEY_A = 65;
|
3950 | var KEY_UP_ARROW = 38;
|
3951 | var KEY_W = 87;
|
3952 | var KEY_RIGHT_ARROW = 39;
|
3953 | var KEY_D = 68;
|
3954 | var KEY_DOWN_ARROW = 40;
|
3955 | var KEY_S = 83;
|
3956 |
|
3957 |
|
3958 | var DIRECTION_REVERSE = -1;
|
3959 | var DIRECTION_FORWARD = 1;
|
3960 | var DIRECTION_HORIZONTAL$1 = -1;
|
3961 | var DIRECTION_VERTICAL$1 = 1;
|
3962 | var DELAY = 80;
|
3963 |
|
3964 |
|
3965 |
|
3966 |
|
3967 |
|
3968 |
|
3969 |
|
3970 |
|
3971 |
|
3972 |
|
3973 |
|
3974 |
|
3975 |
|
3976 |
|
3977 |
|
3978 |
|
3979 |
|
3980 |
|
3981 |
|
3982 |
|
3983 |
|
3984 |
|
3985 |
|
3986 |
|
3987 |
|
3988 | var MoveKeyInput =
|
3989 |
|
3990 | function () {
|
3991 | |
3992 |
|
3993 |
|
3994 | function MoveKeyInput(el, options) {
|
3995 | this.axes = [];
|
3996 | this.element = null;
|
3997 | this._enabled = false;
|
3998 | this._holding = false;
|
3999 | this._timer = null;
|
4000 | this.element = $(el);
|
4001 | this.options = __assign({
|
4002 | scale: [1, 1]
|
4003 | }, options);
|
4004 | this._onKeydown = this._onKeydown.bind(this);
|
4005 | this._onKeyup = this._onKeyup.bind(this);
|
4006 | }
|
4007 |
|
4008 | var __proto = MoveKeyInput.prototype;
|
4009 |
|
4010 | __proto.mapAxes = function (axes) {
|
4011 | this.axes = axes;
|
4012 | };
|
4013 |
|
4014 | __proto.connect = function (observer) {
|
4015 | this._detachEvent();
|
4016 |
|
4017 |
|
4018 | if (this.element.getAttribute("tabindex") !== "0") {
|
4019 | this.element.setAttribute("tabindex", "0");
|
4020 | }
|
4021 |
|
4022 | this._attachEvent(observer);
|
4023 |
|
4024 | return this;
|
4025 | };
|
4026 |
|
4027 | __proto.disconnect = function () {
|
4028 | this._detachEvent();
|
4029 |
|
4030 | return this;
|
4031 | };
|
4032 | |
4033 |
|
4034 |
|
4035 |
|
4036 |
|
4037 |
|
4038 | __proto.destroy = function () {
|
4039 | this.disconnect();
|
4040 | this.element = null;
|
4041 | };
|
4042 | |
4043 |
|
4044 |
|
4045 |
|
4046 |
|
4047 |
|
4048 |
|
4049 | __proto.enable = function () {
|
4050 | this._enabled = true;
|
4051 | return this;
|
4052 | };
|
4053 | |
4054 |
|
4055 |
|
4056 |
|
4057 |
|
4058 |
|
4059 |
|
4060 | __proto.disable = function () {
|
4061 | this._enabled = false;
|
4062 | return this;
|
4063 | };
|
4064 | |
4065 |
|
4066 |
|
4067 |
|
4068 |
|
4069 |
|
4070 |
|
4071 | __proto.isEnabled = function () {
|
4072 | return this._enabled;
|
4073 | };
|
4074 |
|
4075 | __proto._onKeydown = function (event) {
|
4076 | if (!this._enabled) {
|
4077 | return;
|
4078 | }
|
4079 |
|
4080 | var isMoveKey = true;
|
4081 | var direction = DIRECTION_FORWARD;
|
4082 | var move = DIRECTION_HORIZONTAL$1;
|
4083 |
|
4084 | switch (event.keyCode) {
|
4085 | case KEY_LEFT_ARROW:
|
4086 | case KEY_A:
|
4087 | direction = DIRECTION_REVERSE;
|
4088 | break;
|
4089 |
|
4090 | case KEY_RIGHT_ARROW:
|
4091 | case KEY_D:
|
4092 | break;
|
4093 |
|
4094 | case KEY_DOWN_ARROW:
|
4095 | case KEY_S:
|
4096 | direction = DIRECTION_REVERSE;
|
4097 | move = DIRECTION_VERTICAL$1;
|
4098 | break;
|
4099 |
|
4100 | case KEY_UP_ARROW:
|
4101 | case KEY_W:
|
4102 | move = DIRECTION_VERTICAL$1;
|
4103 | break;
|
4104 |
|
4105 | default:
|
4106 | isMoveKey = false;
|
4107 | }
|
4108 |
|
4109 | if (move === DIRECTION_HORIZONTAL$1 && !this.axes[0] || move === DIRECTION_VERTICAL$1 && !this.axes[1]) {
|
4110 | isMoveKey = false;
|
4111 | }
|
4112 |
|
4113 | if (!isMoveKey) {
|
4114 | return;
|
4115 | }
|
4116 |
|
4117 | event.preventDefault();
|
4118 | var offsets = move === DIRECTION_HORIZONTAL$1 ? [+this.options.scale[0] * direction, 0] : [0, +this.options.scale[1] * direction];
|
4119 |
|
4120 | if (!this._holding) {
|
4121 | this._observer.hold(this, event);
|
4122 |
|
4123 | this._holding = true;
|
4124 | }
|
4125 |
|
4126 | clearTimeout(this._timer);
|
4127 |
|
4128 | this._observer.change(this, event, toAxis(this.axes, offsets));
|
4129 | };
|
4130 |
|
4131 | __proto._onKeyup = function (event) {
|
4132 | var _this = this;
|
4133 |
|
4134 | if (!this._holding) {
|
4135 | return;
|
4136 | }
|
4137 |
|
4138 | clearTimeout(this._timer);
|
4139 | this._timer = setTimeout(function () {
|
4140 | _this._observer.release(_this, event, [0, 0]);
|
4141 |
|
4142 | _this._holding = false;
|
4143 | }, DELAY);
|
4144 | };
|
4145 |
|
4146 | __proto._attachEvent = function (observer) {
|
4147 | var element = this.element;
|
4148 |
|
4149 | if (!element) {
|
4150 | throw new Error("Element to connect input does not exist.");
|
4151 | }
|
4152 |
|
4153 | this._observer = observer;
|
4154 | element.addEventListener("keydown", this._onKeydown, false);
|
4155 | element.addEventListener("keypress", this._onKeydown, false);
|
4156 | element.addEventListener("keyup", this._onKeyup, false);
|
4157 | this._enabled = true;
|
4158 | };
|
4159 |
|
4160 | __proto._detachEvent = function () {
|
4161 | var element = this.element;
|
4162 |
|
4163 | if (element) {
|
4164 | element.removeEventListener("keydown", this._onKeydown, false);
|
4165 | element.removeEventListener("keypress", this._onKeydown, false);
|
4166 | element.removeEventListener("keyup", this._onKeyup, false);
|
4167 | }
|
4168 |
|
4169 | this._enabled = false;
|
4170 | this._observer = null;
|
4171 | };
|
4172 |
|
4173 | return MoveKeyInput;
|
4174 | }();
|
4175 |
|
4176 |
|
4177 |
|
4178 |
|
4179 |
|
4180 | var REACTIVE_AXES = {
|
4181 | methods: AXES_METHODS,
|
4182 | events: AXES_EVENTS,
|
4183 | created: function (data) {
|
4184 | return new Axes(data.axis, data.options);
|
4185 | },
|
4186 | on: function (instance, name, callback) {
|
4187 | instance.on(name, callback);
|
4188 | },
|
4189 | off: function (instance, name, callback) {
|
4190 | instance.off(name, callback);
|
4191 | },
|
4192 | destroy: function (instance) {
|
4193 | instance.destroy();
|
4194 | }
|
4195 | };
|
4196 |
|
4197 |
|
4198 |
|
4199 |
|
4200 |
|
4201 |
|
4202 | export default Axes;
|
4203 | export { PanInput, RotatePanInput, PinchInput, WheelInput, MoveKeyInput, AXES_METHODS, AXES_EVENTS, REACTIVE_AXES };
|
4204 |
|