Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-16 22:18:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

InputHandler.dragDistanceThreshold gives you more fine control over when a Sprite Drag event will start. It allows you to specify a distance, in pixels, that the pointer must have moved before the drag will begin.

Browse source 
InputHandler.dragTimeThreshold gives you more fine control over when a Sprite Drag event will start. It allows you to specify a time, in ms that the pointer must have been held down for, before the drag will begin.

InputHandler.downPoint is a new Point object that contains the coordinates of the Pointer when it was first pressed down on the Sprite.
This commit is contained in:
Richard Davey 2016-06-07 01:28:06 +01:00
parent f3a211e42d
commit 66b846cbdb
3 changed files with 121 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -346,6 +346,9 @@ You can read all about the philosophy behind Lazer [here](http://phaser.io/news/
* TilemapLayers will now collide properly when they have a position that isn't set to 0x0. For example if you're stitching together several maps, one after the other, and manually adjust their `scrollX/Y` properties (thanks @Upperfoot #2522)
* There are a bunch of new Phaser consts available to help with setting the angle of a Game Object. They are `Phaser.ANGLE_UP`, `ANGLE_DOWN`, `ANGLE_LEFT`, `ANGLE_RIGHT`, `ANGLE_NORTH_EAST`, `ANGLE_NORTH_WEST`, `ANGLE_SOUTH_EAST` and `ANGLE_SOUTH_WEST`.
* Math.between will return a value between the given `min` and `max` values.
* InputHandler.dragDistanceThreshold gives you more fine control over when a Sprite Drag event will start. It allows you to specify a distance, in pixels, that the pointer must have moved before the drag will begin.
* InputHandler.dragTimeThreshold gives you more fine control over when a Sprite Drag event will start. It allows you to specify a time, in ms that the pointer must have been held down for, before the drag will begin.
* InputHandler.downPoint is a new Point object that contains the coordinates of the Pointer when it was first pressed down on the Sprite.
### Updates

137
src/input/InputHandler.js
View file

@ -186,6 +186,21 @@ Phaser.InputHandler = function (sprite) {
*/
this.dragStartPoint = new Phaser.Point();
/**
* @property {integer} dragDistanceThreshold - The distance, in pixels, the pointer has to move while being held down, before the Sprite thinks it is being dragged.
*/
this.dragDistanceThreshold = 0;
/**
* @property {integer} dragTimeThreshold - The amount of time, in ms, the pointer has to be held down over the Sprite before it thinks it is being dragged.
*/
this.dragTimeThreshold = 0;
/**
* @property {Phaser.Point} downPoint - A Point object containing the coordinates of the Pointer when it was first pressed down onto this Sprite.
*/
this.downPoint = new Phaser.Point();
/**
* @property {Phaser.Point} snapPoint - If the sprite is set to snap while dragging this holds the point of the most recent 'snap' event.
*/
@ -203,6 +218,24 @@ Phaser.InputHandler = function (sprite) {
*/
this._dragPhase = false;
/**
* @property {boolean} _pendingDrag - Internal cache var.
* @private
*/
this._pendingDrag = false;
/**
* @property {boolean} _dragTimePass - Internal cache var.
* @private
*/
this._dragTimePass = false;
/**
* @property {boolean} _dragDistancePass - Internal cache var.
* @private
*/
this._dragDistancePass = false;
/**
* @property {boolean} _wasEnabled - Internal cache var.
* @private
@ -826,11 +859,13 @@ Phaser.InputHandler.prototype = {
},
/**
* Update.
* Internal Update method. This is called automatically and handles the Pointer
* and drag update loops.
*
* @method Phaser.InputHandler#update
* @protected
* @param {Phaser.Pointer} pointer
* @return {boolean} True if the pointer is still active, otherwise false.
*/
update: function (pointer) {
@ -846,7 +881,21 @@ Phaser.InputHandler.prototype = {
return false;
}
if (this.draggable && this._draggedPointerID === pointer.id)
if (this._pendingDrag)
{
if (!this._dragDistancePass)
{
this._dragDistancePass = (Phaser.Math.distance(pointer.x, pointer.y, this.downPoint.x, this.downPoint.y) >= this.dragDistanceThreshold);
}
if (this._dragDistancePass && this._dragTimePass)
{
this.startDrag(pointer);
}
return true;
}
else if (this.draggable && this._draggedPointerID === pointer.id)
{
return this.updateDrag(pointer);
}
@ -969,12 +1018,15 @@ Phaser.InputHandler.prototype = {
data.isUp = false;
data.timeDown = this.game.time.time;
this.downPoint.set(pointer.x, pointer.y);
// It's possible the onInputDown event creates a new Sprite that is on-top of this one, so we ought to force a Pointer update
pointer.dirty = true;
if (this.sprite && this.sprite.events)
{
this.sprite.events.onInputDown$dispatch(this.sprite, pointer);
// The onInputDown event might have destroyed this sprite.
if (this.sprite === null)
{
@ -982,11 +1034,29 @@ Phaser.InputHandler.prototype = {
}
}
// Start drag
if (this.draggable && this.isDragged === false)
{
this.startDrag(pointer);
if (this.dragTimeThreshold === 0 && this.dragDistanceThreshold === 0)
{
this.startDrag(pointer);
}
else
{
this._pendingDrag = true;
this._dragDistancePass = (this.dragDistanceThreshold === 0);
if (this.dragTimeThreshold > 0)
{
this._dragTimePass = false;
this.game.time.events.add(this.dragTimeThreshold, this.dragTimeElapsed, this, pointer);
}
else
{
this._dragTimePass = true;
}
}
}
if (this.bringToTop)
@ -997,6 +1067,27 @@ Phaser.InputHandler.prototype = {
},
/**
* Internal method handling the drag threshold timer.
*
* @method Phaser.InputHandler#dragTimeElapsed
* @private
* @param {Phaser.Pointer} pointer
*/
dragTimeElapsed: function (pointer) {
this._dragTimePass = true;
if (this._pendingDrag && this.sprite)
{
if (this._dragDistancePass)
{
this.startDrag(pointer);
}
}
},
/**
* Internal method handling the pointer released event.
* @method Phaser.InputHandler#_releasedHandler
@ -1046,6 +1137,8 @@ Phaser.InputHandler.prototype = {
// It's possible the onInputUp event created a new Sprite that is on-top of this one, so force a Pointer update
pointer.dirty = true;
this._pendingDrag = false;
// Stop drag
if (this.draggable && this.isDragged && this._draggedPointerID === pointer.id)
{
@ -1260,6 +1353,16 @@ Phaser.InputHandler.prototype = {
*
* When the drag completes by way of the user letting go of the pointer that was dragging the sprite, the Sprite.events.onDragStop event is dispatched.
*
* You can control the thresholds over when a drag starts via the properties:
*
* `Pointer.dragDistanceThreshold` the distance, in pixels, that the pointer has to move
* before the drag will start.
*
* `Pointer.dragTimeThreshold` the time, in ms, that the pointer must be held down on
* the Sprite before the drag will start.
*
* You can set either (or both) of these properties after enabling a Sprite for drag.
*
* For the duration of the drag the Sprite.events.onDragUpdate event is dispatched. This event is only dispatched when the pointer actually
* changes position and moves. The event sends 5 parameters: `sprite`, `pointer`, `dragX`, `dragY` and `snapPoint`.
*
@ -1320,6 +1423,7 @@ Phaser.InputHandler.prototype = {
this.draggable = false;
this.isDragged = false;
this._draggedPointerID = -1;
this._pendingDrag = false;
},
@ -1342,6 +1446,9 @@ Phaser.InputHandler.prototype = {
this._pointerData[pointer.id].isDragged = true;
var px = pointer.x;
var py = pointer.y;
if (this.sprite.fixedToCamera)
{
if (this.dragFromCenter)
@ -1376,8 +1483,11 @@ Phaser.InputHandler.prototype = {
}
this.dragStartPoint.set(x, y);
this.sprite.events.onDragStart$dispatch(this.sprite, pointer, x, y);
this._pendingDrag = false;
},
/**
@ -1428,6 +1538,7 @@ Phaser.InputHandler.prototype = {
this._draggedPointerID = -1;
this._pointerData[pointer.id].isDragged = false;
this._dragPhase = false;
this._pendingDrag = false;
if (this.snapOnRelease)
{
@ -1606,24 +1717,6 @@ Phaser.InputHandler.prototype = {
{
this.sprite.y = this.boundsSprite.bottom - (this.sprite.height - this.sprite.offsetY);
}
// if (this.sprite.x < this.boundsSprite.x)
// {
// this.sprite.x = this.boundsSprite.x;
// }
// else if ((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width))
// {
// this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
// }
// if (this.sprite.y < this.boundsSprite.y)
// {
// this.sprite.y = this.boundsSprite.y;
// }
// else if ((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height))
// {
// this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
// }
}
}

3
typescript/phaser.d.ts vendored
View file

@ -1949,10 +1949,13 @@ declare module "phaser" {
boundsRect: Phaser.Rectangle;
boundsSprite: Phaser.Sprite;
bringToTop: boolean;
downPoint: Phaser.Point;
dragDistanceThreshold: number;
dragOffset: Phaser.Point;
dragFromCenter: boolean;
draggable: boolean;
dragStartPoint: Phaser.Point;
dragTimeThreshold: number;
enabled: boolean;
game: Phaser.Game;
globalToLocalX(x: number): number;