Drag

examples/diagram.html

@@ -41,11 +41,21 @@
 		var background = new Image("pfd.png");
 		background.position.set(0, 0);
 		background.scale.set(1, 1);
+		background.layer = -2;
 		group.add(background);
 
-		var box = new Box();
-		group.add(box);
+		var boxA = new Box();
+		group.add(boxA);
 
+		var boxB = new Box();
+		boxB.position.set(100, 100);
+		group.add(boxB);
+
+		var line = new Line();
+		line.from = boxA.position;
+		line.to = boxB.position;
+		line.layer = -1;
+		group.add(line);
 
 		var circle = new Circle();
 		circle.position.set(300, 0);

source/Object2D.js

@@ -197,8 +197,7 @@ Object2D.prototype.onPointerOver = null;
 Object2D.prototype.onPointerDrag = null;
 
 /**
- * Callback method called while the p
- ointer button is pressed.
+ * Callback method called while the pointer button is pressed.
  *
  * Receives (mouse, viewport) as arguments.
  */

source/Renderer.js

@@ -70,12 +70,12 @@ Renderer.prototype.update = function(object, viewport)
 				child.onPointerOver(mouse, viewport);
 			}
 
-			// Pointer pressed
-			if(mouse.buttonPressed(Mouse.LEFT))
+			// Pointer just pressed
+			if(mouse.buttonJustPressed(Mouse.LEFT))
 			{
-				if(child.onButtonPressed !== null)
+				if(child.onButtonDown !== null)
 				{
-					child.onButtonPressed(mouse, viewport);
+					child.onButtonDown(mouse, viewport);
 				}
 
 				if(child.draggable)
@@ -84,10 +84,10 @@ Renderer.prototype.update = function(object, viewport)
 				}
 			}
 
-			// Just pressed
-			if(mouse.buttonJustPressed(Mouse.LEFT) && child.onButtonDown !== null)
+			// Pointer pressed
+			if(mouse.buttonPressed(Mouse.LEFT) && child.onButtonPressed !== null)
 			{	
-				child.onButtonDown(mouse, viewport);
+				child.onButtonPressed(mouse, viewport);
 			}
 
 			// Just released
@@ -119,15 +119,19 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		// Pointer drag event
-		if(child.beingDragged && child.onPointerDrag !== null)
+		if(child.beingDragged)
 		{
 			var matrix = viewport.inverseMatrix.clone();
 			matrix.multiply(child.inverseGlobalMatrix);
 			matrix.setPosition(0, 0);
 
 			var delta = matrix.transformPoint(mouse.delta);
+			child.position.add(delta);
 
-			child.onPointerDrag(mouse, viewport, delta)
+			if(child.onPointerDrag !== null)
+			{
+				child.onPointerDrag(mouse, viewport, delta)
+			}
 		}
 	});
 };
@@ -151,14 +155,25 @@ Renderer.prototype.render = function(object, viewport)
 	// Set viewport matrix transform
 	viewport.matrix.setContextTransform(context);
 
-	// Render into the canvas
+	// Get objects to be rendered
+	var objects = []
 	object.traverse(function(child)
 	{
-		context.save();
+		objects.push(child);
+	});
 
-		child.globalMatrix.tranformContext(context);
-		child.draw(context);
-		
-		context.restore();
+	// Sort objects by layer
+	objects.sort(function(a, b)
+	{
+		return a.layer - b.layer;
 	});
+
+	// Render into the canvas
+	for(var i = 0; i < objects.length; i++)
+	{
+		context.save();
+		objects[i].globalMatrix.tranformContext(context);
+		objects[i].draw(context);
+		context.restore();
+	}
 };

source/objects/Box.js

@@ -1,5 +1,8 @@
 "use strict";
 
+/**
+ * Box object draw a box.
+ */
 function Box()
 {
 	Object2D.call(this);
@@ -22,12 +25,6 @@ function Box()
 
 Box.prototype = Object.create(Object2D.prototype);
 
-Box.prototype.onPointerDrag = function(mouse, viewport, delta)
-{
-	this.position.x += delta.x;
-	this.position.y += delta.y;
-};
-
 Box.prototype.onPointerEnter = function(mouse, viewport)
 {
 	this.fillStyle = "#CCCCCC";
@@ -52,8 +49,7 @@ Box.prototype.draw = function(context)
 	context.fillStyle = this.fillStyle;
 	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 
-	context.setLineDash([]);
-	context.lineWidth = 3;
+	context.lineWidth = 1;
 	context.strokeStyle = this.strokeStyle;
 	context.strokeRect(this.box.min.x, this.box.min.y, width, height);
 };

source/objects/Circle.js

@@ -1,5 +1,8 @@
 "use strict";
 
+/**
+ * Circle object draw a circular object.
+ */
 function Circle()
 {
 	Object2D.call(this);
@@ -34,8 +37,7 @@ Circle.prototype.onPointerLeave = function(mouse, viewport)
 
 Circle.prototype.draw = function(context)
 {
-	//context.setLineDash([]);
-	//context.lineWidth = 1;
+	context.lineWidth = 1;
 	context.strokeStyle = this.strokeStyle;
 
 	context.beginPath();

source/objects/Line.js

@@ -1,16 +1,23 @@
 "use strict";
 
+/**
+ * Line object draw a line from one point to another.
+ */
 function Line()
 {
 	Object2D.call(this);
 
 	/**
 	 * Initial point of the line.
+	 *
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
 	 */
 	this.from = new Vector2();
 
 	/**
 	 * Final point of the line.
+	 *
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
 	 */
 	this.to = new Vector2();
 
@@ -24,9 +31,9 @@ Line.prototype = Object.create(Object2D.prototype);
 
 Line.prototype.draw = function(context)
 {
-	context.lineWidth = 2;
+	context.lineWidth = 1;
 	context.strokeStyle = this.strokeStyle;
-	context.setLineDash([10, 10]);
+	context.setLineDash([5, 5]);
 	
 	context.beginPath();
 	context.moveTo(this.from.x, this.from.y);