Merge pull request #355 from plotly/zoom-click-bug

Doubleclick - Drag bug [Fixes #333]

Author: etpinard

src/plots/cartesian/constants.js

@@ -28,7 +28,7 @@ module.exports = {
 
     // ms between first mousedown and 2nd mouseup to constitute dblclick...
     // we don't seem to have access to the system setting
-    DBLCLICKDELAY: 600,
+    DBLCLICKDELAY: 300,
 
     // pixels to move mouse before you stop clamping to starting point
     MINDRAG: 8,

src/plots/cartesian/graph_interact.js

@@ -1576,7 +1576,6 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     function zoomDone(dragged, numClicks) {
         if(Math.min(box.h, box.w) < MINDRAG * 2) {
             if(numClicks === 2) doubleClick();
-            else pauseForDrag(gd);
 
             return removeZoombox(gd);
         }
@@ -1629,7 +1628,6 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                     }
                 });
         }
-        else pauseForDrag(gd);
     }
 
     // scroll zoom, on all draggers except corners
@@ -1932,21 +1930,6 @@ function getEndText(ax, end) {
     }
 }
 
-function pauseForDrag(gd) {
-    // prevent more redraws until we know if a doubleclick
-    // has occurred
-    gd._dragging = true;
-    var deferredReplot = gd._replotPending;
-    gd._replotPending = false;
-
-    setTimeout(function() {
-        gd._replotPending = deferredReplot;
-        finishDrag(gd);
-    },
-        constants.DBLCLICKDELAY
-    );
-}
-
 function finishDrag(gd) {
     gd._dragging = false;
     if(gd._replotPending) Plotly.plot(gd);
@@ -2032,11 +2015,6 @@ fx.dragElement = function(options) {
     if(!gd._mouseDownTime) gd._mouseDownTime = 0;
 
     function onStart(e) {
-        // because we cancel event bubbling,
-        // explicitly trigger input blur event.
-        var inputBox = document.querySelector('.plugin-editable');
-        if(inputBox) d3.select(inputBox).on('blur').call(inputBox);
-
         // make dragging and dragged into properties of gd
         // so that others can look at and modify them
         gd._dragged = false;

test/jasmine/assets/get_rect_center.js

@@ -0,0 +1,48 @@
+'use strict';
+
+
+/**
+ * Get the screen coordinates of the center of
+ * an SVG rectangle node.
+ *
+ * @param {rect} rect svg <rect> node
+ */
+module.exports = function getRectCenter(rect) {
+    var corners = getRectScreenCoords(rect);
+
+    return [
+        corners.nw.x + (corners.ne.x - corners.nw.x) / 2,
+        corners.ne.y + (corners.se.y - corners.ne.y) / 2
+    ];
+};
+
+// Taken from: http://stackoverflow.com/a/5835212/4068492
+function getRectScreenCoords(rect) {
+    var svg = findParentSVG(rect);
+    var pt = svg.createSVGPoint();
+    var corners = {};
+    var matrix = rect.getScreenCTM();
+
+    pt.x = rect.x.animVal.value;
+    pt.y = rect.y.animVal.value;
+    corners.nw = pt.matrixTransform(matrix);
+    pt.x += rect.width.animVal.value;
+    corners.ne = pt.matrixTransform(matrix);
+    pt.y += rect.height.animVal.value;
+    corners.se = pt.matrixTransform(matrix);
+    pt.x -= rect.width.animVal.value;
+    corners.sw = pt.matrixTransform(matrix);
+
+    return corners;
+}
+
+function findParentSVG(node) {
+    var parentNode = node.parentNode;
+
+    if(parentNode.tagName === 'svg') {
+        return parentNode;
+    }
+    else {
+        return findParentSVG(parentNode);
+    }
+}