Merge resize content and resize canvas in single form

src/css/settings-resize.css

@@ -9,6 +9,17 @@
   margin-left: 0;
 }
 
+.resize-ratio-checkbox,
+.resize-smooth-checkbox {
+  vertical-align: -2px;
+  margin-left: 0;
+}
+
+
+/*****************/
+/* ANCHOR WIDGET */
+/*****************/
+
 .resize-origin-container {
   overflow: hidden;
   position: relative;
@@ -17,19 +28,33 @@
   display: inline-block;
 }
 
+.transition .resize-origin-option,
+.transition .resize-origin-option:before {
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
 .resize-origin-option {
   float: left;
-  box-sizing: border-box;
   position: relative;
+
+  box-sizing: border-box;
   margin: 0 1px 1px 0;
   width: 20px;
   height: 20px;
+
   background : #888;
+
   font-size: 8px;
   text-align: center;
   cursor: pointer;
 }
 
+.disabled .resize-origin-option {
+  cursor: default;
+  background : #555;
+  border-color: #555 !important;
+}
+
 .resize-origin-option.selected {
   border : 3px solid gold;
 }
@@ -50,6 +75,14 @@
   background: gold;
 }
 
+.disabled .resize-origin-option.selected:before {
+  background: #555;
+}
+
+.disabled .resize-origin-option[data-neighbor]:before {
+  border-color: #555 !important;
+}
+
 .resize-origin-option[data-neighbor]:before {
   width: 0;
   height: 0;
@@ -78,10 +111,4 @@
 .resize-origin-option[data-neighbor="right"]:before {
   border-left-color: gold;
   margin-top: -4px;
-}
-
-.resize-ratio-checkbox,
-.resize-smooth-checkbox {
-  vertical-align: -2px;
-  margin-left: 0;
 }

src/js/controller/settings/resize/AbstractResizeController.js

@@ -1,89 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.settings.resize');
-
-  ns.AbstractResizeController = function (piskelController, container) {
-    this.piskelController = piskelController;
-    this.container = container;
-  };
-
-  ns.AbstractResizeController.prototype.init = function () {
-    this.widthInput = this.container.querySelector('[name="resize-width"]');
-    this.heightInput = this.container.querySelector('[name="resize-height"]');
-
-    this.widthInput.value = this.piskelController.getWidth();
-    this.heightInput.value = this.piskelController.getHeight();
-
-    this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
-    this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
-
-    this.cancelButton = this.container.querySelector('.resize-cancel-button');
-    this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
-
-    this.resizeForm = this.container.querySelector('form');
-    this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this));
-
-    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
-    this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this));
-
-    this.lastInput = this.widthInput;
-  };
-
-  ns.AbstractResizeController.prototype.onResizeFormSubmit_ = function (evt) {
-    evt.preventDefault();
-
-    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, true);
-    $.publish(Events.CLOSE_SETTINGS_DRAWER);
-  };
-
-
-  ns.AbstractResizeController.prototype.resizeLayer_ = function (layer) {
-    var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
-    return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
-  };
-
-  ns.AbstractResizeController.prototype.resizeFrame_ = Constants.ABSTRACT_FUNCTION;
-
-  ns.AbstractResizeController.prototype.onCancelButtonClicked_ = function () {
-    $.publish(Events.CLOSE_SETTINGS_DRAWER);
-  };
-
-  ns.AbstractResizeController.prototype.onMaintainRatioChange_ = function (evt) {
-    var target = evt.target;
-    if (target.checked) {
-      this.synchronizeSizeInputs_(this.lastInput);
-    }
-  };
-
-  ns.AbstractResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
-    var target = evt.target;
-    if (this.maintainRatioCheckbox.checked) {
-      this.synchronizeSizeInputs_(target);
-    }
-    this.lastInput = target;
-  };
-
-  /**
-   * Based on the value of the provided sizeInput (considered as emitter)
-   * update the value of the other sizeInput to match the current width/height ratio
-   * @param  {HTMLElement} origin either widthInput or heightInput
-   */
-  ns.AbstractResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
-    var value = parseInt(sizeInput.value, 10);
-    if (isNaN(value)) {
-      value = 0;
-    }
-
-    var height = this.piskelController.getHeight(),
-        width = this.piskelController.getWidth();
-
-    if (sizeInput === this.widthInput) {
-      this.heightInput.value = Math.round(value * height/width);
-    } else if (sizeInput === this.heightInput) {
-      this.widthInput.value = Math.round(value * width/height);
-    }
-  };
-})();

src/js/controller/settings/resize/AnchorWidget.js

@@ -4,7 +4,8 @@
   var OPTION_CLASSNAME = 'resize-origin-option';
 
   ns.AnchorWidget = function (container) {
-    container.addEventListener('click', this.onResizeOriginClick_.bind(this));
+    this.container = container;
+    this.container.addEventListener('click', this.onResizeOriginClick_.bind(this));
   };
 
   ns.AnchorWidget.ORIGIN = {
@@ -44,6 +45,18 @@
     return this.origin;
   };
 
+  ns.AnchorWidget.prototype.disable = function () {
+    this.disabled = true;
+    this.container.classList.add('transition');
+    this.container.classList.add('disabled');
+  };
+
+  ns.AnchorWidget.prototype.enable = function () {
+    this.disabled = false;
+    this.container.classList.remove('disabled');
+    window.setTimeout(this.container.classList.remove.bind(this.container.classList, 'transition'), 250);
+  };
+
   ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) {
     var options = document.querySelectorAll('.'+OPTION_CLASSNAME);
     for (var i = 0 ; i < options.length ; i++) {

src/js/controller/settings/resize/ResizeCanvasController.js

@@ -1,69 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.settings.resize');
-
-  ns.ResizeCanvasController = function (piskelController, container) {
-    this.superclass.constructor.call(this, piskelController, container);
-
-    var anchorWidgetContainer = document.querySelector('.resize-origin-container');
-    this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
-  };
-
-  pskl.utils.inherit(ns.ResizeCanvasController, ns.AbstractResizeController);
-
-  ns.ResizeCanvasController.prototype.init = function () {
-    this.superclass.init.call(this);
-    this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
-  };
-
-  /****************/
-  /* RESIZE LOGIC */
-  /****************/
-
-  ns.ResizeCanvasController.prototype.resizeFrame_ = function (frame) {
-    var width = parseInt(this.widthInput.value, 10);
-    var height = parseInt(this.heightInput.value, 10);
-
-    var resizedFrame = new pskl.model.Frame(width, height);
-    frame.forEachPixel(function (color, x, y) {
-      var translated = this.translateCoordinates_(x, y, frame, resizedFrame);
-      if (resizedFrame.containsPixel(translated.x, translated.y)) {
-        resizedFrame.setPixel(translated.x, translated.y, color);
-      }
-    }.bind(this));
-
-    return resizedFrame;
-  };
-
-  ns.ResizeCanvasController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
-    return {
-      x : this.translateX_(x, frame.width, resizedFrame.width),
-      y : this.translateY_(y, frame.height, resizedFrame.height)
-    };
-  };
-
-  ns.ResizeCanvasController.prototype.translateX_ = function (x, width, resizedWidth) {
-    var origin = this.anchorWidget.getOrigin();
-    if (origin.indexOf('LEFT') != -1) {
-      return x;
-    } else if (origin.indexOf('RIGHT') != -1) {
-      return x - (width - resizedWidth);
-    } else {
-      return x - Math.round((width - resizedWidth)/2);
-    }
-  };
-
-  ns.ResizeCanvasController.prototype.translateY_ = function (y, height, resizedHeight) {
-    var origin = this.anchorWidget.getOrigin();
-    if (origin.indexOf('TOP') != -1) {
-      return y;
-    } else if (origin.indexOf('BOTTOM') != -1) {
-      return y - (height - resizedHeight);
-    } else {
-      return y - Math.round((height - resizedHeight)/2);
-    }
-  };
-
-  /*****************/
-  /* ANCHOR WIDGET */
-  /*****************/
-})();

src/js/controller/settings/resize/ResizeContentController.js

@@ -1,19 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.settings.resize');
-
-  ns.ResizeContentController = function (piskelController, container) {
-    this.superclass.constructor.call(this, piskelController, container);
-  };
-
-  pskl.utils.inherit(ns.ResizeContentController, ns.AbstractResizeController);
-
-  ns.ResizeContentController.prototype.init = function () {
-    this.superclass.init.call(this);
-  };
-
-  ns.ResizeContentController.prototype.resizeFrame_ = function (frame) {
-    var width = parseInt(this.widthInput.value, 10);
-    var height = parseInt(this.heightInput.value, 10);
-    return pskl.utils.FrameUtils.resize(frame, width, height, false);
-  };
-})();

src/js/controller/settings/resize/ResizeController.js

@@ -2,15 +2,154 @@
   var ns = $.namespace('pskl.controller.settings.resize');
 
   ns.ResizeController = function (piskelController) {
-    var resizeCanvasContainer = document.querySelector('.resize-canvas');
+    this.piskelController = piskelController;
-    this.resizeCanvasController = new ns.ResizeCanvasController(piskelController, resizeCanvasContainer);
 
-    var resizeContentContainer = document.querySelector('.resize-content');
+    this.container = document.querySelector('.resize-canvas');
-    this.resizeContentController = new ns.ResizeContentController(piskelController, resizeContentContainer);
+
+    var anchorWidgetContainer = this.container.querySelector('.resize-origin-container');
+    this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
   };
 
   ns.ResizeController.prototype.init = function () {
-    this.resizeCanvasController.init();
+    this.widthInput = this.container.querySelector('[name="resize-width"]');
-    this.resizeContentController.init();
+    this.heightInput = this.container.querySelector('[name="resize-height"]');
+
+    this.widthInput.value = this.piskelController.getWidth();
+    this.heightInput.value = this.piskelController.getHeight();
+
+    this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
+    this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
+
+    this.cancelButton = this.container.querySelector('.resize-cancel-button');
+    this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
+
+    this.resizeForm = this.container.querySelector('form');
+    this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this));
+
+    this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
+    this.resizeContentCheckbox.addEventListener('change', this.onResizeContentChange_.bind(this));
+
+    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
+    this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this));
+
+    this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
+    this.lastInput = this.widthInput;
+  };
+
+  ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
+    evt.preventDefault();
+
+    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, true);
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+
+
+  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.onCancelButtonClicked_ = function () {
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+
+  ns.ResizeController.prototype.onResizeContentChange_ = function (evt) {
+    var target = evt.target;
+    if (target.checked) {
+      this.anchorWidget.disable();
+    } else {
+      this.anchorWidget.enable();
+    }
+  };
+
+  ns.ResizeController.prototype.onMaintainRatioChange_ = function (evt) {
+    var target = evt.target;
+    if (target.checked) {
+      this.synchronizeSizeInputs_(this.lastInput);
+    }
+  };
+
+  ns.ResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
+    var target = evt.target;
+    if (this.maintainRatioCheckbox.checked) {
+      this.synchronizeSizeInputs_(target);
+    }
+    this.lastInput = target;
+  };
+
+  /**
+   * Based on the value of the provided sizeInput (considered as emitter)
+   * update the value of the other sizeInput to match the current width/height ratio
+   * @param  {HTMLElement} origin either widthInput or heightInput
+   */
+  ns.ResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
+    var value = parseInt(sizeInput.value, 10);
+    if (isNaN(value)) {
+      value = 0;
+    }
+
+    var height = this.piskelController.getHeight(),
+        width = this.piskelController.getWidth();
+
+    if (sizeInput === this.widthInput) {
+      this.heightInput.value = Math.round(value * height/width);
+    } else if (sizeInput === this.heightInput) {
+      this.widthInput.value = Math.round(value * width/height);
+    }
+  };
+
+  /***********************/
+  /* RESIZE CANVAS LOGIC */
+  /***********************/
+
+  ns.ResizeController.prototype.resizeFrame_ = function (frame) {
+    var width = parseInt(this.widthInput.value, 10);
+    var height = parseInt(this.heightInput.value, 10);
+    if (this.resizeContentCheckbox.checked) {
+      return pskl.utils.FrameUtils.resize(frame, width, height, false);
+    } else {
+      var resizedFrame = new pskl.model.Frame(width, height);
+      frame.forEachPixel(function (color, x, y) {
+        var translated = this.translateCoordinates_(x, y, frame, resizedFrame);
+        if (resizedFrame.containsPixel(translated.x, translated.y)) {
+          resizedFrame.setPixel(translated.x, translated.y, color);
+        }
+      }.bind(this));
+
+      return resizedFrame;
+    }
+  };
+
+  ns.ResizeController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
+    return {
+      x : this.translateX_(x, frame.width, resizedFrame.width),
+      y : this.translateY_(y, frame.height, resizedFrame.height)
+    };
+  };
+
+  ns.ResizeController.prototype.translateX_ = function (x, width, resizedWidth) {
+    var origin = this.anchorWidget.getOrigin();
+    if (origin.indexOf('LEFT') != -1) {
+      return x;
+    } else if (origin.indexOf('RIGHT') != -1) {
+      return x - (width - resizedWidth);
+    } else {
+      return x - Math.round((width - resizedWidth)/2);
+    }
+  };
+
+  ns.ResizeController.prototype.translateY_ = function (y, height, resizedHeight) {
+    var origin = this.anchorWidget.getOrigin();
+    if (origin.indexOf('TOP') != -1) {
+      return y;
+    } else if (origin.indexOf('BOTTOM') != -1) {
+      return y - (height - resizedHeight);
+    } else {
+      return y - Math.round((height - resizedHeight)/2);
+    }
   };
 })();

src/piskel-script-list.js

@@ -99,11 +99,8 @@
   "js/controller/settings/exportimage/ImageExportController.js",
   "js/controller/settings/exportimage/GifExportController.js",
   "js/controller/settings/exportimage/PngExportController.js",
-  "js/controller/settings/resize/ResizeController.js",
-  "js/controller/settings/resize/AbstractResizeController.js",
   "js/controller/settings/resize/AnchorWidget.js",
-  "js/controller/settings/resize/ResizeCanvasController.js",
+  "js/controller/settings/resize/ResizeController.js",
-  "js/controller/settings/resize/ResizeContentController.js",
   "js/controller/settings/SaveController.js",
   "js/controller/settings/ImportController.js",
 

src/templates/settings/resize.html

@@ -21,6 +21,12 @@
           <span>Maintain aspect ratio</span>
         </label>
       </div>
+      <div class="resize-section">
+        <label>
+          <input type="checkbox" class="resize-content-checkbox" value="true"/>
+          <span>Resize canvas content</span>
+        </label>
+      </div>
       <div class="resize-section">
         <span  class="resize-section-title">Anchor</span>
         <div class="resize-origin-container">
@@ -39,31 +45,4 @@
       <input type="button" class="button resize-cancel-button" value="Cancel" />
     </form>
   </div>
-
-  <!-- RESIZE CONTENT -->
-  <div class="settings-title">
-    Image size
-  </div>
-  <div class="settings-item  resize-content">
-    <form action="" method="POST" name="resize-content-form">
-      <div class="resize-section">
-        <span  class="resize-section-title">Width</span>
-        <input type="text" class="textfield resize-size-field" name="resize-width"/>
-        <span>px</span>
-      </div>
-      <div class="resize-section">
-        <span  class="resize-section-title">Height</span>
-        <input type="text" class="textfield resize-size-field" name="resize-height"/>
-        <span>px</span>
-      </div>
-      <div class="resize-section">
-        <label>
-          <input type="checkbox" class="resize-ratio-checkbox" value="true"/>
-          <span>Maintain aspect ratio</span>
-        </label>
-      </div>
-      <input type="submit" class="button button-primary resize-button" value="Resize" />
-      <input type="button" class="button resize-cancel-button" value="Cancel" />
-    </form>
-  </div>
 </div>