Add grid checkbox

index.html

@@ -53,6 +53,13 @@
       </li>
     </ul>
 
+    <ul class="tools-group">
+      <li class="tool-grid">
+        <input id="show-grid" type="checkbox"/>
+        <label for="show-grid">Show grid</label>
+      </li>
+    </ul>
+  
   </div>
 
   <div class='left-nav'>

js/Constants.js

@@ -12,5 +12,8 @@ var Constants = {
 	/*
 	 * Default entry point for piskel web service:
 	 */
-	PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com'
+	PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com',
+
+	GRID_STROKE_WIDTH: 1,
+	GRID_STROKE_COLOR: "lightgray"
 };

js/Events.js

@@ -29,6 +29,8 @@ Events = {
 	 */
 	REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
 
+	GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
+
 	/**
 	 * The framesheet was reseted and is now probably drastically different.
 	 * Number of frames, content of frames, color used for the palette may have changed.

js/ToolSelector.js

@@ -67,6 +67,17 @@ pskl.ToolSelector = (function() {
 		}
 	};
 
+	/**
+	 * Get state for the checkbox that control the display of the grid
+	 * on the drawing canvas.
+	 * @private
+	 */
+	var isShowGridChecked_ = function() {
+		var showGridCheckbox = $('#show-grid');
+		var isChecked = showGridCheckbox.is(':checked');
+		return isChecked;
+	};
+
 	return {
 		init: function() {
 			
@@ -75,6 +86,13 @@ pskl.ToolSelector = (function() {
 			selectTool_(toolInstances.simplePen);
 			// Activate listener on tool panel:
 			$("#tools-container").click(onToolIconClicked_);
+
+			// Show/hide the grid on drawing canvas:
+			$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()])
+			$('#show-grid').change(function(evt) {
+				var checked = isShowGridChecked_();
+				$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked])		
+			});
 		}
 	};
 })();

js/controller/DrawingController.js

@@ -6,13 +6,13 @@
 		// TODO(vincz): Store user prefs in a localstorage string ?
 		var renderingOptions = {
 			"dpi": dpi,
-			"gridStrokeWidth" : 1,
+			"hasGrid" : true
-			"gridStrokeColor" : "lightgray"
 		};
 
 		// jQuery deep copy of the rendering config:
 		overlayRenderingOptions = $.extend(true, {}, renderingOptions);
-		overlayRenderingOptions.gridStrokeColor = "transparent";
+		overlayRenderingOptions.hasGrid = false;
+		
 
 		/**
 		 * @public

js/rendering/FrameRenderer.js

@@ -5,8 +5,7 @@
 	ns.FrameRenderer = function (container, renderingOptions, className) {
 		
 		this.defaultRenderingOptions = {
-			"gridStrokeWidth" : 0,
+			"hasGrid" : false
-			"gridStrokeColor" : "lightgray"
 		};
 		renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
 
@@ -22,16 +21,22 @@
 		this.dpi = renderingOptions.dpi;
 		this.className = className;
 		this.canvas = null;
-		console.log(renderingOptions)
+		this.hasGrid = renderingOptions.hasGrid;
-		this.gridStrokeWidth = renderingOptions.gridStrokeWidth;
+		this.gridStrokeWidth = 0;
-		this.gridStrokeColor = renderingOptions.gridStrokeColor;	
+		
+		this.lastRenderedFrame = null;
 
 		// Flag to know if the config was altered
 		this.canvasConfigDirty = true;
+
+		if(this.hasGrid) {
+			$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this));	
+		}	
 	};
 
 	ns.FrameRenderer.prototype.init = function (frame) {
 		this.render(frame);
+		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
@@ -39,12 +44,27 @@
 		this.canvasConfigDirty = true;
 	};
 
+	ns.FrameRenderer.prototype.showGrid = function (evt, show) {
+		
+		this.gridStrokeWidth = 0;
+		if(show) {
+			this.gridStrokeWidth = Constants.GRID_STROKE_WIDTH;
+		}
+		
+		this.canvasConfigDirty = true;
+
+		if(this.lastRenderedFrame) {
+			this.render(this.lastRenderedFrame);
+		}
+	};
+
 	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, col, row), this.dpi);
 			}
 		}
+		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
@@ -61,6 +81,7 @@
 			context.fillStyle = color;
 			context.fillRect(this.getFrameY_(col), this.getFrameY_(row), this.dpi, this.dpi);
 		}
+		this.lastRenderedFrame = frame;
 	};
 
 	ns.FrameRenderer.prototype.clear = function (col, row, frame) {
@@ -100,8 +121,8 @@
 	 */
 	ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
 		var ctx = canvas.getContext("2d");
-		ctx.lineWidth = this.gridStrokeWidth;
+		ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
-		ctx.strokeStyle = this.gridStrokeColor;
+		ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
 		for(var c=1; c < col; c++) {			
 	        ctx.moveTo(this.getFrameX_(c), 0);
 	        ctx.lineTo(this.getFrameX_(c), height);
@@ -121,6 +142,7 @@
 	ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
 		if(this.canvasConfigDirty) {
 			$(this.canvas).remove();
+			
 			var col = frame.getWidth(),
 				row = frame.getHeight();