Urquhart routes (#1072)

* feat: routes generation

* feat: routes rendering

* feat: searoutes fix, changing reGraph

* feat: searoute - change pathfinding algo

* feat: routes - cleanup code

* feat: routes - change data format

* feat: routes - add routes to json export

* feat: edit routes - start

* feat: edit routes - main

* feat: edit routes - EP

* feat: edit routes - remove route

* feat: route - generate names

* feat: route - continue

* Refactor route merging logic for improved performance

* feat: routes - show name in tooltip

* feat: routes - create route dialog

* feat: update data on control point remove

* feat: routes editor - split route

* feat: add join route functionality to routes editor

* feat: Add join route functionality to routes editor

* feat: Update join route tooltip in routes editor

* feat: routes overview - sort by length

* feat: routes overview - fix distanceScale value

* feat: routes overview - create route

* Refactor getMiddlePoint function to getCloseToEdgePoint

* feat: routes - change data format, fix issues

* feat: routes - regenerateRoutes

* feat: routes - add route on burg creation

* chore - remove merge conflict markers

* chore - remove merge conflict markers

* feat: routes name - no unnamed burg names

* feat: routes - lock routes

* fix: routes - split routes

* feat: routes - tip correction

* feat: routes - auto-update part 1

* feat: routes - return old rePacj logic to not break auto-update

* feat: routes - auto-update - add connections

---------

Co-authored-by: Azgaar <azgaar.fmg@yandex.com>

utils/colorUtils.js

@@ -14,11 +14,27 @@ function toHEX(rgb) {
     : "";
 }
 
+const C_12 = [
+  "#dababf",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#c6b9c1",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
+  "#8dd3c7",
+  "#eb8de7"
+];
+const scaleRainbow = d3.scaleSequential(d3.interpolateRainbow);
+
 // return array of standard shuffled colors
 function getColors(number) {
-  const c12 = ["#dababf", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#c6b9c1", "#bc80bd", "#ccebc5", "#ffed6f", "#8dd3c7", "#eb8de7"];
-  const cRB = d3.scaleSequential(d3.interpolateRainbow);
-  const colors = d3.shuffle(d3.range(number).map(i => (i < 12 ? c12[i] : d3.color(cRB((i - 12) / (number - 12))).hex())));
+  const colors = d3.shuffle(
+    d3.range(number).map(i => (i < 12 ? C_12[i] : d3.color(scaleRainbow((i - 12) / (number - 12))).hex()))
+  );
   return colors;
 }
 

utils/commonUtils.js

@@ -9,7 +9,6 @@ function clipPoly(points, secure = 0) {
 // get segment of any point on polyline
 function getSegmentId(points, point, step = 10) {
   if (points.length === 2) return 1;
-  const d2 = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
 
   let minSegment = 1;
   let minDist = Infinity;
@@ -18,7 +17,7 @@ function getSegmentId(points, point, step = 10) {
     const p1 = points[i];
     const p2 = points[i + 1];
 
-    const length = Math.sqrt(d2(p1, p2));
+    const length = Math.sqrt(dist2(p1, p2));
     const segments = Math.ceil(length / step);
     const dx = (p2[0] - p1[0]) / segments;
     const dy = (p2[1] - p1[1]) / segments;
@@ -26,10 +25,10 @@ function getSegmentId(points, point, step = 10) {
     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]);
+      const dist = dist2(point, [x, y]);
 
-      if (dist2 >= minDist) continue;
-      minDist = dist2;
+      if (dist >= minDist) continue;
+      minDist = dist;
       minSegment = i + 1;
     }
   }
@@ -37,20 +36,6 @@ function getSegmentId(points, point, step = 10) {
   return minSegment;
 }
 
-// return center point of common edge of 2 pack cells
-function getMiddlePoint(cell1, cell2) {
-  const {cells, vertices} = pack;
-
-  const commonVertices = cells.v[cell1].filter(vertex => vertices.c[vertex].some(cell => cell === 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];
-}
-
 function debounce(func, ms) {
   let isCooldown = false;
 

utils/debugUtils.js

@@ -0,0 +1,58 @@
+"use strict";
+// FMG utils used for debugging
+
+function drawCellsValue(data) {
+  debug.selectAll("text").remove();
+  debug
+    .selectAll("text")
+    .data(data)
+    .enter()
+    .append("text")
+    .attr("x", (d, i) => pack.cells.p[i][0])
+    .attr("y", (d, i) => pack.cells.p[i][1])
+    .text(d => d);
+}
+
+function drawPolygons(data) {
+  const max = d3.max(data);
+  const min = d3.min(data);
+  const scheme = getColorScheme(terrs.select("#landHeights").attr("scheme"));
+
+  data = data.map(d => 1 - normalize(d, min, max));
+
+  debug.selectAll("polygon").remove();
+  debug
+    .selectAll("polygon")
+    .data(data)
+    .enter()
+    .append("polygon")
+    .attr("points", (d, i) => getGridPolygon(i))
+    .attr("fill", d => scheme(d))
+    .attr("stroke", d => scheme(d));
+}
+
+function drawRouteConnections() {
+  debug.select("#connections").remove();
+  const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.4);
+
+  const points = pack.cells.p;
+  const links = pack.cells.routes;
+
+  for (const from in links) {
+    for (const to in links[from]) {
+      const [x1, y1] = points[from];
+      const [x3, y3] = points[to];
+      const [x2, y2] = [(x1 + x3) / 2, (y1 + y3) / 2];
+      const routeId = links[from][to];
+
+      routes
+        .append("line")
+        .attr("x1", x1)
+        .attr("y1", y1)
+        .attr("x2", x2)
+        .attr("y2", y2)
+        .attr("data-id", routeId)
+        .attr("stroke", C_12[routeId % 12]);
+    }
+  }
+}

utils/functionUtils.js

@@ -1,7 +1,9 @@
+"use strict";
+// FMG helper functions
+
 // extracted d3 code to bypass version conflicts
 // https://github.com/d3/d3-array/blob/main/src/group.js
-
-export function rollups(values, reduce, ...keys) {
+function rollups(values, reduce, ...keys) {
   return nest(values, Array.from, reduce, keys);
 }
 
@@ -23,3 +25,7 @@ function nest(values, map, reduce, keys) {
     return map(groups);
   })(values, 0);
 }
+
+function dist2([x1, y1], [x2, y2]) {
+  return (x1 - x2) ** 2 + (y1 - y2) ** 2;
+}

utils/graphUtils.js

@@ -312,38 +312,6 @@ void (function addFindAll() {
   };
 })();
 
-// helper function non-used for the generation
-function drawCellsValue(data) {
-  debug.selectAll("text").remove();
-  debug
-    .selectAll("text")
-    .data(data)
-    .enter()
-    .append("text")
-    .attr("x", (d, i) => pack.cells.p[i][0])
-    .attr("y", (d, i) => pack.cells.p[i][1])
-    .text(d => d);
-}
-
-// helper function non-used for the main generation
-function drawPolygons(data) {
-  const max = d3.max(data);
-  const min = d3.min(data);
-  const scheme = getColorScheme(terrs.select("#landHeights").attr("scheme"));
-
-  data = data.map(d => 1 - normalize(d, min, max));
-
-  debug.selectAll("polygon").remove();
-  debug
-    .selectAll("polygon")
-    .data(data)
-    .enter()
-    .append("polygon")
-    .attr("points", (d, i) => getGridPolygon(i))
-    .attr("fill", d => scheme(d))
-    .attr("stroke", d => scheme(d));
-}
-
 // draw raster heightmap preview (not used in main generation)
 function drawHeights({heights, width, height, scheme, renderOcean}) {
   const canvas = document.createElement("canvas");