| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 'use strict'; | 5 'use strict'; |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * A class that listens for touch events and produces events when these | 8 * A class that listens for touch events and produces events when these |
| 9 * touches form gestures (e.g. pinching). | 9 * touches form gestures (e.g. pinching). |
| 10 */ | 10 */ |
| 11 class GestureDetector { | 11 class GestureDetector { |
| 12 /** | 12 /** |
| 13 * Constructs a GestureDetector. | 13 * Constructs a GestureDetector. |
| 14 * @param {!Element} element The element to monitor for touch gestures. | 14 * @param {!Element} element The element to monitor for touch gestures. |
| 15 */ | 15 */ |
| 16 constructor(element) { | 16 constructor(element) { |
| 17 /** @private {!Element} */ | 17 /** @private {!Element} */ |
| 18 this.element_ = element; | 18 this.element_ = element; |
| 19 | 19 |
| 20 this.element_.addEventListener( | 20 this.element_.addEventListener( |
| 21 'touchstart', | 21 'touchstart', |
| 22 /** @type {function(!Event)} */ (this.onTouchStart_.bind(this)), | 22 /** @type {function(!Event)} */ (this.onTouchStart_.bind(this)), |
| 23 { passive: true }); | 23 {passive: true}); |
| 24 | 24 |
| 25 this.element_.addEventListener( | 25 this.element_.addEventListener( |
| 26 'touchmove', | 26 'touchmove', |
| 27 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | 27 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), |
| 28 { passive: false }); | 28 {passive: false}); |
| 29 this.element_.addEventListener( | 29 this.element_.addEventListener( |
| 30 'touchend', | 30 'touchend', |
| 31 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | 31 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), |
| 32 { passive: true }); | 32 {passive: true}); |
| 33 this.element_.addEventListener( | 33 this.element_.addEventListener( |
| 34 'touchcancel', | 34 'touchcancel', |
| 35 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | 35 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), |
| 36 { passive: true }); | 36 {passive: true}); |
| 37 | 37 |
| 38 this.pinchStartEvent_ = null; | 38 this.pinchStartEvent_ = null; |
| 39 this.lastTouchTouchesCount_ = 0; | 39 this.lastTouchTouchesCount_ = 0; |
| 40 | 40 |
| 41 /** @private {?TouchEvent} */ | 41 /** @private {?TouchEvent} */ |
| 42 this.lastEvent_ = null; | 42 this.lastEvent_ = null; |
| 43 | 43 |
| 44 /** @private {!Map<string, !Array<!Function>>} */ | 44 /** @private {!Map<string, !Array<!Function>>} */ |
| 45 this.listeners_ = new Map([ | 45 this.listeners_ = |
| 46 ['pinchstart', []], | 46 new Map([['pinchstart', []], ['pinchupdate', []], ['pinchend', []]]); |
| 47 ['pinchupdate', []], | |
| 48 ['pinchend', []] | |
| 49 ]); | |
| 50 } | 47 } |
| 51 | 48 |
| 52 /** | 49 /** |
| 53 * Add a |listener| to be notified of |type| events. | 50 * Add a |listener| to be notified of |type| events. |
| 54 * @param {string} type The event type to be notified for. | 51 * @param {string} type The event type to be notified for. |
| 55 * @param {!Function} listener The callback. | 52 * @param {!Function} listener The callback. |
| 56 */ | 53 */ |
| 57 addEventListener(type, listener) { | 54 addEventListener(type, listener) { |
| 58 if (this.listeners_.has(type)) { | 55 if (this.listeners_.has(type)) { |
| 59 this.listeners_.get(type).push(listener); | 56 this.listeners_.get(type).push(listener); |
| (...skipping 25 matching lines...) Expand all Loading... |
| 85 * @private | 82 * @private |
| 86 * @param {!TouchEvent} event Touch event on the element. | 83 * @param {!TouchEvent} event Touch event on the element. |
| 87 */ | 84 */ |
| 88 onTouchStart_(event) { | 85 onTouchStart_(event) { |
| 89 this.lastTouchTouchesCount_ = event.touches.length; | 86 this.lastTouchTouchesCount_ = event.touches.length; |
| 90 if (!this.wasTwoFingerTouch()) | 87 if (!this.wasTwoFingerTouch()) |
| 91 return; | 88 return; |
| 92 | 89 |
| 93 this.pinchStartEvent_ = event; | 90 this.pinchStartEvent_ = event; |
| 94 this.lastEvent_ = event; | 91 this.lastEvent_ = event; |
| 95 this.notify_({ | 92 this.notify_({type: 'pinchstart', center: GestureDetector.center_(event)}); |
| 96 type: 'pinchstart', | |
| 97 center: GestureDetector.center_(event) | |
| 98 }); | |
| 99 } | 93 } |
| 100 | 94 |
| 101 /** | 95 /** |
| 102 * The callback for touch move, end, and cancel events on the element. | 96 * The callback for touch move, end, and cancel events on the element. |
| 103 * @private | 97 * @private |
| 104 * @param {!TouchEvent} event Touch event on the element. | 98 * @param {!TouchEvent} event Touch event on the element. |
| 105 */ | 99 */ |
| 106 onTouch_(event) { | 100 onTouch_(event) { |
| 107 if (!this.pinchStartEvent_) | 101 if (!this.pinchStartEvent_) |
| 108 return; | 102 return; |
| 109 | 103 |
| 110 let lastEvent = /** @type {!TouchEvent} */ (this.lastEvent_); | 104 let lastEvent = /** @type {!TouchEvent} */ (this.lastEvent_); |
| 111 | 105 |
| 112 // Check if the pinch ends with the current event. | 106 // Check if the pinch ends with the current event. |
| 113 if (event.touches.length < 2 || | 107 if (event.touches.length < 2 || |
| 114 lastEvent.touches.length !== event.touches.length) { | 108 lastEvent.touches.length !== event.touches.length) { |
| 115 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 109 let startScaleRatio = |
| 116 lastEvent, this.pinchStartEvent_); | 110 GestureDetector.pinchScaleRatio_(lastEvent, this.pinchStartEvent_); |
| 117 let center = GestureDetector.center_(lastEvent); | 111 let center = GestureDetector.center_(lastEvent); |
| 118 let endEvent = { | 112 let endEvent = { |
| 119 type: 'pinchend', | 113 type: 'pinchend', |
| 120 startScaleRatio: startScaleRatio, | 114 startScaleRatio: startScaleRatio, |
| 121 center: center | 115 center: center |
| 122 }; | 116 }; |
| 123 this.pinchStartEvent_ = null; | 117 this.pinchStartEvent_ = null; |
| 124 this.lastEvent_ = null; | 118 this.lastEvent_ = null; |
| 125 this.notify_(endEvent); | 119 this.notify_(endEvent); |
| 126 return; | 120 return; |
| 127 } | 121 } |
| 128 | 122 |
| 129 // We must preventDefault two finger touchmoves. By doing so native | 123 // We must preventDefault two finger touchmoves. By doing so native |
| 130 // pinch-zoom does not interfere with our way of handling the event. | 124 // pinch-zoom does not interfere with our way of handling the event. |
| 131 event.preventDefault(); | 125 event.preventDefault(); |
| 132 | 126 |
| 133 let scaleRatio = GestureDetector.pinchScaleRatio_(event, lastEvent); | 127 let scaleRatio = GestureDetector.pinchScaleRatio_(event, lastEvent); |
| 134 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 128 let startScaleRatio = |
| 135 event, this.pinchStartEvent_); | 129 GestureDetector.pinchScaleRatio_(event, this.pinchStartEvent_); |
| 136 let center = GestureDetector.center_(event); | 130 let center = GestureDetector.center_(event); |
| 137 this.notify_({ | 131 this.notify_({ |
| 138 type: 'pinchupdate', | 132 type: 'pinchupdate', |
| 139 scaleRatio: scaleRatio, | 133 scaleRatio: scaleRatio, |
| 140 direction: scaleRatio > 1.0 ? 'in' : 'out', | 134 direction: scaleRatio > 1.0 ? 'in' : 'out', |
| 141 startScaleRatio: startScaleRatio, | 135 startScaleRatio: startScaleRatio, |
| 142 center: center | 136 center: center |
| 143 }); | 137 }); |
| 144 | 138 |
| 145 this.lastEvent_ = event; | 139 this.lastEvent_ = event; |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 182 */ | 176 */ |
| 183 static center_(event) { | 177 static center_(event) { |
| 184 let touch1 = event.touches[0]; | 178 let touch1 = event.touches[0]; |
| 185 let touch2 = event.touches[1]; | 179 let touch2 = event.touches[1]; |
| 186 return { | 180 return { |
| 187 x: (touch1.clientX + touch2.clientX) / 2, | 181 x: (touch1.clientX + touch2.clientX) / 2, |
| 188 y: (touch1.clientY + touch2.clientY) / 2 | 182 y: (touch1.clientY + touch2.clientY) / 2 |
| 189 }; | 183 }; |
| 190 } | 184 } |
| 191 } | 185 } |
| OLD | NEW |