bug: style to have texture info

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>

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

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");
+    }
+  }
 }

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 => {

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
+    // href is not set directly to avoid image loading when layer is off
-    if (!texture.selectAll("*").size()) {
+    const src = texture.select("image").attr("src");
-      const x = +styleTextureShiftX.value;
+    texture.select("image").attr("href", src);
-      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
     if (event && isCtrlClick(event)) editStyle("texture");
   } else {
     if (event && isCtrlClick(event)) return editStyle("texture");
-    $("#texture").fadeOut();
     turnButtonOff("toggleTexture");
+    texture.select("image").attr("href", null);
   }
 }
 

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");
+    stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population
-    stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
+      .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", "");
+  texture.select("image").attr("src", this.value);
-  else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
+  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 === "") {
+        if (!name || name === "") return tip("Please provide a valid URL", false, "error");
-          tip("Please provide a valid URL", false, "error");
+
-          return;
-        }
         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 () {

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"],

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,

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",

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",

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",

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",

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,

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",

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",

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,

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",

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;