Issue #636 - Allow users to change the grid color

src/css/settings-application.css

@@ -59,16 +59,56 @@
   text-align: center;
 }
 
-.settings-item-grid-size {
+.settings-item-grid-size,
+.settings-item-grid-color {
   display: flex;
   align-items: center;
 }
 
+.settings-item-grid-size > label,
+.settings-item-grid-color > label {
+  width: 65px;
+  flex-shrink: 0;
+}
+
+.settings-item-grid-size .size-picker-option {
+  border-color: #888;
+}
+
+.settings-item-grid-size .size-picker-option:not(.selected):hover {
+  border-color: white;
+}
+
 .grid-width-select,
 .color-format-select {
   margin: 5px 5px 0 5px;
 }
 
+
+.grid-colors-list {
+  overflow: hidden;
+  padding: 0 5px;
+}
+
+.grid-colors-item {
+  float: left;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border: 2px solid #888;
+  margin-right: 2px;
+  margin-bottom: 2px;
+  box-sizing: border-box;
+}
+
+.grid-colors-item:hover {
+  border-color: white;
+}
+
+.grid-colors-item.selected {
+  border-color: gold;
+}
+
 .settings-section-application > .settings-title {
   /* Override the default 10px margin bottom for this panel */
   margin-bottom: 15px;

src/js/controller/settings/application/GridApplicationController.js

@@ -1,6 +1,23 @@
 (function () {
   var ns = $.namespace('pskl.controller.settings.application');
 
+  var colorsMap = {
+    'transparent': Constants.TRANSPARENT_COLOR,
+    'white': '#FFF1E8',
+    'light-gray': '#C2C3C7',
+    'dark-gray': '#5F574F',
+    'black': '#000000',
+    'blue': '#29ADFF',
+    'dark-blue': '#1D2B53',
+    'green': '#00E436',
+    'dark-green': '#008751',
+    'peach': '#FFCCAA',
+    'pink': '#FF77A8',
+    'yellow': '#FFEC27',
+    'orange': '#FFA300',
+    'red': '#FF004D',
+  };
+
   ns.GridApplicationController = function (piskelController, applicationController) {
     this.piskelController = piskelController;
     this.applicationController = applicationController;
@@ -10,6 +27,7 @@
   pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
 
   ns.GridApplicationController.prototype.init = function () {
+    // Grid enabled
     var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
     var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
     if (isEnabled) {
@@ -21,6 +39,32 @@
     var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
     this.sizePicker.init(document.querySelector('.grid-size-container'));
     this.sizePicker.setSize(gridWidth);
+
+    // Grid color
+    var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
+
+    var gridColor = pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
+    var gridColorSelect = document.querySelector('#grid-color');
+
+    var markup = '';
+    Object.keys(colorsMap).forEach(function (key, index) {
+      var background = colorsMap[key];
+      if (key === 'transparent') {
+        background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZ' +
+            'F8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)';
+      }
+      markup += pskl.utils.Template.replace(colorListItemTemplate, {
+        color: colorsMap[key],
+        index: index,
+        title: key,
+        background: background,
+        ':selected': gridColor === colorsMap[key]
+      });
+    });
+    this.gridColorList = document.querySelector('.grid-colors-list');
+    this.gridColorList.innerHTML = markup;
+
+    this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
   };
 
   ns.GridApplicationController.prototype.destroy = function () {
@@ -35,4 +79,13 @@
   ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
   };
+
+  ns.GridApplicationController.prototype.onGridColorClicked_ = function (evt) {
+    var color = evt.target.dataset.color;
+    if (color) {
+      pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);
+      this.gridColorList.querySelector('.selected').classList.remove('selected');
+      evt.target.classList.add('selected');
+    }
+  };
 })();

src/js/rendering/frame/CachedFrameRenderer.js

@@ -34,6 +34,7 @@
     var serializedFrame = [
       this.getZoom(),
       this.getGridWidth(),
+      this.getGridColor(),
       pskl.UserSettings.get('SEAMLESS_MODE'),
       pskl.UserSettings.get('SEAMLESS_OPACITY'),
       offset.x, offset.y,

src/js/rendering/frame/FrameRenderer.js

@@ -138,6 +138,10 @@
     this.offset.y = y;
   };
 
+  ns.FrameRenderer.prototype.getGridColor = function () {
+    return pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
+  };
+
   ns.FrameRenderer.prototype.setGridWidth = function (value) {
     this.gridWidth_ = value;
   };
@@ -295,15 +299,25 @@
     // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
     if (gridWidth > 0) {
+      var gridColor = this.getGridColor();
       // Scale out before drawing the grid.
       displayContext.scale(1 / z, 1 / z);
-      // Clear vertical lines.
-      for (var i = 1 ; i < frame.getWidth() ; i++) {
-        displayContext.clearRect((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+
+      var drawOrClear;
+      if (gridColor === Constants.TRANSPARENT_COLOR) {
+        drawOrClear = displayContext.clearRect.bind(displayContext);
+      } else {
+        displayContext.fillStyle = gridColor;
+        drawOrClear = displayContext.fillRect.bind(displayContext);
       }
-      // Clear horizontal lines.
+
+      // Draw or clear vertical lines.
+      for (var i = 1 ; i < frame.getWidth() ; i++) {
+        drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+      }
+      // Draw or clear horizontal lines.
       for (var j = 1 ; j < frame.getHeight() ; j++) {
-        displayContext.clearRect(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
+        drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
       }
     }
 

src/js/utils/UserSettings.js

@@ -2,6 +2,7 @@
   var ns = $.namespace('pskl');
 
   ns.UserSettings = {
+    GRID_COLOR : 'GRID_COLOR',
     GRID_ENABLED : 'GRID_ENABLED',
     GRID_WIDTH : 'GRID_WIDTH',
     MAX_FPS : 'MAX_FPS',
@@ -22,6 +23,7 @@
     TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
     APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
+      'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
       'GRID_ENABLED' : false,
       'GRID_WIDTH' : 1,
       'MAX_FPS' : 24,

src/templates/settings/application/grid.html

@@ -19,14 +19,17 @@
           title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
       </div>
     </div>
-    <div class="settings-item">
-      <label for="grid-color">Grid color</label>
-      <select id="grid-color" class="grid-color-select">
-        <option value="transparent">transparent</option>
-        <option value="blue">blue</option>
-        <option value="red">red</option>
-        <option value="green">green</option>
-      </select>
+    <div class="settings-item settings-item-grid-color">
+      <label>Grid color</label>
+      <div class="grid-colors-list"></div>
+      <script type="text/template" id="color-list-item-template">
+        <div class="grid-colors-item {{:selected}}"
+             data-color="{{color}}"
+             data-color-index="{{index}}"
+             style="background:{{background}}"
+             title="{{title}}">
+        </div>
+      </script>
     </div>
   </div>
 </script>