Nested <svg> removal

src/components/annotations/index.js

@@ -343,8 +343,7 @@ annotations.draw = function(gd, index, opt, value) {
         .classed('annotation-text-g', true)
         .attr('data-index', String(index));
 
-    var ann = anng.append('svg')
-        .call(Plotly.Drawing.setPosition, 0, 0);
+    var ann = anng.append('g');
 
     var borderwidth = options.borderwidth,
         borderpad = options.borderpad,
@@ -489,10 +488,10 @@ annotations.draw = function(gd, index, opt, value) {
 
         annbg.call(Plotly.Drawing.setRect, borderwidth / 2, borderwidth / 2,
             outerwidth-borderwidth, outerheight - borderwidth);
-        ann.call(Plotly.Drawing.setRect,
-            Math.round(annPosPx.x - outerwidth / 2),
-            Math.round(annPosPx.y - outerheight / 2),
-            outerwidth, outerheight);
+
+        var annX = Math.round(annPosPx.x - outerwidth / 2),
+            annY = Math.round(annPosPx.y - outerheight / 2);
+        ann.attr('transform', 'translate(' + annX + ', ' + annY + ')');
 
         var annbase = 'annotations['+index+']';
 

src/plot_api/plot_api.js

@@ -322,9 +322,9 @@ Plotly.plot = function(gd, data, layout, config) {
     var donePlotting = Lib.syncOrAsync([
         Plots.previousPromises,
         marginPushers,
-        layoutStyles,
         marginPushersAgain,
         positionAndAutorange,
+        layoutStyles,
         drawAxes,
         drawData,
         finalDraw
@@ -2753,7 +2753,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
                 plotinfo.overgrid = plotgroup.append('g');
                 plotinfo.zerolinelayer = plotgroup.append('g');
                 plotinfo.overzero = plotgroup.append('g');
-                plotinfo.plot = plotgroup.append('svg').call(plotLayers);
+                plotinfo.plot = plotgroup.append('g').call(plotLayers);
                 plotinfo.overplot = plotgroup.append('g');
                 plotinfo.xlines = plotgroup.append('path');
                 plotinfo.ylines = plotgroup.append('path');
@@ -2779,7 +2779,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
 
         plotinfo.gridlayer = mainplot.overgrid.append('g');
         plotinfo.zerolinelayer = mainplot.overzero.append('g');
-        plotinfo.plot = mainplot.overplot.append('svg').call(plotLayers);
+        plotinfo.plot = mainplot.overplot.append('g').call(plotLayers);
         plotinfo.xlines = mainplot.overlines.append('path');
         plotinfo.ylines = mainplot.overlines.append('path');
         plotinfo.xaxislayer = mainplot.overaxes.append('g');
@@ -2790,9 +2790,6 @@ function makeCartesianPlotFramwork(gd, subplots) {
     subplots.forEach(function(subplot) {
         var plotinfo = fullLayout._plots[subplot];
 
-        plotinfo.plot
-            .attr('preserveAspectRatio', 'none')
-            .style('fill', 'none');
         plotinfo.xlines
             .style('fill', 'none')
             .classed('crisp', true);
@@ -2841,9 +2838,28 @@ function lsInner(gd) {
                     xa._length+2*gs.p, ya._length+2*gs.p)
                 .call(Color.fill, fullLayout.plot_bgcolor);
         }
-        plotinfo.plot
-            .call(Drawing.setRect,
-                xa._offset, ya._offset, xa._length, ya._length);
+
+        // 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')
+            .attr({
+                'class': 'plotclip',
+                'id': clipId
+            })
+            .append('rect')
+            .attr({
+                'width': xa._length,
+                'height': ya._length
+            });
+
+        plotinfo.plot.attr({
+            'transform': 'translate(' + xa._offset + ', ' + ya._offset + ')',
+            'clip-path': 'url(#' + clipId + ')'
+        });
 
         var xlw = Drawing.crispRound(gd, xa.linewidth, 1),
             ylw = Drawing.crispRound(gd, ya.linewidth, 1),

src/plots/cartesian/axes.js

@@ -1321,8 +1321,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
                 var plotinfo = fullLayout._plots[subplot],
                     xa = plotinfo.x(),
                     ya = plotinfo.y();
-                plotinfo.plot.attr('viewBox',
-                    '0 0 '+xa._length+' '+ya._length);
+
                 plotinfo.xaxislayer
                     .selectAll('.'+xa._id+'tick').remove();
                 plotinfo.yaxislayer

src/plots/cartesian/graph_interact.js

@@ -1341,20 +1341,17 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         pw = xa[0]._length,
         ph = ya[0]._length,
         MINDRAG = constants.MINDRAG,
-        MINZOOM = constants.MINZOOM,
-        i,
-        subplotXa,
-        subplotYa;
-
-    for(i = 1; i < subplots.length; i++) {
-        subplotXa = subplots[i].x();
-        subplotYa = subplots[i].y();
+        MINZOOM = constants.MINZOOM;
+
+    for(var i = 1; i < subplots.length; i++) {
+        var subplotXa = subplots[i].x(),
+            subplotYa = subplots[i].y();
         if(xa.indexOf(subplotXa) === -1) xa.push(subplotXa);
         if(ya.indexOf(subplotYa) === -1) ya.push(subplotYa);
     }
 
     function isDirectionActive(axList, activeVal) {
-        for(i = 0; i < axList.length; i++) {
+        for(var i = 0; i < axList.length; i++) {
             if(!axList[i].fixedrange) return activeVal;
         }
         return '';
@@ -1472,7 +1469,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             .attr('d','M0,0Z');
 
         clearSelect();
-        for(i = 0; i < allaxes.length; i++) forceNumbers(allaxes[i].range);
+        for(var i = 0; i < allaxes.length; i++) forceNumbers(allaxes[i].range);
     }
 
     function clearSelect() {
@@ -1692,7 +1689,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         }
 
         // viewbox redraw at first
-        updateViewBoxes(scrollViewBox);
+        updateSubplots(scrollViewBox);
         ticksAndAnnotations(ns,ew);
 
         // then replot after a delay to make sure
@@ -1726,7 +1723,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         if(xActive === 'ew' || yActive === 'ns') {
             if(xActive) dragAxList(xa, dx);
             if(yActive) dragAxList(ya, dy);
-            updateViewBoxes([xActive ? -dx : 0, yActive ? -dy : 0, pw, ph]);
+            updateSubplots([xActive ? -dx : 0, yActive ? -dy : 0, pw, ph]);
             ticksAndAnnotations(yActive, xActive);
             return;
         }
@@ -1768,7 +1765,7 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         else if(yActive === 's') dy = dz(ya, 0, -dy);
         else if(!yActive) dy = 0;
 
-        updateViewBoxes([
+        updateSubplots([
             (xActive === 'w') ? dx : 0,
             (yActive === 'n') ? dy : 0,
             pw - dx,
@@ -1869,41 +1866,39 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             axi.range=axi._r.slice();
         }
 
-        updateViewBoxes([0,0,pw,ph]);
+        updateSubplots([0,0,pw,ph]);
         Plotly.relayout(gd,attrs);
     }
 
-    // updateViewBoxes - find all plot viewboxes that should be
+    // updateSubplots - find all plot viewboxes that should be
     // affected by this drag, and update them. look for all plots
     // sharing an affected axis (including the one being dragged)
-    function updateViewBoxes(viewBox) {
+    function updateSubplots(viewBox) {
         var plotinfos = fullLayout._plots,
-            subplots = Object.keys(plotinfos),
-            i,
-            plotinfo2,
-            xa2,
-            ya2,
-            editX,
-            editY;
-
-        for(i = 0; i < subplots.length; i++) {
-            plotinfo2 = plotinfos[subplots[i]];
-            xa2 = plotinfo2.x();
-            ya2 = plotinfo2.y();
-            editX = ew && xa.indexOf(xa2)!==-1 && !xa2.fixedrange;
-            editY = ns && ya.indexOf(ya2)!==-1 && !ya2.fixedrange;
+            subplots = Object.keys(plotinfos);
+
+        for(var i = 0; i < subplots.length; i++) {
+            var subplot = plotinfos[subplots[i]],
+
+                xa2 = subplot.x(),
+                ya2 = subplot.y(),
+                editX = ew && xa.indexOf(xa2)!==-1 && !xa2.fixedrange,
+                editY = ns && ya.indexOf(ya2)!==-1 && !ya2.fixedrange;
 
             if(editX || editY) {
-                var newVB = [0,0,xa2._length,ya2._length];
-                if(editX) {
-                    newVB[0] = viewBox[0];
-                    newVB[2] = viewBox[2];
-                }
-                if(editY) {
-                    newVB[1] = viewBox[1];
-                    newVB[3] = viewBox[3];
-                }
-                plotinfo2.plot.attr('viewBox',newVB.join(' '));
+                // plot requires offset position and
+                // clip moves with opposite sign
+                var clipDx = editX ? viewBox[0] : 0,
+                    clipDy = editY ? viewBox[1] : 0,
+                    plotDx = xa2._offset - clipDx,
+                    plotDy = ya2._offset - clipDy;
+
+                var clipId = 'clip' + fullLayout._uid + subplots[i] + 'plot';
+
+                fullLayout._defs.selectAll('#' + clipId)
+                    .attr('transform', 'translate(' + clipDx + ', ' + clipDy + ')');
+                subplot.plot
+                    .attr('transform', 'translate(' + plotDx + ', ' + plotDy + ')');
             }
         }
     }

test/jasmine/tests/snapshot_clone_test.js → test/jasmine/tests/snapshot_test.js

@@ -1,9 +1,13 @@
-var Snapshot = require('@src/snapshot');
+var Plotly = require('@lib/index');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var subplotMock = require('../../image/mocks/multiple_subplots.json');
+var annotationMock = require('../../image/mocks/annotations.json');
 
-describe('Test Snapshot.clone', function() {
+describe('Plotly.Snapshot', function() {
     'use strict';
 
-    describe('Test clone', function() {
+    describe('clone', function() {
 
         var data,
             layout,
@@ -76,7 +80,7 @@ describe('Test Snapshot.clone', function() {
                 setBackground: 'opaque'
             };
 
-            var themeTile = Snapshot.clone(dummyGraphObj, themeOptions);
+            var themeTile = Plotly.Snapshot.clone(dummyGraphObj, themeOptions);
             expect(themeTile.layout.height).toEqual(THEMETILE_DEFAULT_LAYOUT.height);
             expect(themeTile.layout.width).toEqual(THEMETILE_DEFAULT_LAYOUT.width);
             expect(themeTile.td.defaultLayout).toEqual(THEMETILE_DEFAULT_LAYOUT);
@@ -101,7 +105,7 @@ describe('Test Snapshot.clone', function() {
                 'annotations': []
             };
 
-            var thumbTile = Snapshot.clone(dummyGraphObj, thumbnailOptions);
+            var thumbTile = Plotly.Snapshot.clone(dummyGraphObj, thumbnailOptions);
             expect(thumbTile.layout.hidesources).toEqual(THUMBNAIL_DEFAULT_LAYOUT.hidesources);
             expect(thumbTile.layout.showlegend).toEqual(THUMBNAIL_DEFAULT_LAYOUT.showlegend);
             expect(thumbTile.layout.borderwidth).toEqual(THUMBNAIL_DEFAULT_LAYOUT.borderwidth);
@@ -115,7 +119,7 @@ describe('Test Snapshot.clone', function() {
                 width: 888
             };
 
-            var customTile = Snapshot.clone(dummyGraphObj, customOptions);
+            var customTile = Plotly.Snapshot.clone(dummyGraphObj, customOptions);
             expect(customTile.layout.height).toEqual(customOptions.height);
             expect(customTile.layout.width).toEqual(customOptions.width);
         });
@@ -125,23 +129,57 @@ describe('Test Snapshot.clone', function() {
                 tileClass: 'notarealclass'
             };
 
-            var vanillaPlotTile = Snapshot.clone(dummyGraphObj, vanillaOptions);
+            var vanillaPlotTile = Plotly.Snapshot.clone(dummyGraphObj, vanillaOptions);
             expect(vanillaPlotTile.data[0].x).toEqual(data[0].x);
             expect(vanillaPlotTile.layout).toEqual(layout);
             expect(vanillaPlotTile.layout.height).toEqual(layout.height);
             expect(vanillaPlotTile.layout.width).toEqual(layout.width);
         });
 
         it('should set the background parameter appropriately', function() {
-            var pt = Snapshot.clone(dummyGraphObj, {
+            var pt = Plotly.Snapshot.clone(dummyGraphObj, {
                 setBackground: 'transparent'
             });
             expect(pt.config.setBackground).not.toBeDefined();
 
-            pt = Snapshot.clone(dummyGraphObj, {
+            pt = Plotly.Snapshot.clone(dummyGraphObj, {
                 setBackground: 'blue'
             });
             expect(pt.config.setBackground).toEqual('blue');
         });
     });
+
+    describe('toSVG', function() {
+        var parser = new DOMParser(),
+            gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+
+        it('should not return any nested svg tags of plots', function(done) {
+            Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() {
+                return Plotly.Snapshot.toSVG(gd);
+            }).then(function(svg) {
+                var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
+                    svgElements = svgDOM.getElementsByTagName('svg');
+
+                expect(svgElements.length).toBe(1);
+            }).then(done);
+        });
+
+        it('should not return any nested svg tags of annotations', function(done) {
+            Plotly.plot(gd, annotationMock.data, annotationMock.layout).then(function() {
+                return Plotly.Snapshot.toSVG(gd);
+            }).then(function(svg) {
+                var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
+                    svgElements = svgDOM.getElementsByTagName('svg');
+
+                expect(svgElements.length).toBe(1);
+            }).then(done);
+        });
+    });
 });