Add a Grid Spacing option to the GridSettings

Fixes #774
This commit is contained in:
Craig Gilchrist 2018-02-15 21:55:12 +00:00 committed by Julian Descottes
parent 7c215ebcbe
commit 5c7070b01b
10 changed files with 198 additions and 7 deletions

View File

@ -60,13 +60,15 @@
}
.settings-item-grid-size,
.settings-item-grid-color {
.settings-item-grid-spacing,
.settings-item-grid-color,
display: flex;
align-items: center;
}
.settings-item-grid-size > label,
.settings-item-grid-color > label {
.settings-item-grid-spacing > label,
.settings-item-grid-color > label,
width: 65px;
flex-shrink: 0;
}

View File

@ -0,0 +1,70 @@
/***********************/
/* spacing PICKER WIDGET */
/***********************/
.spacing-picker-container {
overflow: hidden;
padding: 5px 5px;
}
.spacing-picker-option {
float: left;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-right: 2px;
border-style: solid;
border-width: 2px;
border-color: #444;
cursor: pointer;
}
.spacing-picker-option[data-spacing='1'] {
padding: 7px;
}
.spacing-picker-option[data-spacing='2'] {
padding: 6px;
}
.spacing-picker-option[data-spacing='4'] {
padding: 5px;
}
.spacing-picker-option[data-spacing='8'] {
padding: 4px;
}
.spacing-picker-option[data-spacing='16'] {
padding: 3px;
}
.spacing-picker-option[data-spacing='32'] {
padding: 2px;
}
.spacing-picker-option[data-spacing='64'] {
padding: 1px;
}
.spacing-picker-option:before {
content: '';
width: 100%;
height: 100%;
background-color: white;
display: block;
text-align: center;
line-height: 12px;
font-spacing: 90%;
}
.spacing-picker-option:hover {
border-color: #888;
}
.spacing-picker-option.selected:before {
background-color: var(--highlight-color);
}
.spacing-picker-option.selected {
border-color: var(--highlight-color);
}
.spacing-picker-option.labeled:before {
content: attr(real-spacing);
color: black;
}

View File

@ -22,6 +22,7 @@
this.piskelController = piskelController;
this.preferencesController = preferencesController;
this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
this.spacingPicker = new pskl.widgets.SpacingPicker(this.onSpacingPickerChanged_.bind(this));
};
pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
@ -40,6 +41,11 @@
this.sizePicker.init(document.querySelector('.grid-size-container'));
this.sizePicker.setSize(gridWidth);
//Grid Spacing
var gridSpacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
this.spacingPicker.init(document.querySelector('.grid-spacing-container'));
this.spacingPicker.setSpacing(gridSpacing);
// Grid color
var colorListItemTemplate = pskl.utils.Template.get('color-list-item-template');
@ -68,6 +74,7 @@
ns.GridPreferencesController.prototype.destroy = function () {
this.sizePicker.destroy();
this.spacingPicker.destroy();
this.superclass.destroy.call(this);
};
@ -75,6 +82,10 @@
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
};
ns.GridPreferencesController.prototype.onSpacingPickerChanged_ = function (size) {
pskl.UserSettings.set(pskl.UserSettings.GRID_SPACING, size);
};
ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
};

View File

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

View File

@ -56,6 +56,7 @@
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
this.setGridWidth(this.getUserGridWidth_());
this.setGridSpacing(this.getUserGridSpacing_());
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
};
@ -146,6 +147,10 @@
this.gridWidth_ = value;
};
ns.FrameRenderer.prototype.setGridSpacing = function (value) {
this.gridSpacing_ = value;
};
ns.FrameRenderer.prototype.getGridWidth = function () {
if (!this.supportGridRendering) {
return 0;
@ -154,6 +159,14 @@
return this.gridWidth_;
};
ns.FrameRenderer.prototype.getGridSpacing = function () {
if (!this.supportGridRendering) {
return 0;
}
return this.gridSpacing_;
};
/**
* Compute a grid width value best suited to the current display context,
* particularly for the current zoom level
@ -185,8 +198,11 @@
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
var settings = pskl.UserSettings;
if (settingName == settings.GRID_WIDTH || settingName == settings.GRID_ENABLED) {
if (settingName == settings.GRID_WIDTH ||
settingName == settings.GRID_SPACING ||
settingName == settings.GRID_ENABLED) {
this.setGridWidth(this.getUserGridWidth_());
this.setGridSpacing(this.getUserGridSpacing_());
}
};
@ -196,6 +212,12 @@
return gridEnabled ? width : 0;
};
ns.FrameRenderer.prototype.getUserGridSpacing_ = function () {
var gridEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
var spacing = pskl.UserSettings.get(pskl.UserSettings.GRID_SPACING);
return gridEnabled ? spacing : 0;
};
/**
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
* frame) into a sprite coordinate in column and row.
@ -298,12 +320,14 @@
// Draw grid.
var gridWidth = this.computeGridWidthForDisplay_();
var gridSpacing = this.getGridSpacing();
if (gridWidth > 0) {
var gridColor = this.getGridColor();
// Scale out before drawing the grid.
displayContext.scale(1 / z, 1 / z);
var drawOrClear;
var drawing = true;
if (gridColor === Constants.TRANSPARENT_COLOR) {
drawOrClear = displayContext.clearRect.bind(displayContext);
} else {
@ -313,11 +337,15 @@
// Draw or clear vertical lines.
for (var i = 1 ; i < frame.getWidth() ; i++) {
drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
if (i % gridSpacing == 0) {
drawOrClear((i * z) - (gridWidth / 2), 0, gridWidth, h * z);
}
}
// Draw or clear horizontal lines.
for (var j = 1 ; j < frame.getHeight() ; j++) {
drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
if (j % gridSpacing == 0) {
drawOrClear(0, (j * z) - (gridWidth / 2), w * z, gridWidth);
}
}
}

View File

@ -5,6 +5,7 @@
GRID_COLOR : 'GRID_COLOR',
GRID_ENABLED : 'GRID_ENABLED',
GRID_WIDTH : 'GRID_WIDTH',
GRID_SPACING : 'GRID_SPACING',
MAX_FPS : 'MAX_FPS',
DEFAULT_SIZE : 'DEFAULT_SIZE',
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
@ -27,6 +28,7 @@
'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
'GRID_ENABLED' : false,
'GRID_WIDTH' : 1,
'GRID_SPACING' : 1,
'MAX_FPS' : 24,
'DEFAULT_SIZE' : {
width : Constants.DEFAULT.WIDTH,
@ -139,5 +141,10 @@
if (storedGridWidth === 0) {
ns.UserSettings.writeToLocalStorage_('GRID_WIDTH', 1);
}
var storedGridSpacing = ns.UserSettings.readFromLocalStorage_('GRID_SPACING');
if (storedGridSpacing === 0) {
ns.UserSettings.writeToLocalStorage_('GRID_SPACING', 1);
}
};
})();

View File

@ -0,0 +1,51 @@
(function () {
var ns = $.namespace('pskl.widgets');
ns.SpacingPicker = function (onChange) {
this.onChange = onChange;
};
ns.SpacingPicker.prototype.init = function (container) {
this.container = container;
pskl.utils.Event.addEventListener(this.container, 'click', this.onSpacingOptionClick_, this);
};
ns.SpacingPicker.prototype.destroy = function () {
pskl.utils.Event.removeAllEventListeners(this);
};
ns.SpacingPicker.prototype.getSpacing = function () {
var selectedOption = this.container.querySelector('.selected');
return selectedOption ? selectedOption.dataset.spacing : null;
};
ns.SpacingPicker.prototype.setSpacing = function (spacing) {
if (this.getSpacing() === spacing) {
return;
}
pskl.utils.Dom.removeClass('labeled', this.container);
pskl.utils.Dom.removeClass('selected', this.container);
var selectedOption;
if (spacing <= 64) {
selectedOption = this.container.querySelector('[data-spacing="' + spacing + '"]');
} else {
selectedOption = this.container.querySelector('[data-spacing="4"]');
selectedOption.classList.add('labeled');
selectedOption.setAttribute('real-spacing', spacing);
}
if (selectedOption) {
selectedOption.classList.add('selected');
}
};
ns.SpacingPicker.prototype.onSpacingOptionClick_ = function (e) {
var spacing = e.target.dataset.spacing;
console.log('clicked');
if (!isNaN(spacing)) {
spacing = parseInt(spacing, 10);
this.onChange(spacing);
this.setSpacing(spacing);
}
};
})();

View File

@ -171,6 +171,7 @@
"js/widgets/HslRgbColorPicker.js",
"js/widgets/SizeInput.js",
"js/widgets/SizePicker.js",
"js/widgets/SpacingPicker.js",
"js/widgets/SynchronizedInputs.js",
"js/widgets/Tabs.js",
"js/widgets/Wizard.js",

View File

@ -40,6 +40,7 @@
"css/widgets-anchor.css",
"css/widgets-frame-picker.css",
"css/widgets-size-picker.css",
"css/widgets-spacing-picker.css",
"css/widgets-tabs.css",
"css/widgets-wizard.css"
];

View File

@ -19,6 +19,25 @@
title="4px" rel="tooltip" data-placement="top" data-size="4"></div>
</div>
</div>
<div class="settings-item settings-item-grid-spacing">
<label>Grid Spacing</label>
<div class="grid-spacing-container spacing-picker-container">
<div class="spacing-picker-option"
title="1px" rel="tooltip" data-placement="top" data-spacing="1"></div>
<div class="spacing-picker-option"
title="2px" rel="tooltip" data-placement="top" data-spacing="2"></div>
<div class="spacing-picker-option"
title="4px" rel="tooltip" data-placement="top" data-spacing="4"></div>
<div class="spacing-picker-option"
title="8px" rel="tooltip" data-placement="top" data-spacing="8"></div>
<div class="spacing-picker-option"
title="16px" rel="tooltip" data-placement="top" data-spacing="16"></div>
<div class="spacing-picker-option"
title="32px" rel="tooltip" data-placement="top" data-spacing="32"></div>
<div class="spacing-picker-option"
title="32px" rel="tooltip" data-placement="top" data-spacing="64"></div>
</div>
</div>
<div class="settings-item settings-item-grid-color">
<label>Grid color</label>
<div class="grid-colors-list"></div>