refactor(es modules): continue migration

src/main.ts

@@ -17,6 +17,7 @@ import {invokeActiveZooming} from "../modules/activeZooming";
 import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
 import {locked} from "../modules/ui/general";
 import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
+import {byId} from "./utils/shorthands";
 
 window.fmg = {
   modules: {}
@@ -223,8 +224,8 @@ function focusOn() {
 
 // find burg for MFCG and focus on it
 function findBurgForMFCG(params) {
-  const cells = pack.cells,
-    burgs = pack.burgs;
+  const {cells, burgs} = pack;
+
   if (pack.burgs.length < 2) {
     ERROR && console.error("Cannot select a burg for MFCG");
     return;
@@ -305,18 +306,18 @@ void (function addDragToUpload() {
   document.addEventListener("dragover", function (e) {
     e.stopPropagation();
     e.preventDefault();
-    document.getElementById("mapOverlay").style.display = null;
+    byId("mapOverlay").style.display = null;
   });
 
   document.addEventListener("dragleave", function (e) {
-    document.getElementById("mapOverlay").style.display = "none";
+    byId("mapOverlay").style.display = "none";
   });
 
   document.addEventListener("drop", function (e) {
     e.stopPropagation();
     e.preventDefault();
 
-    const overlay = document.getElementById("mapOverlay");
+    const overlay = byId("mapOverlay");
     overlay.style.display = "none";
     if (e.dataTransfer.items == null || e.dataTransfer.items.length !== 1) return; // no files or more than one
     const file = e.dataTransfer.items[0].getAsFile();
@@ -523,7 +524,7 @@ function addLakesInDeepDepressions() {
   TIME && console.time("addLakesInDeepDepressions");
   const {cells, features} = grid;
   const {c, h, b} = cells;
-  const ELEVATION_LIMIT = +document.getElementById("lakeElevationLimitOutput").value;
+  const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
   if (ELEVATION_LIMIT === 80) return;
 
   for (const i of cells.i) {
@@ -677,8 +678,8 @@ function defineMapSize() {
 
 // calculate map position on globe
 function calculateMapCoordinates() {
-  const size = +document.getElementById("mapSizeOutput").value;
-  const latShift = +document.getElementById("latitudeOutput").value;
+  const size = +byId("mapSizeOutput").value;
+  const latShift = +byId("latitudeOutput").value;
 
   const latT = rn((size / 100) * 180, 1);
   const latN = rn(90 - ((180 - latT) * latShift) / 100, 1);
@@ -1506,7 +1507,7 @@ function addZones(number = 1) {
   }
 
   function addEruption() {
-    const volcano = document.getElementById("markers").querySelector("use[data-id='#marker_volcano']");
+    const volcano = byId("markers").querySelector("use[data-id='#marker_volcano']");
     if (!volcano) return;
 
     const x = +volcano.dataset.x,
@@ -1722,7 +1723,7 @@ function undraw() {
     .getElementById("deftemp")
     .querySelectorAll("path, clipPath, svg")
     .forEach(el => el.remove());
-  document.getElementById("coas").innerHTML = ""; // remove auto-generated emblems
+  byId("coas").innerHTML = ""; // remove auto-generated emblems
   notes = [];
   rulers = new Rulers();
   unfog();

src/modules/measurers.js

@@ -1,4 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export class Rulers {
   constructor() {

src/types/global.d.ts

@@ -10,6 +10,13 @@ interface Window {
       [key: string]: boolean;
     };
   };
+  pack: IPack;
+  grig: IGrid;
+}
+
+interface Node {
+  on: (name: string, fn: EventListenerOrEventListenerObject, options?: AddEventListenerOptions) => void;
+  off: (name: string, fn: EventListenerOrEventListenerObject) => void;
 }
 
 type UnknownObject = {[key: string]: unknown};

src/utils/arrayUtils.ts

@@ -23,7 +23,7 @@ function getTypedArray(maxValue: number) {
 interface ICreateTypedArray {
   maxValue: number;
   length: number;
-  from: ArrayLike<number>;
+  from?: ArrayLike<number>;
 }
 
 export function createTypedArray({maxValue, length, from}: ICreateTypedArray) {

src/utils/graphUtils.ts

@@ -1,5 +1,6 @@
 import {TIME} from "../config/logging";
 import {createTypedArray} from "./arrayUtils";
+import {byId} from "./shorthands";
 
 // check if new grid graph should be generated or we can use the existing one
 export function shouldRegenerateGrid(grid) {
@@ -36,7 +37,7 @@ function placePoints() {
 }
 
 // calculate Delaunay and then Voronoi diagram
-export function calculateVoronoi(points, boundary) {
+export function calculateVoronoi(points: number[][], boundary: number[][]) {
   TIME && console.time("calculateDelaunay");
   const allPoints = points.concat(boundary);
   const delaunay = Delaunator.from(allPoints);
@@ -54,7 +55,7 @@ export function calculateVoronoi(points, boundary) {
 }
 
 // add points along map edge to pseudo-clip voronoi cells
-function getBoundaryPoints(width, height, spacing) {
+function getBoundaryPoints(width: number, height: number, spacing: number) {
   const offset = rn(-1 * spacing);
   const bSpacing = spacing * 2;
   const w = width - offset * 2;
@@ -77,7 +78,7 @@ function getBoundaryPoints(width, height, spacing) {
 }
 
 // get points on a regular square grid and jitter them a bit
-function getJitteredGrid(width, height, spacing) {
+function getJitteredGrid(width: number, height: number, spacing: number) {
   const radius = spacing / 2; // square radius
   const jittering = radius * 0.9; // max deviation
   const doubleJittering = jittering * 2;
@@ -95,7 +96,7 @@ function getJitteredGrid(width, height, spacing) {
 }
 
 // return cell index on a regular square grid
-export function findGridCell(x, y, grid) {
+export function findGridCell(x: number, y: number, grid) {
   return (
     Math.floor(Math.min(y / grid.spacing, grid.cellsY - 1)) * grid.cellsX +
     Math.floor(Math.min(x / grid.spacing, grid.cellsX - 1))
@@ -103,7 +104,7 @@ export function findGridCell(x, y, grid) {
 }
 
 // return array of cell indexes in radius on a regular square grid
-export function findGridAll(x, y, radius) {
+export function findGridAll(x: number, y: number, radius: number) {
   const c = grid.cells.c;
   let r = Math.floor(radius / grid.spacing);
   let found = [findGridCell(x, y, grid)];
@@ -129,34 +130,34 @@ export function findGridAll(x, y, radius) {
 }
 
 // return array of cell indexes in radius
-export function findAll(x, y, radius) {
+export function findAll(x: number, y: number, radius: number) {
   const found = pack.cells.q.findAll(x, y, radius);
   return found.map(r => r[2]);
 }
 
 // get polygon points for packed cells knowing cell id
-export function getPackPolygon(i) {
+export function getPackPolygon(i: number) {
   return pack.cells.v[i].map(v => pack.vertices.p[v]);
 }
 
 // return closest cell index
-export function findCell(x, y, radius = Infinity) {
+export function findCell(x: number, y: number, radius = Infinity) {
   const found = pack.cells.q.find(x, y, radius);
   return found ? found[2] : undefined;
 }
 
 // get polygon points for initial cells knowing cell id
-export function getGridPolygon(i) {
+export function getGridPolygon(i: number) {
   return grid.cells.v[i].map(v => grid.vertices.p[v]);
 }
 
 // filter land cells
-export function isLand(i) {
+export function isLand(i: number) {
   return pack.cells.h[i] >= 20;
 }
 
 // filter water cells
-export function isWater(i) {
+export function isWater(i: number) {
   return pack.cells.h[i] < 20;
 }
 

src/utils/shorthands.ts

@@ -0,0 +1,9 @@
+export const byId = document.getElementById.bind(document);
+
+Node.prototype.on = function (name, fn, options) {
+  this.addEventListener(name, fn, options);
+};
+
+Node.prototype.off = function (name, fn) {
+  this.removeEventListener(name, fn);
+};