From c68efbd92ccb59e8cd4c714228dd3f284e7b360c Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 25 Jul 2016 22:17:50 +0200 Subject: [PATCH] fix(gestures): custom recognizers should not inherit twice. (#902) * fix(gestures): custom recognizers should not inherit twice. * HammerJS does not allow custom recognizers to use a default recognizer twice globally. This means that we can't create a `drag` and `slide` recognizer, which depends for all on one default recognizers. * Make `mc` a constant as before. --- src/core/gestures/MdGestureConfig.ts | 42 +++++++++++++++------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts index 4d312ce82ad3..fa4cb30840c5 100644 --- a/src/core/gestures/MdGestureConfig.ts +++ b/src/core/gestures/MdGestureConfig.ts @@ -35,32 +35,34 @@ export class MdGestureConfig extends HammerGestureConfig { buildHammer(element: HTMLElement) { const mc = new Hammer(element); - // create custom gesture recognizers - const drag = new Hammer.Pan({event: 'drag', threshold: 6}); - const longpress = new Hammer.Press({event: 'longpress', time: 500}); - const slide = new Hammer.Pan({event: 'slide', threshold: 0}); + // Default Hammer Recognizers. + let pan = new Hammer.Pan(); + let swipe = new Hammer.Swipe(); + let press = new Hammer.Press(); - // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe) - // custom recognizers can overwrite default recognizers if they aren't configured to - // "recognizeWith" others that listen to the same base events. - const pan = new Hammer.Pan(); - const press = new Hammer.Press(); - const swipe = new Hammer.Swipe(); - - drag.recognizeWith(pan); - drag.recognizeWith(swipe); - drag.recognizeWith(slide); + // Notice that a HammerJS recognizer can only depend on one other recognizer once. + // Otherwise the previous `recognizeWith` will be dropped. + let slide = this._createRecognizer(pan, {event: 'slide', threshold: 0}, swipe); + let drag = this._createRecognizer(slide, {event: 'drag', threshold: 6}, swipe); + let longpress = this._createRecognizer(press, {event: 'longpress', time: 500}); + // Overwrite the default `pan` event to use the swipe event. pan.recognizeWith(swipe); - pan.recognizeWith(slide); - - slide.recognizeWith(swipe); - longpress.recognizeWith(press); + // Add customized gestures to Hammer manager + mc.add([swipe, press, pan, drag, slide, longpress]); - // add customized gestures to Hammer manager - mc.add([drag, pan, swipe, press, longpress, slide]); return mc; } + /** Creates a new recognizer, without affecting the default recognizers of HammerJS */ + private _createRecognizer(base: Recognizer, options: any, ...inheritances: Recognizer[]) { + let recognizer = new ( base.constructor)(options); + + inheritances.push(base); + inheritances.forEach((item) => recognizer.recognizeWith(item)); + + return recognizer; + } + }