mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 03:51:23 +01:00
265 lines
9.3 KiB
JavaScript
265 lines
9.3 KiB
JavaScript
|
|
function editIcon() {
|
|
if (customization) return;
|
|
if (elSelected) if (this.isSameNode(elSelected.node())) return;
|
|
|
|
unselect();
|
|
closeDialogs("#iconEditor, .stable");
|
|
elSelected = d3.select(this).call(d3.drag().on("start", elementDrag)).classed("draggable", true);
|
|
|
|
// update group parameters
|
|
const group = d3.select(this.parentNode);
|
|
iconUpdateGroups();
|
|
iconGroup.value = group.attr("id");
|
|
iconFillColor.value = group.attr("fill");
|
|
iconStrokeColor.value = group.attr("stroke");
|
|
iconSize.value = group.attr("size");
|
|
iconStrokeWidth.value = group.attr("stroke-width");
|
|
|
|
$("#iconEditor").dialog({
|
|
title: "Edit icon: " + group.attr("id"),
|
|
minHeight: 30, width: "auto", resizable: false,
|
|
position: {my: "center top+20", at: "top", of: d3.event},
|
|
close: unselect
|
|
});
|
|
|
|
if (modules.editIcon) {return;}
|
|
modules.editIcon = true;
|
|
|
|
$("#iconGroups").click(function() {
|
|
$("#iconEditor > button").not(this).toggle();
|
|
$("#iconGroupsSelection").toggle();
|
|
});
|
|
|
|
function iconUpdateGroups() {
|
|
iconGroup.innerHTML = "";
|
|
const anchor = group.attr("id").includes("anchor");
|
|
icons.selectAll("g").each(function(d) {
|
|
const id = d3.select(this).attr("id");
|
|
if (id === "burgs") return;
|
|
if (!anchor && id.includes("anchor")) return;
|
|
if (anchor && !id.includes("anchor")) return;
|
|
const opt = document.createElement("option");
|
|
opt.value = opt.innerHTML = id;
|
|
iconGroup.add(opt);
|
|
});
|
|
}
|
|
|
|
$("#iconGroup").change(function() {
|
|
const newGroup = this.value;
|
|
const to = $("#icons > #"+newGroup);
|
|
$(elSelected.node()).detach().appendTo(to);
|
|
});
|
|
|
|
$("#iconCopy").click(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
const copy = elSelected.node().cloneNode();
|
|
copy.removeAttribute("data-id"); // remove assignment to burg if any
|
|
const tr = parseTransform(copy.getAttribute("transform"));
|
|
const shift = 10 / Math.sqrt(scale);
|
|
let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
|
|
for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
|
|
transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
|
|
}
|
|
copy.setAttribute("transform", transform);
|
|
group.node().insertBefore(copy, null);
|
|
copy.addEventListener("click", editIcon);
|
|
});
|
|
|
|
$("#iconRemoveGroup").click(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
const count = group.selectAll("*").size();
|
|
if (count < 2) {
|
|
group.remove();
|
|
$("#labelEditor").dialog("close");
|
|
return;
|
|
}
|
|
const message = "Are you sure you want to remove all '" + iconGroup.value + "' icons (" + count + ")?";
|
|
alertMessage.innerHTML = message;
|
|
$("#alert").dialog({resizable: false, title: "Remove icon group",
|
|
buttons: {
|
|
Remove: function() {
|
|
$(this).dialog("close");
|
|
group.remove();
|
|
$("#iconEditor").dialog("close");
|
|
},
|
|
Cancel: function() {$(this).dialog("close");}
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#iconColors").click(function() {
|
|
$("#iconEditor > button").not(this).toggle();
|
|
$("#iconColorsSection").toggle();
|
|
});
|
|
|
|
$("#iconFillColor").change(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
group.attr("fill", this.value);
|
|
});
|
|
|
|
$("#iconStrokeColor").change(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
group.attr("stroke", this.value);
|
|
});
|
|
|
|
$("#iconSetSize").click(function() {
|
|
$("#iconEditor > button").not(this).toggle();
|
|
$("#iconSizeSection").toggle();
|
|
});
|
|
|
|
$("#iconSize").change(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
const size = +this.value;
|
|
group.attr("size", size);
|
|
group.selectAll("*").each(function() {d3.select(this).attr("width", size).attr("height", size)});
|
|
});
|
|
|
|
$("#iconStrokeWidth").change(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
group.attr("stroke-width", this.value);
|
|
});
|
|
|
|
$("#iconRemove").click(function() {
|
|
alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
|
|
$("#alert").dialog({resizable: false, title: "Remove icon",
|
|
buttons: {
|
|
Remove: function() {
|
|
$(this).dialog("close");
|
|
elSelected.remove();
|
|
$("#iconEditor").dialog("close");
|
|
},
|
|
Cancel: function() {$(this).dialog("close");}
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
function editReliefIcon() {
|
|
if (customization) return;
|
|
if (elSelected) if (this.isSameNode(elSelected.node())) return;
|
|
|
|
unselect();
|
|
closeDialogs("#reliefEditor, .stable");
|
|
elSelected = d3.select(this).raise().call(d3.drag().on("start", elementDrag)).classed("draggable", true);
|
|
const group = elSelected.node().parentNode.id;
|
|
reliefGroup.value = group;
|
|
|
|
let bulkRemoveSection = document.getElementById("reliefBulkRemoveSection");
|
|
if (bulkRemoveSection.style.display != "none") reliefBulkRemove.click();
|
|
|
|
$("#reliefEditor").dialog({
|
|
title: "Edit relief icon",
|
|
minHeight: 30, width: "auto", resizable: false,
|
|
position: {my: "center top+40", at: "top", of: d3.event},
|
|
close: unselect
|
|
});
|
|
|
|
if (modules.editReliefIcon) {return;}
|
|
modules.editReliefIcon = true;
|
|
|
|
$("#reliefGroups").click(function() {
|
|
$("#reliefEditor > button").not(this).toggle();
|
|
$("#reliefGroupsSelection").toggle();
|
|
});
|
|
|
|
$("#reliefGroup").change(function() {
|
|
const type = this.value;
|
|
const bbox = elSelected.node().getBBox();
|
|
const cx = bbox.x;
|
|
const cy = bbox.y + bbox.height / 2;
|
|
const cell = diagram.find(cx, cy).index;
|
|
const height = cell !== undefined ? cells[cell].height : 50;
|
|
elSelected.remove();
|
|
elSelected = addReliefIcon(height / 100, type, cx, cy, cell);
|
|
elSelected.call(d3.drag().on("start", elementDrag));
|
|
});
|
|
|
|
$("#reliefCopy").click(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
const copy = elSelected.node().cloneNode(true);
|
|
const tr = parseTransform(copy.getAttribute("transform"));
|
|
const shift = 10 / Math.sqrt(scale);
|
|
let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
|
|
for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
|
|
transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
|
|
}
|
|
copy.setAttribute("transform", transform);
|
|
group.node().insertBefore(copy, null);
|
|
copy.addEventListener("click", editReliefIcon);
|
|
});
|
|
|
|
$("#reliefAddfromEditor").click(function() {
|
|
clickToAdd(); // to load on click event function
|
|
$("#addRelief").click();
|
|
});
|
|
|
|
$("#reliefRemoveGroup").click(function() {
|
|
const group = d3.select(elSelected.node().parentNode);
|
|
const count = group.selectAll("*").size();
|
|
if (count < 2) {
|
|
group.selectAll("*").remove();
|
|
$("#labelEditor").dialog("close");
|
|
return;
|
|
}
|
|
const message = "Are you sure you want to remove all '" + reliefGroup.value + "' icons (" + count + ")?";
|
|
alertMessage.innerHTML = message;
|
|
$("#alert").dialog({resizable: false, title: "Remove all icons within group",
|
|
buttons: {
|
|
Remove: function() {
|
|
$(this).dialog("close");
|
|
group.selectAll("*").remove();
|
|
$("#reliefEditor").dialog("close");
|
|
},
|
|
Cancel: function() {$(this).dialog("close");}
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#reliefBulkRemove").click(function() {
|
|
$("#reliefEditor > button").not(this).toggle();
|
|
let section = document.getElementById("reliefBulkRemoveSection");
|
|
if (section.style.display === "none") {
|
|
section.style.display = "inline-block";
|
|
tip("Drag to remove relief icons in radius", true);
|
|
viewbox.style("cursor", "crosshair").call(d3.drag().on("drag", dragToRemoveReliefIcons));
|
|
customization = 5;
|
|
} else {
|
|
section.style.display = "none";
|
|
restoreDefaultEvents();
|
|
customization = 0;
|
|
}
|
|
});
|
|
|
|
function dragToRemoveReliefIcons() {
|
|
let point = d3.mouse(this);
|
|
let cell = diagram.find(point[0], point[1]).index;
|
|
let radius = +reliefBulkRemoveRadius.value;
|
|
let r = rn(6 / graphSize * radius, 1);
|
|
moveCircle(point[0], point[1], r);
|
|
let selection = defineBrushSelection(cell, radius);
|
|
if (selection) removeReliefIcons(selection);
|
|
}
|
|
|
|
function removeReliefIcons(selection) {
|
|
if (selection.length === 0) return;
|
|
selection.map(function(index) {
|
|
const selected = terrain.selectAll("g").selectAll("g[data-cell='"+index+"']");
|
|
selected.remove();
|
|
});
|
|
}
|
|
|
|
$("#reliefRemove").click(function() {
|
|
alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
|
|
$("#alert").dialog({resizable: false, title: "Remove relief icon",
|
|
buttons: {
|
|
Remove: function() {
|
|
$(this).dialog("close");
|
|
elSelected.remove();
|
|
$("#reliefEditor").dialog("close");
|
|
},
|
|
Cancel: function() {$(this).dialog("close");}
|
|
}
|
|
})
|
|
});
|
|
}
|