Enabled inline editing of layer names
This commit is contained in:
Alex
Julian Descottes
parent
0a64d62b84
commit
3804afbeb5
3 changed files with 67 additions and 14 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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_();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue