diff --git a/src/css/settings-application.css b/src/css/settings-application.css
index 99ad9dea..fd28190f 100644
--- a/src/css/settings-application.css
+++ b/src/css/settings-application.css
@@ -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;
}
diff --git a/src/css/widgets-spacing-picker.css b/src/css/widgets-spacing-picker.css
new file mode 100644
index 00000000..cad713a6
--- /dev/null
+++ b/src/css/widgets-spacing-picker.css
@@ -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;
+}
diff --git a/src/js/controller/settings/preferences/GridPreferencesController.js b/src/js/controller/settings/preferences/GridPreferencesController.js
index 4a194eec..bd2e99a5 100644
--- a/src/js/controller/settings/preferences/GridPreferencesController.js
+++ b/src/js/controller/settings/preferences/GridPreferencesController.js
@@ -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);
};
diff --git a/src/js/rendering/frame/CachedFrameRenderer.js b/src/js/rendering/frame/CachedFrameRenderer.js
index bd0ccbcb..60c5d515 100644
--- a/src/js/rendering/frame/CachedFrameRenderer.js
+++ b/src/js/rendering/frame/CachedFrameRenderer.js
@@ -34,6 +34,7 @@
var serializedFrame = [
this.getZoom(),
this.getGridWidth(),
+ this.getGridSpacing(),
this.getGridColor(),
pskl.UserSettings.get('SEAMLESS_MODE'),
pskl.UserSettings.get('SEAMLESS_OPACITY'),
diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js
index aa3441bf..8aa04b33 100644
--- a/src/js/rendering/frame/FrameRenderer.js
+++ b/src/js/rendering/frame/FrameRenderer.js
@@ -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);
+ }
}
}
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index 0dcb4b44..827fcd50 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -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);
+ }
};
})();
diff --git a/src/js/widgets/SpacingPicker.js b/src/js/widgets/SpacingPicker.js
new file mode 100644
index 00000000..80590421
--- /dev/null
+++ b/src/js/widgets/SpacingPicker.js
@@ -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);
+ }
+ };
+})();
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index 8c286b35..6ba971df 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -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",
diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js
index 12d3c0e7..bfeaa776 100644
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -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"
-];
\ No newline at end of file
+];
diff --git a/src/templates/settings/preferences/grid.html b/src/templates/settings/preferences/grid.html
index b2e05ce9..f17c3c8b 100644
--- a/src/templates/settings/preferences/grid.html
+++ b/src/templates/settings/preferences/grid.html
@@ -19,6 +19,25 @@
title="4px" rel="tooltip" data-placement="top" data-size="4">
+
@@ -31,4 +50,4 @@
-
\ No newline at end of file
+