mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
generic confirmationDialog for all files
This commit is contained in:
Azgaar
parent
5464e0a34b
commit
3359df0e02
25 changed files with 6727 additions and 5454 deletions
|
|
@ -1,18 +1,20 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
function editLabel() {
|
||||
if (customization) return;
|
||||
closeDialogs();
|
||||
if (!layerIsOn("toggleLabels")) toggleLabels();
|
||||
if (!layerIsOn('toggleLabels')) toggleLabels();
|
||||
|
||||
const tspan = d3.event.target;
|
||||
const textPath = tspan.parentNode;
|
||||
const text = textPath.parentNode;
|
||||
elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true);
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
elSelected = d3.select(text).call(d3.drag().on('start', dragLabel)).classed('draggable', true);
|
||||
viewbox.on('touchmove mousemove', showEditorTips);
|
||||
|
||||
$("#labelEditor").dialog({
|
||||
title: "Edit Label", resizable: false, width: fitContent(),
|
||||
position: {my: "center top+10", at: "bottom", of: text, collision: "fit"},
|
||||
$('#labelEditor').dialog({
|
||||
title: 'Edit Label',
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
position: {my: 'center top+10', at: 'bottom', of: text, collision: 'fit'},
|
||||
close: closeLabelEditor
|
||||
});
|
||||
|
||||
|
|
@ -24,89 +26,99 @@ function editLabel() {
|
|||
modules.editLabel = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
|
||||
document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
|
||||
document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
|
||||
document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
|
||||
document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
|
||||
document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
|
||||
document.getElementById('labelGroupShow').addEventListener('click', showGroupSection);
|
||||
document.getElementById('labelGroupHide').addEventListener('click', hideGroupSection);
|
||||
document.getElementById('labelGroupSelect').addEventListener('click', changeGroup);
|
||||
document.getElementById('labelGroupInput').addEventListener('change', createNewGroup);
|
||||
document.getElementById('labelGroupNew').addEventListener('click', toggleNewGroupInput);
|
||||
document.getElementById('labelGroupRemove').addEventListener('click', removeLabelsGroup);
|
||||
|
||||
document.getElementById("labelTextShow").addEventListener("click", showTextSection);
|
||||
document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
|
||||
document.getElementById("labelText").addEventListener("input", changeText);
|
||||
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
|
||||
document.getElementById('labelTextShow').addEventListener('click', showTextSection);
|
||||
document.getElementById('labelTextHide').addEventListener('click', hideTextSection);
|
||||
document.getElementById('labelText').addEventListener('input', changeText);
|
||||
document.getElementById('labelTextRandom').addEventListener('click', generateRandomName);
|
||||
|
||||
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
|
||||
document.getElementById('labelEditStyle').addEventListener('click', editGroupStyle);
|
||||
|
||||
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
|
||||
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
|
||||
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
|
||||
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
|
||||
document.getElementById('labelSizeShow').addEventListener('click', showSizeSection);
|
||||
document.getElementById('labelSizeHide').addEventListener('click', hideSizeSection);
|
||||
document.getElementById('labelStartOffset').addEventListener('input', changeStartOffset);
|
||||
document.getElementById('labelRelativeSize').addEventListener('input', changeRelativeSize);
|
||||
|
||||
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
|
||||
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
|
||||
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
|
||||
document.getElementById('labelAlign').addEventListener('click', editLabelAlign);
|
||||
document.getElementById('labelLegend').addEventListener('click', editLabelLegend);
|
||||
document.getElementById('labelRemoveSingle').addEventListener('click', removeLabel);
|
||||
|
||||
function showEditorTips() {
|
||||
showMainTip();
|
||||
if (d3.event.target.parentNode.parentNode.id === elSelected.attr("id")) tip("Drag to shift the label"); else
|
||||
if (d3.event.target.parentNode.id === "controlPoints") {
|
||||
if (d3.event.target.tagName === "circle") tip("Drag to move, click to delete the control point");
|
||||
if (d3.event.target.tagName === "path") tip("Click to add a control point");
|
||||
if (d3.event.target.parentNode.parentNode.id === elSelected.attr('id')) tip('Drag to shift the label');
|
||||
else if (d3.event.target.parentNode.id === 'controlPoints') {
|
||||
if (d3.event.target.tagName === 'circle') tip('Drag to move, click to delete the control point');
|
||||
if (d3.event.target.tagName === 'path') tip('Click to add a control point');
|
||||
}
|
||||
}
|
||||
|
||||
function selectLabelGroup(text) {
|
||||
const group = text.parentNode.id;
|
||||
const select = document.getElementById("labelGroupSelect");
|
||||
const select = document.getElementById('labelGroupSelect');
|
||||
select.options.length = 0; // remove all options
|
||||
|
||||
labels.selectAll(":scope > g").each(function() {
|
||||
if (this.id === "burgLabels") return;
|
||||
labels.selectAll(':scope > g').each(function () {
|
||||
if (this.id === 'burgLabels') return;
|
||||
select.options.add(new Option(this.id, this.id, false, this.id === group));
|
||||
});
|
||||
}
|
||||
|
||||
function updateValues(textPath) {
|
||||
document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
|
||||
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
|
||||
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
|
||||
document.getElementById('labelText').value = [...textPath.querySelectorAll('tspan')].map((tspan) => tspan.textContent).join('|');
|
||||
document.getElementById('labelStartOffset').value = parseFloat(textPath.getAttribute('startOffset'));
|
||||
document.getElementById('labelRelativeSize').value = parseFloat(textPath.getAttribute('font-size'));
|
||||
}
|
||||
|
||||
function drawControlPointsAndLine() {
|
||||
debug.select("#controlPoints").remove();
|
||||
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
|
||||
const path = document.getElementById("textPath_" + elSelected.attr("id"));
|
||||
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
|
||||
debug.select('#controlPoints').remove();
|
||||
debug.append('g').attr('id', 'controlPoints').attr('transform', elSelected.attr('transform'));
|
||||
const path = document.getElementById('textPath_' + elSelected.attr('id'));
|
||||
debug.select('#controlPoints').append('path').attr('d', path.getAttribute('d')).on('click', addInterimControlPoint);
|
||||
const l = path.getTotalLength();
|
||||
if (!l) return;
|
||||
const increment = l / Math.max(Math.ceil(l / 200), 2);
|
||||
for (let i=0; i <= l; i += increment) {addControlPoint(path.getPointAtLength(i));}
|
||||
for (let i = 0; i <= l; i += increment) {
|
||||
addControlPoint(path.getPointAtLength(i));
|
||||
}
|
||||
}
|
||||
|
||||
function addControlPoint(point) {
|
||||
debug.select("#controlPoints").append("circle")
|
||||
.attr("cx", point.x).attr("cy", point.y).attr("r", 2.5).attr("stroke-width", .8)
|
||||
.call(d3.drag().on("drag", dragControlPoint))
|
||||
.on("click", clickControlPoint);
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.append('circle')
|
||||
.attr('cx', point.x)
|
||||
.attr('cy', point.y)
|
||||
.attr('r', 2.5)
|
||||
.attr('stroke-width', 0.8)
|
||||
.call(d3.drag().on('drag', dragControlPoint))
|
||||
.on('click', clickControlPoint);
|
||||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
this.setAttribute("cx", d3.event.x);
|
||||
this.setAttribute("cy", d3.event.y);
|
||||
this.setAttribute('cx', d3.event.x);
|
||||
this.setAttribute('cy', d3.event.y);
|
||||
redrawLabelPath();
|
||||
}
|
||||
|
||||
function redrawLabelPath() {
|
||||
const path = document.getElementById("textPath_" + elSelected.attr("id"));
|
||||
const path = document.getElementById('textPath_' + elSelected.attr('id'));
|
||||
lineGen.curve(d3.curveBundle.beta(1));
|
||||
const points = [];
|
||||
debug.select("#controlPoints").selectAll("circle").each(function() {
|
||||
points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
|
||||
});
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.selectAll('circle')
|
||||
.each(function () {
|
||||
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
|
||||
});
|
||||
const d = round(lineGen(points));
|
||||
path.setAttribute("d", d);
|
||||
debug.select("#controlPoints > path").attr("d", d);
|
||||
path.setAttribute('d', d);
|
||||
debug.select('#controlPoints > path').attr('d', d);
|
||||
}
|
||||
|
||||
function clickControlPoint() {
|
||||
|
|
@ -118,52 +130,63 @@ function editLabel() {
|
|||
const point = d3.mouse(this);
|
||||
|
||||
const dists = [];
|
||||
debug.select("#controlPoints").selectAll("circle").each(function() {
|
||||
const x = +this.getAttribute("cx");
|
||||
const y = +this.getAttribute("cy");
|
||||
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
|
||||
});
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.selectAll('circle')
|
||||
.each(function () {
|
||||
const x = +this.getAttribute('cx');
|
||||
const y = +this.getAttribute('cy');
|
||||
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
|
||||
});
|
||||
|
||||
let index = dists.length;
|
||||
if (dists.length > 1) {
|
||||
const sorted = dists.slice(0).sort((a, b) => a-b);
|
||||
const sorted = dists.slice(0).sort((a, b) => a - b);
|
||||
const closest = dists.indexOf(sorted[0]);
|
||||
const next = dists.indexOf(sorted[1]);
|
||||
if (closest <= next) index = closest+1; else index = next+1;
|
||||
if (closest <= next) index = closest + 1;
|
||||
else index = next + 1;
|
||||
}
|
||||
|
||||
const before = ":nth-child(" + (index + 2) + ")";
|
||||
debug.select("#controlPoints").insert("circle", before)
|
||||
.attr("cx", point[0]).attr("cy", point[1]).attr("r", 2.5).attr("stroke-width", .8)
|
||||
.call(d3.drag().on("drag", dragControlPoint))
|
||||
.on("click", clickControlPoint);
|
||||
const before = ':nth-child(' + (index + 2) + ')';
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.insert('circle', before)
|
||||
.attr('cx', point[0])
|
||||
.attr('cy', point[1])
|
||||
.attr('r', 2.5)
|
||||
.attr('stroke-width', 0.8)
|
||||
.call(d3.drag().on('drag', dragControlPoint))
|
||||
.on('click', clickControlPoint);
|
||||
|
||||
redrawLabelPath();
|
||||
redrawLabelPath();
|
||||
}
|
||||
|
||||
function dragLabel() {
|
||||
const tr = parseTransform(elSelected.attr("transform"));
|
||||
const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y;
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
const x = d3.event.x, y = d3.event.y;
|
||||
const transform = `translate(${(dx+x)},${(dy+y)})`;
|
||||
elSelected.attr("transform", transform);
|
||||
debug.select("#controlPoints").attr("transform", transform);
|
||||
const tr = parseTransform(elSelected.attr('transform'));
|
||||
const dx = +tr[0] - d3.event.x,
|
||||
dy = +tr[1] - d3.event.y;
|
||||
|
||||
d3.event.on('drag', function () {
|
||||
const x = d3.event.x,
|
||||
y = d3.event.y;
|
||||
const transform = `translate(${dx + x},${dy + y})`;
|
||||
elSelected.attr('transform', transform);
|
||||
debug.select('#controlPoints').attr('transform', transform);
|
||||
});
|
||||
}
|
||||
|
||||
function showGroupSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none");
|
||||
document.getElementById("labelGroupSection").style.display = "inline-block";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'none'));
|
||||
document.getElementById('labelGroupSection').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function hideGroupSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block");
|
||||
document.getElementById("labelGroupSection").style.display = "none";
|
||||
document.getElementById("labelGroupInput").style.display = "none";
|
||||
document.getElementById("labelGroupInput").value = "";
|
||||
document.getElementById("labelGroupSelect").style.display = "inline-block";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'inline-block'));
|
||||
document.getElementById('labelGroupSection').style.display = 'none';
|
||||
document.getElementById('labelGroupInput').style.display = 'none';
|
||||
document.getElementById('labelGroupInput').value = '';
|
||||
document.getElementById('labelGroupSelect').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function changeGroup() {
|
||||
|
|
@ -171,179 +194,177 @@ function editLabel() {
|
|||
}
|
||||
|
||||
function toggleNewGroupInput() {
|
||||
if (labelGroupInput.style.display === "none") {
|
||||
labelGroupInput.style.display = "inline-block";
|
||||
if (labelGroupInput.style.display === 'none') {
|
||||
labelGroupInput.style.display = 'inline-block';
|
||||
labelGroupInput.focus();
|
||||
labelGroupSelect.style.display = "none";
|
||||
labelGroupSelect.style.display = 'none';
|
||||
} else {
|
||||
labelGroupInput.style.display = "none";
|
||||
labelGroupSelect.style.display = "inline-block";
|
||||
}
|
||||
labelGroupInput.style.display = 'none';
|
||||
labelGroupSelect.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
function createNewGroup() {
|
||||
if (!this.value) {tip("Please provide a valid group name"); return;}
|
||||
const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
|
||||
if (!this.value) {
|
||||
tip('Please provide a valid group name');
|
||||
return;
|
||||
}
|
||||
const group = this.value
|
||||
.toLowerCase()
|
||||
.replace(/ /g, '_')
|
||||
.replace(/[^\w\s]/gi, '');
|
||||
|
||||
if (document.getElementById(group)) {
|
||||
tip("Element with this id already exists. Please provide a unique name", false, "error");
|
||||
tip('Element with this id already exists. Please provide a unique name', false, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number.isFinite(+group.charAt(0))) {
|
||||
tip("Group name should start with a letter", false, "error");
|
||||
tip('Group name should start with a letter', false, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// just rename if only 1 element left
|
||||
const oldGroup = elSelected.node().parentNode;
|
||||
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
|
||||
document.getElementById("labelGroupSelect").selectedOptions[0].remove();
|
||||
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
|
||||
if (oldGroup !== 'states' && oldGroup !== 'addedLabels' && oldGroup.childElementCount === 1) {
|
||||
document.getElementById('labelGroupSelect').selectedOptions[0].remove();
|
||||
document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
|
||||
oldGroup.id = group;
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("labelGroupInput").value = "";
|
||||
document.getElementById('labelGroupInput').value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const newGroup = elSelected.node().parentNode.cloneNode(false);
|
||||
document.getElementById("labels").appendChild(newGroup);
|
||||
document.getElementById('labels').appendChild(newGroup);
|
||||
newGroup.id = group;
|
||||
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
|
||||
document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
|
||||
document.getElementById(group).appendChild(elSelected.node());
|
||||
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("labelGroupInput").value = "";
|
||||
document.getElementById('labelGroupInput').value = '';
|
||||
}
|
||||
|
||||
function removeLabelsGroup() {
|
||||
const group = elSelected.node().parentNode.id;
|
||||
const basic = group === "states" || group === "addedLabels";
|
||||
const basic = group === 'states' || group === 'addedLabels';
|
||||
const count = elSelected.node().parentNode.childElementCount;
|
||||
alertMessage.innerHTML = `Are you sure you want to remove
|
||||
${basic ? "all elements in the group" : "the entire label group"}?
|
||||
<br><br>Labels to be removed: ${count}`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove route group",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
$("#labelEditor").dialog("close");
|
||||
hideGroupSection();
|
||||
labels.select("#"+group).selectAll("text").each(function() {
|
||||
document.getElementById("textPath_" + this.id).remove();
|
||||
this.remove();
|
||||
});
|
||||
if (!basic) labels.select("#"+group).remove();
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
|
||||
const message = `Are you sure you want to remove ${basic ? 'all elements in the group' : 'the entire label group'}?<br><br>Labels to be removed: ${count}`;
|
||||
const onConfirm = () => {
|
||||
$('#labelEditor').dialog('close');
|
||||
hideGroupSection();
|
||||
labels
|
||||
.select('#' + group)
|
||||
.selectAll('text')
|
||||
.each(function () {
|
||||
document.getElementById('textPath_' + this.id).remove();
|
||||
this.remove();
|
||||
});
|
||||
if (!basic) labels.select('#' + group).remove();
|
||||
};
|
||||
confirmationDialog({title: 'Remove label group', message, confirm: 'Remove', onConfirm});
|
||||
}
|
||||
|
||||
|
||||
function showTextSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none");
|
||||
document.getElementById("labelTextSection").style.display = "inline-block";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'none'));
|
||||
document.getElementById('labelTextSection').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function hideTextSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block");
|
||||
document.getElementById("labelTextSection").style.display = "none";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'inline-block'));
|
||||
document.getElementById('labelTextSection').style.display = 'none';
|
||||
}
|
||||
|
||||
function changeText() {
|
||||
const input = document.getElementById("labelText").value;
|
||||
const el = elSelected.select("textPath").node();
|
||||
const example = d3.select(elSelected.node().parentNode)
|
||||
.append("text").attr("x", 0).attr("x", 0)
|
||||
.attr("font-size", el.getAttribute("font-size")).node();
|
||||
|
||||
const lines = input.split("|");
|
||||
function changeText() {
|
||||
const input = document.getElementById('labelText').value;
|
||||
const el = elSelected.select('textPath').node();
|
||||
const example = d3.select(elSelected.node().parentNode).append('text').attr('x', 0).attr('x', 0).attr('font-size', el.getAttribute('font-size')).node();
|
||||
|
||||
const lines = input.split('|');
|
||||
const top = (lines.length - 1) / -2; // y offset
|
||||
const inner = lines.map((l, d) => {
|
||||
example.innerHTML = l;
|
||||
const left = example.getBBox().width / -2; // x offset
|
||||
return `<tspan x="${left}px" dy="${d?1:top}em">${l}</tspan>`;
|
||||
}).join("");
|
||||
const inner = lines
|
||||
.map((l, d) => {
|
||||
example.innerHTML = l;
|
||||
const left = example.getBBox().width / -2; // x offset
|
||||
return `<tspan x="${left}px" dy="${d ? 1 : top}em">${l}</tspan>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
el.innerHTML = inner;
|
||||
example.remove();
|
||||
|
||||
if (elSelected.attr("id").slice(0,10) === "stateLabel") tip("Use States Editor to change an actual state name, not just a label", false, "warning");
|
||||
if (elSelected.attr('id').slice(0, 10) === 'stateLabel') tip('Use States Editor to change an actual state name, not just a label', false, 'warning');
|
||||
}
|
||||
|
||||
function generateRandomName() {
|
||||
let name = "";
|
||||
if (elSelected.attr("id").slice(0,10) === "stateLabel") {
|
||||
const id = +elSelected.attr("id").slice(10);
|
||||
let name = '';
|
||||
if (elSelected.attr('id').slice(0, 10) === 'stateLabel') {
|
||||
const id = +elSelected.attr('id').slice(10);
|
||||
const culture = pack.states[id].culture;
|
||||
name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture);
|
||||
name = Names.getState(Names.getCulture(culture, 4, 7, ''), culture);
|
||||
} else {
|
||||
const box = elSelected.node().getBBox();
|
||||
const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2);
|
||||
const culture = pack.cells.culture[cell];
|
||||
name = Names.getCulture(culture);
|
||||
}
|
||||
document.getElementById("labelText").value = name;
|
||||
document.getElementById('labelText').value = name;
|
||||
changeText();
|
||||
}
|
||||
|
||||
function editGroupStyle() {
|
||||
const g = elSelected.node().parentNode.id;
|
||||
editStyle("labels", g);
|
||||
editStyle('labels', g);
|
||||
}
|
||||
|
||||
function showSizeSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none");
|
||||
document.getElementById("labelSizeSection").style.display = "inline-block";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'none'));
|
||||
document.getElementById('labelSizeSection').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function hideSizeSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block");
|
||||
document.getElementById("labelSizeSection").style.display = "none";
|
||||
document.querySelectorAll('#labelEditor > button').forEach((el) => (el.style.display = 'inline-block'));
|
||||
document.getElementById('labelSizeSection').style.display = 'none';
|
||||
}
|
||||
|
||||
function changeStartOffset() {
|
||||
elSelected.select("textPath").attr("startOffset", this.value + "%");
|
||||
tip("Label offset: " + this.value + "%");
|
||||
elSelected.select('textPath').attr('startOffset', this.value + '%');
|
||||
tip('Label offset: ' + this.value + '%');
|
||||
}
|
||||
|
||||
function changeRelativeSize() {
|
||||
elSelected.select("textPath").attr("font-size", this.value + "%");
|
||||
tip("Label relative size: " + this.value + "%");
|
||||
elSelected.select('textPath').attr('font-size', this.value + '%');
|
||||
tip('Label relative size: ' + this.value + '%');
|
||||
changeText();
|
||||
}
|
||||
|
||||
function editLabelAlign() {
|
||||
const bbox = elSelected.node().getBBox();
|
||||
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
|
||||
const path = defs.select("#textPath_" + elSelected.attr("id"));
|
||||
path.attr("d", `M${c[0]-bbox.width},${c[1]}h${bbox.width*2}`);
|
||||
const path = defs.select('#textPath_' + elSelected.attr('id'));
|
||||
path.attr('d', `M${c[0] - bbox.width},${c[1]}h${bbox.width * 2}`);
|
||||
drawControlPointsAndLine();
|
||||
}
|
||||
|
||||
function editLabelLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
const id = elSelected.attr('id');
|
||||
const name = elSelected.text();
|
||||
editNotes(id, name);
|
||||
}
|
||||
|
||||
function removeLabel() {
|
||||
alertMessage.innerHTML = "Are you sure you want to remove the label?";
|
||||
$("#alert").dialog({resizable: false, title: "Remove label",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
defs.select("#textPath_" + elSelected.attr("id")).remove();
|
||||
elSelected.remove();
|
||||
$("#labelEditor").dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
const message = 'Are you sure you want to remove the label? <br>This action cannot be reverted';
|
||||
const onConfirm = () => {
|
||||
defs.select('#textPath_' + elSelected.attr('id')).remove();
|
||||
elSelected.remove();
|
||||
$('#labelEditor').dialog('close');
|
||||
};
|
||||
confirmationDialog({title: 'Remove label', message, confirm: 'Remove', onConfirm});
|
||||
}
|
||||
|
||||
function closeLabelEditor() {
|
||||
debug.select("#controlPoints").remove();
|
||||
debug.select('#controlPoints').remove();
|
||||
unselect();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue