Add a Grid Spacing option to the GridSettings

Fixes #774

src/css/settings-application.css

@@ -60,13 +60,15 @@
 }
 
 .settings-item-grid-size,
-.settings-item-grid-color {
+.settings-item-grid-spacing,
+.settings-item-grid-color,
   display: flex;
   align-items: center;
 }
 
 .settings-item-grid-size > label,
-.settings-item-grid-color > label {
+.settings-item-grid-spacing > label,
+.settings-item-grid-color > label,
   width: 65px;
   flex-shrink: 0;
 }

src/css/widgets-spacing-picker.css

@@ -0,0 +1,70 @@
+/***********************/
+/* spacing PICKER WIDGET */
+/***********************/
+
+.spacing-picker-container {
+  overflow: hidden;
+  padding: 5px 5px;
+}
+
+.spacing-picker-option {
+  float: left;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #444;
+  cursor: pointer;
+}
+
+.spacing-picker-option[data-spacing='1'] {
+  padding: 7px;
+}
+.spacing-picker-option[data-spacing='2'] {
+  padding: 6px;
+}
+.spacing-picker-option[data-spacing='4'] {
+  padding: 5px;
+}
+.spacing-picker-option[data-spacing='8'] {
+  padding: 4px;
+}
+.spacing-picker-option[data-spacing='16'] {
+  padding: 3px;
+}
+.spacing-picker-option[data-spacing='32'] {
+  padding: 2px;
+}
+.spacing-picker-option[data-spacing='64'] {
+  padding: 1px;
+}
+
+.spacing-picker-option:before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  display: block;
+  text-align: center;
+  line-height: 12px;
+  font-spacing: 90%;
+}
+
+.spacing-picker-option:hover {
+  border-color: #888;
+}
+
+.spacing-picker-option.selected:before {
+  background-color: var(--highlight-color);
+}
+
+.spacing-picker-option.selected {
+  border-color: var(--highlight-color);
+}
+
+.spacing-picker-option.labeled:before {
+  content: attr(real-spacing);
+  color: black;
+}

src/js/controller/settings/preferences/GridPreferencesController.js

@@ -22,6 +22,7 @@
     this.piskelController = piskelController;
     this.preferencesController = preferencesController;
     this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
+    this.spacingPicker = new pskl.widgets.SpacingPicker(this.onSpacingPickerChanged_.bind(this));
   };
 
   pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
@@ -40,6 +41,11 @@
     this.sizePicker.init(document.querySelector('.grid-size-container'));
     this.sizePicker.setSize(gridWidth);
 
+    //Grid Spacing
+    var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
+    this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
+    this.spacingPicker.setSpacing(gridSpacing);
+
     // Grid color
     var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
 
@@ -68,6 +74,7 @@
 
   ns.GridPreferencesController.prototype.destroy = function () {
     this.sizePicker.destroy();
+    this.spacingPicker.destroy();
     this.superclass.destroy.call(this);
   };
 
@@ -75,6 +82,10 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
   };
 
+  ns.GridPreferencesController.prototype.onSpacingPickerChanged_ = function (size) {
+    pskl.UserSettings.set(pskl.UserSettings.GRID_SPACING, size);
+  };
+
   ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
   };

src/js/rendering/frame/CachedFrameRenderer.js

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

src/js/rendering/frame/FrameRenderer.js

@@ -56,6 +56,7 @@
     this.setDisplaySize(renderingOptions.width, renderingOptions.height);
 
     this.setGridWidth(this.getUserGridWidth_());
+    this.setGridSpacing(this.getUserGridSpacing_());
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
@@ -146,6 +147,10 @@
     this.gridWidth_ = value;
   };
 
+  ns.FrameRenderer.prototype.setGridSpacing = function (value) {
+    this.gridSpacing_ = value;
+  };
+
   ns.FrameRenderer.prototype.getGridWidth = function () {
     if (!this.supportGridRendering) {
       return 0;
@@ -154,6 +159,14 @@
     return this.gridWidth_;
   };
 
+  ns.FrameRenderer.prototype.getGridSpacing = function () {
+    if (!this.supportGridRendering) {
+      return 0;
+    }
+
+    return this.gridSpacing_;
+  };
+
   /**
    * Compute a grid width value best suited to the current display context,
    * particularly for the current zoom level
@@ -185,8 +198,11 @@
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
     var settings = pskl.UserSettings;
-    if (settingName == settings.GRID_WIDTH || settingName == settings.GRID_ENABLED) {
+    if (settingName == settings.GRID_WIDTH ||
+        settingName == settings.GRID_SPACING ||
+        settingName == settings.GRID_ENABLED) {
       this.setGridWidth(this.getUserGridWidth_());
+      this.setGridSpacing(this.getUserGridSpacing_());
     }
   };
 
@@ -196,6 +212,12 @@
     return gridEnabled ? width : 0;
   };
 
+  ns.FrameRenderer.prototype.getUserGridSpacing_ = function () {
+    var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
+    var spacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
+    return gridEnabled ? spacing : 0;
+  };
+
   /**
    * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
    * frame) into a sprite coordinate in column and row.
@@ -298,12 +320,14 @@
 
     // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
+    var gridSpacing = this.getGridSpacing();
     if (gridWidth > 0) {
       var gridColor = this.getGridColor();
       // Scale out before drawing the grid.
       displayContext.scale(1 / z, 1 / z);
 
       var drawOrClear;
+      var drawing = true;
       if (gridColor === Constants.TRANSPARENT_COLOR) {
         drawOrClear = displayContext.clearRect.bind(displayContext);
       } else {
@@ -313,11 +337,15 @@
 
       // Draw or clear vertical lines.
       for (var i = 1 ; i < frame.getWidth() ; i++) {
-        drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+        if (i % gridSpacing == 0) {
+          drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
+        }
       }
       // Draw or clear horizontal lines.
       for (var j = 1 ; j < frame.getHeight() ; j++) {
-        drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
+        if (j % gridSpacing == 0) {
+          drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
+        }
       }
     }
 

src/js/utils/UserSettings.js

@@ -5,6 +5,7 @@
     GRID_COLOR : 'GRID_COLOR',
     GRID_ENABLED : 'GRID_ENABLED',
     GRID_WIDTH : 'GRID_WIDTH',
+    GRID_SPACING : 'GRID_SPACING',
     MAX_FPS : 'MAX_FPS',
     DEFAULT_SIZE : 'DEFAULT_SIZE',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
@@ -27,6 +28,7 @@
       'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
       'GRID_ENABLED' : false,
       'GRID_WIDTH' : 1,
+      'GRID_SPACING' : 1,
       'MAX_FPS' : 24,
       'DEFAULT_SIZE' : {
         width : Constants.DEFAULT.WIDTH,
@@ -139,5 +141,10 @@
     if (storedGridWidth === 0) {
       ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1);
     }
+
+    var storedGridSpacing = ns.UserSettings.readFromLocalStorage_('GRID_SPACING');
+    if (storedGridSpacing === 0) {
+      ns.UserSettings.writeToLocalStorage_('GRID_SPACING', 1);
+    }
   };
 })();

src/js/widgets/SpacingPicker.js

@@ -0,0 +1,51 @@
+(function () {
+  var ns = $.namespace('pskl.widgets');
+
+  ns.SpacingPicker = function (onChange) {
+    this.onChange = onChange;
+  };
+
+  ns.SpacingPicker.prototype.init = function (container) {
+    this.container = container;
+    pskl.utils.Event.addEventListener(this.container, 'click', this.onSpacingOptionClick_, this);
+  };
+
+  ns.SpacingPicker.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.SpacingPicker.prototype.getSpacing = function () {
+    var selectedOption = this.container.querySelector('.selected');
+    return selectedOption ? selectedOption.dataset.spacing : null;
+  };
+
+  ns.SpacingPicker.prototype.setSpacing = function (spacing) {
+    if (this.getSpacing() === spacing) {
+      return;
+    }
+
+    pskl.utils.Dom.removeClass('labeled', this.container);
+    pskl.utils.Dom.removeClass('selected', this.container);
+    var selectedOption;
+    if (spacing <= 64) {
+      selectedOption = this.container.querySelector('[data-spacing="' + spacing + '"]');
+    } else {
+      selectedOption = this.container.querySelector('[data-spacing="4"]');
+      selectedOption.classList.add('labeled');
+      selectedOption.setAttribute('real-spacing', spacing);
+    }
+    if (selectedOption) {
+      selectedOption.classList.add('selected');
+    }
+  };
+
+  ns.SpacingPicker.prototype.onSpacingOptionClick_ = function (e) {
+    var spacing = e.target.dataset.spacing;
+    console.log('clicked');
+    if (!isNaN(spacing)) {
+      spacing = parseInt(spacing, 10);
+      this.onChange(spacing);
+      this.setSpacing(spacing);
+    }
+  };
+})();

src/piskel-script-list.js

@@ -171,6 +171,7 @@
   "js/widgets/HslRgbColorPicker.js",
   "js/widgets/SizeInput.js",
   "js/widgets/SizePicker.js",
+  "js/widgets/SpacingPicker.js",
   "js/widgets/SynchronizedInputs.js",
   "js/widgets/Tabs.js",
   "js/widgets/Wizard.js",

src/piskel-style-list.js

@@ -40,6 +40,7 @@
   "css/widgets-anchor.css",
   "css/widgets-frame-picker.css",
   "css/widgets-size-picker.css",
+  "css/widgets-spacing-picker.css",
   "css/widgets-tabs.css",
   "css/widgets-wizard.css"
-];
+];

src/templates/settings/preferences/grid.html

@@ -19,6 +19,25 @@
           title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
       </div>
     </div>
+    <div class="settings-item settings-item-grid-spacing">
+      <label>Grid Spacing</label>
+      <div class="grid-spacing-container spacing-picker-container">
+        <div class="spacing-picker-option"
+          title="1px" rel="tooltip" data-placement="top" data-spacing="1"></div>
+        <div class="spacing-picker-option"
+          title="2px" rel="tooltip" data-placement="top" data-spacing="2"></div>
+        <div class="spacing-picker-option"
+          title="4px" rel="tooltip" data-placement="top" data-spacing="4"></div>
+        <div class="spacing-picker-option"
+          title="8px" rel="tooltip" data-placement="top" data-spacing="8"></div>
+        <div class="spacing-picker-option"
+          title="16px" rel="tooltip" data-placement="top" data-spacing="16"></div>
+        <div class="spacing-picker-option"
+          title="32px" rel="tooltip" data-placement="top" data-spacing="32"></div>
+        <div class="spacing-picker-option"
+          title="32px" rel="tooltip" data-placement="top" data-spacing="64"></div>
+      </div>
+    </div>
     <div class="settings-item settings-item-grid-color">
       <label>Grid color</label>
       <div class="grid-colors-list"></div>
@@ -31,4 +50,4 @@
       </script>
     </div>
   </div>
-</script>
+</script>