Don't use d3_mouse and cache client rect values as needed (close #7489)

modules/behavior/drag.js

@@ -3,14 +3,13 @@ import { dispatch as d3_dispatch } from 'd3-dispatch';
 import {
     customEvent as d3_customEvent,
     event as d3_event,
-    mouse as d3_mouse,
     select as d3_select,
     selection as d3_selection
 } from 'd3-selection';
 
 import { osmNote } from '../osm';
 import { utilRebind } from '../util/rebind';
-import { utilPrefixCSSProperty, utilPrefixDOMProperty } from '../util';
+import { utilFastMouse, utilPrefixCSSProperty, utilPrefixDOMProperty } from '../util';
 
 
 /*
@@ -68,9 +67,12 @@ export function behaviorDrag() {
         _target = this;
         _event = eventOf(_target, arguments);
 
+        // only force reflow once per drag
+        var pointerLocGetter = utilFastMouse(_surface || _target.parentNode);
+
         var eventTarget = d3_event.target;
         var offset;
-        var startOrigin = point();
+        var startOrigin = pointerLocGetter(d3_event);
         var started = false;
         var selectEnable = d3_event_userSelectSuppress();
 
@@ -88,14 +90,8 @@ export function behaviorDrag() {
         d3_event.stopPropagation();
 
 
-        function point() {
-            var p = _surface || _target.parentNode;
-            return d3_mouse(p);
-        }
-
-
         function pointermove() {
-            var p = point();
+            var p = pointerLocGetter(d3_event);
             var dx = p[0] - startOrigin[0];
             var dy = p[1] - startOrigin[1];
 

modules/behavior/draw.js

@@ -2,7 +2,6 @@ import { dispatch as d3_dispatch } from 'd3-dispatch';
 
 import {
     event as d3_event,
-    mouse as d3_mouse,
     select as d3_select
 } from 'd3-selection';
 
@@ -10,7 +9,7 @@ import { behaviorEdit } from './edit';
 import { behaviorHover } from './hover';
 import { behaviorTail } from './tail';
 import { geoChooseEdge, geoVecLength } from '../geo';
-import { utilKeybinding, utilRebind } from '../util';
+import { utilFastMouse, utilKeybinding, utilRebind } from '../util';
 
 var _usedTails = {};
 var _disableSpace = false;
@@ -61,19 +60,17 @@ export function behaviorDraw(context) {
 
     function pointerdown() {
 
-        function point() {
-            return d3_mouse(context.container().node());
-        }
+        var pointerLocGetter = utilFastMouse(this);
 
         var element = d3_select(this);
         var t1 = +new Date();
-        var p1 = point();
+        var p1 = pointerLocGetter(d3_event);
 
         element.on(_pointerPrefix + 'move.draw', null);
 
         d3_select(window).on(_pointerPrefix + 'up.draw', function() {
             var t2 = +new Date();
-            var p2 = point();
+            var p2 = pointerLocGetter(d3_event);
             var dist = geoVecLength(p1, p2);
 
             element.on(_pointerPrefix + 'move.draw', pointermove);
@@ -92,7 +89,7 @@ export function behaviorDraw(context) {
                     d3_select(window).on('click.draw-block', null);
                 }, 500);
 
-                click(d3_mouse(context.surface().node()));
+                click(p2);
             }
         }, true);
     }

modules/behavior/select.js

@@ -1,4 +1,4 @@
-import { event as d3_event, mouse as d3_mouse, select as d3_select } from 'd3-selection';
+import { event as d3_event, select as d3_select } from 'd3-selection';
 
 import { geoVecLength } from '../geo';
 import { modeBrowse } from '../modes/browse';
@@ -8,6 +8,7 @@ import { modeSelectNote } from '../modes/select_note';
 import { modeSelectError } from '../modes/select_error';
 import { osmEntity, osmNote, QAItem } from '../osm';
 import { utilArrayIdentical } from '../util/array';
+import { utilFastMouse } from '../util/util';
 
 
 export function behaviorSelect(context) {
@@ -22,7 +23,7 @@ export function behaviorSelect(context) {
     var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
 
     function point() {
-        return d3_mouse(context.container().node());
+        return utilFastMouse(context.container().node())(d3_event);
     }
 
 

modules/util/double_up.js

@@ -1,6 +1,7 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
-import { event as d3_event, mouse as d3_mouse } from 'd3-selection';
+import { event as d3_event } from 'd3-selection';
 
+import { utilFastMouse } from './util';
 import { utilRebind } from './rebind';
 import { geoVecLength } from '../geo/vector';
 
@@ -26,8 +27,7 @@ export function utilDoubleUp() {
         // ignore right-click
         if (d3_event.ctrlKey || d3_event.button === 2) return;
 
-        // d3_mouse works since pointer events inherit from mouse events
-        var loc = d3_mouse(this);
+        var loc = utilFastMouse(this)(d3_event);
 
         if (_pointer && !pointerIsValidFor(loc)) {
             // if this pointer is no longer valid, clear it so another can be started
@@ -53,7 +53,7 @@ export function utilDoubleUp() {
         _pointer.upCount += 1;
 
         if (_pointer.upCount === 2) { // double up!
-            var loc = d3_mouse(this);
+            var loc = utilFastMouse(this)(d3_event);
             if (pointerIsValidFor(loc)) {
                 dispatch.call('doubleUp', this, loc);
             }
@@ -73,7 +73,7 @@ export function utilDoubleUp() {
             // fallback to dblclick
             selection
                 .on('dblclick.doubleUp', function() {
-                    dispatch.call('doubleUp', this, d3_mouse(this));
+                    dispatch.call('doubleUp', this, utilFastMouse(this)(d3_event));
                 });
         }
     }

modules/util/zoom_pan.js

@@ -3,12 +3,12 @@
 
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { interpolateZoom } from 'd3-interpolate';
-import { event as d3_event, customEvent as d3_customEvent, mouse as d3_mouse } from 'd3-selection';
+import { event as d3_event, customEvent as d3_customEvent } from 'd3-selection';
 import { interrupt as d3_interrupt } from 'd3-transition';
 import ZoomEvent from '../../node_modules/d3-zoom/src/event.js';
 import { Transform, identity } from '../../node_modules/d3-zoom/src/transform.js';
 
-import { utilFunctor } from './util';
+import { utilFastMouse, utilFunctor } from './util';
 
 // Ignore right-click, since that should open the context menu.
 function defaultFilter() {
@@ -54,10 +54,9 @@ export function utilZoomPan() {
       wheelDelta = defaultWheelDelta,
       scaleExtent = [0, Infinity],
       translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],
-      duration = 250,
       interpolate = interpolateZoom,
       listeners = d3_dispatch('start', 'zoom', 'end'),
-      wheelDelay = 150;
+      _wheelDelay = 150;
 
   function zoom(selection) {
     selection
@@ -205,7 +204,7 @@ export function utilZoomPan() {
     var g = gesture(this, arguments),
         t = this.__zoom,
         k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))),
-        p = d3_mouse(this);
+        p = utilFastMouse(this)(d3_event);
 
     // If the mouse is in the same location as before, reuse it.
     // If there were recent wheel events, reset the wheel idle timeout.
@@ -228,7 +227,7 @@ export function utilZoomPan() {
 
     d3_event.preventDefault();
     d3_event.stopImmediatePropagation();
-    g.wheel = setTimeout(wheelidled, wheelDelay);
+    g.wheel = setTimeout(wheelidled, _wheelDelay);
     g.zoom('mouse', constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
 
     function wheelidled() {
@@ -237,18 +236,20 @@ export function utilZoomPan() {
     }
   }
 
-  var downPointerIDs = new Set();
+  var _downPointerIDs = new Set();
+  var _pointerLocGetter;
 
   function pointerdown() {
-    downPointerIDs.add(d3_event.pointerId);
+    _downPointerIDs.add(d3_event.pointerId);
 
     if (!filter.apply(this, arguments)) return;
 
-    var g = gesture(this, arguments, downPointerIDs.size === 1);
+    var g = gesture(this, arguments, _downPointerIDs.size === 1);
     var started;
 
     d3_event.stopImmediatePropagation();
-    var loc = d3_mouse(this);
+    _pointerLocGetter = utilFastMouse(this);
+    var loc = _pointerLocGetter(d3_event);
     var p = [loc, this.__zoom.invert(loc), d3_event.pointerId];
     if (!g.pointer0) {
        g.pointer0 = p;
@@ -275,8 +276,8 @@ export function utilZoomPan() {
     if ((isPointer0 || isPointer1) && 'buttons' in d3_event && !d3_event.buttons) {
       // The pointer went up without ending the gesture somehow, e.g.
       // a down mouse was moved off the map and released. End it here.
-      if (g.pointer0) downPointerIDs.delete(g.pointer0[2]);
-      if (g.pointer1) downPointerIDs.delete(g.pointer1[2]);
+      if (g.pointer0) _downPointerIDs.delete(g.pointer0[2]);
+      if (g.pointer1) _downPointerIDs.delete(g.pointer1[2]);
       g.end();
       return;
     }
@@ -284,7 +285,7 @@ export function utilZoomPan() {
     d3_event.preventDefault();
     d3_event.stopImmediatePropagation();
 
-    var loc = d3_mouse(this);
+    var loc = _pointerLocGetter(d3_event);
     var t, p, l;
 
     if (isPointer0) g.pointer0[0] = loc;
@@ -308,7 +309,7 @@ export function utilZoomPan() {
   }
 
   function pointerup() {
-    downPointerIDs.delete(d3_event.pointerId);
+    _downPointerIDs.delete(d3_event.pointerId);
 
     if (!this.__zooming) return;
 
@@ -353,10 +354,6 @@ export function utilZoomPan() {
     return arguments.length ? (constrain = _, zoom) : constrain;
   };
 
-  zoom.duration = function(_) {
-    return arguments.length ? (duration = +_, zoom) : duration;
-  };
-
   zoom.interpolate = function(_) {
     return arguments.length ? (interpolate = _, zoom) : interpolate;
   };