swipe and pinch conflict

[amihaiBrudo]

Versions: hammerjs: ^2.0.8 With Angular: "^15.2.8"

Issue description: I have a gallery component with a main image. I implemented a directive using hammerjs to support swipe left right to switch images (next/prev) and it works perfectly. However, doing this disabled the native functionality that existed prior to this change to pinch in and out to zoom. The pinch operation works on any other location on the page except the img for which I used the directive. Here is the directive (note I tried with/without touch action auto and with/without disabling pinch for hammer):

import { Directive, Output, EventEmitter, ElementRef, Renderer2, AfterViewInit } from '@angular/core'; import * as Hammer from 'hammerjs';

@Directive({ selector: '[appSwipe]', }) export class GestureDirective implements AfterViewInit { @Output() swipeLeft = new EventEmitter(); @Output() swipeRight = new EventEmitter();

private swipeHammer: HammerManager | null = null;

constructor(private el: ElementRef, private renderer: Renderer2) {}

ngAfterViewInit() { this.setupHammer(); }

private setupHammer(): void { this.swipeHammer = new Hammer.Manager(this.el.nativeElement, { touchAction: 'auto', });

const swipe = new Hammer.Swipe();
this.swipeHammer.add(swipe);

this.swipeHammer.on('swiperight', () => this.swipeRight.emit());
this.swipeHammer.on('swipeleft', () => this.swipeLeft.emit());

this.swipeHammer.get('pinch').set({ enable: false });

} }

To use this directive, I added the swipeLeft/swipeRight to my image: <img (swipeLeft)="showPreviousImage()" (swipeRight)="showNextImage()" ...