backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

removeElementOnKey - rewrite on vanilla ks

Browse source
This commit is contained in:
Azgaar 2021-09-12 01:51:51 +03:00
parent bedbb7cbff
commit bb6941a1f5
2 changed files with 94 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

10
modules/ui/hotkeys.js
View file

@ -136,10 +136,14 @@ function toggleMode() {
} }
} }
// trigger trash button click on "Delete" keypress
function removeElementOnKey() { function removeElementOnKey() {
$(".dialog:visible .fastDelete").click(); const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find(dialog => dialog.style.display !== "none");
$("button:visible:contains('Remove')").click(); if (fastDelete) fastDelete.click();
const visibleDialogs = Array.from(document.querySelectorAll("[role='dialog']")).filter(dialog => dialog.style.display !== "none");
if (!visibleDialogs.length) return;
visibleDialogs.forEach(dialog => dialog.querySelectorAll("button").forEach(button => button.textContent === "Remove" && button.click()));
} }
function closeAllDialogs() { function closeAllDialogs() {

116
modules/ui/labels-editor.js
View file

@ -11,7 +11,9 @@ function editLabel() {
viewbox.on("touchmove mousemove", showEditorTips); viewbox.on("touchmove mousemove", showEditorTips);
$("#labelEditor").dialog({ $("#labelEditor").dialog({
title: "Edit Label", resizable: false, width: fitContent(), title: "Edit Label",
resizable: false,
width: fitContent(),
position: {my: "center top+10", at: "bottom", of: text, collision: "fit"}, position: {my: "center top+10", at: "bottom", of: text, collision: "fit"},
close: closeLabelEditor close: closeLabelEditor
}); });
@ -49,8 +51,8 @@ function editLabel() {
function showEditorTips() { function showEditorTips() {
showMainTip(); showMainTip();
if (d3.event.target.parentNode.parentNode.id === elSelected.attr("id")) tip("Drag to shift the label"); else if (d3.event.target.parentNode.parentNode.id === elSelected.attr("id")) tip("Drag to shift the label");
if (d3.event.target.parentNode.id === "controlPoints") { 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 === "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.tagName === "path") tip("Click to add a control point");
} }
@ -61,7 +63,7 @@ function editLabel() {
const select = document.getElementById("labelGroupSelect"); const select = document.getElementById("labelGroupSelect");
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
labels.selectAll(":scope > g").each(function() { labels.selectAll(":scope > g").each(function () {
if (this.id === "burgLabels") return; if (this.id === "burgLabels") return;
select.options.add(new Option(this.id, this.id, false, this.id === group)); select.options.add(new Option(this.id, this.id, false, this.id === group));
}); });
@ -81,14 +83,13 @@ function editLabel() {
const l = path.getTotalLength(); const l = path.getTotalLength();
if (!l) return; if (!l) return;
const increment = l / Math.max(Math.ceil(l / 200), 2); 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) { function addControlPoint(point) {
debug.select("#controlPoints").append("circle") 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);
.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);
} }
function dragControlPoint() { function dragControlPoint() {
@ -101,7 +102,10 @@ function editLabel() {
const path = document.getElementById("textPath_" + elSelected.attr("id")); const path = document.getElementById("textPath_" + elSelected.attr("id"));
lineGen.curve(d3.curveBundle.beta(1)); lineGen.curve(d3.curveBundle.beta(1));
const points = []; const points = [];
debug.select("#controlPoints").selectAll("circle").each(function() { debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
points.push([this.getAttribute("cx"), this.getAttribute("cy")]); points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
}); });
const d = round(lineGen(points)); const d = round(lineGen(points));
@ -118,7 +122,10 @@ function editLabel() {
const point = d3.mouse(this); const point = d3.mouse(this);
const dists = []; const dists = [];
debug.select("#controlPoints").selectAll("circle").each(function() { debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
const x = +this.getAttribute("cx"); const x = +this.getAttribute("cx");
const y = +this.getAttribute("cy"); const y = +this.getAttribute("cy");
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2); dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
@ -126,40 +133,40 @@ function editLabel() {
let index = dists.length; let index = dists.length;
if (dists.length > 1) { 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 closest = dists.indexOf(sorted[0]);
const next = dists.indexOf(sorted[1]); 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) + ")"; const before = ":nth-child(" + (index + 2) + ")";
debug.select("#controlPoints").insert("circle", before) 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);
.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);
redrawLabelPath(); redrawLabelPath();
} }
function dragLabel() { function dragLabel() {
const tr = parseTransform(elSelected.attr("transform")); const tr = parseTransform(elSelected.attr("transform"));
const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y; const dx = +tr[0] - d3.event.x,
dy = +tr[1] - d3.event.y;
d3.event.on("drag", function() { d3.event.on("drag", function () {
const x = d3.event.x, y = d3.event.y; const x = d3.event.x,
const transform = `translate(${(dx+x)},${(dy+y)})`; y = d3.event.y;
const transform = `translate(${dx + x},${dy + y})`;
elSelected.attr("transform", transform); elSelected.attr("transform", transform);
debug.select("#controlPoints").attr("transform", transform); debug.select("#controlPoints").attr("transform", transform);
}); });
} }
function showGroupSection() { function showGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelGroupSection").style.display = "inline-block"; document.getElementById("labelGroupSection").style.display = "inline-block";
} }
function hideGroupSection() { function hideGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelGroupSection").style.display = "none"; document.getElementById("labelGroupSection").style.display = "none";
document.getElementById("labelGroupInput").style.display = "none"; document.getElementById("labelGroupInput").style.display = "none";
document.getElementById("labelGroupInput").value = ""; document.getElementById("labelGroupInput").value = "";
@ -182,8 +189,14 @@ function editLabel() {
} }
function createNewGroup() { function createNewGroup() {
if (!this.value) {tip("Please provide a valid group name"); return;} if (!this.value) {
const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, ""); tip("Please provide a valid group name");
return;
}
const group = this.value
.toLowerCase()
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { 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");
@ -223,57 +236,64 @@ function editLabel() {
alertMessage.innerHTML = `Are you sure you want to remove alertMessage.innerHTML = `Are you sure you want to remove
${basic ? "all elements in the group" : "the entire label group"}? ${basic ? "all elements in the group" : "the entire label group"}?
<br><br>Labels to be removed: ${count}`; <br><br>Labels to be removed: ${count}`;
$("#alert").dialog({resizable: false, title: "Remove route group", $("#alert").dialog({
resizable: false,
title: "Remove route group",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
$("#labelEditor").dialog("close"); $("#labelEditor").dialog("close");
hideGroupSection(); hideGroupSection();
labels.select("#"+group).selectAll("text").each(function() { labels
.select("#" + group)
.selectAll("text")
.each(function () {
document.getElementById("textPath_" + this.id).remove(); document.getElementById("textPath_" + this.id).remove();
this.remove(); this.remove();
}); });
if (!basic) labels.select("#"+group).remove(); if (!basic) labels.select("#" + group).remove();
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function showTextSection() { function showTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelTextSection").style.display = "inline-block"; document.getElementById("labelTextSection").style.display = "inline-block";
} }
function hideTextSection() { function hideTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelTextSection").style.display = "none"; document.getElementById("labelTextSection").style.display = "none";
} }
function changeText() { function changeText() {
const input = document.getElementById("labelText").value; const input = document.getElementById("labelText").value;
const el = elSelected.select("textPath").node(); const el = elSelected.select("textPath").node();
const example = d3.select(elSelected.node().parentNode) const example = d3.select(elSelected.node().parentNode).append("text").attr("x", 0).attr("x", 0).attr("font-size", el.getAttribute("font-size")).node();
.append("text").attr("x", 0).attr("x", 0)
.attr("font-size", el.getAttribute("font-size")).node();
const lines = input.split("|"); const lines = input.split("|");
const top = (lines.length - 1) / -2; // y offset const top = (lines.length - 1) / -2; // y offset
const inner = lines.map((l, d) => { const inner = lines
.map((l, d) => {
example.innerHTML = l; example.innerHTML = l;
const left = example.getBBox().width / -2; // x offset const left = example.getBBox().width / -2; // x offset
return `<tspan x="${left}px" dy="${d?1:top}em">${l}</tspan>`; return `<tspan x="${left}px" dy="${d ? 1 : top}em">${l}</tspan>`;
}).join(""); })
.join("");
el.innerHTML = inner; el.innerHTML = inner;
example.remove(); 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() { function generateRandomName() {
let name = ""; let name = "";
if (elSelected.attr("id").slice(0,10) === "stateLabel") { if (elSelected.attr("id").slice(0, 10) === "stateLabel") {
const id = +elSelected.attr("id").slice(10); const id = +elSelected.attr("id").slice(10);
const culture = pack.states[id].culture; const culture = pack.states[id].culture;
name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture); name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture);
@ -293,12 +313,12 @@ function editLabel() {
} }
function showSizeSection() { function showSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelSizeSection").style.display = "inline-block"; document.getElementById("labelSizeSection").style.display = "inline-block";
} }
function hideSizeSection() { function hideSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelSizeSection").style.display = "none"; document.getElementById("labelSizeSection").style.display = "none";
} }
@ -317,7 +337,7 @@ function editLabel() {
const bbox = elSelected.node().getBBox(); const bbox = elSelected.node().getBBox();
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2]; const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
const path = defs.select("#textPath_" + elSelected.attr("id")); const path = defs.select("#textPath_" + elSelected.attr("id"));
path.attr("d", `M${c[0]-bbox.width},${c[1]}h${bbox.width*2}`); path.attr("d", `M${c[0] - bbox.width},${c[1]}h${bbox.width * 2}`);
drawControlPointsAndLine(); drawControlPointsAndLine();
} }
@ -329,15 +349,19 @@ function editLabel() {
function removeLabel() { function removeLabel() {
alertMessage.innerHTML = "Are you sure you want to remove the label?"; alertMessage.innerHTML = "Are you sure you want to remove the label?";
$("#alert").dialog({resizable: false, title: "Remove label", $("#alert").dialog({
resizable: false,
title: "Remove label",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
defs.select("#textPath_" + elSelected.attr("id")).remove(); defs.select("#textPath_" + elSelected.attr("id")).remove();
elSelected.remove(); elSelected.remove();
$("#labelEditor").dialog("close"); $("#labelEditor").dialog("close");
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }