Issue #338 : Store resize prefs to userpref

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

@@ -17,14 +17,26 @@
     this.widthInput = this.container.querySelector('[name="resize-width"]');
     this.heightInput = this.container.querySelector('[name="resize-height"]');
     this.resizeForm = this.container.querySelector('form');
-    this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
-    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
+
+    var settings = pskl.UserSettings.get('RESIZE_SETTINGS');
 
     var initWidth = this.piskelController.getWidth();
     var initHeight = this.piskelController.getHeight();
     this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, initWidth, initHeight);
 
-    this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
+    var origin = ns.AnchorWidget.ORIGIN[settings.origin] || ns.AnchorWidget.ORIGIN.TOPLEFT;
+    this.anchorWidget.setOrigin(origin);
+
+    this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
+    if (settings.content) {
+      this.resizeContentCheckbox.checked = true;
+      this.anchorWidget.disable();
+    }
+    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
+    if (settings.ratio) {
+      this.maintainRatioCheckbox.checked = true;
+      this.sizeInputWidget.enableSync();
+    }
 
     this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
     this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
@@ -34,6 +46,8 @@
   };
 
   ns.ResizeController.prototype.destroy = function () {
+    this.updateUserPreferences_();
+
     this.anchorWidget.destroy();
     this.sizeInputWidget.destroy();
     this.superclass.destroy.call(this);
@@ -77,6 +91,14 @@
     }
   };
 
+  ns.ResizeController.prototype.updateUserPreferences_ = function () {
+    pskl.UserSettings.set('RESIZE_SETTINGS', {
+      origin : this.anchorWidget.getOrigin(),
+      content : !!this.resizeContentCheckbox.checked,
+      ratio : !!this.maintainRatioCheckbox.checked
+    });
+  };
+
   /***********************/
   /* RESIZE LOGIC */
   /***********************/

src/js/utils/UserSettings.js

@@ -13,6 +13,7 @@
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALING: 'EXPORT_SCALING',
+    RESIZE_SETTINGS: 'RESIZE_SETTINGS',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
@@ -28,7 +29,12 @@
       'ONION_SKIN' : false,
       'LAYER_OPACITY' : 0.2,
       'LAYER_PREVIEW' : true,
-      'EXPORT_SCALING' : 1
+      'EXPORT_SCALING' : 1,
+      'RESIZE_SETTINGS': {
+        content : false,
+        ratio : true,
+        origin : 'TOPLEFT'
+      }
     },
 
     /**

src/js/widgets/SizeInput.js

@@ -5,6 +5,7 @@
     this.heightInput = heightInput;
     this.initWidth = initWidth;
     this.initHeight = initHeight;
+
     this.syncEnabled = true;
     this.lastInput = this.widthInput;
 

src/templates/settings/resize.html

@@ -17,7 +17,7 @@
       </div>
       <div class="resize-section">
         <label>
-          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true" checked="true"/>
+          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
           <span>Maintain aspect ratio</span>
         </label>
       </div>