refactor: draw coastline

src/scripts/connectVertices.ts

@@ -0,0 +1,150 @@
+import * as d3 from "d3";
+
+import {ERROR} from "config/logging";
+import {clipPoly} from "utils/lineUtils";
+
+export function getFeatureVertices({
+  firstCell,
+  vertices,
+  cells,
+  featureIds,
+  featureId
+}: {
+  firstCell: number;
+  vertices: IGraphVertices;
+  cells: Pick<IPack["cells"], "c" | "v">;
+  featureIds: Uint16Array;
+  featureId: number;
+}) {
+  const packCellsNumber = cells.c.length;
+
+  const startingCell = findStartingCell({firstCell, featureIds, featureId, vertices, cells, packCellsNumber});
+  const startingVertex = findStartingVertex({startingCell, featureIds, featureId, vertices, cells, packCellsNumber});
+  const featureVertices = connectVertices({vertices, startingVertex, featureIds, featureId});
+
+  // temp: draw feature vertices
+  cells.v[firstCell]
+    .map(v => vertices.p[v])
+    .forEach(([x, y]) => {
+      d3.select("#debug").append("circle").attr("cx", x).attr("cy", y).attr("r", 0.2).attr("fill", "yellow");
+    });
+
+  const [cx, cy] = vertices.p[startingVertex];
+  d3.select("#debug").append("circle").attr("cx", cx).attr("cy", cy).attr("r", 1.5).attr("fill", "red");
+
+  const lineGen = d3.line();
+  const points = clipPoly(featureVertices.map(v => vertices.p[v]));
+  const path = lineGen(points)!;
+  d3.select("#debug")
+    .attr("fill", "none")
+    .attr("stroke", "black")
+    .attr("stroke-width", 0.1)
+    .append("path")
+    .attr("d", path);
+
+  return featureVertices;
+}
+
+function findStartingCell({
+  firstCell,
+  featureIds,
+  featureId,
+  vertices,
+  cells,
+  packCellsNumber
+}: {
+  firstCell: number;
+  featureIds: Uint16Array;
+  featureId: number;
+  vertices: IGraphVertices;
+  cells: Pick<IPack["cells"], "c" | "v">;
+  packCellsNumber: number;
+}) {
+  const bordersOtherFeature = cells.c[firstCell].some(neighbor => featureIds[neighbor] !== featureId);
+  if (bordersOtherFeature) return firstCell;
+
+  const neibCells = cells.c[firstCell].sort((a, b) => a - b);
+  for (const neibCell of neibCells) {
+    const cellVertices = cells.v[neibCell];
+    const edgingVertex = cellVertices.findIndex(vertex => vertices.c[vertex].some(cellId => cellId >= packCellsNumber));
+    if (edgingVertex !== -1) {
+      const engingCell = cells.c[neibCell];
+      return engingCell[edgingVertex];
+    }
+  }
+
+  throw new Error(`Markup: firstCell ${firstCell} of feature ${featureId} has no neighbors of other features`);
+}
+
+function findStartingVertex({
+  startingCell,
+  featureIds,
+  featureId,
+  vertices,
+  cells,
+  packCellsNumber
+}: {
+  startingCell: number;
+  featureIds: Uint16Array;
+  featureId: number;
+  vertices: IGraphVertices;
+  cells: Pick<IPack["cells"], "c" | "v">;
+  packCellsNumber: number;
+}) {
+  const neibCells = cells.c[startingCell];
+  const cellVertices = cells.v[startingCell];
+
+  const externalVertex = cellVertices.find(vertex => {
+    const [x, y] = vertices.p[vertex];
+    if (x < 0 || y < 0) return true;
+    return vertices.c[vertex].some((cellId: number) => cellId >= packCellsNumber);
+  });
+  if (externalVertex !== undefined) return externalVertex;
+
+  const otherFeatureNeibs = neibCells.filter(neibCell => featureIds[neibCell] !== featureId);
+  if (!otherFeatureNeibs.length) {
+    throw new Error(`Markup: firstCell ${startingCell} of feature ${featureId} has no neighbors of other features`);
+  }
+
+  const index = neibCells.indexOf(d3.min(otherFeatureNeibs)!);
+  return cellVertices[index];
+}
+
+const CONNECT_VERTICES_MAX_ITERATIONS = 50000;
+
+// connect vertices around feature
+function connectVertices({
+  vertices,
+  startingVertex,
+  featureIds,
+  featureId
+}: {
+  vertices: IGraphVertices;
+  startingVertex: number;
+  featureIds: Uint16Array;
+  featureId: number;
+}) {
+  const ofSameType = (cellId: number) => featureIds[cellId] === featureId;
+  const chain: number[] = []; // vertices chain to form a path
+
+  let next = startingVertex;
+  for (let i = 0; i === 0 || (next !== startingVertex && i < CONNECT_VERTICES_MAX_ITERATIONS); i++) {
+    const previous = chain.at(-1);
+    const current = next;
+    chain.push(current);
+
+    const [c1, c2, c3] = vertices.c[current].map(ofSameType);
+    const [v1, v2, v3] = vertices.v[current];
+
+    if (v1 !== previous && c1 !== c2) next = v1;
+    else if (v2 !== previous && c2 !== c3) next = v2;
+    else if (v3 !== previous && c1 !== c3) next = v3;
+
+    if (next === current) {
+      ERROR && console.error("Next vertex is not found");
+      break;
+    }
+  }
+
+  return chain;
+}

src/scripts/generation/generation.ts

@@ -5,7 +5,7 @@ import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
 import {initLayers, restoreLayers} from "layers";
 // @ts-expect-error js module
-import {drawCoastline} from "modules/coastline";
+import {drawCoastline} from "layers/renderers/drawCoastline";
 // @ts-expect-error js module
 import {drawScaleBar, Rulers} from "modules/measurers";
 // @ts-expect-error js module
@@ -29,6 +29,7 @@ import {showStatistics} from "../statistics";
 import {createGrid} from "./grid";
 import {createPack} from "./pack";
 import {getInputValue, setInputValue} from "utils/nodeUtils";
+// import {Ruler} from "modules/measurers";
 
 const {Zoom, ThreeD} = window;
 
@@ -56,6 +57,8 @@ async function generate(options?: IGenerationOptions) {
     const newGrid = await createGrid(grid, precreatedGraph);
     const newPack = createPack(newGrid);
 
+    // TODO: draw default ruler
+
     // redefine global grid and pack
     grid = newGrid;
     pack = newPack;

src/scripts/generation/pack.ts

@@ -2,7 +2,7 @@ import * as d3 from "d3";
 
 import {renderLayer} from "layers";
 // @ts-expect-error js module
-import {drawCoastline} from "modules/coastline";
+import {drawCoastline} from "layers/renderers/drawCoastline";
 import {markupPackFeatures} from "modules/markup";
 // @ts-expect-error js module
 import {drawScaleBar} from "modules/measurers";
@@ -24,6 +24,8 @@ export function createPack(grid: IGrid): IPack {
 
   const markup = markupPackFeatures(grid, vertices, pick(cells, "v", "c", "b", "p", "h"));
 
+  renderLayer("coastline", vertices, markup.features);
+
   // drawCoastline({vertices, cells}); // split into vertices definition and rendering
 
   // Rivers.generate(newPack, grid);
@@ -131,3 +133,6 @@ function repackGrid(grid: IGrid) {
   TIME && console.timeEnd("repackGrid");
   return pack;
 }
+function drawLayer(arg0: string, vertices: IGraphVertices, features: TPackFeatures) {
+  throw new Error("Function not implemented.");
+}

src/scripts/simplify.ts

@@ -0,0 +1,100 @@
+/*
+ (c) 2017, Vladimir Agafonkin
+ Simplify.js, a high-performance JS polyline simplification library
+ mourner.github.io/simplify-js
+*/
+
+// square distance between 2 points
+function getSqDist([x1, y1]: TPoint, [x2, y2]: TPoint) {
+  const dx = x1 - x2;
+  const dy = y1 - y2;
+
+  return dx * dx + dy * dy;
+}
+
+// square distance from a point to a segment
+function getSqSegDist([x1, y1]: TPoint, [x, y]: TPoint, [x2, y2]: TPoint) {
+  let dx = x2 - x;
+  let dy = y2 - y;
+
+  if (dx !== 0 || dy !== 0) {
+    const t = ((x1 - x) * dx + (y1 - y) * dy) / (dx * dx + dy * dy);
+
+    if (t > 1) {
+      x = x2;
+      y = y2;
+    } else if (t > 0) {
+      x += dx * t;
+      y += dy * t;
+    }
+  }
+
+  dx = x1 - x;
+  dy = y1 - y;
+
+  return dx * dx + dy * dy;
+}
+// rest of the code doesn't care about point format
+
+// basic distance-based simplification
+function simplifyRadialDist(points: TPoints, sqTolerance: number) {
+  let prevPoint = points[0];
+  const newPoints = [prevPoint];
+  let point;
+
+  for (let i = 1, len = points.length; i < len; i++) {
+    point = points[i];
+
+    if (getSqDist(point, prevPoint) > sqTolerance) {
+      newPoints.push(point);
+      prevPoint = point;
+    }
+  }
+
+  if (point && prevPoint !== point) newPoints.push(point);
+
+  return newPoints;
+}
+
+function simplifyDPStep(points: TPoints, first: number, last: number, sqTolerance: number, simplified: TPoints) {
+  let maxSqDist = sqTolerance;
+  let index = first;
+
+  for (let i = first + 1; i < last; i++) {
+    const sqDist = getSqSegDist(points[i], points[first], points[last]);
+
+    if (sqDist > maxSqDist) {
+      index = i;
+      maxSqDist = sqDist;
+    }
+  }
+
+  if (maxSqDist > sqTolerance) {
+    if (index - first > 1) simplifyDPStep(points, first, index, sqTolerance, simplified);
+    simplified.push(points[index]);
+    if (last - index > 1) simplifyDPStep(points, index, last, sqTolerance, simplified);
+  }
+}
+
+// simplification using Ramer-Douglas-Peucker algorithm
+function simplifyDouglasPeucker(points: TPoints, sqTolerance: number) {
+  const last = points.length - 1;
+
+  const simplified = [points[0]];
+  simplifyDPStep(points, 0, last, sqTolerance, simplified);
+  simplified.push(points[last]);
+
+  return simplified;
+}
+
+// both algorithms combined for awesome performance
+export function simplify(points: TPoints, tolerance: number, highestQuality = false) {
+  if (points.length <= 2) return points;
+
+  const sqTolerance = tolerance * tolerance;
+
+  points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);
+  points = simplifyDouglasPeucker(points, sqTolerance);
+
+  return points;
+}