Recognizing the start and stop of a gesture (Hammer 2.0)

[bradleybossard]

So, in the previous version of Hammer, you could listen for the transformstart and transformend events, but I don't see anything similar to that in Hammer 2.0. Looking at the events that I listen to, I see there are two properties, isFirst and isFinal, which sound like I could do something similar with. But, when I print the values out, then don't seem to change. For instance, running some code similar to below, I get the following output, where I don't see isFirst or isFinal change value.

Anyway, what I am trying to do (and maybe going about it the wrong way) is detect when a gesture starts, particularly the rotate one, b/c I'm writing an app where I can words that can be rotated, so if a word have been rotated, then the rotation stops and starts again, I need to incorporate the previous rotation into the new gesture (the new gesture always seems to start from angle 0, correct). Is there a prescribed way of doing this, or is it just that the isFirst and isFinal values aren't being propagated yet?

Thanks for your help in advance.

onRotate 0 0 2 268 hame2.js:124
onRotate 0 0 2 303 hame2.js:124
onRotate 0 0 2 327 hame2.js:124
onRotate 0 0 2 351 hame2.js:124
onRotate 0 0 2 368 hame2.js:124
onRotate 0 0 2 393 hame2.js:124
onPan 0 0 2 160 hame2.js:118
onPan 0 0 2 170 hame2.js:118
onPan 0 0 2 190 hame2.js:118
onPan 0 0 2 214 hame2.js:118
onPan 0 0 2 247 hame2.js:118
onPan 0 0 2 277 hame2.js:118

function addHammer(element) {

  var mc = new Hammer.Manager(element, {});
  mc.add(new Hammer.Rotate({ threshold: 0, pointers: 1 }));
  mc.add(new Hammer.Pan({ threshold: 0}));
  mc.on("pan", onPan);
  mc.on("rotate", onRotate);

  function onPan(e) {
    console.log('onPan', e.isFirst, e.isFinal, e.eventType, e.deltaTime);
  }

  function onRotate(e) {
    console.log('onRotate', e.isFirst, e.isFinal, e.eventType, e.deltaTime);
  }

}

var el1 = document.getElementById('id1');
addHammer(el1);

[jtangelder]

You can now listen to pinchstart/pinchend/pinchcancel and the same for the rotate recognizer.
The isFirst and isFinal are kind of internal properties, used by Hammer, but exposed anyway (doesn't hurt)

A list of all events that are being triggered for the default recognizers;

• tap
• press
• pinchstart pinch pinchin pinchout pinchend pinchcancel
• rotatestart rotate rotateend rotatecancel
• panstart pan panup pandown panleft panright panend pancancel
• swipe swipeleft swiperight swipeup swipedown

[jtangelder]

It got me thinking; why not emit a pan/pinch/rotate-move event, and always trigger a pan/pinch/rotate, regardless it's state.

de400f2

so now;

• tap
• press
• pinch pinchstart pinchmove pinchin pinchout pinchend pinchcancel
• rotate rotatestart rotatemove rotateend rotatecancel
• pan panstart panmove panup pandown panleft panright panend pancancel
• swipe swipeleft swiperight swipeup swipedown

[bradleybossard]

Cool, works for me!

[AaronMeyers]

@jtangelder I'm working on a project where I want to separately track one-finger pans and two-finger pans. So I'm setting up two separate Pan recognizers on my Hammer manager, each with a custom event name option. This gives me separate events for the one-finger and two-finger gestures, but I then lose all the more granular pan events (pan panstart panmove panup pandown panleft panright panend pancancel).

I think it'd be really great if you could listen for those standard Pan events and maybe they get prefixed with the special name you gave that recognizer. Or perhaps instead, there could be some property of the event object that tells you which of the original Pan events it corresponds to.

[Ashley2014]

hi @bradleybossard ,I know this is irrelevant,I'm struggling in debug multi-touch,can you share how you log this infomation?

onRotate 0 0 2 268 hame2.js:124
onRotate 0 0 2 303 hame2.js:124
onRotate 0 0 2 327 hame2.js:124
onRotate 0 0 2 351 hame2.js:124
onRotate 0 0 2 368 hame2.js:124
onRotate 0 0 2 393 hame2.js:124