364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
/* eslint-disable no-alert */
|
|
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
|
|
|
|
const { $id } = SvgCanvas;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
class LayersPanel {
|
|
/**
|
|
* @param {PlainObject} editor
|
|
*/
|
|
constructor(editor) {
|
|
this.updateContextPanel = editor.topPanel.updateContextPanel;
|
|
this.editor = editor;
|
|
}
|
|
|
|
/**
|
|
* @param {PlainObject} e event
|
|
* @returns {void}
|
|
*/
|
|
lmenuFunc(e) {
|
|
const action = e?.detail?.trigger;
|
|
switch (action) {
|
|
case "dupe":
|
|
this.cloneLayer();
|
|
break;
|
|
case "delete":
|
|
this.deleteLayer();
|
|
break;
|
|
case "merge_down":
|
|
this.mergeLayer();
|
|
break;
|
|
case "merge_all":
|
|
this.editor.svgCanvas.mergeAllLayers();
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
break;
|
|
}
|
|
}
|
|
/**
|
|
* @returns {void}
|
|
*/
|
|
init() {
|
|
const template = document.createElement("template");
|
|
const { i18next } = this.editor;
|
|
const { imgPath } = this.editor.configObj.curConfig;
|
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
template.innerHTML = `
|
|
<div id="sidepanels">
|
|
<div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
|
|
<div id="sidepanel_content">
|
|
<div id="layerpanel">
|
|
<h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
|
|
<fieldset id="layerbuttons">
|
|
<se-button id="layer_new" title="layers.new" size="small" src="${imgPath}/new.svg"></se-button>
|
|
<se-button id="layer_delete" title="layers.del" size="small" src="${imgPath}/delete.svg"></se-button>
|
|
<se-button id="layer_rename" title="layers.rename" size="small" src="${imgPath}/text.svg"></se-button>
|
|
<se-button id="layer_up" title="layers.move_up" size="small" src="${imgPath}/go_up.svg"></se-button>
|
|
<se-button id="layer_down" title="layers.move_down" size="small" src="${imgPath}/go_down.svg"></se-button>
|
|
<se-button id="layer_moreopts" title="common.more_opts" size="small" src="${imgPath}/context_menu.svg">
|
|
</se-button>
|
|
</fieldset>
|
|
<table id="layerlist">
|
|
<tr class="layer">
|
|
<td class="layervis"></td>
|
|
<td class="layername">Layer 1</td>
|
|
</tr>
|
|
</table>
|
|
<span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
|
|
<select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
|
|
<option selected="selected" value="layer1">Layer 1</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
|
// layer menu added to DOM
|
|
const menuMore = document.createElement("se-cmenu-layers");
|
|
menuMore.setAttribute("id", "se-cmenu-layers-more");
|
|
menuMore.value = "layer_moreopts";
|
|
menuMore.setAttribute("leftclick", true);
|
|
this.editor.$container.append(menuMore);
|
|
menuMore.init(i18next);
|
|
const menuLayerBox = document.createElement("se-cmenu-layers");
|
|
menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
|
|
menuLayerBox.value = "layerlist";
|
|
menuLayerBox.setAttribute("leftclick", false);
|
|
this.editor.$container.append(menuLayerBox);
|
|
menuLayerBox.init(i18next);
|
|
document
|
|
.getElementById("layer_new")
|
|
.addEventListener("click", this.newLayer.bind(this));
|
|
document
|
|
.getElementById("layer_delete")
|
|
.addEventListener("click", this.deleteLayer.bind(this));
|
|
document
|
|
.getElementById("layer_up")
|
|
.addEventListener("click", () => this.moveLayer.bind(this)(-1));
|
|
document
|
|
.getElementById("layer_down")
|
|
.addEventListener("click", () => this.moveLayer.bind(this)(1));
|
|
document
|
|
.getElementById("layer_rename")
|
|
.addEventListener("click", this.layerRename.bind(this));
|
|
$id("se-cmenu-layers-more").addEventListener(
|
|
"change",
|
|
this.lmenuFunc.bind(this)
|
|
);
|
|
$id("se-cmenu-layers-list").addEventListener("change", (e) => {
|
|
this.lmenuFunc(e);
|
|
});
|
|
$id("sidepanel_handle").addEventListener(
|
|
"click", () => this.toggleSidePanel()
|
|
);
|
|
this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
|
|
}
|
|
toggleSidePanel(displayFlag) {
|
|
if (displayFlag === undefined) {
|
|
this.editor.$svgEditor.classList.toggle('open');
|
|
} else if (displayFlag) {
|
|
this.editor.$svgEditor.classList.add('open');
|
|
} else {
|
|
this.editor.$svgEditor.classList.remove('open');
|
|
}
|
|
}
|
|
/**
|
|
* @returns {void}
|
|
*/
|
|
newLayer() {
|
|
let uniqName;
|
|
let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
|
do {
|
|
uniqName = this.editor.i18next.t("layers.layer") + " " + ++i;
|
|
} while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
|
|
|
|
const newName = prompt(
|
|
this.editor.i18next.t('notification.enterUniqueLayerName'),
|
|
uniqName
|
|
);
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
alert(this.editor.i18next.t('notification.dupeLayerName'));
|
|
return;
|
|
}
|
|
this.editor.svgCanvas.createLayer(newName);
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
deleteLayer() {
|
|
if (this.editor.svgCanvas.deleteCurrentLayer()) {
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
// This matches what this.editor.svgCanvas does
|
|
// TODO: make this behavior less brittle (svg-editor should get which
|
|
// layer is selected from the canvas and then select that one in the UI)
|
|
const elements = document.querySelectorAll('#layerlist tr.layer');
|
|
Array.prototype.forEach.call(elements, function(el){
|
|
el.classList.remove('layersel');
|
|
});
|
|
document.querySelector('#layerlist tr.layer').classList.add('layersel');
|
|
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
cloneLayer() {
|
|
const name =
|
|
this.editor.svgCanvas.getCurrentDrawing().getCurrentLayerName() + " copy";
|
|
|
|
const newName = prompt(
|
|
this.editor.i18next.t('notification.enterUniqueLayerName'),
|
|
name
|
|
);
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
alert(this.editor.i18next.t('notification.dupeLayerName'));
|
|
return;
|
|
}
|
|
this.editor.svgCanvas.cloneLayer(newName);
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
}
|
|
|
|
index(el) {
|
|
if (!el) return -1;
|
|
let i = 0;
|
|
do {
|
|
i++;
|
|
} while (el == el.previousElementSibling);
|
|
return i;
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
mergeLayer() {
|
|
if (
|
|
(this.index(document.querySelector("#layerlist tr.layersel"))-1) ===
|
|
this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
|
|
) {
|
|
return;
|
|
}
|
|
this.editor.svgCanvas.mergeLayer();
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
}
|
|
|
|
/**
|
|
* @param {Integer} pos
|
|
* @returns {void}
|
|
*/
|
|
moveLayer(pos) {
|
|
const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
|
|
|
let curIndex = (this.index(document.querySelector("#layerlist tr.layersel"))-1);
|
|
if (curIndex > 0 || curIndex < total - 1) {
|
|
curIndex += pos;
|
|
this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
|
|
this.populateLayers();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {void}
|
|
*/
|
|
layerRename() {
|
|
const ele = document.querySelector("#layerlist tr.layersel td.layername");
|
|
const oldName = (ele) ? ele.textContent : '';
|
|
const newName = prompt(this.editor.i18next.t('notification.enterNewLayerName'), "");
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (
|
|
oldName === newName ||
|
|
this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
|
|
) {
|
|
alert(this.editor.i18next.t('notification.layerHasThatName'));
|
|
return;
|
|
}
|
|
this.editor.svgCanvas.renameCurrentLayer(newName);
|
|
this.populateLayers();
|
|
}
|
|
|
|
/**
|
|
* This function highlights the layer passed in (by fading out the other layers).
|
|
* If no layer is passed in, this function restores the other layers.
|
|
* @param {string} [layerNameToHighlight]
|
|
* @returns {void}
|
|
*/
|
|
toggleHighlightLayer(layerNameToHighlight) {
|
|
let i;
|
|
const curNames = [];
|
|
const numLayers = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
|
for (i = 0; i < numLayers; i++) {
|
|
curNames[i] = this.editor.svgCanvas.getCurrentDrawing().getLayerName(i);
|
|
}
|
|
|
|
if (layerNameToHighlight) {
|
|
curNames.forEach((curName) => {
|
|
if (curName !== layerNameToHighlight) {
|
|
this.editor.svgCanvas
|
|
.getCurrentDrawing()
|
|
.setLayerOpacity(curName, 0.5);
|
|
}
|
|
});
|
|
} else {
|
|
curNames.forEach((curName) => {
|
|
this.editor.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {void}
|
|
*/
|
|
populateLayers() {
|
|
this.editor.svgCanvas.clearSelection();
|
|
const self = this;
|
|
const layerlist = $id("layerlist").querySelector('tbody');
|
|
while(layerlist.firstChild)
|
|
layerlist.removeChild(layerlist.firstChild);
|
|
|
|
const selLayerNames = $id("selLayerNames");
|
|
// empty() ref: http://youmightnotneedjquery.com/#empty
|
|
while(selLayerNames.firstChild)
|
|
selLayerNames.removeChild(selLayerNames.firstChild);
|
|
const drawing = this.editor.svgCanvas.getCurrentDrawing();
|
|
const currentLayerName = drawing.getCurrentLayerName();
|
|
let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
|
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
|
|
while (layer--) {
|
|
const name = drawing.getLayerName(layer);
|
|
const layerTr = document.createElement("tr");
|
|
layerTr.className = (name === currentLayerName) ? 'layer layersel' : 'layer';
|
|
const layerVis = document.createElement("td");
|
|
layerVis.className = (!drawing.getLayerVisibility(name)) ? "layerinvis layervis" : 'layervis';
|
|
const layerName = document.createElement("td");
|
|
layerName.className = 'layername';
|
|
layerName.textContent = name;
|
|
layerTr.appendChild(layerVis);
|
|
layerTr.appendChild(layerName);
|
|
layerlist.appendChild(layerTr);
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
selLayerNames.innerHTML += '<option value="' + name + '">' + name + '</option>';
|
|
}
|
|
// handle selection of layer
|
|
const nelements = $id('layerlist').querySelectorAll("td.layername");
|
|
Array.from(nelements).forEach(function(element) {
|
|
element.addEventListener('mouseup', function(evt) {
|
|
const trElements = $id('layerlist').querySelectorAll("tr.layer");
|
|
Array.from(trElements).forEach(function(element) {
|
|
element.classList.remove("layersel");
|
|
});
|
|
evt.currentTarget.parentNode.classList.add("layersel");
|
|
self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
|
|
evt.preventDefault();
|
|
});
|
|
element.addEventListener('mouseup', (evt) => {
|
|
self.toggleHighlightLayer(evt.currentTarget.textContent);
|
|
});
|
|
element.addEventListener('mouseout', (_evt) => {
|
|
self.toggleHighlightLayer();
|
|
});
|
|
});
|
|
const elements = $id('layerlist').querySelectorAll("td.layervis");
|
|
Array.from(elements).forEach(function(element) {
|
|
element.addEventListener('click', function(evt) {
|
|
const ele = evt.currentTarget.parentNode.querySelector("td.layername");
|
|
const name = (ele)? ele.textContent : '';
|
|
const vis = evt.currentTarget.classList.contains("layerinvis");
|
|
self.editor.svgCanvas.setLayerVisibility(name, vis);
|
|
evt.currentTarget.classList.toggle("layerinvis");
|
|
});
|
|
});
|
|
|
|
// if there were too few rows, let's add a few to make it not so lonely
|
|
let num = 5 - $id('layerlist').querySelectorAll("tr.layer").length;
|
|
while (num-- > 0) {
|
|
// TODO: there must a better way to do this
|
|
const tlayer = document.createElement("tr");
|
|
tlayer.innerHTML = '<td style="color:white">_</td><td/>';
|
|
layerlist.append(tlayer);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default LayersPanel;
|