Create an event based UserSettings and use it for the grid diplay state.

js/Events.js

@@ -31,7 +31,13 @@ Events = {
      */
     REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
 
-    GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
+    /**
+     * Fired each time a user setting change.
+     * The payload will be:
+     *   1st argument: Name of the settings
+     *   2nd argument: New value
+     */
+    USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
     
     /**
      * The framesheet was reseted and is now probably drastically different.

js/controller/DrawingController.js

@@ -61,7 +61,7 @@
     $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
-    $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this)); 
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); 
   };
 
   ns.DrawingController.prototype.initMouseBehavior = function() {
@@ -83,6 +83,15 @@
       this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
   },
 
+  /**
+   * @private
+   */
+  ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
+    if(settingsName == pskl.UserSettings.SHOW_GRID) {
+      this.forceRendering_();
+    }
+  },
+
   /**
    * @private
    */

js/controller/SettingsController.js

@@ -3,19 +3,6 @@
   
     ns.SettingsController = function () {};
 
-    /**
-     * Get state for the checkbox that control the display of the grid
-     * on the drawing canvas.
-     * @private
-     */
-    ns.SettingsController.prototype.isShowGridChecked_ = function() {
-        var showGridCheckbox = $('#show-grid');
-        var isChecked = showGridCheckbox.is(':checked');
-        return isChecked;
-    };
-
-    // TODO(vincz): add get/set store
-
     /**
      * @public
      */
@@ -30,11 +17,9 @@
             $('#settings').toggleClass('has-expanded-drawer');
         });
 
-        // Show/hide the grid on drawing canvas:
+        // Handle grid display changes:
-        $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]);
         $('#show-grid').change($.proxy(function(evt) {
-            var checked = this.isShowGridChecked_();
+            var checked = $('#show-grid').prop('checked');
-            $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]);
             pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
         }, this));
 

js/rendering/FrameRenderer.js

@@ -21,13 +21,14 @@
 		this.className = className;
 		this.canvas = null;
 		this.hasGrid = renderingOptions.hasGrid;
-		this.gridStrokeWidth = 0;
+
+		this.gridStrokeWidth = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID) ? Constants.GRID_STROKE_WIDTH : 0;
 
 		// Flag to know if the config was altered
 		this.canvasConfigDirty = true;
 
 		if(this.hasGrid) {
-			$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this));	
+			$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
 		}
 	};
 
@@ -41,7 +42,17 @@
 		this.canvasConfigDirty = true;
 	};
 
-	ns.FrameRenderer.prototype.showGrid = function (evt, show) {
+	/**
+	 * @private
+	 */
+	ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
+		
+		if(settingsName == pskl.UserSettings.SHOW_GRID) {
+			this.enableGrid(settingsValue);
+		}
+	};
+
+	ns.FrameRenderer.prototype.enableGrid = function (show) {
 		
 		this.gridStrokeWidth = 0;
 		if(show) {

js/utils/UserSettings.js

@@ -12,9 +12,7 @@
         /**
          * @private
          */
-        cache_: {
+        cache_: {},
-
-        },
 
         /**
          * Static method to access a user defined settings value ot its default 
@@ -32,6 +30,8 @@
            this.checKeyValidity_(key);
            this.cache_[key] = value;
            this.set_(key, value);
+
+           $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);    
         },
 
         /**