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 |