expose a few things out of cartesian dragbox for ♻️

Author: etpinard

src/plots/cartesian/dragbox.js

@@ -45,7 +45,7 @@ var SHOWZOOMOUTTIP = true;
 //          's' - bottom only
 //          'ns' - top and bottom together, difference unchanged
 //      ew - same for horizontal axis
-module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
+function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     // mouseDown stores ms of first mousedown event in the last
     // DBLCLICKDELAY ms on the drag bars
     // numClicks stores how many mousedowns have been seen
@@ -439,9 +439,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
     // everything but the corners gets wheel zoom
     if(ns.length * ew.length !== 1) {
-        // still seems to be some confusion about onwheel vs onmousewheel...
-        if(dragger.onwheel !== undefined) dragger.onwheel = zoomWheel;
-        else if(dragger.onmousewheel !== undefined) dragger.onmousewheel = zoomWheel;
+        attachWheelEventHandler(dragger, zoomWheel);
     }
 
     // plotDrag: move the plot in response to a drag
@@ -792,7 +790,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     }
 
     return dragger;
-};
+}
 
 function makeDragger(plotinfo, dragClass, cursor, x, y, w, h) {
     var dragger3 = plotinfo.draglayer.selectAll('.' + dragClass).data([0]);
@@ -931,6 +929,10 @@ function updateZoombox(zb, corners, box, path0, dimmed, lum) {
     zb.attr('d',
         path0 + 'M' + (box.l) + ',' + (box.t) + 'v' + (box.h) +
         'h' + (box.w) + 'v-' + (box.h) + 'h-' + (box.w) + 'Z');
+    transitionZoombox(zb, corners, dimmed, lum);
+}
+
+function transitionZoombox(zb, corners, dimmed, lum) {
     if(!dimmed) {
         zb.transition()
             .style('fill', lum > 0.2 ? 'rgba(0,0,0,0.4)' :
@@ -1035,3 +1037,25 @@ function calcLinks(constraintGroups, xIDs, yIDs) {
         xy: isSubplotConstrained
     };
 }
+
+// still seems to be some confusion about onwheel vs onmousewheel...
+function attachWheelEventHandler(element, handler) {
+    if(element.onwheel !== undefined) element.onwheel = handler;
+    else if(element.onmousewheel !== undefined) element.onmousewheel = handler;
+}
+
+module.exports = {
+    makeDragBox: makeDragBox,
+
+    makeDragger: makeDragger,
+    makeZoombox: makeZoombox,
+    makeCorners: makeCorners,
+
+    updateZoombox: updateZoombox,
+    xyCorners: xyCorners,
+    transitionZoombox: transitionZoombox,
+    removeZoombox: removeZoombox,
+    clearSelect: clearSelect,
+
+    attachWheelEventHandler: attachWheelEventHandler
+};

src/plots/cartesian/graph_interact.js

@@ -15,7 +15,7 @@ var Fx = require('../../components/fx');
 var dragElement = require('../../components/dragelement');
 
 var constants = require('./constants');
-var dragBox = require('./dragbox');
+var makeDragBox = require('./dragbox').makeDragBox;
 
 module.exports = function initInteractions(gd) {
     var fullLayout = gd._fullLayout;
@@ -56,7 +56,7 @@ module.exports = function initInteractions(gd) {
         if(!plotinfo.mainplot) {
             // main dragger goes over the grids and data, so we use its
             // mousemove events for all data hover effects
-            var maindrag = dragBox(gd, plotinfo, 0, 0,
+            var maindrag = makeDragBox(gd, plotinfo, 0, 0,
                 xa._length, ya._length, 'ns', 'ew');
 
             maindrag.onmousemove = function(evt) {
@@ -100,13 +100,13 @@ module.exports = function initInteractions(gd) {
 
             // corner draggers
             if(gd._context.showAxisDragHandles) {
-                dragBox(gd, plotinfo, -DRAGGERSIZE, -DRAGGERSIZE,
+                makeDragBox(gd, plotinfo, -DRAGGERSIZE, -DRAGGERSIZE,
                     DRAGGERSIZE, DRAGGERSIZE, 'n', 'w');
-                dragBox(gd, plotinfo, xa._length, -DRAGGERSIZE,
+                makeDragBox(gd, plotinfo, xa._length, -DRAGGERSIZE,
                     DRAGGERSIZE, DRAGGERSIZE, 'n', 'e');
-                dragBox(gd, plotinfo, -DRAGGERSIZE, ya._length,
+                makeDragBox(gd, plotinfo, -DRAGGERSIZE, ya._length,
                     DRAGGERSIZE, DRAGGERSIZE, 's', 'w');
-                dragBox(gd, plotinfo, xa._length, ya._length,
+                makeDragBox(gd, plotinfo, xa._length, ya._length,
                     DRAGGERSIZE, DRAGGERSIZE, 's', 'e');
             }
         }
@@ -115,21 +115,21 @@ module.exports = function initInteractions(gd) {
             // these drag each axis separately
             if(isNumeric(y0)) {
                 if(xa.anchor === 'free') y0 -= fullLayout._size.h * (1 - ya.domain[1]);
-                dragBox(gd, plotinfo, xa._length * 0.1, y0,
+                makeDragBox(gd, plotinfo, xa._length * 0.1, y0,
                     xa._length * 0.8, DRAGGERSIZE, '', 'ew');
-                dragBox(gd, plotinfo, 0, y0,
+                makeDragBox(gd, plotinfo, 0, y0,
                     xa._length * 0.1, DRAGGERSIZE, '', 'w');
-                dragBox(gd, plotinfo, xa._length * 0.9, y0,
+                makeDragBox(gd, plotinfo, xa._length * 0.9, y0,
                     xa._length * 0.1, DRAGGERSIZE, '', 'e');
             }
             // y axis draggers
             if(isNumeric(x0)) {
                 if(ya.anchor === 'free') x0 -= fullLayout._size.w * xa.domain[0];
-                dragBox(gd, plotinfo, x0, ya._length * 0.1,
+                makeDragBox(gd, plotinfo, x0, ya._length * 0.1,
                     DRAGGERSIZE, ya._length * 0.8, 'ns', '');
-                dragBox(gd, plotinfo, x0, ya._length * 0.9,
+                makeDragBox(gd, plotinfo, x0, ya._length * 0.9,
                     DRAGGERSIZE, ya._length * 0.1, 's', '');
-                dragBox(gd, plotinfo, x0, 0,
+                makeDragBox(gd, plotinfo, x0, 0,
                     DRAGGERSIZE, ya._length * 0.1, 'n', '');
             }
         }