Version

build/trenette.js

@@ -840,6 +840,14 @@
 		object.parent = this;
 		object.level = this.level + 1;
 
+		object.traverse(function(child)
+		{
+			if(child.onAdd !== null)
+			{
+				child.onAdd(this);
+			}
+		});
+
 		this.children.push(object);
 	};
 
@@ -857,11 +865,14 @@
 			var object = this.children[index];
 			object.parent = null;
 			object.level = 0;
-			
-			if(object.onDestroy !== null)
+
+			object.traverse(function(child)
 			{
-				object.onDestroy();
-			}
+				if(child.onRemove !== null)
+				{
+					child.onRemove(this);
+				}
+			});
 
 			this.children.splice(index, 1);
 		}
@@ -910,8 +921,6 @@
 		this.globalMatrix.tranformContext(context);
 	};
 
-
-
 	/**
 	 * Draw the object into the canvas.
 	 *
@@ -923,10 +932,19 @@
 	 */
 	Object2D.prototype.draw = function(context, viewport, canvas){};
 
+	/**
+	 * Method called when the object its added to a parent.
+	 *
+	 * Receives (parent) as arguments.
+	 */
+	Object2D.prototype.onAdd = null;
+
 	/**
 	 * Method called when the object gets removed from its parent
+	 *
+	 * Receives (parent) as arguments.
 	 */
-	Object2D.prototype.onDestroy = null;
+	Object2D.prototype.onRemove = null;
 
 	/**
 	 * Callback method called every time before the object is draw into the canvas.
@@ -975,11 +993,15 @@
 
 	/**
 	 * Callback method called when the pointer button is pressed down (single time).
+	 *
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onButtonDown = null;
 
 	/**
 	 * Callback method called when the pointer button is released (single time).
+	 *
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onButtonUp = null;
 
@@ -1923,7 +1945,6 @@
 	 */
 	Box2.prototype.isEmpty = function()
 	{
-
 		return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 	};
 
@@ -1932,7 +1953,14 @@
 	 */
 	Box2.prototype.getCenter = function(target)
 	{
-		return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+		return target;
 	};
 
 	/**
@@ -1940,7 +1968,14 @@
 	 */
 	Box2.prototype.getSize = function(target)
 	{
-		return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+		return target;
 	};
 
 	/**
@@ -2011,7 +2046,14 @@
 
 	Box2.prototype.clampPoint = function(point, target)
 	{
-		return target.copy(point).clamp(this.min, this.max);
+		if(target === undefined)
+		{
+			target = new Vector2();
+		}
+
+		target.copy(point).clamp(this.min, this.max);
+
+		return target;
 	};
 
 	/**
@@ -2534,17 +2576,17 @@
 	 * Use the normal DOM events for interaction.
 	 *
 	 * @class
-	 * @param parent Parent DOM element that contains the drawing canvas.
+	 * @param parentDOM Parent DOM element that contains the drawing canvas.
 	 * @param type Type of the DOM element (e.g. "div", "p", ...)
 	 */
-	function DOM(parent, type)
+	function DOM(parentDOM, type)
 	{
 		Object2D.call(this);
 
 		/**
 		 * Parent element that contains this DOM div.
 		 */
-		this.parent = parent;
+		this.parentDOM = parentDOM;
 
 		/**
 		 * DOM element contained by this object.
@@ -2559,7 +2601,6 @@
 		this.element.style.transformOrigin = "0px 0px";
 		this.element.style.overflow = "auto";
 		this.element.style.pointerEvents = "none";
-		this.parent.appendChild(this.element);
 		
 		/**
 		 * Size of the DOM element (in world coordinates).
@@ -2569,9 +2610,14 @@
 
 	DOM.prototype = Object.create(Object2D.prototype);
 
-	DOM.prototype.onDestroy = function()
+	DOM.prototype.onAdd = function()
+	{
+		this.parentDOM.appendChild(this.element);
+	};
+
+	DOM.prototype.onRemove = function()
 	{
-		this.parent.removeChild(this.element);
+		this.parentDOM.removeChild(this.element);
 	};
 
 	DOM.prototype.transform = function(context, viewport, canvas)

build/trenette.module.js

@@ -834,6 +834,14 @@ Object2D.prototype.add = function(object)
 	object.parent = this;
 	object.level = this.level + 1;
 
+	object.traverse(function(child)
+	{
+		if(child.onAdd !== null)
+		{
+			child.onAdd(this);
+		}
+	});
+
 	this.children.push(object);
 };
 
@@ -851,11 +859,14 @@ Object2D.prototype.remove = function(object)
 		var object = this.children[index];
 		object.parent = null;
 		object.level = 0;
-		
-		if(object.onDestroy !== null)
+
+		object.traverse(function(child)
 		{
-			object.onDestroy();
-		}
+			if(child.onRemove !== null)
+			{
+				child.onRemove(this);
+			}
+		});
 
 		this.children.splice(index, 1);
 	}
@@ -904,8 +915,6 @@ Object2D.prototype.transform = function(context, viewport)
 	this.globalMatrix.tranformContext(context);
 };
 
-
-
 /**
  * Draw the object into the canvas.
  *
@@ -917,10 +926,19 @@ Object2D.prototype.transform = function(context, viewport)
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
+/**
+ * Method called when the object its added to a parent.
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onAdd = null;
+
 /**
  * Method called when the object gets removed from its parent
+ *
+ * Receives (parent) as arguments.
  */
-Object2D.prototype.onDestroy = null;
+Object2D.prototype.onRemove = null;
 
 /**
  * Callback method called every time before the object is draw into the canvas.
@@ -969,11 +987,15 @@ Object2D.prototype.onButtonPressed = null;
 
 /**
  * Callback method called when the pointer button is pressed down (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonDown = null;
 
 /**
  * Callback method called when the pointer button is released (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonUp = null;
 
@@ -1917,7 +1939,6 @@ Box2.prototype.copy = function(box)
  */
 Box2.prototype.isEmpty = function()
 {
-
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 };
 
@@ -1926,7 +1947,14 @@ Box2.prototype.isEmpty = function()
  */
 Box2.prototype.getCenter = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+	return target;
 };
 
 /**
@@ -1934,7 +1962,14 @@ Box2.prototype.getCenter = function(target)
  */
 Box2.prototype.getSize = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+	return target;
 };
 
 /**
@@ -2005,7 +2040,14 @@ Box2.prototype.intersectsBox = function(box)
 
 Box2.prototype.clampPoint = function(point, target)
 {
-	return target.copy(point).clamp(this.min, this.max);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	target.copy(point).clamp(this.min, this.max);
+
+	return target;
 };
 
 /**
@@ -2528,17 +2570,17 @@ Image.prototype.draw = function(context, viewport, canvas)
  * Use the normal DOM events for interaction.
  *
  * @class
- * @param parent Parent DOM element that contains the drawing canvas.
+ * @param parentDOM Parent DOM element that contains the drawing canvas.
  * @param type Type of the DOM element (e.g. "div", "p", ...)
  */
-function DOM(parent, type)
+function DOM(parentDOM, type)
 {
 	Object2D.call(this);
 
 	/**
 	 * Parent element that contains this DOM div.
 	 */
-	this.parent = parent;
+	this.parentDOM = parentDOM;
 
 	/**
 	 * DOM element contained by this object.
@@ -2553,7 +2595,6 @@ function DOM(parent, type)
 	this.element.style.transformOrigin = "0px 0px";
 	this.element.style.overflow = "auto";
 	this.element.style.pointerEvents = "none";
-	this.parent.appendChild(this.element);
 	
 	/**
 	 * Size of the DOM element (in world coordinates).
@@ -2563,9 +2604,14 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
-DOM.prototype.onDestroy = function()
+DOM.prototype.onAdd = function()
+{
+	this.parentDOM.appendChild(this.element);
+};
+
+DOM.prototype.onRemove = function()
 {
-	this.parent.removeChild(this.element);
+	this.parentDOM.removeChild(this.element);
 };
 
 DOM.prototype.transform = function(context, viewport, canvas)

examples/diagram.html

@@ -73,11 +73,16 @@
 		{
 			if(selected !== null && event.keyCode === 46)
 			{
-				group.remove(selected);
+				selected.parent.remove(selected);
 			}
 		};
 
 		var selected = null;
+		var selectObject = function(object)
+		{
+			this.strokeStyle = "#0000FF";
+			selected = this;
+		};
 
 		// Group to store other objects
 		var group = new Trenette.Object2D();
@@ -99,11 +104,6 @@
 		// Box
 		var boxA = new Trenette.Box();
 		boxA.draggable = true;
-		boxA.onButtonDown = function(object)
-		{
-			boxA.strokeStyle = "#0000FF";
-			selected = boxA;
-		};
 		group.add(boxA);
 		Trenette.Helpers.boxResizeTool(boxA);
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "trenette.js",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"description": "trenette.js is a web library for building interactive diagrams and graphs.",
 	"main": "build/trenette.min.js",
 	"repository": {

source/Object2D.js

@@ -165,10 +165,13 @@ Object2D.prototype.add = function(object)
 	object.parent = this;
 	object.level = this.level + 1;
 
-	if(object.õnAdd !== null)
+	object.traverse(function(child)
 	{
-		object.õnAdd(object, this);
-	}
+		if(child.onAdd !== null)
+		{
+			child.onAdd(this);
+		}
+	});
 
 	this.children.push(object);
 };
@@ -188,10 +191,13 @@ Object2D.prototype.remove = function(object)
 		object.parent = null;
 		object.level = 0;
 
-		if(object.onRemove !== null)
+		object.traverse(function(child)
 		{
-			object.onRemove(object, this);
-		}
+			if(child.onRemove !== null)
+			{
+				child.onRemove(this);
+			}
+		});
 
 		this.children.splice(index, 1)
 	}
@@ -254,14 +260,14 @@ Object2D.prototype.draw = function(context, viewport, canvas){};
 /**
  * Method called when the object its added to a parent.
  *
- * Receives (object, parent) as arguments.
+ * Receives (parent) as arguments.
  */
 Object2D.prototype.onAdd = null;
 
 /**
  * Method called when the object gets removed from its parent
  *
- * Receives (object, parent) as arguments.
+ * Receives (parent) as arguments.
  */
 Object2D.prototype.onRemove = null;
 
@@ -269,36 +275,34 @@ Object2D.prototype.onRemove = null;
  * Callback method called every time before the object is draw into the canvas.
  *
  * Can be used to run preparation code, move the object, etc.
- *
- * Receives (object) as argument.
  */
 Object2D.prototype.onUpdate = null;
 
 /**
  * Callback method called when the pointer enters the object.
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerEnter = null;
 
 /**
  * Callback method called when the was inside of the object and leaves the object.
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerLeave = null;
 
 /**
  * Callback method while the pointer is over (inside) of the object.
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerOver = null;
 
 /**
  * Callback method while the object is being dragged across the screen.
  *
- * Receives (object, pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
+ * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
  */
 Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 {
@@ -308,21 +312,21 @@ Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 /**
  * Callback method called while the pointer button is pressed.
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonPressed = null;
 
 /**
  * Callback method called when the pointer button is pressed down (single time).
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonDown = null;
 
 /**
  * Callback method called when the pointer button is released (single time).
  *
- * Receives (object, pointer, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonUp = null;
 

source/math/Box2.js

@@ -81,7 +81,6 @@ Box2.prototype.copy = function(box)
  */
 Box2.prototype.isEmpty = function()
 {
-
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 };
 
@@ -90,7 +89,14 @@ Box2.prototype.isEmpty = function()
  */
 Box2.prototype.getCenter = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+	return target;
 };
 
 /**
@@ -98,7 +104,14 @@ Box2.prototype.getCenter = function(target)
  */
 Box2.prototype.getSize = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+	return target;
 };
 
 /**
@@ -169,7 +182,14 @@ Box2.prototype.intersectsBox = function(box)
 
 Box2.prototype.clampPoint = function(point, target)
 {
-	return target.copy(point).clamp(this.min, this.max);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	target.copy(point).clamp(this.min, this.max);
+
+	return target;
 };
 
 /**