josdejong / propagating-hammerjs

Extend hammer.js with event propagation
MIT License
40 stars 14 forks source link

Multitouch does not work #8

Open Syam opened 7 years ago

Syam commented 7 years ago

With original hammerjs, i can pan multi elements at same time. But with propagating() multi touch does not work, can pan only one element at a time

josdejong commented 7 years ago

Thanks for reporting, can you show an example in a little bit of code?

Syam commented 7 years ago

Of course, it's a really basic use in an angular2 context.

Config class

export class HammerConfig extends HammerGestureConfig  {

    buildHammer(element: HTMLElement) {
        const mc = new Hammer(element);

        mc.get('pinch').set({enable: true});
        mc.get('rotate').set({enable: true});

        for (const eventName in this.overrides) {
            mc.get(eventName).set(this.overrides[eventName]);
        }
        return propagating(mc);
    }
}

Simple directive component

@Directive({ selector: '[pan]' })
export class PanDirective {
 @HostListener('panmove', ['$event'])
    onPanMove(e:any) {
        e.preventDefault();
        e.stopPropagation();

        let translateX = 'translateX(' + (this._translateX + e.deltaX) + 'px)';
        let translateY = 'translateY(' + (this._translateY + e.deltaY) + 'px)';

        this.renderer.setElementStyle(this.el.nativeElement, 'transform', translateX + ' ' + translateY);
    }

    @HostListener('panend', ['$event'])
    onPanEnd(e:any) {
        this.onPanMove(e);

        this._translateX = this._translateX + e.deltaX;
        this._translateY = this._translateY + e.deltaY;
    }
}

And the html template

<div class="item" pan>Item 1</div>
<div class="item" pan>Item 2</div>
josdejong commented 7 years ago

Thanks. Do you create oa single hammer instance on the parent of these two items, or a new one for both of them?

Syam commented 7 years ago

According to angular2 code, it seem buildHammer(element: HTMLElement) is called for each element, so i guess it's return an instance for each item.

Is this help ?