Changes requested in PR

src/css/settings-application.css

@@ -61,14 +61,14 @@
 
 .settings-item-grid-size,
 .settings-item-grid-spacing,
-.settings-item-grid-color,
+.settings-item-grid-color {
   display: flex;
   align-items: center;
 }
 
 .settings-item-grid-size > label,
 .settings-item-grid-spacing > label,
-.settings-item-grid-color > label,
+.settings-item-grid-color > label {
   width: 65px;
   flex-shrink: 0;
 }
@@ -133,4 +133,4 @@
 .settings-version:hover {
   color: white !important;
   text-decoration: none !important;
-}
+}

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

@@ -22,7 +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));
+    this.spacingPicker = new pskl.widgets.SizePicker(this.onSpacingPickerChanged_.bind(this));
   };
 
   pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
@@ -44,7 +44,7 @@
     //Grid Spacing
     var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
     this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
-    this.spacingPicker.setSpacing(gridSpacing);
+    this.spacingPicker.setSize(gridSpacing);
 
     // Grid color
     var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');

src/js/rendering/frame/FrameRenderer.js

@@ -172,10 +172,16 @@
    * particularly for the current zoom level
    */
   ns.FrameRenderer.prototype.computeGridWidthForDisplay_ = function () {
+    var gridSpacing = this.getGridSpacing();
+    if (this.zoom * gridSpacing < 6) {
+      return 0;
+    }
+
     var gridWidth = this.getGridWidth();
-    while (this.zoom < 6 * gridWidth) {
+    while (gridWidth > 1 && this.zoom < 6 * gridWidth) {
       gridWidth--;
     }
+
     return gridWidth;
   };
 

src/js/utils/UserSettings.js

@@ -141,10 +141,5 @@
     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/SizePicker.js

@@ -27,10 +27,9 @@
     pskl.utils.Dom.removeClass('labeled', this.container);
     pskl.utils.Dom.removeClass('selected', this.container);
     var selectedOption;
-    if (size <= 4) {
-      selectedOption = this.container.querySelector('[data-size="' + size + '"]');
-    } else {
-      selectedOption = this.container.querySelector('[data-size="4"]');
+    selectedOption = this.container.querySelector('[data-size="' + size + '"]');
+    if (typeof selectedOption === 'undefined') {
+      selectedOption = this.container.querySelector('[data-size]:last-child');
       selectedOption.classList.add('labeled');
       selectedOption.setAttribute('real-size', size);
     }

src/piskel-script-list.js

@@ -171,7 +171,6 @@
   "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,7 +40,6 @@
   "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

@@ -22,20 +22,20 @@
     <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 class="size-picker-option"
+          title="1px" rel="tooltip" data-placement="top" data-size="1"></div>
+        <div class="size-picker-option"
+          title="2px" rel="tooltip" data-placement="top" data-size="2"></div>
+        <div class="size-picker-option"
+          title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
+        <div class="size-picker-option"
+          title="8px" rel="tooltip" data-placement="top" data-size="8"></div>
+        <div class="size-picker-option"
+          title="16px" rel="tooltip" data-placement="top" data-size="16"></div>
+        <div class="size-picker-option"
+          title="32px" rel="tooltip" data-placement="top" data-size="32"></div>
+        <div class="size-picker-option"
+          title="64px" rel="tooltip" data-placement="top" data-size="64"></div>
       </div>
     </div>
     <div class="settings-item settings-item-grid-color">