Dev submaps (#770)

* bioms shouldn't be masked or the style selection box is useless

* fix: misleading comment

* experimental submapping feature

* burg remapping

* Submap with options

* Fix: calculating absolute flux from precipitation normal-value.

* effective distanceScale

* updated resampler

* fix: missing cell

* Fix: River automatic rerender on regeneration.

* FIX: wrong culture migration

* fixed 0 index burg bug, more accurate coast detection for burgs

* FIX: wrong burg cell id

* fix invalid feature number at burg.ports, option to disable regenerations

* Relocate submap

* update height model and scale parameters

* new menu

* Dropbox OAuth implementation and Cloud framework

* add some space

* removing uneccesary logs, defer script load

* map position on planet, fix wrong riverbed generation

* fix:riverbed generation

* better cell sampler

* Auto-Smoothing,dist fix

* FIX: incorrect province copy and minor fix of rebels

* Cleanup

* FIX: water detection bug

* Recompute centers (states, cultures, provinces)

* activating forwardmap

* FIX: port burg relocation algo

* FIX: coast detection (for burgs)

* Fix: invalid html id

* add dot

* update for FMG 1.73

* Update submap gui

* refactored submap ui options

* Copy all visible military units from the old map.

* add info text

* Add Markers.deleteMarker API.

* Lock markers and lock burgs options

* better comment

* submapper gui updates, remove feature mapping on/off

* Fix typo (thx evolvedexperiment)

* fix ugly GUI (2 digit roundoff)

* resample dialog

* Town Promotion to largetown

* don't promote to capitals.

* Fix typo

* round style settings

* do not draw removed burgs

* Fix port cell search algo

* Fix: robust error handling, no error for 0.

* submap: projection moved to options, fix double burg error

* complete rewrite of burg relocation

* findcell by coordinates

* prepare to merge, add comments, remove fluff

* replacing lodash with deepCopy implementation

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

modules/ui/burg-editor.js

@@ -266,14 +266,7 @@ function editBurg(id) {
     toggleNewGroupInput();
     document.getElementById("burgInputGroup").value = "";
 
-    const newLabelG = document.querySelector("#burgLabels").appendChild(labelG.cloneNode(false));
-    newLabelG.id = group;
-    const newIconG = document.querySelector("#burgIcons").appendChild(iconG.cloneNode(false));
-    newIconG.id = group;
-    if (anchor) {
-      const newAnchorG = document.querySelector("#anchors").appendChild(anchorG.cloneNode(false));
-      newAnchorG.id = group;
-    }
+    addBurgsGroup(group);
     moveBurgToGroup(id, group);
   }
 

modules/ui/editors.js

@@ -169,7 +169,7 @@ function moveBurgToGroup(id, g) {
   const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
   const anchor = document.querySelector("#anchors [data-id='" + id + "']");
   if (!label || !icon) {
-    ERROR && console.error("Cannot find label or icon elements");
+    ERROR && console.error(`Cannot find label or icon elements for id ${id}`);
     return;
   }
 
@@ -190,6 +190,25 @@ function moveBurgToGroup(id, g) {
   }
 }
 
+function moveAllBurgsToGroup(fromGroup, toGroup) {
+  const groupToMove = document.querySelector(`#burgIcons #${fromGroup}`);
+  const burgsToMove = Array.from(groupToMove.children).map(x=>x.dataset.id);
+  addBurgsGroup(toGroup)
+  burgsToMove.forEach(x=>moveBurgToGroup(x, toGroup));
+}
+
+function addBurgsGroup(group) {
+  if (document.querySelector(`#burgLabels > #${group}`)) return;
+  const labelCopy = document.querySelector("#burgLabels > #towns").cloneNode(false);
+  const iconCopy = document.querySelector("#burgIcons > #towns").cloneNode(false);
+  const anchorCopy = document.querySelector("#anchors > #towns").cloneNode(false);
+
+  // FIXME: using the same id is against the spec!
+  document.querySelector("#burgLabels").appendChild(labelCopy).id = group;
+  document.querySelector("#burgIcons").appendChild(iconCopy).id = group;
+  document.querySelector("#anchors").appendChild(anchorCopy).id = group;
+}
+
 function removeBurg(id) {
   const label = document.querySelector("#burgLabels [data-id='" + id + "']");
   const icon = document.querySelector("#burgIcons [data-id='" + id + "']");

modules/ui/markers-editor.js

@@ -241,8 +241,7 @@ function editMarker(markerI) {
   }
 
   function deleteMarker() {
-    notes = notes.filter(note => note.id !== element.id);
-    pack.markers = pack.markers.filter(m => m.i !== marker.i);
+    Markers.deleteMarker(marker.i)
     element.remove();
     $("#markerEditor").dialog("close");
     if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();

modules/ui/options.js

@@ -335,25 +335,25 @@ function copyMapURL() {
     .catch(err => tip("Could not copy URL: " + err, false, "error", 5000));
 }
 
-function changeCellsDensity(value) {
-  const convert = v => {
-    if (v == 1) return 1000;
-    if (v == 2) return 2000;
-    if (v == 3) return 5000;
-    if (v == 4) return 10000;
-    if (v == 5) return 20000;
-    if (v == 6) return 30000;
-    if (v == 7) return 40000;
-    if (v == 8) return 50000;
-    if (v == 9) return 60000;
-    if (v == 10) return 70000;
-    if (v == 11) return 80000;
-    if (v == 12) return 90000;
-    if (v == 13) return 100000;
-  };
-  const cells = convert(value);
+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,
+};
 
-  pointsInput.setAttribute("data-cells", cells);
+function changeCellsDensity(value) {
+  const cells = value in cellsDensityConstants? cellsDensityConstants[value]: 1000;
+  pointsInput.dataset.cells = cells;
   pointsOutput_formatted.value = cells / 1000 + "K";
   pointsOutput_formatted.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }

modules/ui/style.js

@@ -574,20 +574,20 @@ addFontMethod.addEventListener("change", function () {
 });
 
 styleFontSize.addEventListener("change", function () {
-  changeFontSize(+this.value);
+  changeFontSize(getEl(), +this.value);
 });
 
 styleFontPlus.addEventListener("click", function () {
   const size = +getEl().attr("data-size") + 1;
-  changeFontSize(Math.min(size, 999));
+  changeFontSize(getEl(), Math.min(size, 999));
 });
 
 styleFontMinus.addEventListener("click", function () {
   const size = +getEl().attr("data-size") - 1;
-  changeFontSize(Math.max(size, 1));
+  changeFontSize(getEl(), Math.max(size, 1));
 });
 
-function changeFontSize(size) {
+function changeFontSize(el, size) {
   styleFontSize.value = size;
 
   const getSizeOnScale = element => {
@@ -600,7 +600,7 @@ function changeFontSize(size) {
   };
 
   const scaleSize = getSizeOnScale(styleElementSelect.value);
-  getEl().attr("data-size", size).attr("font-size", scaleSize);
+  el.attr("data-size", size).attr("font-size", scaleSize);
 
   if (styleElementSelect.value === "legend") redrawLegend();
 }

modules/ui/submap.js

@@ -0,0 +1,156 @@
+"use strict";
+
+/*
+UI elements for submap generation
+*/
+
+function openSubmapOptions() {
+  $("#submapOptionsDialog").dialog({
+    title: "Submap options",
+    resizable: false,
+    width: fitContent(),
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+    buttons: {
+      Submap: function () {
+        $(this).dialog("close");
+        generateSubmap();
+      },
+      Cancel: function () { $(this).dialog("close"); },
+    }
+  });
+}
+
+function openRemapOptions() {
+  resetZoom(0);
+  $("#remapOptionsDialog").dialog({
+    title: "Resampler options",
+    resizable: false,
+    width: fitContent(),
+    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 () { $(this).dialog("close"); },
+    },
+  });
+}
+
+/* callbacks */
+
+const resampleCurrentMap = debounce(function () {
+  // Resample the whole map to different cell resolution or shape
+  WARN && console.warn("Resampling current map");
+  const options = {
+    lockMarkers: false,
+    lockBurgs: false,
+    depressRivers: false,
+    addLakesInDepressions: false,
+    promoteTowns: false,
+    smoothHeightMap: false,
+    projection: (x,y) => [x, y],
+    inverse: (x,y) => [x, y],
+  }
+
+  startResample(options);
+}, 1000);
+
+
+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 options = {
+    lockMarkers: checked("submapLockMarkers"),
+    lockBurgs: checked("submapLockBurgs"),
+
+    depressRivers: checked("submapDepressRivers"),
+    addLakesInDepressions: checked("submapAddLakeInDepression"),
+    promoteTowns: checked("submapPromoteTowns"),
+    smoothHeightMap: scale > 2,
+    inverse: (x,y) => [x * (x1-x0) / graphWidth + x0, y * (y1-y0) / graphHeight + y0],
+    projection: (x, y) => [(x-x0) * graphWidth / (x1-x0),  (y-y0) * graphHeight / (y1-y0)],
+  }
+
+  // converting map position on the planet
+  const mapSizeOutput = document.getElementById("mapSizeOutput");
+  const latitudeOutput = document.getElementById("latitudeOutput");
+  const latN = 90 - (180 - mapSizeInput.value / 100 * 180) * latitudeOutput.value / 100;
+  const newLatN = latN - y0 / graphHeight * mapSizeOutput.value * 180 / 100;
+  mapSizeOutput.value /= scale;
+  latitudeOutput.value =  (90 - newLatN) / (180 - mapSizeOutput.value / 100 * 180) * 100;
+  document.getElementById("mapSizeInput").value = mapSizeOutput.value;
+  document.getElementById("latitudeInput").value = latitudeOutput.value;
+
+  // fix scale
+  distanceScaleInput.value = distanceScaleOutput.value = rn(distanceScale = distanceScaleOutput.value / scale, 2);
+  populationRateInput.value = populationRateOutput.value = rn(populationRate = populationRateOutput.value / scale, 2);
+  customization = 0;
+  startResample(options);
+}, 1000);
+
+
+async function startResample(options) {
+  undraw();
+  resetZoom(0);
+  let oldstate = {
+    grid: deepCopy(grid),
+    pack: deepCopy(pack),
+    seed,
+    graphWidth,
+    graphHeight,
+  };
+
+  try {
+    const oldScale = scale;
+    await Submap.resample(oldstate, options);
+    if (options.promoteTowns) {
+      const groupName = 'largetowns';
+      moveAllBurgsToGroup('towns', groupName);
+      changeRadius(rn(oldScale * 0.8,2), groupName);
+      changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale*2, 2));
+      invokeActiveZooming();
+    }
+  } catch (error) {
+    showSubmapErrorHandler(error);
+  }
+
+  oldstate = null; // destroy old state to free memory
+
+  restoreLayers();
+  turnButtonOn('toggleMarkers');
+  if (ThreeD.options.isOn) ThreeD.redraw();
+  if ($("#worldConfigurator").is(":visible")) editWorld();
+}
+
+function showSubmapErrorHandler(error) {
+  ERROR && console.error(error);
+  clearMainTip();
+
+  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",
+    width: "32em",
+    buttons: {
+      Ok: function () { $(this).dialog("close"); }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+}

modules/ui/units-editor.js

@@ -103,6 +103,7 @@ function editUnits() {
 
   function restoreDefaultUnits() {
     // distanceScale
+    distanceScale = 3;
     document.getElementById("distanceScaleOutput").value = 3;
     document.getElementById("distanceScaleInput").value = 3;
     unlock("distanceScale");