mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

use SHIFT meta when clicking up down layer to move to top/bottom

Browse Source
This commit is contained in:
Julian Descottes 2017-05-20 17:50:08 +02:00
parent 4a9f7cc74b
commit 9fafa8b7a7
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/js/controller/LayersListController.js
View File

@ -17,7 +17,7 @@
this.rootEl.addEventListener('click', this.onClick_.bind(this)); this.rootEl.addEventListener('click', this.onClick_.bind(this));
this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this)); this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
this.initCreateLayerButton_(); this.createButtonTooltips_();
this.initToggleLayerPreview_(); this.initToggleLayerPreview_();
this.renderLayerList_(); this.renderLayerList_();
@ -46,12 +46,24 @@
} }
}; };
ns.LayersListController.prototype.initCreateLayerButton_ = function () { ns.LayersListController.prototype.createButtonTooltips_ = function () {
var tooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [ var addTooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [
{key : 'shift', description : 'Clone current layer'} {key : 'shift', description : 'Clone current layer'}
]); ]);
var addButton = this.rootEl.querySelector('[data-action="add"]'); var addButton = this.rootEl.querySelector('[data-action="add"]');
addButton.setAttribute('title', tooltip); addButton.setAttribute('title', addTooltip);
var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [
{key : 'shift', description : 'Move to the bottom'}
]);
var moveDownButton = this.rootEl.querySelector('[data-action="down"]');
moveDownButton.setAttribute('title', moveDownTooltip);
var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [
{key : 'shift', description : 'Move to the top'}
]);
var moveUpButton = this.rootEl.querySelector('[data-action="up"]');
moveUpButton.setAttribute('title', moveUpTooltip);
}; };
ns.LayersListController.prototype.initToggleLayerPreview_ = function () { ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
@ -157,9 +169,9 @@
ns.LayersListController.prototype.onButtonClick_ = function (button, evt) { ns.LayersListController.prototype.onButtonClick_ = function (button, evt) {
var action = button.getAttribute('data-action'); var action = button.getAttribute('data-action');
if (action == 'up') { if (action == 'up') {
this.piskelController.moveLayerUp(); this.piskelController.moveLayerUp(evt.shiftKey);
} else if (action == 'down') { } else if (action == 'down') {
this.piskelController.moveLayerDown(); this.piskelController.moveLayerDown(evt.shiftKey);
} else if (action == 'add') { } else if (action == 'add') {
if (evt.shiftKey) { if (evt.shiftKey) {
this.piskelController.duplicateCurrentLayer(); this.piskelController.duplicateCurrentLayer();

8
src/js/controller/piskel/PiskelController.js
View File

@ -258,15 +258,15 @@
return this.piskel.getLayersByName(name).length > 0; return this.piskel.getLayersByName(name).length > 0;
}; };
ns.PiskelController.prototype.moveLayerUp = function () { ns.PiskelController.prototype.moveLayerUp = function (toTop) {
var layer = this.getCurrentLayer(); var layer = this.getCurrentLayer();
this.piskel.moveLayerUp(layer); this.piskel.moveLayerUp(layer, toTop);
this.selectLayer(layer); this.selectLayer(layer);
}; };
ns.PiskelController.prototype.moveLayerDown = function () { ns.PiskelController.prototype.moveLayerDown = function (toBottom) {
var layer = this.getCurrentLayer(); var layer = this.getCurrentLayer();
this.piskel.moveLayerDown(layer); this.piskel.moveLayerDown(layer, toBottom);
this.selectLayer(layer); this.selectLayer(layer);
}; };

26
src/js/model/Piskel.js
View File

@ -82,20 +82,28 @@
this.layers.splice(index, 0, layer); this.layers.splice(index, 0, layer);
}; };
ns.Piskel.prototype.moveLayerUp = function (layer) { ns.Piskel.prototype.moveLayerUp = function (layer, toTop) {
var index = this.layers.indexOf(layer); var index = this.layers.indexOf(layer);
if (index > -1 && index < this.layers.length - 1) { var toIndex = toTop ? this.layers.length - 1 : index + 1;
this.layers[index] = this.layers[index + 1]; this.moveLayer_(index, toIndex);
this.layers[index + 1] = layer;
}
}; };
ns.Piskel.prototype.moveLayerDown = function (layer) { ns.Piskel.prototype.moveLayerDown = function (layer, toBottom) {
var index = this.layers.indexOf(layer); var index = this.layers.indexOf(layer);
if (index > 0) { var toIndex = toBottom ? 0 : index - 1;
this.layers[index] = this.layers[index - 1]; this.moveLayer_(index, toIndex);
this.layers[index - 1] = layer; };
/**
* Move the layer at the provided index to the provided toIndex.
*/
ns.Piskel.prototype.moveLayer_ = function (fromIndex, toIndex) {
if (fromIndex == -1 || toIndex == -1 || fromIndex == toIndex) {
return;
} }
toIndex = pskl.utils.Math.minmax(toIndex, 0, this.layers.length - 1);
var layer = this.layers.splice(fromIndex, 1)[0];
this.layers.splice(toIndex, 0, layer);
}; };
ns.Piskel.prototype.removeLayer = function (layer) { ns.Piskel.prototype.removeLayer = function (layer) {