Axes.draw w/o getBoundingClientRect + many axis automargin fixes

src/components/fx/hover.js

@@ -605,15 +605,15 @@ function _hover(gd, evt, subplot, noHoverEvent) {
  var result = dragElement.unhoverRaw(gd, evt);
  if(hasCartesian && ((spikePoints.hLinePoint !== null) || (spikePoints.vLinePoint !== null))) {
  if(spikesChanged(oldspikepoints)) {
- createSpikelines(spikePoints, spikelineOpts);
+ createSpikelines(gd, spikePoints, spikelineOpts);
  }
  }
  return result;
  }
 
  if(hasCartesian) {
  if(spikesChanged(oldspikepoints)) {
- createSpikelines(spikePoints, spikelineOpts);
+ createSpikelines(gd, spikePoints, spikelineOpts);
  }
  }
 
@@ -1396,9 +1396,10 @@ function cleanPoint(d, hovermode) {
  return d;
 }
 
-function createSpikelines(closestPoints, opts) {
+function createSpikelines(gd, closestPoints, opts) {
  var container = opts.container;
  var fullLayout = opts.fullLayout;
+ var gs = fullLayout._size;
  var evt = opts.event;
  var showY = !!closestPoints.hLinePoint;
  var showX = !!closestPoints.vLinePoint;
@@ -1433,8 +1434,7 @@ function createSpikelines(closestPoints, opts) {
  var yMode = ya.spikemode;
  var yThickness = ya.spikethickness;
  var yColor = ya.spikecolor || dfltHLineColor;
- var yBB = ya._boundingBox;
- var xEdge = ((yBB.left + yBB.right) / 2) < hLinePointX ? yBB.right : yBB.left;
+ var xEdge = Axes.getPxPosition(gd, ya);
  var xBase, xEndSpike;
 
  if(yMode.indexOf('toaxis') !== -1 || yMode.indexOf('across') !== -1) {
@@ -1443,8 +1443,14 @@ function createSpikelines(closestPoints, opts) {
  xEndSpike = hLinePointX;
  }
  if(yMode.indexOf('across') !== -1) {
- xBase = ya._counterSpan[0];
- xEndSpike = ya._counterSpan[1];
+ var xAcross0 = ya._counterDomainMin;
+ var xAcross1 = ya._counterDomainMax;
+ if(ya.anchor === 'free') {
+ xAcross0 = Math.min(xAcross0, ya.position);
+ xAcross1 = Math.max(xAcross1, ya.position);
+ }
+ xBase = gs.l + xAcross0 * gs.w;
+ xEndSpike = gs.l + xAcross1 * gs.w;
  }
 
  // Foreground horizontal line (to y-axis)
@@ -1507,8 +1513,7 @@ function createSpikelines(closestPoints, opts) {
  var xMode = xa.spikemode;
  var xThickness = xa.spikethickness;
  var xColor = xa.spikecolor || dfltVLineColor;
- var xBB = xa._boundingBox;
- var yEdge = ((xBB.top + xBB.bottom) / 2) < vLinePointY ? xBB.bottom : xBB.top;
+ var yEdge = Axes.getPxPosition(gd, xa);
  var yBase, yEndSpike;
 
  if(xMode.indexOf('toaxis') !== -1 || xMode.indexOf('across') !== -1) {
@@ -1517,8 +1522,14 @@ function createSpikelines(closestPoints, opts) {
  yEndSpike = vLinePointY;
  }
  if(xMode.indexOf('across') !== -1) {
- yBase = xa._counterSpan[0];
- yEndSpike = xa._counterSpan[1];
+ var yAcross0 = xa._counterDomainMin;
+ var yAcross1 = xa._counterDomainMax;
+ if(xa.anchor === 'free') {
+ yAcross0 = Math.min(yAcross0, xa.position);
+ yAcross1 = Math.max(yAcross1, xa.position);
+ }
+ yBase = gs.t + (1 - yAcross1) * gs.h;
+ yEndSpike = gs.t + (1 - yAcross0) * gs.h;
  }
 
  // Foreground vertical line (to x-axis)

src/components/rangeslider/draw.js

@@ -108,17 +108,14 @@ module.exports = function(gd) {
 
  var gs = fullLayout._size;
  var domain = axisOpts.domain;
- var tickHeight = opts._tickHeight;
-
- var oppBottom = opts._oppBottom;
 
  opts._width = gs.w * (domain[1] - domain[0]);
 
  var x = Math.round(gs.l + (gs.w * domain[0]));
 
  var y = Math.round(
- gs.t + gs.h * (1 - oppBottom) +
- tickHeight +
+ gs.t + gs.h * (1 - axisOpts._counterDomainMin) +
+ (axisOpts.side === 'bottom' ? axisOpts._depth : 0) +
  opts._offsetShift + constants.extraPad
  );
 

src/components/rangeslider/helpers.js

@@ -9,7 +9,9 @@
 'use strict';
 
 var axisIDs = require('../../plots/cartesian/axis_ids');
+var svgTextUtils = require('../../lib/svg_text_utils');
 var constants = require('./constants');
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
 var name = constants.name;
 
 function isVisible(ax) {
@@ -42,27 +44,30 @@ exports.makeData = function(fullLayout) {
 };
 
 exports.autoMarginOpts = function(gd, ax) {
+ var fullLayout = gd._fullLayout;
  var opts = ax[name];
+ var axLetter = ax._id.charAt(0);
 
- var oppBottom = Infinity;
- var counterAxes = ax._counterAxes;
- for(var j = 0; j < counterAxes.length; j++) {
- var counterId = counterAxes[j];
- var oppAxis = axisIDs.getFromId(gd, counterId);
- oppBottom = Math.min(oppBottom, oppAxis.domain[0]);
+ var bottomDepth = 0;
+ var titleHeight = 0;
+ if(ax.side === 'bottom') {
+ bottomDepth = ax._depth;
+ if(ax.title.text !== fullLayout._dfltTitle[axLetter]) {
+ // as in rangeslider/draw.js
+ titleHeight = 1.5 * ax.title.font.size + 10 + opts._offsetShift;
+ // multi-line extra bump
+ var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
+ titleHeight += extraLines * ax.title.font.size * LINE_SPACING;
+ }
  }
- opts._oppBottom = oppBottom;
-
- var tickHeight = (ax.side === 'bottom' && ax._boundingBox.height) || 0;
- opts._tickHeight = tickHeight;
 
  return {
  x: 0,
- y: oppBottom,
+ y: ax._counterDomainMin,
  l: 0,
  r: 0,
  t: 0,
- b: opts._height + gd._fullLayout.margin.b + tickHeight,
+ b: opts._height + bottomDepth + Math.max(fullLayout.margin.b, titleHeight),
  pad: constants.extraPad + opts._offsetShift * 2
  };
 };

src/lib/svg_text_utils.js

@@ -266,6 +266,7 @@ var SPLIT_TAGS = /(<[^<>]*>)/;
 var ONE_TAG = /<(\/?)([^ >]*)(\s+(.*))?>/i;
 
 var BR_TAG = /<br(\s+.*)?>/i;
+exports.BR_TAG_ALL = /<br(\s+.*)?>/gi;
 
 /*
  * style and href: pull them out of either single or double quotes. Also

src/plot_api/subroutines.js

@@ -72,7 +72,7 @@ function lsInner(gd) {
  // can still get here because it makes some of the SVG structure
  // for shared features like selections.
  if(!fullLayout._has('cartesian')) {
- return gd._promises.length && Promise.all(gd._promises);
+ return Plots.previousPromises(gd);
  }
 
  function getLinePosition(ax, counterAx, side) {
@@ -347,7 +347,7 @@ function lsInner(gd) {
 
  Axes.makeClipPaths(gd);
 
- return gd._promises.length && Promise.all(gd._promises);
+ return Plots.previousPromises(gd);
 }
 
 function shouldShowLinesOrTicks(ax, subplot) {
@@ -599,9 +599,11 @@ exports.drawData = function(gd) {
  // styling separate from drawing
  Plots.style(gd);
 
- // show annotations and shapes
+ // draw components that can be drawn on axes,
+ // and that do not push the margins
  Registry.getComponentMethod('shapes', 'draw')(gd);
  Registry.getComponentMethod('annotations', 'draw')(gd);
+ Registry.getComponentMethod('images', 'draw')(gd);
 
  // Mark the first render as complete
  fullLayout._replotting = false;
@@ -717,9 +719,6 @@ exports.doAutoRangeAndConstraints = function(gd) {
 // correctly sized and the whole plot re-margined. fullLayout._replotting must
 // be set to false before these will work properly.
 exports.finalDraw = function(gd) {
- Registry.getComponentMethod('shapes', 'draw')(gd);
- Registry.getComponentMethod('images', 'draw')(gd);
- Registry.getComponentMethod('annotations', 'draw')(gd);
  // TODO: rangesliders really belong in marginPushers but they need to be
  // drawn after data - can we at least get the margin pushing part separated
  // out and done earlier?