Dev submaps update (#780)

* Rescale style option for submaps.

* namespace for submap ui.

* Keep visual change for towns

Co-authored-by: Mészáros Gergely <monk@geotronic.hu>

index.html

@@ -1728,8 +1728,8 @@
 
           <p>Click to create a new map:</p>
           <div id="resamplers">
-            <button data-tip="Click to generate new (sub)map from the current viewport" onclick="openSubmapOptions()">Submap</button>
+            <button data-tip="Click to generate new (sub)map from the current viewport" onclick="UISubmap.openSubmapOptions()">Submap</button>
-            <button data-tip="Click to resample (transform) your map to different cellcount" onclick="openRemapOptions()">Resample</button>
+            <button data-tip="Click to resample (transform) your map to different cellcount" onclick="UISubmap.openRemapOptions()">Resample</button>
           </div>
         </div>
 
@@ -4488,6 +4488,10 @@
           <input id="submapDepressRivers" class="checkbox" type="checkbox" />
           <label for="submapDepressRivers" class="checkbox-label">Errode riverbeds.</label>
         </div>
+        <div data-tip="Rescale styles (burg labels, emblem size) to match the new scale.">
+          <input id="submapRescaleStyles" class="checkbox" type="checkbox" checked/>
+          <label for="submapRescaleStyles" class="checkbox-label">Rescale Styles</label>
+        </div>
         <div data-tip="Move all existing towns to the 'largetown' burg group">
           <input id="submapPromoteTowns" class="checkbox" type="checkbox" />
           <label for="submapPromoteTowns" class="checkbox-label">Promote towns to largetowns</label>

modules/ui/submap.js

@@ -4,7 +4,8 @@
 UI elements for submap generation
 */
 
-function openSubmapOptions() {
+window.UISubmap = (function () {
+  function openSubmapOptions() {
     $("#submapOptionsDialog").dialog({
       title: "Submap options",
       resizable: false,
@@ -20,9 +21,9 @@ function openSubmapOptions() {
         }
       }
     });
-}
+  }
 
-function openRemapOptions() {
+  function openRemapOptions() {
     resetZoom(0);
     $("#remapOptionsDialog").dialog({
       title: "Resampler options",
@@ -31,14 +32,7 @@ function openRemapOptions() {
       position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
       buttons: {
         Resample: function () {
-        const cellNumId = Number(document.getElementById("submapPointsInput").value);
-        const cells = cellsDensityConstants[cellNumId];
           $(this).dialog("close");
-        if (!cells) {
-          console.error("Unknown cell number!");
-          return;
-        }
-        changeCellsDensity(cellNumId);
           resampleCurrentMap();
         },
         Cancel: function () {
@@ -46,28 +40,33 @@ function openRemapOptions() {
         }
       }
     });
-}
+  }
 
-/* callbacks */
+  /* callbacks */
 
-const resampleCurrentMap = debounce(function () {
+  const resampleCurrentMap = debounce(function () {
     // Resample the whole map to different cell resolution or shape
+    const cellNumId = Number(document.getElementById("submapPointsInput").value);
+    if (!cellsDensityConstants[cellNumId]) {
+      console.error("Unknown cell number!");
+      return;
+    }
+    changeCellsDensity(cellNumId);
     WARN && console.warn("Resampling current map");
-  const options = {
+    startResample({
       lockMarkers: false,
       lockBurgs: false,
       depressRivers: false,
       addLakesInDepressions: false,
       promoteTowns: false,
       smoothHeightMap: false,
+      rescaleStyles: false,
       projection: (x, y) => [x, y],
       inverse: (x, y) => [x, y]
-  };
+    });
+  }, 1000);
 
-  startResample(options);
+  const generateSubmap = debounce(function () {
-}, 1000);
-
-const generateSubmap = debounce(function () {
     // Create submap from the current map
     // submap limits defined by the current window size (canvas viewport)
 
@@ -85,6 +84,7 @@ const generateSubmap = debounce(function () {
       depressRivers: checked("submapDepressRivers"),
       addLakesInDepressions: checked("submapAddLakeInDepression"),
       promoteTowns: checked("submapPromoteTowns"),
+      rescaleStyles: checked("submapRescaleStyles"),
       smoothHeightMap: scale > 2,
       inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
       projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
@@ -105,9 +105,10 @@ const generateSubmap = debounce(function () {
     populationRateInput.value = populationRateOutput.value = rn((populationRate = populationRateOutput.value / scale), 2);
     customization = 0;
     startResample(options);
-}, 1000);
+  }, 1000);
 
-async function startResample(options) {
+  async function startResample(options) {
+    // Do model changes with Submap.resample then do view changes if needed.
     undraw();
     resetZoom(0);
     let oldstate = {
@@ -128,6 +129,7 @@ async function startResample(options) {
         changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2));
         invokeActiveZooming();
       }
+      if (options.rescaleStyles) changeStyles(oldScale);
     } catch (error) {
       showSubmapErrorHandler(error);
     }
@@ -138,9 +140,34 @@ async function startResample(options) {
     turnButtonOn("toggleMarkers");
     if (ThreeD.options.isOn) ThreeD.redraw();
     if ($("#worldConfigurator").is(":visible")) editWorld();
-}
+  }
 
-function showSubmapErrorHandler(error) {
+  function changeStyles(scale) {
+    // resize burgIcons
+    const burgIcons = [...document.getElementById("burgIcons").querySelectorAll("g")];
+    for (const bi of burgIcons) {
+      const newRadius = rn(minmax(bi.getAttribute('size') * scale, 0.2, 10), 2);
+      changeRadius(newRadius, bi.id);
+      const swAttr = bi.attributes['stroke-width'];
+      swAttr.value = +swAttr.value * scale;
+    }
+
+    // burglabels
+    const burgLabels= [...document.getElementById("burgLabels").querySelectorAll("g")];
+    for (const bl of burgLabels) {
+      const size = +bl.dataset['size'];
+      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();
+  }
+
+  function showSubmapErrorHandler(error) {
     ERROR && console.error(error);
     clearMainTip();
 
@@ -158,4 +185,7 @@ function showSubmapErrorHandler(error) {
       },
       position: {my: "center", at: "center", of: "svg"}
     });
-}
+  }
+
+  return {openSubmapOptions, openRemapOptions}
+})();