From 1db937ae018279603a592552dc4618c5a59c2549 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sun, 4 May 2014 22:58:36 +0200 Subject: [PATCH 1/2] Enhancement : Possibility to resize canvas content during resize - new checkbox in resize panel - content is resized using nearest neighbor - deactivated by default 2 bug fixes : - remove focus after closing drawer - fire resize event after undo/redo if size changed --- src/js/controller/DrawingController.js | 1 - .../controller/settings/ResizeController.js | 52 ++++++++++++------- .../controller/settings/SettingsController.js | 2 + src/js/service/HistoryService.js | 25 +++++---- src/js/utils/FrameUtils.js | 12 +++++ src/templates/settings/resize.html | 4 ++ 6 files changed, 64 insertions(+), 32 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 8bfe9f08..7bbe2a05 100644 --- a/src/js/controller/DrawingController.js +++ b/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); }; diff --git a/src/js/controller/settings/ResizeController.js b/src/js/controller/settings/ResizeController.js index 550946d7..a4894c03 100644 --- a/src/js/controller/settings/ResizeController.js +++ b/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) { - from.forEachPixel(function (color, x, y) { - if (x < to.getWidth() && y < to.getHeight()) { - to.setPixel(x, y, color); - } - }); + ns.ResizeController.prototype.resizeLayer_ = function (layer) { + var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this)); + return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames); + }; + + 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) { diff --git a/src/js/controller/settings/SettingsController.js b/src/js/controller/settings/SettingsController.js index acff6e0c..f8c5fd89 100644 --- a/src/js/controller/settings/SettingsController.js +++ b/src/js/controller/settings/SettingsController.js @@ -95,6 +95,8 @@ this.isExpanded = false; this.currentSetting = null; + + document.activeElement.blur(); }; })(); \ No newline at end of file diff --git a/src/js/service/HistoryService.js b/src/js/service/HistoryService.js index a84988de..7f90603d 100644 --- a/src/js/service/HistoryService.js +++ b/src/js/service/HistoryService.js @@ -78,8 +78,9 @@ throw 'Could not find previous SNAPSHOT saved in history stateQueue'; } - var piskelSnapshot = this.getSnapshotFromState_(snapshotIndex); - this.loadPiskel(piskelSnapshot, this.onPiskelLoadedCallback.bind(this, index, snapshotIndex)); + var serializedPiskel = this.getSnapshotFromState_(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) { - var descriptor = this.piskelController.piskel.getDescriptor(); - pskl.utils.serialization.Deserializer.deserialize(piskel, function (deserializedPiskel) { - deserializedPiskel.setDescriptor(descriptor); - this.piskelController.setPiskel(deserializedPiskel); - callback(deserializedPiskel); - }.bind(this)); - }; + ns.HistoryService.prototype.onPiskelLoaded_ = function (index, snapshotIndex, piskel) { + var originalSize = this.getPiskelSize_(); + piskel.setDescriptor(this.piskelController.piskel.getDescriptor()); + this.piskelController.setPiskel(piskel); - 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) { diff --git a/src/js/utils/FrameUtils.js b/src/js/utils/FrameUtils.js index 353b6fe5..34e02f02 100644 --- a/src/js/utils/FrameUtils.js +++ b/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(); } }; })(); diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html index 008c3875..cf50bf02 100644 --- a/src/templates/settings/resize.html +++ b/src/templates/settings/resize.html @@ -10,6 +10,10 @@ x +
+ Resize canvas content : + +
From 0b1977b47c19bcc428d934daf62e5c4b50062955 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Mon, 5 May 2014 21:58:17 +0200 Subject: [PATCH 2/2] Fix : Fixed styling for resize content checkbox --- src/templates/settings/resize.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html index cf50bf02..b9a01f7f 100644 --- a/src/templates/settings/resize.html +++ b/src/templates/settings/resize.html @@ -12,7 +12,7 @@
Resize canvas content : - +