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 this.element_ = element; | 17 this.element_ = element; |
18 | 18 |
19 this.element_.addEventListener( | 19 this.element_.addEventListener( |
20 'touchstart', this.onTouchStart_.bind(this), { passive: false }); | 20 'touchstart', this.onTouchStart_.bind(this), { passive: true }); |
21 this.element_.addEventListener( | 21 this.element_.addEventListener( |
22 'touchmove', this.onTouch_.bind(this), { passive: true }); | 22 'touchmove', this.onTouch_.bind(this), { passive: false }); |
23 this.element_.addEventListener( | 23 this.element_.addEventListener( |
24 'touchend', this.onTouch_.bind(this), { passive: true }); | 24 'touchend', this.onTouch_.bind(this), { passive: true }); |
25 this.element_.addEventListener( | 25 this.element_.addEventListener( |
26 'touchcancel', this.onTouch_.bind(this), { passive: true }); | 26 'touchcancel', this.onTouch_.bind(this), { passive: true }); |
27 | 27 |
28 this.pinchStartEvent_ = null; | 28 this.pinchStartEvent_ = null; |
29 this.lastEvent_ = null; | 29 this.lastEvent_ = null; |
30 | 30 |
31 this.listeners_ = new Map([ | 31 this.listeners_ = new Map([ |
32 ['pinchstart', []], | 32 ['pinchstart', []], |
(...skipping 24 matching lines...) Expand all Loading... |
57 for (let l of listeners) | 57 for (let l of listeners) |
58 l(pinchEvent); | 58 l(pinchEvent); |
59 } | 59 } |
60 | 60 |
61 /** | 61 /** |
62 * The callback for touchstart events on the element. | 62 * The callback for touchstart events on the element. |
63 * @private | 63 * @private |
64 * @param {!TouchEvent} event Touch event on the element. | 64 * @param {!TouchEvent} event Touch event on the element. |
65 */ | 65 */ |
66 onTouchStart_(event) { | 66 onTouchStart_(event) { |
67 // We must preventDefault if there is a two finger touch. By doing so | |
68 // native pinch-zoom does not interfere with our way of handling the event. | |
69 if (event.touches.length == 2) { | 67 if (event.touches.length == 2) { |
70 event.preventDefault(); | |
71 this.pinchStartEvent_ = event; | 68 this.pinchStartEvent_ = event; |
72 this.lastEvent_ = event; | 69 this.lastEvent_ = event; |
73 this.notify_({ | 70 this.notify_({ |
74 type: 'pinchstart', | 71 type: 'pinchstart', |
75 center: GestureDetector.center_(event) | 72 center: GestureDetector.center_(event) |
76 }); | 73 }); |
77 } | 74 } |
78 } | 75 } |
79 | 76 |
80 /** | 77 /** |
(...skipping 15 matching lines...) Expand all Loading... |
96 type: 'pinchend', | 93 type: 'pinchend', |
97 startScaleRatio: startScaleRatio, | 94 startScaleRatio: startScaleRatio, |
98 center: center | 95 center: center |
99 }; | 96 }; |
100 this.pinchStartEvent_ = null; | 97 this.pinchStartEvent_ = null; |
101 this.lastEvent_ = null; | 98 this.lastEvent_ = null; |
102 this.notify_(endEvent); | 99 this.notify_(endEvent); |
103 return; | 100 return; |
104 } | 101 } |
105 | 102 |
| 103 // We must preventDefault two finger touchmoves. By doing so native |
| 104 // pinch-zoom does not interfere with our way of handling the event. |
| 105 event.preventDefault(); |
| 106 |
106 let scaleRatio = GestureDetector.pinchScaleRatio_(event, this.lastEvent_); | 107 let scaleRatio = GestureDetector.pinchScaleRatio_(event, this.lastEvent_); |
107 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 108 let startScaleRatio = GestureDetector.pinchScaleRatio_( |
108 event, this.pinchStartEvent_); | 109 event, this.pinchStartEvent_); |
109 let center = GestureDetector.center_(event); | 110 let center = GestureDetector.center_(event); |
110 this.notify_({ | 111 this.notify_({ |
111 type: 'pinchupdate', | 112 type: 'pinchupdate', |
112 scaleRatio: scaleRatio, | 113 scaleRatio: scaleRatio, |
113 direction: scaleRatio > 1.0 ? 'in' : 'out', | 114 direction: scaleRatio > 1.0 ? 'in' : 'out', |
114 startScaleRatio: startScaleRatio, | 115 startScaleRatio: startScaleRatio, |
115 center: center | 116 center: center |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
155 */ | 156 */ |
156 static center_(event) { | 157 static center_(event) { |
157 let touch1 = event.touches[0]; | 158 let touch1 = event.touches[0]; |
158 let touch2 = event.touches[1]; | 159 let touch2 = event.touches[1]; |
159 return { | 160 return { |
160 x: (touch1.clientX + touch2.clientX) / 2, | 161 x: (touch1.clientX + touch2.clientX) / 2, |
161 y: (touch1.clientY + touch2.clientY) / 2 | 162 y: (touch1.clientY + touch2.clientY) / 2 |
162 }; | 163 }; |
163 } | 164 } |
164 }; | 165 }; |
OLD | NEW |