Merge branch 'master' of https://github.com/Azgaar/Fantasy-Map-Generator

modules/ui/measurers.js

@@ -20,8 +20,9 @@ class Rulers {
     for (const rulerString of rulers) {
       const [type, pointsString] = rulerString.split(": ");
       const points = pointsString.split(" ").map(el => el.split(",").map(n => +n));
-      const Type = type === "Ruler" ? Ruler : 
+      const Type = type === "Ruler" ? Ruler :
                    type === "Opisometer" ? Opisometer :
+                   type === "RouteOpisometer" ? RouteOpisometer :
                    type === "Planimeter" ? Planimeter : null;
       this.create(Type, points);
     }
@@ -306,6 +307,112 @@ class Opisometer extends Measurer {
   }
 }
 
+class RouteOpisometer extends Measurer {
+  constructor(points) {
+    super(points);
+    if (pack.cells) {
+      this.cellStops = points.map(p => findCell(p[0], p[1]));
+    } else {
+      this.cellStops = null;
+    }
+  }
+
+  checkCellStops() {
+    if (!this.cellStops) {
+      this.cellStops = this.points.map(p => findCell(p[0], p[1]));
+    }
+  }
+
+  trackCell(cell, rigth) {
+    this.checkCellStops();
+    const cellStops = this.cellStops;
+    const foundIndex = cellStops.indexOf(cell);
+    if (rigth) {
+      if (last(cellStops) === cell) {
+        return;
+      } else if (cellStops.length > 1 && foundIndex != -1) {
+        cellStops.splice(foundIndex + 1);
+        this.points.splice(foundIndex + 1);
+      } else {
+        cellStops.push(cell);
+        this.points.push(this.getCellRouteCoord(cell));
+      }
+    } else {
+      if (cellStops[0] === cell) {
+        return;
+      } else if (cellStops.length > 1 && foundIndex != -1) {
+        cellStops.splice(0, foundIndex);
+        this.points.splice(0, foundIndex);
+      } else {
+        cellStops.unshift(cell);
+        this.points.unshift(this.getCellRouteCoord(cell));
+      }
+    }
+    this.updateCurve();
+    this.updateLabel();
+  }
+
+  getCellRouteCoord(c) {
+    const cells = pack.cells;
+    const burgs = pack.burgs;
+    const b = cells.burg[c];
+    const x = b ? burgs[b].x : cells.p[c][0];
+    const y = b ? burgs[b].y : cells.p[c][1];
+    return [x, y];
+  }
+
+  draw() {
+    if (this.el) this.el.selectAll("*").remove();
+    const size = this.getSize();
+    const dash = this.getDash();
+    const context = this;
+
+    const el = this.el = ruler.append("g").attr("class", "opisometer").attr("font-size", 10 * size);
+    el.append("path").attr("class", "white").attr("stroke-width", size);
+    el.append("path").attr("class", "gray").attr("stroke-width", size).attr("stroke-dasharray", dash);
+    const rulerPoints = el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size);
+    rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 0)}));
+    rulerPoints.append("circle").attr("r", "1em").call(d3.drag().on("start", function() {context.dragControl(context, 1)}));
+    el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", () => rulers.remove(this.id));
+
+    this.updateCurve();
+    this.updateLabel();
+    return this;
+  }
+
+  updateCurve() {
+    lineGen.curve(d3.curveCatmullRom.alpha(.5));
+    const path = round(lineGen(this.points));
+    this.el.selectAll("path").attr("d", path);
+
+    const left = this.points[0];
+    const right = last(this.points);
+    this.el.select(".rulerPoints > circle:first-child").attr("cx", left[0]).attr("cy", left[1]);
+    this.el.select(".rulerPoints > circle:last-child").attr("cx", right[0]).attr("cy", right[1]);
+  }
+
+  updateLabel() {
+    const length = this.el.select("path").node().getTotalLength();
+    const text = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
+    const [x, y] = last(this.points);
+    this.el.select("text").attr("x", x).attr("y", y).text(text);
+  }
+
+  dragControl(context, rigth) {
+    d3.event.on("drag", function() {
+      const mousePoint = [d3.event.x | 0, d3.event.y | 0];
+      const cells = pack.cells;
+
+      const c = findCell(mousePoint[0], mousePoint[1]);
+      if (!cells.road[c] && !d3.event.sourceEvent.shiftKey) {
+        return;
+      }
+
+      context.trackCell(c, rigth);
+    });
+  }
+}
+
 class Planimeter extends Measurer {
   constructor(points) {
     super(points);
@@ -393,4 +500,4 @@ function fitScaleBar() {
   const bbox = scaleBar.select("rect").node().getBBox();
   const x = rn(svgWidth * px - bbox.width + 10), y = rn(svgHeight * py - bbox.height + 20);
   scaleBar.attr("transform", `translate(${x},${y})`);
-}
+}

modules/ui/units-editor.js

@@ -35,6 +35,7 @@ function editUnits() {
 
   document.getElementById("addLinearRuler").addEventListener("click", addRuler);
   document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
+  document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
   document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode);
   document.getElementById("removeRulers").addEventListener("click", removeAllRulers);
   document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits);
@@ -177,7 +178,7 @@ function editUnits() {
     heightExponentInput.value = heightExponentOutput.value = 1.8;
     localStorage.removeItem("heightExponent");
     calculateTemperatures();
-    
+
     // scale bar
     barSizeOutput.value = barSize.value = 2;
     barLabel.value = "";
@@ -242,6 +243,53 @@ function editUnits() {
     }
   }
 
+  function toggleRouteOpisometerMode() {
+    if (this.classList.contains("pressed")) {
+      restoreDefaultEvents();
+      clearMainTip();
+      this.classList.remove("pressed");
+    } else {
+      if (!layerIsOn("toggleRulers")) toggleRulers();
+      tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true);
+      unitsBottom.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
+      this.classList.add("pressed");
+      viewbox.style("cursor", "crosshair").call(d3.drag().on("start", function() {
+        const cells = pack.cells;
+        const burgs = pack.burgs;
+        const point = d3.mouse(this);
+        const c = findCell(point[0], point[1]);
+        if (cells.road[c] || d3.event.sourceEvent.shiftKey) {
+          const b = cells.burg[c];
+          const x = b ? burgs[b].x : cells.p[c][0];
+          const y = b ? burgs[b].y : cells.p[c][1];
+          const routeOpisometer = rulers.create(RouteOpisometer, [[x, y]]).draw();
+
+          d3.event.on("drag", function () {
+            const point = d3.mouse(this);
+            const c = findCell(point[0], point[1]);
+            if (cells.road[c] || d3.event.sourceEvent.shiftKey) {
+              routeOpisometer.trackCell(c, true);
+            }
+          });
+
+          d3.event.on("end", function () {
+            restoreDefaultEvents();
+            clearMainTip();
+            addRouteOpisometer.classList.remove("pressed");
+            if (routeOpisometer.points.length < 2) {
+              rulers.remove(routeOpisometer.id);
+            }
+          });
+        } else {
+          restoreDefaultEvents();
+          clearMainTip();
+          addRouteOpisometer.classList.remove("pressed");
+          tip("Must start in a cell with a route in it", false, "error");
+        }
+      }));
+    }
+  }
+
   function togglePlanimeterMode() {
     if (this.classList.contains("pressed")) {
       restoreDefaultEvents();