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

Fixed bug #947

Browse Source
This commit is contained in:
Julian van der Horst 2020-09-30 20:55:57 +02:00
parent cb41a72b5b
commit 1bb6c1efc7
4 changed files with 76 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/style.css
View File

@ -75,6 +75,15 @@ body {
text-align: left; text-align: left;
} }
.tooltip-wrapper {
display: inline-block;
margin: 0;
}
.tooltip-wrapper .layers-button[disabled] {
pointer-events: none;
}
.tooltip-descriptor { .tooltip-descriptor {
color:#999; color:#999;
} }

12
src/css/toolbox-layers-list.css
View File

@ -44,8 +44,8 @@
.layers-button { .layers-button {
margin: 0; margin: 0;
width: 16.66667%;
float : left; float : left;
width: 120%;
} }
/** /**
@ -66,17 +66,12 @@
cursor: pointer; cursor: pointer;
} }
.layer-item .layer-name, .layer-item .layer-name {
.layer-item .layer-name-input {
padding: 0 0 0 10px; padding: 0 0 0 10px;
flex: 1 auto; flex: 1 auto;
white-space: nowrap; white-space: nowrap;
} }
.layer-item .layer-name-input {
width: 80%;
}
.layer-item .layer-name.overflowing-name { .layer-item .layer-name.overflowing-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -87,8 +82,7 @@
} }
.layer-item-opacity { .layer-item-opacity {
padding: 0 8px 0 8px; padding-right: 8px;
flex: 0 auto;
} }
.current-layer-item, .current-layer-item,

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

@ -1,18 +1,15 @@
(function () { (function () {
var ns = $.namespace('pskl.controller'); var ns = $.namespace('pskl.controller');
var TOGGLE_LAYER_SHORTCUT = 'alt+L';
ns.LayersListController = function (piskelController) { ns.LayersListController = function (piskelController) {
this.piskelController = piskelController; this.piskelController = piskelController;
this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW; this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW ;
this.startRenamingCurrentLayer_ = this.startRenamingCurrentLayer_.bind(this);
this.onRenameInput_ = this.onRenameInput_.bind(this);
}; };
ns.LayersListController.prototype.init = function () { ns.LayersListController.prototype.init = function () {
this.isRenaming = false;
this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template'); this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
this.layerNameInputTemplate_ = pskl.utils.Template.get('layer-name-input-template');
this.rootEl = document.querySelector('.layers-list-container'); this.rootEl = document.querySelector('.layers-list-container');
this.layersListEl = document.querySelector('.layers-list'); this.layersListEl = document.querySelector('.layers-list');
this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview'); this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
@ -27,7 +24,7 @@
this.updateToggleLayerPreview_(); this.updateToggleLayerPreview_();
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this)); $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
}; };
ns.LayersListController.prototype.renderLayerList_ = function () { ns.LayersListController.prototype.renderLayerList_ = function () {
@ -53,20 +50,32 @@
var addTooltip = 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 addDiv = this.rootEl.querySelector('[data-action="add"]').parentElement;
addButton.setAttribute('title', addTooltip); addDiv.setAttribute('title', addTooltip);
var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [ var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [
{key : 'shift', description : 'Move to the bottom'} {key : 'shift', description : 'Move to the bottom'}
]); ]);
var moveDownButton = this.rootEl.querySelector('[data-action="down"]'); var moveDownDiv = this.rootEl.querySelector('[data-action="down"]').parentElement;
moveDownButton.setAttribute('title', moveDownTooltip); moveDownDiv.setAttribute('title', moveDownTooltip);
var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [ var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [
{key : 'shift', description : 'Move to the top'} {key : 'shift', description : 'Move to the top'}
]); ]);
var moveUpButton = this.rootEl.querySelector('[data-action="up"]'); var moveUpDiv = this.rootEl.querySelector('[data-action="up"]').parentElement;
moveUpButton.setAttribute('title', moveUpTooltip); moveUpDiv.setAttribute('title', moveUpTooltip);
var editLayerTooltip = pskl.utils.TooltipFormatter.format('Edit layer name', null,[]);
var editLayerDiv = this.rootEl.querySelector('[data-action="edit"]').parentElement;
editLayerDiv.setAttribute('title', editLayerTooltip);
var mergeLayerTooltip = pskl.utils.TooltipFormatter.format('Merge with layer below', null,[]);
var mergeLayerDiv = this.rootEl.querySelector('[data-action="merge"]').parentElement;
mergeLayerDiv.setAttribute('title', mergeLayerTooltip);
var deleteLayerTooltip = pskl.utils.TooltipFormatter.format('Delete selected layer', null,[]);
var deleteLayerDiv = this.rootEl.querySelector('[data-action="delete"]').parentElement;
deleteLayerDiv.setAttribute('title', deleteLayerTooltip);
}; };
ns.LayersListController.prototype.initToggleLayerPreview_ = function () { ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
@ -80,6 +89,7 @@
ns.LayersListController.prototype.updateButtonStatus_ = function () { ns.LayersListController.prototype.updateButtonStatus_ = function () {
var layers = this.piskelController.getLayers(); var layers = this.piskelController.getLayers();
var currentLayer = this.piskelController.getCurrentLayer();
var index = this.piskelController.getCurrentLayerIndex(); var index = this.piskelController.getCurrentLayerIndex();
var isLast = index === 0; var isLast = index === 0;
@ -113,53 +123,26 @@
}; };
ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) { ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
if (name == pskl.UserSettings.LAYER_PREVIEW) { if (name === pskl.UserSettings.LAYER_PREVIEW) {
this.updateToggleLayerPreview_(); this.updateToggleLayerPreview_();
} }
}; };
ns.LayersListController.prototype.addLayerItem = function (layer, index) { ns.LayersListController.prototype.addLayerItem = function (layer, index) {
var isSelected = this.piskelController.getCurrentLayer() === layer; var isSelected = this.piskelController.getCurrentLayer() === layer;
var isRenaming = isSelected && this.isRenaming;
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, { var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
'layername' : layer.getName(), 'layername' : layer.getName(),
'layerindex' : index, 'layerindex' : index,
'isselected:current-layer-item' : isSelected, 'isselected:current-layer-item' : isSelected,
'opacity' : layer.getOpacity() 'opacity': layer.getOpacity()
}); });
var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml); var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild); this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
if (layerItem.offsetWidth < layerItem.scrollWidth) { if (layerItem.offsetWidth < layerItem.scrollWidth) {
var layerNameEl = layerItem.querySelector('.layer-name'); $(layerItem).find('.layer-name')
layerNameEl.classList.add('overflowing-name'); .addClass('overflowing-name')
layerNameEl.setAttribute('title', layer.getName()); .attr('title', layer.getName())
layerNameEl.setAttribute('rel', 'tooltip'); .tooltip();
}
if (isSelected) {
layerItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
layerItem.addEventListener('dblclick', this.startRenamingCurrentLayer_);
}
if (isRenaming) {
var layerNameInputHtml = pskl.utils.Template.replace(this.layerNameInputTemplate_, {
'layername' : layer.getName()
});
var layerNameInput = pskl.utils.Template.createFromHTML(layerNameInputHtml);
var layerNameEl = layerItem.querySelector('.layer-name');
layerItem.replaceChild(layerNameInput, layerNameEl);
layerNameInput.removeEventListener('blur', this.onRenameInput_);
layerNameInput.removeEventListener('keydown', this.onRenameInput_);
layerNameInput.addEventListener('blur', this.onRenameInput_);
layerNameInput.addEventListener('keydown', this.onRenameInput_);
layerNameInput.focus();
layerNameInput.select();
}
var opacity = layer.getOpacity();
if (opacity == 1) {
layerItem.querySelector('.layer-item-opacity').style.color = '#ffd700';
} else if (opacity == 0) {
layerItem.querySelector('.layer-item-opacity').style.color = '#969696';
} else {
layerItem.querySelector('.layer-item-opacity').style.color = '#ffffff';
} }
}; };
@ -169,13 +152,8 @@
if (el.classList.contains('button')) { if (el.classList.contains('button')) {
this.onButtonClick_(el, evt); this.onButtonClick_(el, evt);
} else if (el.classList.contains('layer-name')) { } else if (el.classList.contains('layer-name')) {
var currentIndex = this.piskelController.getCurrentLayerIndex();
index = pskl.utils.Dom.getData(el, 'layerIndex'); index = pskl.utils.Dom.getData(el, 'layerIndex');
if (index != currentIndex) {
var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item');
currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
this.piskelController.setCurrentLayerIndex(parseInt(index, 10)); this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
}
} else if (el.classList.contains('layer-item-opacity')) { } else if (el.classList.contains('layer-item-opacity')) {
index = pskl.utils.Dom.getData(el, 'layerIndex'); index = pskl.utils.Dom.getData(el, 'layerIndex');
var layer = this.piskelController.getLayerAt(parseInt(index, 10)); var layer = this.piskelController.getLayerAt(parseInt(index, 10));
@ -184,29 +162,14 @@
} }
}; };
ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () { ns.LayersListController.prototype.renameCurrentLayer_ = function () {
this.isRenaming = true; var layer = this.piskelController.getCurrentLayer();
this.renderLayerList_(); var name = window.prompt('Please enter the layer name', layer.getName());
}; if (name) {
ns.LayersListController.prototype.onRenameInput_ = function (evt) {
var el = evt.target || evt.srcElement;
if (evt.key === 'Enter') {
this.finishRenamingCurrentLayer_(el, el.value);
} else if (!evt.key || evt.key === 'Escape') {
this.finishRenamingCurrentLayer_(el);
}
};
ns.LayersListController.prototype.finishRenamingCurrentLayer_ = function (input, newName) {
if (newName) {
var index = this.piskelController.getCurrentLayerIndex(); var index = this.piskelController.getCurrentLayerIndex();
this.piskelController.renameLayerAt(index, newName); this.piskelController.renameLayerAt(index, name);
}
input.removeEventListener('blur', this.onRenameInput_);
input.removeEventListener('keydown', this.onRenameInput_);
this.isRenaming = false;
this.renderLayerList_(); this.renderLayerList_();
}
}; };
ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () { ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
@ -217,22 +180,22 @@
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(evt.shiftKey); this.piskelController.moveLayerUp(evt.shiftKey);
} else if (action == 'down') { } else if (action === 'down') {
this.piskelController.moveLayerDown(evt.shiftKey); 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();
} else { } else {
this.piskelController.createLayer(); this.piskelController.createLayer();
} }
} else if (action == 'delete') { } else if (action === 'delete') {
this.piskelController.removeCurrentLayer(); this.piskelController.removeCurrentLayer();
} else if (action == 'merge') { } else if (action === 'merge') {
this.mergeDownCurrentLayer_(); this.mergeDownCurrentLayer_();
} else if (action == 'edit') { } else if (action === 'edit') {
this.startRenamingCurrentLayer_(); this.renameCurrentLayer_();
} }
}; };

39
src/templates/layers-list.html
View File

@ -5,29 +5,36 @@
class="layers-toggle-preview piskel-icon-eye"></div> class="layers-toggle-preview piskel-icon-eye"></div>
</h3> </h3>
<div class="toolbox-buttons"> <div class="toolbox-buttons">
<div class="tooltip-wrapper" data-toggle="tooltip" rel="tooltip" data-html="true" data-placement="top">
<button data-action="add" <button data-action="add"
class="button layers-button piskel-icon-plus" class="button layers-button piskel-icon-plus"></button>
rel="tooltip" data-placement="top" ></button> </div>
<div class="tooltip-wrapper" data-toggle="tooltip" rel="tooltip" data-html="true" data-placement="top">
<button data-action="up" <button data-action="up"
class="button layers-button piskel-icon-arrow-up-fat" class="button layers-button piskel-icon-arrow-up-fat"></button>
title="Move layer up" rel="tooltip" data-placement="top" ></button> </div>
<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="down" <button data-action="down"
class="button layers-button piskel-icon-arrow-down-fat" class="button layers-button piskel-icon-arrow-down-fat"></button>
title="Move layer down" rel="tooltip" data-placement="top" ></button> </div>
<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="edit" <button data-action="edit"
class="button layers-button piskel-icon-pencil" class="button layers-button piskel-icon-pencil"></button>
title="Edit layer name" rel="tooltip" data-placement="top"></button> </div>
<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="merge" <button data-action="merge"
class="button layers-button piskel-icon-merge" class="button layers-button piskel-icon-merge"></button>
title="Merge with layer below" rel="tooltip" data-placement="top" ></button> </div>
<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="delete" <button data-action="delete"
class="button layers-button piskel-icon-close" class="button layers-button piskel-icon-close"></button>
title="Delete selected layer" rel="tooltip" data-placement="top" ></button> </div>
</div> </div>
@ -38,13 +45,9 @@
data-layer-index="{{layerindex}}"> data-layer-index="{{layerindex}}">
<span class="layer-name" data-placement="top">{{layername}}</span> <span class="layer-name" data-placement="top">{{layername}}</span>
<span class="layer-item-opacity" <span class="layer-item-opacity"
title="Layer opacity ({{opacity}})" rel="tooltip" data-placement="top"> title="Layer opacity" rel="tooltip" data-placement="top">
&#945; {{opacity}}&#945;
</span> </span>
</li> </li>
</script> </script>
<script type="text/template" id="layer-name-input-template">
<input class="textfield layer-name-input" type="text" autocomplete="off" value="{{layername}}" />
</script>
</div> </div>