wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
jdescottes 2015-07-26 02:00:46 +02:00
parent 9800d85cb7
commit d962217f90
9 changed files with 130 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/css/layout.css
View file

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

58
src/css/settings-application.css
View file

@ -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;
}

37
src/css/settings.css
View file

@ -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 */
/************************************************************************************************/

3
src/js/Constants.js
View file

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

9
src/js/controller/LayersListController.js
View file

@ -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);
}
};
})();

23
src/js/controller/settings/ApplicationSettingsController.js
View file

@ -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);

35
src/js/rendering/layer/LayersRenderer.js
View file

@ -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 = '';
};

2
src/js/utils/UserSettings.js
View file

@ -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
},

14
src/templates/settings/application.html
View file

@ -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">