d3-drag - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

build/d3-drag.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-  var version = "0.1.3";
+  var version = "0.1.4";
 
@@ -19,2 +19,28 @@ function nopropagation() {
 
+  function nodrag(view) {
+    var root = view.document.documentElement,
+        selection = d3Selection.select(view).on("dragstart.drag", noevent, true);
+    if ("onselectstart" in root) {
+      selection.on("selectstart.drag", noevent, true);
+    } else {
+      root.__noselect = root.style.MozUserSelect;
+      root.style.MozUserSelect = "none";
+    }
+  }
+
+  function yesdrag(view, noclick) {
+    var root = view.document.documentElement,
+        selection = d3Selection.select(view).on("dragstart.drag", null);
+    if (noclick) {
+      selection.on("click.drag", noevent, true);
+      setTimeout(function() { selection.on("click.drag", null); }, 0);
+    }
+    if ("onselectstart" in root) {
+      selection.on("selectstart.drag", null);
+    } else {
+      root.style.MozUserSelect = root.__noselect;
+      delete root.__noselect;
+    }
+  }
+
   function constant(x) {
@@ -26,3 +52,3 @@ return function() {
 
-  function DragEvent(type, subject, id, active, x, y, dispatch) {
+  function DragEvent(type, subject, id, active, x, y, dx, dy, dispatch) {
     this.type = type;
@@ -34,2 +60,4 @@ this.subject = subject;
     this.y = y;
+    this.dx = dx;
+    this.dy = dy;
     this._ = dispatch;
@@ -43,30 +71,2 @@ }
 
-  function noselectstart(selection) {
-    selection.on("selectstart.drag", noevent, true);
-  }
-
-  function yesselectstart(selection) {
-    selection.on("selectstart.drag", null);
-  }
-
-  function nouserselect() {
-    var root = d3Selection.event.view.document.documentElement, style = root.style;
-    root.__noselect = style.MozUserSelect;
-    style.MozUserSelect = "none";
-  }
-
-  function yesuserselect() {
-    var root = d3Selection.event.view.document.documentElement;
-    root.style.MozUserSelect = root.__noselect;
-    delete root.__noselect;
-  }
-
-  function noselect(selection) {
-    return ("onselectstart" in d3Selection.event.target ? noselectstart : nouserselect)(selection);
-  }
-
-  function yesselect(selection) {
-    return ("onselectstart" in d3Selection.event.target ? yesselectstart : yesuserselect)(selection);
-  }
-
   // Ignore right-click, since that should open the context menu.
@@ -82,3 +82,3 @@ function defaultFilter() {
   function defaultSubject(d) {
-    return d;
+    return d == null ? this : d;
   }
@@ -119,9 +119,4 @@
       if (!gesture) return;
-
-      d3Selection.select(d3Selection.event.view)
-          .on("mousemove.drag", mousemoved, true)
-          .on("mouseup.drag", mouseupped, true)
-          .on("dragstart.drag", noevent, true)
-          .call(noselect);
-
+      d3Selection.select(d3Selection.event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
+      nodrag(d3Selection.event.view);
       nopropagation();
@@ -139,11 +134,4 @@ mousemoving = false;
     function mouseupped() {
-      var view = d3Selection.select(d3Selection.event.view)
-          .on("mousemove.drag mouseup.drag dragstart.drag", null)
-          .call(yesselect);
-
-      if (mousemoving) {
-        view.on("click.drag", noevent, true);
-        setTimeout(function() { view.on("click.drag", null); }, 0);
-      }
-
+      d3Selection.select(d3Selection.event.view).on("mousemove.drag mouseup.drag", null);
+      yesdrag(d3Selection.event.view, mousemoving);
       noevent();
@@ -194,10 +182,10 @@ gestures.mouse("end");
     function beforestart(id, container, point, that, args) {
-      var p0 = point(container, id), dx, dy,
+      var p = point(container, id), dx, dy,
           sublisteners = listeners.copy(),
           node;
 
-      if (!d3Selection.customEvent(new DragEvent("beforestart", node, id, active, p0[0], p0[1], sublisteners), function() {
+      if (!d3Selection.customEvent(new DragEvent("beforestart", node, id, active, p[0], p[1], sublisteners), function() {
         if ((d3Selection.event.subject = node = subject.apply(that, args)) == null) return false;
-        dx = x.apply(that, args) - p0[0] || 0;
-        dy = y.apply(that, args) - p0[1] || 0;
+        dx = x.apply(that, args) - p[0] || 0;
+        dy = y.apply(that, args) - p[1] || 0;
         return true;
@@ -207,9 +195,9 @@ })) return;
       return function gesture(type) {
-        var p, n;
+        var p0 = p, n;
         switch (type) {
-          case "start": p = p0, gestures[id] = gesture, n = active++; break;
+          case "start": gestures[id] = gesture, n = active++; break;
           case "end": delete gestures[id], --active; // nobreak
           case "drag": p = point(container, 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]);
+        d3Selection.customEvent(new DragEvent(type, node, id, n, p[0] + dx, p[1] + dy, p[0] - p0[0], p[1] - p0[1], sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
       };
@@ -248,3 +236,5 @@ }
   exports.drag = drag;
+  exports.dragDisable = nodrag;
+  exports.dragEnable = yesdrag;
 
 }));

build/d3-drag.min.js

@@ -1,1 +0,1 @@
-!function(t,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(t.d3_drag=t.d3_drag||{},t.d3_dispatch,t.d3_selection)}(this,function(t,e,n){"use strict";function o(){n.event.stopImmediatePropagation()}function r(){n.event.preventDefault(),n.event.stopImmediatePropagation()}function i(t){return function(){return t}}function u(t,e,n,o,r,i,u){this.type=t,this.subject=e,this.identifier=n,this.active=o,this.x=r,this.y=i,this._=u}function c(t){t.on("selectstart.drag",r,!0)}function a(t){t.on("selectstart.drag",null)}function s(){var t=n.event.view.document.documentElement,e=t.style;t.__noselect=e.MozUserSelect,e.MozUserSelect="none"}function f(){var t=n.event.view.document.documentElement;t.style.MozUserSelect=t.__noselect,delete t.__noselect}function d(t){return("onselectstart"in n.event.target?c:s)(t)}function l(t){return("onselectstart"in n.event.target?a:f)(t)}function p(){return!n.event.button}function h(){return this.parentNode}function g(t){return t}function v(){return n.event.subject.x}function m(){return n.event.subject.y}function y(t){function c(t){t.on("mousedown.drag",a).on("touchstart.drag",y).on("touchmove.drag",_).on("touchend.drag touchcancel.drag",b).style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function a(){if(!x&&T.apply(this,arguments)){var t=w("mouse",k.apply(this,arguments),n.mouse,this,arguments);t&&(n.select(n.event.view).on("mousemove.drag",s,!0).on("mouseup.drag",f,!0).on("dragstart.drag",r,!0).call(d),o(),j=!1,t("start"))}}function s(){r(),j=!0,S.mouse("drag")}function f(){var t=n.select(n.event.view).on("mousemove.drag mouseup.drag dragstart.drag",null).call(l);j&&(t.on("click.drag",r,!0),setTimeout(function(){t.on("click.drag",null)},0)),r(),S.mouse("end")}function y(){if(T.apply(this,arguments)){var t,e,r=n.event.changedTouches,i=k.apply(this,arguments),u=r.length;for(o(),t=0;u>t;++t)(e=w(r[t].identifier,i,n.touch,this,arguments))&&e("start")}}function _(){var t,e,o=n.event.changedTouches,i=o.length;for(r(),t=0;i>t;++t)(e=S[o[t].identifier])&&e("drag")}function b(){var t,e,r=n.event.changedTouches,i=r.length;for(o(),x&&clearTimeout(x),x=setTimeout(function(){x=null},500),t=0;i>t;++t)(e=S[r[t].identifier])&&e("end")}function w(t,e,o,r,i){var c,a,s,f=o(e,t),d=U.copy();if(n.customEvent(new u("beforestart",s,t,q,f[0],f[1],d),function(){return null==(n.event.subject=s=E.apply(r,i))?!1:(c=z.apply(r,i)-f[0]||0,a=M.apply(r,i)-f[1]||0,!0)}))return function l(p){var h,g;switch(p){case"start":h=f,S[t]=l,g=q++;break;case"end":delete S[t],--q;case"drag":h=o(e,t),g=q}n.customEvent(new u(p,s,t,g,h[0]+c,h[1]+a,d),d.apply,d,[p,r,i])}}var j,x,T=p,k=h,E=g,z=v,M=m,S={},U=e.dispatch("start","drag","end").on("start",t),q=0;return c.filter=function(t){return arguments.length?(T="function"==typeof t?t:i(!!t),c):T},c.container=function(t){return arguments.length?(k="function"==typeof t?t:i(t),c):k},c.subject=function(t){return arguments.length?(E="function"==typeof t?t:i(t),c):E},c.x=function(t){return arguments.length?(z="function"==typeof t?t:i(+t),c):z},c.y=function(t){return arguments.length?(M="function"==typeof t?t:i(+t),c):M},c.on=function(){var t=U.on.apply(U,arguments);return t===U?c:t},c}var _="0.1.3";u.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t},t.version=_,t.drag=y});
+!function(t,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(t.d3_drag=t.d3_drag||{},t.d3_dispatch,t.d3_selection)}(this,function(t,e,n){"use strict";function o(){n.event.stopImmediatePropagation()}function r(){n.event.preventDefault(),n.event.stopImmediatePropagation()}function i(t){var e=t.document.documentElement,o=n.select(t).on("dragstart.drag",r,!0);"onselectstart"in e?o.on("selectstart.drag",r,!0):(e.__noselect=e.style.MozUserSelect,e.style.MozUserSelect="none")}function u(t,e){var o=t.document.documentElement,i=n.select(t).on("dragstart.drag",null);e&&(i.on("click.drag",r,!0),setTimeout(function(){i.on("click.drag",null)},0)),"onselectstart"in o?i.on("selectstart.drag",null):(o.style.MozUserSelect=o.__noselect,delete o.__noselect)}function c(t){return function(){return t}}function s(t,e,n,o,r,i,u,c,s){this.type=t,this.subject=e,this.identifier=n,this.active=o,this.x=r,this.y=i,this.dx=u,this.dy=c,this._=s}function a(){return!n.event.button}function d(){return this.parentNode}function l(t){return null==t?this:t}function f(){return n.event.subject.x}function h(){return n.event.subject.y}function p(t){function p(t){t.on("mousedown.drag",g).on("touchstart.drag",y).on("touchmove.drag",_).on("touchend.drag touchcancel.drag",b).style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function g(){if(!j&&T.apply(this,arguments)){var t=w("mouse",E.apply(this,arguments),n.mouse,this,arguments);t&&(n.select(n.event.view).on("mousemove.drag",v,!0).on("mouseup.drag",m,!0),i(n.event.view),o(),x=!1,t("start"))}}function v(){r(),x=!0,S.mouse("drag")}function m(){n.select(n.event.view).on("mousemove.drag mouseup.drag",null),u(n.event.view,x),r(),S.mouse("end")}function y(){if(T.apply(this,arguments)){var t,e,r=n.event.changedTouches,i=E.apply(this,arguments),u=r.length;for(o(),t=0;u>t;++t)(e=w(r[t].identifier,i,n.touch,this,arguments))&&e("start")}}function _(){var t,e,o=n.event.changedTouches,i=o.length;for(r(),t=0;i>t;++t)(e=S[o[t].identifier])&&e("drag")}function b(){var t,e,r=n.event.changedTouches,i=r.length;for(o(),j&&clearTimeout(j),j=setTimeout(function(){j=null},500),t=0;i>t;++t)(e=S[r[t].identifier])&&e("end")}function w(t,e,o,r,i){var u,c,a,d=o(e,t),l=U.copy();if(n.customEvent(new s("beforestart",a,t,q,d[0],d[1],l),function(){return null==(n.event.subject=a=k.apply(r,i))?!1:(u=z.apply(r,i)-d[0]||0,c=M.apply(r,i)-d[1]||0,!0)}))return function f(h){var p,g=d;switch(h){case"start":S[t]=f,p=q++;break;case"end":delete S[t],--q;case"drag":d=o(e,t),p=q}n.customEvent(new s(h,a,t,p,d[0]+u,d[1]+c,d[0]-g[0],d[1]-g[1],l),l.apply,l,[h,r,i])}}var x,j,T=a,E=d,k=l,z=f,M=h,S={},U=e.dispatch("start","drag","end").on("start",t),q=0;return p.filter=function(t){return arguments.length?(T="function"==typeof t?t:c(!!t),p):T},p.container=function(t){return arguments.length?(E="function"==typeof t?t:c(t),p):E},p.subject=function(t){return arguments.length?(k="function"==typeof t?t:c(t),p):k},p.x=function(t){return arguments.length?(z="function"==typeof t?t:c(+t),p):z},p.y=function(t){return arguments.length?(M="function"==typeof t?t:c(+t),p):M},p.on=function(){var t=U.on.apply(U,arguments);return t===U?p:t},p}var g="0.1.4";s.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t},t.version=g,t.drag=p,t.dragDisable=i,t.dragEnable=u});

build/package.js

 export var name = "d3-drag";
-export var version = "0.1.3";
+export var version = "0.1.4";
 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"];

index.js

 export {version} from "./build/package";
 export {default as drag} from "./src/drag";
+export {default as dragDisable, yesdrag as dragEnable} from "./src/nodrag";

package.json

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

README.md

@@ -41,19 +41,19 @@ # d3-drag
 | mousedown⁵   | selection         | start      | no¹                |
-| mousemove²   | window⁴           | drag       | yes                |
-| mouseup²     | window⁴           | end        | yes                |
-| touchstart   | selection         | start      | no¹                |
-| touchmove    | selection         | drag       | yes                |
-| touchend     | selection         | end        | no¹                |
-| touchcancel  | selection         | end        | no¹                |
+| mousemove²   | window¹           | drag       | yes                |
+| mouseup²     | window¹           | end        | yes                |
+| dragstart²   | window            | -          | yes                |
 | selectstart² | window            | -          | yes                |
-| dragstart²   | window            | -          | yes                |
 | click³       | window            | -          | yes                |
+| touchstart   | selection         | start      | no⁴                |
+| touchmove    | selection         | drag       | yes                |
+| touchend     | selection         | end        | no⁴                |
+| touchcancel  | selection         | end        | no⁴                |
 
 The propagation of all consumed events is [immediately stopped](https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation). If you want to prevent some events from initiating a drag gesture, use [*drag*.filter](#drag_filter).
 
-¹ Default cannot be prevented due to browser bugs; see [#9](https://github.com/d3/d3-drag/issues/9).
-<br>² Only applies during an active, mouse-based drag gesture.
-<br>³ Only applies immediately after a non-empty, mouse-based drag gesture ends.
-<br>⁴ Necessary to capture events outside an iframe; see [#9](https://github.com/d3/d3-drag/issues/9).
-<br>⁵ Ignored if within 500ms of a touch drag gesture ending; assumes [click emulation](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7).
+¹ Necessary to capture events outside an iframe; see [#9](https://github.com/d3/d3-drag/issues/9).
+<br>² Only applies during an active, mouse-based gesture; see [#9](https://github.com/d3/d3-drag/issues/9).
+<br>³ Only applies immediately after a non-empty, mouse-based gesture.
+<br>⁴ Necessary to allow [click emulation](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7) on touch input; see [#9](https://github.com/d3/d3-drag/issues/9).
+<br>⁵ Ignored if within 500ms of a touch gesture ending; assumes [click emulation](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7).
 
@@ -126,3 +126,3 @@ <a href="#drag" name="drag">#</a> d3.<b>drag</b>([<i>started</i>])
 function subject(d) {
-  return d;
+  return d == null ? this : d;
 }
@@ -133,3 +133,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 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; if the datum is undefined, the default subject is the element itself. 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*:
 
@@ -203,2 +203,10 @@ ```js
 
+<a href="#dragDisable" name="dragDisable">#</a> d3.<b>dragDisable</b>(<i>window</i>)
+
+Prevents native drag-and-drop and text selection on the specified *window*. As an alternative to preventing the default action of mousedown events (see [#9](https://github.com/d3/d3-drag/issues/9)), this method prevents undesirable default actions following mousedown. In supported browsers, this means capturing dragstart and selectstart events, preventing the associated default actions, and immediately stopping their propagation. In browsers that do not support selection events, the user-select CSS property is set to none on the document element. This method is intended to be called on mousedown, followed by [d3.dragEnable](#dragEnable) on mouseup.
+
+<a href="#dragEnable" name="dragEnable">#</a> d3.<b>dragEnable</b>(<i>window</i>[, <i>noclick</i>])
+
+Allows native drag-and-drop and text selection on the specified *window*; undoes the effect of [d3.dragDisable](#dragDisable). This method is intended to be called on mouseup, preceded by [d3.dragDisable](#dragDisable) on mousedown. If *noclick* is true, this method also temporarily suppresses click events. The suppression of click events expires after a zero-millisecond timeout, such that it only suppress the click event that would immediately follow the current mouseup event, if any.
+
 ### Drag Events
@@ -212,2 +220,4 @@
 * `y` - the *y*-coordinate of the subject; see [*drag*.y](#drag_y) and [*drag*.container](#drag_container).
+* `dx` - the change in *x*-coordinate since the previous drag event.
+* `dy` - the change in *y*-coordinate since the previous drag event.
 * `identifier` - the string “mouse”, or a numeric [touch identifier](https://www.w3.org/TR/touch-events/#widl-Touch-identifier).
@@ -214,0 +224,0 @@ * `active` - the number of currently active drag gestures (on start and end, not including this one).

src/drag.js

 import {dispatch} from "d3-dispatch";
 import {event, customEvent, select, mouse, touch} from "d3-selection";
+import nodrag, {yesdrag} from "./nodrag";
 import noevent, {nopropagation} from "./noevent";
 import constant from "./constant";
 import DragEvent from "./event";
-import {noselect, yesselect} from "./noselect";
 
@@ -18,3 +18,3 @@ // Ignore right-click, since that should open the context menu.
 function defaultSubject(d) {
-  return d;
+  return d == null ? this : d;
 }
@@ -55,9 +55,4 @@
     if (!gesture) return;
-
-    select(event.view)
-        .on("mousemove.drag", mousemoved, true)
-        .on("mouseup.drag", mouseupped, true)
-        .on("dragstart.drag", noevent, true)
-        .call(noselect);
-
+    select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
+    nodrag(event.view);
     nopropagation();
@@ -75,11 +70,4 @@ mousemoving = false;
   function mouseupped() {
-    var view = select(event.view)
-        .on("mousemove.drag mouseup.drag dragstart.drag", null)
-        .call(yesselect);
-
-    if (mousemoving) {
-      view.on("click.drag", noevent, true);
-      setTimeout(function() { view.on("click.drag", null); }, 0);
-    }
-
+    select(event.view).on("mousemove.drag mouseup.drag", null);
+    yesdrag(event.view, mousemoving);
     noevent();
@@ -130,10 +118,10 @@ gestures.mouse("end");
   function beforestart(id, container, point, that, args) {
-    var p0 = point(container, id), dx, dy,
+    var p = point(container, id), dx, dy,
         sublisteners = listeners.copy(),
         node;
 
-    if (!customEvent(new DragEvent("beforestart", node, id, active, p0[0], p0[1], sublisteners), function() {
+    if (!customEvent(new DragEvent("beforestart", node, id, active, p[0], p[1], sublisteners), function() {
       if ((event.subject = node = subject.apply(that, args)) == null) return false;
-      dx = x.apply(that, args) - p0[0] || 0;
-      dy = y.apply(that, args) - p0[1] || 0;
+      dx = x.apply(that, args) - p[0] || 0;
+      dy = y.apply(that, args) - p[1] || 0;
       return true;
@@ -143,9 +131,9 @@ })) return;
     return function gesture(type) {
-      var p, n;
+      var p0 = p, n;
       switch (type) {
-        case "start": p = p0, gestures[id] = gesture, n = active++; break;
+        case "start": gestures[id] = gesture, n = active++; break;
         case "end": delete gestures[id], --active; // nobreak
         case "drag": p = point(container, id), n = active; break;
       }
-      customEvent(new DragEvent(type, node, id, n, p[0] + dx, p[1] + dy, sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
+      customEvent(new DragEvent(type, node, id, n, p[0] + dx, p[1] + dy, p[0] - p0[0], p[1] - p0[1], sublisteners), sublisteners.apply, sublisteners, [type, that, args]);
     };
@@ -152,0 +140,0 @@ }

src/event.js

@@ -1,2 +0,2 @@
-export default function DragEvent(type, subject, id, active, x, y, dispatch) {
+export default function DragEvent(type, subject, id, active, x, y, dx, dy, dispatch) {
   this.type = type;
@@ -8,2 +8,4 @@ this.subject = subject;
   this.y = y;
+  this.dx = dx;
+  this.dy = dy;
   this._ = dispatch;
@@ -10,0 +12,0 @@ }

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

214099

increased by0.79%

Number of lines in readme file

245

increased by4.26%

Worsened metrics

Lines of code

400

decreased by-1.23%

No dependency changes