Merge pull request #525 from starwed/viewport-cleaner

Viewport refactoring (round 1)

package.json

@@ -35,6 +35,7 @@
         "src/html.js",
         "src/storage.js",
         "src/extensions.js",
+        "src/viewport.js",
         "src/device.js",
         "src/sprite.js",
         "src/canvas.js",

src/DOM.js

@@ -389,8 +389,8 @@ Crafty.extend({
 		*/
 		translate: function (x, y) {
 			return {
-				x: (x - Crafty.stage.x + document.body.scrollLeft + document.documentElement.scrollLeft - Crafty.viewport._x)/Crafty.viewport._zoom,
-				y: (y - Crafty.stage.y + document.body.scrollTop + document.documentElement.scrollTop - Crafty.viewport._y)/Crafty.viewport._zoom
+				x: (x - Crafty.stage.x + document.body.scrollLeft + document.documentElement.scrollLeft - Crafty.viewport._x)/Crafty.viewport._scale,
+				y: (y - Crafty.stage.y + document.body.scrollTop + document.documentElement.scrollTop - Crafty.viewport._y)/Crafty.viewport._scale
 			}
 		}
 	}

src/DebugLayer.js

@@ -227,7 +227,7 @@ Crafty.c("DebugPolygon", {
 		ctx = Crafty.DebugCanvas.context;
 		ctx.beginPath();
 		for (var p in this.polygon.points) {
-			ctx.lineTo(Crafty.viewport.x + this.map.points[p][0], Crafty.viewport.y + this.map.points[p][1]);
+			ctx.lineTo(this.map.points[p][0],this.map.points[p][1]);
 		}
 		ctx.closePath();
 
@@ -323,10 +323,8 @@ Crafty.DebugCanvas  = {
 				Crafty.DebugCanvas.context = c.getContext('2d');
 				Crafty.DebugCanvas._canvas = c;
 
-				//Set any existing transformations
-				var zoom = Crafty.viewport._zoom
-				if (zoom != 1)
-					Crafty.DebugCanvas.context.scale(zoom, zoom);
+
+
 			}
 			//Bind rendering of canvas context (see drawing.js)
 			Crafty.unbind("RenderScene", Crafty.DebugCanvas.renderScene)
@@ -344,8 +342,12 @@ Crafty.DebugCanvas  = {
 				ctx = Crafty.DebugCanvas.context,
 				current;
 
+			var view = Crafty.viewport;
+			ctx.setTransform(view._scale, 0, 0, view._scale, view._x, view._y)
+
 			ctx.clearRect(rect._x, rect._y, rect._w, rect._h);
 
+
 			//sort the objects by the global Z
 			//q.sort(zsort);
 			for (; i < l; i++) {

src/HashMap.js

@@ -97,10 +97,10 @@
 					obj = results[i];
 					if (!obj) continue; //skip if deleted
 					id = obj[0]; //unique ID
-
+					obj = obj._mbr || obj
 					//check if not added to hash and that actually intersects
-					if (!found[id] && obj.x < rect._x + rect._w && obj._x + obj._w > rect._x &&
-								 obj.y < rect._y + rect._h && obj._h + obj._y > rect._y)
+					if (!found[id] && obj._x < rect._x + rect._w && obj._x + obj._w > rect._x &&
+								 obj._y < rect._y + rect._h && obj._h + obj._y > rect._y)
 						found[id] = results[i];
 				}
 

src/canvas.js

@@ -191,7 +191,7 @@ Crafty.extend({
 			Crafty.canvas._canvas = c;
 
 			//Set any existing transformations
-			var zoom = Crafty.viewport._zoom
+			var zoom = Crafty.viewport._scale
 			if (zoom != 1)
 				Crafty.canvas.context.scale(zoom, zoom);
 

src/core.js

@@ -1037,6 +1037,8 @@
                 if (loops) {
                     drawTimeStart = currentTime;
                     Crafty.trigger("RenderScene")
+                    // Post-render cleanup opportunity
+                    Crafty.trigger("PostRender");
                     currentTime = +new Date();
                     Crafty.trigger("MeasureRenderTime", currentTime - drawTimeStart);
 

src/drawing.js

@@ -337,7 +337,10 @@ Crafty.DrawManager = (function () {
 	/** array of dirty rects on screen */
 	var dirty_rects = [], changed_objs = [], 
 	/** array of DOMs needed updating */
-		dom = [], 
+	dom = [], 
+
+	dirtyViewport = false,
+
 
 	/** recManager: an object for managing dirty rectangles. */
 	rectManager = {
@@ -413,6 +416,9 @@ Crafty.DrawManager = (function () {
 
 	};
 
+	Crafty.bind("InvalidateViewport", function(){dirtyViewport=true});
+	Crafty.bind("PostRender", function(){dirtyViewport=false});
+
 	return {
 		/**@
 		* #Crafty.DrawManager.total2D
@@ -577,15 +583,21 @@ Crafty.DrawManager = (function () {
 
 		renderCanvas: function() {
 			var l = changed_objs.length;
-			if (!l) { return; }
+			if (!l && !dirtyViewport) { return; }
 
 			var i = 0, l = changed_objs.length, rect, q,
 				j, len, obj, ent, ctx = Crafty.canvas.context, DM = Crafty.DrawManager;
+
 
+			if (dirtyViewport){
+				var view = Crafty.viewport;
+				ctx.setTransform(view._scale, 0, 0, view._scale, view.x, view.y)
+
+			}
 			//if the amount of changed objects is over 60% of the total objects
 			//do the naive method redrawing
 			// TODO: I'm not sure this condition really makes that much sense!
-			if (l / DM.total2D > 0.6 ) {
+			if (l / DM.total2D > 0.6 || dirtyViewport) {
 				DM.drawAll();
 				rectManager.clean()
 				return;
@@ -672,6 +684,15 @@ Crafty.DrawManager = (function () {
 		* @see DOM.draw
 		*/
 		renderDOM: function() {
+			// Adjust the viewport
+			if (dirtyViewport){
+				var style = Crafty.stage.inner.style, view = Crafty.viewport;
+
+				style.transform = style[Crafty.support.prefix + "Transform"] = "scale(" + view._scale + ", " + view._scale + ")" 
+				style.left = view.x + "px";
+				style.top = view.y + "px";
+				style.zIndex = 10;
+			}
 
 			//if no objects have been changed, stop
 			if (!dom.length) return;