Clean up

examples/diagram.html

@@ -16,7 +16,8 @@
 	<script type="text/javascript" src="../source/objects/Image.js"></script>
 	<script type="text/javascript" src="../source/objects/Text.js"></script>
 	<script type="text/javascript" src="../source/objects/Box.js"></script>
-	<script type="text/javascript" src="../source/objects/ConnectionLine.js"></script>
+	<script type="text/javascript" src="../source/objects/Circle.js"></script>
+	<script type="text/javascript" src="../source/objects/Line.js"></script>
 
 	<script type="text/javascript" src="../source/math/Vector2.js"></script>
 	<script type="text/javascript" src="../source/math/Box2.js"></script>
@@ -45,6 +46,11 @@
 		var box = new Box();
 		group.add(box);
 
+
+		var circle = new Circle();
+		circle.position.set(300, 0);
+		group.add(circle);
+
 		var viewport = new Viewport();
 
 		var renderer = new Renderer(canvas);

source/Object2D.js

@@ -49,13 +49,6 @@ function Object2D()
 	 */
 	this.matrix = new Matrix();
 
-	/**
-	 * Flag indicating if the pointer is inside of the element.
-	 *
-	 * Used to control object event.
-	 */
-	this.pointerInside = false;
-
 	/**
 	 * Global transformation matrix multiplied by the parent matrix.
 	 *
@@ -74,6 +67,20 @@ function Object2D()
 	 * If true the matrix is updated before rendering the object.
 	 */
 	this.matrixNeedsUpdate = true;
+
+	/**
+	 * Flag to indicate if its possible to drag the object around.
+	 *
+	 * If true the onPointerDrag callback is used to update the state of the object.
+	 */
+	this.draggable = true;
+
+	/**
+	 * Flag indicating if the pointer is inside of the element.
+	 *
+	 * Used to control object event.
+	 */
+	this.pointerInside = false;
 }
 
 /**
@@ -158,30 +165,46 @@ Object2D.prototype.draw = function(context){};
 
 /**
  * Callback method called when the pointer enters the object.
+ *
+ * Receives (mouse, viewport) as arguments.
  */
 Object2D.prototype.onPointerEnter = null;
 
 /**
  * Callback method called when the was inside of the object and leaves the object.
+ *
+ * Receives (mouse, viewport) as arguments.
  */
 Object2D.prototype.onPointerLeave = null;
 
 /**
  * Callback method while the pointer is over (inside) of the object.
+ *
+ * Receives (mouse, viewport) as arguments.
  */
 Object2D.prototype.onPointerOver = null;
 
 /**
- * Callback method called while the pointer button is pressed.
+ * Callback method while the object is being dragged across the screen.
+ *
+ * Receives (mouse, viewport, delta) as arguments. Delta is the movement of the mouse already translated into local object coordinates.
+ */
+Object2D.prototype.onPointerDrag = null;
+
+/**
+ * Callback method called while the p
+ ointer button is pressed.
+ *
+ * Receives (mouse, viewport) as arguments.
  */
-Object2D.prototype.onPointerPressed = null;
+Object2D.prototype.onButtonPressed = null;
 
 /**
  * Callback method called when the pointer button is pressed down (single time).
  */
-Object2D.prototype.onPointerDown = null;
+Object2D.prototype.onButtonDown = null;
 
 /**
  * Callback method called when the pointer button is released (single time).
  */
-Object2D.prototype.onPointerUp = null;
+Object2D.prototype.onButtonUp = null;

source/Renderer.js

@@ -20,7 +20,7 @@ function Renderer(canvas)
 	this.context = canvas.getContext("2d");
 	this.context.imageSmoothingEnabled = true;
 	this.context.globalCompositeOperation = "source-over";
-	
+
 	/**
 	 * Mouse input handler object.
 	 */
@@ -30,6 +30,9 @@ function Renderer(canvas)
 
 /**
  * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
+ *
+ * @param object Object to be updated.
+ * @param viewport Viewport to be updated (should be the one where the objects will be rendered after).
  */
 Renderer.prototype.update = function(object, viewport)
 {
@@ -73,27 +76,27 @@ Renderer.prototype.update = function(object, viewport)
 			// Pointer pressed
 			if(mouse.buttonPressed(Mouse.LEFT))
 			{
-				if(child.onPointerPressed !== null)
+				if(child.onButtonPressed !== null)
 				{
-					child.onPointerPressed(mouse, viewport);
+					child.onButtonPressed(mouse, viewport);
 				}
 			}
 
 			// Just pressed
 			if(mouse.buttonJustPressed(Mouse.LEFT))
 			{	
-				if(child.onPointerDown !== null)
+				if(child.onButtonDown !== null)
 				{
-					child.onPointerDown(mouse, viewport);
+					child.onButtonDown(mouse, viewport);
 				}
 			}
 
 			// Just released
 			if(mouse.buttonJustReleased(Mouse.LEFT))
 			{	
-				if(child.onPointerUp !== null)
+				if(child.onButtonUp !== null)
 				{
-					child.onPointerUp(mouse, viewport);
+					child.onButtonUp(mouse, viewport);
 				}
 			}
 
@@ -114,6 +117,11 @@ Renderer.prototype.update = function(object, viewport)
 
 /**
  * Render the object using the viewport into a canvas element.
+ *
+ * The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.
+ *
+ * @param object Object to be rendered.
+ * @param viewport Viewport to render the objects.
  */
 Renderer.prototype.render = function(object, viewport)
 {
@@ -123,11 +131,17 @@ Renderer.prototype.render = function(object, viewport)
 	context.setTransform(1, 0, 0, 1, 0, 0);
 	context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
+	// Set viewport matrix transform
+	viewport.matrix.setContextTransform(context);
+
 	// Render into the canvas
 	object.traverse(function(child)
 	{
-		viewport.matrix.setContextTransform(context);		
+		context.save();
+
 		child.globalMatrix.tranformContext(context);
 		child.draw(context);
+		
+		context.restore();
 	});
 };

source/math/Box2.js

@@ -34,19 +34,15 @@ Object.assign(Box2.prototype,
 		return this;
 	},
 
-	setFromCenterAndSize: function()
+	setFromCenterAndSize: function(center, size)
 	{
 		var v1 = new Vector2();
+		var halfSize = v1.copy(size).multiplyScalar(0.5);
+		this.min.copy(center).sub(halfSize);
+		this.max.copy(center).add(halfSize);
 
-		return function setFromCenterAndSize(center, size)
-		{
-			var halfSize = v1.copy(size).multiplyScalar(0.5);
-			this.min.copy(center).sub(halfSize);
-			this.max.copy(center).add(halfSize);
-
-			return this;
-		};
-	}(),
+		return this;
+	},
 
 	clone: function()
 	{
@@ -136,16 +132,12 @@ Object.assign(Box2.prototype,
 		return target.copy(point).clamp(this.min, this.max);
 	},
 
-	distanceToPoint: function()
+	distanceToPoint: function(point)
 	{
-		var v1 = new Vector2();
-
-		return function distanceToPoint(point)
-		{
-			var clampedPoint = v1.copy(point).clamp(this.min, this.max);
-			return clampedPoint.sub(point).length();
-		};
-	}(),
+		var v = new Vector2();
+		var clampedPoint = v.copy(point).clamp(this.min, this.max);
+		return clampedPoint.sub(point).length();
+	},
 
 	intersect: function(box)
 	{

source/objects/Box.js

@@ -12,24 +12,24 @@ function Box()
 	/**
 	 * Color of the box border line.
 	 */
-	this.borderColor = "#000000";
+	this.strokeStyle = "#000000";
 
 	/**
 	 * Background color of the box.
 	 */
-	this.backgroundColor = "#FFFFFF";
-
+	this.fillStyle = "#FFFFFF";
+	
 	this.dragging = false;
 }
 
 Box.prototype = Object.create(Object2D.prototype);
 
-Box.prototype.onPointerDown = function(mouse, viewport)
+Box.prototype.onButtonDown = function(mouse, viewport)
 {
 	this.dragging = true;
 };
 
-Box.prototype.onPointerUp = function(mouse, viewport)
+Box.prototype.onButtonUp = function(mouse, viewport)
 {
 	this.dragging = false;
 };
@@ -48,15 +48,14 @@ Box.prototype.onPointerOver = function(mouse, viewport)
 	}
 };
 
-
 Box.prototype.onPointerEnter = function(mouse, viewport)
 {
-	this.backgroundColor = "#CCCCCC";
+	this.fillStyle = "#CCCCCC";
 };
 
 Box.prototype.onPointerLeave = function(mouse, viewport)
 {
-	this.backgroundColor = "#FFFFFF";
+	this.fillStyle = "#FFFFFF";
 };
 
 
@@ -70,11 +69,11 @@ Box.prototype.draw = function(context)
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
 
-	context.fillStyle = this.backgroundColor;
+	context.fillStyle = this.fillStyle;
 	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 
 	context.setLineDash([]);
-	context.lineWidth = 1;
-	context.strokeStyle = this.borderColor;
+	context.lineWidth = 3;
+	context.strokeStyle = this.strokeStyle;
 	context.strokeRect(this.box.min.x, this.box.min.y, width, height);
 };

source/objects/Circle.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function Circle()
+{
+	Object2D.call(this);
+
+	/**
+	 * Radius of the circle.
+	 */
+	this.radius = 10.0;
+
+	/**
+	 * Color of the box border line.
+	 */
+	this.strokeStyle = "#000000";
+}
+
+Circle.prototype = Object.create(Object2D.prototype);
+
+Circle.prototype.isInside = function(point)
+{
+	return point.length() <= this.radius;
+};
+
+Circle.prototype.onPointerEnter = function(mouse, viewport)
+{
+	this.strokeStyle = "#FF0000";
+};
+
+Circle.prototype.onPointerLeave = function(mouse, viewport)
+{
+	this.strokeStyle = "#000000";
+};
+
+Circle.prototype.draw = function(context)
+{
+	//context.setLineDash([]);
+	//context.lineWidth = 1;
+	context.strokeStyle = this.strokeStyle;
+
+	context.beginPath();
+	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+	context.stroke();
+};

source/objects/ConnectionLine.js → source/objects/Line.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function ConnectionLine()
+function Line()
 {
 	Object2D.call(this);
 
@@ -17,15 +17,15 @@ function ConnectionLine()
 	/**
 	 * Color of the line.
 	 */
-	this.color = "#000000";
+	this.strokeStyle = "#000000";
 }
 
-ConnectionLine.prototype = Object.create(Object2D.prototype);
+Line.prototype = Object.create(Object2D.prototype);
 
-ConnectionLine.prototype.draw = function(context)
+Line.prototype.draw = function(context)
 {
 	context.lineWidth = 2;
-	context.strokeStyle = this.color;
+	context.strokeStyle = this.strokeStyle;
 	context.setLineDash([10, 10]);
 	
 	context.beginPath();