refactor: drawCoastline and createDefaultRuler

modules/dynamic/auto-update.js

@@ -201,7 +201,10 @@ export function resolveVersionConflicts(mapVersion) {
     defs.select("#water").selectAll("path").remove();
     coastline.selectAll("path").remove();
     lakes.selectAll("path").remove();
+
+    reMarkFeatures();
     drawCoastline();
+    createDefaultRuler();
   }
 
   if (isOlderThan("1.11.0")) {
@@ -940,12 +943,12 @@ export function resolveVersionConflicts(mapVersion) {
     if (layerIsOn("toggleZones")) drawZones();
   }
 
-  if (isOlderThan("1.103.0")) {
-    // v1.103.00 separated pole of inaccessibility detection from layer rendering
+  if (isOlderThan("1.104.0")) {
+    // v1.104.00 separated pole of inaccessibility detection from layer rendering
     BurgsAndStates.getPoles();
     Provinces.getPoles();
 
-    // v1.103.00 removed regiments from initial render
+    // v1.104.00 removed regiments from initial render
     viewbox.select("#armies").style("display", null);
   }
 }

modules/io/load.js

@@ -462,7 +462,7 @@ async function parseLoadedData(data, mapVersion) {
 
     {
       // dynamically import and run auto-update script
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.104.00");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.104.0");
       resolveVersionConflicts(mapVersion);
     }
 

modules/renderers/draw-coastline.js

@@ -0,0 +1,127 @@
+"use strict";
+
+function drawCoastline() {
+  TIME && console.time("drawCoastline");
+
+  const {cells, vertices, features} = pack;
+  const n = cells.i.length;
+
+  const used = new Uint8Array(features.length); // store connected features
+
+  const landMask = defs.select("#land");
+  const waterMask = defs.select("#water");
+  lineGen.curve(d3.curveBasisClosed);
+
+  for (const i of cells.i) {
+    const startFromEdge = !i && cells.h[i] >= 20;
+    if (!startFromEdge && cells.t[i] !== -1 && cells.t[i] !== 1) continue; // non-edge cell
+    const f = cells.f[i];
+    if (used[f]) continue; // already connected
+    if (features[f].type === "ocean") continue; // ocean cell
+
+    const type = features[f].type === "lake" ? 1 : -1; // type value to search for
+    const start = findStart(i, type);
+    if (start === -1) continue; // cannot start here
+    let vchain = connectVertices(start, type);
+    if (features[f].type === "lake") relax(vchain, 1.2);
+    used[f] = 1;
+    let points = clipPoly(
+      vchain.map(v => vertices.p[v]),
+      1
+    );
+    const area = d3.polygonArea(points); // area with lakes/islands
+    if (area > 0 && features[f].type === "lake") {
+      points = points.reverse();
+      vchain = vchain.reverse();
+    }
+
+    features[f].area = Math.abs(area);
+    features[f].vertices = vchain;
+
+    const path = round(lineGen(points));
+
+    if (features[f].type === "lake") {
+      landMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "black")
+        .attr("id", "land_" + f);
+      lakes
+        .select("#freshwater")
+        .append("path")
+        .attr("d", path)
+        .attr("id", "lake_" + f)
+        .attr("data-f", f); // draw the lake
+    } else {
+      landMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "white")
+        .attr("id", "land_" + f);
+      waterMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "black")
+        .attr("id", "water_" + f);
+      const g = features[f].group === "lake_island" ? "lake_island" : "sea_island";
+      coastline
+        .select("#" + g)
+        .append("path")
+        .attr("d", path)
+        .attr("id", "island_" + f)
+        .attr("data-f", f); // draw the coastline
+    }
+  }
+
+  // find cell vertex to start path detection
+  function findStart(i, t) {
+    if (t === -1 && cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
+    const filtered = cells.c[i].filter(c => cells.t[c] === t);
+    const index = cells.c[i].indexOf(d3.min(filtered));
+    return index === -1 ? index : cells.v[i][index];
+  }
+
+  // connect vertices to chain
+  function connectVertices(start, t) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 50000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      const v = vertices.v[current]; // neighboring vertices
+      const c0 = c[0] >= n || cells.t[c[0]] === t;
+      const c1 = c[1] >= n || cells.t[c[1]] === t;
+      const c2 = c[2] >= n || cells.t[c[2]] === t;
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
+
+  // move vertices that are too close to already added ones
+  function relax(vchain, r) {
+    const p = vertices.p,
+      tree = d3.quadtree();
+
+    for (let i = 0; i < vchain.length; i++) {
+      const v = vchain[i];
+      let [x, y] = [p[v][0], p[v][1]];
+      if (i && vchain[i + 1] && tree.find(x, y, r) !== undefined) {
+        const v1 = vchain[i - 1],
+          v2 = vchain[i + 1];
+        const [x1, y1] = [p[v1][0], p[v1][1]];
+        const [x2, y2] = [p[v2][0], p[v2][1]];
+        [x, y] = [(x1 + x2) / 2, (y1 + y2) / 2];
+        p[v] = [x, y];
+      }
+      tree.add([x, y]);
+    }
+  }
+
+  TIME && console.timeEnd("drawCoastline");
+}

modules/submap.js

@@ -130,13 +130,12 @@ window.Submap = (function () {
 
     // remove misclassified cells
     stage("Define coastline");
+    reMarkFeatures();
     drawCoastline();
+    createDefaultRuler();
 
-    /****************************************************/
-    /* Packed Graph */
-    /****************************************************/
+    // Packed Graph
     const oldCells = parentMap.pack.cells;
-    // const reverseMap = new Map(); // cellmap from new -> oldcell
     const forwardMap = parentMap.pack.cells.p.map(_ => []); // old -> [newcelllist]
 
     const pn = pack.cells.i.length;

modules/ui/coastline-editor.js

@@ -1,4 +1,5 @@
 "use strict";
+
 function editCoastline(node = d3.event.target) {
   if (customization) return;
   closeDialogs(".stable");
@@ -55,7 +56,9 @@ function editCoastline(node = d3.event.target) {
       .attr("r", 0.4)
       .attr("data-v", d => d)
       .call(d3.drag().on("drag", dragVertex))
-      .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
+      .on("mousemove", () =>
+        tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")
+      );
 
     const area = pack.features[f].area;
     coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
@@ -72,6 +75,7 @@ function editCoastline(node = d3.event.target) {
       .select("#vertices")
       .selectAll("polygon")
       .attr("points", d => getPackPolygon(d));
+
     redrawCoastline();
   }
 

modules/ui/editors.js

@@ -1252,18 +1252,18 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js?v=1.104.00");
+  const Editor = await import("../dynamic/editors/states-editor.js?v=1.104.0");
   Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.104.00");
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.104.0");
   Editor.open();
 }
 
 async function editReligions() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.104.00");
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.104.0");
   Editor.open();
 }

modules/ui/heightmap-editor.js

@@ -225,6 +225,7 @@ function editHeightmap(options) {
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
+    reMarkFeatures();
     drawCoastline();
 
     Rivers.generate(erosionAllowed);
@@ -343,6 +344,7 @@ function editHeightmap(options) {
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
+    reMarkFeatures();
     drawCoastline();
 
     if (erosionAllowed) Rivers.generate(true);

modules/ui/layers.js

@@ -186,6 +186,7 @@ function restoreLayers() {
   if (layerIsOn("toggleStates")) drawStates();
   if (layerIsOn("toggleRivers")) drawRivers();
   if (layerIsOn("toggleMilitary")) drawMilitary();
+  if (layerIsOn("toggleRulers")) rulers.draw();
 }
 
 function toggleHeight(event) {

modules/ui/measurers.js

@@ -530,3 +530,32 @@ class Planimeter extends Measurer {
     this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
   }
 }
+
+function createDefaultRuler() {
+  TIME && console.time("createDefaultRuler");
+  const {features, vertices} = pack;
+
+  const areas = features.map(f => (f.land ? f.area || 0 : -Infinity));
+  const largestLand = areas.indexOf(Math.max(...areas));
+  const featureVertices = features[largestLand].vertices;
+
+  const MIN_X = 100;
+  const MAX_X = graphWidth - 100;
+  const MIN_Y = 100;
+  const MAX_Y = graphHeight - 100;
+
+  let leftmostVertex = [graphWidth - MIN_X, graphHeight / 2];
+  let rightmostVertex = [MIN_X, graphHeight / 2];
+
+  for (const vertex of featureVertices) {
+    const [x, y] = vertices.p[vertex];
+    if (y < MIN_Y || y > MAX_Y) continue;
+    if (x < leftmostVertex[0] && x >= MIN_X) leftmostVertex = [x, y];
+    if (x > rightmostVertex[0] && x <= MAX_X) rightmostVertex = [x, y];
+  }
+
+  rulers = new Rulers();
+  rulers.create(Ruler, [leftmostVertex, rightmostVertex]);
+
+  TIME && console.timeEnd("createDefaultRuler");
+}