Merge pull request #175 from juliandescottes/feature-resize-content

Enhancement : Possibility to resize canvas content during resize

src/js/controller/DrawingController.js

@@ -60,7 +60,6 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
 
-    // this.afterWindowResize_.bind(this);
     window.setTimeout(this.afterWindowResize_.bind(this), 100);
   };
 

src/js/controller/settings/ResizeController.js

@@ -17,6 +17,8 @@
 
     this.resizeForm = $("[name=resize-form]");
     this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));
+
+    this.resizeContentCheckbox = $(".resize-content-checkbox");
   };
 
   ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
@@ -25,31 +27,41 @@
     var width = parseInt(this.resizeWidth.val(), 10);
     var height = parseInt(this.resizeHeight.val(), 10);
 
-    var layers = [];
-    var fromLayers = this.piskelController.getLayers();
-    for (var i = 0 ; i < fromLayers.length ; i++) {
-      var frames = [];
-      var fromFrames = fromLayers[i].getFrames();
-      for (var j = 0 ; j < fromFrames.length ; j++) {
-        var frame = new pskl.model.Frame(width, height);
-        this.copyFromFrameToFrame(fromFrames[j], frame);
-        frames.push(frame);
-      }
-      var layer = pskl.model.Layer.fromFrames(fromLayers[i].getName(), frames);
-      layers.push(layer);
-    }
 
-    var piskel = pskl.model.Piskel.fromLayers(layers, this.piskelController.getPiskel().getDescriptor());
+    var resizeContentEnabled = this.isResizeContentEnabled_();
+    var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
+
+    var piskel = pskl.model.Piskel.fromLayers(resizedLayers, this.piskelController.getPiskel().getDescriptor());
     pskl.app.piskelController.setPiskel(piskel);
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
   };
 
-  ns.ResizeController.prototype.copyFromFrameToFrame = function (from, to) {
+  ns.ResizeController.prototype.resizeLayer_ = function (layer) {
-    from.forEachPixel(function (color, x, y) {
+    var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
-      if (x < to.getWidth() && y < to.getHeight()) {
+    return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
-        to.setPixel(x, y, color);
+  };
+
+  ns.ResizeController.prototype.resizeFrame_ = function (frame) {
+    var width = parseInt(this.resizeWidth.val(), 10);
+    var height = parseInt(this.resizeHeight.val(), 10);
+    
+    var resizedFrame;
+    if (this.isResizeContentEnabled_()) {
+      resizedFrame = pskl.utils.FrameUtils.resize(frame, width, height, false);
+    } else {
+      resizedFrame = new pskl.model.Frame(width, height);
+      frame.forEachPixel(function (color, x, y) {
+        if (x < resizedFrame.getWidth() && y < resizedFrame.getHeight()) {
+          resizedFrame.setPixel(x, y, color);
         }
       });
+    }
+    
+    return resizedFrame;
+  };
+
+  ns.ResizeController.prototype.isResizeContentEnabled_ = function () {
+    return !!this.resizeContentCheckbox.prop('checked');
   };
 
   ns.ResizeController.prototype.onCancelButtonClicked_ = function (evt) {

src/js/controller/settings/SettingsController.js

@@ -95,6 +95,8 @@
 
     this.isExpanded = false;
     this.currentSetting = null;
+
+    document.activeElement.blur();
   };
 
 })();

src/js/service/HistoryService.js

@@ -78,8 +78,9 @@
         throw 'Could not find previous SNAPSHOT saved in history stateQueue';
       }
 
-      var piskelSnapshot = this.getSnapshotFromState_(snapshotIndex);
+      var serializedPiskel = this.getSnapshotFromState_(snapshotIndex);
-      this.loadPiskel(piskelSnapshot, this.onPiskelLoadedCallback.bind(this, index, snapshotIndex));
+      var onPiskelLoadedCb = this.onPiskelLoaded_.bind(this, index, snapshotIndex);
+      pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, onPiskelLoadedCb);
     }
   };
 
@@ -98,16 +99,11 @@
     return piskelSnapshot;
   };
 
-  ns.HistoryService.prototype.loadPiskel = function (piskel, callback) {
+  ns.HistoryService.prototype.onPiskelLoaded_ = function (index, snapshotIndex, piskel) {
-    var descriptor = this.piskelController.piskel.getDescriptor();
+    var originalSize = this.getPiskelSize_();
-    pskl.utils.serialization.Deserializer.deserialize(piskel, function (deserializedPiskel) {
+    piskel.setDescriptor(this.piskelController.piskel.getDescriptor());
-      deserializedPiskel.setDescriptor(descriptor);
+    this.piskelController.setPiskel(piskel);
-      this.piskelController.setPiskel(deserializedPiskel);
-      callback(deserializedPiskel);
-    }.bind(this));
-  };
 
-  ns.HistoryService.prototype.onPiskelLoadedCallback = function (index, snapshotIndex, piskel) {
     for (var i = snapshotIndex + 1 ; i <= index ; i++) {
       var state = this.stateQueue[i];
       this.setupState(state);
@@ -118,6 +114,13 @@
     this.setupState(lastState);
     this.currentIndex = index;
     $.publish(Events.PISKEL_RESET);
+    if (originalSize !== this.getPiskelSize_()) {
+      $.publish(Events.FRAME_SIZE_CHANGED);
+    }
+  };
+
+  ns.HistoryService.prototype.getPiskelSize_ = function () {
+    return this.piskelController.getWidth() + 'x' + this.piskelController.getHeight();
   };
 
   ns.HistoryService.prototype.setupState = function (state) {

src/js/utils/FrameUtils.js

@@ -22,6 +22,12 @@
       });
     },
 
+    resize : function (frame, targetWidth, targetHeight, smoothing) {
+      var image = pskl.utils.FrameUtils.toImage(frame);
+      var resizedImage = pskl.utils.ImageResizer.resize(image, targetWidth, targetHeight, smoothing);
+      return pskl.utils.FrameUtils.createFromImage(resizedImage);
+    },
+
     /**
      * Alpha compositing using porter duff algorithm :
      * http://en.wikipedia.org/wiki/Alpha_compositing
@@ -151,6 +157,12 @@
     componentToHex : function (c) {
       var hex = c.toString(16);
       return hex.length == 1 ? "0" + hex : hex;
+    },
+
+    toImage : function (frame) {
+      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
+      canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
+      return canvasRenderer.render();
     }
   };
 })();

src/templates/settings/resize.html

@@ -10,6 +10,10 @@
         <input type="text" class="textfield resize-size-field" name="resize-width"/>x
         <input type="text" class="textfield resize-size-field" name="resize-height"/>
       </div>
+      <div class="resize-section">
+        <span class="resize-section-title  resize-section-title-small">Resize canvas content : </span>
+        <input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
+      </div>
       <input type="submit" class="button button-primary resize-button" value="Resize" />
       <input type="button" class="button resize-cancel-button" value="Cancel" />
     </form>