d3-drag - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

build/d3-drag.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-  var version = "0.1.1";
+  var version = "0.1.2";
 
@@ -23,6 +23,7 @@ function cancel() {
 
-  function DragEvent(type, subject, id, x, y, dispatch) {
+  function DragEvent(type, subject, id, active, x, y, dispatch) {
     this.type = type;
     this.subject = subject;
     this.identifier = id;
+    this.active = active;
     this.x = x;
@@ -102,3 +103,4 @@ this.y = y;
         y = defaultY,
-        active = {};
+        gestures = {},
+        active = 0;
 
@@ -132,16 +134,15 @@ // I’d like to call preventDefault on mousedown to disable native dragging
       if (!filter.apply(this, arguments)) return;
-      var parent = container.apply(this, arguments);
-      if (!start("mouse", parent, d3Selection.mouse, this, arguments)) return;
+      var parent = container.apply(this, arguments), m;
+      if (!(m = beforestart("mouse", parent, d3Selection.mouse, this, arguments))) return;
       d3Selection.select(d3Selection.event.view).on("mousemove.drag", mousemoved).on("mouseup.drag", mouseupped);
+      m("start");
     }
 
     function mousemoved() {
-      active.mouse("drag");
+      gestures.mouse("drag");
     }
 
     function mouseupped() {
-      var m = active.mouse;
       d3Selection.select(d3Selection.event.view).on("mousemove.drag mouseup.drag", null);
-      delete active.mouse;
-      m("end");
+      gestures.mouse("end");
     }
@@ -152,4 +153,6 @@
       var parent = container.apply(this, arguments);
-      for (var touches = d3Selection.event.changedTouches, i = 0, n = touches.length; i < n; ++i) {
-        start(touches[i].identifier, parent, d3Selection.touch, this, arguments);
+      for (var touches = d3Selection.event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
+        if (t = beforestart(touches[i].identifier, parent, d3Selection.touch, this, arguments)) {
+          t("start");
+        }
       }
@@ -160,3 +163,3 @@ }
       for (var touches = d3Selection.event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
-        if (t = active[touches[i].identifier]) {
+        if (t = gestures[touches[i].identifier]) {
           t("drag");
@@ -169,4 +172,3 @@ }
       for (var touches = d3Selection.event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
-        if (t = active[touches[i].identifier]) {
-          delete active[touches[i].identifier];
+        if (t = gestures[touches[i].identifier]) {
           t("end");
@@ -177,3 +179,3 @@ }
 
-    function start(id, parent, point, that, args) {
+    function beforestart(id, parent, point, that, args) {
       var p0 = point(parent, id), dx, dy,
@@ -183,3 +185,3 @@ sublisteners = listeners.copy(),
 
-      if (!d3Selection.customEvent(new DragEvent("beforestart", node, id, p0[0], p0[1], sublisteners), function() {
+      if (!d3Selection.customEvent(new DragEvent("beforestart", node, id, active, p0[0], p0[1], sublisteners), function() {
         node = d3Selection.event.subject = subject.apply(that, args);
@@ -190,10 +192,13 @@ if (node == null) return false;
         return true;
-      })) return false;
+      })) return;
 
-      (active[id] = function(type, p) {
-        if (p == null) p = point(parent, id);
-        d3Selection.customEvent(new DragEvent(type, node, id, p[0] + dx, p[1] + dy, sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
-      })("start", p0);
-
-      return true;
+      return function gesture(type) {
+        var p, n;
+        switch (type) {
+          case "start": p = p0, gestures[id] = gesture, n = active++; break;
+          case "end": delete gestures[id], --active; // nobreak
+          case "drag": p = point(parent, id), n = active; break;
+        }
+        d3Selection.customEvent(new DragEvent(type, node, id, n, p[0] + dx, p[1] + dy, sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
+      };
     }
@@ -200,0 +205,0 @@

build/d3-drag.min.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-dispatch"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-selection"],e):e(n.d3_drag=n.d3_drag||{},n.d3_dispatch,n.d3_selection)}(this,function(n,e,t){"use strict";function o(){for(var n,e=t.event;n=e.sourceEvent;)e=n;e.preventDefault(),e.stopPropagation()}function i(n){return function(){return n}}function r(n,e,t,o,i,r){this.type=n,this.subject=e,this.identifier=t,this.x=o,this.y=i,this._=r}function u(){t.event.on("drag.noclick",null).on("end.noclick",function(){var n="click.noclick-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);setTimeout(function(){e.on(n,null)},0)})}function c(){var n="dragstart.nodrag-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);t.event.on("end.nodrag",function(){e.on(n,null)})}function s(){var n="selectstart.noselect-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);t.event.on("end.noselect",function(){e.on(n,null)})}function a(){var n=this.ownerDocument.documentElement.style,e=n.MozUserSelect;n.MozUserSelect="none",t.event.on("end.noselect",function(){n.MozUserSelect=e})}function f(){return("onselectstart"in this?s:a).apply(this,arguments)}function l(){return!t.event.button}function d(){return this.parentNode}function v(n){return n}function p(){return t.event.subject.x}function h(){return t.event.subject.y}function g(n){function s(n){n.on("mousedown.drag",a).on("touchstart.drag",m).on("touchmove.drag",b).on("touchend.drag touchcancel.drag",w).style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function a(){if(E.apply(this,arguments)){var n=j.apply(this,arguments);_("mouse",n,t.mouse,this,arguments)&&t.select(t.event.view).on("mousemove.drag",g).on("mouseup.drag",y)}}function g(){z.mouse("drag")}function y(){var n=z.mouse;t.select(t.event.view).on("mousemove.drag mouseup.drag",null),delete z.mouse,n("end")}function m(){if(E.apply(this,arguments))for(var n=j.apply(this,arguments),e=t.event.changedTouches,o=0,i=e.length;i>o;++o)_(e[o].identifier,n,t.touch,this,arguments)}function b(){for(var n,e=t.event.changedTouches,o=0,i=e.length;i>o;++o)(n=z[e[o].identifier])&&n("drag")}function w(){for(var n,e=t.event.changedTouches,o=0,i=e.length;i>o;++o)(n=z[e[o].identifier])&&(delete z[e[o].identifier],n("end"))}function _(n,e,o,i,u){var c,s,a,f=o(e,n),l=M.copy();return t.customEvent(new r("beforestart",a,n,f[0],f[1],l),function(){return a=t.event.subject=k.apply(i,u),null==a?!1:(c=x.apply(i,u)-f[0]||0,s=T.apply(i,u)-f[1]||0,!0)})?((z[n]=function(f,d){null==d&&(d=o(e,n)),t.customEvent(new r(f,a,n,d[0]+c,d[1]+s,l),l.apply,l,[f,i,u])})("start",f),!0):!1}var E=l,j=d,k=v,x=p,T=h,z={},M=e.dispatch("start","drag","end").on("start.nodrag",c).on("start.noselect",f).on("start",n).on("drag.noclick",u).on("drag.noscroll",o);return s.filter=function(n){return arguments.length?(E="function"==typeof n?n:i(!!n),s):E},s.container=function(n){return arguments.length?(j="function"==typeof n?n:i(n),s):j},s.subject=function(n){return arguments.length?(k="function"==typeof n?n:i(n),s):k},s.x=function(n){return arguments.length?(x="function"==typeof n?n:i(+n),s):x},s.y=function(n){return arguments.length?(T="function"==typeof n?n:i(+n),s):T},s.on=function(){var n=M.on.apply(M,arguments);return n===M?s:n},s}var y="0.1.1";r.prototype.on=function(){var n=this._.on.apply(this._,arguments);return n===this._?this:n},n.version=y,n.drag=g});
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-dispatch"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-selection"],e):e(n.d3_drag=n.d3_drag||{},n.d3_dispatch,n.d3_selection)}(this,function(n,e,t){"use strict";function o(){for(var n,e=t.event;n=e.sourceEvent;)e=n;e.preventDefault(),e.stopPropagation()}function i(n){return function(){return n}}function r(n,e,t,o,i,r,c){this.type=n,this.subject=e,this.identifier=t,this.active=o,this.x=i,this.y=r,this._=c}function c(){t.event.on("drag.noclick",null).on("end.noclick",function(){var n="click.noclick-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);setTimeout(function(){e.on(n,null)},0)})}function u(){var n="dragstart.nodrag-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);t.event.on("end.nodrag",function(){e.on(n,null)})}function s(){var n="selectstart.noselect-"+t.event.identifier,e=t.select(t.event.sourceEvent.view).on(n,o,!0);t.event.on("end.noselect",function(){e.on(n,null)})}function a(){var n=this.ownerDocument.documentElement.style,e=n.MozUserSelect;n.MozUserSelect="none",t.event.on("end.noselect",function(){n.MozUserSelect=e})}function f(){return("onselectstart"in this?s:a).apply(this,arguments)}function d(){return!t.event.button}function l(){return this.parentNode}function v(n){return n}function h(){return t.event.subject.x}function p(){return t.event.subject.y}function g(n){function s(n){n.on("mousedown.drag",a).on("touchstart.drag",m).on("touchmove.drag",b).on("touchend.drag touchcancel.drag",w).style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function a(){if(k.apply(this,arguments)){var n,e=E.apply(this,arguments);(n=_("mouse",e,t.mouse,this,arguments))&&(t.select(t.event.view).on("mousemove.drag",g).on("mouseup.drag",y),n("start"))}}function g(){z.mouse("drag")}function y(){t.select(t.event.view).on("mousemove.drag mouseup.drag",null),z.mouse("end")}function m(){if(k.apply(this,arguments))for(var n,e=E.apply(this,arguments),o=t.event.changedTouches,i=0,r=o.length;r>i;++i)(n=_(o[i].identifier,e,t.touch,this,arguments))&&n("start")}function b(){for(var n,e=t.event.changedTouches,o=0,i=e.length;i>o;++o)(n=z[e[o].identifier])&&n("drag")}function w(){for(var n,e=t.event.changedTouches,o=0,i=e.length;i>o;++o)(n=z[e[o].identifier])&&n("end")}function _(n,e,o,i,c){var u,s,a,f=o(e,n),d=S.copy();if(t.customEvent(new r("beforestart",a,n,M,f[0],f[1],d),function(){return a=t.event.subject=j.apply(i,c),null==a?!1:(u=x.apply(i,c)-f[0]||0,s=T.apply(i,c)-f[1]||0,!0)}))return function l(v){var h,p;switch(v){case"start":h=f,z[n]=l,p=M++;break;case"end":delete z[n],--M;case"drag":h=o(e,n),p=M}t.customEvent(new r(v,a,n,p,h[0]+u,h[1]+s,d),d.apply,d,[v,i,c])}}var k=d,E=l,j=v,x=h,T=p,z={},M=0,S=e.dispatch("start","drag","end").on("start.nodrag",u).on("start.noselect",f).on("start",n).on("drag.noclick",c).on("drag.noscroll",o);return s.filter=function(n){return arguments.length?(k="function"==typeof n?n:i(!!n),s):k},s.container=function(n){return arguments.length?(E="function"==typeof n?n:i(n),s):E},s.subject=function(n){return arguments.length?(j="function"==typeof n?n:i(n),s):j},s.x=function(n){return arguments.length?(x="function"==typeof n?n:i(+n),s):x},s.y=function(n){return arguments.length?(T="function"==typeof n?n:i(+n),s):T},s.on=function(){var n=S.on.apply(S,arguments);return n===S?s:n},s}var y="0.1.2";r.prototype.on=function(){var n=this._.on.apply(this._,arguments);return n===this._?this:n},n.version=y,n.drag=g});

build/package.js

 export var name = "d3-drag";
-export var version = "0.1.1";
+export var version = "0.1.2";
 export var description = "Drag and drop SVG, HTML or Canvas using mouse or touch input.";
@@ -4,0 +4,0 @@ export var keywords = ["d3","drag","behavior","interaction"];

package.json

 {
   "name": "d3-drag",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Drag and drop SVG, HTML or Canvas using mouse or touch input.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # d3-drag
 
-[Drag-and-drop](https://en.wikipedia.org/wiki/Drag_and_drop) is an easy-to-learn and simple pointing interaction technique: move the pointer to an object, press and hold to grab it, “drag” the object to a new location, and release to “drop”. You might use drag-and-drop to position nodes in a [force-directed graph](https://github.com/d3/d3-force), to implement a custom [slider](https://en.wikipedia.org/wiki/Slider_\(computing\)), or even to paint lines on a canvas.
+[Drag-and-drop](https://en.wikipedia.org/wiki/Drag_and_drop) is a popular and easy-to-learn pointing gesture: move the pointer to an object, press and hold to grab it, “drag” the object to a new location, and release to “drop”. D3’s [drag behavior](#api-reference) provides a convenient but flexible abstraction for enabling drag-and-drop interaction on [selections](https://github.com/d3/d3-selection). For example, you can use d3-drag to facilitate interaction with a [force-directed graph](https://github.com/d3/d3-force), or a simulation of colliding circles:
 
-Alas, it’s somewhat tedious today to implement robust drag-and-drop using standard browser APIs. Until [Pointer Events](https://www.w3.org/TR/pointerevents/) are widely available, you must handle mouse and touch input separately, and deal with a handful of browser bugs.
+[<img alt="Force Dragging III" src="https://raw.githubusercontent.com/d3/d3-drag/master/img/force-graph.png" width="420" height="219">](http://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)[<img alt="Force Dragging II" src="https://raw.githubusercontent.com/d3/d3-drag/master/img/force-collide.png" width="420" height="219">](http://bl.ocks.org/mbostock/2990a882e007f8384b04827617752738)
 
-This module offers a (hopefully!) painless solution. The [drag behavior](#api-reference) provides a convenient abstraction for drag-and-drop using mouse and touch input. It’s flexible and configurable, too; it’s agnostic about DOM representation, so you can use it to drag SVG, HTML or even Canvas graphics.
+You can also use d3-drag to implement custom user interface elements, such as a slider. But the drag behavior isn’t just for moving elements around; there are a variety of ways to respond to a drag gesture. For example, you can use it to lasso elements in a scatterplot, or to paint lines on a canvas:
 
+[<img alt="Line Drawing" src="https://raw.githubusercontent.com/d3/d3-drag/master/img/drawing.png" width="420" height="219">](http://bl.ocks.org/mbostock/f705fc55e6f26df29354)
+
+The drag behavior is agnostic about the DOM, so you can use it with SVG, HTML or even Canvas! And you can extend it with advanced selection techniques, such as a Voronoi overlay or a closest-target search:
+
+[<img alt="Circle Dragging IV" src="https://raw.githubusercontent.com/d3/d3-drag/master/img/voronoi.png" width="420" height="219">](http://bl.ocks.org/mbostock/ec10387f24c1fad2acac3bc11eb218a5)[<img alt="Circle Dragging II" src="https://raw.githubusercontent.com/d3/d3-drag/master/img/canvas.png" width="420" height="219">](http://bl.ocks.org/mbostock/c206c20294258c18832ff80d8fd395c3)
+
+Best of all, the drag behavior automatically unifies mouse and touch input, and avoids browser idiosyncrasies. When [Pointer Events](https://www.w3.org/TR/pointerevents/) are more widely available, the drag behavior will support those, too.
+
 ## Installing
@@ -100,3 +108,3 @@
 
-The default subject is the [datum](https://github.com/d3/d3-selection#selection_datum) of the element in the originating selection (see [*drag*](#_drag)) that received the initiating input event. When dragging circle elements in SVG, the default subject is the datum of the circle element being dragged; with [Canvas](https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element), the default subject is the canvas element’s datum (regardless of where on the canvas you click). In this case, a custom subject accessor would be more appropriate, such as one that picks the closest circle to the mouse within a given search *radius*:
+The default subject is the [datum](https://github.com/d3/d3-selection#selection_datum) of the element in the originating selection (see [*drag*](#_drag)) that received the initiating input event. When dragging circle elements in SVG, the default subject is the datum of the circle being dragged; with [Canvas](https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element), the default subject is the canvas element’s datum (regardless of where on the canvas you click). In this case, a custom subject accessor would be more appropriate, such as one that picks the closest circle to the mouse within a given search *radius*:
 
@@ -196,4 +204,7 @@ ```js
 * `identifier` - the string “mouse”, or a numeric [touch identifier](https://www.w3.org/TR/touch-events/#widl-Touch-identifier).
+* `active` - the number of currently active drag gestures (on start and end, not including this one).
 * `sourceEvent` - the underlying input event, such as mousemove or touchmove.
 
+The *event*.active field is useful for detecting the first start event and the last end event in a sequence of concurrent drag gestures: it is zero when the first drag gesture starts, and zero when the last drag gesture ends.
+
 The *event* object also exposes the [*event*.on](#event_on) method.
@@ -200,0 +211,0 @@

src/drag.js

@@ -37,3 +37,4 @@ import {dispatch} from "d3-dispatch";
       y = defaultY,
-      active = {};
+      gestures = {},
+      active = 0;
 
@@ -67,16 +68,15 @@ // I’d like to call preventDefault on mousedown to disable native dragging
     if (!filter.apply(this, arguments)) return;
-    var parent = container.apply(this, arguments);
-    if (!start("mouse", parent, mouse, this, arguments)) return;
+    var parent = container.apply(this, arguments), m;
+    if (!(m = beforestart("mouse", parent, mouse, this, arguments))) return;
     select(event.view).on("mousemove.drag", mousemoved).on("mouseup.drag", mouseupped);
+    m("start");
   }
 
   function mousemoved() {
-    active.mouse("drag");
+    gestures.mouse("drag");
   }
 
   function mouseupped() {
-    var m = active.mouse;
     select(event.view).on("mousemove.drag mouseup.drag", null);
-    delete active.mouse;
-    m("end");
+    gestures.mouse("end");
   }
@@ -87,4 +87,6 @@
     var parent = container.apply(this, arguments);
-    for (var touches = event.changedTouches, i = 0, n = touches.length; i < n; ++i) {
-      start(touches[i].identifier, parent, touch, this, arguments);
+    for (var touches = event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
+      if (t = beforestart(touches[i].identifier, parent, touch, this, arguments)) {
+        t("start");
+      }
     }
@@ -95,3 +97,3 @@ }
     for (var touches = event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
-      if (t = active[touches[i].identifier]) {
+      if (t = gestures[touches[i].identifier]) {
         t("drag");
@@ -104,4 +106,3 @@ }
     for (var touches = event.changedTouches, i = 0, n = touches.length, t; i < n; ++i) {
-      if (t = active[touches[i].identifier]) {
-        delete active[touches[i].identifier];
+      if (t = gestures[touches[i].identifier]) {
         t("end");
@@ -112,3 +113,3 @@ }
 
-  function start(id, parent, point, that, args) {
+  function beforestart(id, parent, point, that, args) {
     var p0 = point(parent, id), dx, dy,
@@ -118,3 +119,3 @@ sublisteners = listeners.copy(),
 
-    if (!customEvent(new DragEvent("beforestart", node, id, p0[0], p0[1], sublisteners), function() {
+    if (!customEvent(new DragEvent("beforestart", node, id, active, p0[0], p0[1], sublisteners), function() {
       node = event.subject = subject.apply(that, args);
@@ -125,10 +126,13 @@ if (node == null) return false;
       return true;
-    })) return false;
+    })) return;
 
-    (active[id] = function(type, p) {
-      if (p == null) p = point(parent, id);
-      customEvent(new DragEvent(type, node, id, p[0] + dx, p[1] + dy, sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
-    })("start", p0);
-
-    return true;
+    return function gesture(type) {
+      var p, n;
+      switch (type) {
+        case "start": p = p0, gestures[id] = gesture, n = active++; break;
+        case "end": delete gestures[id], --active; // nobreak
+        case "drag": p = point(parent, id), n = active; break;
+      }
+      customEvent(new DragEvent(type, node, id, n, p[0] + dx, p[1] + dy, sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
+    };
   }
@@ -135,0 +139,0 @@

src/event.js

@@ -1,5 +0,6 @@
-export default function DragEvent(type, subject, id, x, y, dispatch) {
+export default function DragEvent(type, subject, id, active, x, y, dispatch) {
   this.type = type;
   this.subject = subject;
   this.identifier = id;
+  this.active = active;
   this.x = x;
@@ -6,0 +7,0 @@ this.y = y;

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

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

213376

increased by468.56%

Number of package files

21

increased by31.25%

Lines of code

401

increased by3.08%

Number of lines in readme file

229

increased by5.05%

No dependency changes