Open Syam opened 7 years ago
Thanks for reporting, can you show an example in a little bit of code?
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>
Thanks. Do you create oa single hammer instance on the parent of these two items, or a new one for both of them?
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 ?
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