add _clips and _topclips <g> in makePlotFramework

- instead of having components making <g .clips>
  before appending their <clipPath>s
- IMPORTANT: annotation put is clips in fulLayout._defs,
  even though annotation draw in `toppaper`. Now, annotations
  use fullLayout._topclips

Author: etpinard

src/components/annotations/draw.js

@@ -194,7 +194,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     var isSizeConstrained = options.width || options.height;
 
-    var annTextClip = fullLayout._defs.select('.clips')
+    var annTextClip = fullLayout._topclips
         .selectAll('#' + annClipID)
         .data(isSizeConstrained ? [0] : []);
 

src/plot_api/plot_api.js

@@ -2748,8 +2748,8 @@ Plotly.purge = function purge(gd) {
 // makePlotFramework: Create the plot container and axes
 // -------------------------------------------------------
 function makePlotFramework(gd) {
-    var gd3 = d3.select(gd),
-        fullLayout = gd._fullLayout;
+    var gd3 = d3.select(gd);
+    var fullLayout = gd._fullLayout;
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
@@ -2795,9 +2795,15 @@ function makePlotFramework(gd) {
     fullLayout._defs = fullLayout._paper.append('defs')
         .attr('id', 'defs-' + fullLayout._uid);
 
+    fullLayout._clips = fullLayout._defs.append('g')
+        .classed('clips', true);
+
     fullLayout._topdefs = fullLayout._toppaper.append('defs')
         .attr('id', 'topdefs-' + fullLayout._uid);
 
+    fullLayout._topclips = fullLayout._topdefs.append('g')
+        .classed('clips', true);
+
     fullLayout._bgLayer = fullLayout._paper.append('g')
         .classed('bglayer', true);
 

src/plot_api/subroutines.js

@@ -151,8 +151,7 @@ exports.lsInner = function(gd) {
         // Clip so that data only shows up on the plot area.
         plotinfo.clipId = 'clip' + fullLayout._uid + subplot + 'plot';
 
-        var plotClip = fullLayout._defs.selectAll('g.clips')
-            .selectAll('#' + plotinfo.clipId)
+        var plotClip = fullLayout._clips.selectAll('#' + plotinfo.clipId)
             .data([0]);
 
         plotClip.enter().append('clipPath')

src/plots/cartesian/axes.js

@@ -1620,16 +1620,10 @@ axes.makeClipPaths = function(gd) {
         }
     }
 
-    var defGroup = defs.selectAll('g.clips')
-        .data([0]);
-
-    defGroup.enter().append('g')
-        .classed('clips', true);
-
     // selectors don't work right with camelCase tags,
     // have to use class instead
     // https://groups.google.com/forum/#!topic/d3-js/6EpAzQ2gU9I
-    var axClips = defGroup.selectAll('.axesclip')
+    var axClips = fullLayout._clips.selectAll('.axesclip')
         .data(clipList, function(d) { return d.x._id + d.y._id; });
 
     axClips.enter().append('clipPath')

src/plots/geo/geo.js

@@ -454,15 +454,10 @@ proto.makeFramework = function() {
     var fullLayout = _this.graphDiv._fullLayout;
     var clipId = 'clip' + fullLayout._uid + _this.id;
 
-    var defGroup = fullLayout._defs.selectAll('g.clips')
-        .data([0]);
-    defGroup.enter().append('g')
-        .classed('clips', true);
-
-    _this.clipDef = defGroup.append('clipPath')
+    _this.clipDef = fullLayout._clips.append('clipPath')
         .attr('id', clipId);
 
-    _this.clipRect = this.clipDef.append('rect');
+    _this.clipRect = _this.clipDef.append('rect');
 
     _this.framework = d3.select(_this.container).append('g')
         .attr('class', 'geo ' + _this.id)

src/plots/ternary/ternary.js

@@ -70,22 +70,17 @@ proto.plot = function(ternaryCalcData, fullLayout) {
 proto.makeFramework = function(fullLayout) {
     var _this = this;
     var ternaryLayout = fullLayout[_this.id];
-
-    var defGroup = _this.defs.selectAll('g.clips')
-        .data([0]);
-    defGroup.enter().append('g')
-        .classed('clips', true);
+    var clipId = _this.clipId = 'clip' + _this.layoutId + _this.id;
 
     // clippath for this ternary subplot
-    var clipId = _this.clipId = 'clip' + _this.layoutId + _this.id;
-    _this.clipDef = defGroup.selectAll('#' + clipId)
+    _this.clipDef = fullLayout._clips.selectAll('#' + clipId)
         .data([0]);
     _this.clipDef.enter().append('clipPath').attr('id', clipId)
         .append('path').attr('d', 'M0,0Z');
 
     // 'relative' clippath (i.e. no translation) for this ternary subplot
     var clipIdRelative = _this.clipIdRelative = 'clip-relative' + _this.layoutId + _this.id;
-    _this.clipDefRelative = defGroup.selectAll('#' + clipIdRelative)
+    _this.clipDefRelative = fullLayout._clips.selectAll('#' + clipIdRelative)
         .data([0]);
     _this.clipDefRelative.enter().append('clipPath').attr('id', clipIdRelative)
         .append('path').attr('d', 'M0,0Z');

src/traces/carpet/plot.js

@@ -38,7 +38,7 @@ function plotOne(gd, plotinfo, cd) {
         fullLayout = gd._fullLayout;
 
     var gridLayer = plotinfo.plot.selectAll('.carpetlayer');
-    var clipLayer = makeg(fullLayout._defs, 'g', 'clips');
+    var clipLayer = fullLayout._clips;
 
     var axisLayer = makeg(gridLayer, 'g', 'carpet' + trace.uid).classed('trace', true);
     var minorLayer = makeg(axisLayer, 'g', 'minorlayer');

src/traces/contour/plot.js

@@ -86,7 +86,7 @@ function plotOne(gd, plotinfo, cd) {
     makeBackground(plotGroup, perimeter, contours);
     makeFills(plotGroup, pathinfo, perimeter, contours);
     makeLinesAndLabels(plotGroup, pathinfo, gd, cd[0], contours, perimeter);
-    clipGaps(plotGroup, plotinfo, fullLayout._defs, cd[0], perimeter);
+    clipGaps(plotGroup, plotinfo, fullLayout._clips, cd[0], perimeter);
 }
 
 function emptyPathinfo(contours, plotinfo, cd0) {
@@ -281,7 +281,7 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
     var linegroup = exports.createLines(lineContainer, showLines || showLabels, pathinfo);
 
     var lineClip = exports.createLineClip(lineContainer, clipLinesForLabels,
-        gd._fullLayout._defs, cd0.trace.uid);
+        gd._fullLayout._clips, cd0.trace.uid);
 
     var labelGroup = plotgroup.selectAll('g.contourlabels')
         .data(showLabels ? [0] : []);
@@ -403,10 +403,10 @@ exports.createLines = function(lineContainer, makeLines, pathinfo) {
     return linegroup;
 };
 
-exports.createLineClip = function(lineContainer, clipLinesForLabels, defs, uid) {
+exports.createLineClip = function(lineContainer, clipLinesForLabels, clips, uid) {
     var clipId = clipLinesForLabels ? ('clipline' + uid) : null;
 
-    var lineClip = defs.select('.clips').selectAll('#' + clipId)
+    var lineClip = clips.selectAll('#' + clipId)
         .data(clipLinesForLabels ? [0] : []);
     lineClip.exit().remove();
 
@@ -630,10 +630,10 @@ exports.drawLabels = function(labelGroup, labelData, gd, lineClip, labelClipPath
     }
 };
 
-function clipGaps(plotGroup, plotinfo, defs, cd0, perimeter) {
+function clipGaps(plotGroup, plotinfo, clips, cd0, perimeter) {
     var clipId = 'clip' + cd0.trace.uid;
 
-    var clipPath = defs.select('.clips').selectAll('#' + clipId)
+    var clipPath = clips.selectAll('#' + clipId)
         .data(cd0.trace.connectgaps ? [] : [0]);
     clipPath.enter().append('clipPath')
         .classed('contourclip', true)