Merge pull request #433 from mattdinthehouse/master

Issue #411: Export as ZIP: Pad frame numbers with leading zeroes

src/js/controller/settings/exportimage/PngExportController.js

@@ -58,24 +58,30 @@
   };
 
   ns.PngExportController.prototype.mergedExport_ = function (zip) {
+    var paddingLength = ('' + this.piskelController.getFrameCount()).length;
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
       var frame = this.piskelController.getFrameAt(i);
       var canvas = this.getFrameAsCanvas_(frame);
       var basename = this.pngFilePrefixInput.value;
-      var filename = basename + (i + 1) + '.png';
+      var id = pskl.utils.StringUtils.leftPad(i, paddingLength, '0');
+      var filename = basename + id + '.png';
       zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
     }
   };
 
   ns.PngExportController.prototype.splittedExport_ = function (zip) {
     var layers = this.piskelController.getLayers();
+    var framePaddingLength = ('' + this.piskelController.getFrameCount()).length;
+    var layerPaddingLength = ('' + layers.length).length;
     for (var j = 0; this.piskelController.hasLayerAt(j); j++) {
       var layer = this.piskelController.getLayerAt(j);
+      var layerid = pskl.utils.StringUtils.leftPad(j, layerPaddingLength, '0');
       for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
         var frame = layer.getFrameAt(i);
         var canvas = this.getFrameAsCanvas_(frame);
         var basename = this.pngFilePrefixInput.value;
-        var filename = 'l' + j + '_' + basename + (i + 1) + '.png';
+        var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
+        var filename = 'l' + layerid + '_' + basename + frameid + '.png';
         zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
       }
     }

src/js/utils/StringUtils.js

@@ -0,0 +1,10 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.StringUtils = {
+    leftPad : function (input, length, pad) {
+      var padding = new Array(length).join(pad);
+      return (padding + input).slice(-length);
+    },
+  };
+})();

src/piskel-script-list.js

@@ -32,6 +32,7 @@
   "js/utils/LayerUtils.js",
   "js/utils/PixelUtils.js",
   "js/utils/PiskelFileUtils.js",
+  "js/utils/StringUtils.js",
   "js/utils/Template.js",
   "js/utils/TooltipFormatter.js",
   "js/utils/UserSettings.js",
@@ -227,4 +228,4 @@
 
   // Bonus features !!
   "js/snippets.js"
-];
+];