release: bump to version 0.14.0

Fixes #774

Gruntfile.js

@@ -47,16 +47,13 @@ module.exports = function(grunt) {
   var integrationTestPaths = require('./test/casperjs/integration/IntegrationSuite.js').tests;
   var integrationTests = prefixPaths(integrationTestPaths, "test/casperjs/integration/");
 
-  var getConnectConfig = function (base, port, host) {
-    if (typeof base === 'string') {
-      base = [base];
-    }
-
+  var getConnectConfig = function (base, port, host, open) {
     return {
       options: {
         port: port,
         hostname : host,
-        base: base
+        base: base,
+        open: open
       }
     };
   };
@@ -98,18 +95,9 @@ module.exports = function(grunt) {
      */
 
     connect: {
-      prod: getConnectConfig('dest/prod', PORT.PROD, hostname),
-      test: getConnectConfig(['dest/dev', 'test'], PORT.TEST, hostname),
-      dev: getConnectConfig(['dest/dev', 'test'], PORT.DEV, hostname)
-    },
-
-    open : {
-      prod : {
-        path : 'http://' + hostname + ':' + PORT.PROD + '/'
-      },
-      dev : {
-        path : 'http://' + hostname + ':' + PORT.DEV + '/?debug'
-      }
+      prod: getConnectConfig('dest/prod', PORT.PROD, hostname, true),
+      test: getConnectConfig(['dest/dev', 'test'], PORT.TEST, hostname, false),
+      dev: getConnectConfig(['dest/dev', 'test'], PORT.DEV, hostname, 'http://' + hostname + ':' + PORT.DEV + '/?debug')
     },
 
     watch: {
@@ -343,9 +331,9 @@ module.exports = function(grunt) {
 
   // SERVER TASKS
   // Start webserver and watch for changes
-  grunt.registerTask('serve', ['build', 'connect:prod', 'open:prod', 'watch:prod']);
+  grunt.registerTask('serve', ['build', 'connect:prod', 'watch:prod']);
   // Start webserver on src folder, in debug mode
-  grunt.registerTask('play', ['build-dev', 'connect:dev', 'open:dev', 'watch:dev']);
+  grunt.registerTask('play', ['build-dev', 'connect:dev', 'watch:dev']);
 
   // ALIASES, kept for backward compatibility
   grunt.registerTask('serve-debug', ['play']);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piskel",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [
@@ -45,7 +45,6 @@
     "grunt-karma": "1.0.0",
     "grunt-leading-indent": "0.2.0",
     "grunt-nw-builder": "3.1.0",
-    "grunt-open": "0.2.3",
     "grunt-replace": "1.0.1",
     "grunt-spritesmith": "6.4.0",
     "jasmine-core": "2.6.1",

src/css/layout.css

@@ -80,10 +80,16 @@
 }
 
 .cursor-coordinates {
-  color:#888;
-  font-size:12px;
-  font-weight:bold;
-  font-family:monospace;
+  color: var(--highlight-color);
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+}
+
+.cursor-coordinates .drawing-zoom {
+  position: absolute;
+  top: -20px;
+  left: 1px;
 }
 
 /**

src/css/settings-application.css

@@ -60,22 +60,48 @@
 }
 
 .settings-item-grid-size,
+.settings-item-grid-spacing,
 .settings-item-grid-color {
   display: flex;
   align-items: center;
 }
 
 .settings-item-grid-size > label,
+.settings-item-grid-spacing > label,
 .settings-item-grid-color > label {
   width: 65px;
   flex-shrink: 0;
 }
 
-.settings-item-grid-size .size-picker-option {
+.grid-spacing-container .size-picker-option[data-size='1'] {
+  padding: 7px;
+}
+.grid-spacing-container .size-picker-option[data-size='2'] {
+  padding: 6px;
+}
+.grid-spacing-container .size-picker-option[data-size='4'] {
+  padding: 5px;
+}
+.grid-spacing-container .size-picker-option[data-size='8'] {
+  padding: 4px;
+}
+.grid-spacing-container .size-picker-option[data-size='16'] {
+  padding: 3px;
+}
+.grid-spacing-container .size-picker-option[data-size='32'] {
+  padding: 2px;
+}
+.grid-spacing-container .size-picker-option[data-size='64'] {
+  padding: 1px;
+}
+
+.settings-item-grid-size .size-picker-option,
+.settings-item-grid-spacing .size-picker-option {
   border-color: #888;
 }
 
-.settings-item-grid-size .size-picker-option:not(.selected):hover {
+.settings-item-grid-size .size-picker-option:not(.selected):hover,
+.settings-item-grid-spacing .size-picker-option:not(.selected):hover {
   border-color: white;
 }
 
@@ -131,4 +157,4 @@
 .settings-version:hover {
   color: white !important;
   text-decoration: none !important;
-}
+}

src/js/controller/CursorCoordinatesController.js

@@ -17,6 +17,7 @@
     $.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
     $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.redraw.bind(this));
+    $.subscribe(Events.ZOOM_CHANGED, this.redraw.bind(this));
 
     this.redraw();
   };
@@ -39,6 +40,11 @@
       }
     }
 
+    if (pskl.app.drawingController) {
+      var zoom = pskl.app.drawingController.compositeRenderer.getZoom().toFixed(2);
+      html += '<div class="drawing-zoom">x' + zoom + '</div>';
+    }
+
     this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html;
   };
 

src/js/controller/settings/exportimage/GifExportController.js

@@ -113,7 +113,7 @@
       width: width * zoom,
       height: height * zoom,
       preserveColors : preserveColors,
-      repeat: this.getRepeatSetting_() ? 0 : 1,
+      repeat: this.getRepeatSetting_() ? 0 : -1,
       transparent : transparent
     });
 

src/js/controller/settings/exportimage/ZipExportController.js

@@ -12,12 +12,25 @@
     this.pngFilePrefixInput = document.querySelector('.zip-prefix-name');
     this.pngFilePrefixInput.value = 'sprite_';
 
-    this.splitByLayersCheckbox =  document.querySelector('.zip-split-layers-checkbox');
+    this.splitByLayersCheckbox = document.querySelector('.zip-split-layers-checkbox');
+    this.addEventListener(this.splitByLayersCheckbox, 'change', this.onSplitLayersClick_);
+
+    this.useLayerNamesContainer = document.querySelector('.use-layer-names-container');
+    this.useLayerNamesCheckbox = document.querySelector('.zip-use-layer-names-checkbox');
+    this.toggleHideUseLayerNamesCheckbox();
 
     var zipButton = document.querySelector('.zip-generate-button');
     this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
   };
 
+  ns.ZipExportController.prototype.toggleHideUseLayerNamesCheckbox = function () {
+    this.useLayerNamesContainer.style.display = (this.splitByLayersCheckbox.checked ? 'block' : 'none');
+  };
+
+  ns.ZipExportController.prototype.onSplitLayersClick_ = function () {
+    this.toggleHideUseLayerNamesCheckbox();
+  };
+
   ns.ZipExportController.prototype.onZipButtonClick_ = function () {
     var zip = new window.JSZip();
 
@@ -63,6 +76,9 @@
         var basename = this.pngFilePrefixInput.value;
         var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
         var filename = 'l' + layerid + '_' + basename + frameid + '.png';
+        if (this.useLayerNamesCheckbox.checked) {
+          filename = layer.getName() + '_' + basename + frameid + '.png';
+        }
         zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
       }
     }

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.SizePicker(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.setSize(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,15 +159,29 @@
     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
    */
   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;
   };
 
@@ -185,8 +204,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 +218,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,6 +326,7 @@
 
     // Draw grid.
     var gridWidth = this.computeGridWidthForDisplay_();
+    var gridSpacing = this.getGridSpacing();
     if (gridWidth > 0) {
       var gridColor = this.getGridColor();
       // Scale out before drawing the grid.
@@ -313,11 +342,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,

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-style-list.js

@@ -42,4 +42,4 @@
   "css/widgets-size-picker.css",
   "css/widgets-tabs.css",
   "css/widgets-wizard.css"
-];
+];

src/templates/settings/export/zip.html

@@ -11,7 +11,11 @@
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>
+      <div class="checkbox-container use-layer-names-container" style="margin: 5px 0;">
+        <input id="zip-use-layer-names" class="zip-use-layer-names-checkbox checkbox-fix" type="checkbox" />
+        <label for="zip-use-layer-names">Index by layer names</label>
+      </div>
       <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
   </div>
-</script>
+</script>

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 size-picker-container">
+        <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">
       <label>Grid color</label>
       <div class="grid-colors-list"></div>
@@ -31,4 +50,4 @@
       </script>
     </div>
   </div>
-</script>
+</script>