refactor: migrate heightmap editor

src/dialogs/dialogs/burg-editor.js

@@ -1,8 +1,9 @@
 import * as d3 from "d3";
 
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
-import {layerIsOn} from "layers";
+import {closeDialogs} from "dialogs/utils";
+import {layerIsOn, toggleLayer} from "layers";
+import {getBurgSeed, getMFCGlink, unselect} from "modules/ui/editors";
 import {prompt} from "scripts/prompt";
 import {clearMainTip, tip} from "scripts/tooltips";
 import {findCell} from "utils/graphUtils";
@@ -10,15 +11,14 @@ import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
 import {convertTemperature, getHeight} from "utils/unitUtils";
-import {getMFCGlink, getBurgSeed, unselect} from "modules/ui/editors";
 
 let isLoaded = false;
 
 export function open({id} = {}) {
   if (customization) return;
   closeDialogs(".stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  if (!layerIsOn("toggleIcons")) toggleLayer("toggleIcons");
+  if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
 
   const burg = id || d3.event.target.dataset.id;
   elSelected = burgLabels.select("[data-id='" + burg + "']");

src/dialogs/dialogs/burgs-overview.js

@@ -9,7 +9,7 @@ import {si, siToInteger} from "utils/unitUtils";
 import {getHeight} from "utils/unitUtils";
 import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
-import {layerIsOn} from "layers";
+import {layerIsOn, toggleLayer} from "layers";
 import {applySorting} from "modules/ui/editors";
 
 let isLoaded = false;
@@ -17,8 +17,8 @@ let isLoaded = false;
 export function open() {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleIcons")) toggleIcons();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  if (!layerIsOn("toggleIcons")) toggleLayer("toggleIcons");
+  if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
 
   const body = document.getElementById("burgsBody");
   updateFilter();

src/dialogs/dialogs/cultures-editor.js

@@ -11,6 +11,7 @@ import {rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
 import {capitalize} from "utils/stringUtils";
 import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {applySortingByHeader} from "modules/ui/editors";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/dialogs/heightmap-editor.js

@@ -2,6 +2,23 @@ import * as d3 from "d3";
 import RgbQuant from "rgbquant";
 
 import {heightmapTemplates} from "config/heightmap-templates";
+import {ERROR, INFO, TIME} from "config/logging";
+import {closeDialogs} from "dialogs/utils";
+import {layerIsOn, turnLayerButtonOff, turnLayerButtonOn, updatePresetInput, renderLayer} from "layers";
+import {drawCoastline} from "modules/coastline";
+import {markFeatures, markupGridOcean} from "modules/markup";
+import {generatePrecipitation} from "modules/precipitation";
+import {calculateTemperatures} from "modules/temperature";
+import {moveCircle, removeCircle} from "modules/ui/editors";
+import {changeViewMode} from "modules/ui/options";
+import {addZones} from "modules/zones";
+import {aleaPRNG} from "scripts/aleaPRNG";
+import {restoreDefaultEvents} from "scripts/events";
+import {undraw} from "scripts/generation";
+import {prompt} from "scripts/prompt";
+import {rankCells} from "scripts/rankCells";
+import {reGraph} from "scripts/reGraph";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {createTypedArray, last} from "utils/arrayUtils";
 import {getColorScheme, getHeightColor} from "utils/colorUtils";
 import {throttle} from "utils/functionUtils";
@@ -10,17 +27,11 @@ import {link} from "utils/linkUtils";
 import {lim, minmax, rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
 import {getHeight} from "utils/unitUtils";
-import {turnLayerButtonOff, turnLayerButtonOn, updatePresetInput} from "layers";
-import {restoreDefaultEvents} from "scripts/events";
-import {prompt} from "scripts/prompt";
-import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
-import {aleaPRNG} from "scripts/aleaPRNG";
-import {undraw} from "scripts/generation";
-import {closeDialogs} from "dialogs/utils";
 
 let isLoaded = false;
+let layers;
 
-export function editHeightmap(options) {
+export function open(options) {
   const {mode, tool} = options || {};
   restartHistory();
   viewbox.insert("g", "#terrs").attr("id", "heights");
@@ -70,8 +81,8 @@ export function editHeightmap(options) {
   }
 
   function enterHeightmapEditMode(mode) {
-    editHeightmap.layers = Array.from(mapLayers.querySelectorAll("li:not(.buttonoff)")).map(node => node.id); // store layers preset
-    editHeightmap.layers.forEach(l => byId(l).click()); // turn off all layers
+    layers = Array.from(mapLayers.querySelectorAll("li:not(.buttonoff)")).map(node => node.id); // store layers preset
+    layers.forEach(l => byId(l).click()); // turn off all layers
 
     customization = 1;
     closeDialogs();
@@ -155,12 +166,11 @@ export function editHeightmap(options) {
 
   // Exit customization mode
   function finalizeHeightmap() {
-    if (viewbox.select("#heights").selectAll("*").size() < 200)
-      return tip(
-        "Insufficient land area! There should be at least 200 land cells to finalize the heightmap",
-        null,
-        "error"
-      );
+    if (viewbox.select("#heights").selectAll("*").size() < 200) {
+      const error = "Insufficient land area! There should be at least 200 land cells to finalize the heightmap";
+      return tip(error, null, "error");
+    }
+
     if (byId("imageConverter").offsetParent) return tip("Please exit the Image Conversion mode first", null, "error");
 
     delete window.edits; // remove global variable
@@ -175,7 +185,7 @@ export function editHeightmap(options) {
     restoreDefaultEvents();
     clearMainTip();
     closeDialogs();
-    resetZoom();
+    Zoom.reset();
 
     if (byId("preview")) byId("preview").remove();
     if (byId("canvas3d")) enterStandardView();
@@ -186,16 +196,15 @@ export function editHeightmap(options) {
     else if (mode === "risk") restoreRiskedData();
 
     // restore initial layers
-    //viewbox.select("#heights").remove();
+    // viewbox.select("#heights").remove();
     byId("heights").remove();
     turnLayerButtonOff("toggleHeight");
     document
       .getElementById("mapLayers")
       .querySelectorAll("li")
       .forEach(function (e) {
-        if (editHeightmap.layers.includes(e.id) && !layerIsOn(e.id)) e.click();
-        // turn on
-        else if (!editHeightmap.layers.includes(e.id) && layerIsOn(e.id)) e.click(); // turn off
+        if (layers.includes(e.id) && !layerIsOn(e.id)) e.click(); // turn on
+        else if (!layers.includes(e.id) && layerIsOn(e.id)) e.click(); // turn off
       });
     updatePresetInput();
   }
@@ -227,7 +236,7 @@ export function editHeightmap(options) {
       }
     }
 
-    drawRivers();
+    renderLayer("rivers");
     Lakes.defineGroup();
     Biomes.define();
     rankCells();
@@ -239,8 +248,8 @@ export function editHeightmap(options) {
     BurgsAndStates.generateProvinces();
     BurgsAndStates.defineBurgFeatures();
 
-    drawStates();
-    drawBorders();
+    renderLayer("states");
+    renderLayer("borders");
     BurgsAndStates.drawStateLabels();
 
     Rivers.specify();
@@ -429,8 +438,8 @@ export function editHeightmap(options) {
     }
 
     BurgsAndStates.drawStateLabels();
-    drawStates();
-    drawBorders();
+    renderLayer("states");
+    renderLayer("borders");
 
     if (erosionAllowed) {
       Rivers.specify();
@@ -1148,7 +1157,7 @@ export function editHeightmap(options) {
         const ctx = byId("canvas").getContext("2d");
         ctx.drawImage(img, 0, 0, graphWidth, graphHeight);
         heightsFromImage(+convertColors.value);
-        resetZoom();
+        Zoom.reset();
       };
 
       reader.onloadend = () => (img.src = reader.result);

src/dialogs/dialogs/heightmap-selection.js

@@ -347,6 +347,6 @@ function confirmHeightmapEdit() {
     title: this.dataset.tip,
     message: "Opening the tool will erase the current map. Are you sure you want to proceed?",
     confirm: "Continue",
-    onConfirm: () => editHeightmap({mode: "erase", tool})
+    onConfirm: () => openDialog("heightmapEditor", null, {mode: "erase", tool})
   });
 }

src/dialogs/dialogs/religions-editor.js

@@ -10,6 +10,7 @@ import {abbreviate} from "utils/languageUtils";
 import {rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
 import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {applySortingByHeader} from "modules/ui/editors";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/dialogs/states-editor.js

@@ -1,7 +1,8 @@
 import * as d3 from "d3";
 
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
+import {applySortingByHeader, unfog} from "modules/ui/editors";
 import {restoreDefaultEvents} from "scripts/events";
 import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {getMixedColor, getRandomColor} from "utils/colorUtils";