feature #251 : Set default size in Resize pref panel

src/js/app.js

@@ -18,11 +18,7 @@
       this.shortcutService = new pskl.service.keyboard.ShortcutService();
       this.shortcutService.init();
 
-      var size = {
+      var size = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
-        height : Constants.DEFAULT.HEIGHT,
-        width : Constants.DEFAULT.WIDTH
-      };
-
       var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');
       var piskel = new pskl.model.Piskel(size.width, size.height, descriptor);
 

src/js/controller/preview/PopupPreviewController.js

@@ -75,7 +75,6 @@
 
   ns.PopupPreviewController.prototype.onPopupClosed_ = function () {
     var popup = this.popup;
-    console.log(popup);
     this.popup = null;
   };
 

src/js/controller/settings/resize/DefaultSizeController.js

@@ -0,0 +1,47 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.resize');
+
+  ns.DefaultSizeController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  pskl.utils.inherit(ns.DefaultSizeController, pskl.controller.settings.AbstractSettingController);
+
+  ns.DefaultSizeController.prototype.init = function () {
+    this.container = document.querySelector('.settings-default-size');
+
+    var defaultSize = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
+
+    this.widthInput = this.container.querySelector('[name="default-width"]');
+    this.heightInput = this.container.querySelector('[name="default-height"]');
+
+    this.widthInput.value = defaultSize.width;
+    this.heightInput.value = defaultSize.height;
+
+    this.defaultSizeForm = this.container.querySelector('form');
+    this.addEventListener(this.defaultSizeForm, 'submit', this.onFormSubmit_);
+  };
+
+  ns.DefaultSizeController.prototype.onFormSubmit_ = function (evt) {
+    evt.preventDefault();
+
+    var defaultSize = pskl.UserSettings.get(pskl.UserSettings.DEFAULT_SIZE);
+
+    var width = this.toNumber_(this.widthInput.value, defaultSize.width);
+    var height = this.toNumber_(this.heightInput.value, defaultSize.height);
+
+    pskl.UserSettings.set(pskl.UserSettings.DEFAULT_SIZE, {
+      width : width,
+      height : height
+    });
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+
+  ns.DefaultSizeController.prototype.toNumber_ = function (strValue, defaultValue) {
+    var value = parseInt(strValue, 10);
+    if (value === 0 || isNaN(value)) {
+      value = defaultValue;
+    }
+    return value;
+  };
+})();

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

@@ -8,6 +8,7 @@
 
     var anchorWidgetContainer = this.container.querySelector('.resize-origin-container');
     this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
+    this.defaultSizeController = new ns.DefaultSizeController(piskelController);
   };
 
   pskl.utils.inherit(ns.ResizeController, pskl.controller.settings.AbstractSettingController);
@@ -33,6 +34,8 @@
 
     this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
     this.lastInput = this.widthInput;
+
+    this.defaultSizeController.init();
   };
 
   ns.ResizeController.prototype.destroy = function () {

src/js/utils/UserSettings.js

@@ -4,6 +4,7 @@
   ns.UserSettings = {
     GRID_WIDTH : 'GRID_WIDTH',
     MAX_FPS : 'MAX_FPS',
+    DEFAULT_SIZE : 'DEFAULT_SIZE',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
     TILED_PREVIEW : 'TILED_PREVIEW',
@@ -13,6 +14,10 @@
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
+      'DEFAULT_SIZE' : {
+        width : 32,
+        height : 32
+      },
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'TILED_PREVIEW' : false,

src/piskel-script-list.js

@@ -104,6 +104,7 @@
   "js/controller/settings/exportimage/PngExportController.js",
   "js/controller/settings/resize/AnchorWidget.js",
   "js/controller/settings/resize/ResizeController.js",
+  "js/controller/settings/resize/DefaultSizeController.js",
   "js/controller/settings/SaveController.js",
   "js/controller/settings/ImportController.js",
 

src/templates/settings/resize.html

@@ -1,5 +1,5 @@
 <div class="settings-section">
-  <!-- RESIZE DRAWING AREA -->
+  <!-- RESIZE DRAWING SECTION -->
   <div class="settings-title">
     Resize
   </div>
@@ -44,4 +44,23 @@
       <input type="submit" class="button button-primary resize-button" value="Resize" />
     </form>
   </div>
+  <!-- DEFAULT SIZE SECTION -->
+  <div class="settings-title">
+    Default size
+  </div>
+  <div class="settings-item  settings-default-size">
+    <form action="" method="POST" name="default-size-form">
+      <div class="resize-section">
+        <span  class="resize-section-title">Width</span>
+        <input type="text" class="textfield resize-size-field" name="default-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="default-height"/>
+        <span>px</span>
+      </div>
+      <input type="submit" class="button button-primary resize-button" value="Set default" />
+    </form>
+  </div>
 </div>