diff --git a/index.html b/index.html
index d515b96d..a7d19f8a 100644
--- a/index.html
+++ b/index.html
@@ -148,55 +148,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -4356,6 +4307,153 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
index 99afe18a..fdf26386 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@
// https://github.com/Azgaar/Fantasy-Map-Generator
"use strict";
-const version = "1.722"; // generator version
+const version = "1.73"; // generator version
document.title += " v" + version;
// switches to disable/enable logging features
diff --git a/modules/export.js b/modules/export.js
index 7b88a7e6..73308169 100644
--- a/modules/export.js
+++ b/modules/export.js
@@ -184,6 +184,9 @@ async function getMapURL(type, options = {}) {
filters[i].remove();
}
+ const hatching = svgDefs.getElementById("defs-hatching");
+ if (hatching) cloneDefs.appendChild(hatching.cloneNode(true));
+
// remove unused patterns
const patterns = cloneEl.querySelectorAll("pattern");
for (let i = 0; i < patterns.length; i++) {
@@ -262,7 +265,7 @@ async function getMapURL(type, options = {}) {
if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
}
- if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching")?.remove(); // remove unused hatching group
+ if (!cloneEl.getElementById("defs-hatching").children.length) cloneEl.getElementById("defs-hatching")?.remove(); // remove unused hatching group
if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog")?.remove(); // remove unused fog
if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths")?.remove(); // removed unused statePaths
if (!cloneEl.getElementById("labels")) cloneEl.getElementById("textPaths")?.remove(); // removed unused textPaths
diff --git a/modules/load.js b/modules/load.js
index 07d95925..519678d4 100644
--- a/modules/load.js
+++ b/modules/load.js
@@ -190,7 +190,6 @@ function parseLoadedData(data) {
if (customizationMenu.offsetParent) styleTab.click();
const reliefIcons = document.getElementById("defs-relief").innerHTML; // save relief icons
- const hatching = document.getElementById("hatching").cloneNode(true); // save hatching
void (function parseParameters() {
const params = data[0].split("|");
@@ -473,9 +472,6 @@ function parseLoadedData(data) {
if (!layerIsOn("toggleBorders")) $("#borders").fadeOut();
if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
- // 1.0 adds hatching
- document.getElementsByTagName("defs")[0].appendChild(hatching);
-
// 1.0 adds zones layer
zones = viewbox.insert("g", "#borders").attr("id", "zones").attr("display", "none");
zones.attr("opacity", 0.6).attr("stroke", null).attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt");
@@ -939,6 +935,11 @@ function parseLoadedData(data) {
localStorage.removeItem(styleName);
});
}
+
+ if (version < 1.73) {
+ // v1.73 moved the hatching patterns out of the user's SVG
+ document.getElementById("hatching")?.remove();
+ }
})();
void (function checkDataIntegrity() {
@@ -1049,7 +1050,7 @@ function parseLoadedData(data) {
// sort markers by index
pack.markers.sort((a, b) => a.i - b.i);
}
- })();
+ })();
changeMapSize();
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 3c14c149..be97102c 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -425,10 +425,10 @@ function clearLegend() {
function createPicker() {
const pos = () => tip("Drag to change the picker position");
const cl = () => tip("Click to close the picker");
- const closePicker = () => contaiter.style("display", "none");
+ const closePicker = () => container.style("display", "none");
- const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
- contaiter
+ const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
+ container
.append("rect")
.attr("x", 0)
.attr("y", 0)
@@ -437,7 +437,7 @@ function createPicker() {
.attr("opacity", 0.2)
.on("mousemove", cl)
.on("click", closePicker);
- const picker = contaiter
+ const picker = container
.append("g")
.attr("id", "picker")
.call(
@@ -494,7 +494,7 @@ function createPicker() {
const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333");
const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333");
- const hatching = d3.selectAll("g#hatching > pattern");
+ const hatching = d3.selectAll("g#defs-hatching > pattern");
const number = hatching.size();
const clr = d3.range(number).map(i => d3.hsl((i / number) * 360, 0.7, 0.7).hex());
@@ -504,8 +504,8 @@ function createPicker() {
.attr("id", "picker_" + d)
.attr("fill", d)
.attr("class", i ? "" : "selected")
- .attr("x", i * 22 + 4)
- .attr("y", 40)
+ .attr("x", (i % 14) * 22 + 4)
+ .attr("y", 40 + Math.floor(i / 14)*20)
.attr("width", 16)
.attr("height", 16);
});
@@ -515,20 +515,20 @@ function createPicker() {
.append("rect")
.attr("id", "picker_" + this.id)
.attr("fill", "url(#" + this.id + ")")
- .attr("x", i * 22 + 4)
- .attr("y", 61)
+ .attr("x", (i % 14) * 22 + 4)
+ .attr("y", Math.floor(i / 14)*20 + 20 + (number * 2))
.attr("width", 16)
- .attr("height", 16);
+ .attr("height", 16)
});
colors
.selectAll("rect")
.on("click", pickerFillClicked)
- .on("mousemove", () => tip("Click to fill with the color"));
+ .on("mouseover", () => tip("Click to fill with the color"));
hatches
.selectAll("rect")
.on("click", pickerFillClicked)
- .on("mousemove", () => tip("Click to fill with the hatching"));
+ .on("mouseover", function() { tip("Click to fill with the hatching " + this.id) });
// append box
const bbox = picker.node().getBBox();
@@ -544,10 +544,10 @@ function createPicker() {
.attr("fill", "#ffffff")
.attr("stroke", "#5d4651")
.on("mousemove", pos);
- picker.insert("text", ":first-child").attr("x", 291).attr("y", -10).attr("id", "pickerCloseText").text("✕");
+ picker.insert("text", ":first-child").attr("x", width-20).attr("y", -10).attr("id", "pickerCloseText").text("✕");
picker
.insert("rect", ":first-child")
- .attr("x", 288)
+ .attr("x", width-23)
.attr("y", -21)
.attr("id", "pickerCloseRect")
.attr("width", 14)
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index f011f47b..13e8b31b 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -331,7 +331,7 @@ function editZones() {
function addZonesLayer() {
const id = getNextId("zone");
const description = "Unknown zone";
- const fill = "url(#hatch" + (id.slice(4) % 14) + ")";
+ const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill);
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;