Merge pull request #2241 from plotly/right-click-fix

Right click fix

Author: alexcjohnson

src/components/annotations/draw.js

@@ -593,12 +593,10 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                                    xcenter + ',' + ycenter + ')'
                         });
                     },
-                    doneFn: function(dragged) {
-                        if(dragged) {
-                            Plotly.relayout(gd, update);
-                            var notesBox = document.querySelector('.js-notes-box-panel');
-                            if(notesBox) notesBox.redraw(notesBox.selectedObj);
-                        }
+                    doneFn: function() {
+                        Plotly.relayout(gd, update);
+                        var notesBox = document.querySelector('.js-notes-box-panel');
+                        if(notesBox) notesBox.redraw(notesBox.selectedObj);
                     }
                 });
             }
@@ -673,13 +671,11 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
                     setCursor(annTextGroupInner, csr);
                 },
-                doneFn: function(dragged) {
+                doneFn: function() {
                     setCursor(annTextGroupInner);
-                    if(dragged) {
-                        Plotly.relayout(gd, update);
-                        var notesBox = document.querySelector('.js-notes-box-panel');
-                        if(notesBox) notesBox.redraw(notesBox.selectedObj);
-                    }
+                    Plotly.relayout(gd, update);
+                    var notesBox = document.querySelector('.js-notes-box-panel');
+                    if(notesBox) notesBox.redraw(notesBox.selectedObj);
                 }
             });
         }

src/components/colorbar/draw.js

@@ -584,10 +584,10 @@ module.exports = function draw(gd, id) {
                         opts.xanchor, opts.yanchor);
                     setCursor(container, csr);
                 },
-                doneFn: function(dragged) {
+                doneFn: function() {
                     setCursor(container);
 
-                    if(dragged && xf !== undefined && yf !== undefined) {
+                    if(xf !== undefined && yf !== undefined) {
                         Plotly.restyle(gd,
                             {'colorbar.x': xf, 'colorbar.y': yf},
                             getTrace().index);

src/components/dragelement/index.js

@@ -38,24 +38,44 @@ dragElement.unhoverRaw = unhover.raw;
  * - Freezes the cursor: whatever mouse cursor the drag element had when the
  *   interaction started gets copied to the coverSlip for use until mouseup
  *
+ * If the user executes a drag bigger than MINDRAG, callbacks will fire as:
+ *      prepFn, moveFn (1 or more times), doneFn
+ * If the user does not drag enough, prepFn and clickFn will fire.
+ *
+ * Note: If you cancel contextmenu, clickFn will fire even with a right click
+ * (unlike native events) so you'll get a `plotly_click` event. Cancel context eg:
+ *    gd.addEventListener('contextmenu', function(e) { e.preventDefault(); });
+ * TODO: we should probably turn this into a `config` parameter, so we can fix it
+ * such that if you *don't* cancel contextmenu, we can prevent partial drags, which
+ * put you in a weird state.
+ *
+ * If the user clicks multiple times quickly, clickFn will fire each time
+ * but numClicks will increase to help you recognize doubleclicks.
+ *
  * @param {object} options with keys:
  *      element (required) the DOM element to drag
  *      prepFn (optional) function(event, startX, startY)
  *          executed on mousedown
  *          startX and startY are the clientX and clientY pixel position
  *          of the mousedown event
- *      moveFn (optional) function(dx, dy, dragged)
- *          executed on move
+ *      moveFn (optional) function(dx, dy)
+ *          executed on move, ONLY after we've exceeded MINDRAG
+ *          (we keep executing moveFn if you move back to where you started)
  *          dx and dy are the net pixel offset of the drag,
  *          dragged is true/false, has the mouse moved enough to
  *          constitute a drag
- *      doneFn (optional) function(dragged, numClicks, e)
- *          executed on mouseup, or mouseout of window since
- *          we don't get events after that
- *          dragged is as in moveFn
+ *      doneFn (optional) function(e)
+ *          executed on mouseup, ONLY if we exceeded MINDRAG (so you can be
+ *          sure that moveFn has been called at least once)
+ *          numClicks is how many clicks we've registered within
+ *          a doubleclick time
+ *          e is the original mouseup event
+ *      clickFn (optional) function(numClicks, e)
+ *          executed on mouseup if we have NOT exceeded MINDRAG (ie moveFn
+ *          has not been called at all)
  *          numClicks is how many clicks we've registered within
  *          a doubleclick time
- *          e is the original event
+ *          e is the original mousedown event
  */
 dragElement.init = function init(options) {
     var gd = options.gd;
@@ -68,7 +88,9 @@ dragElement.init = function init(options) {
         newMouseDownTime,
         cursor,
         dragCover,
-        initialTarget;
+        initialEvent,
+        initialTarget,
+        rightClick;
 
     if(!gd._mouseDownTime) gd._mouseDownTime = 0;
 
@@ -78,10 +100,6 @@ dragElement.init = function init(options) {
     element.ontouchstart = onStart;
 
     function onStart(e) {
-        if(e.buttons && e.buttons === 2) {    // right click
-            return;
-        }
-
         // make dragging and dragged into properties of gd
         // so that others can look at and modify them
         gd._dragged = false;
@@ -90,6 +108,8 @@ dragElement.init = function init(options) {
         startX = offset[0];
         startY = offset[1];
         initialTarget = e.target;
+        initialEvent = e;
+        rightClick = (e.buttons && e.buttons === 2) || e.ctrlKey;
 
         newMouseDownTime = (new Date()).getTime();
         if(newMouseDownTime - gd._mouseDownTime < DBLCLICKDELAY) {
@@ -104,11 +124,11 @@ dragElement.init = function init(options) {
 
         if(options.prepFn) options.prepFn(e, startX, startY);
 
-        if(hasHover) {
+        if(hasHover && !rightClick) {
             dragCover = coverSlip();
             dragCover.style.cursor = window.getComputedStyle(element).cursor;
         }
-        else {
+        else if(!hasHover) {
             // document acts as a dragcover for mobile, bc we can't create dragcover dynamically
             dragCover = document;
             cursor = window.getComputedStyle(document.documentElement).cursor;
@@ -136,7 +156,7 @@ dragElement.init = function init(options) {
             dragElement.unhover(gd);
         }
 
-        if(options.moveFn) options.moveFn(dx, dy, gd._dragged);
+        if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);
 
         return Lib.pauseEvent(e);
     }
@@ -167,27 +187,36 @@ dragElement.init = function init(options) {
             numClicks = Math.max(numClicks - 1, 1);
         }
 
-        if(options.doneFn) options.doneFn(gd._dragged, numClicks, e);
-
-        if(!gd._dragged) {
-            var e2;
-
-            try {
-                e2 = new MouseEvent('click', e);
-            }
-            catch(err) {
-                var offset = pointerOffset(e);
-                e2 = document.createEvent('MouseEvents');
-                e2.initMouseEvent('click',
-                    e.bubbles, e.cancelable,
-                    e.view, e.detail,
-                    e.screenX, e.screenY,
-                    offset[0], offset[1],
-                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
-                    e.button, e.relatedTarget);
+        if(gd._dragged) {
+            if(options.doneFn) options.doneFn(e);
+        }
+        else {
+            if(options.clickFn) options.clickFn(numClicks, initialEvent);
+
+            // If we haven't dragged, this should be a click. But because of the
+            // coverSlip changing the element, the natural system might not generate one,
+            // so we need to make our own. But right clicks don't normally generate
+            // click events, only contextmenu events, which happen on mousedown.
+            if(!rightClick) {
+                var e2;
+
+                try {
+                    e2 = new MouseEvent('click', e);
+                }
+                catch(err) {
+                    var offset = pointerOffset(e);
+                    e2 = document.createEvent('MouseEvents');
+                    e2.initMouseEvent('click',
+                        e.bubbles, e.cancelable,
+                        e.view, e.detail,
+                        e.screenX, e.screenY,
+                        offset[0], offset[1],
+                        e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+                        e.button, e.relatedTarget);
+                }
+
+                initialTarget.dispatchEvent(e2);
             }
-
-            initialTarget.dispatchEvent(e2);
         }
 
         finishDrag(gd);

src/components/legend/draw.js

@@ -334,25 +334,28 @@ module.exports = function draw(gd) {
                 xf = dragElement.align(newX, 0, gs.l, gs.l + gs.w, opts.xanchor);
                 yf = dragElement.align(newY, 0, gs.t + gs.h, gs.t, opts.yanchor);
             },
-            doneFn: function(dragged, numClicks, e) {
-                if(dragged && xf !== undefined && yf !== undefined) {
+            doneFn: function() {
+                if(xf !== undefined && yf !== undefined) {
                     Plotly.relayout(gd, {'legend.x': xf, 'legend.y': yf});
-                } else {
-                    var clickedTrace =
-                        fullLayout._infolayer.selectAll('g.traces').filter(function() {
-                            var bbox = this.getBoundingClientRect();
-                            return (e.clientX >= bbox.left && e.clientX <= bbox.right &&
-                                e.clientY >= bbox.top && e.clientY <= bbox.bottom);
-                        });
-                    if(clickedTrace.size() > 0) {
-                        if(numClicks === 1) {
-                            legend._clickTimeout = setTimeout(function() { handleClick(clickedTrace, gd, numClicks); }, DBLCLICKDELAY);
-                        } else if(numClicks === 2) {
-                            if(legend._clickTimeout) {
-                                clearTimeout(legend._clickTimeout);
-                            }
+                }
+            },
+            clickFn: function(numClicks, e) {
+                var clickedTrace =
+                    fullLayout._infolayer.selectAll('g.traces').filter(function() {
+                        var bbox = this.getBoundingClientRect();
+                        return (e.clientX >= bbox.left && e.clientX <= bbox.right &&
+                            e.clientY >= bbox.top && e.clientY <= bbox.bottom);
+                    });
+                if(clickedTrace.size() > 0) {
+                    if(numClicks === 1) {
+                        legend._clickTimeout = setTimeout(function() {
                             handleClick(clickedTrace, gd, numClicks);
+                        }, DBLCLICKDELAY);
+                    } else if(numClicks === 2) {
+                        if(legend._clickTimeout) {
+                            clearTimeout(legend._clickTimeout);
                         }
+                        handleClick(clickedTrace, gd, numClicks);
                     }
                 }
             }

src/components/shapes/draw.js

@@ -211,11 +211,9 @@ function setupDragElement(gd, shapePath, shapeOptions, index) {
         dragOptions.moveFn = (dragMode === 'move') ? moveShape : resizeShape;
     }
 
-    function endDrag(dragged) {
+    function endDrag() {
         setCursor(shapePath);
-        if(dragged) {
-            Plotly.relayout(gd, update);
-        }
+        Plotly.relayout(gd, update);
     }
 
     function moveShape(dx, dy) {