From bb6941a1f575a0450fe93e2a1eaadc44c20b97e3 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 12 Sep 2021 01:51:51 +0300 Subject: [PATCH] removeElementOnKey - rewrite on vanilla ks --- modules/ui/hotkeys.js | 10 ++- modules/ui/labels-editor.js | 150 +++++++++++++++++++++--------------- 2 files changed, 94 insertions(+), 66 deletions(-) diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js index a6ee949e..3cf00060 100644 --- a/modules/ui/hotkeys.js +++ b/modules/ui/hotkeys.js @@ -136,10 +136,14 @@ function toggleMode() { } } -// trigger trash button click on "Delete" keypress function removeElementOnKey() { - $(".dialog:visible .fastDelete").click(); - $("button:visible:contains('Remove')").click(); + const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find(dialog => dialog.style.display !== "none"); + 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() { diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js index 18b1f8f6..ba30fd55 100644 --- a/modules/ui/labels-editor.js +++ b/modules/ui/labels-editor.js @@ -11,7 +11,9 @@ function editLabel() { viewbox.on("touchmove mousemove", showEditorTips); $("#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"}, close: closeLabelEditor }); @@ -49,8 +51,8 @@ function editLabel() { 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.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"); } @@ -61,7 +63,7 @@ function editLabel() { const select = document.getElementById("labelGroupSelect"); select.options.length = 0; // remove all options - labels.selectAll(":scope > g").each(function() { + labels.selectAll(":scope > g").each(function () { if (this.id === "burgLabels") return; select.options.add(new Option(this.id, this.id, false, this.id === group)); }); @@ -81,14 +83,13 @@ function editLabel() { 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() { @@ -101,9 +102,12 @@ function editLabel() { 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); @@ -118,52 +122,55 @@ 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); + 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)})`; + 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.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.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.getElementById("labelGroupSelect").style.display = "inline-block"; } function changeGroup() { @@ -178,12 +185,18 @@ function editLabel() { } else { 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"); @@ -223,57 +236,64 @@ function editLabel() { alertMessage.innerHTML = `Are you sure you want to remove ${basic ? "all elements in the group" : "the entire label group"}?

Labels to be removed: ${count}`; - $("#alert").dialog({resizable: false, title: "Remove route group", + $("#alert").dialog({ + resizable: false, + title: "Remove route group", buttons: { - Remove: function() { + 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(); + 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");} + Cancel: function () { + $(this).dialog("close"); + } } }); } - + 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"; } 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"; } - + 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 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 `${l}`; - }).join(""); + const inner = lines + .map((l, d) => { + example.innerHTML = l; + const left = example.getBBox().width / -2; // x offset + return `${l}`; + }) + .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") { + 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); @@ -293,12 +313,12 @@ function editLabel() { } 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"; } 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"; } @@ -317,7 +337,7 @@ function editLabel() { 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}`); + path.attr("d", `M${c[0] - bbox.width},${c[1]}h${bbox.width * 2}`); drawControlPointsAndLine(); } @@ -329,15 +349,19 @@ function editLabel() { function removeLabel() { 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: { - Remove: function() { + Remove: function () { $(this).dialog("close"); defs.select("#textPath_" + elSelected.attr("id")).remove(); elSelected.remove(); $("#labelEditor").dialog("close"); }, - Cancel: function() {$(this).dialog("close");} + Cancel: function () { + $(this).dialog("close"); + } } }); }