Chromium Code Reviews| 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 this.element_ = element; | 18 this.element_ = element; |
| 18 | 19 |
| 19 this.element_.addEventListener( | 20 this.element_.addEventListener( |
| 20 'touchstart', this.onTouchStart_.bind(this), { passive: true }); | 21 'touchstart', |
| 22 /** @type {function(!Event)} */ (this.onTouchStart_.bind(this)), | |
|
dpapad
2017/05/23 18:38:38
Changed the code to use a different function refer
| |
| 23 { passive: true }); | |
| 24 | |
| 21 this.element_.addEventListener( | 25 this.element_.addEventListener( |
| 22 'touchmove', this.onTouch_.bind(this), { passive: false }); | 26 'touchmove', |
| 27 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | |
| 28 { passive: false }); | |
| 23 this.element_.addEventListener( | 29 this.element_.addEventListener( |
| 24 'touchend', this.onTouch_.bind(this), { passive: true }); | 30 'touchend', |
| 31 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | |
| 32 { passive: true }); | |
| 25 this.element_.addEventListener( | 33 this.element_.addEventListener( |
| 26 'touchcancel', this.onTouch_.bind(this), { passive: true }); | 34 'touchcancel', |
| 35 /** @type {function(!Event)} */ (this.onTouch_.bind(this)), | |
| 36 { passive: true }); | |
| 27 | 37 |
| 28 this.pinchStartEvent_ = null; | 38 this.pinchStartEvent_ = null; |
| 29 this.lastTouchTouchesCount_ = 0; | 39 this.lastTouchTouchesCount_ = 0; |
| 40 | |
| 41 /** @private {?TouchEvent} */ | |
| 30 this.lastEvent_ = null; | 42 this.lastEvent_ = null; |
| 31 | 43 |
| 44 /** @private {!Map<string, !Array<!Function>>} */ | |
| 32 this.listeners_ = new Map([ | 45 this.listeners_ = new Map([ |
| 33 ['pinchstart', []], | 46 ['pinchstart', []], |
| 34 ['pinchupdate', []], | 47 ['pinchupdate', []], |
| 35 ['pinchend', []] | 48 ['pinchend', []] |
| 36 ]); | 49 ]); |
| 37 } | 50 } |
| 38 | 51 |
| 39 /** | 52 /** |
| 40 * Add a |listener| to be notified of |type| events. | 53 * Add a |listener| to be notified of |type| events. |
| 41 * @param {string} type The event type to be notified for. | 54 * @param {string} type The event type to be notified for. |
| 42 * @param {Function} listener The callback. | 55 * @param {!Function} listener The callback. |
| 43 */ | 56 */ |
| 44 addEventListener(type, listener) { | 57 addEventListener(type, listener) { |
| 45 if (this.listeners_.has(type)) { | 58 if (this.listeners_.has(type)) { |
| 46 this.listeners_.get(type).push(listener); | 59 this.listeners_.get(type).push(listener); |
| 47 } | 60 } |
| 48 } | 61 } |
| 49 | 62 |
| 50 /** | 63 /** |
| 51 * Returns true if the last touch start was a two finger touch. | 64 * Returns true if the last touch start was a two finger touch. |
| 52 * @return {boolean} True if the last touch start was a two finger touch. | 65 * @return {boolean} True if the last touch start was a two finger touch. |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 87 | 100 |
| 88 /** | 101 /** |
| 89 * The callback for touch move, end, and cancel events on the element. | 102 * The callback for touch move, end, and cancel events on the element. |
| 90 * @private | 103 * @private |
| 91 * @param {!TouchEvent} event Touch event on the element. | 104 * @param {!TouchEvent} event Touch event on the element. |
| 92 */ | 105 */ |
| 93 onTouch_(event) { | 106 onTouch_(event) { |
| 94 if (!this.pinchStartEvent_) | 107 if (!this.pinchStartEvent_) |
| 95 return; | 108 return; |
| 96 | 109 |
| 110 let lastEvent = /** @type {!TouchEvent} */ (this.lastEvent_); | |
| 111 | |
| 97 // Check if the pinch ends with the current event. | 112 // Check if the pinch ends with the current event. |
| 98 if (event.touches.length < 2 || | 113 if (event.touches.length < 2 || |
| 99 this.lastEvent_.touches.length !== event.touches.length) { | 114 lastEvent.touches.length !== event.touches.length) { |
| 100 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 115 let startScaleRatio = GestureDetector.pinchScaleRatio_( |
| 101 this.lastEvent_, this.pinchStartEvent_); | 116 lastEvent, this.pinchStartEvent_); |
| 102 let center = GestureDetector.center_(this.lastEvent_); | 117 let center = GestureDetector.center_(lastEvent); |
| 103 let endEvent = { | 118 let endEvent = { |
| 104 type: 'pinchend', | 119 type: 'pinchend', |
| 105 startScaleRatio: startScaleRatio, | 120 startScaleRatio: startScaleRatio, |
| 106 center: center | 121 center: center |
| 107 }; | 122 }; |
| 108 this.pinchStartEvent_ = null; | 123 this.pinchStartEvent_ = null; |
| 109 this.lastEvent_ = null; | 124 this.lastEvent_ = null; |
| 110 this.notify_(endEvent); | 125 this.notify_(endEvent); |
| 111 return; | 126 return; |
| 112 } | 127 } |
| 113 | 128 |
| 114 // We must preventDefault two finger touchmoves. By doing so native | 129 // We must preventDefault two finger touchmoves. By doing so native |
| 115 // pinch-zoom does not interfere with our way of handling the event. | 130 // pinch-zoom does not interfere with our way of handling the event. |
| 116 event.preventDefault(); | 131 event.preventDefault(); |
| 117 | 132 |
| 118 let scaleRatio = GestureDetector.pinchScaleRatio_(event, this.lastEvent_); | 133 let scaleRatio = GestureDetector.pinchScaleRatio_(event, lastEvent); |
| 119 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 134 let startScaleRatio = GestureDetector.pinchScaleRatio_( |
| 120 event, this.pinchStartEvent_); | 135 event, this.pinchStartEvent_); |
| 121 let center = GestureDetector.center_(event); | 136 let center = GestureDetector.center_(event); |
| 122 this.notify_({ | 137 this.notify_({ |
| 123 type: 'pinchupdate', | 138 type: 'pinchupdate', |
| 124 scaleRatio: scaleRatio, | 139 scaleRatio: scaleRatio, |
| 125 direction: scaleRatio > 1.0 ? 'in' : 'out', | 140 direction: scaleRatio > 1.0 ? 'in' : 'out', |
| 126 startScaleRatio: startScaleRatio, | 141 startScaleRatio: startScaleRatio, |
| 127 center: center | 142 center: center |
| 128 }); | 143 }); |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 167 */ | 182 */ |
| 168 static center_(event) { | 183 static center_(event) { |
| 169 let touch1 = event.touches[0]; | 184 let touch1 = event.touches[0]; |
| 170 let touch2 = event.touches[1]; | 185 let touch2 = event.touches[1]; |
| 171 return { | 186 return { |
| 172 x: (touch1.clientX + touch2.clientX) / 2, | 187 x: (touch1.clientX + touch2.clientX) / 2, |
| 173 y: (touch1.clientY + touch2.clientY) / 2 | 188 y: (touch1.clientY + touch2.clientY) / 2 |
| 174 }; | 189 }; |
| 175 } | 190 } |
| 176 }; | 191 }; |
| OLD | NEW |