refactor: drawCoastline and createDefaultRuler

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");
+}