Angular/HammerJS - Avoid rotate gestures on pinch in/out

Question

I'm trying to launch pinch gestures without launch rotate gestures also. My purpose is launch both gestures separately.

I have built hammer configuration in my module, as below:

import * as Hammer from 'hammerjs';
import { HammerGestureConfig } from '@angular/platform-browser';

export class HammerConfig extends HammerGestureConfig{

    buildHammer(element: HTMLElement)
    {
        const hammerManager = new Hammer(element);
        let rotate = new Hammer.Rotate({enable: true});
        let pinch = new Hammer.Pinch({enable: true});
        let pan = new Hammer.Pan();

        pan.requireFailure([rotate, pinch]);
        pinch.recognizeWith(rotate);
        hammerManager.add([rotate, pan, pinch]);

        return hammerManager;
    }
}

I am trying with:

pinch.dropRecognizeWith(rotate);

and

rotate.dropRecognizeWith(pinch);

This changes doesn't work. Only rotate gestures are launched...

If I add:

pinch.recognizeWith(rotate);

It launches both events...

Are there any way to launch them separately? I will appreciate any kind of help

Answer 1

I look into my projects where I use HammerJS in Angular 5, 6 and 7 apps, and I use different way to config HammerJS.

Your idea to disable rotate/pinch/pan in specific situation is correct and in accordance with documentation it's OK.

Hire is my sample config without requireFailure and recognizeWith:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'swipe': {direction: Hammer.DIRECTION_ALL}, // override default settings
        'pan': {direction: Hammer.DIRECTION_ALL}
    };
}

@NgModule({
    imports: [
        AppModule
    ],
    providers: [{
        provide: HAMMER_GESTURE_CONFIG,
        useClass: MyHammerConfig
    }],
    bootstrap: [AppComponent]
})
export class AppBrowserModule {
}

In this way your config should look like:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'rotate': {
            direction: Hammer.DIRECTION_ALL,
            enable: true
        }, // override default settings
        'pinch': {
            direction: Hammer.DIRECTION_ALL,
            enable: true,
            recognizeWidth: 'rotate'
        },
        'pan': {
            direction: Hammer.DIRECTION_ALL,
            requireFailure: ['rotate, pinch']
        }
    };
}

If this is not work for you, let me know. I will try solve your problem tomorrow because I don't have more time today.

Look also to Angular docs about overriding according with HammerJS documentation hire.