Mouse events occlusion

build/diagram.js

@@ -1326,14 +1326,36 @@
 	/**
 	 * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
 	 *
+	 * 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.
+	 *
+	 * Should be called at a fixed rate preferably using the requestAnimationFrame() method.
+	 *
 	 * @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)
 	{
-		this.pointer.update();
+		// Get objects to be rendered
+		var objects = [];
+		object.traverse(function(child)
+		{
+			if(child.visible)
+			{
+				objects.push(child);
+			}
+		});
 
+		// Sort objects by layer
+		objects.sort(function(a, b)
+		{
+			return b.layer - a.layer;
+		});
+
+		// Pointer object update
 		var pointer = this.pointer;
+		pointer.update();
 
 		// Viewport transform matrix
 		viewport.updateControls(pointer);
@@ -1344,8 +1366,9 @@
 		var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 		// Object transformation matrices
-		object.traverse(function(child)
-		{		
+		for(var i = 0; i < objects.length; i++)
+		{
+			var child = objects[i];
 			var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
 			// Check if the pointer pointer is inside
@@ -1374,6 +1397,7 @@
 					if(child.draggable)
 					{
 						child.beingDragged = true;
+						break;
 					}
 				}
 
@@ -1410,8 +1434,13 @@
 					child.beingDragged = false;
 				}
 			}
+		}
+
+		// Pointer drag event
+		for(var i = 0; i < objects.length; i++)
+		{
+			var child = objects[i];
 
-			// Pointer drag event
 			if(child.beingDragged)
 			{
 				var matrix = viewport.inverseMatrix.clone();
@@ -1434,19 +1463,15 @@
 			}
 
 			child.updateMatrix();
+		}
+
+		// Sort objects by layer
+		objects.sort(function(a, b)
+		{
+			return a.layer - b.layer;
 		});
-	};
 
-	/**
-	 * 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)
-	{
+		// Render the content
 		var context = this.context;
 
 		// Clear canvas
@@ -1456,22 +1481,6 @@
 		// Set viewport matrix transform
 		viewport.matrix.setContextTransform(context);
 
-		// Get objects to be rendered
-		var objects = [];
-		object.traverse(function(child)
-		{
-			if(child.visible)
-			{
-				objects.push(child);
-			}
-		});
-
-		// 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++)
 		{

build/diagram.module.js

@@ -1320,14 +1320,36 @@ function Renderer(canvas)
 /**
  * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
  *
+ * 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.
+ *
+ * Should be called at a fixed rate preferably using the requestAnimationFrame() method.
+ *
  * @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)
 {
-	this.pointer.update();
+	// Get objects to be rendered
+	var objects = [];
+	object.traverse(function(child)
+	{
+		if(child.visible)
+		{
+			objects.push(child);
+		}
+	});
 
+	// Sort objects by layer
+	objects.sort(function(a, b)
+	{
+		return b.layer - a.layer;
+	});
+
+	// Pointer object update
 	var pointer = this.pointer;
+	pointer.update();
 
 	// Viewport transform matrix
 	viewport.updateControls(pointer);
@@ -1338,8 +1360,9 @@ Renderer.prototype.update = function(object, viewport)
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 	// Object transformation matrices
-	object.traverse(function(child)
-	{		
+	for(var i = 0; i < objects.length; i++)
+	{
+		var child = objects[i];
 		var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
 		// Check if the pointer pointer is inside
@@ -1368,6 +1391,7 @@ Renderer.prototype.update = function(object, viewport)
 				if(child.draggable)
 				{
 					child.beingDragged = true;
+					break;
 				}
 			}
 
@@ -1404,8 +1428,13 @@ Renderer.prototype.update = function(object, viewport)
 				child.beingDragged = false;
 			}
 		}
+	}
+
+	// Pointer drag event
+	for(var i = 0; i < objects.length; i++)
+	{
+		var child = objects[i];
 
-		// Pointer drag event
 		if(child.beingDragged)
 		{
 			var matrix = viewport.inverseMatrix.clone();
@@ -1428,19 +1457,15 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		child.updateMatrix();
+	}
+
+	// Sort objects by layer
+	objects.sort(function(a, b)
+	{
+		return a.layer - b.layer;
 	});
-};
 
-/**
- * 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)
-{
+	// Render the content
 	var context = this.context;
 
 	// Clear canvas
@@ -1450,22 +1475,6 @@ Renderer.prototype.render = function(object, viewport)
 	// Set viewport matrix transform
 	viewport.matrix.setContextTransform(context);
 
-	// Get objects to be rendered
-	var objects = [];
-	object.traverse(function(child)
-	{
-		if(child.visible)
-		{
-			objects.push(child);
-		}
-	});
-
-	// 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++)
 	{

examples/diagram.html

@@ -9,6 +9,15 @@
 
 	<script type="text/javascript">
 
+		var division = document.createElement("div");
+		division.style.position = "absolute";
+		division.style.width = "100%";
+		division.style.height = "100%";
+		division.style.top = "0px";
+		division.style.left = "0px";
+		division.style.overflow = "hidden";
+		document.body.appendChild(division);
+
 		// Setup the display canvas
 		var canvas = document.createElement("canvas");
 		canvas.style.position = "absolute";
@@ -18,13 +27,12 @@
 		canvas.style.left = "0px";
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;
-
 		canvas.oncontextmenu = function(event)
 		{
 			event.preventDefault();
 			return false;
 		};
-		document.body.appendChild(canvas);
+		division.appendChild(canvas);
 
 		window.onresize = function()
 		{
@@ -50,7 +58,7 @@
 		div.style.width = "100px";
 		div.style.height = "100px";
 		div.style.backgroundColor = "#FF0000";
-		document.body.appendChild(div);
+		division.appendChild(div);
 
 		// Create the diagram
 		var group = new Diagram.Object2D();
@@ -112,7 +120,6 @@
 			image.rotation += 0.01;
 
 			renderer.update(group, viewport);
-			renderer.render(group, viewport);
 
 			var projection = viewport.matrix.clone();
 			projection.multiply(boxA.globalMatrix);

source/Renderer.js

@@ -33,14 +33,36 @@ function Renderer(canvas)
 /**
  * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
  *
+ * 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.
+ *
+ * Should be called at a fixed rate preferably using the requestAnimationFrame() method.
+ *
  * @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)
 {
-	this.pointer.update();
+	// Get objects to be rendered
+	var objects = []
+	object.traverse(function(child)
+	{
+		if(child.visible)
+		{
+			objects.push(child);
+		}
+	});
 
+	// Sort objects by layer
+	objects.sort(function(a, b)
+	{
+		return b.layer - a.layer;
+	});
+
+	// Pointer object update
 	var pointer = this.pointer;
+	pointer.update();
 
 	// Viewport transform matrix
 	viewport.updateControls(pointer);
@@ -51,8 +73,9 @@ Renderer.prototype.update = function(object, viewport)
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 	// Object transformation matrices
-	object.traverse(function(child)
-	{		
+	for(var i = 0; i < objects.length; i++)
+	{
+		var child = objects[i];
 		var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
 		// Check if the pointer pointer is inside
@@ -81,6 +104,7 @@ Renderer.prototype.update = function(object, viewport)
 				if(child.draggable)
 				{
 					child.beingDragged = true;
+					break;
 				}
 			}
 
@@ -117,8 +141,13 @@ Renderer.prototype.update = function(object, viewport)
 				child.beingDragged = false;
 			}
 		}
+	}
+
+	// Pointer drag event
+	for(var i = 0; i < objects.length; i++)
+	{
+		var child = objects[i];
 
-		// Pointer drag event
 		if(child.beingDragged)
 		{
 			var matrix = viewport.inverseMatrix.clone();
@@ -141,19 +170,15 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		child.updateMatrix();
+	}
+
+	// Sort objects by layer
+	objects.sort(function(a, b)
+	{
+		return a.layer - b.layer;
 	});
-};
 
-/**
- * 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)
-{
+	// Render the content
 	var context = this.context;
 
 	// Clear canvas
@@ -163,22 +188,6 @@ Renderer.prototype.render = function(object, viewport)
 	// Set viewport matrix transform
 	viewport.matrix.setContextTransform(context);
 
-	// Get objects to be rendered
-	var objects = []
-	object.traverse(function(child)
-	{
-		if(child.visible)
-		{
-			objects.push(child);
-		}
-	});
-
-	// 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++)
 	{