Merge pull request #300 from jnlopar/exportscale

Adds the ability to export a scaled spritesheet.

src/css/settings-export.css

@@ -55,4 +55,25 @@
   -moz-box-sizing:border-box;
   background: rgba(0,0,0,0.5);
   color: white;
-}
+}
+
+.scaling-factor {
+  margin-bottom: 10px;
+}
+
+.scaling-factor-input {
+  margin: 5px;
+  vertical-align: middle;
+  width: 145px;
+}
+
+.scaling-factor-text {
+  height: 31px;
+  display: inline-block;
+  line-height: 30px;
+  width: 40px;
+  border: 1px solid grey;
+  box-sizing: border-box;
+  border-radius: 3px;
+  text-align: center;
+}

src/css/settings.css

@@ -132,7 +132,6 @@
 
 .settings-description {
   margin : 0 0 10px 0;
-  display : inline-block;
 }
 
 .settings-form-section {

src/js/controller/settings/exportimage/ImageExportController.js

@@ -7,7 +7,16 @@
     this.gifExportController = new ns.GifExportController(piskelController);
   };
 
+  pskl.utils.inherit(ns.ImageExportController, pskl.controller.settings.AbstractSettingController);
+
   ns.ImageExportController.prototype.init = function () {
+    // Output Scaling Factor
+    var scalingFactorInput = document.querySelector('.scaling-factor-input');
+    scalingFactorInput.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+    this.addEventListener(scalingFactorInput, 'change', this.onScalingFactorChange_);
+    this.addEventListener(scalingFactorInput, 'input', this.onScalingFactorChange_);
+    this.updateScalingFactorText_(scalingFactorInput.value);
+
     this.pngExportController.init();
     this.gifExportController.init();
   };
@@ -15,5 +24,22 @@
   ns.ImageExportController.prototype.destroy = function () {
     this.pngExportController.destroy();
     this.gifExportController.destroy();
+    this.superclass.destroy.call(this);
+  };
+
+  ns.ImageExportController.prototype.onScalingFactorChange_ = function (evt) {
+    var target = evt.target;
+    var value = Math.round(parseFloat(target.value));
+    if (!isNaN(value)) {
+      this.updateScalingFactorText_(value);
+      pskl.UserSettings.set(pskl.UserSettings.EXPORT_SCALING, value);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+    }
+  };
+
+  ns.ImageExportController.prototype.updateScalingFactorText_ = function (scale) {
+    var scalingFactorText = document.querySelector('.scaling-factor-text');
+    scalingFactorText.innerHTML = scale + 'x';
   };
 })();

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

@@ -24,7 +24,17 @@
 
   ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
     var fileName = this.getPiskelName_() + '.png';
-    pskl.utils.BlobUtils.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) {
+
+    var outputCanvas = this.getFramesheetAsCanvas();
+
+    var scalingFactor = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
+    if (scalingFactor > 1) {
+      var width = outputCanvas.width * scalingFactor;
+      var height = outputCanvas.height * scalingFactor;
+      outputCanvas = pskl.utils.ImageResizer.resize(outputCanvas, width, height, false);
+    }
+
+    pskl.utils.BlobUtils.canvasToBlob(outputCanvas, function(blob) {
       pskl.utils.FileUtils.downloadAsFile(blob, fileName);
     });
   };

src/js/utils/UserSettings.js

@@ -12,6 +12,7 @@
     ONION_SKIN : 'ONION_SKIN',
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
+    EXPORT_SCALING: 'EXPORT_SCALING',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
@@ -26,7 +27,8 @@
       'ORIGINAL_SIZE_PREVIEW' : false,
       'ONION_SKIN' : false,
       'LAYER_OPACITY' : 0.2,
-      'LAYER_PREVIEW' : true
+      'LAYER_PREVIEW' : true,
+      'EXPORT_SCALING' : 1
     },
 
     /**

src/templates/settings/export.html

@@ -3,15 +3,23 @@
     Export Spritesheet
   </div>
   <div class="settings-item">
-    <span class="settings-description">PNG with all frames side by side.</span>
+    <div class="settings-description">PNG with all frames side by side.</div>
+    <div class="scaling-factor"
+      title="Scale the exported PNG spritesheet"
+      rel="tooltip"
+      data-placement="top">
+      <div class="settings-description"><label for="scaling-factor">Output Scaling Factor</label></div>
+      <input type="range" class="scaling-factor-input" name="scaling-factor" min="1"  max="32" step="1"/>
+      <span class="scaling-factor-text"></span>
+    </div>
     <button type="button" class="button button-primary png-download-button">Download PNG</button>
   </div>
   <div class="settings-title">
     Export as ZIP
   </div>
   <div class="settings-item">
-    <span class="settings-description">ZIP with one PNG file per frame.</span>
+    <div class="settings-description">ZIP with one PNG file per frame.</div>
-    <span class="settings-description" style="display:block">File names will start with the prefix below.</span>
+    <div class="settings-description">File names will start with the prefix below.</div>
     <div class="settings-item">
       <label>Prefix</label>
       <input class="zip-prefix-name  textfield" type="text" placeholder="PNG file prefix ...">