From e6dfab48c2e479bf9db75a52e75a5e42a6e667f2 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 26 Apr 2022 22:48:17 +0300
Subject: [PATCH] V1.8 (#784)

* pump version to 1.8

* resampleDialog UI update

* don't draw markers if not required

* submapOptionsDialog style changes
---
 index.css             |   1 +
 index.html            | 140 ++++++++++++++++++------------------------
 main.js               |   6 +-
 modules/submap.js     |   2 +-
 modules/ui/options.js |  42 ++++++++-----
 modules/ui/submap.js  |  94 ++++++++++++++--------------
 modules/ui/tools.js   |   3 +
 7 files changed, 140 insertions(+), 148 deletions(-)

diff --git a/index.css b/index.css
index c8d5efb02..d129d5a5b 100644
--- a/index.css
+++ b/index.css
@@ -2271,6 +2271,7 @@ svg.button {
   user-select: none;
 }
 
+
 .dontAsk {
   display: inline-block;
   margin: 0.9em 0 0 0.6em;
diff --git a/index.html b/index.html
index ab9a073a5..4071ba58d 100644
--- a/index.html
+++ b/index.html
@@ -274,7 +274,7 @@
     <div id="loading">
       <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
       <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
-      <div id="version"><t data-t="version">v. </t>1.73</div>
+      <div id="version"><t data-t="version">v. </t>1.8</div>
       <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
     </div>
 
@@ -1247,7 +1247,7 @@
                 <input id="pointsInput" type="range" min="1" max="13" value="4" data-cells="10000" />
               </td>
               <td>
-                <output id="pointsOutput_formatted" style="color: #053305">10K</output>
+                <output id="pointsOutputFormatted" style="color: #053305">10K</output>
               </td>
             </tr>
 
@@ -1727,9 +1727,9 @@
           </div>
 
           <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="UISubmap.openSubmapOptions()">Submap</button>
-            <button data-tip="Click to resample (transform) your map to different cellcount" onclick="UISubmap.openRemapOptions()">Resample</button>
+          <div>
+            <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
+            <button id="openResampleMenu" data-tip="Click to transform the map">Resample</button>
           </div>
         </div>
 
@@ -4444,99 +4444,79 @@
         <div id="tileStatus" style="background-color: #33333310; font-style: italic"></div>
       </div>
 
-      <div id="remapOptionsDialog" style="display: none; max-width: 300px" class="dialog">
-        <p style="font-style: italic; color: red; font-weight: bold">Warning! This operation is destructive and irreversible. Don't forget to save your map!</p>
-        <table>
-          <tr>
-            <td>Points number</td>
-            <td>
-              <input
-                id="submapPointsInput"
-                autocomplete="off"
-                type="range"
-                min="1"
-                max="13"
-                value="4"
-                data-cells="10000"
-                oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()"
-              />
-            </td>
-            <td>
-              <output id="submapPointsOutput" style="color: #053305">10K</output>
-            </td>
-          </tr>
-          <tr>
-            <td>Shift</td>
-            <td colspan="2">
-              X: <input id="submapShiftX" autocomplete="off" min="0" size="4" value="0"/>
-              Y: <input id="submapShiftY" autocomplete="off" min="0" size="4" value="0"/>
-            </td>
-          </tr>
-          <tr>
-            <td>Rotate <i class="icon-cw"></i></td>
-            <td>
-              <input
-                id="submapRotationAngle"
-                autocomplete="off"
-                type="range"
-                min="0"
-                max="359"
-                value="0"
-                oninput="document.getElementById('submapRotationAngleOutput').value=+this.value + '°'"
-              />
-            </td>
-            <td>
-              <output id="submapRotationAngleOutput" style="color: #053305">0°</output>
-            </td>
-          </tr>
-          <tr>
-            <td>Mirror</td>
-            <td colspan="2">
-              <input type="checkbox" class="checkbox" id="submapMirrorH" />
-              <label for="submapMirrorH" class="checkbox-label" >Horizontally</label>
-              &nbsp;
-              <input type="checkbox" class="checkbox" id="submapMirrorV" />
-              <label for="submapMirrorV" class="checkbox-label">Vertically</label>
-            </td>
-          </tr>
-        </table>
+      <div id="resampleDialog" style="display: none" class="dialog">
+        <p style="font-weight: bold">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
+          as a .map file first!
+        </p>
+        <div style="display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: repeat(4, 1fr); align-items: center; padding-left: 0.5em">
+          <div>Points number</div>
+          <div>
+            <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
+            <output id="submapPointsOutputFormatted" style="color: #053305">10K</output>
+          </div>
+
+          <div>Shift</div>
+          <div>
+            <label>X: <input id="submapShiftX" type="number" min="0" size="4" value="0" /></label>
+            <label>Y: <input id="submapShiftY" type="number" min="0" size="4" value="0" /></label>
+          </div>
+
+          <div>Rotate</div>
+          <div>
+            <input id="submapAngleInput" type="range" min="0" max="359" value="0" />
+            <output id="submapAngleOutput">0</output>°
+          </div>
+
+          <div>Mirror</div>
+          <div>
+            <input type="checkbox" class="checkbox" id="submapMirrorH" />
+            <label for="submapMirrorH" class="checkbox-label">horizontally</label>
+            &nbsp;
+            <input type="checkbox" class="checkbox" id="submapMirrorV" />
+            <label for="submapMirrorV" class="checkbox-label">vertically</label>
+          </div>
+        </div>
       </div>
-      <div id="submapOptionsDialog" style="display: none; max-width: 300px" class="dialog">
-        <p style="font-style: italic; color: red; font-weight: bold">
-          Warning! This operation is destructive and irreversible. Don't forget to save your original map!
+
+      <div id="submapOptionsDialog" style="display: none" class="dialog">
+        <p style="font-weight: bold">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
+          as a .map file first!
         </p>
-        <p><em>Settings to be changed:</em> Population rate, map pixel size.</p>
-        <p><em>Data to be copied:</em> Heightmap, Biome, Religion, Population, Precipitation, Cultures, States, Provinces, Regiments (military), Markers.</p>
-        <p><em>Data to be destroyed (regenerated):</em> Zones, Roads, Rivers (mostly regenerate at the same place).</p>
-        <p>Remapping Burgs (cities) may be imprecise, you will need to fix missing or wrongly mapped burgs manually.</p>
-        <p>Lock remapped items for:</p>
-        <div data-tip="Lock all markers copied from the original map.">
+
+        <p>Settings to be changed: population rate, map pixel size</p>
+        <p>Data to be copied: heightmap, biomes, religions, population, precipitation, cultures, states, provinces, military regiments</p>
+        <p>Data to be regenerated: zones, roads, rivers</p>
+        <p>Burgs may be remapped incorrectly, manual change is required</p>
+
+        <p>Keep data for:</p>
+        <div data-tip="Lock all markers copied from the original map">
           <input id="submapLockMarkers" class="checkbox" type="checkbox" checked />
           <label for="submapLockMarkers" class="checkbox-label">Markers</label>
         </div>
-        <div data-tip="Lock all burgs copied from the original map.">
+        <div data-tip="Lock all burgs copied from the original map">
           <input id="submapLockBurgs" class="checkbox" type="checkbox" checked />
-          <label for="submapLockBurgs" class="checkbox-label">Burgs (cities)</label>
+          <label for="submapLockBurgs" class="checkbox-label">Burgs</label>
         </div>
 
-        <p>Extra / experimental features:</p>
-        <div data-tip="Rivers on the parent map errode land (helps to get similar river network.)">
+        <p>Experimental features:</p>
+        <div data-tip="Rivers on the parent map will errode land (helps to get similar river network)">
           <input id="submapDepressRivers" class="checkbox" type="checkbox" />
-          <label for="submapDepressRivers" class="checkbox-label">Errode riverbeds.</label>
+          <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 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>
         </div>
-        <div data-tip="Add lakes in depressions. (Can be very slow on big landmasses!)">
+        <div data-tip="Add lakes in depressions (can be very slow on big landmasses)">
           <input id="submapAddLakeInDepression" class="checkbox" type="checkbox" />
           <label for="submapAddLakeInDepression" class="checkbox-label">Add lakes in depressions (slow)</label>
         </div>
-        <hr />
       </div>
 
       <div id="alert" style="display: none" class="dialog">
diff --git a/main.js b/main.js
index 93b14fea0..cdb329af4 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
 "use strict";
-const version = "1.732"; // generator version
+const version = "1.8"; // generator version
 document.title += " v" + version;
 
 // switches to disable/enable logging features
@@ -458,6 +458,8 @@ function showWelcomeMessage() {
   alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <strong>${version}</strong>.
     This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
     <ul><strong>Latest changes:</strong>
+      <li>Submap tool by Goteguru</li>
+      <li>Resample tool by Goteguru</li>
       <li>Pre-defined heightmaps</li>
       <li>Advanced notes editor</li>
       <li>Zones editor: filter by type</li>
@@ -465,8 +467,6 @@ function showWelcomeMessage() {
       <li>New style presets: Cyberpunk and Atlas</li>
       <li>Burg temperature graph</li>
       <li>4 new textures</li>
-      <li>Province capture logic rework</li>
-      <li>Button to release all provinces</li>
     </ul>
 
     <p>Join our ${discord} and ${reddit} to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
diff --git a/modules/submap.js b/modules/submap.js
index 6c1611fe2..6ec6d2e9c 100644
--- a/modules/submap.js
+++ b/modules/submap.js
@@ -308,7 +308,7 @@ window.Submap = (function () {
         if (options.lockMarkers) m.lock = true;
       }
     }
-    drawMarkers();
+    if (layerIsOn("toggleMarkers")) drawMarkers();
 
     stage("Redraw emblems.");
     drawEmblems();
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 89642f5d9..fde657c18 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -335,27 +335,35 @@ function copyMapURL() {
     .catch(err => tip("Could not copy URL: " + err, false, "error", 5000));
 }
 
-const cellsDensityConstants =  {
-    1: 1000,
-    2: 2000,
-    3: 5000,
-    4: 10000,
-    5: 20000,
-    6: 30000,
-    7: 40000,
-    8: 50000,
-    9: 60000,
-    10: 70000,
-    11: 80000,
-    12: 90000,
-    13: 100000,
+const cellsDensityMap = {
+  1: 1000,
+  2: 2000,
+  3: 5000,
+  4: 10000,
+  5: 20000,
+  6: 30000,
+  7: 40000,
+  8: 50000,
+  9: 60000,
+  10: 70000,
+  11: 80000,
+  12: 90000,
+  13: 100000
 };
 
 function changeCellsDensity(value) {
-  const cells = value in cellsDensityConstants? cellsDensityConstants[value]: 1000;
+  const cells = cellsDensityMap[value] || 1000;
   pointsInput.dataset.cells = cells;
-  pointsOutput_formatted.value = cells / 1000 + "K";
-  pointsOutput_formatted.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
+  pointsOutputFormatted.value = getCellsDensityValue(cells);
+  pointsOutputFormatted.style.color = getCellsDensityColor(cells);
+}
+
+function getCellsDensityValue(cells) {
+  return cells / 1000 + "K";
+}
+
+function getCellsDensityColor(cells) {
+  return cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }
 
 function changeCultureSet() {
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index e08665ef8..a2fae5f73 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -1,16 +1,21 @@
 "use strict";
-
-/*
-UI elements for submap generation
-*/
+// UI elements for submap generation
 
 window.UISubmap = (function () {
-  function openSubmapOptions() {
+  document.getElementById("submapPointsInput").addEventListener("input", function () {
+    const output = document.getElementById("submapPointsOutputFormatted");
+    const cells = cellsDensityMap[+this.value] || 1000;
+    this.dataset.cells = cells;
+    output.value = getCellsDensityValue(cells);
+    output.style.color = getCellsDensityColor(cells);
+  });
+
+  function openSubmapMenu() {
     $("#submapOptionsDialog").dialog({
-      title: "Submap options",
+      title: "Create a submap",
+      width: "30em",
       resizable: false,
-      width: fitContent(),
-      position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+      position: {my: "center", at: "center", of: "svg"},
       buttons: {
         Submap: function () {
           $(this).dialog("close");
@@ -23,19 +28,21 @@ window.UISubmap = (function () {
     });
   }
 
-  function openRemapOptions() {
+  function openResampleMenu() {
     resetZoom(0);
-    document.getElementById("submapRotationAngle").value = 0;
-    document.getElementById("submapRotationAngleOutput").value = "0°";
+
+    document.getElementById("submapAngleInput").value = 0;
+    document.getElementById("submapAngleOutput").value = "0°";
     document.getElementById("submapShiftX").value = 0;
     document.getElementById("submapShiftY").value = 0;
     document.getElementById("submapMirrorH").checked = false;
     document.getElementById("submapMirrorV").checked = false;
-    $("#remapOptionsDialog").dialog({
-      title: "Resampler options",
+
+    $("#resampleDialog").dialog({
+      title: "Resample map",
+      width: "30em",
       resizable: false,
-      width: fitContent(),
-      position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+      position: {my: "center", at: "center", of: "svg"},
       buttons: {
         Resample: function () {
           $(this).dialog("close");
@@ -48,32 +55,28 @@ window.UISubmap = (function () {
     });
   }
 
-  /* callbacks */
-
+  // Resample the whole map to different cell resolution or shape
   const resampleCurrentMap = debounce(function () {
-    // Resample the whole map to different cell resolution or shape
-    const cellNumId = Number(document.getElementById("submapPointsInput").value);
-    const angle = Number(document.getElementById("submapRotationAngle").value) / 180 * Math.PI;
-    const shiftX = Number(document.getElementById("submapShiftX").value);
-    const shiftY = Number(document.getElementById("submapShiftY").value);
+    WARN && console.warn("Resampling current map");
+    const cellNumId = +document.getElementById("submapPointsInput").value;
+    if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
+
+    const angle = (+document.getElementById("submapAngleInput").value / 180) * Math.PI;
+    const shiftX = +document.getElementById("submapShiftX").value;
+    const shiftY = +document.getElementById("submapShiftY").value;
     const mirrorH = document.getElementById("submapMirrorH").checked;
     const mirrorV = document.getElementById("submapMirrorV").checked;
-    if (!cellsDensityConstants[cellNumId]) {
-      console.error("Unknown cell number!");
-      return;
-    }
 
     const [cx, cy] = [graphWidth / 2, graphHeight / 2];
-    const rot = alfa  => (x, y) => [
-      (x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx,
-      (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy
-    ];
+    const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
     const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
     const flipH = (x, y) => [-x + 2 * cx, y];
     const flipV = (x, y) => [x, -y + 2 * cy];
     const app = (f, g) => (x, y) => f(...g(x, y));
     const id = (x, y) => [x, y];
-    let projection = id, inverse = id;
+
+    let projection = id;
+    let inverse = id;
 
     if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
     if (shiftX || shiftY) {
@@ -84,7 +87,6 @@ window.UISubmap = (function () {
     if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
 
     changeCellsDensity(cellNumId);
-    WARN && console.warn("Resampling current map");
     startResample({
       lockMarkers: false,
       lockBurgs: false,
@@ -94,17 +96,16 @@ window.UISubmap = (function () {
       smoothHeightMap: false,
       rescaleStyles: false,
       projection,
-      inverse,
+      inverse
     });
   }, 1000);
 
+  // Create submap from the current map. Submap limits defined by the current window size (canvas viewport)
   const generateSubmap = debounce(function () {
-    // Create submap from the current map
-    // submap limits defined by the current window size (canvas viewport)
-
     WARN && console.warn("Resampling current map");
     closeDialogs("#worldConfigurator, #options3d");
     const checked = id => Boolean(document.getElementById(id).checked);
+
     // Create projection func from current zoom extents
     const [[x0, y0], [x1, y1]] = getViewBoxExtent();
     const origScale = scale;
@@ -119,7 +120,7 @@ window.UISubmap = (function () {
       rescaleStyles: checked("submapRescaleStyles"),
       smoothHeightMap: scale > 2,
       inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
-      projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
+      projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale]
     };
 
     // converting map position on the planet
@@ -140,7 +141,7 @@ window.UISubmap = (function () {
   }, 1000);
 
   async function startResample(options) {
-    // Do model changes with Submap.resample then do view changes if needed.
+    // Do model changes with Submap.resample then do view changes if needed
     resetZoom(0);
     let oldstate = {
       grid: deepCopy(grid),
@@ -169,7 +170,6 @@ window.UISubmap = (function () {
     oldstate = null; // destroy old state to free memory
 
     restoreLayers();
-    turnButtonOn("toggleMarkers");
     if (ThreeD.options.isOn) ThreeD.redraw();
     if ($("#worldConfigurator").is(":visible")) editWorld();
   }
@@ -178,17 +178,17 @@ window.UISubmap = (function () {
     // 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);
+      const newRadius = rn(minmax(bi.getAttribute("size") * scale, 0.2, 10), 2);
       changeRadius(newRadius, bi.id);
-      const swAttr = bi.attributes['stroke-width'];
+      const swAttr = bi.attributes["stroke-width"];
       swAttr.value = +swAttr.value * scale;
     }
 
     // burglabels
-    const burgLabels= [...document.getElementById("burgLabels").querySelectorAll("g")];
+    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;
+      const size = +bl.dataset["size"];
+      bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
     }
 
     // emblems
@@ -203,12 +203,12 @@ window.UISubmap = (function () {
     ERROR && console.error(error);
     clearMainTip();
 
-    alertMessage.innerHTML = `Map resampling failed :_(.
+    alertMessage.innerHTML = `Map resampling failed:
       <br>You may retry after clearing stored data or contact us at discord.
       <p id="errorBox">${parseError(error)}</p>`;
     $("#alert").dialog({
       resizable: false,
-      title: "Generation error",
+      title: "Resampling error",
       width: "32em",
       buttons: {
         Ok: function () {
@@ -219,5 +219,5 @@ window.UISubmap = (function () {
     });
   }
 
-  return {openSubmapOptions, openRemapOptions}
+  return {openSubmapMenu, openResampleMenu};
 })();
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index aec92311a..ea297ddd7 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -72,6 +72,9 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "addRiver") toggleAddRiver();
   else if (button === "addRoute") toggleAddRoute();
   else if (button === "addMarker") toggleAddMarker();
+  // click to create a new map buttons
+  else if (button === "openSubmapMenu") UISubmap.openSubmapMenu();
+  else if (button === "openResampleMenu") UISubmap.openResampleMenu();
 });
 
 function processFeatureRegeneration(event, button) {