447 lines
14 KiB
JavaScript
447 lines
14 KiB
JavaScript
/* eslint-disable max-len */
|
|
/* eslint-disable no-alert */
|
|
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
|
|
|
|
const SIDEPANEL_MAXWIDTH = 300;
|
|
const SIDEPANEL_OPENWIDTH = 150;
|
|
const { $id } = SvgCanvas;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
class LayersPanel {
|
|
/**
|
|
* @param {PlainObject} editor
|
|
*/
|
|
constructor(editor) {
|
|
this.uiStrings = editor.uiStrings;
|
|
this.updateContextPanel = editor.topPanel.updateContextPanel;
|
|
this.sidedrag = -1;
|
|
this.sidedragging = false;
|
|
this.allowmove = false;
|
|
this.editor = editor;
|
|
}
|
|
|
|
/**
|
|
* @param {Float} delta
|
|
* @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
|
|
* @returns {void}
|
|
*/
|
|
changeSidePanelWidth(delta) {
|
|
const rulerX = document.querySelector("#ruler_x");
|
|
$id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
|
|
$id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
|
|
rulerX.style.right =
|
|
parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
|
|
delta +
|
|
"px";
|
|
this.editor.workarea.style.right =
|
|
parseFloat(
|
|
getComputedStyle(this.editor.workarea, null).right.replace("px", "")
|
|
) +
|
|
delta +
|
|
"px";
|
|
this.editor.svgCanvas.runExtensions("workareaResized");
|
|
}
|
|
|
|
/**
|
|
* @param {Event} evt
|
|
* @returns {void}
|
|
*/
|
|
resizeSidePanel(evt) {
|
|
if (!this.allowmove) {
|
|
return;
|
|
}
|
|
if (this.sidedrag === -1) {
|
|
return;
|
|
}
|
|
this.sidedragging = true;
|
|
let deltaX = this.sidedrag - evt.pageX;
|
|
const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
|
|
if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
|
|
deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
|
|
// sideWidth = SIDEPANEL_MAXWIDTH;
|
|
} else if (sideWidth + deltaX < 2) {
|
|
deltaX = 2 - sideWidth;
|
|
// sideWidth = 2;
|
|
}
|
|
if (deltaX === 0) {
|
|
return;
|
|
}
|
|
this.sidedrag -= deltaX;
|
|
this.changeSidePanelWidth(deltaX);
|
|
}
|
|
|
|
/**
|
|
* If width is non-zero, then fully close it; otherwise fully open it.
|
|
* @param {boolean} close Forces the side panel closed
|
|
* @returns {void}
|
|
*/
|
|
toggleSidePanel(close) {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""))
|
|
const isOpened = (dpr < 1 ? w : w / dpr) > 2;
|
|
const zoomAdjustedSidepanelWidth =
|
|
(dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
|
|
const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
|
|
this.changeSidePanelWidth(deltaX);
|
|
}
|
|
/**
|
|
* @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");
|
|
template.innerHTML = `
|
|
<div id="sidepanels">
|
|
<div id="layerpanel">
|
|
<h3 id="layersLabel">Layers</h3>
|
|
<fieldset id="layerbuttons">
|
|
<se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
|
|
<se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
|
|
<se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
|
|
<se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
|
|
<se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
|
|
<se-button id="layer_moreopts" title="More Options" size="small" src="./images/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">Move elements to:</span>
|
|
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
|
|
<option selected="selected" value="layer1">Layer 1</option>
|
|
</select>
|
|
</div>
|
|
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
|
|
</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);
|
|
document.body.append(menuMore);
|
|
const menuLayerBox = document.createElement("se-cmenu-layers");
|
|
menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
|
|
menuLayerBox.value = "layerlist";
|
|
menuLayerBox.setAttribute("leftclick", false);
|
|
document.body.append(menuLayerBox);
|
|
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.bind(this)
|
|
);
|
|
if (this.editor.configObj.curConfig.showlayers) {
|
|
this.toggleSidePanel();
|
|
}
|
|
$id("sidepanel_handle").addEventListener("mousedown", evt => {
|
|
this.sidedrag = evt.pageX;
|
|
window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
|
|
this.allowmove = false;
|
|
// Silly hack for Chrome, which always runs mousemove right after mousedown
|
|
setTimeout(() => {
|
|
this.allowmove = true;
|
|
}, 20);
|
|
});
|
|
$id("sidepanel_handle").addEventListener("mouseup", _evt => {
|
|
if (!this.sidedragging) {
|
|
this.toggleSidePanel();
|
|
}
|
|
this.sidedrag = -1;
|
|
this.sidedragging = false;
|
|
});
|
|
window.addEventListener("mouseup", _evt => {
|
|
this.sidedrag = -1;
|
|
this.sidedragging = false;
|
|
$id("svg_editor").removeEventListener(
|
|
"mousemove",
|
|
this.resizeSidePanel.bind(this)
|
|
);
|
|
});
|
|
}
|
|
/**
|
|
* @returns {void}
|
|
*/
|
|
newLayer() {
|
|
let uniqName;
|
|
let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
|
do {
|
|
uniqName = this.uiStrings.layers.layer + " " + ++i;
|
|
} while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
|
|
|
|
const newName = prompt(
|
|
this.uiStrings.notification.enterUniqueLayerName,
|
|
uniqName
|
|
);
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
alert(this.uiStrings.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.uiStrings.notification.enterUniqueLayerName,
|
|
name
|
|
);
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
alert(this.uiStrings.notification.dupeLayerName);
|
|
return;
|
|
}
|
|
this.editor.svgCanvas.cloneLayer(newName);
|
|
this.updateContextPanel();
|
|
this.populateLayers();
|
|
}
|
|
|
|
index(el) {
|
|
if (!el) return -1;
|
|
var 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 oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
|
|
const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (
|
|
oldName === newName ||
|
|
this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
|
|
) {
|
|
alert(this.uiStrings.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 = [],
|
|
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', function(evt) {
|
|
self.toggleHighlightLayer(
|
|
self.editor.svgCanvas,
|
|
evt.currentTarget.textContent
|
|
);
|
|
});
|
|
element.addEventListener('mouseout', function(_evt) {
|
|
self.toggleHighlightLayer(self.editor.svgCanvas);
|
|
});
|
|
});
|
|
const elements = $id('layerlist').querySelectorAll("td.layervis");
|
|
Array.from(elements).forEach(function(element) {
|
|
element.addEventListener('click', function(evt) {
|
|
const name = evt.currentTarget.parentNode.querySelector("td.layername").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;
|