From d6c18fb6a2e468f453e1ef6810b360666c8be9ff Mon Sep 17 00:00:00 2001 From: Azgaar Date: Tue, 13 Jul 2021 14:51:21 +0300 Subject: [PATCH] ability to remove icons in bulk via button --- index.html | 2 +- modules/ui/relief-editor.js | 110 ++++++++++++++++++++++-------------- 2 files changed, 70 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 0b2c9e7a..7cefab38 100644 --- a/index.html +++ b/index.html @@ -1924,7 +1924,7 @@ - + diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js index 7cd2d1d2..ae924d49 100644 --- a/modules/ui/relief-editor.js +++ b/modules/ui/relief-editor.js @@ -12,7 +12,9 @@ function editReliefIcon() { updateReliefSizeInput(); $("#reliefEditor").dialog({ - title: "Edit Relief Icons", resizable: false, width: "27em", + title: "Edit Relief Icons", + resizable: false, + width: "27em", position: {my: "left top", at: "left+10 top+10", of: "#map"}, close: closeReliefEditor }); @@ -40,26 +42,27 @@ function editReliefIcon() { const dx = +this.getAttribute("x") - d3.event.x; const dy = +this.getAttribute("y") - d3.event.y; - d3.event.on("drag", function() { - const x = d3.event.x, y = d3.event.y; - this.setAttribute("x", dx+x); - this.setAttribute("y", dy+y); + d3.event.on("drag", function () { + const x = d3.event.x, + y = d3.event.y; + this.setAttribute("x", dx + x); + this.setAttribute("y", dy + y); }); } function restoreEditMode() { - if (!reliefTools.querySelector("button.pressed")) enterIndividualMode(); else - if (reliefBulkAdd.classList.contains("pressed")) enterBulkAddMode(); else - if (reliefBulkRemove.classList.contains("pressed")) enterBulkRemoveMode(); + if (!reliefTools.querySelector("button.pressed")) enterIndividualMode(); + else if (reliefBulkAdd.classList.contains("pressed")) enterBulkAddMode(); + else if (reliefBulkRemove.classList.contains("pressed")) enterBulkRemoveMode(); } function updateReliefIconSelected() { const type = elSelected.attr("href") || elSelected.attr("data-type"); - const button = reliefIconsDiv.querySelector("svg[data-type='"+type+"']"); + const button = reliefIconsDiv.querySelector("svg[data-type='" + type + "']"); reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed")); button.classList.add("pressed"); - reliefIconsDiv.querySelectorAll("div").forEach(b => b.style.display = "none"); + reliefIconsDiv.querySelectorAll("div").forEach(b => (b.style.display = "none")); button.parentNode.style.display = "block"; reliefEditorSet.value = button.parentNode.dataset.type; } @@ -78,6 +81,7 @@ function editReliefIcon() { reliefSpacingDiv.style.display = "none"; reliefIconsSeletionAny.style.display = "none"; + removeCircle(); updateReliefSizeInput(); restoreDefaultEvents(); clearMainTip(); @@ -93,7 +97,8 @@ function editReliefIcon() { reliefIconsSeletionAny.style.display = "none"; const pressedType = reliefIconsDiv.querySelector("svg.pressed"); - if (pressedType.id === "reliefIconsSeletionAny") { // in "any" is pressed, select first type + if (pressedType.id === "reliefIconsSeletionAny") { + // in "any" is pressed, select first type reliefIconsSeletionAny.classList.remove("pressed"); reliefIconsDiv.querySelector("svg").classList.add("pressed"); } @@ -111,7 +116,7 @@ function editReliefIcon() { function dragToAdd() { const pressed = reliefIconsDiv.querySelector("svg.pressed"); - if (!pressed) {tip("Please select an icon", false, error); return;} + if (!pressed) return tip("Please select an icon", false, error); const type = pressed.dataset.type; const r = +reliefRadiusNumber.value; @@ -121,7 +126,7 @@ function editReliefIcon() { // build a quadtree const tree = d3.quadtree(); const positions = []; - terrain.selectAll("use").each(function() { + terrain.selectAll("use").each(function () { const x = +this.getAttribute("x") + this.getAttribute("width") / 2; const y = +this.getAttribute("y") + this.getAttribute("height") / 2; tree.add([x, y, x]); @@ -129,11 +134,11 @@ function editReliefIcon() { positions.push(box.y + box.height); }); - d3.event.on("drag", function() { + d3.event.on("drag", function () { const p = d3.mouse(this); moveCircle(p[0], p[1], r); - d3.range(Math.ceil(r/10)).forEach(function() { + d3.range(Math.ceil(r / 10)).forEach(function () { const a = Math.PI * 2 * Math.random(); const rad = r * Math.random(); const cx = p[0] + rad * Math.cos(a); @@ -142,21 +147,27 @@ function editReliefIcon() { if (tree.find(cx, cy, spacing)) return; // too close to existing icon if (pack.cells.h[findCell(cx, cy)] < 20) return; // on water cell - const h = rn(size / 2 * (Math.random() * .4 + .8), 2); - const x = rn(cx-h, 2); - const y = rn(cy-h, 2); + const h = rn((size / 2) * (Math.random() * 0.4 + 0.8), 2); + const x = rn(cx - h, 2); + const y = rn(cy - h, 2); const z = y + h * 2; - const s = rn(h*2, 2); + const s = rn(h * 2, 2); let nth = 1; - while (positions[nth] && z > positions[nth]) {nth++;} + while (positions[nth] && z > positions[nth]) { + nth++; + } tree.add([cx, cy]); positions.push(z); - terrain.insert("use", ":nth-child("+nth+")").attr("href", type) - .attr("x", x).attr("y", y).attr("width", s).attr("height", s); + terrain + .insert("use", ":nth-child(" + nth + ")") + .attr("href", type) + .attr("x", x) + .attr("y", y) + .attr("width", s) + .attr("height", s); }); - }); } @@ -169,25 +180,25 @@ function editReliefIcon() { reliefSpacingDiv.style.display = "none"; reliefIconsSeletionAny.style.display = "inline-block"; - viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToRemove)).on("touchmove mousemove", moveBrush);; + viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToRemove)).on("touchmove mousemove", moveBrush); tip("Drag to remove relief icons in radius", true); } function dragToRemove() { const pressed = reliefIconsDiv.querySelector("svg.pressed"); - if (!pressed) {tip("Please select an icon", false, error); return;} + if (!pressed) return tip("Please select an icon", false, error); const r = +reliefRadiusNumber.value; const type = pressed.dataset.type; - const icons = type ? terrain.selectAll("use[href='"+type+"']") : terrain.selectAll("use"); + const icons = type ? terrain.selectAll("use[href='" + type + "']") : terrain.selectAll("use"); const tree = d3.quadtree(); - icons.each(function() { + icons.each(function () { const x = +this.getAttribute("x") + this.getAttribute("width") / 2; const y = +this.getAttribute("y") + this.getAttribute("height") / 2; tree.add([x, y, this]); }); - d3.event.on("drag", function() { + d3.event.on("drag", function () { const p = d3.mouse(this); moveCircle(p[0], p[1], r); tree.findAll(p[0], p[1], r).forEach(f => f[2].remove()); @@ -200,20 +211,21 @@ function editReliefIcon() { const shift = (size - +elSelected.attr("width")) / 2; elSelected.attr("width", size).attr("height", size); - const x = +elSelected.attr("x"), y = +elSelected.attr("y"); - elSelected.attr("x", x-shift).attr("y", y-shift); + const x = +elSelected.attr("x"), + y = +elSelected.attr("y"); + elSelected.attr("x", x - shift).attr("y", y - shift); } function changeIconsSet() { const set = reliefEditorSet.value; - reliefIconsDiv.querySelectorAll("div").forEach(b => b.style.display = "none"); + reliefIconsDiv.querySelectorAll("div").forEach(b => (b.style.display = "none")); reliefIconsDiv.querySelector("div[data-type='" + set + "']").style.display = "block"; } function changeIcon() { if (this.classList.contains("pressed")) return; - reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed")) + reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed")); this.classList.add("pressed"); if (reliefIndividual.classList.contains("pressed")) { @@ -226,9 +238,11 @@ function editReliefIcon() { const parent = elSelected.node().parentNode; const copy = elSelected.node().cloneNode(true); - let x = +elSelected.attr("x") - 3, y = +elSelected.attr("y") - 3; - while (parent.querySelector("[x='"+x+"']","[x='"+y+"']")) { - x -= 3; y -= 3; + let x = +elSelected.attr("x") - 3, + y = +elSelected.attr("y") - 3; + while (parent.querySelector("[x='" + x + "']", "[x='" + y + "']")) { + x -= 3; + y -= 3; } copy.setAttribute("x", x); @@ -237,15 +251,30 @@ function editReliefIcon() { } function removeIcon() { - alertMessage.innerHTML = `Are you sure you want to remove the icon?`; - $("#alert").dialog({resizable: false, title: "Remove relief icon", + let selection = null; + const pressed = reliefTools.querySelector("button.pressed"); + if (pressed.id === "reliefIndividual") { + alertMessage.innerHTML = `Are you sure you want to remove the icon?`; + selection = elSelected; + } else { + const type = reliefIconsDiv.querySelector("svg.pressed")?.dataset.type; + selection = type ? terrain.selectAll("use[href='" + type + "']") : terrain.selectAll("use"); + const size = selection.size(); + alertMessage.innerHTML = type ? `Are you sure you want to remove all ${type} icons (${size})?` : `Are you sure you want to remove all icons (${size})?`; + } + + $("#alert").dialog({ + resizable: false, + title: "Remove relief icons", buttons: { - Remove: function() { + Remove: function () { + if (selection) selection.remove(); $(this).dialog("close"); - elSelected.remove(); $("#reliefEditor").dialog("close"); }, - Cancel: function() {$(this).dialog("close");} + Cancel: function () { + $(this).dialog("close"); + } } }); } @@ -256,5 +285,4 @@ function editReliefIcon() { unselect(); clearMainTip(); } - }