Angular2 :How to make a movable svg object with hammer.js? - svg

Question

i'm Working on an angular2 app, and i'm using hammer.js to make movable a simple rectangle svg object in the view of my component , the methode i uses consists on using the "pan action " of hammer which gives me the x and y position of every deplacing clich mouvement , and i'm affecting thos x and y into the x and y attribtes of my svg rectangle , the problem is that this affectation is not done even i'm seeing in the console the value of x and y of the action ,
any idea to pass the value of depalcement into the svg element postion ???
this is my code :
the view:
<div>
<svg class="simulation">
<rect id="test1" x="{{NX}}" y="{{NY}}" height="150" width="200"
style="stroke:#EC9A20;stroke-width: 15; fill: none"/>
</svg>
</div>
and the TS.file :
export class ContentComponent implements AfterViewInit{
static hammerInitialized = false;
public NX:any ;
public NY:any ;
ngAfterViewInit():any {
console.log('in ngAfterViewInit');
if (!ContentComponent.hammerInitialized) {
var myElement = document.getElementById('test1');//indiquer ici l'element
var animation = new Hammer(myElement);
animation.get('pan').set({direction:Hammer.DIRECTION_ALL})
animation.on("panleft panright panup pandown tap press",
(ev):any => {
myElement.textContent = ev.type +" gesture detected.";
console.log(ev);
this.NX=ev.center.x;
console.log("NX="+this.NX) // this show successfully the value of the action movement NX
this.NY=ev.center.y;
console.log("NY="+this.NY) // this show successfully the value of the action movement NY
}
);
ContentComponent.hammerInitialized = true;
}
else {
console.log('hammer already initialised');
}
console.log("NX="+this.NX); //here it shows me that NX is undefined
console.log("NY="+this.NY) //undefined too
}
}

Answer 1

that worked by not passing the hammer function as a static param
ngAfterViewInit() {
/////////////////////////////////////////////////
//reference à l'element svg
var myElement = document.getElementById('idsimulation');
var actionHammer = new Hammer(myElement);
//action pan
actionHammer.get('pan').set({direction:Hammer.DIRECTION_ALL});
//actionHammer.on("panleft panright panup pandown tap press",hammer);
//actionHammer.on('pan',hammer);
actionHammer.on('pan',ev => {
//console.log(ev);
console.log("X=" + ev.center.x);
console.log("Y=" + ev.center.x);
this.ParamService.dormant.X0 = (ev.center.x) - 200; //170
this.ParamService.dormant.Y0 = (ev.center.y) - 190; //150
// myElement.setAttribute("x", ev.center.x+200);
// myElement.setAttribute("y", ev.center.y+270);
});
//action pinch
actionHammer.get('pinch').set({enable:true});
actionHammer.on('pinch',ev =>{
console.log(ev);
})
}