mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #636 - Allow users to change the grid color
This commit is contained in:
parent
d3a37c74e9
commit
1168870ee0
@ -59,16 +59,56 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-item-grid-size {
|
||||
.settings-item-grid-size,
|
||||
.settings-item-grid-color {
|
||||
display: flex;
|
||||
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,
|
||||
.color-format-select {
|
||||
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 {
|
||||
/* Override the default 10px margin bottom for this panel */
|
||||
margin-bottom: 15px;
|
||||
|
@ -1,6 +1,23 @@
|
||||
(function () {
|
||||
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) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
@ -10,6 +27,7 @@
|
||||
pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.GridApplicationController.prototype.init = function () {
|
||||
// Grid enabled
|
||||
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
|
||||
var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
|
||||
if (isEnabled) {
|
||||
@ -21,6 +39,32 @@
|
||||
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
|
||||
this.sizePicker.init(document.querySelector('.grid-size-container'));
|
||||
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 () {
|
||||
@ -35,4 +79,13 @@
|
||||
ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) {
|
||||
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');
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
@ -34,6 +34,7 @@
|
||||
var serializedFrame = [
|
||||
this.getZoom(),
|
||||
this.getGridWidth(),
|
||||
this.getGridColor(),
|
||||
pskl.UserSettings.get('SEAMLESS_MODE'),
|
||||
pskl.UserSettings.get('SEAMLESS_OPACITY'),
|
||||
offset.x, offset.y,
|
||||
|
@ -138,6 +138,10 @@
|
||||
this.offset.y = y;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.getGridColor = function () {
|
||||
return pskl.UserSettings.get(pskl.UserSettings.GRID_COLOR);
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.setGridWidth = function (value) {
|
||||
this.gridWidth_ = value;
|
||||
};
|
||||
@ -295,15 +299,25 @@
|
||||
// Draw grid.
|
||||
var gridWidth = this.computeGridWidthForDisplay_();
|
||||
if (gridWidth > 0) {
|
||||
var gridColor = this.getGridColor();
|
||||
// Scale out before drawing the grid.
|
||||
displayContext.scale(1 / z, 1 / z);
|
||||
// Clear vertical lines.
|
||||
for (var i = 1 ; i < frame.getWidth() ; i++) {
|
||||
displayContext.clearRect((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
|
||||
|
||||
var drawOrClear;
|
||||
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++) {
|
||||
displayContext.clearRect(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
|
||||
drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2,6 +2,7 @@
|
||||
var ns = $.namespace('pskl');
|
||||
|
||||
ns.UserSettings = {
|
||||
GRID_COLOR : 'GRID_COLOR',
|
||||
GRID_ENABLED : 'GRID_ENABLED',
|
||||
GRID_WIDTH : 'GRID_WIDTH',
|
||||
MAX_FPS : 'MAX_FPS',
|
||||
@ -22,6 +23,7 @@
|
||||
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
|
||||
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
|
||||
KEY_TO_DEFAULT_VALUE_MAP_ : {
|
||||
'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
|
||||
'GRID_ENABLED' : false,
|
||||
'GRID_WIDTH' : 1,
|
||||
'MAX_FPS' : 24,
|
||||
|
@ -19,14 +19,17 @@
|
||||
title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label for="grid-color">Grid color</label>
|
||||
<select id="grid-color" class="grid-color-select">
|
||||
<option value="transparent">transparent</option>
|
||||
<option value="blue">blue</option>
|
||||
<option value="red">red</option>
|
||||
<option value="green">green</option>
|
||||
</select>
|
||||
<div class="settings-item settings-item-grid-color">
|
||||
<label>Grid color</label>
|
||||
<div class="grid-colors-list"></div>
|
||||
<script type="text/template" id="color-list-item-template">
|
||||
<div class="grid-colors-item {{:selected}}"
|
||||
data-color="{{color}}"
|
||||
data-color-index="{{index}}"
|
||||
style="background:{{background}}"
|
||||
title="{{title}}">
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
Loading…
Reference in New Issue
Block a user