Adding grid

js/controller/DrawingController.js

@@ -54,6 +54,7 @@
         
         // Deactivate right click:
         this.container.contextmenu(this.onCanvasContextMenu_);
+        //this.container.contextmenu(this.onCanvasContextMenu_);
 	};
 
 	/**

js/piskel.js

@@ -105,7 +105,7 @@ $.namespace("pskl");
      * @private
      */
     calculateDPIsForDrawingCanvas_ : function() {
-      var availableViewportHeight = $('.main-panel').height();
+      var availableViewportHeight = $('.main-panel').height() - 50;
       return Math.floor(availableViewportHeight / framePixelHeight);    
     },
 

js/rendering/FrameRenderer.js

@@ -1,22 +1,30 @@
 (function () {
 	var ns = $.namespace("pskl.rendering");
 
-	this.dpi = null;
-	this.canvas = null;
 	
 	ns.FrameRenderer = function (container, renderingOptions, className) {
+		
+		this.defaultRenderingOptions = {
+			"gridStrokeWidth" : 0,
+			"gridStrokeColor" : "lightgray"
+		};
+		renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
+
 		if(container == undefined) {
 			throw "Bad FrameRenderer initialization. <container> undefined.";
 		}
-		this.container = container;
 		
-		if(renderingOptions == undefined || renderingOptions.dpi == undefined || isNaN(dpi)) {
+		if(isNaN(renderingOptions.dpi)) {
 			throw "Bad FrameRenderer initialization. <dpi> not well defined.";
 		}
 
-		this.displayGrid = !!renderingOptions.displayGrid;
+		this.container = container;
 		this.dpi = renderingOptions.dpi;
 		this.className = className;
+		this.canvas = null;
+		console.log(renderingOptions)
+		this.gridStrokeWidth = renderingOptions.gridStrokeWidth;
+		this.gridStrokeColor = renderingOptions.gridStrokeColor;	
 
 		// Flag to know if the config was altered
 		this.canvasConfigDirty = true;
@@ -34,16 +42,16 @@
 	ns.FrameRenderer.prototype.render = function (frame) {
 		for(var col = 0, width = frame.getWidth(); col < width; col++) {
 			for(var row = 0, height = frame.getHeight(); row < height; row++) {
-				this.drawPixel(col, row, frame, this.getCanvas_(frame), this.dpi);
+				this.drawPixel(col, row, frame, this.getCanvas_(frame, col, row), this.dpi);
 			}
 		}
 	};
 
 	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
-		var context = this.getCanvas_(frame).getContext('2d');
+		var context = this.getCanvas_(frame, col, row).getContext('2d');
 		var color = frame.getPixel(col, row);
 		if(color == Constants.TRANSPARENT_COLOR) {
-			context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);   
+			context.clearRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);   
 		} 
 		else {
 			if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
@@ -51,37 +59,90 @@
 				$.publish(Events.COLOR_USED, [color]);
 			}
 			context.fillStyle = color;
-			context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
+			context.fillRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
 		}
 	};
 
 	ns.FrameRenderer.prototype.clear = function (col, row, frame) {
-		var canvas = this.getCanvas_(frame)
+		var canvas = this.getCanvas_(frame, col, row)
 		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
 	};
 
+	/**
+	 * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
+	 * frame) into a sprite coordinate in column and row.
+     * @public
+     */
+    ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
+    	var cellSize = this.dpi + this.gridStrokeWidth;
+    	return {
+    	  "col" : (coords.x - coords.x % cellSize) / cellSize,
+          "row" : (coords.y - coords.y % cellSize) / cellSize
+    	};
+    };
+
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.getFrameX_ = function(col) {
+		return col * this.dpi + ((col - 1) * this.gridStrokeWidth);
+	};
+
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.getFrameY_ = function(row) {
+		return row * this.dpi + ((row - 1) * this.gridStrokeWidth);
+	};
+
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
+		var ctx = canvas.getContext("2d");
+		ctx.lineWidth = this.gridStrokeWidth;
+		ctx.strokeStyle = this.gridStrokeColor;
+		for(var c=1; c < col; c++) {			
+	        ctx.moveTo(this.getFrameX_(c), 0);
+	        ctx.lineTo(this.getFrameX_(c), height);
+	        ctx.stroke();
+		}
+		
+		for(var r=1; r < row; r++) {
+	        ctx.moveTo(0, this.getFrameY_(r));
+	        ctx.lineTo(width, this.getFrameY_(r));
+	        ctx.stroke();
+		}
+	};
+
 	/**
 	 * @private
 	 */
 	ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
 		if(this.canvasConfigDirty) {
 			$(this.canvas).remove();
-			var width = frame.getWidth(),
+			var col = frame.getWidth(),
-				height = frame.getHeight();
+				row = frame.getHeight();
 			
 			var canvas = document.createElement("canvas");
-			canvas.setAttribute("width", width * this.dpi);
-			canvas.setAttribute("height", height * this.dpi);
 			
+			var pixelWidth =  col * this.dpi + this.gridStrokeWidth * (col - 1);
+			var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
+			canvas.setAttribute("width", pixelWidth);
+			canvas.setAttribute("height", pixelHeight);
 			var canvasClassname =  "canvas";
 			if(this.className) {
 				canvasClassname += " " + this.className;	
 			}
 			canvas.setAttribute("class", canvasClassname);
+			this.container.append(canvas);
+
+			if(this.gridStrokeWidth > 0) {
+				this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
+			}
+			
 				
 			this.canvas = canvas;
-			this.container.append(this.canvas);
-
 			this.canvasConfigDirty = false;
 		}
 		return this.canvas;