d3-brush - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0-rc.1

dist/d3-brush.js

@@ -1,2 +0,2 @@
-// https://d3js.org/d3-brush/ v1.1.5 Copyright 2019 Mike Bostock
+// https://d3js.org/d3-brush/ v2.0.0-rc.1 Copyright 2020 Mike Bostock
 (function (global, factory) {
@@ -8,21 +8,26 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-dispatch'), require('d3-drag'), require('d3-interpolate'), require('d3-selection'), require('d3-transition')) :
 
-function constant(x) {
-  return function() {
-    return x;
-  };
-}
+var constant = x => () => x;
 
-function BrushEvent(target, type, selection) {
-  this.target = target;
-  this.type = type;
-  this.selection = selection;
+function BrushEvent(type, {
+  sourceEvent,
+  target,
+  selection,
+  dispatch
+}) {
+  Object.defineProperties(this, {
+    type: {value: type, enumerable: true, configurable: true},
+    sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},
+    target: {value: target, enumerable: true, configurable: true},
+    selection: {value: selection, enumerable: true, configurable: true},
+    _: {value: dispatch}
+  });
 }
 
-function nopropagation() {
-  d3Selection.event.stopImmediatePropagation();
+function nopropagation(event) {
+  event.stopImmediatePropagation();
 }
 
-function noevent() {
-  d3Selection.event.preventDefault();
-  d3Selection.event.stopImmediatePropagation();
+function noevent(event) {
+  event.preventDefault();
+  event.stopImmediatePropagation();
 }
@@ -35,2 +40,4 @@
 
+const {abs, max, min} = Math;
+
 function number1(e) {
@@ -44,8 +51,2 @@ return [+e[0], +e[1]];
 
-function toucher(identifier) {
-  return function(target) {
-    return d3Selection.touch(target, d3Selection.event.touches, identifier);
-  };
-}
-
 var X = {
@@ -134,4 +135,4 @@ name: "x",
 // Ignore right-click, since that should open the context menu.
-function defaultFilter() {
-  return !d3Selection.event.ctrlKey && !d3Selection.event.button;
+function defaultFilter(event) {
+  return !event.ctrlKey && !event.button;
 }
@@ -242,6 +243,6 @@
   brush.move = function(group, selection) {
-    if (group.selection) {
+    if (group.tween) {
       group
-          .on("start.brush", function() { emitter(this, arguments).beforestart().start(); })
-          .on("interrupt.brush end.brush", function() { emitter(this, arguments).end(); })
+          .on("start.brush", function(event) { emitter(this, arguments).beforestart().start(event); })
+          .on("interrupt.brush end.brush", function(event) { emitter(this, arguments).end(event); })
           .tween("brush", function() {
@@ -315,6 +316,7 @@ var that = this,
   function emitter(that, args, clean) {
-    return (!clean && that.__brush.emitter) || new Emitter(that, args);
+    var emit = that.__brush.emitter;
+    return emit && (!clean || !emit.clean) ? emit : new Emitter(that, args, clean);
   }
 
-  function Emitter(that, args) {
+  function Emitter(that, args, clean) {
     this.that = that;
@@ -324,2 +326,3 @@ this.args = args;
     this.active = 0;
+    this.clean = clean;
   }
@@ -332,27 +335,38 @@
     },
-    start: function() {
-      if (this.starting) this.starting = false, this.emit("start");
-      else this.emit("brush");
+    start: function(event) {
+      if (this.starting) this.starting = false, this.emit("start", event);
+      else this.emit("brush", event);
       return this;
     },
-    brush: function() {
-      this.emit("brush");
+    brush: function(event) {
+      this.emit("brush", event);
       return this;
     },
-    end: function() {
-      if (--this.active === 0) delete this.state.emitter, this.emit("end");
+    end: function(event) {
+      if (--this.active === 0) delete this.state.emitter, this.emit("end", event);
       return this;
     },
-    emit: function(type) {
-      d3Selection.customEvent(new BrushEvent(brush, type, dim.output(this.state.selection)), listeners.apply, listeners, [type, this.that, this.args]);
+    emit: function(type, event) {
+      var d = d3Selection.select(this.that).datum();
+      listeners.call(
+        type,
+        this.that,
+        new BrushEvent(type, {
+          sourceEvent: event,
+          target: brush,
+          selection: dim.output(this.state.selection),
+          dispatch: listeners
+        }),
+        d
+      );
     }
   };
 
-  function started() {
-    if (touchending && !d3Selection.event.touches) return;
+  function started(event) {
+    if (touchending && !event.touches) return;
     if (!filter.apply(this, arguments)) return;
 
     var that = this,
-        type = d3Selection.event.target.__data__.type,
-        mode = (keys && d3Selection.event.metaKey ? type = "overlay" : type) === "selection" ? MODE_DRAG : (keys && d3Selection.event.altKey ? MODE_CENTER : MODE_HANDLE),
+        type = event.target.__data__.type,
+        mode = (keys && event.metaKey ? type = "overlay" : type) === "selection" ? MODE_DRAG : (keys && event.altKey ? MODE_CENTER : MODE_HANDLE),
         signX = dim === Y ? null : signsX[type],
@@ -370,16 +384,24 @@ signY = dim === X ? null : signsY[type],
         moving,
-        shifting = signX && signY && keys && d3Selection.event.shiftKey,
+        shifting = signX && signY && keys && event.shiftKey,
         lockX,
         lockY,
-        pointer = d3Selection.event.touches ? toucher(d3Selection.event.changedTouches[0].identifier) : d3Selection.mouse,
-        point0 = pointer(that),
-        point = point0,
-        emit = emitter(that, arguments, true).beforestart();
+        points = Array.from(event.touches || [event], t => {
+          const i = t.identifier;
+          t = d3Selection.pointer(t, that);
+          t.point0 = t.slice();
+          t.identifier = i;
+          return t;
+        });
 
     if (type === "overlay") {
       if (selection) moving = true;
-      state.selection = selection = [
-        [w0 = dim === Y ? W : point0[0], n0 = dim === X ? N : point0[1]],
-        [e0 = dim === Y ? E : w0, s0 = dim === X ? S : n0]
-      ];
+      const pts = [points[0], points[1] || points[0]];
+      state.selection = selection = [[
+          w0 = dim === Y ? W : min(pts[0][0], pts[1][0]),
+          n0 = dim === X ? N : min(pts[0][1], pts[1][1])
+        ], [
+          e0 = dim === Y ? E : max(pts[0][0], pts[1][0]),
+          s0 = dim === X ? S : max(pts[0][1], pts[1][1])
+        ]];
+      if (points.length > 1) move();
     } else {
@@ -403,7 +425,10 @@ w0 = selection[0][0];
 
-    if (d3Selection.event.touches) {
+    d3Transition.interrupt(that);
+    var emit = emitter(that, arguments, true).beforestart();
+
+    if (event.touches) {
       emit.moved = moved;
       emit.ended = ended;
     } else {
-      var view = d3Selection.select(d3Selection.event.view)
+      var view = d3Selection.select(event.view)
           .on("mousemove.brush", moved, true)
@@ -415,23 +440,29 @@ .on("mouseup.brush", ended, true);
 
-      d3Drag.dragDisable(d3Selection.event.view);
+      d3Drag.dragDisable(event.view);
     }
 
-    nopropagation();
-    d3Transition.interrupt(that);
     redraw.call(that);
     emit.start();
 
-    function moved() {
-      var point1 = pointer(that);
-      if (shifting && !lockX && !lockY) {
-        if (Math.abs(point1[0] - point[0]) > Math.abs(point1[1] - point[1])) lockY = true;
-        else lockX = true;
+    function moved(event) {
+      for (const p of event.changedTouches || [event]) {
+        for (const d of points)
+          if (d.identifier === p.identifier) d.cur = d3Selection.pointer(p, that);
       }
-      point = point1;
+      if (shifting && !lockX && !lockY && points.length === 1) {
+        const point = points[0];
+        if (abs(point.cur[0] - point[0]) > abs(point.cur[1] - point[1]))
+          lockY = true;
+        else
+          lockX = true;
+      }
+      for (const point of points)
+        if (point.cur) point[0] = point.cur[0], point[1] = point.cur[1];
       moving = true;
-      noevent();
-      move();
+      noevent(event);
+      move(event);
     }
 
-    function move() {
+    function move(event) {
+      const point = points[0], point0 = point.point0;
       var t;
@@ -445,16 +476,21 @@
         case MODE_DRAG: {
-          if (signX) dx = Math.max(W - w0, Math.min(E - e0, dx)), w1 = w0 + dx, e1 = e0 + dx;
-          if (signY) dy = Math.max(N - n0, Math.min(S - s0, dy)), n1 = n0 + dy, s1 = s0 + dy;
+          if (signX) dx = max(W - w0, min(E - e0, dx)), w1 = w0 + dx, e1 = e0 + dx;
+          if (signY) dy = max(N - n0, min(S - s0, dy)), n1 = n0 + dy, s1 = s0 + dy;
           break;
         }
         case MODE_HANDLE: {
-          if (signX < 0) dx = Math.max(W - w0, Math.min(E - w0, dx)), w1 = w0 + dx, e1 = e0;
-          else if (signX > 0) dx = Math.max(W - e0, Math.min(E - e0, dx)), w1 = w0, e1 = e0 + dx;
-          if (signY < 0) dy = Math.max(N - n0, Math.min(S - n0, dy)), n1 = n0 + dy, s1 = s0;
-          else if (signY > 0) dy = Math.max(N - s0, Math.min(S - s0, dy)), n1 = n0, s1 = s0 + dy;
+          if (points[1]) {
+            if (signX) w1 = max(W, min(E, points[0][0])), e1 = max(W, min(E, points[1][0])), signX = 1;
+            if (signY) n1 = max(N, min(S, points[0][1])), s1 = max(N, min(S, points[1][1])), signY = 1;
+          } else {
+            if (signX < 0) dx = max(W - w0, min(E - w0, dx)), w1 = w0 + dx, e1 = e0;
+            else if (signX > 0) dx = max(W - e0, min(E - e0, dx)), w1 = w0, e1 = e0 + dx;
+            if (signY < 0) dy = max(N - n0, min(S - n0, dy)), n1 = n0 + dy, s1 = s0;
+            else if (signY > 0) dy = max(N - s0, min(S - s0, dy)), n1 = n0, s1 = s0 + dy;
+          }
           break;
         }
         case MODE_CENTER: {
-          if (signX) w1 = Math.max(W, Math.min(E, w0 - dx * signX)), e1 = Math.max(W, Math.min(E, e0 + dx * signX));
-          if (signY) n1 = Math.max(N, Math.min(S, n0 - dy * signY)), s1 = Math.max(N, Math.min(S, s0 + dy * signY));
+          if (signX) w1 = max(W, min(E, w0 - dx * signX)), e1 = max(W, min(E, e0 + dx * signX));
+          if (signY) n1 = max(N, min(S, n0 - dy * signY)), s1 = max(N, min(S, s0 + dy * signY));
           break;
@@ -488,14 +524,14 @@ }
         redraw.call(that);
-        emit.brush();
+        emit.brush(event);
       }
     }
 
-    function ended() {
-      nopropagation();
-      if (d3Selection.event.touches) {
-        if (d3Selection.event.touches.length) return;
+    function ended(event) {
+      nopropagation(event);
+      if (event.touches) {
+        if (event.touches.length) return;
         if (touchending) clearTimeout(touchending);
         touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
       } else {
-        d3Drag.dragEnable(d3Selection.event.view, moving);
+        d3Drag.dragEnable(event.view, moving);
         view.on("keydown.brush keyup.brush mousemove.brush mouseup.brush", null);
@@ -507,7 +543,7 @@ }
       if (empty(selection)) state.selection = null, redraw.call(that);
-      emit.end();
+      emit.end(event);
     }
 
-    function keydowned() {
-      switch (d3Selection.event.keyCode) {
+    function keydowned(event) {
+      switch (event.keyCode) {
         case 16: { // SHIFT
@@ -538,7 +574,7 @@ shifting = signX && signY;
       }
-      noevent();
+      noevent(event);
     }
 
-    function keyupped() {
-      switch (d3Selection.event.keyCode) {
+    function keyupped(event) {
+      switch (event.keyCode) {
         case 16: { // SHIFT
@@ -562,3 +598,3 @@ if (shifting) {
           if (mode === MODE_SPACE) {
-            if (d3Selection.event.altKey) {
+            if (event.altKey) {
               if (signX) e0 = e1 - dx * signX, w0 = w1 + dx * signX;
@@ -579,12 +615,12 @@ if (signY) s0 = s1 - dy * signY, n0 = n1 + dy * signY;
       }
-      noevent();
+      noevent(event);
     }
   }
 
-  function touchmoved() {
-    emitter(this, arguments).moved();
+  function touchmoved(event) {
+    emitter(this, arguments).moved(event);
   }
 
-  function touchended() {
-    emitter(this, arguments).ended();
+  function touchended(event) {
+    emitter(this, arguments).ended(event);
   }
@@ -591,0 +627,0 @@

dist/d3-brush.min.js

@@ -1,2 +0,2 @@
-// https://d3js.org/d3-brush/ v1.1.5 Copyright 2019 Mike Bostock
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],e):e((t=t||self).d3=t.d3||{},t.d3,t.d3,t.d3,t.d3,t.d3)}(this,function(t,e,n,r,i,s){"use strict";function u(t){return function(){return t}}function a(t,e,n){this.target=t,this.type=e,this.selection=n}function o(){i.event.stopImmediatePropagation()}function l(){i.event.preventDefault(),i.event.stopImmediatePropagation()}var c={name:"drag"},h={name:"space"},f={name:"handle"},d={name:"center"};function p(t){return[+t[0],+t[1]]}function v(t){return[p(t[0]),p(t[1])]}var y={name:"x",handles:["w","e"].map(k),input:function(t,e){return null==t?null:[[+t[0],e[0][1]],[+t[1],e[1][1]]]},output:function(t){return t&&[t[0][0],t[1][0]]}},m={name:"y",handles:["n","s"].map(k),input:function(t,e){return null==t?null:[[e[0][0],+t[0]],[e[1][0],+t[1]]]},output:function(t){return t&&[t[0][1],t[1][1]]}},b={name:"xy",handles:["n","w","e","s","nw","ne","sw","se"].map(k),input:function(t){return null==t?null:v(t)},output:function(t){return t}},w={overlay:"crosshair",selection:"move",n:"ns-resize",e:"ew-resize",s:"ns-resize",w:"ew-resize",nw:"nwse-resize",ne:"nesw-resize",se:"nwse-resize",sw:"nesw-resize"},g={e:"w",w:"e",nw:"ne",ne:"nw",se:"sw",sw:"se"},x={n:"s",s:"n",nw:"sw",ne:"se",se:"ne",sw:"nw"},M={overlay:1,selection:1,n:null,e:1,s:null,w:-1,nw:-1,ne:1,se:1,sw:-1},_={overlay:1,selection:1,n:-1,e:null,s:1,w:null,nw:-1,ne:-1,se:1,sw:1};function k(t){return{type:t}}function z(){return!i.event.ctrlKey&&!i.event.button}function A(){var t=this.ownerSVGElement||this;return t.hasAttribute("viewBox")?[[(t=t.viewBox.baseVal).x,t.y],[t.x+t.width,t.y+t.height]]:[[0,0],[t.width.baseVal.value,t.height.baseVal.value]]}function q(){return navigator.maxTouchPoints||"ontouchstart"in this}function K(t){for(;!t.__brush;)if(!(t=t.parentNode))return;return t.__brush}function E(t){var p,b=A,E=z,P=q,T=!0,V=e.dispatch("start","brush","end"),S=6;function j(e){var n=e.property("__brush",O).selectAll(".overlay").data([k("overlay")]);n.enter().append("rect").attr("class","overlay").attr("pointer-events","all").attr("cursor",w.overlay).merge(n).each(function(){var t=K(this).extent;i.select(this).attr("x",t[0][0]).attr("y",t[0][1]).attr("width",t[1][0]-t[0][0]).attr("height",t[1][1]-t[0][1])}),e.selectAll(".selection").data([k("selection")]).enter().append("rect").attr("class","selection").attr("cursor",w.selection).attr("fill","#777").attr("fill-opacity",.3).attr("stroke","#fff").attr("shape-rendering","crispEdges");var r=e.selectAll(".handle").data(t.handles,function(t){return t.type});r.exit().remove(),r.enter().append("rect").attr("class",function(t){return"handle handle--"+t.type}).attr("cursor",function(t){return w[t.type]}),e.each(B).attr("fill","none").attr("pointer-events","all").on("mousedown.brush",I).filter(P).on("touchstart.brush",I).on("touchmove.brush",G).on("touchend.brush touchcancel.brush",N).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function B(){var t=i.select(this),e=K(this).selection;e?(t.selectAll(".selection").style("display",null).attr("x",e[0][0]).attr("y",e[0][1]).attr("width",e[1][0]-e[0][0]).attr("height",e[1][1]-e[0][1]),t.selectAll(".handle").style("display",null).attr("x",function(t){return"e"===t.type[t.type.length-1]?e[1][0]-S/2:e[0][0]-S/2}).attr("y",function(t){return"s"===t.type[0]?e[1][1]-S/2:e[0][1]-S/2}).attr("width",function(t){return"n"===t.type||"s"===t.type?e[1][0]-e[0][0]+S:S}).attr("height",function(t){return"e"===t.type||"w"===t.type?e[1][1]-e[0][1]+S:S})):t.selectAll(".selection,.handle").style("display","none").attr("x",null).attr("y",null).attr("width",null).attr("height",null)}function C(t,e,n){return!n&&t.__brush.emitter||new D(t,e)}function D(t,e){this.that=t,this.args=e,this.state=t.__brush,this.active=0}function I(){if((!p||i.event.touches)&&E.apply(this,arguments)){var e,r,u,a,v,b,k,z,A,q,P,V,S=this,j=i.event.target.__data__.type,D="selection"===(T&&i.event.metaKey?j="overlay":j)?c:T&&i.event.altKey?d:f,I=t===m?null:M[j],G=t===y?null:_[j],N=K(S),O=N.extent,X=N.selection,Y=O[0][0],F=O[0][1],H=O[1][0],J=O[1][1],L=0,Q=0,R=I&&G&&T&&i.event.shiftKey,U=i.event.touches?(V=i.event.changedTouches[0].identifier,function(t){return i.touch(t,i.event.touches,V)}):i.mouse,W=U(S),Z=W,$=C(S,arguments,!0).beforestart();"overlay"===j?(X&&(A=!0),N.selection=X=[[e=t===m?Y:W[0],u=t===y?F:W[1]],[v=t===m?H:e,k=t===y?J:u]]):(e=X[0][0],u=X[0][1],v=X[1][0],k=X[1][1]),r=e,a=u,b=v,z=k;var tt=i.select(S).attr("pointer-events","none"),et=tt.selectAll(".overlay").attr("cursor",w[j]);if(i.event.touches)$.moved=rt,$.ended=st;else{var nt=i.select(i.event.view).on("mousemove.brush",rt,!0).on("mouseup.brush",st,!0);T&&nt.on("keydown.brush",function(){switch(i.event.keyCode){case 16:R=I&&G;break;case 18:D===f&&(I&&(v=b-L*I,e=r+L*I),G&&(k=z-Q*G,u=a+Q*G),D=d,it());break;case 32:D!==f&&D!==d||(I<0?v=b-L:I>0&&(e=r-L),G<0?k=z-Q:G>0&&(u=a-Q),D=h,et.attr("cursor",w.selection),it());break;default:return}l()},!0).on("keyup.brush",function(){switch(i.event.keyCode){case 16:R&&(q=P=R=!1,it());break;case 18:D===d&&(I<0?v=b:I>0&&(e=r),G<0?k=z:G>0&&(u=a),D=f,it());break;case 32:D===h&&(i.event.altKey?(I&&(v=b-L*I,e=r+L*I),G&&(k=z-Q*G,u=a+Q*G),D=d):(I<0?v=b:I>0&&(e=r),G<0?k=z:G>0&&(u=a),D=f),et.attr("cursor",w[j]),it());break;default:return}l()},!0),n.dragDisable(i.event.view)}o(),s.interrupt(S),B.call(S),$.start()}function rt(){var t=U(S);!R||q||P||(Math.abs(t[0]-Z[0])>Math.abs(t[1]-Z[1])?P=!0:q=!0),Z=t,A=!0,l(),it()}function it(){var t;switch(L=Z[0]-W[0],Q=Z[1]-W[1],D){case h:case c:I&&(L=Math.max(Y-e,Math.min(H-v,L)),r=e+L,b=v+L),G&&(Q=Math.max(F-u,Math.min(J-k,Q)),a=u+Q,z=k+Q);break;case f:I<0?(L=Math.max(Y-e,Math.min(H-e,L)),r=e+L,b=v):I>0&&(L=Math.max(Y-v,Math.min(H-v,L)),r=e,b=v+L),G<0?(Q=Math.max(F-u,Math.min(J-u,Q)),a=u+Q,z=k):G>0&&(Q=Math.max(F-k,Math.min(J-k,Q)),a=u,z=k+Q);break;case d:I&&(r=Math.max(Y,Math.min(H,e-L*I)),b=Math.max(Y,Math.min(H,v+L*I))),G&&(a=Math.max(F,Math.min(J,u-Q*G)),z=Math.max(F,Math.min(J,k+Q*G)))}b<r&&(I*=-1,t=e,e=v,v=t,t=r,r=b,b=t,j in g&&et.attr("cursor",w[j=g[j]])),z<a&&(G*=-1,t=u,u=k,k=t,t=a,a=z,z=t,j in x&&et.attr("cursor",w[j=x[j]])),N.selection&&(X=N.selection),q&&(r=X[0][0],b=X[1][0]),P&&(a=X[0][1],z=X[1][1]),X[0][0]===r&&X[0][1]===a&&X[1][0]===b&&X[1][1]===z||(N.selection=[[r,a],[b,z]],B.call(S),$.brush())}function st(){if(o(),i.event.touches){if(i.event.touches.length)return;p&&clearTimeout(p),p=setTimeout(function(){p=null},500)}else n.dragEnable(i.event.view,A),nt.on("keydown.brush keyup.brush mousemove.brush mouseup.brush",null);tt.attr("pointer-events","all"),et.attr("cursor",w.overlay),N.selection&&(X=N.selection),function(t){return t[0][0]===t[1][0]||t[0][1]===t[1][1]}(X)&&(N.selection=null,B.call(S)),$.end()}}function G(){C(this,arguments).moved()}function N(){C(this,arguments).ended()}function O(){var e=this.__brush||{selection:null};return e.extent=v(b.apply(this,arguments)),e.dim=t,e}return j.move=function(e,n){e.selection?e.on("start.brush",function(){C(this,arguments).beforestart().start()}).on("interrupt.brush end.brush",function(){C(this,arguments).end()}).tween("brush",function(){var e=this,i=e.__brush,s=C(e,arguments),u=i.selection,a=t.input("function"==typeof n?n.apply(this,arguments):n,i.extent),o=r.interpolate(u,a);function l(t){i.selection=1===t&&null===a?null:o(t),B.call(e),s.brush()}return null!==u&&null!==a?l:l(1)}):e.each(function(){var e=this,r=arguments,i=e.__brush,u=t.input("function"==typeof n?n.apply(e,r):n,i.extent),a=C(e,r).beforestart();s.interrupt(e),i.selection=null===u?null:u,B.call(e),a.start().brush().end()})},j.clear=function(t){j.move(t,null)},D.prototype={beforestart:function(){return 1==++this.active&&(this.state.emitter=this,this.starting=!0),this},start:function(){return this.starting?(this.starting=!1,this.emit("start")):this.emit("brush"),this},brush:function(){return this.emit("brush"),this},end:function(){return 0==--this.active&&(delete this.state.emitter,this.emit("end")),this},emit:function(e){i.customEvent(new a(j,e,t.output(this.state.selection)),V.apply,V,[e,this.that,this.args])}},j.extent=function(t){return arguments.length?(b="function"==typeof t?t:u(v(t)),j):b},j.filter=function(t){return arguments.length?(E="function"==typeof t?t:u(!!t),j):E},j.touchable=function(t){return arguments.length?(P="function"==typeof t?t:u(!!t),j):P},j.handleSize=function(t){return arguments.length?(S=+t,j):S},j.keyModifiers=function(t){return arguments.length?(T=!!t,j):T},j.on=function(){var t=V.on.apply(V,arguments);return t===V?j:t},j}t.brush=function(){return E(b)},t.brushSelection=function(t){var e=t.__brush;return e?e.dim.output(e.selection):null},t.brushX=function(){return E(y)},t.brushY=function(){return E(m)},Object.defineProperty(t,"__esModule",{value:!0})});
+// https://d3js.org/d3-brush/ v2.0.0-rc.1 Copyright 2020 Mike Bostock
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],e):e((t=t||self).d3=t.d3||{},t.d3,t.d3,t.d3,t.d3,t.d3)}(this,function(t,e,n,r,i,s){"use strict";var u=t=>()=>t;function o(t,{sourceEvent:e,target:n,selection:r,dispatch:i}){Object.defineProperties(this,{type:{value:t,enumerable:!0,configurable:!0},sourceEvent:{value:e,enumerable:!0,configurable:!0},target:{value:n,enumerable:!0,configurable:!0},selection:{value:r,enumerable:!0,configurable:!0},_:{value:i}})}function a(t){t.preventDefault(),t.stopImmediatePropagation()}var l={name:"drag"},c={name:"space"},h={name:"handle"},f={name:"center"};const{abs:d,max:p,min:b}=Math;function y(t){return[+t[0],+t[1]]}function v(t){return[y(t[0]),y(t[1])]}var m={name:"x",handles:["w","e"].map(E),input:function(t,e){return null==t?null:[[+t[0],e[0][1]],[+t[1],e[1][1]]]},output:function(t){return t&&[t[0][0],t[1][0]]}},w={name:"y",handles:["n","s"].map(E),input:function(t,e){return null==t?null:[[e[0][0],+t[0]],[e[1][0],+t[1]]]},output:function(t){return t&&[t[0][1],t[1][1]]}},g={name:"xy",handles:["n","w","e","s","nw","ne","sw","se"].map(E),input:function(t){return null==t?null:v(t)},output:function(t){return t}},_={overlay:"crosshair",selection:"move",n:"ns-resize",e:"ew-resize",s:"ns-resize",w:"ew-resize",nw:"nwse-resize",ne:"nesw-resize",se:"nwse-resize",sw:"nesw-resize"},x={e:"w",w:"e",nw:"ne",ne:"nw",se:"sw",sw:"se"},k={n:"s",s:"n",nw:"sw",ne:"se",se:"ne",sw:"nw"},z={overlay:1,selection:1,n:null,e:1,s:null,w:-1,nw:-1,ne:1,se:1,sw:-1},A={overlay:1,selection:1,n:-1,e:null,s:1,w:null,nw:-1,ne:-1,se:1,sw:1};function E(t){return{type:t}}function q(t){return!t.ctrlKey&&!t.button}function K(){var t=this.ownerSVGElement||this;return t.hasAttribute("viewBox")?[[(t=t.viewBox.baseVal).x,t.y],[t.x+t.width,t.y+t.height]]:[[0,0],[t.width.baseVal.value,t.height.baseVal.value]]}function P(){return navigator.maxTouchPoints||"ontouchstart"in this}function T(t){for(;!t.__brush;)if(!(t=t.parentNode))return;return t.__brush}function V(t){var y,g=K,V=q,j=P,M=!0,S=e.dispatch("start","brush","end"),B=6;function C(e){var n=e.property("__brush",Y).selectAll(".overlay").data([E("overlay")]);n.enter().append("rect").attr("class","overlay").attr("pointer-events","all").attr("cursor",_.overlay).merge(n).each(function(){var t=T(this).extent;i.select(this).attr("x",t[0][0]).attr("y",t[0][1]).attr("width",t[1][0]-t[0][0]).attr("height",t[1][1]-t[0][1])}),e.selectAll(".selection").data([E("selection")]).enter().append("rect").attr("class","selection").attr("cursor",_.selection).attr("fill","#777").attr("fill-opacity",.3).attr("stroke","#fff").attr("shape-rendering","crispEdges");var r=e.selectAll(".handle").data(t.handles,function(t){return t.type});r.exit().remove(),r.enter().append("rect").attr("class",function(t){return"handle handle--"+t.type}).attr("cursor",function(t){return _[t.type]}),e.each(D).attr("fill","none").attr("pointer-events","all").on("mousedown.brush",G).filter(j).on("touchstart.brush",G).on("touchmove.brush",N).on("touchend.brush touchcancel.brush",X).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function D(){var t=i.select(this),e=T(this).selection;e?(t.selectAll(".selection").style("display",null).attr("x",e[0][0]).attr("y",e[0][1]).attr("width",e[1][0]-e[0][0]).attr("height",e[1][1]-e[0][1]),t.selectAll(".handle").style("display",null).attr("x",function(t){return"e"===t.type[t.type.length-1]?e[1][0]-B/2:e[0][0]-B/2}).attr("y",function(t){return"s"===t.type[0]?e[1][1]-B/2:e[0][1]-B/2}).attr("width",function(t){return"n"===t.type||"s"===t.type?e[1][0]-e[0][0]+B:B}).attr("height",function(t){return"e"===t.type||"w"===t.type?e[1][1]-e[0][1]+B:B})):t.selectAll(".selection,.handle").style("display","none").attr("x",null).attr("y",null).attr("width",null).attr("height",null)}function I(t,e,n){var r=t.__brush.emitter;return!r||n&&r.clean?new O(t,e,n):r}function O(t,e,n){this.that=t,this.args=e,this.state=t.__brush,this.active=0,this.clean=n}function G(e){if((!y||e.touches)&&V.apply(this,arguments)){var r,u,o,v,g,E,q,K,P,j,S,B=this,C=e.target.__data__.type,O="selection"===(M&&e.metaKey?C="overlay":C)?l:M&&e.altKey?f:h,G=t===w?null:z[C],N=t===m?null:A[C],X=T(B),Y=X.extent,F=X.selection,H=Y[0][0],J=Y[0][1],L=Y[1][0],Q=Y[1][1],R=0,U=0,W=G&&N&&M&&e.shiftKey,Z=Array.from(e.touches||[e],t=>{const e=t.identifier;return(t=i.pointer(t,B)).point0=t.slice(),t.identifier=e,t});if("overlay"===C){F&&(P=!0);const e=[Z[0],Z[1]||Z[0]];X.selection=F=[[r=t===w?H:b(e[0][0],e[1][0]),o=t===m?J:b(e[0][1],e[1][1])],[g=t===w?L:p(e[0][0],e[1][0]),q=t===m?Q:p(e[0][1],e[1][1])]],Z.length>1&&it()}else r=F[0][0],o=F[0][1],g=F[1][0],q=F[1][1];u=r,v=o,E=g,K=q;var $=i.select(B).attr("pointer-events","none"),tt=$.selectAll(".overlay").attr("cursor",_[C]);s.interrupt(B);var et=I(B,arguments,!0).beforestart();if(e.touches)et.moved=rt,et.ended=st;else{var nt=i.select(e.view).on("mousemove.brush",rt,!0).on("mouseup.brush",st,!0);M&&nt.on("keydown.brush",function(t){switch(t.keyCode){case 16:W=G&&N;break;case 18:O===h&&(G&&(g=E-R*G,r=u+R*G),N&&(q=K-U*N,o=v+U*N),O=f,it());break;case 32:O!==h&&O!==f||(G<0?g=E-R:G>0&&(r=u-R),N<0?q=K-U:N>0&&(o=v-U),O=c,tt.attr("cursor",_.selection),it());break;default:return}a(t)},!0).on("keyup.brush",function(t){switch(t.keyCode){case 16:W&&(j=S=W=!1,it());break;case 18:O===f&&(G<0?g=E:G>0&&(r=u),N<0?q=K:N>0&&(o=v),O=h,it());break;case 32:O===c&&(t.altKey?(G&&(g=E-R*G,r=u+R*G),N&&(q=K-U*N,o=v+U*N),O=f):(G<0?g=E:G>0&&(r=u),N<0?q=K:N>0&&(o=v),O=h),tt.attr("cursor",_[C]),it());break;default:return}a(t)},!0),n.dragDisable(e.view)}D.call(B),et.start()}function rt(t){for(const e of t.changedTouches||[t])for(const t of Z)t.identifier===e.identifier&&(t.cur=i.pointer(e,B));if(W&&!j&&!S&&1===Z.length){const t=Z[0];d(t.cur[0]-t[0])>d(t.cur[1]-t[1])?S=!0:j=!0}for(const t of Z)t.cur&&(t[0]=t.cur[0],t[1]=t.cur[1]);P=!0,a(t),it(t)}function it(t){const e=Z[0],n=e.point0;var i;switch(R=e[0]-n[0],U=e[1]-n[1],O){case c:case l:G&&(R=p(H-r,b(L-g,R)),u=r+R,E=g+R),N&&(U=p(J-o,b(Q-q,U)),v=o+U,K=q+U);break;case h:Z[1]?(G&&(u=p(H,b(L,Z[0][0])),E=p(H,b(L,Z[1][0])),G=1),N&&(v=p(J,b(Q,Z[0][1])),K=p(J,b(Q,Z[1][1])),N=1)):(G<0?(R=p(H-r,b(L-r,R)),u=r+R,E=g):G>0&&(R=p(H-g,b(L-g,R)),u=r,E=g+R),N<0?(U=p(J-o,b(Q-o,U)),v=o+U,K=q):N>0&&(U=p(J-q,b(Q-q,U)),v=o,K=q+U));break;case f:G&&(u=p(H,b(L,r-R*G)),E=p(H,b(L,g+R*G))),N&&(v=p(J,b(Q,o-U*N)),K=p(J,b(Q,q+U*N)))}E<u&&(G*=-1,i=r,r=g,g=i,i=u,u=E,E=i,C in x&&tt.attr("cursor",_[C=x[C]])),K<v&&(N*=-1,i=o,o=q,q=i,i=v,v=K,K=i,C in k&&tt.attr("cursor",_[C=k[C]])),X.selection&&(F=X.selection),j&&(u=F[0][0],E=F[1][0]),S&&(v=F[0][1],K=F[1][1]),F[0][0]===u&&F[0][1]===v&&F[1][0]===E&&F[1][1]===K||(X.selection=[[u,v],[E,K]],D.call(B),et.brush(t))}function st(t){if(function(t){t.stopImmediatePropagation()}(t),t.touches){if(t.touches.length)return;y&&clearTimeout(y),y=setTimeout(function(){y=null},500)}else n.dragEnable(t.view,P),nt.on("keydown.brush keyup.brush mousemove.brush mouseup.brush",null);$.attr("pointer-events","all"),tt.attr("cursor",_.overlay),X.selection&&(F=X.selection),function(t){return t[0][0]===t[1][0]||t[0][1]===t[1][1]}(F)&&(X.selection=null,D.call(B)),et.end(t)}}function N(t){I(this,arguments).moved(t)}function X(t){I(this,arguments).ended(t)}function Y(){var e=this.__brush||{selection:null};return e.extent=v(g.apply(this,arguments)),e.dim=t,e}return C.move=function(e,n){e.tween?e.on("start.brush",function(t){I(this,arguments).beforestart().start(t)}).on("interrupt.brush end.brush",function(t){I(this,arguments).end(t)}).tween("brush",function(){var e=this,i=e.__brush,s=I(e,arguments),u=i.selection,o=t.input("function"==typeof n?n.apply(this,arguments):n,i.extent),a=r.interpolate(u,o);function l(t){i.selection=1===t&&null===o?null:a(t),D.call(e),s.brush()}return null!==u&&null!==o?l:l(1)}):e.each(function(){var e=this,r=arguments,i=e.__brush,u=t.input("function"==typeof n?n.apply(e,r):n,i.extent),o=I(e,r).beforestart();s.interrupt(e),i.selection=null===u?null:u,D.call(e),o.start().brush().end()})},C.clear=function(t){C.move(t,null)},O.prototype={beforestart:function(){return 1==++this.active&&(this.state.emitter=this,this.starting=!0),this},start:function(t){return this.starting?(this.starting=!1,this.emit("start",t)):this.emit("brush",t),this},brush:function(t){return this.emit("brush",t),this},end:function(t){return 0==--this.active&&(delete this.state.emitter,this.emit("end",t)),this},emit:function(e,n){var r=i.select(this.that).datum();S.call(e,this.that,new o(e,{sourceEvent:n,target:C,selection:t.output(this.state.selection),dispatch:S}),r)}},C.extent=function(t){return arguments.length?(g="function"==typeof t?t:u(v(t)),C):g},C.filter=function(t){return arguments.length?(V="function"==typeof t?t:u(!!t),C):V},C.touchable=function(t){return arguments.length?(j="function"==typeof t?t:u(!!t),C):j},C.handleSize=function(t){return arguments.length?(B=+t,C):B},C.keyModifiers=function(t){return arguments.length?(M=!!t,C):M},C.on=function(){var t=S.on.apply(S,arguments);return t===S?C:t},C}t.brush=function(){return V(g)},t.brushSelection=function(t){var e=t.__brush;return e?e.dim.output(e.selection):null},t.brushX=function(){return V(m)},t.brushY=function(){return V(w)},Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "d3-brush",
-  "version": "1.1.5",
+  "version": "2.0.0-rc.1",
+  "publishConfig": {
+    "tag": "next"
+  },
   "description": "Select a one- or two-dimensional region using the mouse or touch.",
@@ -36,7 +39,7 @@ "keywords": [
   "dependencies": {
-    "d3-dispatch": "1",
-    "d3-drag": "1",
-    "d3-interpolate": "1",
-    "d3-selection": "1",
-    "d3-transition": "1"
+    "d3-dispatch": ">=2.0.0-rc.1",
+    "d3-drag": ">=2.0.0-rc.1",
+    "d3-interpolate": ">=2.0.0-rc.1",
+    "d3-selection": ">=2.0.0-rc.3",
+    "d3-transition": ">=2.0.0-rc.1"
   },
@@ -43,0 +46,0 @@ "devDependencies": {

README.md

@@ -5,3 +5,3 @@ # d3-brush
 
-[<img alt="Mona Lisa Histogram" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/mona-lisa.jpg" width="420" height="219">](http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e)
+[<img alt="Mona Lisa Histogram" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/mona-lisa.jpg" width="420" height="219">](https://observablehq.com/@d3/mona-lisa-histogram)
 
@@ -12,7 +12,7 @@ The d3-brush module implements brushing for mouse and touch events using [SVG](https://www.w3.org/TR/SVG/). Click and drag on the brush selection to translate the selection. Click and drag on one of the selection handles to move the corresponding edge (or edges) of the selection. Click and drag on the invisible overlay to define a new brush selection, or click anywhere within the brushable region while holding down the META (⌘) key. Holding down the ALT (⌥) key while moving the brush causes it to reposition around its center, while holding down SPACE locks the current brush size, allowing only translation.
 
-[<img alt="Brush Snapping" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/snapping.png" width="420" height="219">](http://bl.ocks.org/mbostock/6232537)
+[<img alt="Brush Snapping" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/snapping.png" width="420" height="219">](https://observablehq.com/@d3/brush-snapping-transitions)
 
 Or you can have the brush recenter when you click outside the current selection:
 
-[<img alt="Click-to-Recenter" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/recenter.jpg" width="420" height="219">](https://bl.ocks.org/mbostock/6498000)
+[<img alt="Click-to-Recenter" src="https://raw.githubusercontent.com/d3/d3-brush/master/img/recenter.jpg" width="420" height="219">](https://observablehq.com/@d3/click-to-recenter-brush)
 
@@ -24,11 +24,11 @@ ## Installing
 ```html
-<script src="https://d3js.org/d3-color.v1.min.js"></script>
-<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
-<script src="https://d3js.org/d3-ease.v1.min.js"></script>
-<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
-<script src="https://d3js.org/d3-timer.v1.min.js"></script>
-<script src="https://d3js.org/d3-selection.v1.min.js"></script>
-<script src="https://d3js.org/d3-transition.v1.min.js"></script>
-<script src="https://d3js.org/d3-drag.v1.min.js"></script>
-<script src="https://d3js.org/d3-brush.v1.min.js"></script>
+<script src="https://d3js.org/d3-color.v2.min.js"></script>
+<script src="https://d3js.org/d3-dispatch.v2.min.js"></script>
+<script src="https://d3js.org/d3-ease.v2.min.js"></script>
+<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
+<script src="https://d3js.org/d3-timer.v2.min.js"></script>
+<script src="https://d3js.org/d3-selection.v2.min.js"></script>
+<script src="https://d3js.org/d3-transition.v2.min.js"></script>
+<script src="https://d3js.org/d3-drag.v2.min.js"></script>
+<script src="https://d3js.org/d3-brush.v2.min.js"></script>
 <script>
@@ -41,17 +41,19 @@
 
+[Try d3-brush in your browser.](https://observablehq.com/collection/@d3/d3-brush)
+
 ## API Reference
 
-<a href="#brush" name="brush">#</a> d3.<b>brush</b>() [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush" name="brush">#</a> d3.<b>brush</b>() · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/brushable-scatterplot)
 
 Creates a new two-dimensional brush.
 
-<a href="#brushX" name="brushX">#</a> d3.<b>brushX</b>() [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brushX" name="brushX">#</a> d3.<b>brushX</b>() · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/focus-context)
 
 Creates a new one-dimensional brush along the *x*-dimension.
 
-<a href="#brushY" name="brushY">#</a> d3.<b>brushY</b>() [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brushY" name="brushY">#</a> d3.<b>brushY</b>() · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js)
 
 Creates a new one-dimensional brush along the *y*-dimension.
 
-<a href="#_brush" name="_brush">#</a> <i>brush</i>(<i>group</i>) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#_brush" name="_brush">#</a> <i>brush</i>(<i>group</i>) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/brushable-scatterplot-matrix)
 
@@ -91,11 +93,11 @@ Applies the brush to the specified *group*, which must be a [selection](https://github.com/d3/d3-selection) of SVG [G elements](https://www.w3.org/TR/SVG/struct.html#Groups). This function is typically not invoked directly, and is instead invoked via [*selection*.call](https://github.com/d3/d3-selection#selection_call). For example, to render a brush:
 
-<a href="#brush_move" name="brush_move">#</a> <i>brush</i>.<b>move</b>(<i>group</i>, <i>selection</i>) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_move" name="brush_move">#</a> <i>brush</i>.<b>move</b>(<i>group</i>, <i>selection</i>) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/d/93b91f86f9ebc9b9)
 
 Sets the active *selection* of the brush on the specified *group*, which must be a [selection](https://github.com/d3/d3-selection) or a [transition](https://github.com/d3/d3-transition) of SVG [G elements](https://www.w3.org/TR/SVG/struct.html#Groups). The *selection* must be defined as an array of numbers, or null to clear the brush selection. For a [two-dimensional brush](#brush), it must be defined as [[*x0*, *y0*], [*x1*, *y1*]], where *x0* is the minimum *x*-value, *y0* is the minimum *y*-value, *x1* is the maximum *x*-value, and *y1* is the maximum *y*-value. For an [*x*-brush](#brushX), it must be defined as [*x0*, *x1*]; for a [*y*-brush](#brushY), it must be defined as [*y0*, *y1*]. The selection may also be specified as a function which returns such an array; if a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The returned array defines the brush selection for that element.
 
-<a href="#brush_clear" name="brush_clear">#</a> <i>brush</i>.<b>clear</b>(<i>group</i>) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_clear" name="brush_clear">#</a> <i>brush</i>.<b>clear</b>(<i>group</i>) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/double-click-brush-clear)
 
 An alias for [*brush*.move](#brush_move) with the null selection.
 
-<a href="#brush_extent" name="brush_extent">#</a> <i>brush</i>.<b>extent</b>([<i>extent</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_extent" name="brush_extent">#</a> <i>brush</i>.<b>extent</b>([<i>extent</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/brush-snapping)
 
@@ -119,3 +121,3 @@ If *extent* is specified, sets the brushable extent to the specified array of points [[*x0*, *y0*], [*x1*, *y1*]], where [*x0*, *y0*] is the top-left corner and [*x1*, *y1*] is the bottom-right corner, and returns this brush. The *extent* may also be specified as a function which returns such an array; if a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. If *extent* is not specified, returns the current extent accessor, which defaults to:
 
-<a href="#brush_filter" name="brush_filter">#</a> <i>brush</i>.<b>filter</b>([<i>filter</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_filter" name="brush_filter">#</a> <i>brush</i>.<b>filter</b>([<i>filter</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/brush-filter)
 
@@ -125,4 +127,4 @@ If *filter* is specified, sets the filter to the specified function and returns the brush. If *filter* is not specified, returns the current filter, which defaults to:
 ```js
-function filter() {
-  return !d3.event.ctrlKey && !d3.event.button;
+function filter(event) {
+  return !event.ctrlKey && !event.button;
 }
@@ -133,3 +135,3 @@ ```
 
-<a href="#brush_touchable" name="brush_touchable">#</a> <i>brush</i>.<b>touchable</b>([<i>touchable</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_touchable" name="brush_touchable">#</a> <i>brush</i>.<b>touchable</b>([<i>touchable</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js)
 
@@ -146,13 +148,13 @@ If *touchable* is specified, sets the touch support detector to the specified function and returns the brush. If *touchable* is not specified, returns the current touch support detector, which defaults to:
 
-<a href="#brush_keyModifiers" name="brush_keyModifiers">#</a> <i>brush</i>.<b>keyModifiers</b>([<i>modifiers</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_keyModifiers" name="brush_keyModifiers">#</a> <i>brush</i>.<b>keyModifiers</b>([<i>modifiers</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js)
 
 If *modifiers* is specified, sets whether the brush listens to key events during brushing and returns the brush. If *modifiers* is not specified, returns the current behavior, which defaults to true.
 
-<a href="#brush_handleSize" name="brush_handleSize">#</a> <i>brush</i>.<b>handleSize</b>([<i>size</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_handleSize" name="brush_handleSize">#</a> <i>brush</i>.<b>handleSize</b>([<i>size</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js)
 
 If *size* is specified, sets the size of the brush handles to the specified number and returns the brush. If *size* is not specified, returns the current handle size, which defaults to six. This method must be called before [applying the brush](#_brush) to a selection; changing the handle size does not affect brushes that were previously rendered.
 
-<a href="#brush_on" name="brush_on">#</a> <i>brush</i>.<b>on</b>(<i>typenames</i>[, <i>listener</i>]) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brush_on" name="brush_on">#</a> <i>brush</i>.<b>on</b>(<i>typenames</i>[, <i>listener</i>]) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js)
 
-If *listener* is specified, sets the event *listener* for the specified *typenames* and returns the brush. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. If *listener* is null, removes the current event listeners for the specified *typenames*, if any. If *listener* is not specified, returns the first currently-assigned listener matching the specified *typenames*, if any. When a specified event is dispatched, each *listener* will be invoked with the same context and arguments as [*selection*.on](https://github.com/d3/d3-selection#selection_on) listeners: the current datum `d` and index `i`, with the `this` context as the current DOM element.
+If *listener* is specified, sets the event *listener* for the specified *typenames* and returns the brush. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. If *listener* is null, removes the current event listeners for the specified *typenames*, if any. If *listener* is not specified, returns the first currently-assigned listener matching the specified *typenames*, if any. When a specified event is dispatched, each *listener* will be invoked with the same context and arguments as [*selection*.on](https://github.com/d3/d3-selection#selection_on) listeners: the current event `event` and datum `d`, with the `this` context as the current DOM element.
 
@@ -167,3 +169,3 @@ The *typenames* is a string containing one or more *typename* separated by whitespace. Each *typename* is a *type*, optionally followed by a period (`.`) and a *name*, such as `brush.foo` and `brush.bar`; the name allows multiple listeners to be registered for the same *type*. The *type* must be one of the following:
 
-<a href="#brushSelection" name="brushSelection">#</a> d3.<b>brushSelection</b>(<i>node</i>) [<>](https://github.com/d3/d3-brush/blob/master/src/brush.js "Source")
+<a href="#brushSelection" name="brushSelection">#</a> d3.<b>brushSelection</b>(<i>node</i>) · [Source](https://github.com/d3/d3-brush/blob/master/src/brush.js), [Examples](https://observablehq.com/@d3/double-click-brush-clear)
 
@@ -174,3 +176,3 @@ Returns the current brush selection for the specified *node*. Internally, an element’s brush state is stored as *element*.\_\_brush; however, you should use this method rather than accessing it directly. If the given *node* has no selection, returns null. Otherwise, the *selection* is defined as an array of numbers. For a [two-dimensional brush](#brush), it is [[*x0*, *y0*], [*x1*, *y1*]], where *x0* is the minimum *x*-value, *y0* is the minimum *y*-value, *x1* is the maximum *x*-value, and *y1* is the maximum *y*-value. For an [*x*-brush](#brushX), it is [*x0*, *x1*]; for a [*y*-brush](#brushY), it is [*y0*, *y1*].
 
-When a [brush event listener](#brush_on) is invoked, [d3.event](https://github.com/d3/d3-selection#event) is set to the current brush event. The *event* object exposes several fields:
+When a [brush event listener](#brush_on) is invoked, it receives the current brush event. The *event* object exposes several fields:
 
@@ -177,0 +179,0 @@ * `target` - the associated [brush behavior](#brush).

src/brush.js

 import {dispatch} from "d3-dispatch";
 import {dragDisable, dragEnable} from "d3-drag";
 import {interpolate} from "d3-interpolate";
-import {customEvent, event, touch, mouse, select} from "d3-selection";
+import {pointer, select} from "d3-selection";
 import {interrupt} from "d3-transition";
@@ -15,2 +15,4 @@ import constant from "./constant.js";
 
+const {abs, max, min} = Math;
+
 function number1(e) {
@@ -24,8 +26,2 @@ return [+e[0], +e[1]];
 
-function toucher(identifier) {
-  return function(target) {
-    return touch(target, event.touches, identifier);
-  };
-}
-
 var X = {
@@ -114,3 +110,3 @@ name: "x",
 // Ignore right-click, since that should open the context menu.
-function defaultFilter() {
+function defaultFilter(event) {
   return !event.ctrlKey && !event.button;
@@ -222,6 +218,6 @@ }
   brush.move = function(group, selection) {
-    if (group.selection) {
+    if (group.tween) {
       group
-          .on("start.brush", function() { emitter(this, arguments).beforestart().start(); })
-          .on("interrupt.brush end.brush", function() { emitter(this, arguments).end(); })
+          .on("start.brush", function(event) { emitter(this, arguments).beforestart().start(event); })
+          .on("interrupt.brush end.brush", function(event) { emitter(this, arguments).end(event); })
           .tween("brush", function() {
@@ -295,6 +291,7 @@ var that = this,
   function emitter(that, args, clean) {
-    return (!clean && that.__brush.emitter) || new Emitter(that, args);
+    var emit = that.__brush.emitter;
+    return emit && (!clean || !emit.clean) ? emit : new Emitter(that, args, clean);
   }
 
-  function Emitter(that, args) {
+  function Emitter(that, args, clean) {
     this.that = that;
@@ -304,2 +301,3 @@ this.args = args;
     this.active = 0;
+    this.clean = clean;
   }
@@ -312,21 +310,32 @@
     },
-    start: function() {
-      if (this.starting) this.starting = false, this.emit("start");
-      else this.emit("brush");
+    start: function(event) {
+      if (this.starting) this.starting = false, this.emit("start", event);
+      else this.emit("brush", event);
       return this;
     },
-    brush: function() {
-      this.emit("brush");
+    brush: function(event) {
+      this.emit("brush", event);
       return this;
     },
-    end: function() {
-      if (--this.active === 0) delete this.state.emitter, this.emit("end");
+    end: function(event) {
+      if (--this.active === 0) delete this.state.emitter, this.emit("end", event);
       return this;
     },
-    emit: function(type) {
-      customEvent(new BrushEvent(brush, type, dim.output(this.state.selection)), listeners.apply, listeners, [type, this.that, this.args]);
+    emit: function(type, event) {
+      var d = select(this.that).datum();
+      listeners.call(
+        type,
+        this.that,
+        new BrushEvent(type, {
+          sourceEvent: event,
+          target: brush,
+          selection: dim.output(this.state.selection),
+          dispatch: listeners
+        }),
+        d
+      );
     }
   };
 
-  function started() {
+  function started(event) {
     if (touchending && !event.touches) return;
@@ -353,13 +362,21 @@ if (!filter.apply(this, arguments)) return;
         lockY,
-        pointer = event.touches ? toucher(event.changedTouches[0].identifier) : mouse,
-        point0 = pointer(that),
-        point = point0,
-        emit = emitter(that, arguments, true).beforestart();
+        points = Array.from(event.touches || [event], t => {
+          const i = t.identifier;
+          t = pointer(t, that);
+          t.point0 = t.slice();
+          t.identifier = i;
+          return t;
+        });
 
     if (type === "overlay") {
       if (selection) moving = true;
-      state.selection = selection = [
-        [w0 = dim === Y ? W : point0[0], n0 = dim === X ? N : point0[1]],
-        [e0 = dim === Y ? E : w0, s0 = dim === X ? S : n0]
-      ];
+      const pts = [points[0], points[1] || points[0]];
+      state.selection = selection = [[
+          w0 = dim === Y ? W : min(pts[0][0], pts[1][0]),
+          n0 = dim === X ? N : min(pts[0][1], pts[1][1])
+        ], [
+          e0 = dim === Y ? E : max(pts[0][0], pts[1][0]),
+          s0 = dim === X ? S : max(pts[0][1], pts[1][1])
+        ]];
+      if (points.length > 1) move();
     } else {
@@ -383,2 +400,5 @@ w0 = selection[0][0];
 
+    interrupt(that);
+    var emit = emitter(that, arguments, true).beforestart();
+
     if (event.touches) {
@@ -398,20 +418,26 @@ emit.moved = moved;
 
-    nopropagation();
-    interrupt(that);
     redraw.call(that);
     emit.start();
 
-    function moved() {
-      var point1 = pointer(that);
-      if (shifting && !lockX && !lockY) {
-        if (Math.abs(point1[0] - point[0]) > Math.abs(point1[1] - point[1])) lockY = true;
-        else lockX = true;
+    function moved(event) {
+      for (const p of event.changedTouches || [event]) {
+        for (const d of points)
+          if (d.identifier === p.identifier) d.cur = pointer(p, that);
       }
-      point = point1;
+      if (shifting && !lockX && !lockY && points.length === 1) {
+        const point = points[0];
+        if (abs(point.cur[0] - point[0]) > abs(point.cur[1] - point[1]))
+          lockY = true;
+        else
+          lockX = true;
+      }
+      for (const point of points)
+        if (point.cur) point[0] = point.cur[0], point[1] = point.cur[1];
       moving = true;
-      noevent();
-      move();
+      noevent(event);
+      move(event);
     }
 
-    function move() {
+    function move(event) {
+      const point = points[0], point0 = point.point0;
       var t;
@@ -425,16 +451,21 @@
         case MODE_DRAG: {
-          if (signX) dx = Math.max(W - w0, Math.min(E - e0, dx)), w1 = w0 + dx, e1 = e0 + dx;
-          if (signY) dy = Math.max(N - n0, Math.min(S - s0, dy)), n1 = n0 + dy, s1 = s0 + dy;
+          if (signX) dx = max(W - w0, min(E - e0, dx)), w1 = w0 + dx, e1 = e0 + dx;
+          if (signY) dy = max(N - n0, min(S - s0, dy)), n1 = n0 + dy, s1 = s0 + dy;
           break;
         }
         case MODE_HANDLE: {
-          if (signX < 0) dx = Math.max(W - w0, Math.min(E - w0, dx)), w1 = w0 + dx, e1 = e0;
-          else if (signX > 0) dx = Math.max(W - e0, Math.min(E - e0, dx)), w1 = w0, e1 = e0 + dx;
-          if (signY < 0) dy = Math.max(N - n0, Math.min(S - n0, dy)), n1 = n0 + dy, s1 = s0;
-          else if (signY > 0) dy = Math.max(N - s0, Math.min(S - s0, dy)), n1 = n0, s1 = s0 + dy;
+          if (points[1]) {
+            if (signX) w1 = max(W, min(E, points[0][0])), e1 = max(W, min(E, points[1][0])), signX = 1;
+            if (signY) n1 = max(N, min(S, points[0][1])), s1 = max(N, min(S, points[1][1])), signY = 1;
+          } else {
+            if (signX < 0) dx = max(W - w0, min(E - w0, dx)), w1 = w0 + dx, e1 = e0;
+            else if (signX > 0) dx = max(W - e0, min(E - e0, dx)), w1 = w0, e1 = e0 + dx;
+            if (signY < 0) dy = max(N - n0, min(S - n0, dy)), n1 = n0 + dy, s1 = s0;
+            else if (signY > 0) dy = max(N - s0, min(S - s0, dy)), n1 = n0, s1 = s0 + dy;
+          }
           break;
         }
         case MODE_CENTER: {
-          if (signX) w1 = Math.max(W, Math.min(E, w0 - dx * signX)), e1 = Math.max(W, Math.min(E, e0 + dx * signX));
-          if (signY) n1 = Math.max(N, Math.min(S, n0 - dy * signY)), s1 = Math.max(N, Math.min(S, s0 + dy * signY));
+          if (signX) w1 = max(W, min(E, w0 - dx * signX)), e1 = max(W, min(E, e0 + dx * signX));
+          if (signY) n1 = max(N, min(S, n0 - dy * signY)), s1 = max(N, min(S, s0 + dy * signY));
           break;
@@ -468,8 +499,8 @@ }
         redraw.call(that);
-        emit.brush();
+        emit.brush(event);
       }
     }
 
-    function ended() {
-      nopropagation();
+    function ended(event) {
+      nopropagation(event);
       if (event.touches) {
@@ -487,6 +518,6 @@ if (event.touches.length) return;
       if (empty(selection)) state.selection = null, redraw.call(that);
-      emit.end();
+      emit.end(event);
     }
 
-    function keydowned() {
+    function keydowned(event) {
       switch (event.keyCode) {
@@ -518,6 +549,6 @@ case 16: { // SHIFT
       }
-      noevent();
+      noevent(event);
     }
 
-    function keyupped() {
+    function keyupped(event) {
       switch (event.keyCode) {
@@ -558,12 +589,12 @@ case 16: { // SHIFT
       }
-      noevent();
+      noevent(event);
     }
   }
 
-  function touchmoved() {
-    emitter(this, arguments).moved();
+  function touchmoved(event) {
+    emitter(this, arguments).moved(event);
   }
 
-  function touchended() {
-    emitter(this, arguments).ended();
+  function touchended(event) {
+    emitter(this, arguments).ended(event);
   }
@@ -570,0 +601,0 @@

src/constant.js

@@ -1,5 +0,1 @@
-export default function(x) {
-  return function() {
-    return x;
-  };
-}
+export default x => () => x;

src/event.js

@@ -1,5 +0,14 @@
-export default function(target, type, selection) {
-  this.target = target;
-  this.type = type;
-  this.selection = selection;
+export default function BrushEvent(type, {
+  sourceEvent,
+  target,
+  selection,
+  dispatch
+}) {
+  Object.defineProperties(this, {
+    type: {value: type, enumerable: true, configurable: true},
+    sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},
+    target: {value: target, enumerable: true, configurable: true},
+    selection: {value: selection, enumerable: true, configurable: true},
+    _: {value: dispatch}
+  });
 }

src/noevent.js

@@ -1,10 +0,8 @@
-import {event} from "d3-selection";
-
-export function nopropagation() {
+export function nopropagation(event) {
   event.stopImmediatePropagation();
 }
 
-export default function() {
+export default function(event) {
   event.preventDefault();
   event.stopImmediatePropagation();
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66365

increased by5.65%

Lines of code

1186

increased by6.37%

Number of lines in readme file

172

increased by1.18%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedd3-color@3.1.0(transitive)

• + Addedd3-dispatch@3.0.1(transitive)

• + Addedd3-drag@3.0.0(transitive)

• + Addedd3-ease@3.0.1(transitive)

• + Addedd3-interpolate@3.0.1(transitive)

• + Addedd3-selection@3.0.0(transitive)

• + Addedd3-timer@3.0.1(transitive)

• + Addedd3-transition@3.0.1(transitive)

• - Removedd3-color@1.4.1(transitive)

• - Removedd3-dispatch@1.0.6(transitive)

• - Removedd3-drag@1.2.5(transitive)

• - Removedd3-ease@1.0.7(transitive)

• - Removedd3-interpolate@1.4.0(transitive)

• - Removedd3-selection@1.4.2(transitive)

• - Removedd3-timer@1.0.10(transitive)

• - Removedd3-transition@1.3.2(transitive)

• Updatedd3-dispatch@>=2.0.0-rc.1

• Updatedd3-drag@>=2.0.0-rc.1

• Updatedd3-interpolate@>=2.0.0-rc.1

• Updatedd3-selection@>=2.0.0-rc.3

• Updatedd3-transition@>=2.0.0-rc.1