refactor(es modules): migrate colorUtils

src/main.ts

@@ -1,27 +1,28 @@
 // Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2022. MIT License
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
+import {invokeActiveZooming} from "../modules/activeZooming";
+import {applyPreset, drawBorders, drawRivers, drawStates} from "../modules/ui/layers";
+import {applyMapSize, applyStoredOptions, randomizeOptions} from "../modules/ui/options";
+import {ERROR, INFO, TIME, WARN} from "./config/logging";
 import {UINT16_MAX} from "./constants";
-import {INFO, TIME, WARN, ERROR} from "./config/logging";
+import {clearLegend} from "./modules/legend";
+import {drawScaleBar, Ruler, Rulers} from "./modules/measurers";
+import {applyStyleOnLoad} from "../modules/ui/stylePresets";
+import {restoreDefaultEvents} from "./scripts/events";
+import {addGlobalListeners} from "./scripts/listeners";
+import {locked} from "./scripts/options/lock";
+import {clearMainTip, tip} from "./scripts/tooltips";
+import {createTypedArray} from "./utils/arrayUtils";
 import {
-  shouldRegenerateGrid,
-  generateGrid,
   calculateVoronoi,
+  findCell,
+  generateGrid,
   getPackPolygon,
   isLand,
-  findCell
+  shouldRegenerateGrid
 } from "./utils/graphUtils";
-import {createTypedArray} from "./utils/arrayUtils";
-import {applyPreset, drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
-import {invokeActiveZooming} from "../modules/activeZooming";
-import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
-import {locked} from "./scripts/options/lock";
-import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
 import {byId} from "./utils/shorthands";
-import {addGlobalListeners} from "./scripts/listeners";
-import {restoreDefaultEvents} from "./scripts/events";
-import {clearMainTip, tip} from "./scripts/tooltips";
-import {clearLegend} from "./modules/legend";
 import "./components";
 
 addGlobalListeners();

src/types/global.d.ts

@@ -12,6 +12,7 @@ interface Window {
   };
   pack: IPack;
   grig: IGrid;
+  d3: typeof d3;
 }
 
 interface Node {

src/utils/colorUtils.ts

@@ -0,0 +1,40 @@
+const d3 = window.d3;
+
+const c12 = [
+  "#dababf",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#c6b9c1",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
+  "#8dd3c7",
+  "#eb8de7"
+];
+
+export function getColors(number: number) {
+  const cRB = d3.scaleSequential(d3.interpolateRainbow);
+  const colors = d3.shuffle(
+    d3
+      .range(number)
+      .map((index: number) => (index < 12 ? c12[index] : d3.color(cRB((index - 12) / (number - 12))).hex()))
+  );
+  return colors;
+}
+
+export function getRandomColor() {
+  return d3.color(d3.scaleSequential(d3.interpolateRainbow)(Math.random())).hex();
+}
+
+// mix a color with a random color
+export function getMixedColor(hexColor: string, mixation = 0.2, bright = 0.3) {
+  // if provided color is not hex (e.g. harching), generate random one
+  const color1 = hexColor && hexColor[0] === "#" ? hexColor : getRandomColor();
+  const color2 = getRandomColor();
+  const mixedColor = d3.interpolate(color1, color2)(mixation);
+
+  return d3.color(mixedColor).brighter(bright).hex();
+}