pull path measurement routines out into Lib

Author: alexcjohnson

src/lib/geometry2d.js

@@ -8,6 +8,8 @@
 
 'use strict';
 
+var mod = require('./mod');
+
 /*
  * look for intersection of two line segments
  *   (1->2 and 3->4) - returns array [x,y] if they do, null if not
@@ -81,3 +83,94 @@ function perpDistance2(xab, yab, l2_ab, xac, yac) {
         return crossProduct * crossProduct / l2_ab;
     }
 }
+
+// a very short-term cache for getTextLocation, just because
+// we're often looping over the same locations multiple times
+// invalidated as soon as we look at a different path
+var locationCache, workingPath, workingTextWidth;
+
+// turn a path and position along it into x, y, and angle for the given text
+exports.getTextLocation = function getTextLocation(path, totalPathLen, positionOnPath, textWidth) {
+    if(path !== workingPath || textWidth !== workingTextWidth) {
+        locationCache = {};
+        workingPath = path;
+        workingTextWidth = textWidth;
+    }
+    if(locationCache[positionOnPath]) {
+        return locationCache[positionOnPath];
+    }
+
+    // for the angle, use points on the path separated by the text width
+    // even though due to curvature, the text will cover a bit more than that
+    var p0 = path.getPointAtLength(mod(positionOnPath - textWidth / 2, totalPathLen));
+    var p1 = path.getPointAtLength(mod(positionOnPath + textWidth / 2, totalPathLen));
+    // note: atan handles 1/0 nicely
+    var theta = Math.atan((p1.y - p0.y) / (p1.x - p0.x));
+    // center the text at 2/3 of the center position plus 1/3 the p0/p1 midpoint
+    // that's the average position of this segment, assuming it's roughly quadratic
+    var pCenter = path.getPointAtLength(mod(positionOnPath, totalPathLen));
+    var x = (pCenter.x * 4 + p0.x + p1.x) / 6;
+    var y = (pCenter.y * 4 + p0.y + p1.y) / 6;
+
+    var out = {x: x, y: y, theta: theta};
+    locationCache[positionOnPath] = out;
+    return out;
+};
+
+exports.clearLocationCache = function() {
+    workingPath = null;
+};
+
+/*
+ * Find the segment of `path` that's within the visible area
+ * given by `bounds` {left, right, top, bottom}, to within a
+ * precision of `buffer` px
+ *
+ * returns {
+ *   min: position where the path first enters bounds, or 0 if it
+ *        starts within bounds
+ *   max: position where the path last exits bounds, or the path length
+ *        if it finishes within bounds
+ *   total: the total path length - just included so the caller doesn't
+ *        need to call path.getTotalLength() again
+ * }
+ *
+ * Works by starting from either end and repeatedly finding the distance from
+ * that point to the plot area, and if it's outside the plot, moving along the
+ * path by that distance (because the plot must be at least that far away on
+ * the path). Note that if a path enters, exits, and re-enters the plot, we
+ * will not capture this behavior.
+ */
+exports.getVisibleSegment = function getVisibleSegment(path, bounds, buffer) {
+    var left = bounds.left;
+    var right = bounds.right;
+    var top = bounds.top;
+    var bottom = bounds.bottom;
+
+    function getDistToPlot(len) {
+        var pt = path.getPointAtLength(len);
+        var dx = (pt.x < left) ? left - pt.x : (pt.x > right ? pt.x - right : 0);
+        var dy = (pt.y < top) ? top - pt.y : (pt.y > bottom ? pt.y - bottom : 0);
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    var pMin = 0;
+    var pTotal = path.getTotalLength();
+    var pMax = pTotal;
+
+    var distToPlot = getDistToPlot(pMin);
+    while(distToPlot) {
+        pMin += distToPlot + buffer;
+        if(pMin > pMax) return;
+        distToPlot = getDistToPlot(pMin);
+    }
+
+    distToPlot = getDistToPlot(pMax);
+    while(distToPlot) {
+        pMax -= distToPlot + buffer;
+        if(pMin > pMax) return;
+        distToPlot = getDistToPlot(pMax);
+    }
+
+    return {min: pMin, max: pMax, total: pTotal};
+};

src/lib/index.js

@@ -77,6 +77,9 @@ lib.apply2DTransform2 = matrixModule.apply2DTransform2;
 var geom2dModule = require('./geometry2d');
 lib.segmentsIntersect = geom2dModule.segmentsIntersect;
 lib.segmentDistance = geom2dModule.segmentDistance;
+lib.getTextLocation = geom2dModule.getTextLocation;
+lib.clearLocationCache = geom2dModule.clearLocationCache;
+lib.getVisibleSegment = geom2dModule.getVisibleSegment;
 
 var extendModule = require('./extend');
 lib.extendFlat = extendModule.extendFlat;

src/traces/contour/plot.js

@@ -82,7 +82,7 @@ function plotOne(gd, plotinfo, cd) {
     var plotGroup = makeContourGroup(plotinfo, cd, id);
     makeBackground(plotGroup, perimeter, contours);
     makeFills(plotGroup, pathinfo, perimeter, contours);
-    makeLines(plotGroup, pathinfo, gd, cd[0], contours, perimeter);
+    makeLinesAndLabels(plotGroup, pathinfo, gd, cd[0], contours, perimeter);
     clipGaps(plotGroup, plotinfo, fullLayout._defs, cd[0], perimeter);
 }
 
@@ -263,7 +263,7 @@ function joinAllPaths(pi, perimeter) {
 
 var TRAILING_ZEROS = /\.?0+$/;
 
-function makeLines(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
+function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
     var defs = gd._fullLayout._defs;
 
     var smoothing = pathinfo[0].smoothing;
@@ -329,6 +329,9 @@ function makeLines(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
 
         var labelData = [];
 
+        // invalidate the getTextLocation cache in case paths changed
+        Lib.clearLocationCache();
+
         var contourFormat;
         if(contours.labelformat) {
             contourFormat = d3.format(contours.labelformat);
@@ -352,8 +355,21 @@ function makeLines(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
             .attr('data-notex', 1)
             .call(Drawing.font, contours.font);
 
-        var plotDiagonal = Math.sqrt(Math.pow(pathinfo[0].xaxis._length, 2) +
-            Math.pow(pathinfo[0].yaxis._length, 2));
+        var xLen = pathinfo[0].xaxis._length;
+        var yLen = pathinfo[0].yaxis._length;
+
+        // visible bounds of the contour trace (and the midpoints, to
+        // help with cost calculations)
+        var bounds = {
+            left: Math.max(perimeter[0][0], 0),
+            right: Math.min(perimeter[2][0], xLen),
+            top: Math.max(perimeter[0][1], 0),
+            bottom: Math.min(perimeter[2][1], yLen)
+        };
+        bounds.middle = (bounds.top + bounds.bottom) / 2;
+        bounds.center = (bounds.left + bounds.right) / 2;
+
+        var plotDiagonal = Math.sqrt(xLen * xLen + yLen * yLen);
 
         // the path length to use to scale the number of labels to draw:
         var normLength = plotDiagonal /
@@ -470,24 +486,6 @@ function addLabel(loc, textOpts, labelData) {
     return straightClosedPath(bBoxPts);
 }
 
-function getLocation(path, pathLen, positionOnPath, textOpts) {
-    var halfWidth = textOpts.width / 2;
-
-    // for the angle, use points on the path separated by the text width
-    // even though due to curvature, the text will cover a bit more than that
-    var p0 = path.getPointAtLength(Lib.mod(positionOnPath - halfWidth, pathLen));
-    var p1 = path.getPointAtLength(Lib.mod(positionOnPath + halfWidth, pathLen));
-    // note: atan handles 1/0 nicely
-    var theta = Math.atan((p1.y - p0.y) / (p1.x - p0.x));
-    // center the text at 2/3 of the center position plus 1/3 the p0/p1 midpoint
-    // that's the average position of this segment, assuming it's roughly quadratic
-    var pCenter = path.getPointAtLength(positionOnPath);
-    var x = (pCenter.x * 4 + p0.x + p1.x) / 6;
-    var y = (pCenter.y * 4 + p0.y + p1.y) / 6;
-
-    return {x: x, y: y, theta: theta};
-}
-
 function clipGaps(plotGroup, plotinfo, defs, cd0, perimeter) {
     var clipId = 'clip' + cd0.trace.uid;