Issue #636 - Allow users to change the grid color

This commit is contained in:
Julian Descottes 2017-06-06 08:52:56 +02:00
parent d3a37c74e9
commit 1168870ee0
6 changed files with 127 additions and 14 deletions

View File

@ -59,16 +59,56 @@
text-align: center; text-align: center;
} }
.settings-item-grid-size { .settings-item-grid-size,
.settings-item-grid-color {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.settings-item-grid-size > label,
.settings-item-grid-color > label {
width: 65px;
flex-shrink: 0;
}
.settings-item-grid-size .size-picker-option {
border-color: #888;
}
.settings-item-grid-size .size-picker-option:not(.selected):hover {
border-color: white;
}
.grid-width-select, .grid-width-select,
.color-format-select { .color-format-select {
margin: 5px 5px 0 5px; margin: 5px 5px 0 5px;
} }
.grid-colors-list {
overflow: hidden;
padding: 0 5px;
}
.grid-colors-item {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
border: 2px solid #888;
margin-right: 2px;
margin-bottom: 2px;
box-sizing: border-box;
}
.grid-colors-item:hover {
border-color: white;
}
.grid-colors-item.selected {
border-color: gold;
}
.settings-section-application > .settings-title { .settings-section-application > .settings-title {
/* Override the default 10px margin bottom for this panel */ /* Override the default 10px margin bottom for this panel */
margin-bottom: 15px; margin-bottom: 15px;

View File

@ -1,6 +1,23 @@
(function () { (function () {
var ns = $.namespace('pskl.controller.settings.application'); var ns = $.namespace('pskl.controller.settings.application');
var colorsMap = {
'transparent': Constants.TRANSPARENT_COLOR,
'white': '#FFF1E8',
'light-gray': '#C2C3C7',
'dark-gray': '#5F574F',
'black': '#000000',
'blue': '#29ADFF',
'dark-blue': '#1D2B53',
'green': '#00E436',
'dark-green': '#008751',
'peach': '#FFCCAA',
'pink': '#FF77A8',
'yellow': '#FFEC27',
'orange': '#FFA300',
'red': '#FF004D',
};
ns.GridApplicationController = function (piskelController, applicationController) { ns.GridApplicationController = function (piskelController, applicationController) {
this.piskelController = piskelController; this.piskelController = piskelController;
this.applicationController = applicationController; this.applicationController = applicationController;
@ -10,6 +27,7 @@
pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController); pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
ns.GridApplicationController.prototype.init = function () { ns.GridApplicationController.prototype.init = function () {
// Grid enabled
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED); var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
var enableGridCheckbox = document.querySelector('.enable-grid-checkbox'); var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
if (isEnabled) { if (isEnabled) {
@ -21,6 +39,32 @@
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH); var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
this.sizePicker.init(document.querySelector('.grid-size-container')); this.sizePicker.init(document.querySelector('.grid-size-container'));
this.sizePicker.setSize(gridWidth); this.sizePicker.setSize(gridWidth);
// Grid color
var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
var gridColor = pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
var gridColorSelect = document.querySelector('#grid-color');
var markup = '';
Object.keys(colorsMap).forEach(function (key, index) {
var background = colorsMap[key];
if (key === 'transparent') {
background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZ' +
'F8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)';
}
markup += pskl.utils.Template.replace(colorListItemTemplate, {
color: colorsMap[key],
index: index,
title: key,
background: background,
':selected': gridColor === colorsMap[key]
});
});
this.gridColorList = document.querySelector('.grid-colors-list');
this.gridColorList.innerHTML = markup;
this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
}; };
ns.GridApplicationController.prototype.destroy = function () { ns.GridApplicationController.prototype.destroy = function () {
@ -35,4 +79,13 @@
ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) { ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked); pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
}; };
ns.GridApplicationController.prototype.onGridColorClicked_ = function (evt) {
var color = evt.target.dataset.color;
if (color) {
pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);
this.gridColorList.querySelector('.selected').classList.remove('selected');
evt.target.classList.add('selected');
}
};
})(); })();

View File

@ -34,6 +34,7 @@
var serializedFrame = [ var serializedFrame = [
this.getZoom(), this.getZoom(),
this.getGridWidth(), this.getGridWidth(),
this.getGridColor(),
pskl.UserSettings.get('SEAMLESS_MODE'), pskl.UserSettings.get('SEAMLESS_MODE'),
pskl.UserSettings.get('SEAMLESS_OPACITY'), pskl.UserSettings.get('SEAMLESS_OPACITY'),
offset.x, offset.y, offset.x, offset.y,

View File

@ -138,6 +138,10 @@
this.offset.y = y; this.offset.y = y;
}; };
ns.FrameRenderer.prototype.getGridColor = function () {
return pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
};
ns.FrameRenderer.prototype.setGridWidth = function (value) { ns.FrameRenderer.prototype.setGridWidth = function (value) {
this.gridWidth_ = value; this.gridWidth_ = value;
}; };
@ -295,15 +299,25 @@
// Draw grid. // Draw grid.
var gridWidth = this.computeGridWidthForDisplay_(); var gridWidth = this.computeGridWidthForDisplay_();
if (gridWidth > 0) { if (gridWidth > 0) {
var gridColor = this.getGridColor();
// Scale out before drawing the grid. // Scale out before drawing the grid.
displayContext.scale(1 / z, 1 / z); displayContext.scale(1 / z, 1 / z);
// Clear vertical lines.
for (var i = 1 ; i < frame.getWidth() ; i++) { var drawOrClear;
displayContext.clearRect((i * z) - (gridWidth / 2), 0, gridWidth, h * z); if (gridColor === Constants.TRANSPARENT_COLOR) {
drawOrClear = displayContext.clearRect.bind(displayContext);
} else {
displayContext.fillStyle = gridColor;
drawOrClear = displayContext.fillRect.bind(displayContext);
} }
// Clear horizontal lines.
// Draw or clear vertical lines.
for (var i = 1 ; i < frame.getWidth() ; i++) {
drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
}
// Draw or clear horizontal lines.
for (var j = 1 ; j < frame.getHeight() ; j++) { for (var j = 1 ; j < frame.getHeight() ; j++) {
displayContext.clearRect(0, (j * z) - (gridWidth / 2), w * z, gridWidth); drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
} }
} }

View File

@ -2,6 +2,7 @@
var ns = $.namespace('pskl'); var ns = $.namespace('pskl');
ns.UserSettings = { ns.UserSettings = {
GRID_COLOR : 'GRID_COLOR',
GRID_ENABLED : 'GRID_ENABLED', GRID_ENABLED : 'GRID_ENABLED',
GRID_WIDTH : 'GRID_WIDTH', GRID_WIDTH : 'GRID_WIDTH',
MAX_FPS : 'MAX_FPS', MAX_FPS : 'MAX_FPS',
@ -22,6 +23,7 @@
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE', TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB', APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
KEY_TO_DEFAULT_VALUE_MAP_ : { KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
'GRID_ENABLED' : false, 'GRID_ENABLED' : false,
'GRID_WIDTH' : 1, 'GRID_WIDTH' : 1,
'MAX_FPS' : 24, 'MAX_FPS' : 24,

View File

@ -19,14 +19,17 @@
title="4px" rel="tooltip" data-placement="top" data-size="4"></div> title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
</div> </div>
</div> </div>
<div class="settings-item"> <div class="settings-item settings-item-grid-color">
<label for="grid-color">Grid color</label> <label>Grid color</label>
<select id="grid-color" class="grid-color-select"> <div class="grid-colors-list"></div>
<option value="transparent">transparent</option> <script type="text/template" id="color-list-item-template">
<option value="blue">blue</option> <div class="grid-colors-item {{:selected}}"
<option value="red">red</option> data-color="{{color}}"
<option value="green">green</option> data-color-index="{{index}}"
</select> style="background:{{background}}"
title="{{title}}">
</div>
</script>
</div> </div>
</div> </div>
</script> </script>