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

Enabled inline editing of layer names

Browse Source
This commit is contained in:
Alex 2018-10-08 21:06:27 +02:00 committed by Julian Descottes
parent 0a64d62b84
commit 3804afbeb5
3 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -3,11 +3,16 @@
ns.LayersListController = function (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 () {
this.isRenaming = false;
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.layersListEl = document.querySelector('.layers-list');
this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
@ -75,7 +80,6 @@
ns.LayersListController.prototype.updateButtonStatus_ = function () {
var layers = this.piskelController.getLayers();
var currentLayer = this.piskelController.getCurrentLayer();
var index = this.piskelController.getCurrentLayerIndex();
var isLast = index === 0;
@ -116,11 +120,12 @@
ns.LayersListController.prototype.addLayerItem = function (layer, index) {
var isSelected = this.piskelController.getCurrentLayer() === layer;
var isRenaming = isSelected && this.isRenaming;
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
'layername' : layer.getName(),
'layerindex' : index,
'isselected:current-layer-item' : isSelected,
'opacity': layer.getOpacity()
'opacity' : layer.getOpacity()
});
var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
@ -130,6 +135,24 @@
layerNameEl.setAttribute('title', layer.getName());
layerNameEl.setAttribute('rel', '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';
@ -146,8 +169,13 @@
if (el.classList.contains('button')) {
this.onButtonClick_(el, evt);
} else if (el.classList.contains('layer-name')) {
var currentIndex = this.piskelController.getCurrentLayerIndex();
index = pskl.utils.Dom.getData(el, 'layerIndex');
this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
if (index != currentIndex) {
var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item');
currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
}
} else if (el.classList.contains('layer-item-opacity')) {
index = pskl.utils.Dom.getData(el, 'layerIndex');
var layer = this.piskelController.getLayerAt(parseInt(index, 10));
@ -156,16 +184,31 @@
}
};
ns.LayersListController.prototype.renameCurrentLayer_ = function () {
var layer = this.piskelController.getCurrentLayer();
var name = window.prompt('Please enter the layer name', layer.getName());
if (name) {
var index = this.piskelController.getCurrentLayerIndex();
this.piskelController.renameLayerAt(index, name);
this.renderLayerList_();
ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () {
this.isRenaming = true;
this.renderLayerList_();
};
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();
this.piskelController.renameLayerAt(index, newName);
}
input.removeEventListener('blur', this.onRenameInput_);
input.removeEventListener('keydown', this.onRenameInput_);
this.isRenaming = false;
this.renderLayerList_();
};
ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
var index = this.piskelController.getCurrentLayerIndex();
this.piskelController.mergeDownLayerAt(index);
@ -189,7 +232,7 @@
} else if (action == 'merge') {
this.mergeDownCurrentLayer_();
} else if (action == 'edit') {
this.renameCurrentLayer_();
this.startRenamingCurrentLayer_();
}
};

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

@ -43,4 +43,8 @@
</span>
</li>
</script>
<script type="text/template" id="layer-name-input-template">
<input class="textfield layer-name-input" type="text" autocomplete="off" value="{{layername}}" />
</script>
</div>