refactor: dynamically load modules

src/dialogs/dialogs/biomes-editor.js

@@ -1,13 +1,13 @@
 import * as d3 from "d3";
 
+import {closeDialogs} from "dialogs/utils";
 import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
 import {getRandomColor} from "utils/colorUtils";
+import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
 import {openURL} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
-import {si} from "utils/unitUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
-import {closeDialogs} from "dialogs/utils";
 
 export function open() {
   closeDialogs("#biomesEditor, .stable");

src/dialogs/dialogs/burg-editor.js

@@ -9,7 +9,7 @@ import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
 import {convertTemperature, getHeight} from "utils/unitUtils";
-import {getMFCGlink, getBurgSeed} from "modules/ui/editors";
+import {getMFCGlink, getBurgSeed, unselect} from "modules/ui/editors";
 
 let isLoaded = false;
 

src/dialogs/dialogs/burgs-overview.js

@@ -9,8 +9,12 @@ 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 {applySorting} from "modules/ui/editors";
 
-export function overviewBurgs() {
+let isLoaded = false;
+
+export function open() {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
   if (!layerIsOn("toggleIcons")) toggleIcons();
@@ -22,8 +26,8 @@ export function overviewBurgs() {
   burgsOverviewAddLines();
   $("#burgsOverview").dialog();
 
-  if (fmg.modules.overviewBurgs) return;
+  if (isLoaded) return;
-  fmg.modules.overviewBurgs = true;
+  isLoaded = true;
 
   $("#burgsOverview").dialog({
     title: "Burgs Overview",

src/dialogs/dialogs/charts-overview.js

@@ -1,13 +1,13 @@
 import * as d3 from "d3";
 
-import {isWater} from "utils/graphUtils";
-import {tip} from "scripts/tooltips";
-import {byId} from "utils/shorthands";
-import {rn} from "utils/numberUtils";
-import {capitalize} from "utils/stringUtils";
-import {si, convertTemperature, getFriendlyPrecipitation} from "utils/unitUtils";
-import {rollups} from "utils/functionUtils";
 import {closeDialogs} from "dialogs/utils";
+import {tip} from "scripts/tooltips";
+import {rollups} from "utils/functionUtils";
+import {isWater} from "utils/graphUtils";
+import {rn} from "utils/numberUtils";
+import {byId} from "utils/shorthands";
+import {capitalize} from "utils/stringUtils";
+import {convertTemperature, getArea, getAreaUnit, getFriendlyPrecipitation, si} from "utils/unitUtils";
 
 const entitiesMap = {
   states: {

src/dialogs/dialogs/coastline-editor.js

@@ -1,14 +1,17 @@
 import * as d3 from "d3";
 
-import {getPackPolygon} from "utils/graphUtils";
+import {closeDialogs} from "dialogs/utils";
+import {layerIsOn} from "layers";
 import {tip} from "scripts/tooltips";
+import {getPackPolygon} from "utils/graphUtils";
 import {clipPoly} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {round} from "utils/stringUtils";
-import {si} from "utils/unitUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
-import {closeDialogs} from "dialogs/utils";
 
-export function editCoastline(node = d3.event.target) {
+let isLoaded = false;
+
+export function open({node}) {
   if (customization) return;
   closeDialogs(".stable");
   if (layerIsOn("toggleCells")) toggleCells();
@@ -26,8 +29,8 @@ export function editCoastline(node = d3.event.target) {
   drawCoastlineVertices();
   viewbox.on("touchmove mousemove", null);
 
-  if (fmg.modules.editCoastline) return;
+  if (isLoaded) return;
-  fmg.modules.editCoastline = true;
+  isLoaded = true;
 
   // add listeners
   document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection);
@@ -44,6 +47,7 @@ export function editCoastline(node = d3.event.target) {
 
     const l = pack.cells.i.length;
     const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l);
+
     debug
       .select("#vertices")
       .selectAll("polygon")
@@ -73,8 +77,9 @@ export function editCoastline(node = d3.event.target) {
   }
 
   function dragVertex() {
-    const x = rn(d3.event.x, 2),
+    const x = rn(d3.event.x, 2);
-      y = rn(d3.event.y, 2);
+    const y = rn(d3.event.y, 2);
+
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
     const v = +this.dataset.v;

src/dialogs/dialogs/cultures-editor.js

@@ -1,16 +1,16 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
-import {byId} from "utils/shorthands";
-import {rn} from "utils/numberUtils";
-import {capitalize} from "utils/stringUtils";
-import {si} from "utils/unitUtils";
-import {abbreviate} from "utils/languageUtils";
-import {debounce} from "utils/functionUtils";
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
+import {debounce} from "utils/functionUtils";
+import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
+import {abbreviate} from "utils/languageUtils";
+import {rn} from "utils/numberUtils";
+import {byId} from "utils/shorthands";
+import {capitalize} from "utils/stringUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/dialogs/diplomacy-editor.js

@@ -1,11 +1,15 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findCell} from "utils/graphUtils";
-import {tip, clearMainTip} from "scripts/tooltips";
 import {closeDialogs} from "dialogs/utils";
+import {layerIsOn} from "layers";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, tip} from "scripts/tooltips";
+import {findCell} from "utils/graphUtils";
+import {applySorting} from "modules/ui/editors";
 
-export function editDiplomacy() {
+let isLoaded = false;
+
+export function open() {
   if (customization) return;
   if (pack.states.filter(s => s.i && !s.removed).length < 2)
     return tip("There should be at least 2 states to edit the diplomacy", false, "error");
@@ -63,8 +67,8 @@ export function editDiplomacy() {
   refreshDiplomacyEditor();
   viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick);
 
-  if (fmg.modules.editDiplomacy) return;
+  if (isLoaded) return;
-  fmg.modules.editDiplomacy = true;
+  isLoaded = true;
 
   $("#diplomacyEditor").dialog({
     title: "Diplomacy Editor",

src/dialogs/dialogs/religions-editor.js

@@ -1,15 +1,15 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
-import {byId} from "utils/shorthands";
-import {rn} from "utils/numberUtils";
-import {si} from "utils/unitUtils";
-import {abbreviate} from "utils/languageUtils";
-import {debounce} from "utils/functionUtils";
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
+import {debounce} from "utils/functionUtils";
+import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
+import {abbreviate} from "utils/languageUtils";
+import {rn} from "utils/numberUtils";
+import {byId} from "utils/shorthands";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/dialogs/states-editor.js

@@ -1,15 +1,15 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
-import {byId} from "utils/shorthands";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
-import {getRandomColor, getMixedColor} from "utils/colorUtils";
-import {rn} from "utils/numberUtils";
-import {rand, P} from "utils/probabilityUtils";
-import {si} from "utils/unitUtils";
-import {getAdjective} from "utils/languageUtils";
 import {closeDialogs} from "dialogs/utils";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
+import {getMixedColor, getRandomColor} from "utils/colorUtils";
+import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
+import {getAdjective} from "utils/languageUtils";
+import {rn} from "utils/numberUtils";
+import {P, rand} from "utils/probabilityUtils";
+import {byId} from "utils/shorthands";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/index.ts

@@ -1,8 +1,11 @@
 const dialogsMap = {
   biomesEditor: "biomes-editor",
   burgEditor: "burg-editor",
+  burgsOverview: "burgs-overview",
   chartsOverview: "charts-overview",
+  coastlineEditor: "coastline-editor",
   culturesEditor: "cultures-editor",
+  diplomacyEditor: "diplomacy-editor",
   heightmapSelection: "heightmap-selection",
   hierarchyTree: "hierarchy-tree",
   religionsEditor: "religions-editor",
@@ -18,7 +21,7 @@ const defaultOptions = {
 
 // dynamically load UI dialog
 // dialog is a es module with the only exported function 'open'
-export async function openDialog(dialog: TDialog, options: null | typeof defaultOptions, props?: UnknownObject) {
+export async function openDialog(dialog: TDialog, options?: null | typeof defaultOptions, props?: UnknownObject) {
   const {allowDuringCustomization} = options || defaultOptions;
   if (customization && !allowDuringCustomization) return;
 

src/modules/measurers.js

@@ -6,7 +6,7 @@ import {findCell} from "utils/graphUtils";
 import {getSegmentId} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {parseTransform, round} from "utils/stringUtils";
-import {si} from "utils/unitUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 export class Rulers {
   constructor() {

src/modules/ui/cell-info.js

@@ -1,4 +1,5 @@
-import {getHeight, getCellIdPrecipitation, getFriendlyPopulation} from "utils/unitUtils.ts";
+import {getArea, getAreaUnit} from "utils/unitUtils";
+import {getCellIdPrecipitation, getFriendlyPopulation, getHeight} from "utils/unitUtils.ts";
 
 // get cell info on mouse move
 export function updateCellInfo(point, i, g) {

src/modules/ui/editors.js

@@ -68,7 +68,7 @@ function sortLines(headerElement) {
   applySorting(headers);
 }
 
-function applySorting(headers) {
+export function applySorting(headers) {
   const header = headers.querySelector("div[class*='icon-sort']");
   if (!header) return;
   const sortby = header.dataset.sortby;
@@ -963,15 +963,6 @@ function selectIcon(initial, callback) {
   });
 }
 
-function getAreaUnit(squareMark = "²") {
-  return byId("areaUnit").value === "square" ? byId("distanceUnitInput").value + squareMark : byId("areaUnit").value;
-}
-
-function getArea(rawArea) {
-  const distanceScale = byId("distanceScaleInput")?.value;
-  return rawArea * distanceScale ** 2;
-}
-
 function confirmationDialog(options) {
   const {
     title = "Confirm action",

src/modules/ui/hotkeys.js

@@ -44,7 +44,7 @@ function handleKeyup(event) {
   else if (shift && code === "KeyB") editBiomes();
   else if (shift && code === "KeyS") openDialog("statesEditor");
   else if (shift && code === "KeyP") editProvinces();
-  else if (shift && code === "KeyD") editDiplomacy();
+  else if (shift && code === "KeyD") openDialog("diplomacyEditor");
   else if (shift && code === "KeyC") openDialog("culturesEditor");
   else if (shift && code === "KeyN") editNamesbase();
   else if (shift && code === "KeyZ") editZones();
@@ -53,7 +53,7 @@ function handleKeyup(event) {
   else if (shift && code === "KeyQ") openDialog("unitsEditor");
   else if (shift && code === "KeyO") editNotes();
   else if (shift && code === "KeyA") openDialog("chartsOverview");
-  else if (shift && code === "KeyT") overviewBurgs();
+  else if (shift && code === "KeyT") openDialog("burgsOverview");
   else if (shift && code === "KeyV") overviewRivers();
   else if (shift && code === "KeyM") overviewMilitary();
   else if (shift && code === "KeyK") overviewMarkers();

src/modules/ui/lakes-editor.js

@@ -1,12 +1,12 @@
 import * as d3 from "d3";
 
-import {getPackPolygon} from "utils/graphUtils";
+import {closeDialogs} from "dialogs/utils";
 import {tip} from "scripts/tooltips";
+import {getPackPolygon} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {round} from "utils/stringUtils";
-import {si, getHeight} from "utils/unitUtils";
+import {getArea, getAreaUnit, getHeight, si} from "utils/unitUtils";
-import {closeDialogs} from "dialogs/utils";
 
 export function editLake() {
   if (customization) return;

src/modules/ui/provinces-editor.js

@@ -1,17 +1,17 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
-import {unique} from "utils/arrayUtils";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
-import {getRandomColor} from "utils/colorUtils";
-import {rn} from "utils/numberUtils";
-import {rand, P} from "utils/probabilityUtils";
-import {parseTransform} from "utils/stringUtils";
-import {si} from "utils/unitUtils";
-import {turnLayerButtonOff} from "layers";
-import {byId} from "utils/shorthands";
 import {closeDialogs} from "dialogs/utils";
+import {turnLayerButtonOff} from "layers";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
+import {unique} from "utils/arrayUtils";
+import {getRandomColor} from "utils/colorUtils";
+import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
+import {rn} from "utils/numberUtils";
+import {P, rand} from "utils/probabilityUtils";
+import {byId} from "utils/shorthands";
+import {parseTransform} from "utils/stringUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 export function editProvinces() {
   if (customization) return;

src/modules/ui/tools.js

@@ -24,7 +24,7 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "editBiomesButton") editBiomes();
   else if (button === "editStatesButton") openDialog("statesEditor");
   else if (button === "editProvincesButton") editProvinces();
-  else if (button === "editDiplomacyButton") editDiplomacy();
+  else if (button === "editDiplomacyButton") openDialog("diplomacyEditor");
   else if (button === "editCulturesButton") openDialog("culturesEditor");
   else if (button === "editReligions") openDialog("religionsEditor");
   else if (button === "editEmblemButton") openEmblemEditor();
@@ -33,7 +33,7 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "editNotesButton") editNotes();
   else if (button === "editZonesButton") editZones();
   else if (button === "overviewChartsButton") openDialog("chartsOverview");
-  else if (button === "overviewBurgsButton") overviewBurgs();
+  else if (button === "overviewBurgsButton") openDialog("burgsOverview");
   else if (button === "overviewRiversButton") overviewRivers();
   else if (button === "overviewMilitaryButton") overviewMilitary();
   else if (button === "overviewMarkersButton") overviewMarkers();
@@ -539,7 +539,7 @@ function addLabelOnClick() {
 function toggleAddBurg() {
   unpressClickToAddButton();
   document.getElementById("addBurgTool").classList.add("pressed");
-  overviewBurgs();
+  openDialog("burgsOverview");
   document.getElementById("addNewBurg").click();
 }
 

src/modules/ui/zones-editor.js

@@ -1,13 +1,13 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findAll, findCell, getPackPolygon} from "utils/graphUtils";
-import {unique} from "utils/arrayUtils";
-import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
-import {rn} from "utils/numberUtils";
-import {getNextId} from "utils/nodeUtils";
-import {si} from "utils/unitUtils";
 import {closeDialogs} from "dialogs/utils";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
+import {unique} from "utils/arrayUtils";
+import {findAll, findCell, getPackPolygon} from "utils/graphUtils";
+import {getNextId} from "utils/nodeUtils";
+import {rn} from "utils/numberUtils";
+import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 export function editZones() {
   closeDialogs();

src/scripts/events.js

@@ -34,17 +34,14 @@ function clicked() {
   else if (parent.id === "rivers") editRiver(el.id);
   else if (grand.id === "routes") editRoute();
   else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
-  else if (grand.id === "burgLabels" || grand.id === "burgIcons") {
+  else if (grand.id === "burgLabels" || grand.id === "burgIcons") openDialog("burgEditor", null, {id: +el.dataset.id});
-    const burgId = grand.id === "burgLabels" ? +el.dataset.id : +el.parentNode.dataset.id;
+  else if (parent.id === "ice") editIce();
-    openDialog("burgEditor", null, {id: burgId});
-  } else if (parent.id === "ice") editIce();
   else if (parent.id === "terrain") editReliefIcon();
   else if (grand.id === "markers" || great.id === "markers") editMarker();
-  else if (grand.id === "coastline") editCoastline();
+  else if (grand.id === "coastline") openDialog("coastlineEditor", null, {node: d3.event.target});
   else if (great.id === "armies") editRegiment();
   else if (pack.cells.t[i] === 1) {
-    const node = byId("island_" + pack.cells.f[i]);
+    openDialog("coastlineEditor", null, {node: byId("island_" + pack.cells.f[i])});
-    editCoastline(node);
   } else if (grand.id === "lakes") editLake();
 }
 

src/utils/unitUtils.ts

@@ -27,6 +27,21 @@ export function siToInteger(value: string) {
   return parseInt(value);
 }
 
+// ***
+// Area
+// ***
+
+export function getAreaUnit(squareMark = "²") {
+  return getInputValue("areaUnit") === "square"
+    ? getInputValue("distanceUnitInput") + squareMark
+    : getInputValue("areaUnit");
+}
+
+export function getArea(rawArea: number) {
+  const distanceScale = getInputNumber("distanceScaleInput");
+  return rawArea * distanceScale ** 2;
+}
+
 // ***
 // Temperature
 // ***
@@ -105,7 +120,6 @@ export function getCellPopulation(cellId: number) {
   return [rural, urban];
 }
 
-// get user-friendly (real-world) population value from map data
 export function getFriendlyPopulation(cellId: number) {
   const [rural, urban] = getCellPopulation(cellId);
   return `${si(rural + urban)} (${si(rural)} rural, urban ${si(urban)})`;