Search code examples
javascripthtmlwindows-8winjsgesture-recognition

WinJS gestureRecognizer - how to trap multiple gestures


I've been using this article (and some others) to try and implement a gesture recognition in my app, and it does work. However, what I want to do is to detect multiple gestures; for example, a swipe, and a touch. What i don't seem to be able to do is to establish whether the MouseUp event is caused by the end of a gesture, or by a single touch.

function processUpEvent(e) {
    lastElement = e.currentTarget;
    gestureRecognizer.processUpEvent(e.currentPoint);

    processTouchEvent(e.currentPoint);
}

What happens currently is it processed both. How can I detect whether the user has 'let go' of the screen for a swipe, or a touch?

EDIT:

    var recognizer = new Windows.UI.Input.GestureRecognizer();        

    recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX
    recognizer.addEventListener('manipulationcompleted', function (e) {
        var dx = e.cumulative.translation.x
        //Do something with direction here
    });

    var processUp = function (args) {
        try {
            recognizer.processUpEvent(args.currentPoint);
        }
        catch (e) { }
    }

    canvas.addEventListener('MSPointerDown', function (args) {
        try {
            recognizer.processDownEvent(args.currentPoint);
        }
        catch (e) { }
    }, false);

    canvas.addEventListener('MSPointerMove', function (args) {
        try {
            recognizer.processMoveEvents(args.intermediatePoints);
        }
        catch (e) { } 
    }, false);
    canvas.addEventListener('MSPointerUp', processUp, false);
    canvas.addEventListener('MSPointerCancel', processUp, false);

So I need to handle both processUp and manipulationcompleted, but one or the other.


Solution

  • I've found a way to do this, but it's not pretty:

    var eventFlag = 0;
    
    var processUp = function (args) {
        try {
            recognizer.processUpEvent(args.currentPoint);
    
            if (eventFlag == 0) {
               // do stuff
            } else {
               eventFlag = 0;
            }
        }
        catch (e) { }
    }
    
    recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX
    recognizer.addEventListener('manipulationcompleted', function (e) {
        var dx = e.cumulative.translation.x
        //Do something with direction here
        eventFlag = 1;
    });