Skip to content

feat: cancel contradictory gesture events #7296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MartoYankov merged 14 commits into from
Jun 12, 2019
Merged

feat: cancel contradictory gesture events #7296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a76e954
Fix simultaneous tap gestures for iOS
MCurran16 May 23, 2019
c7eca4e
fix(gestures-android): Handle tap and double tap listeners on the sam…
MCurran16 Jun 2, 2019
4e59f9f
refact(iOS): code convention for iOS gestures
MCurran16 Jun 2, 2019
8f513ee
Reset tns-<android/ios> for test app
MCurran16 Jun 2, 2019
6c7cbdd
Fix simultaneous tap gestures for iOS
MCurran16 May 23, 2019
71ff350
fix(gestures-android): Handle tap and double tap listeners on the sam…
MCurran16 Jun 2, 2019
3e6588b
refact(iOS): code convention for iOS gestures
MCurran16 Jun 2, 2019
3c31185
Reset tns-<android/ios> for test app
MCurran16 Jun 2, 2019
7ec7a13
Merge branch 'gestures-fix' of github.com:MCurran16/NativeScript into…
MCurran16 Jun 2, 2019
fa6d322
Merge branch 'master' into gestures-fix
MCurran16 Jun 3, 2019
d5c9fa2
Merge branch 'master' into gestures-fix
MCurran16 Jun 4, 2019
054213d
Merge branch 'master' into gestures-fix
MCurran16 Jun 6, 2019
0f5b87e
refactor(android): handle single tap on up and double tap between fir…
MCurran16 Jun 10, 2019
d58b8b7
Merge branch 'master' into gestures-fix
MCurran16 Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 40 additions & 19 deletions apps/app/ui-tests-app/events/gestures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,49 @@ import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout";

export function createPage() {

var stack = new stackLayoutModule.StackLayout();
var labelHeight = Math.round(deviceProperties.screen.mainScreen.heightPixels / (7 * deviceProperties.screen.mainScreen.scale));
var stopButton = new button.Button();
const stack = new stackLayoutModule.StackLayout();
const labelHeight = Math.round(deviceProperties.screen.mainScreen.heightPixels / (7 * deviceProperties.screen.mainScreen.scale));
const stopButton = new button.Button();
stopButton.text = "Stop Detecting Gestures";
stack.addChild(stopButton);

var tapLabel = new labelModule.Label();
const tapLabel = new labelModule.Label();
tapLabel.text = "Tap here";
stack.addChild(tapLabel);

var doubletapLabel = new labelModule.Label();
const doubletapLabel = new labelModule.Label();
doubletapLabel.text = "Double Tap here";
stack.addChild(doubletapLabel);

var longpressLabel = new labelModule.Label();
const longpressLabel = new labelModule.Label();
longpressLabel.text = "Long Press here";
stack.addChild(longpressLabel);

var swipeLabel = new labelModule.Label();
const tapAndDoubleTapLabel = new labelModule.Label();
tapAndDoubleTapLabel.height = labelHeight;
tapAndDoubleTapLabel.text = "Tap or Double Tap";
tapAndDoubleTapLabel.textWrap = true;
stack.addChild(tapAndDoubleTapLabel);

const swipeLabel = new labelModule.Label();
swipeLabel.height = labelHeight;
swipeLabel.text = "Swipe here";
swipeLabel.textWrap = true;
stack.addChild(swipeLabel);

var panLabel = new labelModule.Label();
const panLabel = new labelModule.Label();
panLabel.height = labelHeight;
panLabel.text = "Pan here";
panLabel.textWrap = true;
stack.addChild(panLabel);

var pinchLabel = new labelModule.Label();
const pinchLabel = new labelModule.Label();
pinchLabel.height = labelHeight;
pinchLabel.text = "Pinch here";
pinchLabel.textWrap = true;
stack.addChild(pinchLabel);

var rotaionLabel = new labelModule.Label();
const rotaionLabel = new labelModule.Label();
rotaionLabel.height = labelHeight;
rotaionLabel.text = "Rotate here";
rotaionLabel.textWrap = true;
Expand All @@ -57,63 +63,78 @@ export function createPage() {
observer5.disconnect();
observer6.disconnect();
observer7.disconnect();
observer8.disconnect();
observer9.disconnect();
tapLabel.text = "Gestures detection disabled";
doubletapLabel.text = "Gestures detection disabled";
longpressLabel.text = "Gestures detection disabled";
swipeLabel.text = "Gesturesd detection disabled";
panLabel.text = "Gestures detection disabled";
pinchLabel.text = "Gestures detection disabled";
rotaionLabel.text = "Gestures detection disabled";
tapAndDoubleTapLabel.text = "Gestures detection disabled";
});

tapLabel.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
tapLabel.text = "Tap gesture detected, " + (args.object === tapLabel);
});

var observer1 = tapLabel.getGestureObservers(gestures.GestureTypes.tap)[0];
const observer1 = tapLabel.getGestureObservers(gestures.GestureTypes.tap)[0];

doubletapLabel.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) {
doubletapLabel.text = "Double Tap gesture detected, " + (args.object === doubletapLabel);
});

var observer2 = doubletapLabel.getGestureObservers(gestures.GestureTypes.doubleTap)[0];
const observer2 = doubletapLabel.getGestureObservers(gestures.GestureTypes.doubleTap)[0];

longpressLabel.on(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
longpressLabel.text = "Long Press gesture detected, " + (args.object === longpressLabel);
});

var observer3 = longpressLabel.getGestureObservers(gestures.GestureTypes.longPress)[0];
const observer3 = longpressLabel.getGestureObservers(gestures.GestureTypes.longPress)[0];

swipeLabel.on(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) {
swipeLabel.text = "Swipe Direction: " + args.direction + ", " + (args.object === swipeLabel); // + getStateAsString(args.state);
});

var observer4 = swipeLabel.getGestureObservers(gestures.GestureTypes.swipe)[0];
const observer4 = swipeLabel.getGestureObservers(gestures.GestureTypes.swipe)[0];

panLabel.on(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) {
panLabel.text = "Pan deltaX:" + Math.round(args.deltaX) + "; deltaY:" + Math.round(args.deltaY) + ";" + ", " + (args.object === panLabel) + getStateAsString(args.state);
});

var observer5 = panLabel.getGestureObservers(gestures.GestureTypes.pan)[0];
const observer5 = panLabel.getGestureObservers(gestures.GestureTypes.pan)[0];

pinchLabel.on(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) {
pinchLabel.text = "Pinch Scale: " + Math.round(args.scale) + ", " + (args.object === pinchLabel) + getStateAsString(args.state);
});

var observer6 = pinchLabel.getGestureObservers(gestures.GestureTypes.pinch)[0];
const observer6 = pinchLabel.getGestureObservers(gestures.GestureTypes.pinch)[0];

rotaionLabel.on(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) {
rotaionLabel.text = "Rotation: " + Math.round(args.rotation) + ", " + (args.object === rotaionLabel) + getStateAsString(args.state);
});

var observer7 = rotaionLabel.getGestureObservers(gestures.GestureTypes.rotation)[0];
const observer7 = rotaionLabel.getGestureObservers(gestures.GestureTypes.rotation)[0];

tapAndDoubleTapLabel.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) {
tapAndDoubleTapLabel.text = "Last action: Double tap gesture, " + (args.object === tapAndDoubleTapLabel);
});

const observer8 = tapAndDoubleTapLabel.getGestureObservers(gestures.GestureTypes.doubleTap)[0];

tapAndDoubleTapLabel.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
tapAndDoubleTapLabel.text = "Last action: Tap gesture, " + (args.object === tapAndDoubleTapLabel);
});

const observer9 = tapAndDoubleTapLabel.getGestureObservers(gestures.GestureTypes.tap)[0];

var page = new pages.Page();
const page = new pages.Page();
page.content = stack;
return page;
}

var states = new Array<string>();
const states = new Array<string>();
function getStateAsString(state: gestures.GestureStateTypes): string {
if (state === gestures.GestureStateTypes.began) {
states.length = 0;
Expand Down
84 changes: 44 additions & 40 deletions tns-core-modules/ui/gestures/gestures.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
// Import layout from utils directly to avoid circular references
import { layout } from "../../utils/utils";

import * as timer from "../../timer";

export * from "./gestures-common";

interface TapAndDoubleTapGestureListener {
Expand All @@ -27,6 +29,11 @@ function initializeTapAndDoubleTapGestureListener() {
private _target: View;
private _type: number;

private _lastUpTime: number = 0;
private _tapTimeoutId: number;

private static DoubleTapTimeout = android.view.ViewConfiguration.getDoubleTapTimeout();

constructor(observer: GesturesObserver, target: View, type: number) {
super();

Expand All @@ -37,28 +44,42 @@ function initializeTapAndDoubleTapGestureListener() {
}

public onSingleTapUp(motionEvent: android.view.MotionEvent): boolean {
if (this._type & GestureTypes.tap) {
let args = _getArgs(GestureTypes.tap, this._target, motionEvent);
_executeCallback(this._observer, args);
this._handleSingleTap(motionEvent);
this._lastUpTime = Date.now();
return true;
}

public onDown(motionEvent: android.view.MotionEvent): boolean {
const tapTime = Date.now();
if ((tapTime - this._lastUpTime) <= TapAndDoubleTapGestureListenerImpl.DoubleTapTimeout) {
this._handleDoubleTap(motionEvent);
}
return true;
}

public onDoubleTap(motionEvent: android.view.MotionEvent): boolean {
if (this._type & GestureTypes.doubleTap) {
let args = _getArgs(GestureTypes.doubleTap, this._target, motionEvent);
public onLongPress(motionEvent: android.view.MotionEvent): void {
if (this._type & GestureTypes.longPress) {
const args = _getArgs(GestureTypes.longPress, this._target, motionEvent);
_executeCallback(this._observer, args);
}
return true;
}

public onDown(motionEvent: android.view.MotionEvent): boolean {
return true;
private _handleSingleTap(motionEvent: android.view.MotionEvent): void {
this._tapTimeoutId = timer.setTimeout(() => {
if (this._type & GestureTypes.tap) {
const args = _getArgs(GestureTypes.tap, this._target, motionEvent);
_executeCallback(this._observer, args);
}
timer.clearTimeout(this._tapTimeoutId);
}, TapAndDoubleTapGestureListenerImpl.DoubleTapTimeout);
}

public onLongPress(motionEvent: android.view.MotionEvent): void {
if (this._type & GestureTypes.longPress) {
let args = _getArgs(GestureTypes.longPress, this._target, motionEvent);
private _handleDoubleTap(motionEvent: android.view.MotionEvent): void {
if (this._tapTimeoutId) {
timer.clearTimeout(this._tapTimeoutId);
}
if (this._type & GestureTypes.doubleTap) {
const args = _getArgs(GestureTypes.doubleTap, this._target, motionEvent);
_executeCallback(this._observer, args);
}
}
Expand Down Expand Up @@ -94,7 +115,7 @@ function initializePinchGestureListener() {
public onScaleBegin(detector: android.view.ScaleGestureDetector): boolean {
this._scale = detector.getScaleFactor();

let args = new PinchGestureEventData(
const args = new PinchGestureEventData(
this._target,
detector,
this._scale,
Expand All @@ -109,7 +130,7 @@ function initializePinchGestureListener() {
public onScale(detector: android.view.ScaleGestureDetector): boolean {
this._scale *= detector.getScaleFactor();

let args = new PinchGestureEventData(
const args = new PinchGestureEventData(
this._target,
detector,
this._scale,
Expand All @@ -123,7 +144,7 @@ function initializePinchGestureListener() {
public onScaleEnd(detector: android.view.ScaleGestureDetector): void {
this._scale *= detector.getScaleFactor();

let args = new PinchGestureEventData(
const args = new PinchGestureEventData(
this._target,
detector,
this._scale,
Expand Down Expand Up @@ -172,41 +193,28 @@ function initializeSwipeGestureListener() {
let deltaX = currentEvent.getX() - initialEvent.getX();

if (Math.abs(deltaX) > Math.abs(deltaY)) {

if (Math.abs(deltaX) > SWIPE_THRESHOLD
&& Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {

if (deltaX > 0) {

args = _getSwipeArgs(SwipeDirection.right, this._target, initialEvent, currentEvent);
_executeCallback(this._observer, args);

result = true;
} else {

args = _getSwipeArgs(SwipeDirection.left, this._target, initialEvent, currentEvent);
_executeCallback(this._observer, args);

result = true;
}
}

} else {

if (Math.abs(deltaY) > SWIPE_THRESHOLD
&& Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {

if (deltaY > 0) {

args = _getSwipeArgs(SwipeDirection.down, this._target, initialEvent, currentEvent);
_executeCallback(this._observer, args);

result = true;
} else {

args = _getSwipeArgs(SwipeDirection.up, this._target, initialEvent, currentEvent);
_executeCallback(this._observer, args);

result = true;
}
}
Expand All @@ -228,7 +236,7 @@ const INVALID_POINTER_ID = -1;
const TO_DEGREES = (180 / Math.PI);

export function observe(target: View, type: GestureTypes, callback: (args: GestureEventData) => void, context?: any): GesturesObserver {
let observer = new GesturesObserver(target, callback, context);
const observer = new GesturesObserver(target, callback, context);
observer.observe(type);
return observer;
}
Expand Down Expand Up @@ -292,7 +300,7 @@ export class GesturesObserver extends GesturesObserverBase {
private _attach(target: View, type: GestureTypes) {
this._detach();

if (type & GestureTypes.tap || type & GestureTypes.doubleTap || type & GestureTypes.longPress) {
if ((type & GestureTypes.tap) || (type & GestureTypes.doubleTap) || (type & GestureTypes.longPress)) {
initializeTapAndDoubleTapGestureListener();
this._simpleGestureDetector = new androidx.core.view.GestureDetectorCompat(target._context, new TapAndDoubleTapGestureListener(this, this.target, type));
}
Expand Down Expand Up @@ -465,7 +473,7 @@ class CustomPanGestureDetector {
return true;
}

private trackStop(currentEvent: android.view.MotionEvent, cahceEvent: boolean) {
private trackStop(currentEvent: android.view.MotionEvent, cacheEvent: boolean) {
if (this.isTracking) {
let args = _getPanArgs(this.deltaX, this.deltaY, this.target, GestureStateTypes.ended, null, currentEvent);
_executeCallback(this.observer, args);
Expand All @@ -475,10 +483,9 @@ class CustomPanGestureDetector {
this.isTracking = false;
}

if (cahceEvent) {
if (cacheEvent) {
this.lastEventCache = currentEvent;
}
else {
} else {
this.lastEventCache = undefined;
}
}
Expand Down Expand Up @@ -509,8 +516,7 @@ class CustomPanGestureDetector {
x: event.getRawX() / this.density,
y: event.getRawY() / this.density
};
}
else {
} else {
const offX = event.getRawX() - event.getX();
const offY = event.getRawY() - event.getY();
let res = { x: 0, y: 0 };
Expand Down Expand Up @@ -559,8 +565,7 @@ class CustomRotateGestureDetector {
if (this.trackedPtrId1 === INVALID_POINTER_ID && pointerID !== this.trackedPtrId2) {
this.trackedPtrId1 = pointerID;
assigned = true;
}
else if (this.trackedPtrId2 === INVALID_POINTER_ID && pointerID !== this.trackedPtrId1) {
} else if (this.trackedPtrId2 === INVALID_POINTER_ID && pointerID !== this.trackedPtrId1) {
this.trackedPtrId2 = pointerID;
assigned = true;
}
Expand All @@ -585,8 +590,7 @@ class CustomRotateGestureDetector {
case android.view.MotionEvent.ACTION_POINTER_UP:
if (pointerID === this.trackedPtrId1) {
this.trackedPtrId1 = INVALID_POINTER_ID;
}
else if (pointerID === this.trackedPtrId2) {
} else if (pointerID === this.trackedPtrId2) {
this.trackedPtrId2 = INVALID_POINTER_ID;
}

Expand Down
Loading