refactor(es modules): modulize utils

src/utils/coordinateUtils.ts

@@ -0,0 +1,25 @@
+import {rn} from "./numberUtils";
+
+const {mapCoordinates, graphWidth, graphHeight} = window;
+
+function getLongitude(x: number, decimals = 2) {
+  return rn(mapCoordinates.lonW + (x / graphWidth) * mapCoordinates.lonT, decimals);
+}
+
+function getLatitude(y: number, decimals = 2) {
+  return rn(mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT, decimals);
+}
+
+export function getCoordinates(x: number, y: number, decimals = 2) {
+  return [getLongitude(x, decimals), getLatitude(y, decimals)];
+}
+
+// convert coordinate to DMS format
+export function toDMS(coord: number, type: "lat" | "lon") {
+  const degrees = Math.floor(Math.abs(coord));
+  const minutesNotTruncated = (Math.abs(coord) - degrees) * 60;
+  const minutes = Math.floor(minutesNotTruncated);
+  const seconds = Math.floor((minutesNotTruncated - minutes) * 60);
+  const cardinal = type === "lat" ? (coord >= 0 ? "N" : "S") : coord >= 0 ? "E" : "W";
+  return `${degrees}° ${minutes}′ ${seconds}″ ${cardinal}`;
+}

src/utils/errorUtils.ts

@@ -0,0 +1,8 @@
+// parse error to get the readable string
+export function parseError(error: Error) {
+  const errorString = error.toString() + " " + error.stack;
+  const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+  const errorNoURL = errorString.replace(regex, url => "<i>" + url.split("/").at(-1) + "</i>");
+  const errorParsed = errorNoURL.replace(/at /gi, "<br>&nbsp;&nbsp;at ");
+  return errorParsed;
+}

src/utils/keyboardUtils.ts

@@ -0,0 +1,3 @@
+export function isCtrlClick(event: MouseEvent) {
+  return event.ctrlKey || event.metaKey;
+}

src/utils/lineUtils.ts

@@ -0,0 +1,56 @@
+import {polygon} from "lineclip";
+
+const {graphWidth, graphHeight, pack} = window;
+
+// clip polygon by graph bbox
+export function clipPoly(points: TPoints) {
+  return polygon(points, [0, 0, graphWidth, graphHeight]);
+}
+
+// get segment of any point on polyline
+export function getSegmentId(points: TPoints, point: TPoint, step = 10) {
+  if (points.length === 2) return 1;
+  const d2 = (p1: TPoint, p2: TPoint) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
+
+  let minSegment = 1;
+  let minDist = Infinity;
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+
+    const length = Math.sqrt(d2(p1, p2));
+    const segments = Math.ceil(length / step);
+    const dx = (p2[0] - p1[0]) / segments;
+    const dy = (p2[1] - p1[1]) / segments;
+
+    for (let s = 0; s < segments; s++) {
+      const x = p1[0] + s * dx;
+      const y = p1[1] + s * dy;
+      const dist2 = d2(point, [x, y]);
+
+      if (dist2 >= minDist) continue;
+      minDist = dist2;
+      minSegment = i + 1;
+    }
+  }
+
+  return minSegment;
+}
+
+// return center point of common edge of 2 pack cells
+export function getMiddlePoint(cell1: number, cell2: number) {
+  const {cells, vertices} = pack;
+
+  const commonVertices = cells.v[cell1].filter((vertex: number) =>
+    vertices.c[vertex].some((cellId: number) => cellId === cell2)
+  );
+
+  const [x1, y1] = vertices.p[commonVertices[0]];
+  const [x2, y2] = vertices.p[commonVertices[1]];
+
+  const x = (x1 + x2) / 2;
+  const y = (y1 + y2) / 2;
+
+  return [x, y];
+}

src/utils/linkUtils.ts

@@ -0,0 +1,14 @@
+// open URL in a new tab or window
+export function openURL(url: string) {
+  window.open(url, "_blank");
+}
+
+// open project wiki-page
+export function wiki(page: string) {
+  window.open("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/" + page, "_blank");
+}
+
+// wrap URL into html anchor element
+export function link(url: string, text: string) {
+  return `<a href="${url}" rel="noopener" target="_blank">${text}</a>`;
+}