mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2026-03-23 07:37:24 +01:00
505 lines
18 KiB
JavaScript
505 lines
18 KiB
JavaScript
"use strict";
|
|
let currentLabelData = null;
|
|
|
|
// Helper: extract control points from an SVG path element
|
|
function extractPathPoints(pathElement) {
|
|
if (!pathElement) return [];
|
|
const l = pathElement.getTotalLength();
|
|
if (!l) return [];
|
|
const points = [];
|
|
const increment = l / Math.max(Math.ceil(l / 200), 2);
|
|
for (let i = 0; i <= l; i += increment) {
|
|
const point = pathElement.getPointAtLength(i);
|
|
points.push([point.x, point.y]);
|
|
}
|
|
return points;
|
|
}
|
|
|
|
// Helper: find label data from the Labels data model for an SVG text element
|
|
function getLabelData(textElement) {
|
|
const id = textElement.id || "";
|
|
if (id.startsWith("stateLabel")) {
|
|
return Labels.getStateLabel(+id.slice(10));
|
|
}
|
|
// Custom labels: check for existing data-label-id attribute
|
|
const dataLabelId = textElement.getAttribute("data-label-id");
|
|
if (dataLabelId != null) {
|
|
const existing = Labels.get(+dataLabelId);
|
|
if (existing) return existing;
|
|
// Data was cleared (e.g., map regenerated) — recreate
|
|
textElement.removeAttribute("data-label-id");
|
|
}
|
|
// No data entry found — create one from SVG state (migration path)
|
|
return createCustomLabelDataFromSvg(textElement);
|
|
}
|
|
|
|
// Helper: create a CustomLabelData entry from existing SVG elements
|
|
function createCustomLabelDataFromSvg(textElement) {
|
|
const textPathEl = textElement.querySelector("textPath");
|
|
if (!textPathEl) return null;
|
|
const group = textElement.parentNode.id;
|
|
const text = [...textPathEl.querySelectorAll("tspan")].map(t => t.textContent).join("|");
|
|
const pathEl = byId("textPath_" + textElement.id);
|
|
const pathPoints = extractPathPoints(pathEl);
|
|
const startOffset = parseFloat(textPathEl.getAttribute("startOffset")) || 50;
|
|
const fontSize = parseFloat(textPathEl.getAttribute("font-size")) || 100;
|
|
const letterSpacing = parseFloat(textPathEl.getAttribute("letter-spacing") || "0");
|
|
const transform = textElement.getAttribute("transform") || undefined;
|
|
const label = Labels.addCustomLabel({ group, text, pathPoints, startOffset, fontSize, letterSpacing, transform });
|
|
textElement.setAttribute("data-label-id", String(label.i));
|
|
return label;
|
|
}
|
|
|
|
function editLabel() {
|
|
if (customization) return;
|
|
closeDialogs();
|
|
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);
|
|
|
|
// Resolve label data from the data model
|
|
currentLabelData = getLabelData(text);
|
|
|
|
$("#labelEditor").dialog({
|
|
title: "Edit Label",
|
|
resizable: false,
|
|
width: fitContent(),
|
|
position: { my: "center top+10", at: "bottom", of: text, collision: "fit" },
|
|
close: closeLabelEditor
|
|
});
|
|
|
|
drawControlPointsAndLine();
|
|
selectLabelGroup(text);
|
|
updateValues(textPath);
|
|
|
|
if (modules.editLabel) return;
|
|
modules.editLabel = true;
|
|
|
|
// add listeners
|
|
byId("labelGroupShow").on("click", showGroupSection);
|
|
byId("labelGroupHide").on("click", hideGroupSection);
|
|
byId("labelGroupSelect").on("click", changeGroup);
|
|
byId("labelGroupInput").on("change", createNewGroup);
|
|
byId("labelGroupNew").on("click", toggleNewGroupInput);
|
|
byId("labelGroupRemove").on("click", removeLabelsGroup);
|
|
|
|
byId("labelTextShow").on("click", showTextSection);
|
|
byId("labelTextHide").on("click", hideTextSection);
|
|
byId("labelText").on("input", changeText);
|
|
byId("labelTextRandom").on("click", generateRandomName);
|
|
|
|
byId("labelEditStyle").on("click", editGroupStyle);
|
|
|
|
byId("labelSizeShow").on("click", showSizeSection);
|
|
byId("labelSizeHide").on("click", hideSizeSection);
|
|
byId("labelStartOffset").on("input", changeStartOffset);
|
|
byId("labelRelativeSize").on("input", changeRelativeSize);
|
|
|
|
byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
|
|
byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
|
|
byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
|
|
|
|
byId("labelAlign").on("click", editLabelAlign);
|
|
byId("labelLegend").on("click", editLabelLegend);
|
|
byId("labelRemoveSingle").on("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");
|
|
}
|
|
}
|
|
|
|
function selectLabelGroup(text) {
|
|
const group = text.parentNode.id;
|
|
|
|
if (group === "states" || group === "burgLabels") {
|
|
byId("labelGroupShow").style.display = "none";
|
|
return;
|
|
}
|
|
|
|
hideGroupSection();
|
|
const select = byId("labelGroupSelect");
|
|
select.options.length = 0; // remove all options
|
|
|
|
labels.selectAll(":scope > g").each(function () {
|
|
if (this.id === "states") return;
|
|
if (this.id === "burgLabels") return;
|
|
select.options.add(new Option(this.id, this.id, false, this.id === group));
|
|
});
|
|
}
|
|
|
|
function updateValues(textPath) {
|
|
if (currentLabelData && currentLabelData.type === "custom") {
|
|
// Custom labels: read all values from data model
|
|
byId("labelText").value = currentLabelData.text || "";
|
|
byId("labelStartOffset").value = currentLabelData.startOffset || 50;
|
|
byId("labelRelativeSize").value = currentLabelData.fontSize || 100;
|
|
byId("labelLetterSpacingSize").value = currentLabelData.letterSpacing || 0;
|
|
} else {
|
|
// State labels and fallback: read from SVG, use data model fontSize if available
|
|
byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
|
|
byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset")) || 50;
|
|
byId("labelRelativeSize").value = (currentLabelData && currentLabelData.fontSize) || parseFloat(textPath.getAttribute("font-size")) || 100;
|
|
let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
|
|
byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
|
|
}
|
|
}
|
|
|
|
function drawControlPointsAndLine() {
|
|
debug.select("#controlPoints").remove();
|
|
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
|
|
const path = byId("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));
|
|
}
|
|
}
|
|
|
|
function addControlPoint(point) {
|
|
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);
|
|
redrawLabelPath();
|
|
}
|
|
|
|
function redrawLabelPath() {
|
|
const path = byId("textPath_" + elSelected.attr("id"));
|
|
lineGen.curve(d3.curveNatural);
|
|
const points = [];
|
|
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);
|
|
// Sync path control points back to data model
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { pathPoints: points });
|
|
}
|
|
|
|
function clickControlPoint() {
|
|
this.remove();
|
|
redrawLabelPath();
|
|
}
|
|
|
|
function addInterimControlPoint() {
|
|
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);
|
|
});
|
|
|
|
let index = dists.length;
|
|
if (dists.length > 1) {
|
|
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;
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
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);
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { transform });
|
|
});
|
|
}
|
|
|
|
function showGroupSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
|
byId("labelGroupSection").style.display = "inline-block";
|
|
}
|
|
|
|
function hideGroupSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
|
byId("labelGroupSection").style.display = "none";
|
|
byId("labelGroupInput").style.display = "none";
|
|
byId("labelGroupInput").value = "";
|
|
byId("labelGroupSelect").style.display = "inline-block";
|
|
}
|
|
|
|
function changeGroup() {
|
|
byId(this.value).appendChild(elSelected.node());
|
|
if (currentLabelData && currentLabelData.type === "custom") {
|
|
Labels.updateLabel(currentLabelData.i, { group: this.value });
|
|
}
|
|
}
|
|
|
|
function toggleNewGroupInput() {
|
|
if (labelGroupInput.style.display === "none") {
|
|
labelGroupInput.style.display = "inline-block";
|
|
labelGroupInput.focus();
|
|
labelGroupSelect.style.display = "none";
|
|
} 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 (byId(group)) {
|
|
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");
|
|
return;
|
|
}
|
|
|
|
// just rename if only 1 element left
|
|
const oldGroup = elSelected.node().parentNode;
|
|
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
|
|
byId("labelGroupSelect").selectedOptions[0].remove();
|
|
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
|
|
// Update data model for labels in the old group
|
|
const oldGroupName = oldGroup.id;
|
|
Labels.getByGroup(oldGroupName).forEach(l => Labels.updateLabel(l.i, { group }));
|
|
oldGroup.id = group;
|
|
toggleNewGroupInput();
|
|
byId("labelGroupInput").value = "";
|
|
return;
|
|
}
|
|
|
|
const newGroup = elSelected.node().parentNode.cloneNode(false);
|
|
byId("labels").appendChild(newGroup);
|
|
newGroup.id = group;
|
|
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
|
|
byId(group).appendChild(elSelected.node());
|
|
// Update data model group for the moved label
|
|
if (currentLabelData && currentLabelData.type === "custom") {
|
|
Labels.updateLabel(currentLabelData.i, { group });
|
|
}
|
|
|
|
toggleNewGroupInput();
|
|
byId("labelGroupInput").value = "";
|
|
}
|
|
|
|
function removeLabelsGroup() {
|
|
const group = elSelected.node().parentNode.id;
|
|
const basic = group === "states" || group === "addedLabels";
|
|
const count = elSelected.node().parentNode.childElementCount;
|
|
alertMessage.innerHTML = /* html */ `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();
|
|
// Remove from data model
|
|
if (basic && group === "states") {
|
|
Labels.removeByType("state");
|
|
} else {
|
|
Labels.removeByGroup(group);
|
|
}
|
|
labels
|
|
.select("#" + group)
|
|
.selectAll("text")
|
|
.each(function () {
|
|
byId("textPath_" + this.id).remove();
|
|
this.remove();
|
|
});
|
|
if (!basic) labels.select("#" + group).remove();
|
|
},
|
|
Cancel: function () {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function showTextSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
|
byId("labelTextSection").style.display = "inline-block";
|
|
}
|
|
|
|
function hideTextSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
|
byId("labelTextSection").style.display = "none";
|
|
}
|
|
|
|
function changeText() {
|
|
const input = byId("labelText").value;
|
|
const el = elSelected.select("textPath").node();
|
|
|
|
const lines = input.split("|");
|
|
if (lines.length > 1) {
|
|
const top = (lines.length - 1) / -2; // y offset
|
|
el.innerHTML = lines.map((line, index) => `<tspan x="0" dy="${index ? 1 : top}em">${line}</tspan>`).join("");
|
|
} else el.innerHTML = `<tspan x="0">${lines}</tspan>`;
|
|
|
|
// Update data model
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { text: input });
|
|
|
|
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 (currentLabelData && currentLabelData.type === "state") {
|
|
const culture = pack.states[currentLabelData.stateId].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);
|
|
}
|
|
byId("labelText").value = name;
|
|
changeText();
|
|
}
|
|
|
|
function editGroupStyle() {
|
|
const g = elSelected.node().parentNode.id;
|
|
editStyle("labels", g);
|
|
}
|
|
|
|
function showSizeSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
|
byId("labelSizeSection").style.display = "inline-block";
|
|
}
|
|
|
|
function hideSizeSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
|
byId("labelSizeSection").style.display = "none";
|
|
}
|
|
|
|
function showLetterSpacingSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
|
byId("labelLetterSpacingSection").style.display = "inline-block";
|
|
}
|
|
|
|
function hideLetterSpacingSection() {
|
|
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
|
byId("labelLetterSpacingSection").style.display = "none";
|
|
}
|
|
|
|
function changeStartOffset() {
|
|
elSelected.select("textPath").attr("startOffset", this.value + "%");
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { startOffset: +this.value });
|
|
tip("Label offset: " + this.value + "%");
|
|
}
|
|
|
|
function changeRelativeSize() {
|
|
elSelected.select("textPath").attr("font-size", this.value + "%");
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { fontSize: +this.value });
|
|
tip("Label relative size: " + this.value + "%");
|
|
changeText();
|
|
}
|
|
|
|
function changeLetterSpacingSize() {
|
|
elSelected.select("textPath").attr("letter-spacing", this.value + "px");
|
|
if (currentLabelData) Labels.updateLabel(currentLabelData.i, { letterSpacing: +this.value });
|
|
tip("Label letter-spacing size: " + this.value + "px");
|
|
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}`);
|
|
drawControlPointsAndLine();
|
|
// Sync aligned path to data model
|
|
if (currentLabelData) {
|
|
const pathEl = byId("textPath_" + elSelected.attr("id"));
|
|
Labels.updateLabel(currentLabelData.i, { pathPoints: extractPathPoints(pathEl) });
|
|
}
|
|
}
|
|
|
|
function editLabelLegend() {
|
|
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");
|
|
if (currentLabelData) Labels.removeLabel(currentLabelData.i);
|
|
defs.select("#textPath_" + elSelected.attr("id")).remove();
|
|
elSelected.remove();
|
|
$("#labelEditor").dialog("close");
|
|
},
|
|
Cancel: function () {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function closeLabelEditor() {
|
|
debug.select("#controlPoints").remove();
|
|
unselect();
|
|
}
|
|
}
|