Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swipe and pinch conflict #1293

Open
amihaiBrudo opened this issue Nov 28, 2023 · 0 comments
Open

swipe and pinch conflict #1293

amihaiBrudo opened this issue Nov 28, 2023 · 0 comments

Comments

@amihaiBrudo
Copy link

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()" ...

@amihaiBrudo amihaiBrudo changed the title pinch and zoom conflict swipe and pinch conflict Nov 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant