Merge pull request #154 from juliandescottes/feature-change-grid-size

Feature change grid size

README.md

@@ -30,18 +30,18 @@ Integrated in **[piskelapp.com](http://piskelapp.com)**, you can share everythin
 Piskel supports the following browsers :
 * **Chrome** (latest)
 * **Firefox** (latest)
-* **Internet** Explorer 10+
+* **Internet Explorer** 10+
 
-... and a fairly recent computer. 
+... and a fairly recent computer.
 
-We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've just never tested them but the gap shouldn't be huge.
+We don't plan/want/could be forced into supporting older IEs. For Opera and Safari, we've never tested them but the gap shouldn't be huge.
 
 ## Built with
 
-The Piskel editor is purely build in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites.
+The Piskel editor is purely built in **JavaScript, HTML and CSS**. It uses Canvas extensively for displaying all them pretty sprites.
 
 We also use the following **libraries** :
-* [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker 
+* [spectrum](https://github.com/bgrins/spectrum) : awesome standalone colorpicker
 * [gifjs](http://jnordberg.github.io/gif.js/) : generate animated GIFs in javascript, using webworkers
 * [jquery](http://jquery.com/) : used sporadically in the application
 * [bootstrap-tooltip](http://getbootstrap.com/javascript/#tooltips) : nice tooltips
@@ -51,11 +51,11 @@ As well as some **icons** from the [Noun Project](http://thenounproject.com/) :
 * (and probably one or two others)
 
 
-## Contributing ? 
+## Contributing ?
 
 Help is always welcome !
 
-* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues). 
+* **Issues** : Found a problem when using the application, want to request a feature, [open an issue](https://github.com/juliandescottes/piskel/issues).
 * **Participate** : Have a look at the [wiki](https://github.com/juliandescottes/piskel/wiki) to set up the development environment
 
 ## Licensing

src/js/Constants.js

@@ -47,7 +47,6 @@ var Constants = {
   IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
   IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
 
-  GRID_STROKE_WIDTH: 1,
   ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
 
   LEFT_BUTTON : 0,

src/js/controller/settings/ApplicationSettingsController.js

@@ -13,20 +13,18 @@
       .find('.background-picker[data-background-class=' + backgroundClass + ']')
       .addClass('selected');
 
-    // Initial state for grid display:
-    var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
-    $('#show-grid').prop('checked', show_grid);
-
-    // Handle grid display changes:
-    $('#show-grid').change(this.onShowGridClick.bind(this));
+    // Grid display and size
+    var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
+    $('#grid-width').val(gridWidth);
+    $('#grid-width').change(this.onGridWidthChange.bind(this));
 
     // Handle canvas background changes:
     $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
   };
 
-  ns.ApplicationSettingsController.prototype.onShowGridClick = function (evt) {
-    var checked = $('#show-grid').prop('checked');
-    pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+  ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) {
+    var width = $('#grid-width').val();
+    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
   };
 
   ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {

src/js/rendering/AbstractRenderer.js

@@ -7,8 +7,8 @@
 
   ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
 
-  ns.AbstractRenderer.prototype.setGridEnabled = Constants.ABSTRACT_FUNCTION;
-  ns.AbstractRenderer.prototype.isGridEnabled =  Constants.ABSTRACT_FUNCTION;
+  ns.AbstractRenderer.prototype.setGridWidth = Constants.ABSTRACT_FUNCTION;
+  ns.AbstractRenderer.prototype.getGridWidth =  Constants.ABSTRACT_FUNCTION;
 
   ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION;
   ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION;

src/js/rendering/CompositeRenderer.js

@@ -55,14 +55,14 @@
   };
 
 
-  ns.CompositeRenderer.prototype.setGridEnabled = function (b) {
+  ns.CompositeRenderer.prototype.setGridWidth = function (b) {
     this.renderers.forEach(function (renderer) {
-      renderer.setGridEnabled(b);
+      renderer.setGridWidth(b);
     });
   };
 
-  ns.CompositeRenderer.prototype.isGridEnabled = function () {
-    return this.getSampleRenderer_().isGridEnabled();
+  ns.CompositeRenderer.prototype.getGridWidth = function () {
+    return this.getSampleRenderer_().getGridWidth();
   };
 
   ns.CompositeRenderer.prototype.getSampleRenderer_ = function () {

src/js/rendering/frame/CachedFrameRenderer.js

@@ -19,7 +19,7 @@
     var size = this.getDisplaySize();
     var serializedFrame = [
       this.getZoom(),
-      this.isGridEnabled(),
+      this.getGridWidth(),
       offset.x, offset.y,
       size.width, size.height,
       frame.serialize()

src/js/rendering/frame/FrameRenderer.js

@@ -37,7 +37,6 @@
       y : 0
     };
 
-    this.isGridEnabled_ = false;
     this.supportGridRendering = renderingOptions.supportGridRendering;
 
     this.classes = classes || [];
@@ -56,7 +55,7 @@
     this.displayCanvas = null;
     this.setDisplaySize(renderingOptions.width, renderingOptions.height);
 
-    this.setGridEnabled(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
+    this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
 
     this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -137,12 +136,16 @@
     this.offset.y = y;
   };
 
-  ns.FrameRenderer.prototype.setGridEnabled = function (flag) {
-    this.isGridEnabled_ = flag && this.supportGridRendering;
+  ns.FrameRenderer.prototype.setGridWidth = function (value) {
+    this.gridWidth_ = value;
   };
 
-  ns.FrameRenderer.prototype.isGridEnabled = function () {
-    return this.isGridEnabled_;
+  ns.FrameRenderer.prototype.getGridWidth = function () {
+    if (this.supportGridRendering) {
+      return this.gridWidth_;
+    } else {
+      return 0;
+    }
   };
 
   ns.FrameRenderer.prototype.updateMargins_ = function () {
@@ -165,10 +168,10 @@
   };
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
-    if(settingName == pskl.UserSettings.SHOW_GRID) {
-      this.setGridEnabled(settingValue);
-    } else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
+    if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
       this.updateBackgroundClass_(settingValue);
+    } else if (settingName == pskl.UserSettings.GRID_WIDTH) {
+      this.setGridWidth(settingValue);
     }
   };
 
@@ -247,8 +250,10 @@
     context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
 
     var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
-    if (this.isGridEnabled() || isIE10) {
-      var gridWidth = this.isGridEnabled() ? Constants.GRID_STROKE_WIDTH : 0;
+
+    var gridWidth = this.getGridWidth();
+    var isGridEnabled = gridWidth > 0;
+    if (isGridEnabled || isIE10) {
       var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
       context.drawImage(scaled, 0, 0);
     } else {

src/js/rendering/layer/LayersRenderer.js

@@ -27,7 +27,7 @@
 
     var serializedRendering = [
       this.getZoom(),
-      this.isGridEnabled(),
+      this.getGridWidth(),
       offset.x,
       offset.y,
       size.width,

src/js/service/SavedStatusService.js

@@ -55,7 +55,7 @@
   ns.SavedStatusService.prototype.onBeforeUnload = function (evt) {
     var piskel = this.piskelController_.piskel;
     if (piskel.isDirty_) {
-      var confirmationMessage = "Your Piskel seem to have unsaved changes";
+      var confirmationMessage = "Your Piskel seems to have unsaved changes";
 
       (evt || window.event).returnValue = confirmationMessage;
       return confirmationMessage;

src/js/utils/ImageResizer.js

@@ -29,9 +29,10 @@
      * @param  {Canvas2d} source original image to be resized, as a 2d canvas
      * @param  {Number} zoom   ratio between desired dim / source dim
      * @param  {Number} margin gap to be displayed between pixels
+     * @param  {String} color or the margin (will be transparent if not provided)
      * @return {Canvas2d} the resized canvas
      */
-    resizeNearestNeighbour : function (source, zoom, margin) {
+    resizeNearestNeighbour : function (source, zoom, margin, marginColor) {
       margin = margin || 0;
       var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
       var context = canvas.getContext('2d');
@@ -65,6 +66,12 @@
           context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
           context.fillRect(xOffset, yOffset, xRange-margin, yRange-margin);
 
+          if (margin && marginColor) {
+            context.fillStyle = marginColor;
+            context.fillRect(xOffset + xRange - margin, yOffset, margin, yRange);
+            context.fillRect(xOffset, yOffset + yRange - margin, xRange, margin);
+          }
+
           yOffset += yRange;
         }
         yOffset = 0;

src/js/utils/UserSettings.js

@@ -2,12 +2,11 @@
   var ns = $.namespace("pskl");
 
   ns.UserSettings = {
-
-    SHOW_GRID : 'SHOW_GRID',
+    GRID_WIDTH : 'GRID_WIDTH',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
-      'SHOW_GRID' : false,
+      'GRID_WIDTH' : 0,
       'CANVAS_BACKGROUND' : 'medium-canvas-background'
     },
 

src/templates/settings/application.html

@@ -20,7 +20,14 @@
     </div>
   </div>
   <div class="settings-item">
-    <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
+    <label for="grid-width">Grid :</label>
+    <select id="grid-width">
+      <option value="0">Disabled</option>
+      <option value="1">Enabled - 1px wide</option>
+      <option value="2">Enabled - 2px wide</option>
+      <option value="3">Enabled - 3px wide</option>
+      <option value="4">Enabled - 4px wide</option>
+    </select>
   </div>
 </div>