From d962217f9048a1cd8f86162fb5973919aa11be70 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 26 Jul 2015 02:00:46 +0200 Subject: [PATCH] Issue #281 : Add app.settings & user pref for layer preview opacity --- src/css/layout.css | 1 - src/css/settings-application.css | 58 +++++++++++++++++++ src/css/settings.css | 37 ------------ src/js/Constants.js | 3 +- src/js/controller/LayersListController.js | 9 ++- .../settings/ApplicationSettingsController.js | 23 ++++++++ src/js/rendering/layer/LayersRenderer.js | 35 +++++++---- src/js/utils/UserSettings.js | 2 + src/templates/settings/application.html | 16 +++-- 9 files changed, 130 insertions(+), 54 deletions(-) diff --git a/src/css/layout.css b/src/css/layout.css index 37645a4..2397c55 100644 --- a/src/css/layout.css +++ b/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; } diff --git a/src/css/settings-application.css b/src/css/settings-application.css index ac998bd..9b49a7b 100644 --- a/src/css/settings-application.css +++ b/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; +} \ No newline at end of file diff --git a/src/css/settings.css b/src/css/settings.css index 3f81be8..0402608 100644 --- a/src/css/settings.css +++ b/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 */ /************************************************************************************************/ diff --git a/src/js/Constants.js b/src/js/Constants.js index 0c2ddd3..34f076e 100644 --- a/src/js/Constants.js +++ b/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, diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js index 24913dc..6707555 100644 --- a/src/js/controller/LayersListController.js +++ b/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); + } }; })(); diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js index 7a1765e..d963e8a 100644 --- a/src/js/controller/settings/ApplicationSettingsController.js +++ b/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); diff --git a/src/js/rendering/layer/LayersRenderer.js b/src/js/rendering/layer/LayersRenderer.js index 6ced266..d7a5688 100644 --- a/src/js/rendering/layer/LayersRenderer.js +++ b/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 upLayers = layers.slice(currentLayerIndex + 1, layers.length); + var belowLayers = layers.slice(0, currentLayerIndex); + 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, upLayers), + this.getHashForLayersAt_(currentFrameIndex, belowLayers), + this.getHashForLayersAt_(currentFrameIndex, aboveLayers), layers.length ].join('-'); @@ -50,14 +55,14 @@ this.clear(); - if (downLayers.length > 0) { - var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers); - this.belowRenderer.render(downFrame); + if (belowLayers.length > 0) { + var belowFrame = this.getFrameForLayersAt_(currentFrameIndex, belowLayers); + this.belowRenderer.render(belowFrame); } - if (upLayers.length > 0) { - var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers); - this.aboveRenderer.render(upFrame); + if (aboveLayers.length > 0) { + var aboveFrame = this.getFrameForLayersAt_(currentFrameIndex, aboveLayers); + 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 = ''; }; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 54617b9..79c177a 100644 --- a/src/js/utils/UserSettings.js +++ b/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 }, diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html index 4c2f682..af487ff 100644 --- a/src/templates/settings/application.html +++ b/src/templates/settings/application.html @@ -1,10 +1,10 @@
-
+
General
- +
@@ -20,8 +20,9 @@
+
- +
+ +
+ + + +
+
@@ -46,7 +54,7 @@
- +