1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | (function (global, factory) {
|
10 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/hammerjs'), require('@egjs/agent'), require('@egjs/component')) :
|
11 | typeof define === 'function' && define.amd ? define(['@egjs/hammerjs', '@egjs/agent', '@egjs/component'], factory) :
|
12 | (global.eg = global.eg || {}, global.eg.Axes = factory(global.Hammer,global.eg.agent,global.eg.Component));
|
13 | }(this, (function (hammerjs,getAgent,Component) { 'use strict';
|
14 |
|
15 | |
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | var extendStatics = function (d, b) {
|
32 | extendStatics = Object.setPrototypeOf || {
|
33 | __proto__: []
|
34 | } instanceof Array && function (d, b) {
|
35 | d.__proto__ = b;
|
36 | } || function (d, b) {
|
37 | for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
38 | };
|
39 |
|
40 | return extendStatics(d, b);
|
41 | };
|
42 |
|
43 | function __extends(d, b) {
|
44 | extendStatics(d, b);
|
45 |
|
46 | function __() {
|
47 | this.constructor = d;
|
48 | }
|
49 |
|
50 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
51 | }
|
52 | var __assign = function () {
|
53 | __assign = Object.assign || function __assign(t) {
|
54 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
55 | s = arguments[i];
|
56 |
|
57 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
58 | }
|
59 |
|
60 | return t;
|
61 | };
|
62 |
|
63 | return __assign.apply(this, arguments);
|
64 | };
|
65 |
|
66 | function getInsidePosition(destPos, range, circular, bounce) {
|
67 | var toDestPos = destPos;
|
68 | var targetRange = [circular[0] ? range[0] : bounce ? range[0] - bounce[0] : range[0], circular[1] ? range[1] : bounce ? range[1] + bounce[1] : range[1]];
|
69 | toDestPos = Math.max(targetRange[0], toDestPos);
|
70 | toDestPos = Math.min(targetRange[1], toDestPos);
|
71 | return toDestPos;
|
72 | }
|
73 |
|
74 | function isOutside(pos, range) {
|
75 | return pos < range[0] || pos > range[1];
|
76 | }
|
77 | function getDuration(distance, deceleration) {
|
78 | var duration = Math.sqrt(distance / deceleration * 2);
|
79 |
|
80 | return duration < 100 ? 0 : duration;
|
81 | }
|
82 | function isCircularable(destPos, range, circular) {
|
83 | return circular[1] && destPos > range[1] || circular[0] && destPos < range[0];
|
84 | }
|
85 | function getCirculatedPos(pos, range, circular) {
|
86 | var toPos = pos;
|
87 | var min = range[0];
|
88 | var max = range[1];
|
89 | var length = max - min;
|
90 |
|
91 | if (circular[1] && pos > max) {
|
92 |
|
93 | toPos = (toPos - max) % length + min;
|
94 | }
|
95 |
|
96 | if (circular[0] && pos < min) {
|
97 |
|
98 | toPos = (toPos - min) % length + max;
|
99 | }
|
100 |
|
101 | return toPos;
|
102 | }
|
103 |
|
104 |
|
105 | var win;
|
106 |
|
107 | if (typeof window === "undefined") {
|
108 |
|
109 | win = {
|
110 | navigator: {
|
111 | userAgent: ""
|
112 | }
|
113 | };
|
114 | } else {
|
115 | win = window;
|
116 | }
|
117 |
|
118 | function toArray(nodes) {
|
119 |
|
120 |
|
121 | var el = [];
|
122 |
|
123 | for (var i = 0, len = nodes.length; i < len; i++) {
|
124 | el.push(nodes[i]);
|
125 | }
|
126 |
|
127 | return el;
|
128 | }
|
129 | function $(param, multi) {
|
130 | if (multi === void 0) {
|
131 | multi = false;
|
132 | }
|
133 |
|
134 | var el;
|
135 |
|
136 | if (typeof param === "string") {
|
137 |
|
138 |
|
139 | var match = param.match(/^<([a-z]+)\s*([^>]*)>/);
|
140 |
|
141 | if (match) {
|
142 |
|
143 | var dummy = document.createElement("div");
|
144 | dummy.innerHTML = param;
|
145 | el = toArray(dummy.childNodes);
|
146 | } else {
|
147 |
|
148 | el = toArray(document.querySelectorAll(param));
|
149 | }
|
150 |
|
151 | if (!multi) {
|
152 | el = el.length >= 1 ? el[0] : undefined;
|
153 | }
|
154 | } else if (param === win) {
|
155 |
|
156 | el = param;
|
157 | } else if (param.nodeName && (param.nodeType === 1 || param.nodeType === 9)) {
|
158 |
|
159 | el = param;
|
160 | } else if ("jQuery" in win && param instanceof jQuery || param.constructor.prototype.jquery) {
|
161 |
|
162 | el = multi ? param.toArray() : param.get(0);
|
163 | } else if (Array.isArray(param)) {
|
164 | el = param.map(function (v) {
|
165 | return $(v);
|
166 | });
|
167 |
|
168 | if (!multi) {
|
169 | el = el.length >= 1 ? el[0] : undefined;
|
170 | }
|
171 | }
|
172 |
|
173 | return el;
|
174 | }
|
175 | var raf = win.requestAnimationFrame || win.webkitRequestAnimationFrame;
|
176 | var caf = win.cancelAnimationFrame || win.webkitCancelAnimationFrame;
|
177 |
|
178 | if (raf && !caf) {
|
179 | var keyInfo_1 = {};
|
180 | var oldraf_1 = raf;
|
181 |
|
182 | raf = function (callback) {
|
183 | function wrapCallback(timestamp) {
|
184 | if (keyInfo_1[key]) {
|
185 | callback(timestamp);
|
186 | }
|
187 | }
|
188 |
|
189 | var key = oldraf_1(wrapCallback);
|
190 | keyInfo_1[key] = true;
|
191 | return key;
|
192 | };
|
193 |
|
194 | caf = function (key) {
|
195 | delete keyInfo_1[key];
|
196 | };
|
197 | } else if (!(raf && caf)) {
|
198 | raf = function (callback) {
|
199 | return win.setTimeout(function () {
|
200 | callback(win.performance && win.performance.now && win.performance.now() || new Date().getTime());
|
201 | }, 16);
|
202 | };
|
203 |
|
204 | caf = win.clearTimeout;
|
205 | }
|
206 | |
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | function requestAnimationFrame(fp) {
|
214 | return raf(fp);
|
215 | }
|
216 | |
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 | function cancelAnimationFrame(key) {
|
224 | caf(key);
|
225 | }
|
226 | function map(obj, callback) {
|
227 | var tranformed = {};
|
228 |
|
229 | for (var k in obj) {
|
230 | k && (tranformed[k] = callback(obj[k], k));
|
231 | }
|
232 |
|
233 | return tranformed;
|
234 | }
|
235 | function filter(obj, callback) {
|
236 | var filtered = {};
|
237 |
|
238 | for (var k in obj) {
|
239 | k && callback(obj[k], k) && (filtered[k] = obj[k]);
|
240 | }
|
241 |
|
242 | return filtered;
|
243 | }
|
244 | function every(obj, callback) {
|
245 | for (var k in obj) {
|
246 | if (k && !callback(obj[k], k)) {
|
247 | return false;
|
248 | }
|
249 | }
|
250 |
|
251 | return true;
|
252 | }
|
253 | function equal(target, base) {
|
254 | return every(target, function (v, k) {
|
255 | return v === base[k];
|
256 | });
|
257 | }
|
258 | var roundNumFunc = {};
|
259 | function roundNumber(num, roundUnit) {
|
260 |
|
261 | if (!roundNumFunc[roundUnit]) {
|
262 | roundNumFunc[roundUnit] = getRoundFunc(roundUnit);
|
263 | }
|
264 |
|
265 | return roundNumFunc[roundUnit](num);
|
266 | }
|
267 | function roundNumbers(num, roundUnit) {
|
268 | if (!num || !roundUnit) {
|
269 | return num;
|
270 | }
|
271 |
|
272 | var isNumber = typeof roundUnit === "number";
|
273 | return map(num, function (value, key) {
|
274 | return roundNumber(value, isNumber ? roundUnit : roundUnit[key]);
|
275 | });
|
276 | }
|
277 | function getDecimalPlace(val) {
|
278 | if (!isFinite(val)) {
|
279 | return 0;
|
280 | }
|
281 |
|
282 | var v = val + "";
|
283 |
|
284 | if (v.indexOf("e") >= 0) {
|
285 |
|
286 |
|
287 | var p = 0;
|
288 | var e = 1;
|
289 |
|
290 | while (Math.round(val * e) / e !== val) {
|
291 | e *= 10;
|
292 | p++;
|
293 | }
|
294 |
|
295 | return p;
|
296 | }
|
297 |
|
298 |
|
299 |
|
300 | return v.indexOf(".") >= 0 ? v.length - v.indexOf(".") - 1 : 0;
|
301 | }
|
302 | function inversePow(n) {
|
303 |
|
304 |
|
305 | return 1 / Math.pow(10, n);
|
306 | }
|
307 | function getRoundFunc(v) {
|
308 | var p = v < 1 ? Math.pow(10, getDecimalPlace(v)) : 1;
|
309 | return function (n) {
|
310 | if (v === 0) {
|
311 | return 0;
|
312 | }
|
313 |
|
314 | return Math.round(Math.round(n / v) * v * p) / p;
|
315 | };
|
316 | }
|
317 |
|
318 | function minMax(value, min, max) {
|
319 | return Math.max(Math.min(value, max), min);
|
320 | }
|
321 |
|
322 | var AnimationManager =
|
323 |
|
324 | function () {
|
325 | function AnimationManager(_a) {
|
326 | var options = _a.options,
|
327 | itm = _a.itm,
|
328 | em = _a.em,
|
329 | axm = _a.axm;
|
330 | this.options = options;
|
331 | this.itm = itm;
|
332 | this.em = em;
|
333 | this.axm = axm;
|
334 | this.animationEnd = this.animationEnd.bind(this);
|
335 | }
|
336 |
|
337 | var __proto = AnimationManager.prototype;
|
338 |
|
339 | __proto.getDuration = function (depaPos, destPos, wishDuration) {
|
340 | var _this = this;
|
341 |
|
342 | var duration;
|
343 |
|
344 | if (typeof wishDuration !== "undefined") {
|
345 | duration = wishDuration;
|
346 | } else {
|
347 | var durations_1 = map(destPos, function (v, k) {
|
348 | return getDuration(Math.abs(v - depaPos[k]), _this.options.deceleration);
|
349 | });
|
350 | duration = Object.keys(durations_1).reduce(function (max, v) {
|
351 | return Math.max(max, durations_1[v]);
|
352 | }, -Infinity);
|
353 | }
|
354 |
|
355 | return minMax(duration, this.options.minimumDuration, this.options.maximumDuration);
|
356 | };
|
357 |
|
358 | __proto.createAnimationParam = function (pos, duration, option) {
|
359 | var depaPos = this.axm.get();
|
360 | var destPos = pos;
|
361 | var inputEvent = option && option.event || null;
|
362 | return {
|
363 | depaPos: depaPos,
|
364 | destPos: destPos,
|
365 | duration: minMax(duration, this.options.minimumDuration, this.options.maximumDuration),
|
366 | delta: this.axm.getDelta(depaPos, destPos),
|
367 | inputEvent: inputEvent,
|
368 | input: option && option.input || null,
|
369 | isTrusted: !!inputEvent,
|
370 | done: this.animationEnd
|
371 | };
|
372 | };
|
373 |
|
374 | __proto.grab = function (axes, option) {
|
375 | if (this._animateParam && axes.length) {
|
376 | var orgPos_1 = this.axm.get(axes);
|
377 | var pos = this.axm.map(orgPos_1, function (v, opt) {
|
378 | return getCirculatedPos(v, opt.range, opt.circular);
|
379 | });
|
380 |
|
381 | if (!every(pos, function (v, k) {
|
382 | return orgPos_1[k] === v;
|
383 | })) {
|
384 | this.em.triggerChange(pos, false, orgPos_1, option, !!option);
|
385 | }
|
386 |
|
387 | this._animateParam = null;
|
388 | this._raf && cancelAnimationFrame(this._raf);
|
389 | this._raf = null;
|
390 | this.em.triggerAnimationEnd(!!(option && option.event));
|
391 | }
|
392 | };
|
393 |
|
394 | __proto.getEventInfo = function () {
|
395 | if (this._animateParam && this._animateParam.input && this._animateParam.inputEvent) {
|
396 | return {
|
397 | input: this._animateParam.input,
|
398 | event: this._animateParam.inputEvent
|
399 | };
|
400 | } else {
|
401 | return null;
|
402 | }
|
403 | };
|
404 |
|
405 | __proto.restore = function (option) {
|
406 | var pos = this.axm.get();
|
407 | var destPos = this.axm.map(pos, function (v, opt) {
|
408 | return Math.min(opt.range[1], Math.max(opt.range[0], v));
|
409 | });
|
410 | this.animateTo(destPos, this.getDuration(pos, destPos), option);
|
411 | };
|
412 |
|
413 | __proto.animationEnd = function () {
|
414 | var beforeParam = this.getEventInfo();
|
415 | this._animateParam = null;
|
416 |
|
417 | var circularTargets = this.axm.filter(this.axm.get(), function (v, opt) {
|
418 | return isCircularable(v, opt.range, opt.circular);
|
419 | });
|
420 | Object.keys(circularTargets).length > 0 && this.setTo(this.axm.map(circularTargets, function (v, opt) {
|
421 | return getCirculatedPos(v, opt.range, opt.circular);
|
422 | }));
|
423 | this.itm.setInterrupt(false);
|
424 | this.em.triggerAnimationEnd(!!beforeParam);
|
425 |
|
426 | if (this.axm.isOutside()) {
|
427 | this.restore(beforeParam);
|
428 | } else {
|
429 | this.finish(!!beforeParam);
|
430 | }
|
431 | };
|
432 |
|
433 | __proto.finish = function (isTrusted) {
|
434 | this._animateParam = null;
|
435 | this.itm.setInterrupt(false);
|
436 | this.em.triggerFinish(isTrusted);
|
437 | };
|
438 |
|
439 | __proto.animateLoop = function (param, complete) {
|
440 | if (param.duration) {
|
441 | this._animateParam = __assign({}, param);
|
442 | var info_1 = this._animateParam;
|
443 | var self_1 = this;
|
444 | var destPos_1 = info_1.destPos;
|
445 | var prevPos_1 = info_1.depaPos;
|
446 | var prevEasingPer_1 = 0;
|
447 | var directions_1 = map(prevPos_1, function (value, key) {
|
448 | return value <= destPos_1[key] ? 1 : -1;
|
449 | });
|
450 | var originalIntendedPos_1 = map(destPos_1, function (v) {
|
451 | return v;
|
452 | });
|
453 | var prevTime_1 = new Date().getTime();
|
454 | info_1.startTime = prevTime_1;
|
455 |
|
456 | (function loop() {
|
457 | self_1._raf = null;
|
458 | var currentTime = new Date().getTime();
|
459 | var ratio = (currentTime - info_1.startTime) / param.duration;
|
460 | var easingPer = self_1.easing(ratio);
|
461 | var toPos = self_1.axm.map(prevPos_1, function (pos, options, key) {
|
462 | var nextPos = ratio >= 1 ? destPos_1[key] : pos + info_1.delta[key] * (easingPer - prevEasingPer_1);
|
463 |
|
464 |
|
465 |
|
466 | var circulatedPos = getCirculatedPos(nextPos, options.range, options.circular);
|
467 |
|
468 | if (nextPos !== circulatedPos) {
|
469 |
|
470 | var rangeOffset = directions_1[key] * (options.range[1] - options.range[0]);
|
471 | destPos_1[key] -= rangeOffset;
|
472 | prevPos_1[key] -= rangeOffset;
|
473 | }
|
474 |
|
475 | return circulatedPos;
|
476 | });
|
477 | var isCanceled = !self_1.em.triggerChange(toPos, false, prevPos_1);
|
478 | prevPos_1 = toPos;
|
479 | prevTime_1 = currentTime;
|
480 | prevEasingPer_1 = easingPer;
|
481 |
|
482 | if (easingPer >= 1) {
|
483 | destPos_1 = self_1.getFinalPos(destPos_1, originalIntendedPos_1);
|
484 |
|
485 | if (!equal(destPos_1, self_1.axm.get(Object.keys(destPos_1)))) {
|
486 | self_1.em.triggerChange(destPos_1, true, prevPos_1);
|
487 | }
|
488 |
|
489 | complete();
|
490 | return;
|
491 | } else if (isCanceled) {
|
492 | self_1.finish(false);
|
493 | } else {
|
494 |
|
495 | self_1._raf = requestAnimationFrame(loop);
|
496 | }
|
497 | })();
|
498 | } else {
|
499 | this.em.triggerChange(param.destPos, true);
|
500 | complete();
|
501 | }
|
502 | };
|
503 | |
504 |
|
505 |
|
506 |
|
507 |
|
508 |
|
509 |
|
510 |
|
511 |
|
512 |
|
513 |
|
514 |
|
515 |
|
516 | __proto.getFinalPos = function (destPos, originalIntendedPos) {
|
517 | var _this = this;
|
518 |
|
519 |
|
520 | var ERROR_LIMIT = 0.000001;
|
521 | var finalPos = map(destPos, function (value, key) {
|
522 | if (value >= originalIntendedPos[key] - ERROR_LIMIT && value <= originalIntendedPos[key] + ERROR_LIMIT) {
|
523 |
|
524 | return originalIntendedPos[key];
|
525 | } else {
|
526 |
|
527 | var roundUnit = _this.getRoundUnit(value, key);
|
528 |
|
529 | var result = roundNumber(value, roundUnit);
|
530 | return result;
|
531 | }
|
532 | });
|
533 | return finalPos;
|
534 | };
|
535 |
|
536 | __proto.getRoundUnit = function (val, key) {
|
537 | var roundUnit = this.options.round;
|
538 |
|
539 | var minRoundUnit = null;
|
540 |
|
541 |
|
542 | if (!roundUnit) {
|
543 |
|
544 | var options = this.axm.getAxisOptions(key);
|
545 | minRoundUnit = inversePow(Math.max(getDecimalPlace(options.range[0]), getDecimalPlace(options.range[1]), getDecimalPlace(val)));
|
546 | }
|
547 |
|
548 | return minRoundUnit || roundUnit;
|
549 | };
|
550 |
|
551 | __proto.getUserControll = function (param) {
|
552 | var userWish = param.setTo();
|
553 | userWish.destPos = this.axm.get(userWish.destPos);
|
554 | userWish.duration = minMax(userWish.duration, this.options.minimumDuration, this.options.maximumDuration);
|
555 | return userWish;
|
556 | };
|
557 |
|
558 | __proto.animateTo = function (destPos, duration, option) {
|
559 | var _this = this;
|
560 |
|
561 | var param = this.createAnimationParam(destPos, duration, option);
|
562 |
|
563 | var depaPos = __assign({}, param.depaPos);
|
564 |
|
565 | var retTrigger = this.em.triggerAnimationStart(param);
|
566 |
|
567 | var userWish = this.getUserControll(param);
|
568 |
|
569 | if (!retTrigger && this.axm.every(userWish.destPos, function (v, opt) {
|
570 | return isCircularable(v, opt.range, opt.circular);
|
571 | })) {
|
572 | console.warn("You can't stop the 'animation' event when 'circular' is true.");
|
573 | }
|
574 |
|
575 | if (retTrigger && !equal(userWish.destPos, depaPos)) {
|
576 | var inputEvent = option && option.event || null;
|
577 | this.animateLoop({
|
578 | depaPos: depaPos,
|
579 | destPos: userWish.destPos,
|
580 | duration: userWish.duration,
|
581 | delta: this.axm.getDelta(depaPos, userWish.destPos),
|
582 | isTrusted: !!inputEvent,
|
583 | inputEvent: inputEvent,
|
584 | input: option && option.input || null
|
585 | }, function () {
|
586 | return _this.animationEnd();
|
587 | });
|
588 | }
|
589 | };
|
590 |
|
591 | __proto.easing = function (p) {
|
592 | return p > 1 ? 1 : this.options.easing(p);
|
593 | };
|
594 |
|
595 | __proto.setTo = function (pos, duration) {
|
596 | if (duration === void 0) {
|
597 | duration = 0;
|
598 | }
|
599 |
|
600 | var axes = Object.keys(pos);
|
601 | this.grab(axes);
|
602 | var orgPos = this.axm.get(axes);
|
603 |
|
604 | if (equal(pos, orgPos)) {
|
605 | return this;
|
606 | }
|
607 |
|
608 | this.itm.setInterrupt(true);
|
609 | var movedPos = filter(pos, function (v, k) {
|
610 | return orgPos[k] !== v;
|
611 | });
|
612 |
|
613 | if (!Object.keys(movedPos).length) {
|
614 | return this;
|
615 | }
|
616 |
|
617 | movedPos = this.axm.map(movedPos, function (v, opt) {
|
618 | var range = opt.range,
|
619 | circular = opt.circular;
|
620 |
|
621 | if (circular && (circular[0] || circular[1])) {
|
622 | return v;
|
623 | } else {
|
624 | return getInsidePosition(v, range, circular);
|
625 | }
|
626 | });
|
627 |
|
628 | if (equal(movedPos, orgPos)) {
|
629 | return this;
|
630 | }
|
631 |
|
632 | if (duration > 0) {
|
633 | this.animateTo(movedPos, duration);
|
634 | } else {
|
635 | this.em.triggerChange(movedPos);
|
636 | this.finish(false);
|
637 | }
|
638 |
|
639 | return this;
|
640 | };
|
641 |
|
642 | __proto.setBy = function (pos, duration) {
|
643 | if (duration === void 0) {
|
644 | duration = 0;
|
645 | }
|
646 |
|
647 | return this.setTo(map(this.axm.get(Object.keys(pos)), function (v, k) {
|
648 | return v + pos[k];
|
649 | }), duration);
|
650 | };
|
651 |
|
652 | return AnimationManager;
|
653 | }();
|
654 |
|
655 | var EventManager =
|
656 |
|
657 | function () {
|
658 | function EventManager(axes) {
|
659 | this.axes = axes;
|
660 | }
|
661 | |
662 |
|
663 |
|
664 |
|
665 |
|
666 |
|
667 |
|
668 |
|
669 |
|
670 |
|
671 |
|
672 |
|
673 |
|
674 |
|
675 |
|
676 |
|
677 |
|
678 |
|
679 |
|
680 |
|
681 |
|
682 |
|
683 |
|
684 |
|
685 |
|
686 |
|
687 |
|
688 |
|
689 | var __proto = EventManager.prototype;
|
690 |
|
691 | __proto.triggerHold = function (pos, option) {
|
692 | var roundPos = this.getRoundPos(pos).roundPos;
|
693 | this.axes.trigger("hold", {
|
694 | pos: roundPos,
|
695 | input: option.input || null,
|
696 | inputEvent: option.event || null,
|
697 | isTrusted: true
|
698 | });
|
699 | };
|
700 | |
701 |
|
702 |
|
703 |
|
704 |
|
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 |
|
731 |
|
732 |
|
733 |
|
734 |
|
735 |
|
736 |
|
737 |
|
738 | |
739 |
|
740 |
|
741 |
|
742 |
|
743 |
|
744 |
|
745 |
|
746 |
|
747 |
|
748 |
|
749 |
|
750 |
|
751 |
|
752 |
|
753 |
|
754 |
|
755 |
|
756 |
|
757 |
|
758 |
|
759 |
|
760 |
|
761 |
|
762 |
|
763 |
|
764 |
|
765 |
|
766 |
|
767 |
|
768 |
|
769 |
|
770 |
|
771 |
|
772 |
|
773 |
|
774 |
|
775 | __proto.triggerRelease = function (param) {
|
776 | var _a = this.getRoundPos(param.destPos, param.depaPos),
|
777 | roundPos = _a.roundPos,
|
778 | roundDepa = _a.roundDepa;
|
779 |
|
780 | param.destPos = roundPos;
|
781 | param.depaPos = roundDepa;
|
782 | param.setTo = this.createUserControll(param.destPos, param.duration);
|
783 | this.axes.trigger("release", param);
|
784 | };
|
785 | |
786 |
|
787 |
|
788 |
|
789 |
|
790 |
|
791 |
|
792 |
|
793 |
|
794 |
|
795 |
|
796 |
|
797 |
|
798 |
|
799 |
|
800 |
|
801 |
|
802 |
|
803 |
|
804 |
|
805 |
|
806 |
|
807 |
|
808 |
|
809 |
|
810 |
|
811 |
|
812 |
|
813 |
|
814 |
|
815 |
|
816 |
|
817 |
|
818 |
|
819 |
|
820 |
|
821 |
|
822 |
|
823 | __proto.triggerChange = function (pos, isAccurate, depaPos, option, holding) {
|
824 | if (holding === void 0) {
|
825 | holding = false;
|
826 | }
|
827 |
|
828 | var am = this.am;
|
829 | var axm = am.axm;
|
830 | var eventInfo = am.getEventInfo();
|
831 |
|
832 | var _a = this.getRoundPos(pos, depaPos),
|
833 | roundPos = _a.roundPos,
|
834 | roundDepa = _a.roundDepa;
|
835 |
|
836 | var moveTo = axm.moveTo(roundPos, roundDepa);
|
837 | var inputEvent = option && option.event || eventInfo && eventInfo.event || null;
|
838 | var param = {
|
839 | pos: moveTo.pos,
|
840 | delta: moveTo.delta,
|
841 | holding: holding,
|
842 | inputEvent: inputEvent,
|
843 | isTrusted: !!inputEvent,
|
844 | input: option && option.input || eventInfo && eventInfo.input || null,
|
845 | set: inputEvent ? this.createUserControll(moveTo.pos) : function () {}
|
846 | };
|
847 | var result = this.axes.trigger("change", param);
|
848 | inputEvent && axm.set(param.set()["destPos"]);
|
849 | return result;
|
850 | };
|
851 | |
852 |
|
853 |
|
854 |
|
855 |
|
856 |
|
857 |
|
858 |
|
859 |
|
860 |
|
861 |
|
862 |
|
863 |
|
864 |
|
865 |
|
866 |
|
867 |
|
868 |
|
869 |
|
870 |
|
871 |
|
872 |
|
873 |
|
874 |
|
875 |
|
876 |
|
877 |
|
878 |
|
879 |
|
880 |
|
881 |
|
882 |
|
883 |
|
884 |
|
885 |
|
886 |
|
887 |
|
888 |
|
889 | __proto.triggerAnimationStart = function (param) {
|
890 | var _a = this.getRoundPos(param.destPos, param.depaPos),
|
891 | roundPos = _a.roundPos,
|
892 | roundDepa = _a.roundDepa;
|
893 |
|
894 | param.destPos = roundPos;
|
895 | param.depaPos = roundDepa;
|
896 | param.setTo = this.createUserControll(param.destPos, param.duration);
|
897 | return this.axes.trigger("animationStart", param);
|
898 | };
|
899 | |
900 |
|
901 |
|
902 |
|
903 |
|
904 |
|
905 |
|
906 |
|
907 |
|
908 |
|
909 |
|
910 |
|
911 |
|
912 |
|
913 |
|
914 |
|
915 |
|
916 |
|
917 |
|
918 |
|
919 |
|
920 |
|
921 | __proto.triggerAnimationEnd = function (isTrusted) {
|
922 | if (isTrusted === void 0) {
|
923 | isTrusted = false;
|
924 | }
|
925 |
|
926 | this.axes.trigger("animationEnd", {
|
927 | isTrusted: isTrusted
|
928 | });
|
929 | };
|
930 | |
931 |
|
932 |
|
933 |
|
934 |
|
935 |
|
936 |
|
937 |
|
938 |
|
939 |
|
940 |
|
941 |
|
942 |
|
943 |
|
944 |
|
945 |
|
946 |
|
947 |
|
948 |
|
949 |
|
950 |
|
951 |
|
952 | __proto.triggerFinish = function (isTrusted) {
|
953 | if (isTrusted === void 0) {
|
954 | isTrusted = false;
|
955 | }
|
956 |
|
957 | this.axes.trigger("finish", {
|
958 | isTrusted: isTrusted
|
959 | });
|
960 | };
|
961 |
|
962 | __proto.createUserControll = function (pos, duration) {
|
963 | if (duration === void 0) {
|
964 | duration = 0;
|
965 | }
|
966 |
|
967 |
|
968 | var userControl = {
|
969 | destPos: __assign({}, pos),
|
970 | duration: duration
|
971 | };
|
972 | return function (toPos, userDuration) {
|
973 | toPos && (userControl.destPos = __assign({}, toPos));
|
974 | userDuration !== undefined && (userControl.duration = userDuration);
|
975 | return userControl;
|
976 | };
|
977 | };
|
978 |
|
979 | __proto.setAnimationManager = function (am) {
|
980 | this.am = am;
|
981 | };
|
982 |
|
983 | __proto.destroy = function () {
|
984 | this.axes.off();
|
985 | };
|
986 |
|
987 | __proto.getRoundPos = function (pos, depaPos) {
|
988 |
|
989 | var roundUnit = this.axes.options.round;
|
990 |
|
991 |
|
992 |
|
993 | return {
|
994 | roundPos: roundNumbers(pos, roundUnit),
|
995 | roundDepa: roundNumbers(depaPos, roundUnit)
|
996 | };
|
997 | };
|
998 |
|
999 | return EventManager;
|
1000 | }();
|
1001 |
|
1002 | var InterruptManager =
|
1003 |
|
1004 | function () {
|
1005 | function InterruptManager(options) {
|
1006 | this.options = options;
|
1007 | this._prevented = false;
|
1008 | }
|
1009 |
|
1010 | var __proto = InterruptManager.prototype;
|
1011 |
|
1012 | __proto.isInterrupting = function () {
|
1013 |
|
1014 | return this.options.interruptable || this._prevented;
|
1015 | };
|
1016 |
|
1017 | __proto.isInterrupted = function () {
|
1018 | return !this.options.interruptable && this._prevented;
|
1019 | };
|
1020 |
|
1021 | __proto.setInterrupt = function (prevented) {
|
1022 | !this.options.interruptable && (this._prevented = prevented);
|
1023 | };
|
1024 |
|
1025 | return InterruptManager;
|
1026 | }();
|
1027 |
|
1028 | var AxisManager =
|
1029 |
|
1030 | function () {
|
1031 | function AxisManager(axis, options) {
|
1032 | var _this = this;
|
1033 |
|
1034 | this.axis = axis;
|
1035 | this.options = options;
|
1036 |
|
1037 | this._complementOptions();
|
1038 |
|
1039 | this._pos = Object.keys(this.axis).reduce(function (acc, v) {
|
1040 | acc[v] = _this.axis[v].range[0];
|
1041 | return acc;
|
1042 | }, {});
|
1043 | }
|
1044 | |
1045 |
|
1046 |
|
1047 |
|
1048 |
|
1049 |
|
1050 | var __proto = AxisManager.prototype;
|
1051 |
|
1052 | __proto._complementOptions = function () {
|
1053 | var _this = this;
|
1054 |
|
1055 | Object.keys(this.axis).forEach(function (axis) {
|
1056 | _this.axis[axis] = __assign({
|
1057 | range: [0, 100],
|
1058 | bounce: [0, 0],
|
1059 | circular: [false, false]
|
1060 | }, _this.axis[axis]);
|
1061 | ["bounce", "circular"].forEach(function (v) {
|
1062 | var axisOption = _this.axis;
|
1063 | var key = axisOption[axis][v];
|
1064 |
|
1065 | if (/string|number|boolean/.test(typeof key)) {
|
1066 | axisOption[axis][v] = [key, key];
|
1067 | }
|
1068 | });
|
1069 | });
|
1070 | };
|
1071 |
|
1072 | __proto.getDelta = function (depaPos, destPos) {
|
1073 | var fullDepaPos = this.get(depaPos);
|
1074 | return map(this.get(destPos), function (v, k) {
|
1075 | return v - fullDepaPos[k];
|
1076 | });
|
1077 | };
|
1078 |
|
1079 | __proto.get = function (axes) {
|
1080 | var _this = this;
|
1081 |
|
1082 | if (axes && Array.isArray(axes)) {
|
1083 | return axes.reduce(function (acc, v) {
|
1084 | if (v && v in _this._pos) {
|
1085 | acc[v] = _this._pos[v];
|
1086 | }
|
1087 |
|
1088 | return acc;
|
1089 | }, {});
|
1090 | } else {
|
1091 | return __assign(__assign({}, this._pos), axes || {});
|
1092 | }
|
1093 | };
|
1094 |
|
1095 | __proto.moveTo = function (pos, depaPos) {
|
1096 | if (depaPos === void 0) {
|
1097 | depaPos = this._pos;
|
1098 | }
|
1099 |
|
1100 | var delta = map(this._pos, function (v, key) {
|
1101 | return key in pos && key in depaPos ? pos[key] - depaPos[key] : 0;
|
1102 | });
|
1103 | this.set(this.map(pos, function (v, opt) {
|
1104 | return opt ? getCirculatedPos(v, opt.range, opt.circular) : 0;
|
1105 | }));
|
1106 | return {
|
1107 | pos: __assign({}, this._pos),
|
1108 | delta: delta
|
1109 | };
|
1110 | };
|
1111 |
|
1112 | __proto.set = function (pos) {
|
1113 | for (var k in pos) {
|
1114 | if (k && k in this._pos) {
|
1115 | this._pos[k] = pos[k];
|
1116 | }
|
1117 | }
|
1118 | };
|
1119 |
|
1120 | __proto.every = function (pos, callback) {
|
1121 | var axisOptions = this.axis;
|
1122 | return every(pos, function (value, key) {
|
1123 | return callback(value, axisOptions[key], key);
|
1124 | });
|
1125 | };
|
1126 |
|
1127 | __proto.filter = function (pos, callback) {
|
1128 | var axisOptions = this.axis;
|
1129 | return filter(pos, function (value, key) {
|
1130 | return callback(value, axisOptions[key], key);
|
1131 | });
|
1132 | };
|
1133 |
|
1134 | __proto.map = function (pos, callback) {
|
1135 | var axisOptions = this.axis;
|
1136 | return map(pos, function (value, key) {
|
1137 | return callback(value, axisOptions[key], key);
|
1138 | });
|
1139 | };
|
1140 |
|
1141 | __proto.isOutside = function (axes) {
|
1142 | return !this.every(axes ? this.get(axes) : this._pos, function (v, opt) {
|
1143 | return !isOutside(v, opt.range);
|
1144 | });
|
1145 | };
|
1146 |
|
1147 | __proto.getAxisOptions = function (key) {
|
1148 | return this.axis[key];
|
1149 | };
|
1150 |
|
1151 | return AxisManager;
|
1152 | }();
|
1153 |
|
1154 | var InputObserver =
|
1155 |
|
1156 | function () {
|
1157 | function InputObserver(_a) {
|
1158 | var options = _a.options,
|
1159 | itm = _a.itm,
|
1160 | em = _a.em,
|
1161 | axm = _a.axm,
|
1162 | am = _a.am;
|
1163 | this.isOutside = false;
|
1164 | this.moveDistance = null;
|
1165 | this.isStopped = false;
|
1166 | this.options = options;
|
1167 | this.itm = itm;
|
1168 | this.em = em;
|
1169 | this.axm = axm;
|
1170 | this.am = am;
|
1171 | }
|
1172 |
|
1173 |
|
1174 | var __proto = InputObserver.prototype;
|
1175 |
|
1176 | __proto.atOutside = function (pos) {
|
1177 | var _this = this;
|
1178 |
|
1179 | if (this.isOutside) {
|
1180 | return this.axm.map(pos, function (v, opt) {
|
1181 | var tn = opt.range[0] - opt.bounce[0];
|
1182 | var tx = opt.range[1] + opt.bounce[1];
|
1183 | return v > tx ? tx : v < tn ? tn : v;
|
1184 | });
|
1185 | } else {
|
1186 |
|
1187 |
|
1188 | var initSlope_1 = this.am.easing(0.00001) / 0.00001;
|
1189 | return this.axm.map(pos, function (v, opt) {
|
1190 | var min = opt.range[0];
|
1191 | var max = opt.range[1];
|
1192 | var out = opt.bounce;
|
1193 | var circular = opt.circular;
|
1194 |
|
1195 | if (circular && (circular[0] || circular[1])) {
|
1196 | return v;
|
1197 | } else if (v < min) {
|
1198 |
|
1199 | return min - _this.am.easing((min - v) / (out[0] * initSlope_1)) * out[0];
|
1200 | } else if (v > max) {
|
1201 |
|
1202 | return max + _this.am.easing((v - max) / (out[1] * initSlope_1)) * out[1];
|
1203 | }
|
1204 |
|
1205 | return v;
|
1206 | });
|
1207 | }
|
1208 | };
|
1209 |
|
1210 | __proto.get = function (input) {
|
1211 | return this.axm.get(input.axes);
|
1212 | };
|
1213 |
|
1214 | __proto.hold = function (input, event) {
|
1215 | if (this.itm.isInterrupted() || !input.axes.length) {
|
1216 | return;
|
1217 | }
|
1218 |
|
1219 | var changeOption = {
|
1220 | input: input,
|
1221 | event: event
|
1222 | };
|
1223 | this.isStopped = false;
|
1224 | this.itm.setInterrupt(true);
|
1225 | this.am.grab(input.axes, changeOption);
|
1226 | !this.moveDistance && this.em.triggerHold(this.axm.get(), changeOption);
|
1227 | this.isOutside = this.axm.isOutside(input.axes);
|
1228 | this.moveDistance = this.axm.get(input.axes);
|
1229 | };
|
1230 |
|
1231 | __proto.change = function (input, event, offset) {
|
1232 | if (this.isStopped || !this.itm.isInterrupting() || this.axm.every(offset, function (v) {
|
1233 | return v === 0;
|
1234 | })) {
|
1235 | return;
|
1236 | }
|
1237 |
|
1238 | var depaPos = this.moveDistance || this.axm.get(input.axes);
|
1239 | var destPos;
|
1240 |
|
1241 | destPos = map(depaPos, function (v, k) {
|
1242 | return v + (offset[k] || 0);
|
1243 | });
|
1244 | this.moveDistance && (this.moveDistance = destPos);
|
1245 |
|
1246 | if (this.isOutside && this.axm.every(depaPos, function (v, opt) {
|
1247 | return !isOutside(v, opt.range);
|
1248 | })) {
|
1249 | this.isOutside = false;
|
1250 | }
|
1251 |
|
1252 | depaPos = this.atOutside(depaPos);
|
1253 | destPos = this.atOutside(destPos);
|
1254 | var isCanceled = !this.em.triggerChange(destPos, false, depaPos, {
|
1255 | input: input,
|
1256 | event: event
|
1257 | }, true);
|
1258 |
|
1259 | if (isCanceled) {
|
1260 | this.isStopped = true;
|
1261 | this.moveDistance = null;
|
1262 | this.am.finish(false);
|
1263 | }
|
1264 | };
|
1265 |
|
1266 | __proto.release = function (input, event, offset, inputDuration) {
|
1267 | if (this.isStopped || !this.itm.isInterrupting() || !this.moveDistance) {
|
1268 | return;
|
1269 | }
|
1270 |
|
1271 | var pos = this.axm.get(input.axes);
|
1272 | var depaPos = this.axm.get();
|
1273 | var destPos = this.axm.get(this.axm.map(offset, function (v, opt, k) {
|
1274 | if (opt.circular && (opt.circular[0] || opt.circular[1])) {
|
1275 | return pos[k] + v;
|
1276 | } else {
|
1277 | return getInsidePosition(pos[k] + v, opt.range, opt.circular, opt.bounce);
|
1278 | }
|
1279 | }));
|
1280 | var duration = this.am.getDuration(destPos, pos, inputDuration);
|
1281 |
|
1282 | if (duration === 0) {
|
1283 | destPos = __assign({}, depaPos);
|
1284 | }
|
1285 |
|
1286 |
|
1287 | var param = {
|
1288 | depaPos: depaPos,
|
1289 | destPos: destPos,
|
1290 | duration: duration,
|
1291 | delta: this.axm.getDelta(depaPos, destPos),
|
1292 | inputEvent: event,
|
1293 | input: input,
|
1294 | isTrusted: true
|
1295 | };
|
1296 | this.em.triggerRelease(param);
|
1297 | this.moveDistance = null;
|
1298 |
|
1299 | var userWish = this.am.getUserControll(param);
|
1300 | var isEqual = equal(userWish.destPos, depaPos);
|
1301 | var changeOption = {
|
1302 | input: input,
|
1303 | event: event
|
1304 | };
|
1305 |
|
1306 | if (isEqual || userWish.duration === 0) {
|
1307 | !isEqual && this.em.triggerChange(userWish.destPos, false, depaPos, changeOption, true);
|
1308 | this.itm.setInterrupt(false);
|
1309 |
|
1310 | if (this.axm.isOutside()) {
|
1311 | this.am.restore(changeOption);
|
1312 | } else {
|
1313 | this.em.triggerFinish(true);
|
1314 | }
|
1315 | } else {
|
1316 | this.am.animateTo(userWish.destPos, userWish.duration, changeOption);
|
1317 | }
|
1318 | };
|
1319 |
|
1320 | return InputObserver;
|
1321 | }();
|
1322 |
|
1323 |
|
1324 | var IOS_EDGE_THRESHOLD = 30;
|
1325 | var IS_IOS_SAFARI = "ontouchstart" in win && getAgent().browser.name === "safari";
|
1326 | var TRANSFORM = function () {
|
1327 | if (typeof document === "undefined") {
|
1328 | return "";
|
1329 | }
|
1330 |
|
1331 | var bodyStyle = (document.head || document.getElementsByTagName("head")[0]).style;
|
1332 | var target = ["transform", "webkitTransform", "msTransform", "mozTransform"];
|
1333 |
|
1334 | for (var i = 0, len = target.length; i < len; i++) {
|
1335 | if (target[i] in bodyStyle) {
|
1336 | return target[i];
|
1337 | }
|
1338 | }
|
1339 |
|
1340 | return "";
|
1341 | }();
|
1342 |
|
1343 | |
1344 |
|
1345 |
|
1346 |
|
1347 |
|
1348 |
|
1349 |
|
1350 |
|
1351 |
|
1352 |
|
1353 |
|
1354 |
|
1355 |
|
1356 |
|
1357 | |
1358 |
|
1359 |
|
1360 |
|
1361 |
|
1362 |
|
1363 |
|
1364 |
|
1365 |
|
1366 |
|
1367 |
|
1368 | |
1369 |
|
1370 |
|
1371 |
|
1372 |
|
1373 |
|
1374 |
|
1375 |
|
1376 |
|
1377 |
|
1378 |
|
1379 |
|
1380 |
|
1381 |
|
1382 |
|
1383 |
|
1384 |
|
1385 |
|
1386 |
|
1387 |
|
1388 |
|
1389 |
|
1390 |
|
1391 |
|
1392 |
|
1393 |
|
1394 |
|
1395 |
|
1396 |
|
1397 |
|
1398 |
|
1399 |
|
1400 |
|
1401 |
|
1402 |
|
1403 |
|
1404 |
|
1405 |
|
1406 |
|
1407 |
|
1408 |
|
1409 |
|
1410 |
|
1411 |
|
1412 |
|
1413 |
|
1414 |
|
1415 |
|
1416 |
|
1417 |
|
1418 |
|
1419 |
|
1420 |
|
1421 |
|
1422 |
|
1423 |
|
1424 |
|
1425 |
|
1426 |
|
1427 |
|
1428 |
|
1429 |
|
1430 |
|
1431 |
|
1432 |
|
1433 |
|
1434 |
|
1435 |
|
1436 |
|
1437 |
|
1438 | var Axes =
|
1439 |
|
1440 | function (_super) {
|
1441 | __extends(Axes, _super);
|
1442 |
|
1443 | function Axes(axis, options, startPos) {
|
1444 | if (axis === void 0) {
|
1445 | axis = {};
|
1446 | }
|
1447 |
|
1448 | if (options === void 0) {
|
1449 | options = {};
|
1450 | }
|
1451 |
|
1452 | var _this = _super.call(this) || this;
|
1453 |
|
1454 | _this.axis = axis;
|
1455 | _this._inputs = [];
|
1456 | _this.options = __assign({
|
1457 | easing: function easeOutCubic(x) {
|
1458 | return 1 - Math.pow(1 - x, 3);
|
1459 | },
|
1460 | interruptable: true,
|
1461 | maximumDuration: Infinity,
|
1462 | minimumDuration: 0,
|
1463 | deceleration: 0.0006,
|
1464 | round: null
|
1465 | }, options);
|
1466 | _this.itm = new InterruptManager(_this.options);
|
1467 | _this.axm = new AxisManager(_this.axis, _this.options);
|
1468 | _this.em = new EventManager(_this);
|
1469 | _this.am = new AnimationManager(_this);
|
1470 | _this.io = new InputObserver(_this);
|
1471 |
|
1472 | _this.em.setAnimationManager(_this.am);
|
1473 |
|
1474 | startPos && _this.em.triggerChange(startPos);
|
1475 | return _this;
|
1476 | }
|
1477 | |
1478 |
|
1479 |
|
1480 |
|
1481 |
|
1482 |
|
1483 |
|
1484 |
|
1485 |
|
1486 |
|
1487 |
|
1488 |
|
1489 |
|
1490 |
|
1491 |
|
1492 |
|
1493 |
|
1494 |
|
1495 |
|
1496 |
|
1497 |
|
1498 |
|
1499 |
|
1500 |
|
1501 |
|
1502 |
|
1503 | var __proto = Axes.prototype;
|
1504 |
|
1505 | __proto.connect = function (axes, inputType) {
|
1506 | var mapped;
|
1507 |
|
1508 | if (typeof axes === "string") {
|
1509 | mapped = axes.split(" ");
|
1510 | } else {
|
1511 | mapped = axes.concat();
|
1512 | }
|
1513 |
|
1514 |
|
1515 | if (~this._inputs.indexOf(inputType)) {
|
1516 | this.disconnect(inputType);
|
1517 | }
|
1518 |
|
1519 |
|
1520 | if ("hammer" in inputType) {
|
1521 | var targets = this._inputs.filter(function (v) {
|
1522 | return v.hammer && v.element === inputType.element;
|
1523 | });
|
1524 |
|
1525 | if (targets.length) {
|
1526 | inputType.hammer = targets[0].hammer;
|
1527 | }
|
1528 | }
|
1529 |
|
1530 | inputType.mapAxes(mapped);
|
1531 | inputType.connect(this.io);
|
1532 |
|
1533 | this._inputs.push(inputType);
|
1534 |
|
1535 | return this;
|
1536 | };
|
1537 | |
1538 |
|
1539 |
|
1540 |
|
1541 |
|
1542 |
|
1543 |
|
1544 |
|
1545 |
|
1546 |
|
1547 |
|
1548 |
|
1549 |
|
1550 |
|
1551 |
|
1552 |
|
1553 |
|
1554 |
|
1555 |
|
1556 |
|
1557 |
|
1558 |
|
1559 |
|
1560 |
|
1561 |
|
1562 |
|
1563 |
|
1564 |
|
1565 |
|
1566 | __proto.disconnect = function (inputType) {
|
1567 | if (inputType) {
|
1568 | var index = this._inputs.indexOf(inputType);
|
1569 |
|
1570 | if (index >= 0) {
|
1571 | this._inputs[index].disconnect();
|
1572 |
|
1573 | this._inputs.splice(index, 1);
|
1574 | }
|
1575 | } else {
|
1576 | this._inputs.forEach(function (v) {
|
1577 | return v.disconnect();
|
1578 | });
|
1579 |
|
1580 | this._inputs = [];
|
1581 | }
|
1582 |
|
1583 | return this;
|
1584 | };
|
1585 | |
1586 |
|
1587 |
|
1588 |
|
1589 |
|
1590 |
|
1591 |
|
1592 |
|
1593 |
|
1594 |
|
1595 |
|
1596 |
|
1597 |
|
1598 |
|
1599 |
|
1600 |
|
1601 |
|
1602 |
|
1603 |
|
1604 |
|
1605 |
|
1606 |
|
1607 |
|
1608 |
|
1609 | __proto.get = function (axes) {
|
1610 | return this.axm.get(axes);
|
1611 | };
|
1612 | |
1613 |
|
1614 |
|
1615 |
|
1616 |
|
1617 |
|
1618 |
|
1619 |
|
1620 |
|
1621 |
|
1622 |
|
1623 |
|
1624 |
|
1625 |
|
1626 |
|
1627 |
|
1628 |
|
1629 |
|
1630 |
|
1631 |
|
1632 |
|
1633 |
|
1634 |
|
1635 |
|
1636 |
|
1637 |
|
1638 |
|
1639 |
|
1640 |
|
1641 |
|
1642 | __proto.setTo = function (pos, duration) {
|
1643 | if (duration === void 0) {
|
1644 | duration = 0;
|
1645 | }
|
1646 |
|
1647 | this.am.setTo(pos, duration);
|
1648 | return this;
|
1649 | };
|
1650 | |
1651 |
|
1652 |
|
1653 |
|
1654 |
|
1655 |
|
1656 |
|
1657 |
|
1658 |
|
1659 |
|
1660 |
|
1661 |
|
1662 |
|
1663 |
|
1664 |
|
1665 |
|
1666 |
|
1667 |
|
1668 |
|
1669 |
|
1670 |
|
1671 |
|
1672 |
|
1673 |
|
1674 |
|
1675 |
|
1676 |
|
1677 |
|
1678 |
|
1679 |
|
1680 | __proto.setBy = function (pos, duration) {
|
1681 | if (duration === void 0) {
|
1682 | duration = 0;
|
1683 | }
|
1684 |
|
1685 | this.am.setBy(pos, duration);
|
1686 | return this;
|
1687 | };
|
1688 | |
1689 |
|
1690 |
|
1691 |
|
1692 |
|
1693 |
|
1694 |
|
1695 |
|
1696 |
|
1697 |
|
1698 |
|
1699 |
|
1700 |
|
1701 |
|
1702 |
|
1703 |
|
1704 |
|
1705 |
|
1706 |
|
1707 |
|
1708 |
|
1709 |
|
1710 |
|
1711 |
|
1712 |
|
1713 | __proto.isBounceArea = function (axes) {
|
1714 | return this.axm.isOutside(axes);
|
1715 | };
|
1716 | |
1717 |
|
1718 |
|
1719 |
|
1720 |
|
1721 |
|
1722 |
|
1723 | __proto.destroy = function () {
|
1724 | this.disconnect();
|
1725 | this.em.destroy();
|
1726 | };
|
1727 | |
1728 |
|
1729 |
|
1730 |
|
1731 |
|
1732 |
|
1733 |
|
1734 |
|
1735 |
|
1736 |
|
1737 |
|
1738 |
|
1739 | Axes.VERSION = "2.8.0";
|
1740 | |
1741 |
|
1742 |
|
1743 |
|
1744 |
|
1745 |
|
1746 |
|
1747 |
|
1748 |
|
1749 |
|
1750 |
|
1751 | Axes.TRANSFORM = TRANSFORM;
|
1752 | |
1753 |
|
1754 |
|
1755 |
|
1756 |
|
1757 |
|
1758 | Axes.DIRECTION_NONE = hammerjs.DIRECTION_NONE;
|
1759 | |
1760 |
|
1761 |
|
1762 |
|
1763 |
|
1764 |
|
1765 | Axes.DIRECTION_LEFT = hammerjs.DIRECTION_LEFT;
|
1766 | |
1767 |
|
1768 |
|
1769 |
|
1770 |
|
1771 |
|
1772 | Axes.DIRECTION_RIGHT = hammerjs.DIRECTION_RIGHT;
|
1773 | |
1774 |
|
1775 |
|
1776 |
|
1777 |
|
1778 |
|
1779 | Axes.DIRECTION_UP = hammerjs.DIRECTION_UP;
|
1780 | |
1781 |
|
1782 |
|
1783 |
|
1784 |
|
1785 |
|
1786 | Axes.DIRECTION_DOWN = hammerjs.DIRECTION_DOWN;
|
1787 | |
1788 |
|
1789 |
|
1790 |
|
1791 |
|
1792 |
|
1793 | Axes.DIRECTION_HORIZONTAL = hammerjs.DIRECTION_HORIZONTAL;
|
1794 | |
1795 |
|
1796 |
|
1797 |
|
1798 |
|
1799 |
|
1800 | Axes.DIRECTION_VERTICAL = hammerjs.DIRECTION_VERTICAL;
|
1801 | |
1802 |
|
1803 |
|
1804 |
|
1805 |
|
1806 |
|
1807 | Axes.DIRECTION_ALL = hammerjs.DIRECTION_ALL;
|
1808 | return Axes;
|
1809 | }(Component);
|
1810 |
|
1811 | var SUPPORT_POINTER_EVENTS = "PointerEvent" in win || "MSPointerEvent" in win;
|
1812 | var SUPPORT_TOUCH = ("ontouchstart" in win);
|
1813 | var UNIQUEKEY = "_EGJS_AXES_INPUTTYPE_";
|
1814 | function toAxis(source, offset) {
|
1815 | return offset.reduce(function (acc, v, i) {
|
1816 | if (source[i]) {
|
1817 | acc[source[i]] = v;
|
1818 | }
|
1819 |
|
1820 | return acc;
|
1821 | }, {});
|
1822 | }
|
1823 | function createHammer(element, options) {
|
1824 | try {
|
1825 |
|
1826 | return new hammerjs.Manager(element, __assign({}, options));
|
1827 | } catch (e) {
|
1828 | return null;
|
1829 | }
|
1830 | }
|
1831 | function convertInputType(inputType) {
|
1832 | if (inputType === void 0) {
|
1833 | inputType = [];
|
1834 | }
|
1835 |
|
1836 | var hasTouch = false;
|
1837 | var hasMouse = false;
|
1838 | var hasPointer = false;
|
1839 | inputType.forEach(function (v) {
|
1840 | switch (v) {
|
1841 | case "mouse":
|
1842 | hasMouse = true;
|
1843 | break;
|
1844 |
|
1845 | case "touch":
|
1846 | hasTouch = SUPPORT_TOUCH;
|
1847 | break;
|
1848 |
|
1849 | case "pointer":
|
1850 | hasPointer = SUPPORT_POINTER_EVENTS;
|
1851 |
|
1852 | }
|
1853 | });
|
1854 |
|
1855 | if (hasPointer) {
|
1856 | return hammerjs.PointerEventInput;
|
1857 | } else if (hasTouch && hasMouse) {
|
1858 | return hammerjs.TouchMouseInput;
|
1859 | } else if (hasTouch) {
|
1860 | return hammerjs.TouchInput;
|
1861 | } else if (hasMouse) {
|
1862 | return hammerjs.MouseInput;
|
1863 | }
|
1864 |
|
1865 | return null;
|
1866 | }
|
1867 |
|
1868 | function getDirectionByAngle(angle, thresholdAngle) {
|
1869 | if (thresholdAngle < 0 || thresholdAngle > 90) {
|
1870 | return hammerjs.DIRECTION_NONE;
|
1871 | }
|
1872 |
|
1873 | var toAngle = Math.abs(angle);
|
1874 | return toAngle > thresholdAngle && toAngle < 180 - thresholdAngle ? hammerjs.DIRECTION_VERTICAL : hammerjs.DIRECTION_HORIZONTAL;
|
1875 | }
|
1876 | function getNextOffset(speeds, deceleration) {
|
1877 | var normalSpeed = Math.sqrt(speeds[0] * speeds[0] + speeds[1] * speeds[1]);
|
1878 | var duration = Math.abs(normalSpeed / -deceleration);
|
1879 | return [speeds[0] / 2 * duration, speeds[1] / 2 * duration];
|
1880 | }
|
1881 | function useDirection(checkType, direction, userDirection) {
|
1882 | if (userDirection) {
|
1883 | return !!(direction === hammerjs.DIRECTION_ALL || direction & checkType && userDirection & checkType);
|
1884 | } else {
|
1885 | return !!(direction & checkType);
|
1886 | }
|
1887 | }
|
1888 | |
1889 |
|
1890 |
|
1891 |
|
1892 |
|
1893 |
|
1894 |
|
1895 |
|
1896 |
|
1897 |
|
1898 |
|
1899 |
|
1900 |
|
1901 | |
1902 |
|
1903 |
|
1904 |
|
1905 |
|
1906 |
|
1907 |
|
1908 |
|
1909 |
|
1910 |
|
1911 |
|
1912 |
|
1913 |
|
1914 |
|
1915 |
|
1916 |
|
1917 |
|
1918 |
|
1919 |
|
1920 |
|
1921 |
|
1922 |
|
1923 |
|
1924 |
|
1925 |
|
1926 | var PanInput =
|
1927 |
|
1928 | function () {
|
1929 | function PanInput(el, options) {
|
1930 | this.axes = [];
|
1931 | this.hammer = null;
|
1932 | this.element = null;
|
1933 | this.panRecognizer = null;
|
1934 | this.isRightEdge = false;
|
1935 | this.rightEdgeTimer = 0;
|
1936 | this.panFlag = false;
|
1937 | |
1938 |
|
1939 |
|
1940 |
|
1941 |
|
1942 |
|
1943 |
|
1944 |
|
1945 |
|
1946 | if (typeof hammerjs.Manager === "undefined") {
|
1947 | throw new Error("The Hammerjs must be loaded before eg.Axes.PanInput.\nhttp://hammerjs.github.io/");
|
1948 | }
|
1949 |
|
1950 | this.element = $(el);
|
1951 | this.options = __assign({
|
1952 | inputType: ["touch", "mouse", "pointer"],
|
1953 | scale: [1, 1],
|
1954 | thresholdAngle: 45,
|
1955 | threshold: 0,
|
1956 | iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
|
1957 | releaseOnScroll: false,
|
1958 | hammerManagerOptions: {
|
1959 |
|
1960 |
|
1961 | cssProps: {
|
1962 | userSelect: "none",
|
1963 | touchSelect: "none",
|
1964 | touchCallout: "none",
|
1965 | userDrag: "none"
|
1966 | }
|
1967 | }
|
1968 | }, options);
|
1969 | this.onHammerInput = this.onHammerInput.bind(this);
|
1970 | this.onPanmove = this.onPanmove.bind(this);
|
1971 | this.onPanend = this.onPanend.bind(this);
|
1972 | }
|
1973 |
|
1974 | var __proto = PanInput.prototype;
|
1975 |
|
1976 | __proto.mapAxes = function (axes) {
|
1977 | var useHorizontal = !!axes[0];
|
1978 | var useVertical = !!axes[1];
|
1979 |
|
1980 | if (useHorizontal && useVertical) {
|
1981 | this._direction = hammerjs.DIRECTION_ALL;
|
1982 | } else if (useHorizontal) {
|
1983 | this._direction = hammerjs.DIRECTION_HORIZONTAL;
|
1984 | } else if (useVertical) {
|
1985 | this._direction = hammerjs.DIRECTION_VERTICAL;
|
1986 | } else {
|
1987 | this._direction = hammerjs.DIRECTION_NONE;
|
1988 | }
|
1989 |
|
1990 | this.axes = axes;
|
1991 | };
|
1992 |
|
1993 | __proto.connect = function (observer) {
|
1994 | var hammerOption = {
|
1995 | direction: this._direction,
|
1996 | threshold: this.options.threshold
|
1997 | };
|
1998 |
|
1999 | if (this.hammer) {
|
2000 |
|
2001 |
|
2002 | this.removeRecognizer();
|
2003 | this.dettachEvent();
|
2004 | } else {
|
2005 | var keyValue = this.element[UNIQUEKEY];
|
2006 |
|
2007 | if (!keyValue) {
|
2008 | keyValue = String(Math.round(Math.random() * new Date().getTime()));
|
2009 | }
|
2010 |
|
2011 | var inputClass = convertInputType(this.options.inputType);
|
2012 |
|
2013 | if (!inputClass) {
|
2014 | throw new Error("Wrong inputType parameter!");
|
2015 | }
|
2016 |
|
2017 | this.hammer = createHammer(this.element, __assign({
|
2018 | inputClass: inputClass
|
2019 | }, this.options.hammerManagerOptions));
|
2020 | this.element[UNIQUEKEY] = keyValue;
|
2021 | }
|
2022 |
|
2023 | this.panRecognizer = new hammerjs.Pan(hammerOption);
|
2024 | this.hammer.add(this.panRecognizer);
|
2025 | this.attachEvent(observer);
|
2026 | return this;
|
2027 | };
|
2028 |
|
2029 | __proto.disconnect = function () {
|
2030 | this.removeRecognizer();
|
2031 |
|
2032 | if (this.hammer) {
|
2033 | this.dettachEvent();
|
2034 | }
|
2035 |
|
2036 | this._direction = hammerjs.DIRECTION_NONE;
|
2037 | return this;
|
2038 | };
|
2039 | |
2040 |
|
2041 |
|
2042 |
|
2043 |
|
2044 |
|
2045 |
|
2046 | __proto.destroy = function () {
|
2047 | this.disconnect();
|
2048 |
|
2049 | if (this.hammer && this.hammer.recognizers.length === 0) {
|
2050 | this.hammer.destroy();
|
2051 | }
|
2052 |
|
2053 | delete this.element[UNIQUEKEY];
|
2054 | this.element = null;
|
2055 | this.hammer = null;
|
2056 | };
|
2057 | |
2058 |
|
2059 |
|
2060 |
|
2061 |
|
2062 |
|
2063 |
|
2064 |
|
2065 | __proto.enable = function () {
|
2066 | this.hammer && (this.hammer.get("pan").options.enable = true);
|
2067 | return this;
|
2068 | };
|
2069 | |
2070 |
|
2071 |
|
2072 |
|
2073 |
|
2074 |
|
2075 |
|
2076 |
|
2077 | __proto.disable = function () {
|
2078 | this.hammer && (this.hammer.get("pan").options.enable = false);
|
2079 | return this;
|
2080 | };
|
2081 | |
2082 |
|
2083 |
|
2084 |
|
2085 |
|
2086 |
|
2087 |
|
2088 |
|
2089 | __proto.isEnable = function () {
|
2090 | return !!(this.hammer && this.hammer.get("pan").options.enable);
|
2091 | };
|
2092 |
|
2093 | __proto.removeRecognizer = function () {
|
2094 | if (this.hammer && this.panRecognizer) {
|
2095 | this.hammer.remove(this.panRecognizer);
|
2096 | this.panRecognizer = null;
|
2097 | }
|
2098 | };
|
2099 |
|
2100 | __proto.onHammerInput = function (event) {
|
2101 | if (this.isEnable()) {
|
2102 | if (event.isFirst) {
|
2103 | this.panFlag = false;
|
2104 |
|
2105 | if (event.srcEvent.cancelable !== false) {
|
2106 | var edgeThreshold = this.options.iOSEdgeSwipeThreshold;
|
2107 | this.observer.hold(this, event);
|
2108 | this.isRightEdge = IS_IOS_SAFARI && event.center.x > window.innerWidth - edgeThreshold;
|
2109 | this.panFlag = true;
|
2110 | }
|
2111 | } else if (event.isFinal) {
|
2112 | this.onPanend(event);
|
2113 | }
|
2114 | }
|
2115 | };
|
2116 |
|
2117 | __proto.onPanmove = function (event) {
|
2118 | var _this = this;
|
2119 |
|
2120 | if (!this.panFlag) {
|
2121 | return;
|
2122 | }
|
2123 |
|
2124 | var _a = this.options,
|
2125 | iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
|
2126 | releaseOnScroll = _a.releaseOnScroll;
|
2127 | var userDirection = getDirectionByAngle(event.angle, this.options.thresholdAngle);
|
2128 |
|
2129 | var prevInput = this.hammer.session.prevInput;
|
2130 |
|
2131 | if (releaseOnScroll && !event.srcEvent.cancelable) {
|
2132 | this.onPanend(__assign(__assign({}, event), {
|
2133 | velocityX: 0,
|
2134 | velocityY: 0,
|
2135 | offsetX: 0,
|
2136 | offsetY: 0
|
2137 | }));
|
2138 | return;
|
2139 | }
|
2140 |
|
2141 | if (prevInput && IS_IOS_SAFARI) {
|
2142 | var swipeLeftToRight = event.center.x < 0;
|
2143 |
|
2144 | if (swipeLeftToRight) {
|
2145 |
|
2146 | this.onPanend(__assign(__assign({}, prevInput), {
|
2147 | velocityX: 0,
|
2148 | velocityY: 0,
|
2149 | offsetX: 0,
|
2150 | offsetY: 0
|
2151 | }));
|
2152 | return;
|
2153 | } else if (this.isRightEdge) {
|
2154 | clearTimeout(this.rightEdgeTimer);
|
2155 |
|
2156 | var swipeRightToLeft = event.deltaX < -iOSEdgeSwipeThreshold;
|
2157 |
|
2158 | if (swipeRightToLeft) {
|
2159 | this.isRightEdge = false;
|
2160 | } else {
|
2161 |
|
2162 | this.rightEdgeTimer = window.setTimeout(function () {
|
2163 | _this.onPanend(__assign(__assign({}, prevInput), {
|
2164 | velocityX: 0,
|
2165 | velocityY: 0,
|
2166 | offsetX: 0,
|
2167 | offsetY: 0
|
2168 | }));
|
2169 | }, 100);
|
2170 | }
|
2171 | }
|
2172 | }
|
2173 |
|
2174 |
|
2175 |
|
2176 | if (prevInput) {
|
2177 | event.offsetX = event.deltaX - prevInput.deltaX;
|
2178 | event.offsetY = event.deltaY - prevInput.deltaY;
|
2179 | } else {
|
2180 | event.offsetX = 0;
|
2181 | event.offsetY = 0;
|
2182 | }
|
2183 |
|
2184 | var offset = this.getOffset([event.offsetX, event.offsetY], [useDirection(hammerjs.DIRECTION_HORIZONTAL, this._direction, userDirection), useDirection(hammerjs.DIRECTION_VERTICAL, this._direction, userDirection)]);
|
2185 | var prevent = offset.some(function (v) {
|
2186 | return v !== 0;
|
2187 | });
|
2188 |
|
2189 | if (prevent) {
|
2190 | var srcEvent = event.srcEvent;
|
2191 |
|
2192 | if (srcEvent.cancelable !== false) {
|
2193 | srcEvent.preventDefault();
|
2194 | }
|
2195 |
|
2196 | srcEvent.stopPropagation();
|
2197 | }
|
2198 |
|
2199 | event.preventSystemEvent = prevent;
|
2200 | prevent && this.observer.change(this, event, toAxis(this.axes, offset));
|
2201 | };
|
2202 |
|
2203 | __proto.onPanend = function (event) {
|
2204 | if (!this.panFlag) {
|
2205 | return;
|
2206 | }
|
2207 |
|
2208 | clearTimeout(this.rightEdgeTimer);
|
2209 | this.panFlag = false;
|
2210 | var offset = this.getOffset([Math.abs(event.velocityX) * (event.deltaX < 0 ? -1 : 1), Math.abs(event.velocityY) * (event.deltaY < 0 ? -1 : 1)], [useDirection(hammerjs.DIRECTION_HORIZONTAL, this._direction), useDirection(hammerjs.DIRECTION_VERTICAL, this._direction)]);
|
2211 | offset = getNextOffset(offset, this.observer.options.deceleration);
|
2212 | this.observer.release(this, event, toAxis(this.axes, offset));
|
2213 | };
|
2214 |
|
2215 | __proto.attachEvent = function (observer) {
|
2216 | this.observer = observer;
|
2217 | this.hammer.on("hammer.input", this.onHammerInput).on("panstart panmove", this.onPanmove);
|
2218 | };
|
2219 |
|
2220 | __proto.dettachEvent = function () {
|
2221 | this.hammer.off("hammer.input", this.onHammerInput).off("panstart panmove", this.onPanmove);
|
2222 | this.observer = null;
|
2223 | };
|
2224 |
|
2225 | __proto.getOffset = function (properties, direction) {
|
2226 | var offset = [0, 0];
|
2227 | var scale = this.options.scale;
|
2228 |
|
2229 | if (direction[0]) {
|
2230 | offset[0] = properties[0] * scale[0];
|
2231 | }
|
2232 |
|
2233 | if (direction[1]) {
|
2234 | offset[1] = properties[1] * scale[1];
|
2235 | }
|
2236 |
|
2237 | return offset;
|
2238 | };
|
2239 |
|
2240 | return PanInput;
|
2241 | }();
|
2242 |
|
2243 | |
2244 |
|
2245 |
|
2246 |
|
2247 |
|
2248 |
|
2249 |
|
2250 |
|
2251 |
|
2252 |
|
2253 |
|
2254 |
|
2255 |
|
2256 |
|
2257 |
|
2258 |
|
2259 |
|
2260 |
|
2261 |
|
2262 |
|
2263 |
|
2264 |
|
2265 | var RotatePanInput =
|
2266 |
|
2267 | function (_super) {
|
2268 | __extends(RotatePanInput, _super);
|
2269 |
|
2270 | function RotatePanInput(el, options) {
|
2271 | var _this = _super.call(this, el, options) || this;
|
2272 |
|
2273 | _this.prevQuadrant = null;
|
2274 | _this.lastDiff = 0;
|
2275 | return _this;
|
2276 | }
|
2277 |
|
2278 | var __proto = RotatePanInput.prototype;
|
2279 |
|
2280 | __proto.mapAxes = function (axes) {
|
2281 | this._direction = Axes.DIRECTION_ALL;
|
2282 | this.axes = axes;
|
2283 | };
|
2284 |
|
2285 | __proto.onHammerInput = function (event) {
|
2286 | if (this.isEnable()) {
|
2287 | if (event.isFirst) {
|
2288 | this.observer.hold(this, event);
|
2289 | this.onPanstart(event);
|
2290 | } else if (event.isFinal) {
|
2291 | this.onPanend(event);
|
2292 | }
|
2293 | }
|
2294 | };
|
2295 |
|
2296 | __proto.onPanstart = function (event) {
|
2297 | var rect = this.element.getBoundingClientRect();
|
2298 | |
2299 |
|
2300 |
|
2301 |
|
2302 |
|
2303 | this.coefficientForDistanceToAngle = 360 / (rect.width * Math.PI);
|
2304 |
|
2305 |
|
2306 | this.rotateOrigin = [rect.left + (rect.width - 1) / 2, rect.top + (rect.height - 1) / 2];
|
2307 |
|
2308 | this.prevAngle = null;
|
2309 | this.triggerChange(event);
|
2310 | };
|
2311 |
|
2312 | __proto.onPanmove = function (event) {
|
2313 | this.triggerChange(event);
|
2314 | };
|
2315 |
|
2316 | __proto.onPanend = function (event) {
|
2317 | this.triggerChange(event);
|
2318 | this.triggerAnimation(event);
|
2319 | };
|
2320 |
|
2321 | __proto.triggerChange = function (event) {
|
2322 | var angle = this.getAngle(event.center.x, event.center.y);
|
2323 | var quadrant = this.getQuadrant(event.center.x, event.center.y);
|
2324 | var diff = this.getDifference(this.prevAngle, angle, this.prevQuadrant, quadrant);
|
2325 | this.prevAngle = angle;
|
2326 | this.prevQuadrant = quadrant;
|
2327 |
|
2328 | if (diff === 0) {
|
2329 | return;
|
2330 | }
|
2331 |
|
2332 | this.lastDiff = diff;
|
2333 | this.observer.change(this, event, toAxis(this.axes, [-diff]));
|
2334 | };
|
2335 |
|
2336 | __proto.triggerAnimation = function (event) {
|
2337 | var vx = event.velocityX;
|
2338 | var vy = event.velocityY;
|
2339 | var velocity = Math.sqrt(vx * vx + vy * vy) * (this.lastDiff > 0 ? -1 : 1);
|
2340 |
|
2341 | var duration = Math.abs(velocity / -this.observer.options.deceleration);
|
2342 | var distance = velocity / 2 * duration;
|
2343 | this.observer.release(this, event, toAxis(this.axes, [distance * this.coefficientForDistanceToAngle]));
|
2344 | };
|
2345 |
|
2346 | __proto.getDifference = function (prevAngle, angle, prevQuadrant, quadrant) {
|
2347 | var diff;
|
2348 |
|
2349 | if (prevAngle === null) {
|
2350 | diff = 0;
|
2351 | } else if (prevQuadrant === 1 && quadrant === 4) {
|
2352 | diff = -prevAngle - (360 - angle);
|
2353 | } else if (prevQuadrant === 4 && quadrant === 1) {
|
2354 | diff = 360 - prevAngle + angle;
|
2355 | } else {
|
2356 | diff = angle - prevAngle;
|
2357 | }
|
2358 |
|
2359 | return diff;
|
2360 | };
|
2361 |
|
2362 | __proto.getPosFromOrigin = function (posX, posY) {
|
2363 | return {
|
2364 | x: posX - this.rotateOrigin[0],
|
2365 | y: this.rotateOrigin[1] - posY
|
2366 | };
|
2367 | };
|
2368 |
|
2369 | __proto.getAngle = function (posX, posY) {
|
2370 | var _a = this.getPosFromOrigin(posX, posY),
|
2371 | x = _a.x,
|
2372 | y = _a.y;
|
2373 |
|
2374 | var angle = Math.atan2(y, x) * 180 / Math.PI;
|
2375 |
|
2376 | return angle < 0 ? 360 + angle : angle;
|
2377 | };
|
2378 | |
2379 |
|
2380 |
|
2381 |
|
2382 |
|
2383 |
|
2384 |
|
2385 |
|
2386 |
|
2387 |
|
2388 |
|
2389 | __proto.getQuadrant = function (posX, posY) {
|
2390 | var _a = this.getPosFromOrigin(posX, posY),
|
2391 | x = _a.x,
|
2392 | y = _a.y;
|
2393 |
|
2394 | var q = 0;
|
2395 |
|
2396 | if (x >= 0 && y >= 0) {
|
2397 | q = 1;
|
2398 | } else if (x < 0 && y >= 0) {
|
2399 | q = 2;
|
2400 | } else if (x < 0 && y < 0) {
|
2401 | q = 3;
|
2402 | } else if (x >= 0 && y < 0) {
|
2403 | q = 4;
|
2404 | }
|
2405 |
|
2406 | return q;
|
2407 | };
|
2408 |
|
2409 | return RotatePanInput;
|
2410 | }(PanInput);
|
2411 |
|
2412 | |
2413 |
|
2414 |
|
2415 |
|
2416 |
|
2417 |
|
2418 |
|
2419 |
|
2420 | |
2421 |
|
2422 |
|
2423 |
|
2424 |
|
2425 |
|
2426 |
|
2427 |
|
2428 |
|
2429 |
|
2430 |
|
2431 |
|
2432 |
|
2433 |
|
2434 |
|
2435 |
|
2436 | var PinchInput =
|
2437 |
|
2438 | function () {
|
2439 | function PinchInput(el, options) {
|
2440 | this.axes = [];
|
2441 | this.hammer = null;
|
2442 | this.element = null;
|
2443 | this._base = null;
|
2444 | this._prev = null;
|
2445 | this.pinchRecognizer = null;
|
2446 | |
2447 |
|
2448 |
|
2449 |
|
2450 |
|
2451 |
|
2452 |
|
2453 |
|
2454 |
|
2455 | if (typeof hammerjs.Manager === "undefined") {
|
2456 | throw new Error("The Hammerjs must be loaded before eg.Axes.PinchInput.\nhttp://hammerjs.github.io/");
|
2457 | }
|
2458 |
|
2459 | this.element = $(el);
|
2460 | this.options = __assign({
|
2461 | scale: 1,
|
2462 | threshold: 0,
|
2463 | inputType: ["touch", "pointer"],
|
2464 | hammerManagerOptions: {
|
2465 |
|
2466 |
|
2467 | cssProps: {
|
2468 | userSelect: "none",
|
2469 | touchSelect: "none",
|
2470 | touchCallout: "none",
|
2471 | userDrag: "none"
|
2472 | }
|
2473 | }
|
2474 | }, options);
|
2475 | this.onPinchStart = this.onPinchStart.bind(this);
|
2476 | this.onPinchMove = this.onPinchMove.bind(this);
|
2477 | this.onPinchEnd = this.onPinchEnd.bind(this);
|
2478 | }
|
2479 |
|
2480 | var __proto = PinchInput.prototype;
|
2481 |
|
2482 | __proto.mapAxes = function (axes) {
|
2483 | this.axes = axes;
|
2484 | };
|
2485 |
|
2486 | __proto.connect = function (observer) {
|
2487 | var hammerOption = {
|
2488 | threshold: this.options.threshold
|
2489 | };
|
2490 |
|
2491 | if (this.hammer) {
|
2492 |
|
2493 |
|
2494 | this.removeRecognizer();
|
2495 | this.dettachEvent();
|
2496 | } else {
|
2497 | var keyValue = this.element[UNIQUEKEY];
|
2498 |
|
2499 | if (!keyValue) {
|
2500 | keyValue = String(Math.round(Math.random() * new Date().getTime()));
|
2501 | }
|
2502 |
|
2503 | var inputClass = convertInputType(this.options.inputType);
|
2504 |
|
2505 | if (!inputClass) {
|
2506 | throw new Error("Wrong inputType parameter!");
|
2507 | }
|
2508 |
|
2509 | this.hammer = createHammer(this.element, __assign({
|
2510 | inputClass: inputClass
|
2511 | }, this.options.hammerManagerOptions));
|
2512 | this.element[UNIQUEKEY] = keyValue;
|
2513 | }
|
2514 |
|
2515 | this.pinchRecognizer = new hammerjs.Pinch(hammerOption);
|
2516 | this.hammer.add(this.pinchRecognizer);
|
2517 | this.attachEvent(observer);
|
2518 | return this;
|
2519 | };
|
2520 |
|
2521 | __proto.disconnect = function () {
|
2522 | this.removeRecognizer();
|
2523 |
|
2524 | if (this.hammer) {
|
2525 | this.hammer.remove(this.pinchRecognizer);
|
2526 | this.pinchRecognizer = null;
|
2527 | this.dettachEvent();
|
2528 | }
|
2529 |
|
2530 | return this;
|
2531 | };
|
2532 | |
2533 |
|
2534 |
|
2535 |
|
2536 |
|
2537 |
|
2538 |
|
2539 | __proto.destroy = function () {
|
2540 | this.disconnect();
|
2541 |
|
2542 | if (this.hammer && this.hammer.recognizers.length === 0) {
|
2543 | this.hammer.destroy();
|
2544 | }
|
2545 |
|
2546 | delete this.element[UNIQUEKEY];
|
2547 | this.element = null;
|
2548 | this.hammer = null;
|
2549 | };
|
2550 |
|
2551 | __proto.removeRecognizer = function () {
|
2552 | if (this.hammer && this.pinchRecognizer) {
|
2553 | this.hammer.remove(this.pinchRecognizer);
|
2554 | this.pinchRecognizer = null;
|
2555 | }
|
2556 | };
|
2557 |
|
2558 | __proto.onPinchStart = function (event) {
|
2559 | this._base = this.observer.get(this)[this.axes[0]];
|
2560 | var offset = this.getOffset(event.scale);
|
2561 | this.observer.hold(this, event);
|
2562 | this.observer.change(this, event, toAxis(this.axes, [offset]));
|
2563 | this._prev = event.scale;
|
2564 | };
|
2565 |
|
2566 | __proto.onPinchMove = function (event) {
|
2567 | var offset = this.getOffset(event.scale, this._prev);
|
2568 | this.observer.change(this, event, toAxis(this.axes, [offset]));
|
2569 | this._prev = event.scale;
|
2570 | };
|
2571 |
|
2572 | __proto.onPinchEnd = function (event) {
|
2573 | var offset = this.getOffset(event.scale, this._prev);
|
2574 | this.observer.change(this, event, toAxis(this.axes, [offset]));
|
2575 | this.observer.release(this, event, toAxis(this.axes, [0]), 0);
|
2576 | this._base = null;
|
2577 | this._prev = null;
|
2578 | };
|
2579 |
|
2580 | __proto.getOffset = function (pinchScale, prev) {
|
2581 | if (prev === void 0) {
|
2582 | prev = 1;
|
2583 | }
|
2584 |
|
2585 | return this._base * (pinchScale - prev) * this.options.scale;
|
2586 | };
|
2587 |
|
2588 | __proto.attachEvent = function (observer) {
|
2589 | this.observer = observer;
|
2590 | this.hammer.on("pinchstart", this.onPinchStart).on("pinchmove", this.onPinchMove).on("pinchend", this.onPinchEnd);
|
2591 | };
|
2592 |
|
2593 | __proto.dettachEvent = function () {
|
2594 | this.hammer.off("pinchstart", this.onPinchStart).off("pinchmove", this.onPinchMove).off("pinchend", this.onPinchEnd);
|
2595 | this.observer = null;
|
2596 | this._prev = null;
|
2597 | };
|
2598 | |
2599 |
|
2600 |
|
2601 |
|
2602 |
|
2603 |
|
2604 |
|
2605 |
|
2606 | __proto.enable = function () {
|
2607 | this.hammer && (this.hammer.get("pinch").options.enable = true);
|
2608 | return this;
|
2609 | };
|
2610 | |
2611 |
|
2612 |
|
2613 |
|
2614 |
|
2615 |
|
2616 |
|
2617 |
|
2618 | __proto.disable = function () {
|
2619 | this.hammer && (this.hammer.get("pinch").options.enable = false);
|
2620 | return this;
|
2621 | };
|
2622 | |
2623 |
|
2624 |
|
2625 |
|
2626 |
|
2627 |
|
2628 |
|
2629 |
|
2630 | __proto.isEnable = function () {
|
2631 | return !!(this.hammer && this.hammer.get("pinch").options.enable);
|
2632 | };
|
2633 |
|
2634 | return PinchInput;
|
2635 | }();
|
2636 |
|
2637 | |
2638 |
|
2639 |
|
2640 |
|
2641 |
|
2642 |
|
2643 | |
2644 |
|
2645 |
|
2646 |
|
2647 |
|
2648 |
|
2649 |
|
2650 |
|
2651 |
|
2652 |
|
2653 |
|
2654 |
|
2655 |
|
2656 |
|
2657 |
|
2658 |
|
2659 |
|
2660 | var WheelInput =
|
2661 |
|
2662 | function () {
|
2663 | function WheelInput(el, options) {
|
2664 | this.axes = [];
|
2665 | this.element = null;
|
2666 | this._isEnabled = false;
|
2667 | this._isHolded = false;
|
2668 | this._timer = null;
|
2669 | this.element = $(el);
|
2670 | this.options = __assign({
|
2671 | scale: 1,
|
2672 | useNormalized: true
|
2673 | }, options);
|
2674 | this.onWheel = this.onWheel.bind(this);
|
2675 | }
|
2676 |
|
2677 | var __proto = WheelInput.prototype;
|
2678 |
|
2679 | __proto.mapAxes = function (axes) {
|
2680 | this.axes = axes;
|
2681 | };
|
2682 |
|
2683 | __proto.connect = function (observer) {
|
2684 | this.dettachEvent();
|
2685 | this.attachEvent(observer);
|
2686 | return this;
|
2687 | };
|
2688 |
|
2689 | __proto.disconnect = function () {
|
2690 | this.dettachEvent();
|
2691 | return this;
|
2692 | };
|
2693 | |
2694 |
|
2695 |
|
2696 |
|
2697 |
|
2698 |
|
2699 |
|
2700 | __proto.destroy = function () {
|
2701 | this.disconnect();
|
2702 | this.element = null;
|
2703 | };
|
2704 |
|
2705 | __proto.onWheel = function (event) {
|
2706 | var _this = this;
|
2707 |
|
2708 | if (!this._isEnabled) {
|
2709 | return;
|
2710 | }
|
2711 |
|
2712 | event.preventDefault();
|
2713 |
|
2714 | if (event.deltaY === 0) {
|
2715 | return;
|
2716 | }
|
2717 |
|
2718 | if (!this._isHolded) {
|
2719 | this.observer.hold(this, event);
|
2720 | this._isHolded = true;
|
2721 | }
|
2722 |
|
2723 | var offset = (event.deltaY > 0 ? -1 : 1) * this.options.scale * (this.options.useNormalized ? 1 : Math.abs(event.deltaY));
|
2724 | this.observer.change(this, event, toAxis(this.axes, [offset]));
|
2725 | clearTimeout(this._timer);
|
2726 | this._timer = setTimeout(function () {
|
2727 | if (_this._isHolded) {
|
2728 | _this._isHolded = false;
|
2729 |
|
2730 | _this.observer.release(_this, event, toAxis(_this.axes, [0]));
|
2731 | }
|
2732 | }, 50);
|
2733 | };
|
2734 |
|
2735 | __proto.attachEvent = function (observer) {
|
2736 | this.observer = observer;
|
2737 | this.element.addEventListener("wheel", this.onWheel);
|
2738 | this._isEnabled = true;
|
2739 | };
|
2740 |
|
2741 | __proto.dettachEvent = function () {
|
2742 | this.element.removeEventListener("wheel", this.onWheel);
|
2743 | this._isEnabled = false;
|
2744 | this.observer = null;
|
2745 |
|
2746 | if (this._timer) {
|
2747 | clearTimeout(this._timer);
|
2748 | this._timer = null;
|
2749 | }
|
2750 | };
|
2751 | |
2752 |
|
2753 |
|
2754 |
|
2755 |
|
2756 |
|
2757 |
|
2758 |
|
2759 | __proto.enable = function () {
|
2760 | this._isEnabled = true;
|
2761 | return this;
|
2762 | };
|
2763 | |
2764 |
|
2765 |
|
2766 |
|
2767 |
|
2768 |
|
2769 |
|
2770 |
|
2771 | __proto.disable = function () {
|
2772 | this._isEnabled = false;
|
2773 | return this;
|
2774 | };
|
2775 | |
2776 |
|
2777 |
|
2778 |
|
2779 |
|
2780 |
|
2781 |
|
2782 |
|
2783 | __proto.isEnable = function () {
|
2784 | return this._isEnabled;
|
2785 | };
|
2786 |
|
2787 | return WheelInput;
|
2788 | }();
|
2789 |
|
2790 | var KEY_LEFT_ARROW = 37;
|
2791 | var KEY_A = 65;
|
2792 | var KEY_UP_ARROW = 38;
|
2793 | var KEY_W = 87;
|
2794 | var KEY_RIGHT_ARROW = 39;
|
2795 | var KEY_D = 68;
|
2796 | var KEY_DOWN_ARROW = 40;
|
2797 | var KEY_S = 83;
|
2798 | var DIRECTION_REVERSE = -1;
|
2799 | var DIRECTION_FORWARD = 1;
|
2800 | var DIRECTION_HORIZONTAL = -1;
|
2801 | var DIRECTION_VERTICAL = 1;
|
2802 | var DELAY = 80;
|
2803 | |
2804 |
|
2805 |
|
2806 |
|
2807 |
|
2808 |
|
2809 |
|
2810 |
|
2811 | |
2812 |
|
2813 |
|
2814 |
|
2815 |
|
2816 |
|
2817 |
|
2818 |
|
2819 |
|
2820 |
|
2821 |
|
2822 |
|
2823 |
|
2824 |
|
2825 |
|
2826 |
|
2827 |
|
2828 | var MoveKeyInput =
|
2829 |
|
2830 | function () {
|
2831 | function MoveKeyInput(el, options) {
|
2832 | this.axes = [];
|
2833 | this.element = null;
|
2834 | this._isEnabled = false;
|
2835 | this._isHolded = false;
|
2836 | this._timer = null;
|
2837 | this.element = $(el);
|
2838 | this.options = __assign({
|
2839 | scale: [1, 1]
|
2840 | }, options);
|
2841 | this.onKeydown = this.onKeydown.bind(this);
|
2842 | this.onKeyup = this.onKeyup.bind(this);
|
2843 | }
|
2844 |
|
2845 | var __proto = MoveKeyInput.prototype;
|
2846 |
|
2847 | __proto.mapAxes = function (axes) {
|
2848 | this.axes = axes;
|
2849 | };
|
2850 |
|
2851 | __proto.connect = function (observer) {
|
2852 | this.dettachEvent();
|
2853 |
|
2854 | if (this.element.getAttribute("tabindex") !== "0") {
|
2855 | this.element.setAttribute("tabindex", "0");
|
2856 | }
|
2857 |
|
2858 | this.attachEvent(observer);
|
2859 | return this;
|
2860 | };
|
2861 |
|
2862 | __proto.disconnect = function () {
|
2863 | this.dettachEvent();
|
2864 | return this;
|
2865 | };
|
2866 | |
2867 |
|
2868 |
|
2869 |
|
2870 |
|
2871 |
|
2872 |
|
2873 | __proto.destroy = function () {
|
2874 | this.disconnect();
|
2875 | this.element = null;
|
2876 | };
|
2877 |
|
2878 | __proto.onKeydown = function (e) {
|
2879 | if (!this._isEnabled) {
|
2880 | return;
|
2881 | }
|
2882 |
|
2883 | var isMoveKey = true;
|
2884 | var direction = DIRECTION_FORWARD;
|
2885 | var move = DIRECTION_HORIZONTAL;
|
2886 |
|
2887 | switch (e.keyCode) {
|
2888 | case KEY_LEFT_ARROW:
|
2889 | case KEY_A:
|
2890 | direction = DIRECTION_REVERSE;
|
2891 | break;
|
2892 |
|
2893 | case KEY_RIGHT_ARROW:
|
2894 | case KEY_D:
|
2895 | break;
|
2896 |
|
2897 | case KEY_DOWN_ARROW:
|
2898 | case KEY_S:
|
2899 | direction = DIRECTION_REVERSE;
|
2900 | move = DIRECTION_VERTICAL;
|
2901 | break;
|
2902 |
|
2903 | case KEY_UP_ARROW:
|
2904 | case KEY_W:
|
2905 | move = DIRECTION_VERTICAL;
|
2906 | break;
|
2907 |
|
2908 | default:
|
2909 | isMoveKey = false;
|
2910 | }
|
2911 |
|
2912 | if (move === DIRECTION_HORIZONTAL && !this.axes[0] || move === DIRECTION_VERTICAL && !this.axes[1]) {
|
2913 | isMoveKey = false;
|
2914 | }
|
2915 |
|
2916 | if (!isMoveKey) {
|
2917 | return;
|
2918 | }
|
2919 |
|
2920 | var offsets = move === DIRECTION_HORIZONTAL ? [+this.options.scale[0] * direction, 0] : [0, +this.options.scale[1] * direction];
|
2921 |
|
2922 | if (!this._isHolded) {
|
2923 | this.observer.hold(this, event);
|
2924 | this._isHolded = true;
|
2925 | }
|
2926 |
|
2927 | clearTimeout(this._timer);
|
2928 | this.observer.change(this, event, toAxis(this.axes, offsets));
|
2929 | };
|
2930 |
|
2931 | __proto.onKeyup = function (e) {
|
2932 | var _this = this;
|
2933 |
|
2934 | if (!this._isHolded) {
|
2935 | return;
|
2936 | }
|
2937 |
|
2938 | clearTimeout(this._timer);
|
2939 | this._timer = setTimeout(function () {
|
2940 | _this.observer.release(_this, e, toAxis(_this.axes, [0, 0]));
|
2941 |
|
2942 | _this._isHolded = false;
|
2943 | }, DELAY);
|
2944 | };
|
2945 |
|
2946 | __proto.attachEvent = function (observer) {
|
2947 | this.observer = observer;
|
2948 | this.element.addEventListener("keydown", this.onKeydown, false);
|
2949 | this.element.addEventListener("keypress", this.onKeydown, false);
|
2950 | this.element.addEventListener("keyup", this.onKeyup, false);
|
2951 | this._isEnabled = true;
|
2952 | };
|
2953 |
|
2954 | __proto.dettachEvent = function () {
|
2955 | this.element.removeEventListener("keydown", this.onKeydown, false);
|
2956 | this.element.removeEventListener("keypress", this.onKeydown, false);
|
2957 | this.element.removeEventListener("keyup", this.onKeyup, false);
|
2958 | this._isEnabled = false;
|
2959 | this.observer = null;
|
2960 | };
|
2961 | |
2962 |
|
2963 |
|
2964 |
|
2965 |
|
2966 |
|
2967 |
|
2968 |
|
2969 | __proto.enable = function () {
|
2970 | this._isEnabled = true;
|
2971 | return this;
|
2972 | };
|
2973 | |
2974 |
|
2975 |
|
2976 |
|
2977 |
|
2978 |
|
2979 |
|
2980 |
|
2981 | __proto.disable = function () {
|
2982 | this._isEnabled = false;
|
2983 | return this;
|
2984 | };
|
2985 | |
2986 |
|
2987 |
|
2988 |
|
2989 |
|
2990 |
|
2991 |
|
2992 |
|
2993 | __proto.isEnable = function () {
|
2994 | return this._isEnabled;
|
2995 | };
|
2996 |
|
2997 | return MoveKeyInput;
|
2998 | }();
|
2999 |
|
3000 | Axes.PanInput = PanInput;
|
3001 | Axes.RotatePanInput = RotatePanInput;
|
3002 | Axes.PinchInput = PinchInput;
|
3003 | Axes.WheelInput = WheelInput;
|
3004 | Axes.MoveKeyInput = MoveKeyInput;
|
3005 |
|
3006 | return Axes;
|
3007 |
|
3008 | })));
|
3009 |
|