refactor(es modules): modulize utils

index.html

@@ -7691,7 +7691,7 @@
 
     <script src="modules/define-globals.js"></script>
     <script src="modules/define-svg.js"></script>
-    <script src="modules/zoom.js"></script>
+    <script type="module" src="modules/zoom.js"></script>
 
     <script type="module" src="/src/main.ts"></script>
 

modules/dynamic/editors/cultures-editor.js

@@ -6,6 +6,7 @@ import {rn} from "/src/utils/numberUtils";
 import {capitalize} from "@/utils/stringUtils";
 import {si} from "@/utils/unitUtils";
 import {abbreviate} from "@/utils/languageUtils";
+import {debounce} from "@/utils/functionUtils";
 
 const $body = insertEditorHtml();
 addListeners();

modules/dynamic/editors/religions-editor.js

@@ -5,6 +5,7 @@ import {byId} from "/src/utils/shorthands";
 import {rn} from "/src/utils/numberUtils";
 import {si} from "@/utils/unitUtils";
 import {abbreviate} from "@/utils/languageUtils";
+import {debounce} from "@/utils/functionUtils";
 
 const $body = insertEditorHtml();
 addListeners();

modules/dynamic/overview/charts-overview.js

@@ -1,10 +1,10 @@
-import {rollups} from "../../../utils/functionUtils.js";
 import {isWater} from "/src/utils/graphUtils";
 import {tip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 import {rn} from "/src/utils/numberUtils";
 import {capitalize} from "@/utils/stringUtils";
 import {si, convertTemperature} from "@/utils/unitUtils";
+import {rollups} from "@/utils/functionUtils";
 
 const entitiesMap = {
   states: {

modules/io/export.js

@@ -3,6 +3,7 @@ import {unique} from "/src/utils/arrayUtils";
 import {tip} from "/src/scripts/tooltips";
 import {getCoordinates} from "@/utils/coordinateUtils";
 import {rn} from "/src/utils/numberUtils";
+import {getBase64} from "@/utils/functionUtils";
 
 // download map as SVG
 async function saveSVG() {

modules/ui/3d.js

@@ -1,5 +1,6 @@
 import {tip} from "/src/scripts/tooltips";
 import {rn} from "/src/utils/numberUtils";
+import {throttle} from "@/utils/functionUtils";
 
 window.ThreeD = (function () {
   const options = {

modules/ui/heightmap-editor.js

@@ -6,6 +6,7 @@ import {byId} from "/src/utils/shorthands";
 import {rn, minmax, lim} from "/src/utils/numberUtils";
 import {link} from "@/utils/linkUtils";
 import {prompt} from "@/scripts/prompt";
+import {throttle} from "@/utils/functionUtils";
 
 export function editHeightmap(options) {
   const {mode, tool} = options || {};

modules/ui/layers.js

@@ -11,6 +11,7 @@ import {isCtrlClick} from "@/utils/keyboardUtils";
 import {prompt} from "@/scripts/prompt";
 import {rand, P} from "@/utils/probabilityUtils";
 import {convertTemperature} from "@/utils/unitUtils";
+import {getBase64} from "@/utils/functionUtils";
 
 let presets = {};
 restoreCustomPresets(); // run on-load

modules/ui/style.js

@@ -1,6 +1,7 @@
 import {tip} from "/src/scripts/tooltips";
 import {rn} from "/src/utils/numberUtils";
 import {parseTransform} from "@/utils/stringUtils";
+import {getBase64} from "@/utils/functionUtils";
 
 // add available filters to lists
 {

modules/ui/submap.js

@@ -2,6 +2,7 @@ import {byId} from "/src/utils/shorthands";
 import {clearMainTip} from "/src/scripts/tooltips";
 import {parseError} from "@/utils/errorUtils";
 import {rn, minmax} from "/src/utils/numberUtils";
+import {debounce} from "@/utils/functionUtils";
 
 window.UISubmap = (function () {
   byId("submapPointsInput").addEventListener("input", function () {

modules/zoom.js

@@ -1,9 +1,9 @@
-"use strict";
+import {debounce} from "@/utils/functionUtils";
 
 // temporary expose to global
-let scale = 1;
+window.scale = 1;
-let viewX = 0;
+window.viewX = 0;
-let viewY = 0;
+window.viewY = 0;
 
 window.Zoom = (function () {
   function onZoom() {

src/scripts/events.ts

@@ -2,6 +2,7 @@ import {dragLegendBox} from "../modules/legend";
 import {findCell, findGridCell} from "../utils/graphUtils";
 import {tip, showMainTip} from "./tooltips";
 import {si, convertTemperature} from "@/utils/unitUtils";
+import {debounce} from "@/utils/functionUtils";
 
 export function restoreDefaultEvents() {
   Zoom.setZoomBehavior();

src/utils/functionUtils.js

@@ -1,77 +0,0 @@
-// extracted d3 code to bypass version conflicts
-// https://github.com/d3/d3-array/blob/main/src/group.js
-
-export function rollups(values, reduce, ...keys) {
-  return nest(values, Array.from, reduce, keys);
-}
-
-function nest(values, map, reduce, keys) {
-  return (function regroup(values, i) {
-    if (i >= keys.length) return reduce(values);
-    const groups = new Map();
-    const keyof = keys[i++];
-    let index = -1;
-    for (const value of values) {
-      const key = keyof(value, ++index, values);
-      const group = groups.get(key);
-      if (group) group.push(value);
-      else groups.set(key, [value]);
-    }
-    for (const [key, values] of groups) {
-      groups.set(key, regroup(values, i));
-    }
-    return map(groups);
-  })(values, 0);
-}
-
-function debounce(func, ms) {
-  let isCooldown = false;
-
-  return function () {
-    if (isCooldown) return;
-    func.apply(this, arguments);
-    isCooldown = true;
-    setTimeout(() => (isCooldown = false), ms);
-  };
-}
-
-function throttle(func, ms) {
-  let isThrottled = false;
-  let savedArgs;
-  let savedThis;
-
-  function wrapper() {
-    if (isThrottled) {
-      savedArgs = arguments;
-      savedThis = this;
-      return;
-    }
-
-    func.apply(this, arguments);
-    isThrottled = true;
-
-    setTimeout(function () {
-      isThrottled = false;
-      if (savedArgs) {
-        wrapper.apply(savedThis, savedArgs);
-        savedArgs = savedThis = null;
-      }
-    }, ms);
-  }
-
-  return wrapper;
-}
-
-function getBase64(url, callback) {
-  const xhr = new XMLHttpRequest();
-  xhr.onload = function () {
-    const reader = new FileReader();
-    reader.onloadend = function () {
-      callback(reader.result);
-    };
-    reader.readAsDataURL(xhr.response);
-  };
-  xhr.open("GET", url);
-  xhr.responseType = "blob";
-  xhr.send();
-}

src/utils/functionUtils.ts

@@ -0,0 +1,84 @@
+// extracted d3 code to bypass version conflicts
+// https://github.com/d3/d3-array/blob/main/src/group.js
+function nest<TObject, TKey, TReduce>(
+  values: TObject[],
+  map: <T>(arrayLike: Map<TKey, T>) => T[],
+  reduce: (value: TObject[]) => TReduce,
+  keys: ((value: TObject, index: number, values: TObject[]) => TKey)[]
+) {
+  return (function regroup(values, i) {
+    if (i >= keys.length) return reduce(values);
+    const groups = new Map();
+    const keyof = keys[i++];
+    let index = -1;
+    for (const value of values) {
+      const key = keyof(value, ++index, values);
+      const group = groups.get(key);
+      if (group) group.push(value);
+      else groups.set(key, [value]);
+    }
+    for (const [key, values] of groups) {
+      groups.set(key, regroup(values, i));
+    }
+    return map(groups);
+  })(values, 0);
+}
+
+export function rollups<TObject, TKey, TReduce>(
+  values: TObject[],
+  reduce: (value: TObject[]) => TReduce,
+  keys: ((value: TObject, index: number, values: TObject[]) => TKey)[]
+) {
+  return nest(values, Array.from, reduce, keys);
+}
+
+export function debounce<T extends (...args: any[]) => any>(func: T, waitFor: number) {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>): ReturnType<T> => {
+    let result: any;
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      result = func(...args);
+    }, waitFor);
+    return result;
+  };
+}
+
+export function throttle(func: Function, waitFor: number = 300) {
+  let inThrottle: boolean;
+  let lastFn: ReturnType<typeof setTimeout>;
+  let lastTime: number;
+
+  return function (this: any) {
+    const context = this;
+    const args = arguments;
+
+    if (!inThrottle) {
+      func.apply(context, args);
+      lastTime = Date.now();
+      inThrottle = true;
+    } else {
+      clearTimeout(lastFn);
+      lastFn = setTimeout(() => {
+        if (Date.now() - lastTime >= waitFor) {
+          func.apply(context, args);
+          lastTime = Date.now();
+        }
+      }, Math.max(waitFor - (Date.now() - lastTime), 0));
+    }
+  };
+}
+
+export function getBase64(url: string, callback: (base64: string | ArrayBuffer | null) => void) {
+  const xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    const reader = new FileReader();
+    reader.onloadend = function () {
+      callback(reader.result);
+    };
+    reader.readAsDataURL(xhr.response);
+  };
+  xhr.open("GET", url);
+  xhr.responseType = "blob";
+  xhr.send();
+}