Derp

build/trenette.js

@@ -1811,94 +1811,102 @@
 		context.stroke();
 	};
 
-	/**
-	 * Box object draw a box.
-	 */
-	function Box(resizable)
-	{
-		Object2D.call(this);
-
-		/**
-		 * Box object containing the size of the object.
-		 */
-		this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
-
-		/**
-		 * Color of the box border line.
-		 */
-		this.strokeStyle = "#000000";
-
-		/**
-		 * Background color of the box.
-		 */
-		this.fillStyle = "#FFFFFF";
-
-		if(resizable)
-		{
-			this.createResizeHelpers();
-		}
-	}
-
-	Box.prototype = Object.create(Object2D.prototype);
+	function Helpers(){}
 
 	/**
-	 * Create some resize helper to change the size of the box.
+	 * Create a box resize helper and attach it to an object to change the size of the object box.
 	 *
-	 * Each helper is positioned on one corner of the box.
+	 * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
+	 *
+	 * This method required to object to have a box property.
 	 */
-	Box.prototype.createResizeHelpers = function()
+	Helpers.createBoxResize = function(object)
 	{
-		var self = this;
+		if(object.box === undefined)
+		{
+			console.warn("trenette.js: Helpers.createBoxResize(), object box property missing.");
+			return;
+		}
 
 		function updateHelpers()
 		{
-			topRight.position.copy(self.box.min);
-			bottomLeft.position.copy(self.box.max);
-			topLeft.position.set(self.box.max.x, self.box.min.y);
-			bottomRight.position.set(self.box.min.x, self.box.max.y);
+			topRight.position.copy(object.box.min);
+			bottomLeft.position.copy(object.box.max);
+			topLeft.position.set(object.box.max.x, object.box.min.y);
+			bottomRight.position.set(object.box.min.x, object.box.max.y);
 		}
 
 		var topRight = new Circle();
 		topRight.radius = 4;
 		topRight.onPointerDrag = function(pointer, viewport, delta)
 		{
-			self.box.min.copy(topRight.position);
+			object.box.min.copy(topRight.position);
 			updateHelpers();
 		};
-		this.add(topRight);
+		object.add(topRight);
 
 		var topLeft = new Circle();
 		topLeft.radius = 4;
 		topLeft.onPointerDrag = function(pointer, viewport, delta)
 		{
-			self.box.max.x = topLeft.position.x;
-			self.box.min.y = topLeft.position.y;
+			object.box.max.x = topLeft.position.x;
+			object.box.min.y = topLeft.position.y;
 			updateHelpers();
 		};
-		this.add(topLeft);
+		object.add(topLeft);
 
 		var bottomLeft = new Circle();
 		bottomLeft.radius = 4;
 		bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 		{
-			self.box.max.copy(bottomLeft.position);
+			object.box.max.copy(bottomLeft.position);
 			updateHelpers();
 		};
-		this.add(bottomLeft);
+		object.add(bottomLeft);
 
 		var bottomRight = new Circle();
 		bottomRight.radius = 4;
 		bottomRight.onPointerDrag = function(pointer, viewport, delta)
 		{
-			self.box.min.x = bottomRight.position.x;
-			self.box.max.y = bottomRight.position.y;
+			object.box.min.x = bottomRight.position.x;
+			object.box.max.y = bottomRight.position.y;
 			updateHelpers();
 		};
-		this.add(bottomRight);
+		object.add(bottomRight);
 
 		updateHelpers();
 	};
 
+	/**
+	 * Box object draw a box.
+	 */
+	function Box(resizable)
+	{
+		Object2D.call(this);
+
+		/**
+		 * Box object containing the size of the object.
+		 */
+		this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+		/**
+		 * Color of the box border line.
+		 */
+		this.strokeStyle = "#000000";
+
+		/**
+		 * Background color of the box.
+		 */
+		this.fillStyle = "#FFFFFF";
+
+		if(resizable)
+		{
+			Helpers.createBoxResize(this);
+		}
+	}
+
+	Box.prototype = Object.create(Object2D.prototype);
+
 	Box.prototype.onPointerEnter = function(pointer, viewport)
 	{
 		this.fillStyle = "#CCCCCC";
@@ -1999,16 +2007,50 @@
 		context.fillText(this.text, 0, 0);
 	};
 
+	/**
+	 * Image object is used to draw an image from URL.
+	 */
 	function Image(src)
 	{
 		Object2D.call(this);
+		
+		/**
+		 * Box object containing the size of the object.
+		 */
+		this.box = new Box2(new Vector2(0, 0), new Vector2(0, 0));
 
+		/**
+		 * Image source DOM element.
+		 */
 		this.image = document.createElement("img");
-		this.image.src = src;
+
+		this.setImage(src);
 	}
 
 	Image.prototype = Object.create(Object2D.prototype);
 
+	/**
+	 * Set the image of the object.
+	 *
+	 * Automatically sets the box size to match the image.
+	 */
+	Image.prototype.setImage = function(src)
+	{
+		var self = this;
+
+		this.image.onload = function()
+		{
+			self.box.min.set(0, 0);
+			self.box.max.set(this.naturalWidth, this.naturalHeight);
+		};
+		this.image.src = src;
+	};
+
+	Image.prototype.isInside = function(point)
+	{
+		return this.box.containsPoint(point);
+	};
+
 	Image.prototype.draw = function(context)
 	{
 		context.drawImage(this.image, 0, 0);
@@ -2032,14 +2074,14 @@
 		 * DOM element contained by this object.
 		 */
 		this.element = document.createElement("div");
+		this.element.style.transformStyle = "preserve-3d";
 		this.element.style.position = "absolute";
 		this.element.style.top = "0px";
 		this.element.style.bottom = "0px";
 		this.element.style.width = "100px";
-		this.element.style.transformStyle = "preserve-3d";
 		this.element.style.height = "100px";
-		this.element.style.backgroundColor = "#FF0000";
-		this.element.style.transformOrigin = "0px 0px"; //Maybe transform origin as well
+		this.element.style.backgroundColor = "rgba(0.0, 0.0, 0.0, 0.8)";
+		this.element.style.transformOrigin = "0px 0px";
 		parent.appendChild(this.element);
 	}
 

build/trenette.module.js

@@ -1805,94 +1805,102 @@ Circle.prototype.draw = function(context)
 	context.stroke();
 };
 
-/**
- * Box object draw a box.
- */
-function Box(resizable)
-{
-	Object2D.call(this);
-
-	/**
-	 * Box object containing the size of the object.
-	 */
-	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
-
-	/**
-	 * Color of the box border line.
-	 */
-	this.strokeStyle = "#000000";
-
-	/**
-	 * Background color of the box.
-	 */
-	this.fillStyle = "#FFFFFF";
-
-	if(resizable)
-	{
-		this.createResizeHelpers();
-	}
-}
-
-Box.prototype = Object.create(Object2D.prototype);
+function Helpers(){}
 
 /**
- * Create some resize helper to change the size of the box.
+ * Create a box resize helper and attach it to an object to change the size of the object box.
  *
- * Each helper is positioned on one corner of the box.
+ * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
+ *
+ * This method required to object to have a box property.
  */
-Box.prototype.createResizeHelpers = function()
+Helpers.createBoxResize = function(object)
 {
-	var self = this;
+	if(object.box === undefined)
+	{
+		console.warn("trenette.js: Helpers.createBoxResize(), object box property missing.");
+		return;
+	}
 
 	function updateHelpers()
 	{
-		topRight.position.copy(self.box.min);
-		bottomLeft.position.copy(self.box.max);
-		topLeft.position.set(self.box.max.x, self.box.min.y);
-		bottomRight.position.set(self.box.min.x, self.box.max.y);
+		topRight.position.copy(object.box.min);
+		bottomLeft.position.copy(object.box.max);
+		topLeft.position.set(object.box.max.x, object.box.min.y);
+		bottomRight.position.set(object.box.min.x, object.box.max.y);
 	}
 
 	var topRight = new Circle();
 	topRight.radius = 4;
 	topRight.onPointerDrag = function(pointer, viewport, delta)
 	{
-		self.box.min.copy(topRight.position);
+		object.box.min.copy(topRight.position);
 		updateHelpers();
 	};
-	this.add(topRight);
+	object.add(topRight);
 
 	var topLeft = new Circle();
 	topLeft.radius = 4;
 	topLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
-		self.box.max.x = topLeft.position.x;
-		self.box.min.y = topLeft.position.y;
+		object.box.max.x = topLeft.position.x;
+		object.box.min.y = topLeft.position.y;
 		updateHelpers();
 	};
-	this.add(topLeft);
+	object.add(topLeft);
 
 	var bottomLeft = new Circle();
 	bottomLeft.radius = 4;
 	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
-		self.box.max.copy(bottomLeft.position);
+		object.box.max.copy(bottomLeft.position);
 		updateHelpers();
 	};
-	this.add(bottomLeft);
+	object.add(bottomLeft);
 
 	var bottomRight = new Circle();
 	bottomRight.radius = 4;
 	bottomRight.onPointerDrag = function(pointer, viewport, delta)
 	{
-		self.box.min.x = bottomRight.position.x;
-		self.box.max.y = bottomRight.position.y;
+		object.box.min.x = bottomRight.position.x;
+		object.box.max.y = bottomRight.position.y;
 		updateHelpers();
 	};
-	this.add(bottomRight);
+	object.add(bottomRight);
 
 	updateHelpers();
 };
 
+/**
+ * Box object draw a box.
+ */
+function Box(resizable)
+{
+	Object2D.call(this);
+
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * Color of the box border line.
+	 */
+	this.strokeStyle = "#000000";
+
+	/**
+	 * Background color of the box.
+	 */
+	this.fillStyle = "#FFFFFF";
+
+	if(resizable)
+	{
+		Helpers.createBoxResize(this);
+	}
+}
+
+Box.prototype = Object.create(Object2D.prototype);
+
 Box.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";
@@ -1993,16 +2001,50 @@ Text.prototype.draw = function(context)
 	context.fillText(this.text, 0, 0);
 };
 
+/**
+ * Image object is used to draw an image from URL.
+ */
 function Image(src)
 {
 	Object2D.call(this);
+	
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(0, 0), new Vector2(0, 0));
 
+	/**
+	 * Image source DOM element.
+	 */
 	this.image = document.createElement("img");
-	this.image.src = src;
+
+	this.setImage(src);
 }
 
 Image.prototype = Object.create(Object2D.prototype);
 
+/**
+ * Set the image of the object.
+ *
+ * Automatically sets the box size to match the image.
+ */
+Image.prototype.setImage = function(src)
+{
+	var self = this;
+
+	this.image.onload = function()
+	{
+		self.box.min.set(0, 0);
+		self.box.max.set(this.naturalWidth, this.naturalHeight);
+	};
+	this.image.src = src;
+};
+
+Image.prototype.isInside = function(point)
+{
+	return this.box.containsPoint(point);
+};
+
 Image.prototype.draw = function(context)
 {
 	context.drawImage(this.image, 0, 0);
@@ -2026,14 +2068,14 @@ function DOM(parent, type)
 	 * DOM element contained by this object.
 	 */
 	this.element = document.createElement("div");
+	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.position = "absolute";
 	this.element.style.top = "0px";
 	this.element.style.bottom = "0px";
 	this.element.style.width = "100px";
-	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.height = "100px";
-	this.element.style.backgroundColor = "#FF0000";
-	this.element.style.transformOrigin = "0px 0px"; //Maybe transform origin as well
+	this.element.style.backgroundColor = "rgba(0.0, 0.0, 0.0, 0.8)";
+	this.element.style.transformOrigin = "0px 0px";
 	parent.appendChild(this.element);
 }
 

examples/diagram.html

@@ -53,20 +53,8 @@
 
 		};
 
-		var div = document.createElement("div");
-		div.style.position = "absolute";
-		div.style.top = "0px";
-		div.style.bottom = "0px";
-		div.style.width = "100px";
-		div.style.transformStyle = "preserve-3d";
-		div.style.height = "100px";
-		div.style.backgroundColor = "#FF0000";
-		div.style.transformOrigin = "0px 0px";
-		division.appendChild(div);
-
 		// Create the diagram
 		var group = new Trenette.Object2D();
-
 		var image = new Trenette.Image("grid.png");
 		image.position.set(-300, -400);
 		image.scale.set(1, 1);
@@ -82,6 +70,9 @@
 		var boxA = new Trenette.Box(true);
 		group.add(boxA);
 
+		var div = new Trenette.DOM(division);
+		boxA.add(div);
+
 		var text = new Trenette.Text();
 		text.text = "diagram.js";
 		boxA.add(text);
@@ -126,11 +117,6 @@
 			image.rotation += 0.01;
 
 			renderer.update(group, viewport);
-
-			var projection = viewport.matrix.clone();
-			projection.multiply(boxA.globalMatrix);
-			div.style.transform = projection.cssTransform();
-			//
 			
 			requestAnimationFrame(loop);
 		}

rollup.config.js

@@ -5,7 +5,7 @@ export default {
 	plugins: [
 		strip(
 		{
-			functions: ["console.*", "assert.*", "debug", "alert"],
+			functions: ["assert.*", "debug", "alert"],
 			debugger: false,
 			sourceMap: false
 		})

source/objects/Box.js

@@ -3,7 +3,9 @@
 import {Object2D} from "../Object2D.js";
 import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
+import {Helpers} from "../utils/Helpers.js";
 import {Circle} from "./Circle.js";
+
 /**
  * Box object draw a box.
  */
@@ -30,70 +32,12 @@ function Box(resizable)
 
 	if(resizable)
 	{
-		this.createResizeHelpers();
+		Helpers.createBoxResize(this);
 	}
 }
 
 Box.prototype = Object.create(Object2D.prototype);
 
-/**
- * Create some resize helper to change the size of the box.
- *
- * Each helper is positioned on one corner of the box.
- */
-Box.prototype.createResizeHelpers = function()
-{
-	var self = this;
-
-	function updateHelpers()
-	{
-		topRight.position.copy(self.box.min);
-		bottomLeft.position.copy(self.box.max);
-		topLeft.position.set(self.box.max.x, self.box.min.y);
-		bottomRight.position.set(self.box.min.x, self.box.max.y);
-	}
-
-	var topRight = new Circle();
-	topRight.radius = 4;
-	topRight.onPointerDrag = function(pointer, viewport, delta)
-	{
-		self.box.min.copy(topRight.position);
-		updateHelpers();
-	};
-	this.add(topRight);
-
-	var topLeft = new Circle();
-	topLeft.radius = 4;
-	topLeft.onPointerDrag = function(pointer, viewport, delta)
-	{
-		self.box.max.x = topLeft.position.x;
-		self.box.min.y = topLeft.position.y;
-		updateHelpers();
-	};
-	this.add(topLeft);
-
-	var bottomLeft = new Circle();
-	bottomLeft.radius = 4;
-	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
-	{
-		self.box.max.copy(bottomLeft.position);
-		updateHelpers();
-	};
-	this.add(bottomLeft);
-
-	var bottomRight = new Circle();
-	bottomRight.radius = 4;
-	bottomRight.onPointerDrag = function(pointer, viewport, delta)
-	{
-		self.box.min.x = bottomRight.position.x;
-		self.box.max.y = bottomRight.position.y;
-		updateHelpers();
-	};
-	this.add(bottomRight);
-
-	updateHelpers();
-};
-
 Box.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";

source/objects/DOM.js

@@ -21,14 +21,14 @@ function DOM(parent, type)
 	 * DOM element contained by this object.
 	 */
 	this.element = document.createElement("div");
+	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.position = "absolute";
 	this.element.style.top = "0px";
 	this.element.style.bottom = "0px";
 	this.element.style.width = "100px";
-	this.element.style.transformStyle = "preserve-3d";
 	this.element.style.height = "100px";
-	this.element.style.backgroundColor = "#FF0000";
-	this.element.style.transformOrigin = "0px 0px"; //Maybe transform origin as well
+	this.element.style.backgroundColor = "rgba(0.0, 0.0, 0.0, 0.8)";
+	this.element.style.transformOrigin = "0px 0px";
 	parent.appendChild(this.element);
 }
 

source/objects/Image.js

@@ -1,17 +1,53 @@
 "use strict";
 
 import {Object2D} from "../Object2D.js";
+import {Box2} from "../math/Box2.js";
+import {Vector2} from "../math/Vector2.js";
 
+/**
+ * Image object is used to draw an image from URL.
+ */
 function Image(src)
 {
 	Object2D.call(this);
+	
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(0, 0), new Vector2(0, 0));
 
+	/**
+	 * Image source DOM element.
+	 */
 	this.image = document.createElement("img");
-	this.image.src = src;
+
+	this.setImage(src);
 }
 
 Image.prototype = Object.create(Object2D.prototype);
 
+/**
+ * Set the image of the object.
+ *
+ * Automatically sets the box size to match the image.
+ */
+Image.prototype.setImage = function(src)
+{
+	var self = this;
+
+	this.image.onload = function()
+	{
+		self.box.min.set(0, 0);
+		self.box.max.set(this.naturalWidth, this.naturalHeight);
+	};
+	this.image.src = src;
+};
+
+Image.prototype.isInside = function(point)
+{
+	return this.box.containsPoint(point);
+};
+
 Image.prototype.draw = function(context)
 {
 	context.drawImage(this.image, 0, 0);

source/utils/Helpers.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import {Circle} from "../objects/Circle.js";
+
+function Helpers(){}
+
+/**
+ * Create a box resize helper and attach it to an object to change the size of the object box.
+ *
+ * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
+ *
+ * This method required to object to have a box property.
+ */
+Helpers.createBoxResize = function(object)
+{
+	if(object.box === undefined)
+	{
+		console.warn("trenette.js: Helpers.createBoxResize(), object box property missing.");
+		return;
+	}
+
+	function updateHelpers()
+	{
+		topRight.position.copy(object.box.min);
+		bottomLeft.position.copy(object.box.max);
+		topLeft.position.set(object.box.max.x, object.box.min.y);
+		bottomRight.position.set(object.box.min.x, object.box.max.y);
+	}
+
+	var topRight = new Circle();
+	topRight.radius = 4;
+	topRight.onPointerDrag = function(pointer, viewport, delta)
+	{
+		object.box.min.copy(topRight.position);
+		updateHelpers();
+	};
+	object.add(topRight);
+
+	var topLeft = new Circle();
+	topLeft.radius = 4;
+	topLeft.onPointerDrag = function(pointer, viewport, delta)
+	{
+		object.box.max.x = topLeft.position.x;
+		object.box.min.y = topLeft.position.y;
+		updateHelpers();
+	};
+	object.add(topLeft);
+
+	var bottomLeft = new Circle();
+	bottomLeft.radius = 4;
+	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
+	{
+		object.box.max.copy(bottomLeft.position);
+		updateHelpers();
+	};
+	object.add(bottomLeft);
+
+	var bottomRight = new Circle();
+	bottomRight.radius = 4;
+	bottomRight.onPointerDrag = function(pointer, viewport, delta)
+	{
+		object.box.min.x = bottomRight.position.x;
+		object.box.max.y = bottomRight.position.y;
+		updateHelpers();
+	};
+	object.add(bottomRight);
+
+	updateHelpers();
+};
+
+export {Helpers};