refactor: migrate heightmap editor

src/modules/burgs-and-states.js

@@ -3,7 +3,7 @@ import FlatQueue from "flatqueue";
 import Delaunator from "delaunator";
 
 import {TIME} from "config/logging";
-import {layerIsOn} from "layers";
+import {layerIsOn, toggleLayer} from "layers";
 import {Voronoi} from "/src/modules/voronoi";
 import {getColors, getMixedColor, getRandomColor} from "utils/colorUtils";
 import {findCell} from "utils/graphUtils";
@@ -613,7 +613,7 @@ window.BurgsAndStates = (function () {
       const g = labels.select("#states");
       const t = defs.select("#textPaths");
       const displayed = layerIsOn("toggleLabels");
-      if (!displayed) toggleLabels();
+      if (!displayed) toggleLayer("toggleLabels");
 
       if (!list) {
         // remove all labels and textpaths
@@ -697,7 +697,7 @@ window.BurgsAndStates = (function () {
       });
 
       example.remove();
-      if (!displayed) toggleLabels();
+      if (!displayed) toggleLayer("toggleLabels");
     })();
 
     function getLines(mode, name, fullName, pathLength) {

src/modules/dynamic/auto-update.js

@@ -1,10 +1,11 @@
 import * as d3 from "d3";
 
+import {turnLayerButtonOff, turnLayerButtonOn} from "layers";
+import {unfog} from "modules/ui/editors";
 import {findCell} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
-import {rand, P, rw} from "utils/probabilityUtils";
+import {P, rand, rw} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
-import {turnLayerButtonOn, turnLayerButtonOff} from "layers";
 
 // update old .map version to the current one
 export function resolveVersionConflicts(version) {

src/modules/io/load.js

@@ -1,5 +1,6 @@
 import * as d3 from "d3";
 
+import {INFO} from "config/logging";
 import {updatePresetInput} from "layers";
 import {restoreDefaultEvents} from "scripts/events";
 import {ldb} from "scripts/indexedDB";

src/modules/submap.js

@@ -1,9 +1,11 @@
 import * as d3 from "d3";
 
+import {INFO} from "config/logging";
 import {findCell} from "utils/graphUtils";
 import {getMiddlePoint} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {aleaPRNG} from "scripts/aleaPRNG";
+import {renderLayer} from "layers";
 
 window.Submap = (function () {
   const isWater = (pack, id) => pack.cells.h[id] < 20;
@@ -210,7 +212,7 @@ window.Submap = (function () {
 
     stage("Regenerating river network.");
     Rivers.generate();
-    drawRivers();
+    renderLayer("rivers");
     Lakes.defineGroup();
 
     // biome calculation based on (resampled) grid.cells.temp and prec

src/modules/ui/editors.js

@@ -1,12 +1,12 @@
 import * as d3 from "d3";
 
 import {restoreDefaultEvents} from "scripts/events";
-import {findCell} from "utils/graphUtils";
-import {byId} from "utils/shorthands";
 import {tip} from "scripts/tooltips";
-import {rn, minmax, normalize} from "utils/numberUtils";
-import {parseTransform} from "utils/stringUtils";
+import {findCell} from "utils/graphUtils";
+import {minmax, normalize, rn} from "utils/numberUtils";
 import {each} from "utils/probabilityUtils";
+import {byId} from "utils/shorthands";
+import {parseTransform} from "utils/stringUtils";
 
 // clear elSelected variable
 export function unselect() {
@@ -650,7 +650,7 @@ function fog(id, path) {
 }
 
 // remove fogging
-function unfog(id) {
+export function unfog(id) {
   let el = defs.select("#fog #" + id);
   if (!id || !el.size()) el = defs.select("#fog").selectAll("path");
 

src/modules/ui/hotkeys.js

@@ -40,7 +40,7 @@ function handleKeyup(event) {
   else if (ctrl && code === "KeyC") saveToDropbox();
   else if (ctrl && code === "KeyZ" && undo?.offsetParent) undo.click();
   else if (ctrl && code === "KeyY" && redo?.offsetParent) redo.click();
-  else if (shift && code === "KeyH") editHeightmap();
+  else if (shift && code === "KeyH") openDialog("heightmapEditor");
   else if (shift && code === "KeyB") editBiomes();
   else if (shift && code === "KeyS") openDialog("statesEditor");
   else if (shift && code === "KeyP") editProvinces();
@@ -100,7 +100,7 @@ function handleKeyup(event) {
   else if (code === "ArrowUp") zoom.translateBy(svg, 0, 10);
   else if (code === "ArrowDown") zoom.translateBy(svg, 0, -10);
   else if (key === "+" || key === "-") pressNumpadSign(key);
-  else if (key === "0") resetZoom(1000);
+  else if (key === "0") Zoom.reset(1000);
   else if (key === "1") zoom.scaleTo(svg, 1);
   else if (key === "2") zoom.scaleTo(svg, 2);
   else if (key === "3") zoom.scaleTo(svg, 3);

src/modules/ui/options.js

@@ -613,7 +613,7 @@ function randomizeCultureSet() {
 }
 
 function setRendering(value) {
-  fmg.viewbox?.attr("shape-rendering", value);
+  viewbox?.attr("shape-rendering", value);
 }
 
 // generate current year and era name
@@ -901,7 +901,7 @@ function updateTilesOptions() {
 
 // View mode
 viewMode.addEventListener("click", changeViewMode);
-function changeViewMode(event) {
+export function changeViewMode(event) {
   const button = event.target;
   if (button.tagName !== "BUTTON") return;
   const pressed = button.classList.contains("pressed");

src/modules/ui/provinces-editor.js

@@ -1,8 +1,9 @@
 import * as d3 from "d3";
 
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
 import {turnLayerButtonOff} from "layers";
+import {unfog} from "modules/ui/editors";
 import {restoreDefaultEvents} from "scripts/events";
 import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {unique} from "utils/arrayUtils";

src/modules/ui/style.js

@@ -1,5 +1,6 @@
 import * as d3 from "d3";
 
+import {INFO} from "config/logging";
 import {tip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {parseTransform} from "utils/stringUtils";

src/modules/ui/submap.js

@@ -57,7 +57,7 @@ window.UISubmap = (function () {
   });
 
   async function openResampleMenu() {
-    resetZoom(0);
+    Zoom.reset(0);
 
     byId("submapAngleInput").value = 0;
     byId("submapAngleOutput").value = "0";
@@ -283,7 +283,7 @@ window.UISubmap = (function () {
 
   async function startResample(options) {
     // Do model changes with Submap.resample then do view changes if needed
-    resetZoom(0);
+    Zoom.reset(0);
     let oldstate = {
       grid: structuredClone(grid),
       pack: structuredClone(pack),

src/modules/ui/tools.js

@@ -2,7 +2,8 @@ import * as d3 from "d3";
 
 import {openDialog} from "dialogs";
 import {closeDialogs} from "dialogs/utils";
-import {turnLayerButtonOn} from "layers";
+import {renderLayer, toggleLayer, turnLayerButtonOn} from "layers";
+import {unfog} from "modules/ui/editors";
 import {aleaPRNG} from "scripts/aleaPRNG";
 import {restoreDefaultEvents} from "scripts/events";
 import {prompt} from "scripts/prompt";
@@ -20,7 +21,7 @@ toolsContent.addEventListener("click", function (event) {
   const button = event.target.id;
 
   // click on open Editor buttons
-  if (button === "editHeightmapButton") editHeightmap();
+  if (button === "editHeightmapButton") openDialog("heightmapEditor");
   else if (button === "editBiomesButton") editBiomes();
   else if (button === "editStatesButton") openDialog("statesEditor");
   else if (button === "editProvincesButton") editProvinces();
@@ -133,8 +134,8 @@ function regenerateRivers() {
   Rivers.generate();
   Lakes.defineGroup();
   Rivers.specify();
-  if (!layerIsOn("toggleRivers")) toggleRivers();
-  else drawRivers();
+  if (!layerIsOn("toggleRivers")) toggleLayer("toggleRivers");
+  else renderLayer("rivers");
 }
 
 function recalculatePopulation() {

src/modules/ui/world-configurator.js

@@ -3,6 +3,7 @@ import * as d3 from "d3";
 import {tip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {round, parseTransform} from "utils/stringUtils";
+import {renderLayer} from "layers";
 
 let isLoaded = false;
 
@@ -68,11 +69,11 @@ export function editWorld() {
     pack.cells.h = new Float32Array(heights);
     Biomes.define();
 
-    if (layerIsOn("toggleTemp")) drawTemp();
-    if (layerIsOn("togglePrec")) drawPrec();
-    if (layerIsOn("toggleBiomes")) drawBiomes();
+    if (layerIsOn("toggleTemp")) renderLayer("temperature");
+    if (layerIsOn("togglePrec")) renderLayer("precipitation");
+    if (layerIsOn("toggleBiomes")) renderLayer("biomes");
     if (layerIsOn("toggleCoordinates")) drawCoordinates();
-    if (layerIsOn("toggleRivers")) drawRivers();
+    if (layerIsOn("toggleRivers")) renderLayer("rivers");
     if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 500);
   }
 

src/modules/ui/zones-editor.js

@@ -1,6 +1,7 @@
 import * as d3 from "d3";
 
 import {closeDialogs} from "dialogs/utils";
+import {unfog} from "modules/ui/editors";
 import {restoreDefaultEvents} from "scripts/events";
 import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {unique} from "utils/arrayUtils";