Issue #281 : Add app.settings & user pref for layer preview opacity

src/css/layout.css

@@ -121,7 +121,6 @@
   background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
 }
 
-.layers-canvas,
 .canvas.onion-skin-canvas {
   opacity: 0.2;
 }

src/css/settings-application.css

@@ -1,3 +1,61 @@
 /*******************************/
 /*  Application Setting panel  */
 /*******************************/
+
+.background-picker-wrapper {
+  overflow: hidden;
+  padding: 5px 5px 2px 5px;
+}
+
+.background-picker {
+  cursor: pointer;
+  float: left;
+  height: 35px;
+  width: 35px;
+  background-color: transparent;
+  margin-right: 15px;
+  padding: 1px;
+  position: relative;
+}
+
+.background-picker:after {
+  content: " ";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+}
+
+.background-picker:hover:after {
+  border: #eee 1px solid;
+}
+
+.background-picker.selected:after {
+  border: gold 1px solid;
+}
+
+.layer-opacity-input {
+  margin: 5px;
+  vertical-align: middle;
+  width: 145px;
+}
+
+.layer-opacity-text {
+  height: 31px;
+  display: inline-block;
+  line-height: 30px;
+  width: 40px;
+  border: 1px solid grey;
+  box-sizing: border-box;
+  border-radius: 3px;
+  text-align: center;
+}
+
+.grid-width-select {
+  margin: 5px;
+}
+
+.settings-section--application-general > .settings-item > label {
+  display: block;
+}

src/css/settings.css

@@ -147,43 +147,6 @@
   vertical-align: middle;
 }
 
-/************************************************************************************************/
-/* Application settings                                                                         */
-/************************************************************************************************/
-
-.background-picker-wrapper {
-  overflow: hidden;
-  padding: 5px;
-}
-
-.background-picker {
-  cursor: pointer;
-  float: left;
-  height: 35px;
-  width: 35px;
-  background-color: transparent;
-  margin-right: 15px;
-  padding: 1px;
-  position: relative;
-}
-
-.background-picker:after {
-  content: " ";
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  bottom: -2px;
-  left: -2px;
-}
-
-.background-picker:hover:after {
-  border: #eee 1px solid;
-}
-
-.background-picker.selected:after {
-  border: gold 1px solid;
-}
-
 /************************************************************************************************/
 /* Save panel                                                                   */
 /************************************************************************************************/

src/js/Constants.js

@@ -3,7 +3,8 @@ var Constants = {
   DEFAULT : {
     HEIGHT : 32,
     WIDTH : 32,
-    FPS : 12
+    FPS : 12,
+    LAYER_OPACITY : 0.2
   },
 
   MODEL_VERSION : 2,

src/js/controller/LayersListController.js

@@ -127,6 +127,13 @@
 
   ns.LayersListController.prototype.toggleLayerPreview_ = function () {
     var currentValue = pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);
-    pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, !currentValue);
+    var currentLayerOpacity = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+
+    var showLayerPreview = !currentValue;
+    pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, showLayerPreview);
+
+    if (showLayerPreview && currentLayerOpacity === 0) {
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, Constants.DEFAULT.LAYER_OPACITY);
+    }
   };
 })();

src/js/controller/settings/ApplicationSettingsController.js

@@ -39,6 +39,12 @@
     maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
 
+    // Layer preview opacity
+    var layerOpacityInput = document.querySelector('.layer-opacity-input');
+    layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
+    this.updateLayerOpacityText_(layerOpacityInput.value);
+
     // Form
     this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
     this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
@@ -76,6 +82,23 @@
     }
   };
 
+  ns.ApplicationSettingsController.prototype.onLayerOpacityChange_ = function (evt) {
+    var target = evt.target;
+    var opacity = parseFloat(target.value);
+    if (!isNaN(opacity)) {
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
+      this.updateLayerOpacityText_(opacity);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    }
+  };
+
+  ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
+    var layerOpacityText = document.querySelector('.layer-opacity-text');
+    layerOpacityText.innerHTML = opacity;
+  };
+
   ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
     evt.preventDefault();
     $.publish(Events.CLOSE_SETTINGS_DRAWER);

src/js/rendering/layer/LayersRenderer.js

@@ -18,7 +18,12 @@
 
     this.serializedRendering = '';
 
+    this.stylesheet_ = document.createElement('style');
+    document.head.appendChild(this.stylesheet_);
+    this.updateLayersCanvasOpacity_(pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY));
+
     $.subscribe(Events.PISKEL_RESET, this.flush.bind(this));
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);
@@ -30,8 +35,8 @@
     var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
     var currentLayerIndex = this.piskelController.getCurrentLayerIndex();
 
-    var downLayers = layers.slice(0, currentLayerIndex);
+    var belowLayers = layers.slice(0, currentLayerIndex);
-    var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
+    var aboveLayers = layers.slice(currentLayerIndex + 1, layers.length);
 
     var serializedRendering = [
       this.getZoom(),
@@ -40,8 +45,8 @@
       offset.y,
       size.width,
       size.height,
-      this.getHashForLayersAt_(currentFrameIndex, downLayers),
+      this.getHashForLayersAt_(currentFrameIndex, belowLayers),
-      this.getHashForLayersAt_(currentFrameIndex, upLayers),
+      this.getHashForLayersAt_(currentFrameIndex, aboveLayers),
       layers.length
     ].join('-');
 
@@ -50,14 +55,14 @@
 
       this.clear();
 
-      if (downLayers.length > 0) {
+      if (belowLayers.length > 0) {
-        var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
+        var belowFrame = this.getFrameForLayersAt_(currentFrameIndex, belowLayers);
-        this.belowRenderer.render(downFrame);
+        this.belowRenderer.render(belowFrame);
       }
 
-      if (upLayers.length > 0) {
+      if (aboveLayers.length > 0) {
-        var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
+        var aboveFrame = this.getFrameForLayersAt_(currentFrameIndex, aboveLayers);
-        this.aboveRenderer.render(upFrame);
+        this.aboveRenderer.render(aboveFrame);
       }
     }
   };
@@ -89,6 +94,16 @@
     return hash.join('-');
   };
 
+  ns.LayersRenderer.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
+    if (settingsName == pskl.UserSettings.LAYER_OPACITY) {
+      this.updateLayersCanvasOpacity_(settingsValue);
+    }
+  };
+
+  ns.LayersRenderer.prototype.updateLayersCanvasOpacity_ = function (opacity) {
+    this.stylesheet_.innerHTML = '.layers-canvas { opacity : ' + opacity + '}';
+  };
+
   ns.LayersRenderer.prototype.flush = function () {
     this.serializedRendering = '';
   };

src/js/utils/UserSettings.js

@@ -10,6 +10,7 @@
     TILED_PREVIEW : 'TILED_PREVIEW',
     ONION_SKIN : 'ONION_SKIN',
     LAYER_PREVIEW : 'LAYER_PREVIEW',
+    LAYER_OPACITY : 'LAYER_OPACITY',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
@@ -22,6 +23,7 @@
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'TILED_PREVIEW' : false,
       'ONION_SKIN' : false,
+      'LAYER_OPACITY' : 0.2,
       'LAYER_PREVIEW' : true
     },
 

src/templates/settings/application.html

@@ -1,10 +1,10 @@
 <form action="" method="POST" name="application-settings-form">
-  <div class="settings-section">
+  <div class="settings-section settings-section--application-general">
     <div class="settings-title">
       General
     </div>
     <div class="settings-item">
-      <label>Background:</label>
+      <label>Background</label>
       <div class="background-picker-wrapper">
         <div class="background-picker light-picker-background" data-background="light-canvas-background"
               rel="tooltip" data-placement="bottom" title="light / high contrast">
@@ -20,8 +20,9 @@
         </div>
       </div>
     </div>
+
     <div class="settings-item">
-      <label for="grid-width">Grid :</label>
+      <label for="grid-width">Grid</label>
       <select id="grid-width" class="grid-width-select">
         <option value="0">Disabled</option>
         <option value="1">1px</option>
@@ -30,6 +31,13 @@
         <option value="4">4px</option>
       </select>
     </div>
+
+    <div class="settings-item">
+      <label for="tiled-preview">Layer Preview Opacity</label>
+      <input type="range" class="layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
+      <span class="layer-opacity-text"></span>
+    </div>
+
   </div>
 
   <div class="settings-section">
@@ -46,7 +54,7 @@
 
     <div class="settings-item">
       <label for="tiled-preview">Maximum FPS </label>
-          <input type="text" class="textfield  textfield-small  max-fps-input" name="max-fps"/>
+      <input type="text" class="textfield  textfield-small  max-fps-input" name="max-fps"/>
     </div>
 
     <input type="submit" class="button button-primary" value="Save" />