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

Merge pull request #1117 from Azgaar/letter-spacing

Browse source 
Letter spacing
This commit is contained in:
Azgaar 2024-09-01 14:21:01 +02:00 • committed by GitHub
commit 424077c7eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 270 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -1181,6 +1181,15 @@
</tr> </tr>
</tbody> </tbody>
<tbody id="styleLetterSpacing">
<tr data-tip="Set letter spacing">
<td>Letter spacing</td>
<td>
<slider-input id="styleLetterSpacingInput" min="0" max="20" step=".01"></slider-input>
</td>
</tr>
</tbody>
<tbody id="styleStrokeDash"> <tbody id="styleStrokeDash">
<tr data-tip="Set stroke dash array (e.g. 5 2) and linecap"> <tr data-tip="Set stroke dash array (e.g. 5 2) and linecap">
<td>Stroke dash</td> <td>Stroke dash</td>
@ -2678,6 +2687,24 @@
/> />
</div> </div>
<button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
<div id="labelLetterSpacingSection" style="display: none">
<button
id="labelLetterSpacingHide"
data-tip="Hide the letter spacing section"
class="icon-text-width"
></button>
<slider-input
id="labelLetterSpacingSize"
style="display: inline-block"
data-tip="Set the letter spacing size for this label"
min="0"
max="20"
step=".01"
value="0"
></slider-input>
</div>
<button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button> <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
<button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button> <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
<button <button
@ -8024,7 +8051,7 @@
<script src="main.js?v=1.100.00"></script> <script src="main.js?v=1.100.00"></script>
<script defer src="modules/relief-icons.js?v=1.99.05"></script> <script defer src="modules/relief-icons.js?v=1.99.05"></script>
<script defer src="modules/ui/style.js?v=1.99.12"></script> <script defer src="modules/ui/style.js?v=1.101.00"></script>
<script defer src="modules/ui/editors.js?v=1.99.05"></script> <script defer src="modules/ui/editors.js?v=1.99.05"></script>
<script defer src="modules/ui/tools.js?v=1.100.00"></script> <script defer src="modules/ui/tools.js?v=1.100.00"></script>
<script defer src="modules/ui/world-configurator.js?v=1.99.00"></script> <script defer src="modules/ui/world-configurator.js?v=1.99.00"></script>
@ -8040,7 +8067,7 @@
<script defer src="modules/ui/ice-editor.js?v=1.99.00"></script> <script defer src="modules/ui/ice-editor.js?v=1.99.00"></script>
<script defer src="modules/ui/lakes-editor.js?v=1.99.00"></script> <script defer src="modules/ui/lakes-editor.js?v=1.99.00"></script>
<script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script> <script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script>
<script defer src="modules/ui/labels-editor.js?v=1.99.00"></script> <script defer src="modules/ui/labels-editor.js?v=1.101.00"></script>
<script defer src="modules/ui/rivers-editor.js?v=1.99.00"></script> <script defer src="modules/ui/rivers-editor.js?v=1.99.00"></script>
<script defer src="modules/ui/rivers-creator.js?v=1.99.00"></script> <script defer src="modules/ui/rivers-creator.js?v=1.99.00"></script>
<script defer src="modules/ui/relief-editor.js?v=1.99.00"></script> <script defer src="modules/ui/relief-editor.js?v=1.99.00"></script>

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

@ -26,28 +26,32 @@ function editLabel() {
modules.editLabel = true; modules.editLabel = true;
// add listeners // add listeners
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection); byId("labelGroupShow").on("click", showGroupSection);
document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection); byId("labelGroupHide").on("click", hideGroupSection);
document.getElementById("labelGroupSelect").addEventListener("click", changeGroup); byId("labelGroupSelect").on("click", changeGroup);
document.getElementById("labelGroupInput").addEventListener("change", createNewGroup); byId("labelGroupInput").on("change", createNewGroup);
document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput); byId("labelGroupNew").on("click", toggleNewGroupInput);
document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup); byId("labelGroupRemove").on("click", removeLabelsGroup);
document.getElementById("labelTextShow").addEventListener("click", showTextSection); byId("labelTextShow").on("click", showTextSection);
document.getElementById("labelTextHide").addEventListener("click", hideTextSection); byId("labelTextHide").on("click", hideTextSection);
document.getElementById("labelText").addEventListener("input", changeText); byId("labelText").on("input", changeText);
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName); byId("labelTextRandom").on("click", generateRandomName);
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle); byId("labelEditStyle").on("click", editGroupStyle);
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection); byId("labelSizeShow").on("click", showSizeSection);
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection); byId("labelSizeHide").on("click", hideSizeSection);
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset); byId("labelStartOffset").on("input", changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize); byId("labelRelativeSize").on("input", changeRelativeSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign); byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend); byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel); byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
byId("labelAlign").on("click", editLabelAlign);
byId("labelLegend").on("click", editLabelLegend);
byId("labelRemoveSingle").on("click", removeLabel);
function showEditorTips() { function showEditorTips() {
showMainTip(); showMainTip();
@ -62,12 +66,12 @@ function editLabel() {
const group = text.parentNode.id; const group = text.parentNode.id;
if (group === "states" || group === "burgLabels") { if (group === "states" || group === "burgLabels") {
document.getElementById("labelGroupShow").style.display = "none"; byId("labelGroupShow").style.display = "none";
return; return;
} }
hideGroupSection(); hideGroupSection();
const select = document.getElementById("labelGroupSelect"); const select = byId("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 () {
@ -78,17 +82,17 @@ function editLabel() {
} }
function updateValues(textPath) { function updateValues(textPath) {
document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")] byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
.map(tspan => tspan.textContent) byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
.join("|"); byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset")); let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size")); byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
} }
function drawControlPointsAndLine() { function drawControlPointsAndLine() {
debug.select("#controlPoints").remove(); debug.select("#controlPoints").remove();
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform")); debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
const path = document.getElementById("textPath_" + elSelected.attr("id")); const path = byId("textPath_" + elSelected.attr("id"));
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint); debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
const l = path.getTotalLength(); const l = path.getTotalLength();
if (!l) return; if (!l) return;
@ -117,7 +121,7 @@ function editLabel() {
} }
function redrawLabelPath() { function redrawLabelPath() {
const path = document.getElementById("textPath_" + elSelected.attr("id")); const path = byId("textPath_" + elSelected.attr("id"));
lineGen.curve(d3.curveBundle.beta(1)); lineGen.curve(d3.curveBundle.beta(1));
const points = []; const points = [];
debug debug
@ -188,19 +192,19 @@ function editLabel() {
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"; byId("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"; byId("labelGroupSection").style.display = "none";
document.getElementById("labelGroupInput").style.display = "none"; byId("labelGroupInput").style.display = "none";
document.getElementById("labelGroupInput").value = ""; byId("labelGroupInput").value = "";
document.getElementById("labelGroupSelect").style.display = "inline-block"; byId("labelGroupSelect").style.display = "inline-block";
} }
function changeGroup() { function changeGroup() {
document.getElementById(this.value).appendChild(elSelected.node()); byId(this.value).appendChild(elSelected.node());
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
@ -224,7 +228,7 @@ function editLabel() {
.replace(/ /g, "_") .replace(/ /g, "_")
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (byId(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");
return; return;
} }
@ -237,22 +241,22 @@ function editLabel() {
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) { if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
document.getElementById("labelGroupSelect").selectedOptions[0].remove(); byId("labelGroupSelect").selectedOptions[0].remove();
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true)); byId("labelGroupSelect").options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("labelGroupInput").value = ""; byId("labelGroupInput").value = "";
return; return;
} }
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("labels").appendChild(newGroup); byId("labels").appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true)); byId("labelGroupSelect").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); byId(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("labelGroupInput").value = ""; byId("labelGroupInput").value = "";
} }
function removeLabelsGroup() { function removeLabelsGroup() {
@ -275,7 +279,7 @@ function editLabel() {
.select("#" + group) .select("#" + group)
.selectAll("text") .selectAll("text")
.each(function () { .each(function () {
document.getElementById("textPath_" + this.id).remove(); byId("textPath_" + this.id).remove();
this.remove(); this.remove();
}); });
if (!basic) labels.select("#" + group).remove(); if (!basic) labels.select("#" + group).remove();
@ -289,16 +293,16 @@ function editLabel() {
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"; byId("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"; byId("labelTextSection").style.display = "none";
} }
function changeText() { function changeText() {
const input = document.getElementById("labelText").value; const input = byId("labelText").value;
const el = elSelected.select("textPath").node(); const el = elSelected.select("textPath").node();
const lines = input.split("|"); const lines = input.split("|");
@ -323,7 +327,7 @@ function editLabel() {
const culture = pack.cells.culture[cell]; const culture = pack.cells.culture[cell];
name = Names.getCulture(culture); name = Names.getCulture(culture);
} }
document.getElementById("labelText").value = name; byId("labelText").value = name;
changeText(); changeText();
} }
@ -334,12 +338,22 @@ 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"; byId("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"; 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() { function changeStartOffset() {
@ -353,6 +367,12 @@ function editLabel() {
changeText(); changeText();
} }
function changeLetterSpacingSize() {
elSelected.select("textPath").attr("letter-spacing", this.value + "px");
tip("Label letter-spacing size: " + this.value + "px");
changeText();
}
function editLabelAlign() { function editLabelAlign() {
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];

22
modules/ui/style-presets.js
View file

@ -271,7 +271,15 @@ function addStylePreset() {
"data-columns" "data-columns"
], ],
"#legendBox": ["fill", "fill-opacity"], "#legendBox": ["fill", "fill-opacity"],
"#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], "#burgLabels > #cities": [
"opacity",
"fill",
"text-shadow",
"letter-spacing",
"data-size",
"font-size",
"font-family"
],
"#burgIcons > #cities": [ "#burgIcons > #cities": [
"opacity", "opacity",
"fill", "fill",
@ -283,7 +291,15 @@ function addStylePreset() {
"stroke-linecap" "stroke-linecap"
], ],
"#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"], "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
"#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], "#burgLabels > #towns": [
"opacity",
"fill",
"text-shadow",
"letter-spacing",
"data-size",
"font-size",
"font-family"
],
"#burgIcons > #towns": [ "#burgIcons > #towns": [
"opacity", "opacity",
"fill", "fill",
@ -301,6 +317,7 @@ function addStylePreset() {
"stroke", "stroke",
"stroke-width", "stroke-width",
"text-shadow", "text-shadow",
"letter-spacing",
"data-size", "data-size",
"font-size", "font-size",
"font-family", "font-family",
@ -312,6 +329,7 @@ function addStylePreset() {
"stroke", "stroke",
"stroke-width", "stroke-width",
"text-shadow", "text-shadow",
"letter-spacing",
"data-size", "data-size",
"font-size", "font-size",
"font-family", "font-family",

162
modules/ui/style.js
View file

@ -18,7 +18,7 @@
} }
// store some style inputs as options // store some style inputs as options
styleElements.addEventListener("change", function (ev) { styleElements.on("change", function (ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored); if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
}); });
@ -71,7 +71,7 @@ function getColorScheme(scheme = "bright") {
} }
// Toggle style sections on element select // Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement); styleElementSelect.on("change", selectStyleElement);
function selectStyleElement() { function selectStyleElement() {
const styleElement = styleElementSelect.value; const styleElement = styleElementSelect.value;
@ -239,6 +239,7 @@ function selectStyleElement() {
styleFill.style.display = "block"; styleFill.style.display = "block";
styleStroke.style.display = "block"; styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = "block";
styleLetterSpacing.style.display = "block";
styleShadow.style.display = "block"; styleShadow.style.display = "block";
styleSize.style.display = "block"; styleSize.style.display = "block";
@ -246,6 +247,7 @@ function selectStyleElement() {
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b"; styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
styleStrokeWidthInput.value = el.attr("stroke-width") || 0; styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px"; styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
styleFont.style.display = "block"; styleFont.style.display = "block";
@ -407,7 +409,7 @@ function selectStyleElement() {
} }
// Handle style inputs change // Handle style inputs change
styleGroupSelect.addEventListener("change", selectStyleElement); styleGroupSelect.on("change", selectStyleElement);
function getEl() { function getEl() {
const el = styleElementSelect.value; const el = styleElementSelect.value;
@ -416,42 +418,46 @@ function getEl() {
else return svg.select("#" + el).select("#" + g); else return svg.select("#" + el).select("#" + g);
} }
styleFillInput.addEventListener("input", function () { styleFillInput.on("input", function () {
styleFillOutput.value = this.value; styleFillOutput.value = this.value;
getEl().attr("fill", this.value); getEl().attr("fill", this.value);
}); });
styleStrokeInput.addEventListener("input", function () { styleStrokeInput.on("input", function () {
styleStrokeOutput.value = this.value; styleStrokeOutput.value = this.value;
getEl().attr("stroke", this.value); getEl().attr("stroke", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
}); });
styleStrokeWidthInput.addEventListener("input", e => { styleStrokeWidthInput.on("input", e => {
getEl().attr("stroke-width", e.target.value); getEl().attr("stroke-width", e.target.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
}); });
styleStrokeDasharrayInput.addEventListener("input", function () { styleLetterSpacingInput.on("input", e => {
getEl().attr("letter-spacing", e.target.value);
});
styleStrokeDasharrayInput.on("input", function () {
getEl().attr("stroke-dasharray", this.value); getEl().attr("stroke-dasharray", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
}); });
styleStrokeLinecapInput.addEventListener("change", function () { styleStrokeLinecapInput.on("change", function () {
getEl().attr("stroke-linecap", this.value); getEl().attr("stroke-linecap", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
}); });
styleOpacityInput.addEventListener("input", e => { styleOpacityInput.on("input", e => {
getEl().attr("opacity", e.target.value); getEl().attr("opacity", e.target.value);
}); });
styleFilterInput.addEventListener("change", function () { styleFilterInput.on("change", function () {
if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value); if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
getEl().attr("filter", this.value); getEl().attr("filter", this.value);
}); });
styleTextureInput.addEventListener("change", function () { styleTextureInput.on("change", function () {
changeTexture(this.value); changeTexture(this.value);
}); });
@ -470,7 +476,7 @@ function updateTextureSelectValue(href) {
} }
} }
styleTextureShiftX.addEventListener("input", function () { styleTextureShiftX.on("input", function () {
texture.attr("data-x", this.value); texture.attr("data-x", this.value);
texture texture
.select("image") .select("image")
@ -478,7 +484,7 @@ styleTextureShiftX.addEventListener("input", function () {
.attr("width", graphWidth - this.valueAsNumber); .attr("width", graphWidth - this.valueAsNumber);
}); });
styleTextureShiftY.addEventListener("input", function () { styleTextureShiftY.on("input", function () {
texture.attr("data-y", this.value); texture.attr("data-y", this.value);
texture texture
.select("image") .select("image")
@ -486,17 +492,17 @@ styleTextureShiftY.addEventListener("input", function () {
.attr("height", graphHeight - this.valueAsNumber); .attr("height", graphHeight - this.valueAsNumber);
}); });
styleClippingInput.addEventListener("change", function () { styleClippingInput.on("change", function () {
getEl().attr("mask", this.value); getEl().attr("mask", this.value);
}); });
styleGridType.addEventListener("change", function () { styleGridType.on("change", function () {
getEl().attr("type", this.value); getEl().attr("type", this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
}); });
styleGridScale.addEventListener("input", function () { styleGridScale.on("input", function () {
getEl().attr("scale", this.value); getEl().attr("scale", this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
@ -508,52 +514,52 @@ function calculateFriendlyGridSize() {
styleGridSizeFriendly.value = friendly; styleGridSizeFriendly.value = friendly;
} }
styleGridShiftX.addEventListener("input", function () { styleGridShiftX.on("input", function () {
getEl().attr("dx", this.value); getEl().attr("dx", this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
}); });
styleGridShiftY.addEventListener("input", function () { styleGridShiftY.on("input", function () {
getEl().attr("dy", this.value); getEl().attr("dy", this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
}); });
styleRescaleMarkers.addEventListener("change", function () { styleRescaleMarkers.on("change", function () {
markers.attr("rescale", +this.checked); markers.attr("rescale", +this.checked);
invokeActiveZooming(); invokeActiveZooming();
}); });
styleCoastlineAuto.addEventListener("change", function () { styleCoastlineAuto.on("change", function () {
coastline.select("#sea_island").attr("auto-filter", +this.checked); coastline.select("#sea_island").attr("auto-filter", +this.checked);
styleFilter.style.display = this.checked ? "none" : "block"; styleFilter.style.display = this.checked ? "none" : "block";
invokeActiveZooming(); invokeActiveZooming();
}); });
styleOceanFill.addEventListener("input", function () { styleOceanFill.on("input", function () {
oceanLayers.select("rect").attr("fill", this.value); oceanLayers.select("rect").attr("fill", this.value);
styleOceanFillOutput.value = this.value; styleOceanFillOutput.value = this.value;
}); });
styleOceanPattern.addEventListener("change", function () { styleOceanPattern.on("change", function () {
byId("oceanicPattern")?.setAttribute("href", this.value); byId("oceanicPattern")?.setAttribute("href", this.value);
}); });
styleOceanPatternOpacity.addEventListener("input", e => { styleOceanPatternOpacity.on("input", e => {
byId("oceanicPattern").setAttribute("opacity", e.target.value); byId("oceanicPattern").setAttribute("opacity", e.target.value);
}); });
outlineLayers.addEventListener("change", function () { outlineLayers.on("change", function () {
oceanLayers.selectAll("path").remove(); oceanLayers.selectAll("path").remove();
oceanLayers.attr("layers", this.value); oceanLayers.attr("layers", this.value);
OceanLayers(); OceanLayers();
}); });
styleHeightmapScheme.addEventListener("change", function () { styleHeightmapScheme.on("change", function () {
getEl().attr("scheme", this.value); getEl().attr("scheme", this.value);
drawHeightmap(); drawHeightmap();
}); });
openCreateHeightmapSchemeButton.addEventListener("click", function () { openCreateHeightmapSchemeButton.on("click", function () {
// start with current scheme // start with current scheme
const scheme = getEl().attr("scheme"); const scheme = getEl().attr("scheme");
this.dataset.stops = scheme.startsWith("#") this.dataset.stops = scheme.startsWith("#")
@ -672,97 +678,97 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
}); });
}); });
styleHeightmapRenderOcean.addEventListener("change", e => { styleHeightmapRenderOcean.on("change", e => {
const checked = +e.target.checked; const checked = +e.target.checked;
getEl().attr("data-render", checked); getEl().attr("data-render", checked);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapTerracing.addEventListener("input", e => { styleHeightmapTerracing.on("input", e => {
getEl().attr("terracing", e.target.value); getEl().attr("terracing", e.target.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSkip.addEventListener("input", e => { styleHeightmapSkip.on("input", e => {
getEl().attr("skip", e.target.value); getEl().attr("skip", e.target.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSimplification.addEventListener("input", e => { styleHeightmapSimplification.on("input", e => {
getEl().attr("relax", e.target.value); getEl().attr("relax", e.target.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapCurve.addEventListener("change", e => { styleHeightmapCurve.on("change", e => {
getEl().attr("curve", e.target.value); getEl().attr("curve", e.target.value);
drawHeightmap(); drawHeightmap();
}); });
styleReliefSet.addEventListener("change", e => { styleReliefSet.on("change", e => {
terrain.attr("set", e.target.value); terrain.attr("set", e.target.value);
ReliefIcons.draw(); ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleReliefSize.addEventListener("change", e => { styleReliefSize.on("change", e => {
terrain.attr("size", e.target.value); terrain.attr("size", e.target.value);
ReliefIcons.draw(); ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleReliefDensity.addEventListener("change", e => { styleReliefDensity.on("change", e => {
terrain.attr("density", e.target.value); terrain.attr("density", e.target.value);
ReliefIcons.draw(); ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleTemperatureFillOpacityInput.addEventListener("input", e => { styleTemperatureFillOpacityInput.on("input", e => {
temperature.attr("fill-opacity", e.target.value); temperature.attr("fill-opacity", e.target.value);
}); });
styleTemperatureFontSizeInput.addEventListener("input", e => { styleTemperatureFontSizeInput.on("input", e => {
temperature.attr("font-size", e.target.value + "px"); temperature.attr("font-size", e.target.value + "px");
}); });
styleTemperatureFillInput.addEventListener("input", e => { styleTemperatureFillInput.on("input", e => {
temperature.attr("fill", e.target.value); temperature.attr("fill", e.target.value);
styleTemperatureFillOutput.value = e.target.value; styleTemperatureFillOutput.value = e.target.value;
}); });
stylePopulationRuralStrokeInput.addEventListener("input", e => { stylePopulationRuralStrokeInput.on("input", e => {
population.select("#rural").attr("stroke", e.target.value); population.select("#rural").attr("stroke", e.target.value);
stylePopulationRuralStrokeOutput.value = e.target.value; stylePopulationRuralStrokeOutput.value = e.target.value;
}); });
stylePopulationUrbanStrokeInput.addEventListener("input", e => { stylePopulationUrbanStrokeInput.on("input", e => {
population.select("#urban").attr("stroke", e.target.value); population.select("#urban").attr("stroke", e.target.value);
stylePopulationUrbanStrokeOutput.value = e.target.value; stylePopulationUrbanStrokeOutput.value = e.target.value;
}); });
styleCompassSizeInput.addEventListener("input", shiftCompass); styleCompassSizeInput.on("input", shiftCompass);
styleCompassShiftX.addEventListener("input", shiftCompass); styleCompassShiftX.on("input", shiftCompass);
styleCompassShiftY.addEventListener("input", shiftCompass); styleCompassShiftY.on("input", shiftCompass);
function shiftCompass() { function shiftCompass() {
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`; const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
compass.select("use").attr("transform", tr); compass.select("use").attr("transform", tr);
} }
styleLegendColItems.addEventListener("input", e => { styleLegendColItems.on("input", e => {
legend.select("#legendBox").attr("data-columns", e.target.value); legend.select("#legendBox").attr("data-columns", e.target.value);
redrawLegend(); redrawLegend();
}); });
styleLegendBack.addEventListener("input", e => { styleLegendBack.on("input", e => {
styleLegendBackOutput.value = e.target.value; styleLegendBackOutput.value = e.target.value;
legend.select("#legendBox").attr("fill", e.target.value); legend.select("#legendBox").attr("fill", e.target.value);
}); });
styleLegendOpacity.addEventListener("input", e => { styleLegendOpacity.on("input", e => {
legend.select("#legendBox").attr("fill-opacity", e.target.value); legend.select("#legendBox").attr("fill-opacity", e.target.value);
}); });
styleSelectFont.addEventListener("change", changeFont); styleSelectFont.on("change", changeFont);
function changeFont() { function changeFont() {
const family = styleSelectFont.value; const family = styleSelectFont.value;
getEl().attr("font-family", family); getEl().attr("font-family", family);
@ -770,11 +776,11 @@ function changeFont() {
if (styleElementSelect.value === "legend") redrawLegend(); if (styleElementSelect.value === "legend") redrawLegend();
} }
styleShadowInput.addEventListener("input", function () { styleShadowInput.on("input", function () {
getEl().style("text-shadow", this.value); getEl().style("text-shadow", this.value);
}); });
styleFontAdd.addEventListener("click", function () { styleFontAdd.on("click", function () {
addFontNameInput.value = ""; addFontNameInput.value = "";
addFontURLInput.value = ""; addFontURLInput.value = "";
@ -811,20 +817,20 @@ styleFontAdd.addEventListener("click", function () {
}); });
}); });
addFontMethod.addEventListener("change", function () { addFontMethod.on("change", function () {
addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none"; addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
}); });
styleFontSize.addEventListener("change", function () { styleFontSize.on("change", function () {
changeFontSize(getEl(), +this.value); changeFontSize(getEl(), +this.value);
}); });
styleFontPlus.addEventListener("click", function () { styleFontPlus.on("click", function () {
const current = +styleFontSize.value || 12; const current = +styleFontSize.value || 12;
changeFontSize(getEl(), Math.min(current + 1, 999)); changeFontSize(getEl(), Math.min(current + 1, 999));
}); });
styleFontMinus.addEventListener("click", function () { styleFontMinus.on("click", function () {
const current = +styleFontSize.value || 12; const current = +styleFontSize.value || 12;
changeFontSize(getEl(), Math.max(current - 1, 1)); changeFontSize(getEl(), Math.max(current - 1, 1));
}); });
@ -847,16 +853,16 @@ function changeFontSize(el, size) {
if (styleElementSelect.value === "legend") redrawLegend(); if (styleElementSelect.value === "legend") redrawLegend();
} }
styleRadiusInput.addEventListener("change", function () { styleRadiusInput.on("change", function () {
changeRadius(+this.value); changeRadius(+this.value);
}); });
styleRadiusPlus.addEventListener("click", function () { styleRadiusPlus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeRadius(size); changeRadius(size);
}); });
styleRadiusMinus.addEventListener("click", function () { styleRadiusMinus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeRadius(size); changeRadius(size);
}); });
@ -878,16 +884,16 @@ function changeRadius(size, group) {
changeIconSize(size * 2, g); // change also anchor icons changeIconSize(size * 2, g); // change also anchor icons
} }
styleIconSizeInput.addEventListener("change", function () { styleIconSizeInput.on("change", function () {
changeIconSize(+this.value); changeIconSize(+this.value);
}); });
styleIconSizePlus.addEventListener("click", function () { styleIconSizePlus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeIconSize(size); changeIconSize(size);
}); });
styleIconSizeMinus.addEventListener("click", function () { styleIconSizeMinus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeIconSize(size); changeIconSize(size);
}); });
@ -912,34 +918,34 @@ function changeIconSize(size, group) {
styleIconSizeInput.value = size; styleIconSizeInput.value = size;
} }
styleStatesBodyOpacity.addEventListener("input", e => { styleStatesBodyOpacity.on("input", e => {
statesBody.attr("opacity", e.target.value); statesBody.attr("opacity", e.target.value);
}); });
styleStatesBodyFilter.addEventListener("change", function () { styleStatesBodyFilter.on("change", function () {
statesBody.attr("filter", this.value); statesBody.attr("filter", this.value);
}); });
styleStatesHaloWidth.addEventListener("input", e => { styleStatesHaloWidth.on("input", e => {
const value = e.target.value; const value = e.target.value;
statesHalo.attr("data-width", value).attr("stroke-width", value); statesHalo.attr("data-width", value).attr("stroke-width", value);
}); });
styleStatesHaloOpacity.addEventListener("input", e => { styleStatesHaloOpacity.on("input", e => {
statesHalo.attr("opacity", e.target.value); statesHalo.attr("opacity", e.target.value);
}); });
styleStatesHaloBlur.addEventListener("input", e => { styleStatesHaloBlur.on("input", e => {
const value = Number(e.target.value); const value = Number(e.target.value);
const blur = value > 0 ? `blur(${value}px)` : null; const blur = value > 0 ? `blur(${value}px)` : null;
statesHalo.attr("filter", blur); statesHalo.attr("filter", blur);
}); });
styleArmiesFillOpacity.addEventListener("input", e => { styleArmiesFillOpacity.on("input", e => {
armies.attr("fill-opacity", e.target.value); armies.attr("fill-opacity", e.target.value);
}); });
styleArmiesSize.addEventListener("input", e => { styleArmiesSize.on("input", e => {
const value = Number(e.target.value); const value = Number(e.target.value);
armies.attr("box-size", value).attr("font-size", value * 2); armies.attr("box-size", value).attr("font-size", value * 2);
@ -950,17 +956,17 @@ styleArmiesSize.addEventListener("input", e => {
}); });
}); });
emblemsStateSizeInput.addEventListener("change", e => { emblemsStateSizeInput.on("change", e => {
emblems.select("#stateEmblems").attr("data-size", e.target.value); emblems.select("#stateEmblems").attr("data-size", e.target.value);
drawEmblems(); drawEmblems();
}); });
emblemsProvinceSizeInput.addEventListener("change", e => { emblemsProvinceSizeInput.on("change", e => {
emblems.select("#provinceEmblems").attr("data-size", e.target.value); emblems.select("#provinceEmblems").attr("data-size", e.target.value);
drawEmblems(); drawEmblems();
}); });
emblemsBurgSizeInput.addEventListener("change", e => { emblemsBurgSizeInput.on("change", e => {
emblems.select("#burgEmblems").attr("data-size", e.target.value); emblems.select("#burgEmblems").attr("data-size", e.target.value);
drawEmblems(); drawEmblems();
}); });
@ -1015,7 +1021,7 @@ Object.keys(vignettePresets).forEach(preset => {
styleVignettePreset.options.add(new Option(preset, preset, false, false)); styleVignettePreset.options.add(new Option(preset, preset, false, false));
}); });
styleVignettePreset.addEventListener("change", function () { styleVignettePreset.on("change", function () {
const attributes = JSON.parse(vignettePresets[this.value]); const attributes = JSON.parse(vignettePresets[this.value]);
for (const selector in attributes) { for (const selector in attributes) {
@ -1047,35 +1053,35 @@ styleVignettePreset.addEventListener("change", function () {
} }
}); });
styleVignetteX.addEventListener("input", e => { styleVignetteX.on("input", e => {
byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
}); });
styleVignetteWidth.addEventListener("input", e => { styleVignetteWidth.on("input", e => {
byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
}); });
styleVignetteY.addEventListener("input", e => { styleVignetteY.on("input", e => {
byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
}); });
styleVignetteHeight.addEventListener("input", e => { styleVignetteHeight.on("input", e => {
byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
}); });
styleVignetteRx.addEventListener("input", e => { styleVignetteRx.on("input", e => {
byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
}); });
styleVignetteRy.addEventListener("input", e => { styleVignetteRy.on("input", e => {
byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`); byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
}); });
styleVignetteBlur.addEventListener("input", e => { styleVignetteBlur.on("input", e => {
byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`); byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
}); });
styleScaleBar.addEventListener("input", function (event) { styleScaleBar.on("input", function (event) {
const scaleBarBack = scaleBar.select("#scaleBarBack"); const scaleBarBack = scaleBar.select("#scaleBarBack");
if (!scaleBarBack.size()) return; if (!scaleBarBack.size()) return;
@ -1155,7 +1161,7 @@ function updateElements() {
} }
// GLOBAL FILTERS // GLOBAL FILTERS
mapFilters.addEventListener("click", applyMapFilter); mapFilters.on("click", applyMapFilter);
function applyMapFilter(event) { function applyMapFilter(event) {
if (event.target.tagName !== "BUTTON") return; if (event.target.tagName !== "BUTTON") return;
const button = event.target; const button = event.target;

4
styles/ancient.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 12, "data-size": 12,
"font-size": 12, "font-size": 12,
"font-family": "Great Vibes" "font-family": "Great Vibes"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Great Vibes" "font-family": "Great Vibes"
@ -384,6 +386,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 22, "data-size": 22,
"font-size": 22, "font-size": 22,
"font-family": "Great Vibes", "font-family": "Great Vibes",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Times New Roman", "font-family": "Times New Roman",

4
styles/atlas.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Amarante" "font-family": "Amarante"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Amarante" "font-family": "Amarante"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 21, "data-size": 21,
"font-size": 21, "font-size": 21,
"font-family": "Amarante", "font-family": "Amarante",
@ -395,6 +398,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Amarante", "font-family": "Amarante",

18
styles/clean.json
View file

@ -319,22 +319,22 @@
"mask": "url(#land)" "mask": "url(#land)"
}, },
"#legend": { "#legend": {
"data-size": 12.74, "data-size": 12,
"font-size": 12.74, "font-size": 12,
"font-family": "Arial", "font-family": "Arial",
"stroke": "#909090", "stroke": "#909090",
"stroke-width": 1.13, "stroke-width": 1,
"stroke-dasharray": 0, "stroke-dasharray": 0,
"stroke-linecap": "round", "stroke-linecap": "round",
"data-x": 98.39, "data-x": 99,
"data-y": 12.67, "data-y": 93,
"data-columns": null "data-columns": 8
}, },
"#legendBox": {},
"#burgLabels > #cities": { "#burgLabels > #cities": {
"opacity": 1, "opacity": 1,
"fill": "#414141", "fill": "#414141",
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Arial" "font-family": "Arial"
@ -359,6 +359,8 @@
"#burgLabels > #towns": { "#burgLabels > #towns": {
"opacity": 1, "opacity": 1,
"fill": "#414141", "fill": "#414141",
"text-shadow": "none",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Arial" "font-family": "Arial"
@ -386,6 +388,7 @@
"stroke": "#303030", "stroke": "#303030",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 10, "data-size": 10,
"font-size": 10, "font-size": 10,
"font-family": "Arial", "font-family": "Arial",
@ -397,6 +400,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Arial", "font-family": "Arial",

4
styles/cyberpunk.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Orbitron" "font-family": "Orbitron"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Orbitron" "font-family": "Orbitron"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Orbitron", "font-family": "Orbitron",
@ -395,6 +398,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

4
styles/darkSeas.json
View file

@ -321,6 +321,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Lugrasimo" "font-family": "Lugrasimo"
@ -345,6 +346,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Lugrasimo" "font-family": "Lugrasimo"
@ -371,6 +373,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 21, "data-size": 21,
"font-size": 21, "font-size": 21,
"font-family": "Eagle Lake", "font-family": "Eagle Lake",
@ -382,6 +385,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Eagle Lake", "font-family": "Eagle Lake",

4
styles/default.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Almendra SC" "font-family": "Almendra SC"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Almendra SC" "font-family": "Almendra SC"
@ -384,6 +386,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 22, "data-size": 22,
"font-size": 22, "font-size": 22,
"font-family": "Almendra SC", "font-family": "Almendra SC",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

5
styles/gloom.json
View file

@ -335,6 +335,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Underdog" "font-family": "Underdog"
@ -359,6 +360,8 @@
"#burgLabels > #towns": { "#burgLabels > #towns": {
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "none",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Underdog" "font-family": "Underdog"
@ -386,6 +389,7 @@
"stroke": "#b5b5b5", "stroke": "#b5b5b5",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 20, "data-size": 20,
"font-size": 20, "font-size": 20,
"font-family": "Underdog", "font-family": "Underdog",
@ -397,6 +401,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Underdog", "font-family": "Underdog",

4
styles/light.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3a3a3a", "fill": "#3a3a3a",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "IM Fell English" "font-family": "IM Fell English"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "IM Fell English" "font-family": "IM Fell English"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0.3, "stroke-width": 0.3,
"text-shadow": "white 0px 0px 6px", "text-shadow": "white 0px 0px 6px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "IM Fell English", "font-family": "IM Fell English",
@ -395,6 +398,7 @@
"stroke": "#701b05", "stroke": "#701b05",
"stroke-width": 0.1, "stroke-width": 0.1,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 6, "data-size": 6,
"font-size": 6, "font-size": 6,
"font-family": "IM Fell English", "font-family": "IM Fell English",

6
styles/monochrome.json
View file

@ -328,6 +328,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Courier New" "font-family": "Courier New"
@ -353,6 +354,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Courier New" "font-family": "Courier New"
@ -380,6 +382,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Courier New", "font-family": "Courier New",
@ -390,7 +393,8 @@
"fill": "#3e3e4b", "fill": "#3e3e4b",
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Courier New", "font-family": "Courier New",

6
styles/night.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#dbdbe1", "fill": "#dbdbe1",
"text-shadow": "black 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Courier New" "font-family": "Courier New"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "black 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4.28, "data-size": 4.28,
"font-size": 4.28, "font-size": 4.28,
"font-family": "Courier New" "font-family": "Courier New"
@ -384,6 +386,7 @@
"stroke": "#7a83ae", "stroke": "#7a83ae",
"stroke-width": 0.3, "stroke-width": 0.3,
"text-shadow": "black 0px 0px 0.1px", "text-shadow": "black 0px 0px 0.1px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "Courier New", "font-family": "Courier New",
@ -394,7 +397,8 @@
"fill": "#3e3e4b", "fill": "#3e3e4b",
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

4
styles/pale.json
View file

@ -332,6 +332,7 @@
"opacity": 0.8, "opacity": 0.8,
"fill": "#3a3a3a", "fill": "#3a3a3a",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Arima Madurai" "font-family": "Arima Madurai"
@ -357,6 +358,7 @@
"opacity": 0.8, "opacity": 0.8,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Arima Madurai" "font-family": "Arima Madurai"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 6px", "text-shadow": "white 0px 0px 6px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "Arima Madurai", "font-family": "Arima Madurai",
@ -395,6 +398,7 @@
"stroke": "#701b05", "stroke": "#701b05",
"stroke-width": 0.1, "stroke-width": 0.1,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 6, "data-size": 6,
"font-size": 6, "font-size": 6,
"font-family": "Arima Madurai", "font-family": "Arima Madurai",

4
styles/watercolor.json
View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#043449", "fill": "#043449",
"text-shadow": "white 0px 0px 2px", "text-shadow": "white 0px 0px 2px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Comfortaa" "font-family": "Comfortaa"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Comfortaa" "font-family": "Comfortaa"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0.15, "stroke-width": 0.15,
"text-shadow": "black 1px 1px 3px", "text-shadow": "black 1px 1px 3px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Gloria Hallelujah", "font-family": "Gloria Hallelujah",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 16, "data-size": 16,
"font-size": 16, "font-size": 16,
"font-family": "Comfortaa", "font-family": "Comfortaa",

27
versioning.js
View file

@ -12,7 +12,7 @@
* *
* Example: 1.102.0 -> Major version 1, Minor version 102, Patch version 0 * Example: 1.102.0 -> Major version 1, Minor version 102, Patch version 0
*/ */
const VERSION = "1.100.00"; const VERSION = "1.101.00";
{ {
document.title += " v" + VERSION; document.title += " v" + VERSION;
@ -20,7 +20,7 @@ const VERSION = "1.100.00";
if (loadingScreenVersion) loadingScreenVersion.innerText = `v${VERSION}`; if (loadingScreenVersion) loadingScreenVersion.innerText = `v${VERSION}`;
const storedVersion = localStorage.getItem("version"); const storedVersion = localStorage.getItem("version");
if (compareVersions(storedVersion, VERSION).isOlder) setTimeout(showUpdateWindow, 6000); if (compareVersions(storedVersion, VERSION, {patch: false}).isOlder) setTimeout(showUpdateWindow, 6000);
function showUpdateWindow() { function showUpdateWindow() {
const changelog = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog"; const changelog = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog";
@ -33,6 +33,7 @@ const VERSION = "1.100.00";
<ul> <ul>
<strong>Latest changes:</strong> <strong>Latest changes:</strong>
<li>Style: ability to set letter spacing</li>
<li>Zones update</li> <li>Zones update</li>
<li>Notes Editor: on-demand AI text generation</li> <li>Notes Editor: on-demand AI text generation</li>
<li>New style preset: Dark Seas</li> <li>New style preset: Dark Seas</li>
@ -43,12 +44,6 @@ const VERSION = "1.100.00";
<li>Ability to render ocean heightmap</li> <li>Ability to render ocean heightmap</li>
<li>Scale bar styling features</li> <li>Scale bar styling features</li>
<li>Vignette visual layer and vignette styling options</li> <li>Vignette visual layer and vignette styling options</li>
<li>Ability to define custom heightmap color scheme</li>
<li>New style preset Night and new heightmap color schemes</li>
<li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
<li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
<li>New label placement algorithm for states</li>
<li>North and South Poles temperature can be set independently</li>
</ul> </ul>
<p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p> <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
@ -57,16 +52,12 @@ const VERSION = "1.100.00";
const buttons = { const buttons = {
Ok: function () { Ok: function () {
$(this).dialog("close"); $(this).dialog("close");
if (storedVersion) {
clearCache();
localStorage.clear();
}
localStorage.setItem("version", VERSION); localStorage.setItem("version", VERSION);
} }
}; };
if (storedVersion) { if (storedVersion) {
buttons.Reload = () => { buttons.Cleanup = () => {
clearCache(); clearCache();
localStorage.clear(); localStorage.clear();
localStorage.setItem("version", VERSION); localStorage.setItem("version", VERSION);
@ -95,11 +86,15 @@ function isValidVersion(versionString) {
return !isNaN(major) && !isNaN(minor) && !isNaN(patch); return !isNaN(major) && !isNaN(minor) && !isNaN(patch);
} }
function compareVersions(version1, version2) { function compareVersions(version1, version2, options = {major: true, minor: true, patch: true}) {
if (!isValidVersion(version1) || !isValidVersion(version2)) return {isEqual: false, isNewer: false, isOlder: false}; if (!isValidVersion(version1) || !isValidVersion(version2)) return {isEqual: false, isNewer: false, isOlder: false};
const [major1, minor1, patch1] = version1.split(".").map(Number); let [major1, minor1, patch1] = version1.split(".").map(Number);
const [major2, minor2, patch2] = version2.split(".").map(Number); let [major2, minor2, patch2] = version2.split(".").map(Number);
if (!options.major) major1 = major2 = 0;
if (!options.minor) minor1 = minor2 = 0;
if (!options.patch) patch1 = patch2 = 0;
const isEqual = major1 === major2 && minor1 === minor2 && patch1 === patch2; const isEqual = major1 === major2 && minor1 === minor2 && patch1 === patch2;
const isNewer = major1 > major2 || (major1 === major2 && (minor1 > minor2 || (minor1 === minor2 && patch1 > patch2))); const isNewer = major1 > major2 || (major1 === major2 && (minor1 > minor2 || (minor1 === minor2 && patch1 > patch2)));