add positionning logic to range selector draw step

Author: etpinard

src/components/rangeselector/constants.js

@@ -10,6 +10,5 @@
 
 
 module.exports = {
-
-
+    minButtonWidth: 30
 };

src/components/rangeselector/draw.js

@@ -12,6 +12,7 @@
 var d3 = require('d3');
 
 var Plotly = require('../../plotly');
+var Plots = require('../../plots/plots');
 var Color = require('../color');
 var Drawing = require('../drawing');
 var svgTextUtils = require('../../lib/svg_text_utils');
@@ -58,17 +59,22 @@ module.exports = function draw(gd) {
             button.call(drawButtonText, selectorLayout, d);
 
             button.on('click', function() {
+                if(gd._dragged) return;
+
                 var update = getUpdateObject(axisLayout, d);
 
                 Plotly.relayout(gd, update);
             });
         });
 
-        reposition(buttons, selectorLayout, fullLayout._size);
+        // N.B. this mutates selectorLayout
+        reposition(gd, buttons, selectorLayout);
+
+        selector.attr('transform', 'translate(' +
+            selectorLayout.lx + ',' + selectorLayout.ly +
+        ')');
     });
 
-    // FAKE HARDCODED POSITION - PLZ REMOVE BEFORE MERGE
-    selectors.attr('transform', 'translate(80, 60)');
 };
 
 function makeSelectorData(gd) {
@@ -127,26 +133,37 @@ function drawButtonText(button, selectorLayout, d) {
         .call(textLayout);
 }
 
-function reposition(buttons, opts, graphSize) {
+function reposition(gd, buttons, opts) {
     opts.width = 0;
     opts.height = 0;
 
     var borderWidth = opts.borderwidth;
 
-    buttons.each(function(d) {
+    buttons.each(function() {
+        var button = d3.select(this),
+            text = button.select('.selector-text'),
+            tspans = text.selectAll('tspan');
+
+        var tHeight = opts.font.size * 1.3,
+            tLines = tspans[0].length || 1,
+            hEff = Math.max(tHeight * tLines, 16) + 3;
+
+        opts.height = Math.max(opts.height, hEff);
+    });
+
+    buttons.each(function() {
         var button = d3.select(this),
             rect = button.select('.selector-rect'),
             text = button.select('.selector-text'),
-            tspans = text.selectAll('tspan'),
-            mathJaxGroup = button.select('g[class*=math-group]');
+            tspans = text.selectAll('tspan');
 
         var tWidth = text.node() && Drawing.bBox(text.node()).width,
             tHeight = opts.font.size * 1.3,
             tLines = tspans[0].length || 1;
 
+        var wEff = Math.max(tWidth + 10, constants.minButtonWidth);
 
-        var wEff = Math.max(tWidth + 10, 30),
-            hEff = Math.max(tHeight * tLines, 16) + 3;
+        // mathJaxGroup = button.select('g[class*=math-group]');
 
         // TODO add buttongap attribute
 
@@ -157,22 +174,58 @@ function reposition(buttons, opts, graphSize) {
         rect.attr({
             x: 0,
             y: 0,
-            width: wEff
+            width: wEff,
+            height: opts.height
         });
 
-        var textAttr = {
+        var textAttrs = {
             x: wEff / 2,
-            y: tHeight * (1.5 - tLines / 2) - 2  // could do better
+            y: opts.height / 2 - ((tLines - 1) * tHeight / 2) + 3
         };
 
-        text.attr(textAttr);
-        tspans.attr(textAttr);
+        text.attr(textAttrs);
+        tspans.attr(textAttrs);
 
         opts.width += wEff + 5;
-        opts.height = Math.max(opts.height, hEff);
-
-        console.log([wEff, opts.width], [hEff, opts.height]);
     });
 
     buttons.selectAll('rect').attr('height', opts.height);
+
+    var graphSize = gd._fullLayout._size;
+    opts.lx = graphSize.l + graphSize.w * opts.x;
+    opts.ly = graphSize.t + graphSize.h * (1 - opts.y);
+
+    var xanchor = 'left';
+    if(anchorUtils.isRightAnchor(opts)) {
+        opts.lx -= opts.width;
+        xanchor = 'right';
+    }
+    if(anchorUtils.isCenterAnchor(opts)) {
+        opts.lx -= opts.width / 2;
+        xanchor = 'center';
+    }
+
+    var yanchor = 'top';
+    if(anchorUtils.isBottomAnchor(opts)) {
+        opts.ly -= opts.height;
+        yanchor = 'bottom';
+    }
+    if(anchorUtils.isMiddleAnchor(opts)) {
+        opts.ly -= opts.height / 2;
+        yanchor = 'middle';
+    }
+
+    opts.width = Math.ceil(opts.width);
+    opts.height = Math.ceil(opts.height);
+    opts.lx = Math.round(opts.lx);
+    opts.ly = Math.round(opts.ly);
+
+    Plots.autoMargin(gd, 'range-selector', {
+        x: opts.x,
+        y: opts.y,
+        l: opts.width * ({right: 1, center: 0.5}[xanchor] || 0),
+        r: opts.width * ({left: 1, center: 0.5}[xanchor] || 0),
+        b: opts.height * ({top: 1, middle: 0.5}[yanchor] || 0),
+        t: opts.height * ({bottom: 1, middle: 0.5}[yanchor] || 0)
+    });
 }