Browse Source

Drag events

tentone 6 years ago
parent
commit
ed8997d771
5 changed files with 52 additions and 41 deletions
  1. 6 1
      source/Object2D.js
  2. 32 15
      source/Renderer.js
  3. 1 1
      source/input/Mouse.js
  4. 10 1
      source/math/Matrix.js
  5. 3 23
      source/objects/Box.js

+ 6 - 1
source/Object2D.js

@@ -69,7 +69,7 @@ function Object2D()
 	this.matrixNeedsUpdate = true;
 	this.matrixNeedsUpdate = true;
 
 
 	/**
 	/**
-	 * Flag to indicate if its possible to drag the object around.
+	 * Indicates if its possible to drag the object around.
 	 *
 	 *
 	 * If true the onPointerDrag callback is used to update the state of the object.
 	 * If true the onPointerDrag callback is used to update the state of the object.
 	 */
 	 */
@@ -81,6 +81,11 @@ function Object2D()
 	 * Used to control object event.
 	 * Used to control object event.
 	 */
 	 */
 	this.pointerInside = false;
 	this.pointerInside = false;
+
+	/**
+	 * Flag to indicate if the object is currently being dragged.
+	 */
+	this.beingDragged = false;
 }
 }
 
 
 /**
 /**

+ 32 - 15
source/Renderer.js

@@ -59,12 +59,9 @@ Renderer.prototype.update = function(object, viewport)
 		if(child.isInside(childPoint))
 		if(child.isInside(childPoint))
 		{
 		{
 			// Pointer enter
 			// Pointer enter
-			if(!child.pointerInside)
+			if(!child.pointerInside && child.onPointerEnter !== null)
 			{			
 			{			
-				if(child.onPointerEnter !== null)
-				{
-					child.onPointerEnter(mouse, viewport);
-				}
+				child.onPointerEnter(mouse, viewport);
 			}
 			}
 
 
 			// Pointer over
 			// Pointer over
@@ -80,24 +77,23 @@ Renderer.prototype.update = function(object, viewport)
 				{
 				{
 					child.onButtonPressed(mouse, viewport);
 					child.onButtonPressed(mouse, viewport);
 				}
 				}
+
+				if(child.draggable)
+				{
+					child.beingDragged = true;
+				}
 			}
 			}
 
 
 			// Just pressed
 			// Just pressed
-			if(mouse.buttonJustPressed(Mouse.LEFT))
+			if(mouse.buttonJustPressed(Mouse.LEFT) && child.onButtonDown !== null)
 			{	
 			{	
-				if(child.onButtonDown !== null)
-				{
-					child.onButtonDown(mouse, viewport);
-				}
+				child.onButtonDown(mouse, viewport);
 			}
 			}
 
 
 			// Just released
 			// Just released
-			if(mouse.buttonJustReleased(Mouse.LEFT))
+			if(mouse.buttonJustReleased(Mouse.LEFT) && child.onButtonUp !== null)
 			{	
 			{	
-				if(child.onButtonUp !== null)
-				{
-					child.onButtonUp(mouse, viewport);
-				}
+				child.onButtonUp(mouse, viewport);
 			}
 			}
 
 
 			child.pointerInside = true;
 			child.pointerInside = true;
@@ -112,6 +108,27 @@ Renderer.prototype.update = function(object, viewport)
 
 
 			child.pointerInside = false;
 			child.pointerInside = false;
 		}
 		}
+
+		// Stop object drag
+		if(mouse.buttonJustReleased(Mouse.LEFT))
+		{	
+			if(child.draggable)
+			{
+				child.beingDragged = false;
+			}
+		}
+
+		// Pointer drag event
+		if(child.beingDragged && child.onPointerDrag !== null)
+		{
+			var matrix = viewport.inverseMatrix.clone();
+			matrix.multiply(child.inverseGlobalMatrix);
+			matrix.setPosition(0, 0);
+
+			var delta = matrix.transformPoint(mouse.delta);
+
+			child.onPointerDrag(mouse, viewport, delta)
+		}
 	});
 	});
 };
 };
 
 

+ 1 - 1
source/input/Mouse.js

@@ -336,7 +336,7 @@ Mouse.buttonPressed = function(button)
 };
 };
 
 
 /**
 /**
- * Check if Mouse button was double clicked.
+ * Check if mouse button was double clicked.
  * 
  * 
  * @method buttonDoubleClicked
  * @method buttonDoubleClicked
  * @param {Number} button Button to check status of
  * @param {Number} button Button to check status of

+ 10 - 1
source/math/Matrix.js

@@ -130,6 +130,15 @@ Matrix.prototype.scale = function(sx, sy)
 	this.m[3] *= sy;
 	this.m[3] *= sy;
 };
 };
 
 
+/**
+ * Set the position of the transformation matrix.
+ */
+Matrix.prototype.setPosition = function(x, y)
+{
+	this.m[4] = x;
+	this.m[5] = y;
+};
+
 /**
 /**
  * Get the scale from the transformation matrix.
  * Get the scale from the transformation matrix.
  */
  */
@@ -143,7 +152,7 @@ Matrix.prototype.getScale = function()
  */
  */
 Matrix.prototype.getPosition = function()
 Matrix.prototype.getPosition = function()
 {
 {
-	return new Vector2(this.m[5], this.m[6]);
+	return new Vector2(this.m[4], this.m[5]);
 };
 };
 
 
 /**
 /**

+ 3 - 23
source/objects/Box.js

@@ -18,34 +18,14 @@ function Box()
 	 * Background color of the box.
 	 * Background color of the box.
 	 */
 	 */
 	this.fillStyle = "#FFFFFF";
 	this.fillStyle = "#FFFFFF";
-	
-	this.dragging = false;
 }
 }
 
 
 Box.prototype = Object.create(Object2D.prototype);
 Box.prototype = Object.create(Object2D.prototype);
 
 
-Box.prototype.onButtonDown = function(mouse, viewport)
+Box.prototype.onPointerDrag = function(mouse, viewport, delta)
 {
 {
-	this.dragging = true;
-};
-
-Box.prototype.onButtonUp = function(mouse, viewport)
-{
-	this.dragging = false;
-};
-
-Box.prototype.onPointerOver = function(mouse, viewport)
-{
-	if(this.dragging)
-	{
-		var matrix = viewport.inverseMatrix.clone();
-		matrix.multiply(this.inverseGlobalMatrix);
-
-		var scale = matrix.getScale();
-
-		this.position.x += mouse.delta.x * scale.x;
-		this.position.y += mouse.delta.y * scale.y;
-	}
+	this.position.x += delta.x;
+	this.position.y += delta.y;
 };
 };
 
 
 Box.prototype.onPointerEnter = function(mouse, viewport)
 Box.prototype.onPointerEnter = function(mouse, viewport)