react-dnd - npm Package Compare versions

Comparing version 1.0.0-alpha to 1.0.0-alpha.1

bower.json

 {
   "name": "react-dnd",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha.1",
   "homepage": "https://github.com/gaearon/react-dnd",
@@ -5,0 +5,0 @@ "authors": [

modules/backends/HTML5.js

@@ -10,2 +10,3 @@ 'use strict';
 exports.__esModule = true;
+exports.getEmptyImage = getEmptyImage;
 exports['default'] = createHTML5Backend;
@@ -37,2 +38,19 @@
 
+var NativeTypes = {
+  FILE: '__NATIVE_FILE__',
+  URL: '__NATIVE_URL__'
+};
+
+exports.NativeTypes = NativeTypes;
+var emptyImage = undefined;
+
+function getEmptyImage() {
+  if (!emptyImage) {
+    emptyImage = new Image();
+    emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+  }
+
+  return emptyImage;
+}
+
 var FileDragSource = (function (_DragSource) {
@@ -100,9 +118,2 @@ function FileDragSource() {
 
-var NativeTypes = {
-  FILE: '__NATIVE_FILE__',
-  URL: '__NATIVE_URL__'
-};
-
-exports.NativeTypes = NativeTypes;
-
 var HTML5Backend = (function () {
@@ -133,2 +144,3 @@ function HTML5Backend(manager) {
     this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
+    this.handleSelectStart = this.handleSelectStart.bind(this);
     this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
@@ -222,5 +234,9 @@ }
     };
+    var handleSelectStart = function handleSelectStart(e) {
+      return _this4.handleSelectStart(e, sourceId);
+    };
 
     node.setAttribute('draggable', true);
     node.addEventListener('dragstart', handleDragStart);
+    node.addEventListener('selectstart', handleSelectStart);
 
@@ -232,2 +248,3 @@ return function () {
       node.removeEventListener('dragstart', handleDragStart);
+      node.removeEventListener('selectstart', handleSelectStart);
       node.setAttribute('draggable', false);
@@ -261,3 +278,3 @@ };
 
-  HTML5Backend.prototype.getSpecifiedDropEffect = function getSpecifiedDropEffect() {
+  HTML5Backend.prototype.getCurrentSourceNodeOptions = function getCurrentSourceNodeOptions() {
     var sourceId = this.monitor.getSourceId();
@@ -268,6 +285,6 @@ var sourceNodeOptions = this.sourceNodeOptions[sourceId];
       dropEffect: 'move'
-    }).dropEffect;
+    });
   };
 
-  HTML5Backend.prototype.getSpecifiedAnchorPoint = function getSpecifiedAnchorPoint() {
+  HTML5Backend.prototype.getCurrentSourcePreviewNodeOptions = function getCurrentSourcePreviewNodeOptions() {
     var sourceId = this.monitor.getSourceId();
@@ -278,3 +295,4 @@ var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId];
       anchorX: 0.5,
-      anchorY: 0.5
+      anchorY: 0.5,
+      captureDraggingState: false
     });
@@ -387,6 +405,3 @@ };
 
-    // Keep drag source unpublished.
-    // We will publish it in the next tick so browser
-    // has time to screenshot current state and doesn't
-    // cancel drag if the source DOM node is removed.
+    // Don't publish the source just yet (see why below)
     this.actions.beginDrag(dragStartSourceIds, {
@@ -401,12 +416,20 @@ publishSource: false,
     if (this.monitor.isDragging()) {
-      // Use custom drag image if user specifies it.
-      // If child drag source refuses drag but parent agrees,
-      // use parent's node as drag image. Neither works in IE though.
-      var sourceId = this.monitor.getSourceId();
-      var sourceNode = this.sourceNodes[sourceId];
-      var dragPreview = this.sourcePreviewNodes[sourceId] || sourceNode;
-      var anchorPoint = this.getSpecifiedAnchorPoint();
-      var dragPreviewOffset = _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint);
-      dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+      if (typeof dataTransfer.setDragImage === 'function') {
+        // Use custom drag image if user specifies it.
+        // If child drag source refuses drag but parent agrees,
+        // use parent's node as drag image. Neither works in IE though.
+        var sourceId = this.monitor.getSourceId();
+        var sourceNode = this.sourceNodes[sourceId];
+        var dragPreview = this.sourcePreviewNodes[sourceId] || sourceNode;
 
+        var _getCurrentSourcePreviewNodeOptions = this.getCurrentSourcePreviewNodeOptions();
+
+        var anchorX = _getCurrentSourcePreviewNodeOptions.anchorX;
+        var anchorY = _getCurrentSourcePreviewNodeOptions.anchorY;
+
+        var anchorPoint = { anchorX: anchorX, anchorY: anchorY };
+        var dragPreviewOffset = _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint);
+        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+      }
+
       try {
@@ -421,7 +444,30 @@ // Firefox won't drag without setting data
 
-      setTimeout(function () {
-        // By now, the browser has taken drag screenshot
-        // and we can safely let the drag source know it's active.
-        _this6.actions.publishDragSource();
-      });
+      // Now we are ready to publish the drag source.. or are we not?
+
+      var _getCurrentSourcePreviewNodeOptions2 = this.getCurrentSourcePreviewNodeOptions();
+
+      var captureDraggingState = _getCurrentSourcePreviewNodeOptions2.captureDraggingState;
+
+      if (!captureDraggingState) {
+        // Usually we want to publish it in the next tick so that browser
+        // is able to screenshot the current (not yet dragging) state.
+        //
+        // It also neatly avoids a situation where render() returns null
+        // in the same tick for the source element, and browser freaks out.
+        setTimeout(function () {
+          return _this6.actions.publishDragSource();
+        });
+      } else {
+        // In some cases the user may want to override this behavior, e.g.
+        // to work around IE not supporting custom drag previews.
+        //
+        // When using a custom drag layer, the only way to prevent
+        // the default drag preview from drawing in IE is to screenshot
+        // the dragging state in which the node itself has zero opacity
+        // and height. In this case, though, returning null from render()
+        // will abruptly end the dragging, which is not obvious.
+        //
+        // This is the reason such behavior is strictly opt-in.
+        this.actions.publishDragSource();
+      }
     } else if (_isUrlDataTransfer$isFileDataTransfer.isUrlDataTransfer(dataTransfer)) {
@@ -492,3 +538,8 @@ // URL dragged from inside the document
       e.preventDefault();
-      e.dataTransfer.dropEffect = this.getSpecifiedDropEffect();
+
+      var _getCurrentSourceNodeOptions = this.getCurrentSourceNodeOptions();
+
+      var dropEffect = _getCurrentSourceNodeOptions.dropEffect;
+
+      e.dataTransfer.dropEffect = dropEffect;
     }
@@ -522,3 +573,8 @@ };
       e.preventDefault();
-      e.dataTransfer.dropEffect = this.getSpecifiedDropEffect();
+
+      var _getCurrentSourceNodeOptions2 = this.getCurrentSourceNodeOptions();
+
+      var dropEffect = _getCurrentSourceNodeOptions2.dropEffect;
+
+      e.dataTransfer.dropEffect = dropEffect;
     } else if (this.isDraggingNativeItem()) {
@@ -582,2 +638,11 @@ // Don't show a nice cursor but still prevent default
 
+  HTML5Backend.prototype.handleSelectStart = function handleSelectStart(e) {
+    // Prevent selection on IE
+    // and instead ask it to consider dragging.
+    e.preventDefault();
+    if (typeof e.target.dragDrop === 'function') {
+      e.target.dragDrop();
+    }
+  };
+
   return HTML5Backend;
@@ -584,0 +649,0 @@ })();

modules/ComponentDragSource.js

@@ -57,57 +57,29 @@ 'use strict';
 
-  ComponentDragSource.prototype.canDrag = function canDrag() {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  ComponentDragSource.prototype.canDrag = function canDrag(monitor, id) {
     if (this.spec.canDrag) {
-      var _spec$canDrag;
-
-      return (_spec$canDrag = this.spec.canDrag).call.apply(_spec$canDrag, [null, this.props].concat(args));
+      return this.spec.canDrag.call(null, this.props, monitor);
     } else {
-      var _DragSource$prototype$canDrag;
-
-      return (_DragSource$prototype$canDrag = _DragSource.prototype.canDrag).call.apply(_DragSource$prototype$canDrag, [this].concat(args));
+      return _DragSource.prototype.canDrag.call(this, monitor, id);
     }
   };
 
-  ComponentDragSource.prototype.isDragging = function isDragging() {
-    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
+  ComponentDragSource.prototype.isDragging = function isDragging(monitor, id) {
     if (this.spec.isDragging) {
-      var _spec$isDragging;
-
-      return (_spec$isDragging = this.spec.isDragging).call.apply(_spec$isDragging, [null, this.props].concat(args));
+      return this.spec.isDragging.call(null, this.props, monitor);
     } else {
-      var _DragSource$prototype$isDragging;
-
-      return (_DragSource$prototype$isDragging = _DragSource.prototype.isDragging).call.apply(_DragSource$prototype$isDragging, [this].concat(args));
+      return _DragSource.prototype.isDragging.call(this, monitor, id);
     }
   };
 
-  ComponentDragSource.prototype.beginDrag = function beginDrag() {
-    var _spec$beginDrag;
-
-    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-
-    return (_spec$beginDrag = this.spec.beginDrag).call.apply(_spec$beginDrag, [null, this.props].concat(args, [this.getComponentRef()]));
+  ComponentDragSource.prototype.beginDrag = function beginDrag(monitor, id) {
+    var component = this.getComponentRef();
+    return this.spec.beginDrag.call(null, this.props, monitor, component, id);
   };
 
-  ComponentDragSource.prototype.endDrag = function endDrag() {
-    for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-
+  ComponentDragSource.prototype.endDrag = function endDrag(monitor, id) {
     if (this.spec.endDrag) {
-      var _spec$endDrag;
-
-      return (_spec$endDrag = this.spec.endDrag).call.apply(_spec$endDrag, [null, this.props].concat(args, [this.getComponentRef()]));
+      var component = this.getComponentRef();
+      return this.spec.endDrag.call(null, this.props, monitor, component, id);
     } else {
-      var _DragSource$prototype$endDrag;
-
-      return (_DragSource$prototype$endDrag = _DragSource.prototype.endDrag).call.apply(_DragSource$prototype$endDrag, [this].concat(args));
+      return _DragSource.prototype.endDrag.call(this, monitor, id);
     }
@@ -114,0 +86,0 @@ };

modules/ComponentDropTarget.js

@@ -63,47 +63,25 @@ 'use strict';
 
-  ComponentDropTarget.prototype.canDrop = function canDrop() {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  ComponentDropTarget.prototype.canDrop = function canDrop(monitor, id) {
     if (this.spec.canDrop) {
-      var _spec$canDrop;
-
-      return (_spec$canDrop = this.spec.canDrop).call.apply(_spec$canDrop, [null, this.props].concat(args));
+      return this.spec.canDrop.call(null, this.props, monitor);
     } else {
-      var _DropTarget$prototype$canDrop;
-
-      return (_DropTarget$prototype$canDrop = _DropTarget.prototype.canDrop).call.apply(_DropTarget$prototype$canDrop, [this].concat(args));
+      return _DropTarget.prototype.canDrop.call(this, monitor, id);
     }
   };
 
-  ComponentDropTarget.prototype.hover = function hover() {
-    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
+  ComponentDropTarget.prototype.hover = function hover(monitor, id) {
     if (this.spec.hover) {
-      var _spec$hover;
-
-      return (_spec$hover = this.spec.hover).call.apply(_spec$hover, [null, this.props].concat(args, [this.getComponentRef()]));
+      var component = this.getComponentRef();
+      return this.spec.hover.call(null, this.props, monitor, component, id);
     } else {
-      var _DropTarget$prototype$hover;
-
-      return (_DropTarget$prototype$hover = _DropTarget.prototype.hover).call.apply(_DropTarget$prototype$hover, [this].concat(args));
+      return _DropTarget.prototype.hover.call(this, monitor, id);
     }
   };
 
-  ComponentDropTarget.prototype.drop = function drop() {
-    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-
+  ComponentDropTarget.prototype.drop = function drop(monitor, id) {
     if (this.spec.drop) {
-      var _spec$drop;
-
-      return (_spec$drop = this.spec.drop).call.apply(_spec$drop, [null, this.props].concat(args, [this.getComponentRef()]));
+      var component = this.getComponentRef();
+      return this.spec.drop.call(null, this.props, monitor, component, id);
     } else {
-      var _DropTarget$prototype$drop;
-
-      return (_DropTarget$prototype$drop = _DropTarget.prototype.drop).call.apply(_DropTarget$prototype$drop, [this].concat(args));
+      return _DropTarget.prototype.drop.call(this, monitor, id);
     }
@@ -110,0 +88,0 @@ };

modules/utils/OffsetHelpers.js

@@ -43,6 +43,9 @@ 'use strict';
 function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint) {
-  var dragPreviewOffsetFromClient = getElementClientOffset(dragPreview);
+  var isImage = dragPreview instanceof Image;
+  var dragPreviewNode = isImage ? sourceNode : dragPreview;
+
+  var dragPreviewNodeOffsetFromClient = getElementClientOffset(dragPreviewNode);
   var offsetFromDragPreview = {
-    x: clientOffset.x - dragPreviewOffsetFromClient.x,
-    y: clientOffset.y - dragPreviewOffsetFromClient.y
+    x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
+    y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
   };
@@ -55,4 +58,2 @@
 
-  var isImage = dragPreview instanceof Image;
-
   var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
@@ -84,3 +85,3 @@ var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
   offsetFromDragPreview.y / sourceHeight * dragPreviewHeight,
-  // Dock to the right
+  // Dock to the bottom
   offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
@@ -87,0 +88,0 @@ var x = interpolateX(anchorX);

package.json

 {
   "name": "react-dnd",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha.1",
   "description": "Drag and drop for React with full DOM control",
@@ -36,3 +36,3 @@ "main": "modules/index.js",
     "disposables": "^1.0.1",
-    "dnd-core": "^1.0.0",
+    "dnd-core": "^1.0.1",
     "invariant": "^2.0.0",
@@ -39,0 +39,0 @@ "lodash": "^3.1.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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103886

increased by7.83%

Number of package files

34

increased by3.03%

Lines of code

1693

increased by12.27%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• Updateddnd-core@^1.0.1