From c72c998eaf57d1cb07fe111b1c34b5fb760804f9 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.com>
Date: Tue, 8 Aug 2023 01:34:36 +0400
Subject: [PATCH] bug: style to have texture info

---
 index.html                     |  2 +-
 main.js                        |  7 ++++
 modules/dynamic/auto-update.js | 14 +++++++
 modules/io/export.js           | 18 ++++++++-
 modules/ui/layers.js           | 21 ++--------
 modules/ui/style.js            | 71 ++++++++++++++++++++++++++--------
 modules/ui/stylePresets.js     |  6 ++-
 styles/ancient.json            |  3 +-
 styles/atlas.json              |  7 +++-
 styles/clean.json              |  8 +++-
 styles/cyberpunk.json          |  7 +++-
 styles/default.json            |  5 +++
 styles/gloom.json              |  5 ++-
 styles/light.json              |  7 +++-
 styles/monochrome.json         |  8 +++-
 styles/pale.json               |  5 ++-
 styles/watercolor.json         |  5 +++
 versioning.js                  |  2 +-
 18 files changed, 150 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 167fe89c..0ff9b35a 100644
--- a/index.html
+++ b/index.html
@@ -865,7 +865,7 @@
                 <td>Image</td>
                 <td>
                   <select id="styleTextureInput">
-                    <option value="none">None</option>
+                    <option value="">No texture</option>
                     <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-big.jpg">
                       Folded paper big
                     </option>
diff --git a/main.js b/main.js
index c5dfdf4b..4996cf88 100644
--- a/main.js
+++ b/main.js
@@ -134,6 +134,13 @@ 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
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index 6c280826..0fa604a5 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -636,4 +636,18 @@ export function resolveVersionConflicts(version) {
       if (coa?.shield === "state") delete coa.shield;
     });
   }
+
+  if (version < 1.9) {
+    // from v1.90.02 texture image is always there
+    if (!texture.selectAll("*").size()) {
+      texture.style("display", "none");
+      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");
+    }
+  }
 }
diff --git a/modules/io/export.js b/modules/io/export.js
index 4d9f2a88..aee9dbc8 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -237,9 +237,23 @@ async function getMapURL(type, options = {}) {
   }
 
   // replace ocean pattern href to base64
-  if (location.hostname && cloneEl.getElementById("oceanicPattern")) {
+  if (location.hostname) {
     const el = cloneEl.getElementById("oceanicPattern");
-    const url = el.getAttribute("href");
+    const url = el?.getAttribute("href");
+    if (url) {
+      await new Promise(resolve => {
+        getBase64(url, base64 => {
+          el.setAttribute("href", base64);
+          resolve();
+        });
+      });
+    }
+  }
+
+  // replace texture href to base64
+  if (location.hostname) {
+    const el = cloneEl.getElementById("textureImage");
+    const url = el?.getAttribute("href");
     if (url) {
       await new Promise(resolve => {
         getBase64(url, base64 => {
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 3ea64e72..286e05aa 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -1517,27 +1517,14 @@ function toggleRelief(event) {
 function toggleTexture(event) {
   if (!layerIsOn("toggleTexture")) {
     turnButtonOn("toggleTexture");
-    // append default texture image selected by default. Don't append on load to not harm performance
-    if (!texture.selectAll("*").size()) {
-      const x = +styleTextureShiftX.value;
-      const y = +styleTextureShiftY.value;
-      const image = texture
-        .append("image")
-        .attr("id", "textureImage")
-        .attr("x", x)
-        .attr("y", y)
-        .attr("width", graphWidth - x)
-        .attr("height", graphHeight - y)
-        .attr("preserveAspectRatio", "xMidYMid slice");
-      getBase64(styleTextureInput.value, base64 => image.attr("xlink:href", base64));
-    }
-    $("#texture").fadeIn();
-    zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
+    // href is not set directly to avoid image loading when layer is off
+    const src = texture.select("image").attr("src");
+    texture.select("image").attr("href", src);
     if (event && isCtrlClick(event)) editStyle("texture");
   } else {
     if (event && isCtrlClick(event)) return editStyle("texture");
-    $("#texture").fadeOut();
     turnButtonOff("toggleTexture");
+    texture.select("image").attr("href", null);
   }
 }
 
diff --git a/modules/ui/style.js b/modules/ui/style.js
index b0f092fc..94331a11 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -76,9 +76,22 @@ function selectStyleElement() {
 
   // stroke color and width
   if (
-    ["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(
-      sel
-    )
+    [
+      "armies",
+      "routes",
+      "lakes",
+      "borders",
+      "cults",
+      "relig",
+      "cells",
+      "coastline",
+      "prec",
+      "ice",
+      "icons",
+      "coordinates",
+      "zones",
+      "gridOverlay"
+    ].includes(sel)
   ) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
@@ -87,14 +100,29 @@ function selectStyleElement() {
   }
 
   // stroke dash
-  if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) {
+  if (
+    ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)
+  ) {
     styleStrokeDash.style.display = "block";
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
     styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
   }
 
   // clipping
-  if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) {
+  if (
+    [
+      "cells",
+      "gridOverlay",
+      "coordinates",
+      "compass",
+      "terrain",
+      "temperature",
+      "routes",
+      "texture",
+      "biomes",
+      "zones"
+    ].includes(sel)
+  ) {
     styleClipping.style.display = "block";
     styleClippingInput.value = el.attr("mask") || "";
   }
@@ -142,8 +170,12 @@ function selectStyleElement() {
 
   if (sel === "population") {
     stylePopulation.style.display = "block";
-    stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
-    stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
+    stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population
+      .select("#rural")
+      .attr("stroke");
+    stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population
+      .select("#urban")
+      .attr("stroke");
     styleStrokeWidth.style.display = "block";
     styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
   }
@@ -233,7 +265,8 @@ function selectStyleElement() {
     styleOcean.style.display = "block";
     styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
     styleOceanPattern.value = document.getElementById("oceanicPattern")?.getAttribute("href");
-    styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value = document.getElementById("oceanicPattern").getAttribute("opacity") || 1;
+    styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
+      document.getElementById("oceanicPattern").getAttribute("opacity") || 1;
     outlineLayers.value = oceanLayers.attr("layers");
   }
 
@@ -334,8 +367,9 @@ styleFilterInput.addEventListener("change", function () {
 });
 
 styleTextureInput.addEventListener("change", function () {
-  if (this.value === "none") texture.select("image").attr("xlink:href", "");
-  else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
+  texture.select("image").attr("src", this.value);
+  if (layerIsOn("toggleTexture")) texture.select("image").attr("href", this.value);
+  zoom.scaleBy(svg, 1.00001);
 });
 
 styleTextureShiftX.addEventListener("input", function () {
@@ -551,7 +585,10 @@ styleFontAdd.addEventListener("click", function () {
 
         if (!family) return tip("Please provide a font name", false, "error");
 
-        const existingFont = method === "fontURL" ? fonts.find(font => font.family === family && font.src === src) : fonts.find(font => font.family === family);
+        const existingFont =
+          method === "fontURL"
+            ? fonts.find(font => font.family === family && font.src === src)
+            : fonts.find(font => font.family === family);
         if (existingFont) return tip("The font is already added", false, "error");
 
         if (method === "fontURL") addWebFont(family, src);
@@ -726,17 +763,17 @@ function textureProvideURL() {
     buttons: {
       Apply: function () {
         const name = textureURL.value.split("/").pop();
-        if (!name || name === "") {
-          tip("Please provide a valid URL", false, "error");
-          return;
-        }
+        if (!name || name === "") return tip("Please provide a valid URL", false, "error");
+
         const opt = document.createElement("option");
         opt.value = textureURL.value;
         opt.text = name.slice(0, 20);
         styleTextureInput.add(opt);
         styleTextureInput.value = textureURL.value;
-        getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64));
-        zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
+
+        const image = texture.select("image");
+        image.attr("src", textureURL.value);
+        if (layerIsOn("toggleTexture")) image.attr("href", textureURL.value);
         $(this).dialog("close");
       },
       Cancel: function () {
diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index 20e1612c..c0d32af7 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/stylePresets.js
@@ -89,6 +89,10 @@ function applyStyle(style) {
       } else {
         el.setAttribute(attribute, value);
       }
+
+      if (layerIsOn("toggleTexture") && selector === "#textureImage" && attribute === "src") {
+        el.setAttribute("href", value);
+      }
     }
   }
 }
@@ -225,7 +229,7 @@ function addStylePreset() {
       "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#emblems": ["opacity", "stroke-width", "filter"],
       "#texture": ["opacity", "filter", "mask"],
-      "#textureImage": ["x", "y"],
+      "#textureImage": ["x", "y", "src"],
       "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
       "#oceanLayers": ["filter", "layers"],
       "#oceanBase": ["fill"],
diff --git a/styles/ancient.json b/styles/ancient.json
index 09704553..333cf4ab 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -265,7 +265,8 @@
   },
   "#textureImage": {
     "x": 0,
-    "y": 0
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg"
   },
   "#zones": {
     "opacity": 0.6,
diff --git a/styles/atlas.json b/styles/atlas.json
index c26848a0..4ee11aeb 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -259,10 +259,15 @@
     "filter": null
   },
   "#texture": {
-    "opacity": null,
+    "opacity": 0.2,
     "filter": null,
     "mask": "url(#land)"
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
diff --git a/styles/clean.json b/styles/clean.json
index fd00c5ad..929c712f 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -261,11 +261,15 @@
     "filter": null
   },
   "#texture": {
-    "opacity": null,
+    "opacity": 0.2,
     "filter": null,
     "mask": "url(#land)"
   },
-  "#textureImage": {},
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
+  },
   "#zones": {
     "opacity": 0.7,
     "stroke": "#ff6262",
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 579d093b..ba8e9345 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -259,10 +259,15 @@
     "filter": ""
   },
   "#texture": {
-    "opacity": 0.14,
+    "opacity": 0.2,
     "filter": null,
     "mask": "url(#water)"
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg"
+  },
   "#zones": {
     "opacity": 0.7,
     "stroke": "#ffffff",
diff --git a/styles/default.json b/styles/default.json
index 4c684dc8..76af307c 100644
--- a/styles/default.json
+++ b/styles/default.json
@@ -263,6 +263,11 @@
     "filter": null,
     "mask": "url(#land)"
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg"
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
diff --git a/styles/gloom.json b/styles/gloom.json
index 91b5e0fe..d2c54e7a 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -261,13 +261,14 @@
     "filter": null
   },
   "#texture": {
-    "opacity": null,
+    "opacity": 0.8,
     "filter": null,
     "mask": "url(#land)"
   },
   "#textureImage": {
     "x": 0,
-    "y": 0
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg"
   },
   "#zones": {
     "opacity": 0.5,
diff --git a/styles/light.json b/styles/light.json
index fb9b838c..358f3315 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -259,10 +259,15 @@
     "filter": null
   },
   "#texture": {
-    "opacity": 0.39,
+    "opacity": 0.4,
     "filter": null,
     "mask": ""
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
diff --git a/styles/monochrome.json b/styles/monochrome.json
index e94f5a7b..11837189 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -249,16 +249,20 @@
     "filter": "url(#dropShadow05)"
   },
   "#texture": {
-    "opacity": 1,
+    "opacity": 0.2,
     "filter": null,
     "mask": "url(#land)"
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
+  },
   "#emblems": {
     "opacity": 0.5,
     "stroke-width": 0.5,
     "filter": null
   },
-  "#textureImage": {},
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
diff --git a/styles/pale.json b/styles/pale.json
index e6acdafd..a0c444e1 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -259,13 +259,14 @@
     "filter": null
   },
   "#texture": {
-    "opacity": 0.39,
+    "opacity": 0.4,
     "filter": null,
     "mask": "url(#land)"
   },
   "#textureImage": {
     "x": 0,
-    "y": 0
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
   },
   "#zones": {
     "opacity": 0.6,
diff --git a/styles/watercolor.json b/styles/watercolor.json
index 729df648..6865aa23 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -263,6 +263,11 @@
     "filter": null,
     "mask": "url(#land)"
   },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
diff --git a/versioning.js b/versioning.js
index 904f4d49..38ff96fa 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.90.01"; // generator version, update each time
+const version = "1.90.02"; // generator version, update each time
 
 {
   document.title += " v" + version;