Skip to content

swipe and pinch conflict #1293

Description

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions