Merge pull request #3352 from plotly/one-more-contour-label-reversed-ax-fix

Adapt contour label clipPath segments for reversed axes

Author: etpinard

src/traces/contour/plot.js

@@ -240,8 +240,7 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
         .classed('contourlabels', true);
 
     if(showLabels) {
-        var labelClipPathData = [perimeter];
-
+        var labelClipPathData = [];
         var labelData = [];
 
         // invalidate the getTextLocation cache in case paths changed
@@ -287,6 +286,13 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
         bounds.middle = (bounds.top + bounds.bottom) / 2;
         bounds.center = (bounds.left + bounds.right) / 2;
 
+        labelClipPathData.push([
+            [bounds.left, bounds.top],
+            [bounds.right, bounds.top],
+            [bounds.right, bounds.bottom],
+            [bounds.left, bounds.bottom]
+        ]);
+
         var plotDiagonal = Math.sqrt(xLen * xLen + yLen * yLen);
 
         // the path length to use to scale the number of labels to draw:

test/image/baselines/contour_label-reversed-axes.png

@@ -3,21 +3,61 @@
     {
       "type": "contour",
       "z": [
-        [1, 2, 1],
-        [2, 1, 2],
-        [2, 1, 2]
+        [1, 2, 3],
+        [2, 0, 0],
+        [3, 0, 3]
       ],
-      "contours": {
-        "showlabels": true
-      }
+      "contours": {"showlabels": true},
+      "showscale": false
+    },
+    {
+      "type": "contour",
+      "z": [
+        [1, 2, 3],
+        [2, 0, 0],
+        [3, 0, 3]
+      ],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "type": "contour",
+      "z": [
+        [1, 2, 3],
+        [2, 0, 0],
+        [3, 0, 3]
+      ],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "type": "contour",
+      "z": [
+        [1, 2, 3],
+        [2, 0, 0],
+        [3, 0, 3]
+      ],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x4",
+      "yaxis": "y4"
     }
   ],
   "layout": {
-    "yaxis": {
-      "autorange": "reversed"
-    },
-    "xaxis": {
-      "autorange": "reversed"
-    }
+    "grid": {"rows": 2, "columns": 2, "pattern": "independent"},
+
+    "xaxis": {"autorange": "reversed"},
+    "yaxis": {"autorange": "reversed"},
+
+    "xaxis2": {"autorange": "reversed"},
+
+    "yaxis3": {"autorange": "reversed"},
+
+    "xaxis4": {"range": [2.05, -0.05]},
+    "yaxis4": {"range": [2.2, -0.2]}
   }
 }