Added RouteOpisometer and related changes. (#606)

* Added RouteOpisometer and related changes.

* Changed RouteOpisometer.cellStops to act like a set and prevent repeats. Also allow holding shift to go off-road while drawing it.

* Fixes for review comments
Reverted icons.css to master
Removed index.html/icon-route class and modified size for SVG icon on button
Refactored RouteOpisometer.trackCell so that duplicate code is pulled outside of if blocks

* My editor ate the space at the end of the line from "like in " on the temperature display. I put it back.

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