Merge branch 'master' into feature-export-to-file

src/js/controller/AnimatedPreviewController.js

@@ -16,14 +16,43 @@
     var frame = this.piskelController.getCurrentFrame();
 
     this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
-    this.updateZoom_();
-    $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
-    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
-  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
+  ns.AnimatedPreviewController.prototype.init = function () {
+    // the oninput event won't work on IE10 unfortunately, but at least will provide a
+    // consistent behavior across all other browsers that support the input type range
+    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
+
+    this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
+    this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
+
+    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+
+    $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+
     this.updateZoom_();
-    this.updateContainerDimensions_();
+    this.updateOnionSkinPreview_();
+  };
+
+  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.ONION_SKIN) {
+      this.updateOnionSkinPreview_();
+    } else {
+      this.updateZoom_();
+      this.updateContainerDimensions_();
+    }
+  };
+
+  ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
+    var enabledClassname = 'preview-toggle-onion-skin-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
+      this.toggleOnionSkinEl.classList.add(enabledClassname);
+    } else {
+      this.toggleOnionSkinEl.classList.remove(enabledClassname);
+    }
   };
 
   ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
@@ -47,14 +76,6 @@
     };
   };
 
-  ns.AnimatedPreviewController.prototype.init = function () {
-    // the oninput event won't work on IE10 unfortunately, but at least will provide a
-    // consistent behavior across all other browsers that support the input type range
-    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
-    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
-    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
-  };
-
   ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
     this.setFPS(parseInt($("#preview-fps")[0].value, 10));
   };
@@ -122,4 +143,9 @@
     containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
     containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
   };
+
+  ns.AnimatedPreviewController.prototype.toggleOnionSkin_ = function () {
+    var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
+    pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
+  };
 })();

src/js/controller/DrawingController.js

@@ -113,7 +113,7 @@
   ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
     if(settingsName == pskl.UserSettings.SHOW_GRID) {
       console.warn('DrawingController:onUserSettingsChange_ not implemented !');
-    } else if (settingsName == pskl.UserSettings.OVERLAY) {
+    } else if (settingsName == pskl.UserSettings.ONION_SKIN || settingsName == pskl.UserSettings.LAYER_PREVIEW) {
       this.onionSkinRenderer.clear();
       this.onionSkinRenderer.flush();
       this.layersRenderer.clear();
@@ -319,10 +319,11 @@
       this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
     }
 
-    var overlaySetting = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
-    if (overlaySetting === Constants.OVERLAY_ONION_SKIN) {
+    if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
       this.onionSkinRenderer.render();
-    } else if (overlaySetting === Constants.OVERLAY_LAYER_PREVIEW) {
+    }
+
+    if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
       this.layersRenderer.render();
     }
 

src/js/controller/LayersListController.js

@@ -7,14 +7,21 @@
 
   ns.LayersListController.prototype.init = function () {
     this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
-    this.rootEl = document.querySelectorAll('.layers-list-container')[0];
-    this.layersListEl = document.querySelectorAll('.layers-list')[0];
+    this.rootEl = document.querySelector('.layers-list-container');
+    this.layersListEl = document.querySelector('.layers-list');
+    this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
 
     this.rootEl.addEventListener('click', this.onClick_.bind(this));
+    this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
 
     $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
 
+    pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
+
     this.renderLayerList_();
+    this.updateToggleLayerPreview_();
+
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   ns.LayersListController.prototype.renderLayerList_ = function () {
@@ -23,6 +30,21 @@
     layers.forEach(this.addLayerItem.bind(this));
   };
 
+  ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
+    var enabledClassname = 'layers-toggle-preview-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
+      this.toggleLayerPreviewEl.classList.add(enabledClassname);
+    } else {
+      this.toggleLayerPreviewEl.classList.remove(enabledClassname);
+    }
+  };
+
+  ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.LAYER_PREVIEW) {
+      this.updateToggleLayerPreview_();
+    }
+  };
+
   ns.LayersListController.prototype.addLayerItem = function (layer, index) {
     var isSelected = this.piskelController.getCurrentLayer() === layer;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
@@ -69,4 +91,9 @@
       this.piskelController.removeCurrentLayer();
     }
   };
+
+  ns.LayersListController.prototype.toggleLayerPreview_ = function () {
+    var currentValue = pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);
+    pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, !currentValue);
+  };
 })();

src/js/controller/settings/ApplicationSettingsController.js

@@ -18,10 +18,6 @@
     $('#grid-width').val(gridWidth);
     $('#grid-width').change(this.onGridWidthChange.bind(this));
 
-    var overlay = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
-    $('#overlay').val(overlay);
-    $('#overlay').change(this.onOverlayChange.bind(this));
-
     // Handle canvas background changes:
     $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
   };
@@ -31,11 +27,6 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
   };
 
-  ns.ApplicationSettingsController.prototype.onOverlayChange = function (evt) {
-    var overlay = $('#overlay').val();
-    pskl.UserSettings.set(pskl.UserSettings.OVERLAY, overlay);
-  };
-
   ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
     var target = $(evt.target).closest('.background-picker');
     if (target.length) {

src/js/drawingtools/SimplePen.js

@@ -22,13 +22,14 @@
    * @override
    */
   ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
+    this.previousCol = col;
+    this.previousRow = row;
+
     overlay.setPixel(col, row, color);
 
     if (color === Constants.TRANSPARENT_COLOR) {
       frame.setPixel(col, row, color);
     }
-    this.previousCol = col;
-    this.previousRow = row;
     this.pixels.push({
       col : col,
       row : row,

src/js/drawingtools/VerticalMirrorPen.js

@@ -5,22 +5,19 @@
     this.superclass.constructor.call(this);
 
     this.toolId = "tool-vertical-mirror-pen";
-    this.helpText = "vertical mirror pen tool";
-
-    this.swap = null;
+    this.helpText = "Vertical Mirror pen tool (hold CTRL for Horizontal, hold SHIFT for both)";
   };
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
 
-
-  ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
-    this.swap = this.previousCol;
-    this.previousCol = this.mirroredPreviousCol;
+  ns.VerticalMirrorPen.prototype.backupPreviousPositions_ = function () {
+    this.backupPreviousCol = this.previousCol;
+    this.backupPreviousRow = this.previousRow;
   };
 
-  ns.VerticalMirrorPen.prototype.unsetMirrorContext = function() {
-    this.mirroredPreviousCol = this.previousCol;
-    this.previousCol = this.swap;
+  ns.VerticalMirrorPen.prototype.restorePreviousPositions_ = function () {
+    this.previousCol = this.backupPreviousCol;
+    this.previousRow = this.backupPreviousRow;
   };
 
   /**
@@ -28,19 +25,32 @@
    */
   ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
+    this.backupPreviousPositions_();
 
     var mirroredCol = this.getSymmetricCol_(col, frame);
-    this.mirroredPreviousCol = mirroredCol;
+    var mirroredRow = this.getSymmetricRow_(row, frame);
 
-    this.setMirrorContext();
-    this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
-    this.unsetMirrorContext();
+    if (!event.ctrlKey) {
+      this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
+    }
+
+    if (event.shiftKey || event.ctrlKey) {
+      this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
+    }
+
+    if (event.shiftKey) {
+      this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay);
+    }
+
+
+    this.restorePreviousPositions_();
   };
 
-  /**
-   * @private
-   */
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
     return frame.getWidth() - col - 1;
   };
+
+  ns.VerticalMirrorPen.prototype.getSymmetricRow_ = function(row, frame) {
+    return frame.getHeight() - row - 1;
+  };
 })();

src/js/service/keyboard/CheatsheetService.js

@@ -103,7 +103,9 @@
       this.toDescriptor_('N', 'Create new frame'),
       this.toDescriptor_('shift + N', 'Duplicate selected frame'),
       this.toDescriptor_('shift + ?', 'Open/Close this popup'),
-      this.toDescriptor_('alt + P', 'Open the Palette Manager')
+      this.toDescriptor_('alt + P', 'Open the Palette Manager'),
+      this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
+      this.toDescriptor_('alt + L', 'Toggle Layer Preview')
     ];
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');

src/js/utils/UserSettings.js

@@ -6,14 +6,16 @@
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
     TILED_PREVIEW : 'TILED_PREVIEW',
-    OVERLAY : 'OVERLAY',
+    ONION_SKIN : 'ONION_SKIN',
+    LAYER_PREVIEW : 'LAYER_PREVIEW',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'TILED_PREVIEW' : false,
-      'OVERLAY' : Constants.OVERLAY_ONION_SKIN
+      'ONION_SKIN' : false,
+      'LAYER_PREVIEW' : true
     },
 
     /**
@@ -28,8 +30,12 @@
     get : function (key) {
       this.checkKeyValidity_(key);
       if (!(key in this.cache_)) {
-        this.cache_[key] =
-          this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+        var storedValue = this.readFromLocalStorage_(key);
+        if (typeof storedValue !== 'undefined' && storedValue !== null) {
+          this.cache_[key] = storedValue;
+        } else {
+          this.cache_[key] = this.readFromDefaults_(key);
+        }
       }
       return this.cache_[key];
     },