v1.6.03 - linear ruler: getSegmentId

index.css

@@ -1763,6 +1763,7 @@ rect.fillRect {
 
 #ruler .gray {
 	stroke: #3d3d3d;
+	pointer-events: none;
 }
 
 #ruler text {

index.html

@@ -1423,7 +1423,7 @@
           <i data-locked=0 id="lock_temperatureEquator" class="icon-lock-open"></i>
           <label data-tip="Set temperature at equator">
             <i>Equator:</i>
-            <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-30" max="30">°C =
+            <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50">°C =
             <span id="temperatureEquatorF"></span>°F
             <input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-30" max="30"/>
           </label>
@@ -1432,7 +1432,7 @@
           <i data-locked=0 id="lock_temperaturePole" class="icon-lock-open"></i>
           <label data-tip="Set temperature near poles">
             <i>Poles:</i>
-            <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-30" max="30">°C =
+            <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50">°C =
             <span id="temperaturePoleF"></span>°F
             <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-30" max="30"/>
           </label>

modules/ui/measurers.js

@@ -32,7 +32,8 @@ class Ruler {
     const dash = rn(30 / distanceScaleInput.value, 2);
 
     const el = this.el = ruler.append("g").attr("class", "ruler").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size)
-    el.append("polyline").attr("points", points).attr("class", "white").attr("stroke-width", size);
+    el.append("polyline").attr("points", points).attr("class", "white").attr("stroke-width", size)
+      .call(d3.drag().on("start", () => this.addControl(this)));
     el.append("polyline").attr("points", points).attr("class", "gray").attr("stroke-width", rn(size * 1.2, 2)).attr("stroke-dasharray", dash);
     el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size);
     el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", this.remove);
@@ -115,6 +116,16 @@ class Ruler {
     });
   }
 
+  addControl(context) {
+    const x = rn(d3.event.x, 1);
+    const y = rn(d3.event.y, 1);
+    const pointId = getSegmentId(context.points, [x, y]);
+
+    context.points.splice(pointId, 0, [x, y]);
+    context.renderPoints(context.el);
+    context.dragControl(context, pointId);
+  }
+
   removePoint(context, pointId) {
     this.points.splice(pointId, 1);
     if (this.points.length < 2) context.el.remove();

modules/utils.js

@@ -358,6 +358,38 @@ void function addFindAll() {
   }
 }()
 
+// get segment of any point on polyline
+function getSegmentId(points, point) {
+  if (points.length === 2) return 1;
+  const d2 = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
+
+  let minSegment = 1;
+  let minDist = Infinity;
+
+  for (let i=0; i < points.length-1; i++) {
+    const p1 = points[i];
+    const p2 = points[i+1];
+
+    const length = Math.sqrt(d2(p1, p2));
+    const segments = Math.ceil(length / 10);
+    const dx = (p2[0] - p1[0]) / segments;
+    const dy = (p2[1] - p1[1]) / segments;
+
+    for (let s=0; s < segments; s++) {
+      const x = p1[0] + s * dx;
+      const y = p1[1] + s * dy;
+      const dist2 = d2(point, [x, y]);
+
+      if (dist2 >= minDist) continue;
+      minDist = dist2;
+      minSegment = i+1;
+    }
+  }
+
+  console.log(minSegment);
+  return minSegment;
+}
+
 // normalization function
 function normalize(val, min, max) {
   return Math.min(Math.max((val - min) / (max - min), 0), 1);