Merge pull request #490 from plotly/plot-clip-bug

Plot Area: Plot clip relayout bug

Author: mdtusz

src/plot_api/plot_api.js

@@ -2887,23 +2887,28 @@ function lsInner(gd) {
                 .call(Color.fill, fullLayout.plot_bgcolor);
         }
 
+
         // Clip so that data only shows up on the plot area.
         var clips = fullLayout._defs.selectAll('g.clips'),
             clipId = 'clip' + fullLayout._uid + subplot + 'plot';
 
-        clips.selectAll('#' + clipId)
-            .data([0])
-        .enter().append('clipPath')
+        var plotClip = clips.selectAll('#' + clipId)
+            .data([0]);
+
+        plotClip.enter().append('clipPath')
             .attr({
                 'class': 'plotclip',
                 'id': clipId
             })
-            .append('rect')
+            .append('rect');
+
+        plotClip.selectAll('rect')
             .attr({
                 'width': xa._length,
                 'height': ya._length
             });
 
+
         plotinfo.plot.attr({
             'transform': 'translate(' + xa._offset + ', ' + ya._offset + ')',
             'clip-path': 'url(#' + clipId + ')'

test/jasmine/tests/plot_api_test.js

@@ -20,6 +20,36 @@ describe('Test plot api', function() {
         });
     });
 
+    describe('Plotly.relayout', function() {
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('should update the plot clipPath if the plot is resized', function(done) {
+
+            Plotly.plot(gd, [{ x: [1,2,3], y: [1,2,3] }], { width: 500, height: 500 })
+                .then(function() {
+                    return Plotly.relayout(gd, { width: 400, height: 400 });
+                })
+                .then(function() {
+                    var uid = gd._fullLayout._uid;
+
+                    var plotClip = document.getElementById('clip' + uid + 'xyplot'),
+                        clipRect = plotClip.children[0],
+                        clipWidth = +clipRect.getAttribute('width'),
+                        clipHeight = +clipRect.getAttribute('height');
+
+                    expect(clipWidth).toBe(240);
+                    expect(clipHeight).toBe(220);
+                })
+                .then(done);
+        });
+    });
+
     describe('Plotly.restyle', function() {
         beforeEach(function() {
             spyOn(Plotly, 'plot');

test/jasmine/tests/plots_test.js

@@ -320,6 +320,50 @@ describe('Test Plots', function() {
 
     });
 
+    describe('Plots.resize', function() {
+        var gd;
+
+        beforeEach(function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, [{ x: [1,2,3], y: [2,3,4] }], {})
+                .then(function() {
+                    gd.style.width = '400px';
+                    gd.style.height = '400px';
+
+                    return Plotly.Plots.resize(gd);
+                })
+                .then(done);
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('should resize the plot clip', function() {
+            var uid = gd._fullLayout._uid;
+
+            var plotClip = document.getElementById('clip' + uid + 'xyplot'),
+                clipRect = plotClip.children[0],
+                clipWidth = +clipRect.getAttribute('width'),
+                clipHeight = +clipRect.getAttribute('height');
+
+            expect(clipWidth).toBe(240);
+            expect(clipHeight).toBe(220);
+        });
+
+        it('should resize the main svgs', function() {
+            var mainSvgs = document.getElementsByClassName('main-svg');
+
+            for(var i = 0; i < mainSvgs.length; i++) {
+                var svg = mainSvgs[i],
+                    svgWidth = +svg.getAttribute('width'),
+                    svgHeight = +svg.getAttribute('height');
+
+                expect(svgWidth).toBe(400);
+                expect(svgHeight).toBe(400);
+            }
+        });
+    });
+
     describe('Plots.purge', function() {
         var gd;