Fix: rework texture data format (#1017)

* fix: rework texture save format

* refactor: move textures to a local folder

* fix: export texture

* fix: don't export empty texture

* chore: pump version

* fix: rescale water mask on screen size change

---------

Co-authored-by: Azgaar <azgaar.fmg@yandex.com>

index.html

@@ -866,77 +866,31 @@
                 <td>
                   <select id="styleTextureInput">
                     <option value="">No texture</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-big.jpg">
+                    <option value="./images/textures/folded-paper-big.jpg">Folded paper big</option>
-                      Folded paper big
+                    <option value="./images/textures/folded-paper-small.jpg">Folded paper small</option>
-                    </option>
+                    <option value="./images/textures/gray-paper.jpg">Gray paper</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-small.jpg">
+                    <option value="./images/textures/soiled-paper.jpg">Soiled paper horizontal</option>
-                      Folded paper small
+                    <option value="./images/textures/soiled-paper-vertical.jpg">Soided paper vertical</option>
-                    </option>
+                    <option value="./images/textures/plaster.jpg">Plaster</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/gray-paper.jpg">
+                    <option value="./images/textures/ocean.jpg">Ocean</option>
-                      Gray paper
+                    <option value="./images/textures/antique-small.jpg">Antique small</option>
-                    </option>
+                    <option value="./images/textures/antique-big.jpg">Antique big</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper.jpg">
+                    <option value="./images/textures/pergamena-small.jpg">Pergamena small</option>
-                      Soiled paper horizontal
+                    <option value="./images/textures/marble-big.jpg" selected>Marble big</option>
-                    </option>
+                    <option value="./images/textures/marble-small.jpg">Marble small</option>
-                    <option
+                    <option value="./images/textures/marble-blue-small.jpg">Marble Blue</option>
-                      value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper-e1633784189147.jpg"
+                    <option value="./images/textures/marble-blue-big.jpg">Marble Blue big</option>
-                    >
+                    <option value="./images/textures/stone-small.jpg">Stone small</option>
-                      Soided paper vertical
+                    <option value="./images/textures/stone-big.jpg">Stone big</option>
-                    </option>
+                    <option value="./images/textures/timbercut-small.jpg">Timber Cut small</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg">Plaster</option>
+                    <option value="./images/textures/timbercut-big.jpg">Timber Cut big</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/ocean.jpg">Ocean</option>
+                    <option value="./images/textures/mars-small.jpg">Mars small</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg">
+                    <option value="./images/textures/mars-big.jpg">Mars big</option>
-                      Antique small
+                    <option value="./images/textures/mercury-small.jpg">Mercury small</option>
-                    </option>
+                    <option value="./images/textures/mercury-big.jpg">Mercury big</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-big.jpg">
+                    <option value="./images/textures/mauritania-small.jpg">Mauritania small</option>
-                      Antique big
+                    <option value="./images/textures/iran-small.jpg">Iran small</option>
-                    </option>
+                    <option value="./images/textures/spain-small.jpg">Spain small</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/pergamena-small.jpg">
-                      Pergamena small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg" selected>
-                      Marble big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-small.jpg">
-                      Marble small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg">
-                      Marble Blue
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-big.jpg">
-                      Marble Blue big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-small.jpg">
-                      Stone small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-big.jpg">
-                      Stone big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-small.jpg">
-                      Timber Cut small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-big.jpg">
-                      Timber Cut big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-small.jpg">
-                      Mars small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-big.jpg">Mars big</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg">
-                      Mercury small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-big.jpg">
-                      Mercury big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mauritania-small.jpg">
-                      Mauritania small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg">
-                      Iran small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/spain-small.jpg">
-                      Spain small
-                    </option>
                   </select>
                   <button
                     data-tip="Click and provide a URL to image to be set as a texture"
@@ -7985,16 +7939,16 @@
     <script src="libs/lineclip.min.js"></script>
     <script src="libs/alea.min.js"></script>
     <script src="modules/fonts.js?v=1.89.18"></script>
-    <script src="modules/ui/layers.js?v=1.93.07"></script>
+    <script src="modules/ui/layers.js?v=1.94.00"></script>
     <script src="modules/ui/measurers.js?v=1.87.02"></script>
-    <script src="modules/ui/stylePresets.js?v=1.93.07"></script>
+    <script src="modules/ui/stylePresets.js?v=1.94.00"></script>
 
-    <script src="modules/ui/general.js?v=1.93.04"></script>
+    <script src="modules/ui/general.js?v=1.94.00"></script>
-    <script src="modules/ui/options.js?v=1.93.12"></script>
+    <script src="modules/ui/options.js?v=1.94.00"></script>
-    <script src="main.js?v=1.93.02"></script>
+    <script src="main.js?v=1.94.00"></script>
 
     <script defer src="modules/relief-icons.js"></script>
-    <script defer src="modules/ui/style.js?v=1.93.12"></script>
+    <script defer src="modules/ui/style.js?v=1.94.00"></script>
     <script defer src="modules/ui/editors.js?v=1.93.10"></script>
     <script defer src="modules/ui/tools.js?v=1.92.00"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>
@@ -8029,13 +7983,13 @@
     <script defer src="modules/ui/3d.js?v=1.93.11"></script>
     <script defer src="modules/ui/submap.js?v=1.92.00"></script>
     <script defer src="modules/ui/hotkeys.js?v=1.93.00"></script>
-    <script defer src="modules/coa-renderer.js?v=1.91.00"></script>
+    <script defer src="modules/coa-renderer.js?v=1.94.00"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
     <script defer src="modules/io/save.js?v=1.93.02"></script>
-    <script defer src="modules/io/load.js?v=1.93.02"></script>
+    <script defer src="modules/io/load.js?v=1.94.00"></script>
     <script defer src="modules/io/cloud.js"></script>
-    <script defer src="modules/io/export.js?v=1.93.12"></script>
+    <script defer src="modules/io/export.js?v=1.94.00"></script>
     <script defer src="modules/io/formats.js"></script>
 
     <!-- Web Components -->

libs/umami.js

@@ -1,5 +1,5 @@
 (window => {
-  const noTrack = !location.hostname || window.localStorage.getItem("noTrack");
+  const noTrack = window.localStorage.getItem("noTrack");
 
   const {
     screen: {width, height},

main.js

@@ -134,13 +134,6 @@ fogging
   .attr("fill", "#e8f0f6")
   .attr("filter", "url(#splotch)");
 
-texture
-  .append("image")
-  .attr("id", "textureImage")
-  .attr("preserveAspectRatio", "xMidYMid slice")
-  .attr("width", "100%")
-  .attr("height", "100%");
-
 // assign events separately as not a viewbox child
 scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
 legend
@@ -1955,7 +1948,9 @@ const regenerateMap = debounce(async function (options) {
 
 // clear the map
 function undraw() {
-  viewbox.selectAll("path, circle, polygon, line, text, use, #zones > g, #armies > g, #ruler > g").remove();
+  viewbox
+    .selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g")
+    .remove();
   document
     .getElementById("deftemp")
     .querySelectorAll("path, clipPath, svg")

modules/coa-renderer.js

@@ -1953,9 +1953,9 @@ window.COArenderer = (function () {
     return fetchedCharges.join("");
   }
 
-  const url = location.hostname ? "./charges/" : "http://armoria.herokuapp.com/charges/"; // on local machine fetch files from server
+  const PATH = "./charges/";
   async function fetchCharge(charge, id) {
-    const fetched = fetch(url + charge + ".svg")
+    const fetched = fetch(PATH + charge + ".svg")
       .then(res => {
         if (res.ok) return res.text();
         else throw new Error("Cannot fetch charge");

modules/dynamic/auto-update.js

@@ -638,19 +638,6 @@ export function resolveVersionConflicts(version) {
   }
 
   if (version < 1.91) {
-    // from v1.90.02 texture image is always there
-    if (!texture.select("#textureImage").size()) {
-      // cleanup old texture if it has no id and add new one
-      texture.selectAll("*").remove();
-      texture
-        .append("image")
-        .attr("id", "textureImage")
-        .attr("width", "100%")
-        .attr("height", "100%")
-        .attr("preserveAspectRatio", "xMidYMid slice")
-        .attr("src", "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg");
-    }
-
     // from 1.91.00 custom coa is moved to coa object
     pack.states.forEach(state => {
       if (state.coa === "custom") state.coa = {custom: true};
@@ -704,19 +691,23 @@ export function resolveVersionConflicts(version) {
     labels.selectAll("tspan").each(function () {
       this.setAttribute("x", 0);
     });
+  }
 
-    // leftover from v1.90.02
+  if (version < 1.94) {
+    // from v1.94.00 texture image is removed when layer is off
     texture.style("display", null);
-    const textureImage = texture.select("#textureImage");
-    if (textureImage.size()) {
-      const xlink = textureImage.attr("xlink:href");
-      const href = textureImage.attr("href");
-      const src = xlink || href;
 
-      if (src) {
+    const textureImage = texture.select("image");
-        textureImage.attr("src", src);
+    if (textureImage.size()) {
-        textureImage.attr("xlink:href", null);
+      // restore parameters
-      }
+      const x = Number(textureImage.attr("x") || 0);
+      const y = Number(textureImage.attr("y") || 0);
+      const href = textureImage.attr("xlink:href") || textureImage.attr("href") || textureImage.attr("src");
+      // save parameters to parent element
+      texture.attr("data-href", href).attr("data-x", x).attr("data-y", y);
+      // recreate image in expected format
+      textureImage.remove();
+      drawTexture();
     }
   }
 }

modules/io/export.js

@@ -236,28 +236,28 @@ async function getMapURL(type, options = {}) {
     cloneDefs.querySelector("#defs-emblems")?.remove();
   }
 
-  // replace ocean pattern href to base64
+  {
-  if (location.hostname) {
+    // replace ocean pattern href to base64
-    const el = cloneEl.getElementById("oceanicPattern");
+    const image = cloneEl.getElementById("oceanicPattern");
-    const url = el?.getAttribute("href");
+    const href = image?.getAttribute("href");
-    if (url) {
+    if (href) {
       await new Promise(resolve => {
-        getBase64(url, base64 => {
+        getBase64(href, base64 => {
-          el.setAttribute("href", base64);
+          image.setAttribute("href", base64);
           resolve();
         });
       });
     }
   }
 
-  // replace texture href to base64
+  {
-  if (location.hostname) {
+    // replace texture href to base64
-    const el = cloneEl.getElementById("textureImage");
+    const image = cloneEl.querySelector("#texture > image");
-    const url = el?.getAttribute("href");
+    const href = image?.getAttribute("href");
-    if (url) {
+    if (href) {
       await new Promise(resolve => {
-        getBase64(url, base64 => {
+        getBase64(href, base64 => {
-          el.setAttribute("href", base64);
+          image.setAttribute("href", base64);
           resolve();
         });
       });

modules/io/load.js

@@ -415,7 +415,7 @@ async function parseLoadedData(data) {
         .forEach(el => el.classList.add("buttonoff"));
 
       // turn on active layers
-      if (notHidden(texture) && hasChild(texture, "image")) turnOn("toggleTexture");
+      if (hasChild(texture, "image")) turnOn("toggleTexture");
       if (hasChildren(terrs)) turnOn("toggleHeight");
       if (hasChildren(biomes)) turnOn("toggleBiomes");
       if (hasChildren(cells)) turnOn("toggleCells");
@@ -456,7 +456,7 @@ async function parseLoadedData(data) {
     {
       // dynamically import and run auto-update script
       const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.93.00");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.94.00");
       resolveVersionConflicts(versionNumber);
     }
 
@@ -468,6 +468,12 @@ async function parseLoadedData(data) {
       }
     }
 
+    {
+      // add custom texture if any
+      const textureHref = texture.attr("data-href");
+      updateTextureSelectValue(textureHref);
+    }
+
     void (function checkDataIntegrity() {
       const cells = pack.cells;
 

modules/ui/general.js

@@ -9,7 +9,7 @@ window.addEventListener("resize", function (e) {
   changeMapSize();
 });
 
-if (location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
+if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
   window.onbeforeunload = () => "Are you sure you want to navigate away?";
 }
 

modules/ui/layers.js

@@ -157,6 +157,7 @@ function getCurrentPreset() {
 
 // run on map regeneration
 function restoreLayers() {
+  if (layerIsOn("toggleTexture")) drawTexture();
   if (layerIsOn("toggleHeight")) drawHeightmap();
   if (layerIsOn("toggleCells")) drawCells();
   if (layerIsOn("toggleGrid")) drawGrid();
@@ -1509,18 +1510,30 @@ function toggleRelief(event) {
 function toggleTexture(event) {
   if (!layerIsOn("toggleTexture")) {
     turnButtonOn("toggleTexture");
-    // href is not set directly to avoid image loading when layer is off
+    drawTexture();
-    const textureImage = byId("textureImage");
-    if (textureImage) textureImage.setAttribute("href", textureImage.getAttribute("src"));
-
     if (event && isCtrlClick(event)) editStyle("texture");
   } else {
     if (event && isCtrlClick(event)) return editStyle("texture");
     turnButtonOff("toggleTexture");
-    texture.select("image").attr("href", null);
+    texture.select("image").remove();
   }
 }
 
+function drawTexture() {
+  const x = Number(texture.attr("data-x") || 0);
+  const y = Number(texture.attr("data-y") || 0);
+  const href = texture.attr("data-href");
+
+  texture
+    .append("image")
+    .attr("preserveAspectRatio", "xMidYMid slice")
+    .attr("x", x)
+    .attr("y", y)
+    .attr("width", graphWidth - x)
+    .attr("height", graphHeight - y)
+    .attr("href", href);
+}
+
 function toggleRivers(event) {
   if (!layerIsOn("toggleRivers")) {
     turnButtonOn("toggleRivers");

modules/ui/options.js

@@ -178,7 +178,7 @@ function mapSizeInputChange() {
   }
 }
 
-// change svg size on manual size change or window resize, do not change graph size
+// change svg size on manual size change or window resize (do not change graph size!)
 function changeMapSize() {
   svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
   svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
@@ -186,16 +186,18 @@ function changeMapSize() {
 
   const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
   const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
+
   zoom.translateExtent([
     [0, 0],
     [maxWidth, maxHeight]
   ]);
+
   landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   fogging.selectAll("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   defs.select("mask#fog > rect").attr("width", maxWidth).attr("height", maxHeight);
-  texture.select("image").attr("width", maxWidth).attr("height", maxHeight);
+  defs.select("mask#water > rect").attr("width", maxWidth).attr("height", maxHeight);
 
   fitScaleBar();
   if (window.fitLegendBox) fitLegendBox();

modules/ui/style.js

@@ -71,36 +71,36 @@ function getColorScheme(scheme = "bright") {
 // Toggle style sections on element select
 styleElementSelect.addEventListener("change", selectStyleElement);
 function selectStyleElement() {
-  const sel = styleElementSelect.value;
+  const styleElement = styleElementSelect.value;
-  let el = d3.select("#" + sel);
+  let el = d3.select("#" + styleElement);
 
   styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections
 
   // show alert line if layer is not visible
-  const isLayerOff = sel !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size());
+  const isLayerOff = styleElement !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size());
   styleIsOff.style.display = isLayerOff ? "block" : "none";
 
   // active group element
   const group = styleGroupSelect.value;
-  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
+  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
     const gEl = group && el.select("#" + group);
     el = group && gEl.size() ? gEl : el.select("g");
   }
 
   // opacity
-  if (!["landmass", "ocean", "regions", "legend"].includes(sel)) {
+  if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) {
     styleOpacity.style.display = "block";
     styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
   }
 
   // filter
-  if (!["landmass", "legend", "regions"].includes(sel)) {
+  if (!["landmass", "legend", "regions"].includes(styleElement)) {
     styleFilter.style.display = "block";
     styleFilterInput.value = el.attr("filter") || "";
   }
 
   // fill
-  if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) {
+  if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(styleElement)) {
     styleFill.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill");
   }
@@ -122,7 +122,7 @@ function selectStyleElement() {
       "coordinates",
       "zones",
       "gridOverlay"
-    ].includes(sel)
+    ].includes(styleElement)
   ) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
@@ -132,7 +132,9 @@ function selectStyleElement() {
 
   // stroke dash
   if (
-    ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)
+    ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(
+      styleElement
+    )
   ) {
     styleStrokeDash.style.display = "block";
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
@@ -152,16 +154,21 @@ function selectStyleElement() {
       "texture",
       "biomes",
       "zones"
-    ].includes(sel)
+    ].includes(styleElement)
   ) {
     styleClipping.style.display = "block";
     styleClippingInput.value = el.attr("mask") || "";
   }
 
   // show specific sections
-  if (sel === "texture") styleTexture.style.display = "block";
+  if (styleElement === "texture") {
+    styleTexture.style.display = "block";
+    styleTextureShiftX.value = el.attr("data-x") || 0;
+    styleTextureShiftY.value = el.attr("data-y") || 0;
+    updateTextureSelectValue(el.attr("data-href"));
+  }
 
-  if (sel === "terrs") {
+  if (styleElement === "terrs") {
     styleHeightmap.style.display = "block";
     styleHeightmapScheme.value = terrs.attr("scheme");
     styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing");
@@ -170,12 +177,12 @@ function selectStyleElement() {
     styleHeightmapCurve.value = terrs.attr("curve");
   }
 
-  if (sel === "markers") {
+  if (styleElement === "markers") {
     styleMarkers.style.display = "block";
     styleRescaleMarkers.checked = +markers.attr("rescale");
   }
 
-  if (sel === "gridOverlay") {
+  if (styleElement === "gridOverlay") {
     styleGrid.style.display = "block";
     styleGridType.value = el.attr("type");
     styleGridScale.value = el.attr("scale") || 1;
@@ -184,7 +191,7 @@ function selectStyleElement() {
     calculateFriendlyGridSize();
   }
 
-  if (sel === "compass") {
+  if (styleElement === "compass") {
     styleCompass.style.display = "block";
     const tr = parseTransform(compass.select("use").attr("transform"));
     styleCompassShiftX.value = tr[0];
@@ -192,14 +199,14 @@ function selectStyleElement() {
     styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
   }
 
-  if (sel === "terrain") {
+  if (styleElement === "terrain") {
     styleRelief.style.display = "block";
     styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
     styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
     styleReliefSet.value = terrain.attr("set");
   }
 
-  if (sel === "population") {
+  if (styleElement === "population") {
     stylePopulation.style.display = "block";
     stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population
       .select("#rural")
@@ -211,7 +218,7 @@ function selectStyleElement() {
     styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
   }
 
-  if (sel === "regions") {
+  if (styleElement === "regions") {
     styleStates.style.display = "block";
     styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
     styleStatesBodyFilter.value = statesBody.attr("filter") || "";
@@ -221,7 +228,7 @@ function selectStyleElement() {
     styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
   }
 
-  if (sel === "labels") {
+  if (styleElement === "labels") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
@@ -239,7 +246,7 @@ function selectStyleElement() {
     styleFontSize.value = el.attr("data-size");
   }
 
-  if (sel === "provs") {
+  if (styleElement === "provs") {
     styleFill.style.display = "block";
     styleSize.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111";
@@ -249,7 +256,7 @@ function selectStyleElement() {
     styleFontSize.value = el.attr("data-size");
   }
 
-  if (sel == "burgIcons") {
+  if (styleElement == "burgIcons") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
@@ -263,7 +270,7 @@ function selectStyleElement() {
     styleRadiusInput.value = el.attr("size") || 1;
   }
 
-  if (sel == "anchors") {
+  if (styleElement == "anchors") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
@@ -274,7 +281,7 @@ function selectStyleElement() {
     styleIconSizeInput.value = el.attr("size") || 2;
   }
 
-  if (sel === "legend") {
+  if (styleElement === "legend") {
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
     styleSize.style.display = "block";
@@ -292,7 +299,7 @@ function selectStyleElement() {
     styleFontSize.value = el.attr("data-size");
   }
 
-  if (sel === "ocean") {
+  if (styleElement === "ocean") {
     styleOcean.style.display = "block";
     styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
     styleOceanPattern.value = byId("oceanicPattern")?.getAttribute("href");
@@ -301,7 +308,7 @@ function selectStyleElement() {
     outlineLayers.value = oceanLayers.attr("layers");
   }
 
-  if (sel === "temperature") {
+  if (styleElement === "temperature") {
     styleStrokeWidth.style.display = "block";
     styleTemperature.style.display = "block";
     styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
@@ -310,18 +317,18 @@ function selectStyleElement() {
     styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
   }
 
-  if (sel === "coordinates") {
+  if (styleElement === "coordinates") {
     styleSize.style.display = "block";
     styleFontSize.value = el.attr("data-size");
   }
 
-  if (sel === "armies") {
+  if (styleElement === "armies") {
     styleArmies.style.display = "block";
     styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
     styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
   }
 
-  if (sel === "emblems") {
+  if (styleElement === "emblems") {
     styleEmblems.style.display = "block";
     styleStrokeWidth.style.display = "block";
     styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
@@ -329,8 +336,8 @@ function selectStyleElement() {
 
   // update group options
   styleGroupSelect.options.length = 0; // remove all options
-  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
+  if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
-    const groups = byId(sel).querySelectorAll("g");
+    const groups = byId(styleElement).querySelectorAll("g");
     groups.forEach(el => {
       if (el.id === "burgLabels") return;
       const option = new Option(`${el.id} (${el.childElementCount})`, el.id, false, false);
@@ -339,11 +346,11 @@ function selectStyleElement() {
     styleGroupSelect.value = el.attr("id");
     styleGroup.style.display = "block";
   } else {
-    styleGroupSelect.options.add(new Option(sel, sel, false, true));
+    styleGroupSelect.options.add(new Option(styleElement, styleElement, false, true));
     styleGroup.style.display = "none";
   }
 
-  if (sel === "coastline" && styleGroupSelect.value === "sea_island") {
+  if (styleElement === "coastline" && styleGroupSelect.value === "sea_island") {
     styleCoastline.style.display = "block";
     const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter"));
     if (auto) styleFilter.style.display = "none";
@@ -398,12 +405,26 @@ styleFilterInput.addEventListener("change", function () {
 });
 
 styleTextureInput.addEventListener("change", function () {
-  texture.select("image").attr("src", this.value);
+  changeTexture(this.value);
-  if (layerIsOn("toggleTexture")) texture.select("image").attr("href", this.value);
-  zoom.scaleBy(svg, 1.00001);
 });
 
+function changeTexture(href) {
+  texture.attr("data-href", href);
+  texture.select("image").attr("href", href);
+}
+
+function updateTextureSelectValue(href) {
+  const isAdded = Array.from(styleTextureInput.options).some(option => option.value === href);
+  if (isAdded) {
+    styleTextureInput.value = href;
+  } else {
+    const name = href.split("/").pop().slice(0, 20);
+    styleTextureInput.add(new Option(name, href, false, true));
+  }
+}
+
 styleTextureShiftX.addEventListener("input", function () {
+  texture.attr("data-x", this.value);
   texture
     .select("image")
     .attr("x", this.value)
@@ -411,6 +432,7 @@ styleTextureShiftX.addEventListener("input", function () {
 });
 
 styleTextureShiftY.addEventListener("input", function () {
+  texture.attr("data-y", this.value);
   texture
     .select("image")
     .attr("y", this.value)
@@ -905,27 +927,19 @@ emblemsBurgSizeInput.addEventListener("change", drawEmblems);
 
 // request a URL to image to be used as a texture
 function textureProvideURL() {
-  alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture:
+  alertMessage.innerHTML = /* html */ `Provide a texture image URL:
     <input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" />
     <canvas id="texturePreview" width="256px" height="144px"></canvas>`;
+
   $("#alert").dialog({
     resizable: false,
     title: "Load custom texture",
-    width: "26em",
+    width: "28em",
     buttons: {
       Apply: function () {
-        const name = textureURL.value.split("/").pop();
+        if (!textureURL.value) return tip("Please provide a valid URL", false, "error");
-        if (!name || name === "") return tip("Please provide a valid URL", false, "error");
+        changeTexture(textureURL.value);
-
+        updateTextureSelectValue(textureURL.value);
-        const opt = document.createElement("option");
-        opt.value = textureURL.value;
-        opt.text = name.slice(0, 20);
-        styleTextureInput.add(opt);
-        styleTextureInput.value = textureURL.value;
-
-        const image = texture.select("image");
-        image.attr("src", textureURL.value);
-        if (layerIsOn("toggleTexture")) image.attr("href", textureURL.value);
         $(this).dialog("close");
       },
       Cancel: function () {

modules/ui/stylePresets.js

@@ -62,21 +62,19 @@ async function getStylePreset(desiredPreset) {
 }
 
 async function fetchSystemPreset(preset) {
-  const style = await fetch(`./styles/${preset}.json`)
+  try {
-    .then(res => res.json())
+    const res = await fetch(`./styles/${preset}.json`);
-    .catch(err => {
+    return await res.json();
-      ERROR && console.error("Error on loading style preset", preset, err);
+  } catch (err) {
-      return null;
+    throw new Error("Cannot fetch style preset", preset);
-    });
+  }
-
-  if (!style) throw new Error("Cannot fetch style preset", preset);
-  return style;
 }
 
 function applyStyle(style) {
   for (const selector in style) {
     const el = document.querySelector(selector);
     if (!el) continue;
+
     for (const attribute in style[selector]) {
       const value = style[selector][attribute];
 
@@ -91,8 +89,13 @@ function applyStyle(style) {
         el.setAttribute(attribute, value);
       }
 
-      if (layerIsOn("toggleTexture") && selector === "#textureImage" && attribute === "src") {
+      if (selector === "#texture") {
-        el.setAttribute("href", value);
+        const image = document.querySelector("#texture > image");
+        if (image) {
+          if (attribute === "data-x") image.setAttribute("x", value);
+          if (attribute === "data-y") image.setAttribute("y", value);
+          if (attribute === "data-href") image.setAttribute("href", value);
+        }
       }
 
       // add custom heightmap color scheme
@@ -105,10 +108,7 @@ function applyStyle(style) {
 
 function requestStylePresetChange(preset) {
   const isConfirmed = sessionStorage.getItem("styleChangeConfirmed");
-  if (isConfirmed) {
+  if (isConfirmed) return changeStyle(preset);
-    changeStyle(preset);
-    return;
-  }
 
   confirmationDialog({
     title: "Change style preset",
@@ -126,8 +126,8 @@ function requestStylePresetChange(preset) {
 
 async function changeStyle(desiredPreset) {
   const styleData = await getStylePreset(desiredPreset);
-  const [appliedPreset, style] = styleData;
+  const [presetName, style] = styleData;
-  localStorage.setItem("presetStyle", appliedPreset);
+  localStorage.setItem("presetStyle", presetName);
   applyStyleWithUiRefresh(style);
 }
 
@@ -234,8 +234,7 @@ function addStylePreset() {
       ],
       "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#emblems": ["opacity", "stroke-width", "filter"],
-      "#texture": ["opacity", "filter", "mask"],
+      "#texture": ["opacity", "filter", "mask", "data-x", "data-y", "data-href"],
-      "#textureImage": ["x", "y", "src"],
       "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
       "#oceanLayers": ["filter", "layers"],
       "#oceanBase": ["fill"],

styles/ancient.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.6,
     "filter": "",
-    "mask": ""
+    "mask": "",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/antique-small.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/atlas.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.2,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/clean.json

@@ -263,12 +263,10 @@
   "#texture": {
     "opacity": 0.2,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.7,

styles/cyberpunk.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.2,
     "filter": null,
-    "mask": "url(#water)"
+    "mask": "url(#water)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/mercury-small.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg"
   },
   "#zones": {
     "opacity": 0.7,

styles/default.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": null,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/marble-big.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/gloom.json

@@ -263,12 +263,10 @@
   "#texture": {
     "opacity": 0.8,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/iran-small.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg"
   },
   "#zones": {
     "opacity": 0.5,

styles/light.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.4,
     "filter": null,
-    "mask": ""
+    "mask": "",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/monochrome.json

@@ -251,12 +251,10 @@
   "#texture": {
     "opacity": 0.2,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#emblems": {
     "opacity": 0.5,

styles/night.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.1,
     "filter": null,
-    "mask": "url(#water)"
+    "mask": "url(#water)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/marble-blue-small.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/pale.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.4,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.6,

styles/watercolor.json

@@ -261,12 +261,10 @@
   "#texture": {
     "opacity": 0.2,
     "filter": null,
-    "mask": "url(#land)"
+    "mask": "url(#land)",
-  },
+    "data-x": 0,
-  "#textureImage": {
+    "data-y": 0,
-    "x": 0,
+    "data-href": "./images/textures/plaster.jpg"
-    "y": 0,
-    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.6,

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.93.12"; // generator version, update each time
+const version = "1.94.00"; // generator version, update each time
 
 {
   document.title += " v" + version;