diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 05c9e657aba..28ec6a81513 100644 --- a/src/plot_api/plot_api.js +++ b/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 + ')' diff --git a/test/jasmine/tests/plot_api_test.js b/test/jasmine/tests/plot_api_test.js index 520f4fee006..7ad1ce5f228 100644 --- a/test/jasmine/tests/plot_api_test.js +++ b/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'); diff --git a/test/jasmine/tests/plots_test.js b/test/jasmine/tests/plots_test.js index c83d6ea7d63..4646f760185 100644 --- a/test/jasmine/tests/plots_test.js +++ b/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;