diff --git a/index.html b/index.html
index e0e276138..a1cbff202 100644
--- a/index.html
+++ b/index.html
@@ -3099,6 +3099,11 @@
+
@@ -3438,6 +3443,10 @@
+
+
+
+
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index d248546d1..6f27a53bb 100644
--- a/modules/ui/measurers.js
+++ b/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})`);
-}
\ No newline at end of file
+}
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index eaf53ad16..9c47a0ef7 100644
--- a/modules/ui/units-editor.js
+++ b/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();