Implement cliponaxis: false for bar text

src/components/drawing/index.js

@@ -100,9 +100,11 @@ drawing.hideOutsideRangePoint = function(d, sel, xa, ya, xcalendar, ycalendar) {
     );
 };
 
-drawing.hideOutsideRangePoints = function(traceGroups, subplot) {
+drawing.hideOutsideRangePoints = function(traceGroups, subplot, selector) {
     if(!subplot._hasClipOnAxisFalse) return;
 
+    selector = selector || '.point,textpoint';
+
     var xa = subplot.xaxis;
     var ya = subplot.yaxis;
 
@@ -111,7 +113,7 @@ drawing.hideOutsideRangePoints = function(traceGroups, subplot) {
         var xcalendar = trace.xcalendar;
         var ycalendar = trace.ycalendar;
 
-        traceGroups.selectAll('.point,.textpoint').each(function(d) {
+        traceGroups.selectAll(selector).each(function(d) {
             drawing.hideOutsideRangePoint(d, d3.select(this), xa, ya, xcalendar, ycalendar);
         });
     });

src/plot_api/subroutines.js

@@ -216,7 +216,7 @@ exports.lsInner = function(gd) {
 
         for(i = 0; i < cartesianConstants.traceLayerClasses.length; i++) {
             var layer = cartesianConstants.traceLayerClasses[i];
-            if(layer !== 'scatterlayer') {
+            if(layer !== 'scatterlayer' && layer !== 'barlayer') {
                 plotinfo.plot.selectAll('g.' + layer).call(Drawing.setClipUrl, layerClipId);
             }
         }

src/plots/cartesian/dragbox.js

@@ -793,6 +793,9 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                 .call(Drawing.setTextPointsScale, xScaleFactor2, yScaleFactor2);
             traceGroups
                 .call(Drawing.hideOutsideRangePoints, subplot);
+
+            subplot.plot.selectAll('.barlayer .trace')
+                .call(Drawing.hideOutsideRangePoints, subplot, '.bartext');
         }
     }
 

src/traces/bar/attributes.js

@@ -104,6 +104,15 @@ module.exports = {
         ].join(' ')
     },
 
+    cliponaxis: extendFlat({}, scatterAttrs.cliponaxis, {
+        description: [
+            'Determines whether the text nodes',
+            'are clipped about the subplot axes.',
+            'To show the text nodes above axis lines and tick labels,',
+            'make sure to set `xaxis.layer` and `yaxis.layer` to *below traces*.'
+        ].join(' ')
+    }),
+
     orientation: {
         valType: 'enumerated',
         role: 'info',

src/traces/bar/defaults.js

@@ -51,6 +51,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         coerce('constraintext');
         coerce('selected.textfont.color');
         coerce('unselected.textfont.color');
+        coerce('cliponaxis');
     }
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);

src/traces/bar/plot.js

@@ -138,15 +138,26 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                     bar.append('path')
                         .style('vector-effect', 'non-scaling-stroke')
                         .attr('d',
-                            'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
+                            'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
+                        .call(Drawing.setClipUrl, plotinfo.layerClipId);
 
                     appendBarText(gd, bar, d, i, x0, x1, y0, y1);
+
+                    if(plotinfo.layerClipId) {
+                        Drawing.hideOutsideRangePoint(d[i], bar.select('text'), xa, ya, trace.xcalendar, trace.ycalendar);
+                    }
                 });
         });
 
     // error bars are on the top
     bartraces.call(ErrorBars.plot, plotinfo);
 
+    // lastly, clip points groups of `cliponaxis !== false` traces
+    // on `plotinfo._hasClipOnAxisFalse === true` subplots
+    bartraces.each(function(d) {
+        var hasClipOnAxisFalse = d[0].trace.cliponaxis === false;
+        Drawing.setClipUrl(d3.select(this), hasClipOnAxisFalse ? null : plotinfo.layerClipId);
+    });
 };
 
 function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {

test/image/mocks/bar_cliponaxis-false.json

@@ -0,0 +1,82 @@
+{
+  "data": [
+    {
+      "type": "bar",
+	  "name": "not clipped",
+      "x": ["apple", "banana", "clementine"],
+      "y": [1.9, 2, 2.1],
+      "text": ["apple", "banana", "x"],
+      "textposition": "outside",
+      "cliponaxis": false,
+      "textfont": {
+        "size": [60, 40, 20]
+      }
+    },
+    {
+      "type": "bar",
+	  "name": "same but clipped",
+      "x": ["apple", "banana", "clementine"],
+      "y": [1.9, 2, 2.1],
+      "text": ["apple", "banana", "clementine"],
+      "textposition": "outside",
+      "cliponaxis": true,
+      "textfont": {
+        "size": [60, 40, 20]
+      },
+	  "xaxis": "x2",
+	  "yaxis": "y2"
+    },
+    {
+      "type": "bar",
+	  "name": "should <b>not</b> see text",
+      "x": ["banana"],
+      "y": [2],
+      "text": ["X"],
+      "textposition": "outside",
+      "cliponaxis": true,
+      "textfont": {"size": [20]},
+	  "marker": {"opacity": 0.3}
+    }
+  ],
+  "layout": {
+	"barmode": "overlay",
+	"legend": {
+      "x": 0.5,
+      "xanchor": "center",
+      "y": -0.05,
+      "yanchor": "top"
+	},
+    "xaxis": {
+      "showline": true,
+      "showticklabels": false,
+      "mirror": true,
+      "layer": "below traces",
+	  "domain": [0, 0.48]
+    },
+    "xaxis2": {
+      "anchor": "y2",
+      "showline": true,
+      "showticklabels": false,
+      "mirror": true,
+      "layer": "below traces",
+	  "domain": [0.52, 1]
+    },
+    "yaxis": {
+      "showline": true,
+      "mirror": true,
+      "layer": "below traces",
+      "range": [0, 2]
+    },
+    "yaxis2": {
+      "anchor": "x2",
+      "showline": true,
+      "mirror": true,
+      "layer": "below traces",
+      "range": [0, 2]
+    },
+    "width": 700,
+    "height": 400,
+	"margin": {"t": 40},
+	"dragmode": "pan"
+  }
+}

test/jasmine/tests/bar_test.js

@@ -13,6 +13,10 @@ var fail = require('../assets/fail_test');
 var checkTicks = require('../assets/custom_assertions').checkTicks;
 var supplyAllDefaults = require('../assets/supply_defaults');
 
+var customAssertions = require('../assets/custom_assertions');
+var assertClip = customAssertions.assertClip;
+var assertNodeDisplay = customAssertions.assertNodeDisplay;
+
 var d3 = require('d3');
 
 describe('Bar.supplyDefaults', function() {
@@ -1509,6 +1513,96 @@ describe('bar hover', function() {
             .then(done);
         });
     });
+
+    it('should show/hide text in clipped and non-clipped layers', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/bar_cliponaxis-false.json'));
+        gd = createGraphDiv();
+
+        // only show one trace
+        fig.data = [fig.data[0]];
+
+        function _assert(layerClips, barDisplays, barTextDisplays, barClips) {
+            var subplotLayer = d3.select('.plot');
+            var barLayer = subplotLayer.select('.barlayer');
+
+            assertClip(subplotLayer, layerClips[0], 1, 'subplot layer');
+            assertClip(subplotLayer.select('.maplayer'), layerClips[1], 1, 'some other trace layer');
+            assertClip(barLayer, layerClips[2], 1, 'bar layer');
+
+            assertNodeDisplay(
+                barLayer.selectAll('.point'),
+                barDisplays,
+                'bar points (never hidden by display attr)'
+            );
+            assertNodeDisplay(
+                barLayer.selectAll('.bartext'),
+                barTextDisplays,
+                'bar text'
+            );
+
+            assertClip(
+                barLayer.selectAll('.point > path'),
+                barClips[0], barClips[1],
+                'bar clips'
+            );
+        }
+
+        Plotly.newPlot(gd, fig).then(function() {
+            _assert(
+                [false, true, false],
+                [null, null, null],
+                [null, null, 'none'],
+                [true, 3]
+            );
+            return Plotly.restyle(gd, 'visible', false);
+        })
+        .then(function() {
+            _assert(
+                [true, false, false],
+                [],
+                [],
+                [false, 0]
+            );
+            return Plotly.restyle(gd, {visible: true, cliponaxis: null});
+        })
+        .then(function() {
+            _assert(
+                [true, false, false],
+                [null, null, null],
+                [null, null, null],
+                [false, 3]
+            );
+            return Plotly.restyle(gd, 'cliponaxis', false);
+        })
+        .then(function() {
+            _assert(
+                [false, true, false],
+                [null, null, null],
+                [null, null, 'none'],
+                [true, 3]
+            );
+            return Plotly.relayout(gd, 'yaxis.range', [0, 1]);
+        })
+        .then(function() {
+            _assert(
+                [false, true, false],
+                [null, null, null],
+                ['none', 'none', 'none'],
+                [true, 3]
+            );
+            return Plotly.relayout(gd, 'yaxis.range', [0, 4]);
+        })
+        .then(function() {
+            _assert(
+                [false, true, false],
+                [null, null, null],
+                [null, null, null],
+                [true, 3]
+            );
+        })
+        .catch(fail)
+        .then(done);
+    });
 });
 
 function mockBarPlot(dataWithoutTraceType, layout) {

test/jasmine/tests/scatter_test.js

@@ -1189,7 +1189,7 @@ describe('Test scatter *clipnaxis*:', function() {
             var scatterLayer = subplotLayer.select('.scatterlayer');
 
             assertClip(subplotLayer, layerClips[0], 1, 'subplot layer');
-            assertClip(subplotLayer.select('.barlayer'), layerClips[1], 1, 'bar layer');
+            assertClip(subplotLayer.select('.maplayer'), layerClips[1], 1, 'some other trace layer');
             assertClip(scatterLayer, layerClips[2], 1, 'scatter layer');
 
             assertNodeDisplay(