feat: style - store emblem size mod in style (v1.99.10)

index.html

@@ -1341,45 +1341,21 @@
               <tr data-tip="Set state emblems size multiplier">
                 <td>State size</td>
                 <td>
-                  <input
+                  <slider-input id="emblemsStateSizeInput" min="0" max="5" step=".01"></slider-input>
-                    id="emblemsStateSizeInput"
-                    data-stored="emblemsStateSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
                 </td>
               </tr>
 
               <tr data-tip="Set province emblems size multiplier">
                 <td>Province size</td>
                 <td>
-                  <input
+                  <slider-input id="emblemsProvinceSizeInput" min="0" max="5" step=".01"></slider-input>
-                    id="emblemsProvinceSizeInput"
-                    data-stored="emblemsProvinceSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
                 </td>
               </tr>
 
               <tr data-tip="Set burg emblems size multiplier">
                 <td>Burg size</td>
                 <td>
-                  <input
+                  <slider-input id="emblemsBurgSizeInput" min="0" max="5" step=".01"></slider-input>
-                    id="emblemsBurgSizeInput"
-                    data-stored="emblemsBurgSize"
-                    type="number"
-                    min="0"
-                    max="5"
-                    step=".02"
-                    value="1"
-                  />
                 </td>
               </tr>
 
@@ -8015,7 +7991,7 @@
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=1.99.00"></script>
-    <script src="modules/ocean-layers.js?v=1.99.07"></script>
+    <script src="modules/ocean-layers.js?v=1.99.10"></script>
     <script src="modules/river-generator.js?v=1.99.05"></script>
     <script src="modules/lakes.js?v=1.99.00"></script>
     <script src="modules/biomes.js?v=1.99.00"></script>
@@ -8035,14 +8011,14 @@
     <script src="modules/fonts.js?v=1.99.03"></script>
     <script src="modules/ui/layers.js?v=1.99.05"></script>
     <script src="modules/ui/measurers.js?v=1.99.00"></script>
-    <script src="modules/ui/stylePresets.js?v=1.99.03"></script>
+    <script src="modules/ui/stylePresets.js?v=1.99.10"></script>
 
     <script src="modules/ui/general.js?v=1.99.05"></script>
     <script src="modules/ui/options.js?v=1.99.05"></script>
     <script src="main.js?v=1.99.00"></script>
 
     <script defer src="modules/relief-icons.js?v=1.99.05"></script>
-    <script defer src="modules/ui/style.js?v=1.99.08"></script>
+    <script defer src="modules/ui/style.js?v=1.99.10"></script>
     <script defer src="modules/ui/editors.js?v=1.99.05"></script>
     <script defer src="modules/ui/tools.js?v=1.99.06"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.99.00"></script>
@@ -8079,7 +8055,7 @@
     <script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/markers-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/3d.js?v=1.99.00"></script>
-    <script defer src="modules/ui/submap.js?v=1.99.05"></script>
+    <script defer src="modules/ui/submap.js?v=1.99.10"></script>
     <script defer src="modules/ui/hotkeys.js?v=1.99.05"></script>
     <script defer src="modules/coa-renderer.js?v=1.99.00"></script>
     <script defer src="libs/rgbquant.min.js"></script>

modules/ui/layers.js

@@ -1908,21 +1908,21 @@ function drawEmblems() {
   const getStateEmblemsSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
     const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
-    const sizeMod = +byId("emblemsStateSizeInput").value || 1;
+    const sizeMod = +emblems.select("#stateEmblems").attr("data-size") || 1;
     return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
   };
 
   const getProvinceEmblemsSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
     const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
-    const sizeMod = +byId("emblemsProvinceSizeInput").value || 1;
+    const sizeMod = +emblems.select("#provinceEmblems").attr("data-size") || 1;
     return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
   };
 
   const getBurgEmblemSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
     const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
-    const sizeMod = +byId("emblemsBurgSizeInput").value || 1;
+    const sizeMod = +emblems.select("#burgEmblems").attr("data-size") || 1;
     return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
   };
 

modules/ui/style.js

@@ -337,6 +337,9 @@ function selectStyleElement() {
     styleEmblems.style.display = "block";
     styleStrokeWidth.style.display = "block";
     styleStrokeWidthInput.value = el.attr("stroke-width") || 1;
+    emblemsStateSizeInput.value = emblems.select("#stateEmblems").attr("data-size") || 1;
+    emblemsProvinceSizeInput.value = emblems.select("#provinceEmblems").attr("data-size") || 1;
+    emblemsBurgSizeInput.value = emblems.select("#burgEmblems").attr("data-size") || 1;
   }
 
   // update group options
@@ -945,9 +948,20 @@ styleArmiesSize.addEventListener("input", e => {
   });
 });
 
-emblemsStateSizeInput.addEventListener("change", drawEmblems);
+emblemsStateSizeInput.addEventListener("change", e => {
-emblemsProvinceSizeInput.addEventListener("change", drawEmblems);
+  emblems.select("#stateEmblems").attr("data-size", e.target.value);
-emblemsBurgSizeInput.addEventListener("change", drawEmblems);
+  drawEmblems();
+});
+
+emblemsProvinceSizeInput.addEventListener("change", e => {
+  emblems.select("#provinceEmblems").attr("data-size", e.target.value);
+  drawEmblems();
+});
+
+emblemsBurgSizeInput.addEventListener("change", e => {
+  emblems.select("#burgEmblems").attr("data-size", e.target.value);
+  drawEmblems();
+});
 
 // request a URL to image to be used as a texture
 function textureProvideURL() {

modules/ui/stylePresets.js

@@ -238,6 +238,9 @@ function addStylePreset() {
       ],
       "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#emblems": ["opacity", "stroke-width", "filter"],
+      "#emblems > #stateEmblems": ["data-size"],
+      "#emblems > #provinceEmblems": ["data-size"],
+      "#emblems > #burgEmblems": ["data-size"],
       "#texture": ["opacity", "filter", "mask", "data-x", "data-y", "data-href"],
       "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
       "#oceanLayers": ["filter", "layers"],

modules/ui/submap.js

@@ -316,11 +316,6 @@ window.UISubmap = (function () {
       bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
     }
 
-    // emblems
-    const emblemMod = minmax((scale - 1) * 0.3 + 1, 0.5, 5);
-    emblemsStateSizeInput.value = minmax(+emblemsStateSizeInput.value * emblemMod, 0.5, 5);
-    emblemsProvinceSizeInput.value = minmax(+emblemsProvinceSizeInput.value * emblemMod, 0.5, 5);
-    emblemsBurgSizeInput.value = minmax(+emblemsBurgSizeInput.value * emblemMod, 0.5, 5);
     drawEmblems();
   }
 

styles/ancient.json

@@ -258,6 +258,15 @@
     "stroke-width": 0.8,
     "filter": "url(#dropShadow05)"
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.6,
     "filter": "",

styles/atlas.json

@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,

styles/clean.json

@@ -260,6 +260,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,

styles/cyberpunk.json

@@ -256,7 +256,16 @@
   "#emblems": {
     "opacity": 0.75,
     "stroke-width": 0.5,
-    "filter": ""
+    "filter": null
+  },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
   },
   "#texture": {
     "opacity": 0.2,

styles/darkSeas.json

@@ -247,6 +247,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,

styles/default.json

@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": null,
     "filter": null,

styles/gloom.json

@@ -260,6 +260,15 @@
     "stroke-width": 0.5,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.8,
     "filter": null,

styles/light.json

@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,

styles/monochrome.json

@@ -261,6 +261,15 @@
     "stroke-width": 0.5,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",

styles/night.json

@@ -258,6 +258,15 @@
     "stroke-width": null,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.1,
     "filter": null,

styles/pale.json

@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,

styles/watercolor.json

@@ -258,6 +258,15 @@
     "stroke-width": 1,
     "filter": null
   },
+  "#emblems > #stateEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #provinceEmblems": {
+    "data-size": 1
+  },
+  "#emblems > #burgEmblems": {
+    "data-size": 1
+  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,

versioning.js

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