v1.6.21 - ruler behavior change

modules/ui/general.js

@@ -88,7 +88,6 @@ function showNotes(e, i) {
 // show viewbox tooltip if main tooltip is blank
 function showMapTooltip(point, e, i, g) {
   tip(""); // clear tip
-  const tag = e.target.tagName;
   const path = e.composedPath ? e.composedPath() : getComposedPath(e.target); // apply polyfill
   if (!path[path.length - 8]) return;
   const group = path[path.length - 7].id;
@@ -138,9 +137,13 @@ function showMapTooltip(point, e, i, g) {
   if (group === "labels") {tip("Click to edit the Label"); return;}
   if (group === "markers") {tip("Click to edit the Marker"); return;}
   if (group === "ruler") {
+    const tag = e.target.tagName;
+    const className = e.target.getAttribute("class");
+    if (tag === "circle" && className === "edge") {tip("Drag to adjust. Hold Ctrl and drag to add a point. Click to remove the point"); return;}
+    if (tag === "circle" && className === "control") {tip("Drag to adjust. Hold Shifta and drag to keep axial direction. Click to remove the point"); return;}
     if (tag === "circle") {tip("Drag to adjust the measurer"); return;}
+    if (tag === "polyline") {tip("Click on drag to add a control point"); return;}
     if (tag === "path") {tip("Drag to move the measurer"); return;}
-    if (tag === "polyline") {tip("Drag to add a control point"); return;}
     if (tag === "text") {tip("Drag to move, click to remove the measurer"); return;}
   }
   if (subgroup === "burgIcons") {tip("Click to edit the Burg"); return;}

modules/ui/measurers.js

@@ -158,12 +158,11 @@ class Ruler extends Measurer {
 
   drawPoint(el, x, y, i) {
     const context = this;
-    const circle = el.append("circle")
+    el.append("circle")
       .attr("r", "1em").attr("cx", x).attr("cy", y)
+      .attr("class", this.isEdge(i) ? "edge" : "control")
       .on("click", function() {context.removePoint(context, i)})
       .call(d3.drag().clickDistance(3).on("start", function() {context.dragControl(context, i)}));
-
-    if (!this.isEdge(i)) circle.attr("class", "control");
   }
 
   isEdge(i) {
@@ -188,7 +187,7 @@ class Ruler extends Measurer {
   }
 
   dragControl(context, pointId) {
-    let edge = context.isEdge(pointId)
+    let addPoint = context.isEdge(pointId) && d3.event.sourceEvent.ctrlKey;
     let circle = context.el.select(`circle:nth-child(${pointId+1})`);
     const line = context.el.selectAll("polyline");
 
@@ -197,13 +196,13 @@ class Ruler extends Measurer {
     let axis;
 
     d3.event.on("drag", function() {
-      if (edge) {
+      if (addPoint) {
         if (d3.event.dx < .1 && d3.event.dy < .1) return;
         context.pushPoint(pointId);
         context.drawPoints(context.el);
         if (pointId) pointId++;
         circle = context.el.select(`circle:nth-child(${pointId+1})`);
-        edge = false;
+        addPoint = false;
       }
 
       const shiftPressed = d3.event.sourceEvent.shiftKey;
@@ -236,9 +235,9 @@ class Ruler extends Measurer {
   }
 
   removePoint(context, pointId) {
+    if (this.points.length < 3) return;
     this.points.splice(pointId, 1);
-    if (this.points.length < 2) context.el.remove();
-    else context.draw();
+    context.draw();
   }
 }
 

modules/utils.js

@@ -386,7 +386,6 @@ function getSegmentId(points, point, step = 10) {
     }
   }
 
-  console.log(minSegment);
   return minSegment;
 }