e.center.x & y same as element .left/.top in Hammer.js 2.0 ?

[bradleybossard]

So, I've run into an issue with the new Hammer.js where, if I rotate an element and release, it flops back and forth (almost like a there is a 180 degree turn happening somewhere). I think I've tracked down the issue to not calculating the center of rotation properly. More specifically, in the previous version of Hammer.js, I was using the following code

co.on("dragstart", function(e){
    // getting the initial location
    startX = c.offset().left;
    startY = c.offset().top;
    // the touch offset from the object borders
    offX = e.gesture.center.pageX - startX;
    offY = e.gesture.center.pageY - startY;
debugger;
    // e.gesture.center.pageX/pageY != startX/startY
});

co.on("drag", function(e){
    //new coordinates
    curX = e.gesture.center.pageX - offX;
    curY = e.gesture.center.pageY - offY;
    //updating the css
    c.css({left : curX});
    c.css({top : curY});
});

and in the new version, I've updated it to the following

function panStart(e){
    // getting the initial location
    startX = c.offset().left;
    startY = c.offset().top;
    // the touch offset from the object borders
    offX = e.center.x - startX;
    offY = e.center.y - startY;
debugger;
    // Issue here is e.center.x/y = startX/Y
}

function pan(e) {
    //new coordinates
    curX = e.center.x - offX;
    curY = e.center.y - offY;

    //updating the css
    c.css({left : curX});
    c.css({top : curY});
}

Now, where you see the debugger; statements in the dragstart/panstart event handlers, I am seeing in 2.0 that e.center.x/y is always the same as startX/startY, so when I drag an element, it is always being dragged by the top/left corner of the element. Did I not translate this logic properly for 2.0?

[jtangelder]

Hammer now just sets to the center of the single touch (thus the coords of your finger) after a multi touch. I am thinking about to change this, to keep it's last relative center position, so the target won't jump around.

[AdamDorwart]

I'm for this as well. After implementing pinch zoom for images I noticed that the image jumps at the end of the interaction. This is because the user doesn't lift both fingers off the display simultaneously. I think from a user experience point of view all mufti touch events should add center offsets when fingers are removed during screen interaction so there's no jumping. Conceptually it makes no sense from what Touch.center should mean (which is currently correct) but I can easily see this modified behavior being the preferred default. Maybe add an additional multiTouchCenter parameter?

[jtangelder]

deltaX and deltaY have fixed this issue, and should be used for these kind of things. They hold the relative position. See the demo at the homepage for how it works!

[web-jenezis]

Using the hammer.js for the same issue. hammerized.center.x or hammerized.center.y not the as element left/top position. To change left/top position of element you could use deltaX and deltaY as @jtangelder said. Here is the example (I using this function in onPanMove callback to determine new position):

getPosition(event) {
    const { left, top } = this.element; // exactly the position values from element
    const maxLeft = this.bodyWidth - this.wrapperElement.clientWidth;
    const maxTop = this.bodyHeight - this.wrapperElement.clientHeight;
    const deltaLeft = event.deltaX - this.prevDeltaX;
    const deltaTop = event.deltaY - this.prevDeltaY;
    // next two properties are used to store previous values
    // do not forget to reset them onPanEnd event.
    this.prevDeltaX = event.deltaX;
    this.prevDeltaY = event.deltaY;

    return {
        left: Math.max(0, Math.min(left + deltaLeft, maxLeft)),
        top: Math.max(0, Math.min(top + deltaTop, maxTop)),
    };
}

PS: this example will not allow you to move the element out of the screen