fix: update tap event data (#8415)

* Update tap event data object

Adds a:

- TabGestureEventData interface, which can be used for both tap and doubleTap events.

- The event object returned by both tap and doubleTap events now have getX(), getY(), and getPointersCount() methods. These facilitate the same function as those of the touch event object.

* ui(gesture): getX,getY in DIP

Updates the getX() and getY() methods of Tap, doubleTap and touch events to return DIP instead of DP.

* ui(gesture): tap event data includes location

Tap and doubleTap event data now include getX and getY methods for event location. These are in DIP format.

getPointerCount is also available.

* Fix tslint errors

* fix minor formatting issues for api-extrector
This commit is contained in:
Sam Donald
2020-03-19 21:51:23 +11:00
committed by GitHub
parent 4a67a3b73f
commit 8dbb623944
6 changed files with 397 additions and 378 deletions

View File

@@ -874,13 +874,13 @@ export interface GestureEventData extends EventData {
ios: any /* UIGestureRecognizer */; ios: any /* UIGestureRecognizer */;
type: GestureTypes; type: GestureTypes;
view: View; view: View;
} }
// @public // @public
export interface GestureEventDataWithState extends GestureEventData { export interface GestureEventDataWithState extends GestureEventData {
// (undocumented) // (undocumented)
state: number; state: number;
} }
// @public // @public
export class GesturesObserver { export class GesturesObserver {
@@ -897,7 +897,7 @@ export class GesturesObserver {
observe(type: GestureTypes); observe(type: GestureTypes);
type: GestureTypes; type: GestureTypes;
} }
// @public // @public
export enum GestureStateTypes { export enum GestureStateTypes {
@@ -905,7 +905,7 @@ export enum GestureStateTypes {
cancelled, cancelled,
changed, changed,
ended ended
} }
// @public // @public
export enum GestureTypes { export enum GestureTypes {
@@ -917,7 +917,7 @@ export enum GestureTypes {
swipe, swipe,
tap, tap,
touch touch
} }
// @public // @public
export class GridLayout extends LayoutBase { export class GridLayout extends LayoutBase {
@@ -1646,7 +1646,7 @@ export interface PanGestureEventData extends GestureEventDataWithState {
deltaX: number; deltaX: number;
// (undocumented) // (undocumented)
deltaY: number; deltaY: number;
} }
// @public // @public
export interface ParserEvent { export interface ParserEvent {
@@ -1702,7 +1702,7 @@ export interface PinchGestureEventData extends GestureEventDataWithState {
// (undocumented) // (undocumented)
scale: number; scale: number;
} }
// @public // @public
export class Placeholder extends View { export class Placeholder extends View {
@@ -1767,7 +1767,7 @@ export class Repeater extends CustomLayoutView {
export interface RotationGestureEventData extends GestureEventDataWithState { export interface RotationGestureEventData extends GestureEventDataWithState {
// (undocumented) // (undocumented)
rotation: number; rotation: number;
} }
// @public // @public
export module Screen { export module Screen {
@@ -2172,13 +2172,13 @@ export enum SwipeDirection {
left, left,
right, right,
up up
} }
// @public // @public
export interface SwipeGestureEventData extends GestureEventData { export interface SwipeGestureEventData extends GestureEventData {
// (undocumented) // (undocumented)
direction: SwipeDirection; direction: SwipeDirection;
} }
// @public // @public
export class Switch extends View { export class Switch extends View {
@@ -2417,6 +2417,15 @@ export class TabViewItem extends ViewBase {
public view: View; public view: View;
} }
// @public
export interface TapGestureEventData extends GestureEventData {
getPointerCount(): number;
getX(): number;
getY(): number;
}
// @public // @public
export interface Template { export interface Template {
(): View; (): View;
@@ -2536,20 +2545,12 @@ export interface TimerInfo {
} }
// @public // @public
export interface TouchGestureEventData extends GestureEventData { export interface TouchGestureEventData extends TapGestureEventData {
action: "up" | "move" | "down" | "cancel"; action: "up" | "move" | "down" | "cancel";
// Warning: (ae-forgotten-export) The symbol "Pointer" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "Pointer" needs to be exported by the entry point index.d.ts
getActivePointers(): Array<Pointer>; getActivePointers(): Array<Pointer>;
getAllPointers(): Array<Pointer>; getAllPointers(): Array<Pointer>;
}
getPointerCount(): number;
getX(): number;
getY(): number;
}
// @public (undocumented) // @public (undocumented)
export const Trace: { export const Trace: {

View File

@@ -1,5 +1,5 @@
// Definitions. // Definitions.
import { DoubleTapGestureEventData, GestureEventData, GestureEventDataWithState, PanGestureEventData, RotationGestureEventData, SwipeGestureEventData } from "."; import { GestureEventData, TapGestureEventData, SwipeGestureEventData, PanGestureEventData, RotationGestureEventData, GestureEventDataWithState } from ".";
import { View, EventData } from "../core/view"; import { View, EventData } from "../core/view";
// Types. // Types.
@@ -71,14 +71,14 @@ function initializeTapAndDoubleTapGestureListener() {
if (this._target.getGestureObservers(GestureTypes.doubleTap)) { if (this._target.getGestureObservers(GestureTypes.doubleTap)) {
this._tapTimeoutId = timer.setTimeout(() => { this._tapTimeoutId = timer.setTimeout(() => {
if (this._type & GestureTypes.tap) { if (this._type & GestureTypes.tap) {
const args = _getArgs(GestureTypes.tap, this._target, motionEvent); const args = _getTapArgs(GestureTypes.tap, this._target, motionEvent);
_executeCallback(this._observer, args); _executeCallback(this._observer, args);
} }
timer.clearTimeout(this._tapTimeoutId); timer.clearTimeout(this._tapTimeoutId);
}, TapAndDoubleTapGestureListenerImpl.DoubleTapTimeout); }, TapAndDoubleTapGestureListenerImpl.DoubleTapTimeout);
} else { } else {
if (this._type & GestureTypes.tap) { if (this._type & GestureTypes.tap) {
const args = _getArgs(GestureTypes.tap, this._target, motionEvent); const args = _getTapArgs(GestureTypes.tap, this._target, motionEvent);
_executeCallback(this._observer, args); _executeCallback(this._observer, args);
} }
} }
@@ -89,7 +89,7 @@ function initializeTapAndDoubleTapGestureListener() {
timer.clearTimeout(this._tapTimeoutId); timer.clearTimeout(this._tapTimeoutId);
} }
if (this._type & GestureTypes.doubleTap) { if (this._type & GestureTypes.doubleTap) {
const args = _getDoubleTapArgs(this._target, motionEvent); const args = _getTapArgs(GestureTypes.doubleTap, this._target, motionEvent);
_executeCallback(this._observer, args); _executeCallback(this._observer, args);
} }
} }
@@ -372,14 +372,17 @@ export class GesturesObserver extends GesturesObserverBase {
} }
} }
function _getArgs(type: GestureTypes, view: View, e: android.view.MotionEvent): GestureEventData { function _getTapArgs(type: GestureTypes, view: View, e: android.view.MotionEvent): TapGestureEventData {
return <GestureEventData>{ return <TapGestureEventData>{
type: type, type: type,
view: view, view: view,
android: e, android: e,
ios: undefined, ios: undefined,
object: view, object: view,
eventName: toString(type), eventName: toString(type),
getPointerCount: () => e.getPointerCount(),
getX: () => layout.toDeviceIndependentPixels(e.getX()),
getY: () => layout.toDeviceIndependentPixels(e.getY())
}; };
} }
@@ -395,19 +398,6 @@ function _getLongPressArgs(type: GestureTypes, view: View, state: GestureStateTy
}; };
} }
function _getDoubleTapArgs(view: View, e: android.view.MotionEvent): DoubleTapGestureEventData {
return <DoubleTapGestureEventData>{
type: GestureTypes.doubleTap,
view: view,
android: e,
getX: () => e.getX() / layout.getDisplayDensity(),
getY: () => e.getY() / layout.getDisplayDensity(),
ios: undefined,
object: view,
eventName: toString(GestureTypes.doubleTap),
};
}
function _getSwipeArgs(direction: SwipeDirection, view: View, function _getSwipeArgs(direction: SwipeDirection, view: View,
initialEvent: android.view.MotionEvent, currentEvent: android.view.MotionEvent): SwipeGestureEventData { initialEvent: android.view.MotionEvent, currentEvent: android.view.MotionEvent): SwipeGestureEventData {
return <SwipeGestureEventData>{ return <SwipeGestureEventData>{

View File

@@ -1,14 +1,14 @@
/** /**
* Contains the GesturesObserver class, which lets you observe and respond to user gestures. * Contains the GesturesObserver class, which lets you observe and respond to user gestures.
* @module "ui/gestures" * @module "ui/gestures"
*/ /** */ */ /** */
import { View, EventData } from "../core/view"; import { View, EventData } from "../core/view";
/** /**
* Defines an enum with supported gesture types. * Defines an enum with supported gesture types.
*/ */
export enum GestureTypes { export enum GestureTypes {
/** /**
* Denotes tap (click) gesture. * Denotes tap (click) gesture.
*/ */
@@ -41,12 +41,12 @@ export enum GestureTypes {
* Denotes touch action. * Denotes touch action.
*/ */
touch touch
} }
/** /**
* Defines an enum with supported gesture states. * Defines an enum with supported gesture states.
*/ */
export enum GestureStateTypes { export enum GestureStateTypes {
/** /**
* Gesture canceled. * Gesture canceled.
*/ */
@@ -63,12 +63,12 @@ export enum GestureStateTypes {
* Gesture ended. * Gesture ended.
*/ */
ended ended
} }
/** /**
* Defines an enum for swipe gesture direction. * Defines an enum for swipe gesture direction.
*/ */
export enum SwipeDirection { export enum SwipeDirection {
/** /**
* Denotes right direction for swipe gesture. * Denotes right direction for swipe gesture.
*/ */
@@ -85,12 +85,12 @@ export enum SwipeDirection {
* Denotes down direction for swipe gesture. * Denotes down direction for swipe gesture.
*/ */
down down
} }
/** /**
* Defines a touch action * Defines a touch action
*/ */
export module TouchAction { export module TouchAction {
/** /**
* Down action. * Down action.
*/ */
@@ -110,12 +110,12 @@ export module TouchAction {
* Cancel action. * Cancel action.
*/ */
export const cancel: string; export const cancel: string;
} }
/** /**
* Provides gesture event data. * Provides gesture event data.
*/ */
export interface GestureEventData extends EventData { export interface GestureEventData extends EventData {
/** /**
* Gets the type of the gesture. * Gets the type of the gesture.
*/ */
@@ -132,32 +132,35 @@ export interface GestureEventData extends EventData {
* Gets the underlying native android specific [gesture detector](http://developer.android.com/reference/android/view/GestureDetector.html). * Gets the underlying native android specific [gesture detector](http://developer.android.com/reference/android/view/GestureDetector.html).
*/ */
android: any android: any
} }
/** /**
* Provides gesture event data. * Provides gesture event data.
*/ */
export interface TouchGestureEventData extends GestureEventData { export interface TapGestureEventData extends GestureEventData {
/**
* Gets action of the touch. Possible values: 'up', 'move', 'down', 'cancel'
*/
action: "up" | "move" | "down" | "cancel";
/**
* Gets the X coordinate of this event inside the view that triggered the event.
*/
getX(): number;
/**
* Gets the Y coordinate of this event inside the view that triggered the event.
*/
getY(): number;
/** /**
* Gets the number of pointers in the event. * Gets the number of pointers in the event.
*/ */
getPointerCount(): number; getPointerCount(): number;
/**
* Gets the X coordinate of this event inside the view that triggered the event
*/
getX(): number;
/**
* Gets the Y coordinate of the event inside the view that triggered the event.
*/
getY(): number;
}
/**
* Provides gesture event data.
*/
export interface TouchGestureEventData extends TapGestureEventData {
/**
* Gets action of the touch. Possible values: 'up', 'move', 'down', 'cancel'
*/
action: "up" | "move" | "down" | "cancel";
/** /**
* Gets the pointers that triggered the event. * Gets the pointers that triggered the event.
* Note: In Android there is aways only one active pointer. * Note: In Android there is aways only one active pointer.
@@ -168,12 +171,12 @@ export interface TouchGestureEventData extends GestureEventData {
* Gets all pointers. * Gets all pointers.
*/ */
getAllPointers(): Array<Pointer>; getAllPointers(): Array<Pointer>;
} }
/** /**
* Pointer is an object representing a finger (or other object) that is touching the screen. * Pointer is an object representing a finger (or other object) that is touching the screen.
*/ */
export interface Pointer { export interface Pointer {
/** /**
* The id of the pointer. * The id of the pointer.
*/ */
@@ -193,59 +196,75 @@ export interface Pointer {
* Gets the Y coordinate of the pointer inside the view that triggered the event. * Gets the Y coordinate of the pointer inside the view that triggered the event.
*/ */
getY(): number; getY(): number;
}
/** /**
* Gests the X coordinate of the pointer inside the view that triggered the event.
* @returns The X coordinate in _Device Pixels_.
*/
getXPixels(): number
/**
* Gets the X coordinate of the pointer inside the view that triggered the event.
* @returns The X coordinate in _Device Independent Pixels_.
*/
getXDIP(): number
/**
* Gests the Y coordinate of the pointer inside the view that triggered the event.
* @returns The Y coordinate in _Device Pixels_.
*/
getYPixels(): number
/**
* Gets the Y coordinate of the pointer inside the view that triggered the event.
* @returns The Y coordinate in _Device Independent Pixels_.
*/
getYDIP(): number
}
/**
* Provides gesture event data. * Provides gesture event data.
*/ */
export interface GestureEventDataWithState extends GestureEventData { export interface GestureEventDataWithState extends GestureEventData {
state: number; state: number;
} }
/** /**
* Provides gesture event data for pinch gesture. * Provides gesture event data for pinch gesture.
*/ */
export interface PinchGestureEventData extends GestureEventDataWithState { export interface PinchGestureEventData extends GestureEventDataWithState {
scale: number; scale: number;
getFocusX(): number; getFocusX(): number;
getFocusY(): number; getFocusY(): number;
} }
/** /**
* Provides gesture event data for double tap gesture.
*/
export interface DoubleTapGestureEventData extends GestureEventData {
getX(): number;
getY(): number;
}
/**
* Provides gesture event data for swipe gesture. * Provides gesture event data for swipe gesture.
*/ */
export interface SwipeGestureEventData extends GestureEventData { export interface SwipeGestureEventData extends GestureEventData {
direction: SwipeDirection; direction: SwipeDirection;
} }
/** /**
* Provides gesture event data for pan gesture. * Provides gesture event data for pan gesture.
*/ */
export interface PanGestureEventData extends GestureEventDataWithState { export interface PanGestureEventData extends GestureEventDataWithState {
deltaX: number; deltaX: number;
deltaY: number; deltaY: number;
} }
/** /**
* Provides gesture event data for rotation gesture. * Provides gesture event data for rotation gesture.
*/ */
export interface RotationGestureEventData extends GestureEventDataWithState { export interface RotationGestureEventData extends GestureEventDataWithState {
rotation: number; rotation: number;
} }
/** /**
* Provides options for the GesturesObserver. * Provides options for the GesturesObserver.
*/ */
export class GesturesObserver { export class GesturesObserver {
/** /**
* Creates an instance of GesturesObserver class. * Creates an instance of GesturesObserver class.
* @param target - The view for which the observer is created. * @param target - The view for which the observer is created.
@@ -284,26 +303,27 @@ export class GesturesObserver {
* An internal Android specific method used to pass the motion event to the correct gesture observer. * An internal Android specific method used to pass the motion event to the correct gesture observer.
*/ */
androidOnTouchEvent: (motionEvent: any /* android.view.MotionEvent */) => void; androidOnTouchEvent: (motionEvent: any /* android.view.MotionEvent */) => void;
} }
/** /**
* A short-hand function that is used to create a gesture observer for a view and gesture. * A short-hand function that is used to create a gesture observer for a view and gesture.
* @param target - View which will be watched for originating a specific gesture. * @param target - View which will be watched for originating a specific gesture.
* @param type - Type of the gesture. * @param type - Type of the gesture.
* @param callback - A function that will be executed when a gesture is received. * @param callback - A function that will be executed when a gesture is received.
* @param context - this argument for the callback. * @param context - this argument for the callback.
*/ */
export function observe(target: View, type: GestureTypes, callback: (args: GestureEventData) => void, context?: any): GesturesObserver; export function observe(target: View, type: GestureTypes, callback: (args: GestureEventData) => void, context?: any): GesturesObserver;
/** /**
* Returns a string representation of a gesture type. * Returns a string representation of a gesture type.
* @param type - Type of the gesture. * @param type - Type of the gesture.
* @param separator(optional) - Text separator between gesture type strings. * @param separator(optional) - Text separator between gesture type strings.
*/ */
export function toString(type: GestureTypes, separator?: string): string; export function toString(type: GestureTypes, separator?: string): string;
/** /**
* Returns a gesture type enum value from a string (case insensitive). * Returns a gesture type enum value from a string (case insensitive).
* @param type - A string representation of a gesture type (e.g. Tap). * @param type - A string representation of a gesture type (e.g. Tap).
*/ */
export function fromString(type: string): GestureTypes; export function fromString(type: string): GestureTypes;

View File

@@ -1,10 +1,14 @@
// Definitions. // Definitions.
import { DoubleTapGestureEventData, GestureEventData, GestureEventDataWithState, SwipeGestureEventData, PanGestureEventData, RotationGestureEventData, PinchGestureEventData } from ".";
import { GestureEventData, TapGestureEventData, GestureEventDataWithState, SwipeGestureEventData, PanGestureEventData, RotationGestureEventData, PinchGestureEventData } from ".";
import { View, EventData } from "../core/view"; import { View, EventData } from "../core/view";
// Types. // Types.
import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from "./gestures-common"; import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from "./gestures-common";
// Import layout from utils directly to avoid circular references
import { layout } from "../../utils/utils";
export * from "./gestures-common"; export * from "./gestures-common";
export function observe(target: View, type: GestureTypes, callback: (args: GestureEventData) => void, context?: any): GesturesObserver { export function observe(target: View, type: GestureTypes, callback: (args: GestureEventData) => void, context?: any): GesturesObserver {
@@ -123,12 +127,14 @@ export class GesturesObserver extends GesturesObserverBase {
const nativeView = <UIView>target.nativeViewProtected; const nativeView = <UIView>target.nativeViewProtected;
if (type & GestureTypes.tap) { if (type & GestureTypes.tap) {
nativeView.addGestureRecognizer(this._createRecognizer(GestureTypes.tap)); nativeView.addGestureRecognizer(this._createRecognizer(GestureTypes.tap, args => {
this._executeCallback(_getTapData(args));
}));
} }
if (type & GestureTypes.doubleTap) { if (type & GestureTypes.doubleTap) {
nativeView.addGestureRecognizer(this._createRecognizer(GestureTypes.doubleTap, args => { nativeView.addGestureRecognizer(this._createRecognizer(GestureTypes.doubleTap, args => {
this._executeCallback(_getDoubleTapData(args)); this._executeCallback(_getTapData(args));
})); }));
} }
@@ -300,19 +306,20 @@ function _getSwipeDirection(direction: UISwipeGestureRecognizerDirection): Swipe
} }
} }
function _getDoubleTapData(args: GestureEventData): DoubleTapGestureEventData { function _getTapData(args: GestureEventData): TapGestureEventData {
const recognizer = <UITapGestureRecognizer>args.ios; const recognizer = <UITapGestureRecognizer>args.ios;
const location: CGPoint = recognizer.locationInView(args.view.nativeViewProtected); const center = recognizer.locationInView(args.view.nativeViewProtected);
return <DoubleTapGestureEventData>{ return <TapGestureEventData>{
type: args.type, type: args.type,
view: args.view, view: args.view,
ios: args.ios, ios: args.ios,
android: undefined, android: undefined,
getX: () => location.x, eventName: args.eventName,
getY: () => location.y, object: args.object,
object: args.view, getPointerCount: () => recognizer.numberOfTouches,
eventName: toString(args.type) getX: () => layout.toDeviceIndependentPixels(center.x),
getY: () => layout.toDeviceIndependentPixels(center.y)
}; };
} }

View File

@@ -10,7 +10,7 @@ export { View, Template, KeyedTemplate, ShownModallyData } from "./core/view";
export { DatePicker } from "./date-picker"; export { DatePicker } from "./date-picker";
export { EditableTextBase } from "./editable-text-base"; export { EditableTextBase } from "./editable-text-base";
export { Frame, NavigationEntry, NavigationContext, NavigationTransition, BackstackEntry, ViewEntry } from "./frame"; export { Frame, NavigationEntry, NavigationContext, NavigationTransition, BackstackEntry, ViewEntry } from "./frame";
export { GestureEventData, GestureEventDataWithState, GestureStateTypes, GestureTypes, GesturesObserver, PanGestureEventData, PinchGestureEventData, RotationGestureEventData, SwipeDirection, SwipeGestureEventData, TouchGestureEventData } from "./gestures"; export { GestureEventData, GestureEventDataWithState, GestureStateTypes, GestureTypes, GesturesObserver, TapGestureEventData, PanGestureEventData, PinchGestureEventData, RotationGestureEventData, SwipeDirection, SwipeGestureEventData, TouchGestureEventData } from "./gestures";
export { HtmlView } from "./html-view"; export { HtmlView } from "./html-view";
export { Image } from "./image"; export { Image } from "./image";
export { Cache as ImageCache, DownloadError, DownloadRequest, DownloadedData } from "./image-cache"; export { Cache as ImageCache, DownloadError, DownloadRequest, DownloadedData } from "./image-cache";

View File

@@ -22,12 +22,13 @@ export {
GestureStateTypes, GestureStateTypes,
GestureTypes, GestureTypes,
GesturesObserver, GesturesObserver,
TapGestureEventData,
PanGestureEventData, PanGestureEventData,
PinchGestureEventData, PinchGestureEventData,
RotationGestureEventData, RotationGestureEventData,
SwipeDirection, SwipeDirection,
SwipeGestureEventData, SwipeGestureEventData,
TouchGestureEventData TouchGestureEventData,
} from "./gestures"; } from "./gestures";
export { HtmlView } from "./html-view"; export { HtmlView } from "./html-view";