Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-dnd-html5-backend

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dnd-html5-backend - npm Package Compare versions

Comparing version 2.5.3 to 2.5.4

lib/EnterLeaveCounter.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -22,42 +22,42 @@
		var EnterLeaveCounter = function () {
		function EnterLeaveCounter() {
		_classCallCheck(this, EnterLeaveCounter);
		function EnterLeaveCounter() {
		_classCallCheck(this, EnterLeaveCounter);

		this.entered = [];
		}
		this.entered = [];
		}

		_createClass(EnterLeaveCounter, [{
		key: 'enter',
		value: function enter(enteringNode) {
		var previousLength = this.entered.length;
		_createClass(EnterLeaveCounter, [{
		key: 'enter',
		value: function enter(enteringNode) {
		var previousLength = this.entered.length;

		var isNodeEntered = function isNodeEntered(node) {
		return document.documentElement.contains(node) && (!node.contains \|\| node.contains(enteringNode));
		};
		var isNodeEntered = function isNodeEntered(node) {
		return document.documentElement.contains(node) && (!node.contains \|\| node.contains(enteringNode));
		};

		this.entered = (0, _union2.default)(this.entered.filter(isNodeEntered), [enteringNode]);
		this.entered = (0, _union2.default)(this.entered.filter(isNodeEntered), [enteringNode]);

		return previousLength === 0 && this.entered.length > 0;
		}
		}, {
		key: 'leave',
		value: function leave(leavingNode) {
		var previousLength = this.entered.length;
		return previousLength === 0 && this.entered.length > 0;
		}
		}, {
		key: 'leave',
		value: function leave(leavingNode) {
		var previousLength = this.entered.length;

		this.entered = (0, _without2.default)(this.entered.filter(function (node) {
		return document.documentElement.contains(node);
		}), leavingNode);
		this.entered = (0, _without2.default)(this.entered.filter(function (node) {
		return document.documentElement.contains(node);
		}), leavingNode);

		return previousLength > 0 && this.entered.length === 0;
		}
		}, {
		key: 'reset',
		value: function reset() {
		this.entered = [];
		}
		}]);
		return previousLength > 0 && this.entered.length === 0;
		}
		}, {
		key: 'reset',
		value: function reset() {
		this.entered = [];
		}
		}]);

		return EnterLeaveCounter;
		return EnterLeaveCounter;
		}();

		exports.default = EnterLeaveCounter;

lib/getEmptyImage.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -9,8 +9,8 @@ exports.default = getEmptyImage;
		function getEmptyImage() {
		if (!emptyImage) {
		emptyImage = new Image();
		emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
		}
		if (!emptyImage) {
		emptyImage = new Image();
		emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
		}

		return emptyImage;
		return emptyImage;
		}

1122

lib/HTML5Backend.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /* eslint-disable no-underscore-dangle */


		var _defaults = require('lodash/defaults');
		@@ -38,639 +39,638 @@
		var HTML5Backend = function () {
		function HTML5Backend(manager) {
		_classCallCheck(this, HTML5Backend);
		function HTML5Backend(manager) {
		_classCallCheck(this, HTML5Backend);

		this.actions = manager.getActions();
		this.monitor = manager.getMonitor();
		this.registry = manager.getRegistry();
		this.context = manager.getContext();
		this.actions = manager.getActions();
		this.monitor = manager.getMonitor();
		this.registry = manager.getRegistry();
		this.context = manager.getContext();

		this.sourcePreviewNodes = {};
		this.sourcePreviewNodeOptions = {};
		this.sourceNodes = {};
		this.sourceNodeOptions = {};
		this.enterLeaveCounter = new _EnterLeaveCounter2.default();
		this.sourcePreviewNodes = {};
		this.sourcePreviewNodeOptions = {};
		this.sourceNodes = {};
		this.sourceNodeOptions = {};
		this.enterLeaveCounter = new _EnterLeaveCounter2.default();

		this.dragStartSourceIds = [];
		this.dropTargetIds = [];
		this.dragEnterTargetIds = [];
		this.currentNativeSource = null;
		this.currentNativeHandle = null;
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.altKeyPressed = false;
		this.dragStartSourceIds = [];
		this.dropTargetIds = [];
		this.dragEnterTargetIds = [];
		this.currentNativeSource = null;
		this.currentNativeHandle = null;
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.altKeyPressed = false;

		this.getSourceClientOffset = this.getSourceClientOffset.bind(this);
		this.handleTopDragStart = this.handleTopDragStart.bind(this);
		this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this);
		this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this);
		this.handleTopDragEnter = this.handleTopDragEnter.bind(this);
		this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this);
		this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
		this.handleTopDragOver = this.handleTopDragOver.bind(this);
		this.handleTopDragOverCapture = this.handleTopDragOverCapture.bind(this);
		this.handleTopDrop = this.handleTopDrop.bind(this);
		this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
		this.handleSelectStart = this.handleSelectStart.bind(this);
		this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
		this.endDragNativeItem = this.endDragNativeItem.bind(this);
		this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this);
		this.isNodeInDocument = this.isNodeInDocument.bind(this);
		}
		this.getSourceClientOffset = this.getSourceClientOffset.bind(this);
		this.handleTopDragStart = this.handleTopDragStart.bind(this);
		this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this);
		this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this);
		this.handleTopDragEnter = this.handleTopDragEnter.bind(this);
		this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this);
		this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
		this.handleTopDragOver = this.handleTopDragOver.bind(this);
		this.handleTopDragOverCapture = this.handleTopDragOverCapture.bind(this);
		this.handleTopDrop = this.handleTopDrop.bind(this);
		this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
		this.handleSelectStart = this.handleSelectStart.bind(this);
		this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
		this.endDragNativeItem = this.endDragNativeItem.bind(this);
		this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this);
		this.isNodeInDocument = this.isNodeInDocument.bind(this);
		}

		_createClass(HTML5Backend, [{
		key: 'setup',
		value: function setup() {
		if (this.window === undefined) {
		return;
		}
		_createClass(HTML5Backend, [{
		key: 'setup',
		value: function setup() {
		if (this.window === undefined) {
		return;
		}

		if (this.window.__isReactDndBackendSetUp) {
		// eslint-disable-line no-underscore-dangle
		throw new Error('Cannot have two HTML5 backends at the same time.');
		}
		this.window.__isReactDndBackendSetUp = true; // eslint-disable-line no-underscore-dangle
		this.addEventListeners(this.window);
		}
		}, {
		key: 'teardown',
		value: function teardown() {
		if (this.window === undefined) {
		return;
		}
		if (this.window.__isReactDndBackendSetUp) {
		throw new Error('Cannot have two HTML5 backends at the same time.');
		}
		this.window.__isReactDndBackendSetUp = true;
		this.addEventListeners(this.window);
		}
		}, {
		key: 'teardown',
		value: function teardown() {
		if (this.window === undefined) {
		return;
		}

		this.window.__isReactDndBackendSetUp = false; // eslint-disable-line no-underscore-dangle
		this.removeEventListeners(this.window);
		this.clearCurrentDragSourceNode();
		if (this.asyncEndDragFrameId) {
		this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
		}
		}
		}, {
		key: 'addEventListeners',
		value: function addEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.addEventListener) {
		return;
		}
		target.addEventListener('dragstart', this.handleTopDragStart);
		target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.addEventListener('dragend', this.handleTopDragEndCapture, true);
		target.addEventListener('dragenter', this.handleTopDragEnter);
		target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.addEventListener('dragover', this.handleTopDragOver);
		target.addEventListener('dragover', this.handleTopDragOverCapture, true);
		target.addEventListener('drop', this.handleTopDrop);
		target.addEventListener('drop', this.handleTopDropCapture, true);
		}
		}, {
		key: 'removeEventListeners',
		value: function removeEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.removeEventListener) {
		return;
		}
		target.removeEventListener('dragstart', this.handleTopDragStart);
		target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
		target.removeEventListener('dragenter', this.handleTopDragEnter);
		target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.removeEventListener('dragover', this.handleTopDragOver);
		target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
		target.removeEventListener('drop', this.handleTopDrop);
		target.removeEventListener('drop', this.handleTopDropCapture, true);
		}
		}, {
		key: 'connectDragPreview',
		value: function connectDragPreview(sourceId, node, options) {
		var _this = this;
		this.window.__isReactDndBackendSetUp = false;
		this.removeEventListeners(this.window);
		this.clearCurrentDragSourceNode();
		if (this.asyncEndDragFrameId) {
		this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
		}
		}
		}, {
		key: 'addEventListeners',
		value: function addEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.addEventListener) {
		return;
		}
		target.addEventListener('dragstart', this.handleTopDragStart);
		target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.addEventListener('dragend', this.handleTopDragEndCapture, true);
		target.addEventListener('dragenter', this.handleTopDragEnter);
		target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.addEventListener('dragover', this.handleTopDragOver);
		target.addEventListener('dragover', this.handleTopDragOverCapture, true);
		target.addEventListener('drop', this.handleTopDrop);
		target.addEventListener('drop', this.handleTopDropCapture, true);
		}
		}, {
		key: 'removeEventListeners',
		value: function removeEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.removeEventListener) {
		return;
		}
		target.removeEventListener('dragstart', this.handleTopDragStart);
		target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
		target.removeEventListener('dragenter', this.handleTopDragEnter);
		target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.removeEventListener('dragover', this.handleTopDragOver);
		target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
		target.removeEventListener('drop', this.handleTopDrop);
		target.removeEventListener('drop', this.handleTopDropCapture, true);
		}
		}, {
		key: 'connectDragPreview',
		value: function connectDragPreview(sourceId, node, options) {
		var _this = this;

		this.sourcePreviewNodeOptions[sourceId] = options;
		this.sourcePreviewNodes[sourceId] = node;
		this.sourcePreviewNodeOptions[sourceId] = options;
		this.sourcePreviewNodes[sourceId] = node;

		return function () {
		delete _this.sourcePreviewNodes[sourceId];
		delete _this.sourcePreviewNodeOptions[sourceId];
		};
		}
		}, {
		key: 'connectDragSource',
		value: function connectDragSource(sourceId, node, options) {
		var _this2 = this;
		return function () {
		delete _this.sourcePreviewNodes[sourceId];
		delete _this.sourcePreviewNodeOptions[sourceId];
		};
		}
		}, {
		key: 'connectDragSource',
		value: function connectDragSource(sourceId, node, options) {
		var _this2 = this;

		this.sourceNodes[sourceId] = node;
		this.sourceNodeOptions[sourceId] = options;
		this.sourceNodes[sourceId] = node;
		this.sourceNodeOptions[sourceId] = options;

		var handleDragStart = function handleDragStart(e) {
		return _this2.handleDragStart(e, sourceId);
		};
		var handleSelectStart = function handleSelectStart(e) {
		return _this2.handleSelectStart(e, sourceId);
		};
		var handleDragStart = function handleDragStart(e) {
		return _this2.handleDragStart(e, sourceId);
		};
		var handleSelectStart = function handleSelectStart(e) {
		return _this2.handleSelectStart(e, sourceId);
		};

		node.setAttribute('draggable', true);
		node.addEventListener('dragstart', handleDragStart);
		node.addEventListener('selectstart', handleSelectStart);
		node.setAttribute('draggable', true);
		node.addEventListener('dragstart', handleDragStart);
		node.addEventListener('selectstart', handleSelectStart);

		return function () {
		delete _this2.sourceNodes[sourceId];
		delete _this2.sourceNodeOptions[sourceId];
		return function () {
		delete _this2.sourceNodes[sourceId];
		delete _this2.sourceNodeOptions[sourceId];

		node.removeEventListener('dragstart', handleDragStart);
		node.removeEventListener('selectstart', handleSelectStart);
		node.setAttribute('draggable', false);
		};
		}
		}, {
		key: 'connectDropTarget',
		value: function connectDropTarget(targetId, node) {
		var _this3 = this;
		node.removeEventListener('dragstart', handleDragStart);
		node.removeEventListener('selectstart', handleSelectStart);
		node.setAttribute('draggable', false);
		};
		}
		}, {
		key: 'connectDropTarget',
		value: function connectDropTarget(targetId, node) {
		var _this3 = this;

		var handleDragEnter = function handleDragEnter(e) {
		return _this3.handleDragEnter(e, targetId);
		};
		var handleDragOver = function handleDragOver(e) {
		return _this3.handleDragOver(e, targetId);
		};
		var handleDrop = function handleDrop(e) {
		return _this3.handleDrop(e, targetId);
		};
		var handleDragEnter = function handleDragEnter(e) {
		return _this3.handleDragEnter(e, targetId);
		};
		var handleDragOver = function handleDragOver(e) {
		return _this3.handleDragOver(e, targetId);
		};
		var handleDrop = function handleDrop(e) {
		return _this3.handleDrop(e, targetId);
		};

		node.addEventListener('dragenter', handleDragEnter);
		node.addEventListener('dragover', handleDragOver);
		node.addEventListener('drop', handleDrop);
		node.addEventListener('dragenter', handleDragEnter);
		node.addEventListener('dragover', handleDragOver);
		node.addEventListener('drop', handleDrop);

		return function () {
		node.removeEventListener('dragenter', handleDragEnter);
		node.removeEventListener('dragover', handleDragOver);
		node.removeEventListener('drop', handleDrop);
		};
		}
		}, {
		key: 'getCurrentSourceNodeOptions',
		value: function getCurrentSourceNodeOptions() {
		var sourceId = this.monitor.getSourceId();
		var sourceNodeOptions = this.sourceNodeOptions[sourceId];
		return function () {
		node.removeEventListener('dragenter', handleDragEnter);
		node.removeEventListener('dragover', handleDragOver);
		node.removeEventListener('drop', handleDrop);
		};
		}
		}, {
		key: 'getCurrentSourceNodeOptions',
		value: function getCurrentSourceNodeOptions() {
		var sourceId = this.monitor.getSourceId();
		var sourceNodeOptions = this.sourceNodeOptions[sourceId];

		return (0, _defaults2.default)(sourceNodeOptions \|\| {}, {
		dropEffect: this.altKeyPressed ? 'copy' : 'move'
		});
		}
		}, {
		key: 'getCurrentDropEffect',
		value: function getCurrentDropEffect() {
		if (this.isDraggingNativeItem()) {
		// It makes more sense to default to 'copy' for native resources
		return 'copy';
		}
		return (0, _defaults2.default)(sourceNodeOptions \|\| {}, {
		dropEffect: this.altKeyPressed ? 'copy' : 'move'
		});
		}
		}, {
		key: 'getCurrentDropEffect',
		value: function getCurrentDropEffect() {
		if (this.isDraggingNativeItem()) {
		// It makes more sense to default to 'copy' for native resources
		return 'copy';
		}

		return this.getCurrentSourceNodeOptions().dropEffect;
		}
		}, {
		key: 'getCurrentSourcePreviewNodeOptions',
		value: function getCurrentSourcePreviewNodeOptions() {
		var sourceId = this.monitor.getSourceId();
		var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId];
		return this.getCurrentSourceNodeOptions().dropEffect;
		}
		}, {
		key: 'getCurrentSourcePreviewNodeOptions',
		value: function getCurrentSourcePreviewNodeOptions() {
		var sourceId = this.monitor.getSourceId();
		var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId];

		return (0, _defaults2.default)(sourcePreviewNodeOptions \|\| {}, {
		anchorX: 0.5,
		anchorY: 0.5,
		captureDraggingState: false
		});
		}
		}, {
		key: 'getSourceClientOffset',
		value: function getSourceClientOffset(sourceId) {
		return (0, _OffsetUtils.getNodeClientOffset)(this.sourceNodes[sourceId]);
		}
		}, {
		key: 'isDraggingNativeItem',
		value: function isDraggingNativeItem() {
		var itemType = this.monitor.getItemType();
		return Object.keys(NativeTypes).some(function (key) {
		return NativeTypes[key] === itemType;
		});
		}
		}, {
		key: 'beginDragNativeItem',
		value: function beginDragNativeItem(type) {
		this.clearCurrentDragSourceNode();
		return (0, _defaults2.default)(sourcePreviewNodeOptions \|\| {}, {
		anchorX: 0.5,
		anchorY: 0.5,
		captureDraggingState: false
		});
		}
		}, {
		key: 'getSourceClientOffset',
		value: function getSourceClientOffset(sourceId) {
		return (0, _OffsetUtils.getNodeClientOffset)(this.sourceNodes[sourceId]);
		}
		}, {
		key: 'isDraggingNativeItem',
		value: function isDraggingNativeItem() {
		var itemType = this.monitor.getItemType();
		return Object.keys(NativeTypes).some(function (key) {
		return NativeTypes[key] === itemType;
		});
		}
		}, {
		key: 'beginDragNativeItem',
		value: function beginDragNativeItem(type) {
		this.clearCurrentDragSourceNode();

		var SourceType = (0, _NativeDragSources.createNativeDragSource)(type);
		this.currentNativeSource = new SourceType();
		this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
		this.actions.beginDrag([this.currentNativeHandle]);
		var SourceType = (0, _NativeDragSources.createNativeDragSource)(type);
		this.currentNativeSource = new SourceType();
		this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
		this.actions.beginDrag([this.currentNativeHandle]);

		// On Firefox, if mouseover fires, the drag is over but browser failed to tell us.
		// See https://bugzilla.mozilla.org/show_bug.cgi?id=656164
		// This is not true for other browsers.
		if ((0, _BrowserDetector.isFirefox)()) {
		this.window.addEventListener('mouseover', this.asyncEndDragNativeItem, true);
		}
		}
		}, {
		key: 'asyncEndDragNativeItem',
		value: function asyncEndDragNativeItem() {
		this.asyncEndDragFrameId = this.window.requestAnimationFrame(this.endDragNativeItem);
		if ((0, _BrowserDetector.isFirefox)()) {
		this.window.removeEventListener('mouseover', this.asyncEndDragNativeItem, true);
		this.enterLeaveCounter.reset();
		}
		}
		}, {
		key: 'endDragNativeItem',
		value: function endDragNativeItem() {
		if (!this.isDraggingNativeItem()) {
		return;
		}
		// On Firefox, if mouseover fires, the drag is over but browser failed to tell us.
		// See https://bugzilla.mozilla.org/show_bug.cgi?id=656164
		// This is not true for other browsers.
		if ((0, _BrowserDetector.isFirefox)()) {
		this.window.addEventListener('mouseover', this.asyncEndDragNativeItem, true);
		}
		}
		}, {
		key: 'asyncEndDragNativeItem',
		value: function asyncEndDragNativeItem() {
		this.asyncEndDragFrameId = this.window.requestAnimationFrame(this.endDragNativeItem);
		if ((0, _BrowserDetector.isFirefox)()) {
		this.window.removeEventListener('mouseover', this.asyncEndDragNativeItem, true);
		this.enterLeaveCounter.reset();
		}
		}
		}, {
		key: 'endDragNativeItem',
		value: function endDragNativeItem() {
		if (!this.isDraggingNativeItem()) {
		return;
		}

		this.actions.endDrag();
		this.registry.removeSource(this.currentNativeHandle);
		this.currentNativeHandle = null;
		this.currentNativeSource = null;
		}
		}, {
		key: 'isNodeInDocument',
		value: function isNodeInDocument(node) {
		// Check the node either in the main document or in the current context
		return document.body.contains(node) \|\| this.window ? this.window.document.body.contains(node) : false;
		}
		}, {
		key: 'endDragIfSourceWasRemovedFromDOM',
		value: function endDragIfSourceWasRemovedFromDOM() {
		var node = this.currentDragSourceNode;
		if (this.isNodeInDocument(node)) {
		return;
		}
		this.actions.endDrag();
		this.registry.removeSource(this.currentNativeHandle);
		this.currentNativeHandle = null;
		this.currentNativeSource = null;
		}
		}, {
		key: 'isNodeInDocument',
		value: function isNodeInDocument(node) {
		// Check the node either in the main document or in the current context
		return document.body.contains(node) \|\| this.window ? this.window.document.body.contains(node) : false;
		}
		}, {
		key: 'endDragIfSourceWasRemovedFromDOM',
		value: function endDragIfSourceWasRemovedFromDOM() {
		var node = this.currentDragSourceNode;
		if (this.isNodeInDocument(node)) {
		return;
		}

		if (this.clearCurrentDragSourceNode()) {
		this.actions.endDrag();
		}
		}
		}, {
		key: 'setCurrentDragSourceNode',
		value: function setCurrentDragSourceNode(node) {
		this.clearCurrentDragSourceNode();
		this.currentDragSourceNode = node;
		this.currentDragSourceNodeOffset = (0, _OffsetUtils.getNodeClientOffset)(node);
		this.currentDragSourceNodeOffsetChanged = false;
		if (this.clearCurrentDragSourceNode()) {
		this.actions.endDrag();
		}
		}
		}, {
		key: 'setCurrentDragSourceNode',
		value: function setCurrentDragSourceNode(node) {
		this.clearCurrentDragSourceNode();
		this.currentDragSourceNode = node;
		this.currentDragSourceNodeOffset = (0, _OffsetUtils.getNodeClientOffset)(node);
		this.currentDragSourceNodeOffsetChanged = false;

		// Receiving a mouse event in the middle of a dragging operation
		// means it has ended and the drag source node disappeared from DOM,
		// so the browser didn't dispatch the dragend event.
		this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		}
		}, {
		key: 'clearCurrentDragSourceNode',
		value: function clearCurrentDragSourceNode() {
		if (this.currentDragSourceNode) {
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		return true;
		}
		// Receiving a mouse event in the middle of a dragging operation
		// means it has ended and the drag source node disappeared from DOM,
		// so the browser didn't dispatch the dragend event.
		this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		}
		}, {
		key: 'clearCurrentDragSourceNode',
		value: function clearCurrentDragSourceNode() {
		if (this.currentDragSourceNode) {
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		return true;
		}

		return false;
		}
		}, {
		key: 'checkIfCurrentDragSourceRectChanged',
		value: function checkIfCurrentDragSourceRectChanged() {
		var node = this.currentDragSourceNode;
		if (!node) {
		return false;
		}
		return false;
		}
		}, {
		key: 'checkIfCurrentDragSourceRectChanged',
		value: function checkIfCurrentDragSourceRectChanged() {
		var node = this.currentDragSourceNode;
		if (!node) {
		return false;
		}

		if (this.currentDragSourceNodeOffsetChanged) {
		return true;
		}
		if (this.currentDragSourceNodeOffsetChanged) {
		return true;
		}

		this.currentDragSourceNodeOffsetChanged = !(0, _shallowEqual2.default)((0, _OffsetUtils.getNodeClientOffset)(node), this.currentDragSourceNodeOffset);
		this.currentDragSourceNodeOffsetChanged = !(0, _shallowEqual2.default)((0, _OffsetUtils.getNodeClientOffset)(node), this.currentDragSourceNodeOffset);

		return this.currentDragSourceNodeOffsetChanged;
		}
		}, {
		key: 'handleTopDragStartCapture',
		value: function handleTopDragStartCapture() {
		this.clearCurrentDragSourceNode();
		this.dragStartSourceIds = [];
		}
		}, {
		key: 'handleDragStart',
		value: function handleDragStart(e, sourceId) {
		this.dragStartSourceIds.unshift(sourceId);
		}
		}, {
		key: 'handleTopDragStart',
		value: function handleTopDragStart(e) {
		var _this4 = this;
		return this.currentDragSourceNodeOffsetChanged;
		}
		}, {
		key: 'handleTopDragStartCapture',
		value: function handleTopDragStartCapture() {
		this.clearCurrentDragSourceNode();
		this.dragStartSourceIds = [];
		}
		}, {
		key: 'handleDragStart',
		value: function handleDragStart(e, sourceId) {
		this.dragStartSourceIds.unshift(sourceId);
		}
		}, {
		key: 'handleTopDragStart',
		value: function handleTopDragStart(e) {
		var _this4 = this;

		var dragStartSourceIds = this.dragStartSourceIds;
		var dragStartSourceIds = this.dragStartSourceIds;

		this.dragStartSourceIds = null;
		this.dragStartSourceIds = null;

		var clientOffset = (0, _OffsetUtils.getEventClientOffset)(e);
		var clientOffset = (0, _OffsetUtils.getEventClientOffset)(e);

		// Avoid crashing if we missed a drop event or our previous drag died
		if (this.monitor.isDragging()) {
		this.actions.endDrag();
		}
		// Avoid crashing if we missed a drop event or our previous drag died
		if (this.monitor.isDragging()) {
		this.actions.endDrag();
		}

		// Don't publish the source just yet (see why below)
		this.actions.beginDrag(dragStartSourceIds, {
		publishSource: false,
		getSourceClientOffset: this.getSourceClientOffset,
		clientOffset: clientOffset
		});
		// Don't publish the source just yet (see why below)
		this.actions.beginDrag(dragStartSourceIds, {
		publishSource: false,
		getSourceClientOffset: this.getSourceClientOffset,
		clientOffset: clientOffset
		});

		var dataTransfer = e.dataTransfer;
		var dataTransfer = e.dataTransfer;

		var nativeType = (0, _NativeDragSources.matchNativeItemType)(dataTransfer);
		var nativeType = (0, _NativeDragSources.matchNativeItemType)(dataTransfer);

		if (this.monitor.isDragging()) {
		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;
		if (this.monitor.isDragging()) {
		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 _getCurrentSourcePrev = this.getCurrentSourcePreviewNodeOptions(),
		anchorX = _getCurrentSourcePrev.anchorX,
		anchorY = _getCurrentSourcePrev.anchorY,
		offsetX = _getCurrentSourcePrev.offsetX,
		offsetY = _getCurrentSourcePrev.offsetY;
		var _getCurrentSourcePrev = this.getCurrentSourcePreviewNodeOptions(),
		anchorX = _getCurrentSourcePrev.anchorX,
		anchorY = _getCurrentSourcePrev.anchorY,
		offsetX = _getCurrentSourcePrev.offsetX,
		offsetY = _getCurrentSourcePrev.offsetY;

		var anchorPoint = { anchorX: anchorX, anchorY: anchorY };
		var offsetPoint = { offsetX: offsetX, offsetY: offsetY };
		var dragPreviewOffset = (0, _OffsetUtils.getDragPreviewOffset)(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
		var anchorPoint = { anchorX: anchorX, anchorY: anchorY };
		var offsetPoint = { offsetX: offsetX, offsetY: offsetY };
		var dragPreviewOffset = (0, _OffsetUtils.getDragPreviewOffset)(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);

		dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
		}
		dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
		}

		try {
		// Firefox won't drag without setting data
		dataTransfer.setData('application/json', {});
		} catch (err) {}
		// IE doesn't support MIME types in setData
		try {
		// Firefox won't drag without setting data
		dataTransfer.setData('application/json', {});
		} catch (err) {}
		// IE doesn't support MIME types in setData


		// Store drag source node so we can check whether
		// it is removed from DOM and trigger endDrag manually.
		this.setCurrentDragSourceNode(e.target);
		// Store drag source node so we can check whether
		// it is removed from DOM and trigger endDrag manually.
		this.setCurrentDragSourceNode(e.target);

		// Now we are ready to publish the drag source.. or are we not?
		// Now we are ready to publish the drag source.. or are we not?

		var _getCurrentSourcePrev2 = this.getCurrentSourcePreviewNodeOptions(),
		captureDraggingState = _getCurrentSourcePrev2.captureDraggingState;
		var _getCurrentSourcePrev2 = this.getCurrentSourcePreviewNodeOptions(),
		captureDraggingState = _getCurrentSourcePrev2.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 _this4.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 (nativeType) {
		// A native item (such as URL) dragged from inside the document
		this.beginDragNativeItem(nativeType);
		} else if (!dataTransfer.types && (!e.target.hasAttribute \|\| !e.target.hasAttribute('draggable'))) {
		// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
		// Just let it drag. It's a native type (URL or text) and will be picked up in
		// dragenter handler.
		return; // eslint-disable-line no-useless-return
		} else {
		// If by this time no drag source reacted, tell browser not to drag.
		e.preventDefault();
		}
		}
		}, {
		key: 'handleTopDragEndCapture',
		value: function handleTopDragEndCapture() {
		if (this.clearCurrentDragSourceNode()) {
		// Firefox can dispatch this event in an infinite loop
		// if dragend handler does something like showing an alert.
		// Only proceed if we have not handled it already.
		this.actions.endDrag();
		}
		}
		}, {
		key: 'handleTopDragEnterCapture',
		value: function handleTopDragEnterCapture(e) {
		this.dragEnterTargetIds = [];
		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 _this4.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 (nativeType) {
		// A native item (such as URL) dragged from inside the document
		this.beginDragNativeItem(nativeType);
		} else if (!dataTransfer.types && (!e.target.hasAttribute \|\| !e.target.hasAttribute('draggable'))) {
		// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
		// Just let it drag. It's a native type (URL or text) and will be picked up in
		// dragenter handler.
		return; // eslint-disable-line no-useless-return
		} else {
		// If by this time no drag source reacted, tell browser not to drag.
		e.preventDefault();
		}
		}
		}, {
		key: 'handleTopDragEndCapture',
		value: function handleTopDragEndCapture() {
		if (this.clearCurrentDragSourceNode()) {
		// Firefox can dispatch this event in an infinite loop
		// if dragend handler does something like showing an alert.
		// Only proceed if we have not handled it already.
		this.actions.endDrag();
		}
		}
		}, {
		key: 'handleTopDragEnterCapture',
		value: function handleTopDragEnterCapture(e) {
		this.dragEnterTargetIds = [];

		var isFirstEnter = this.enterLeaveCounter.enter(e.target);
		if (!isFirstEnter \|\| this.monitor.isDragging()) {
		return;
		}
		var isFirstEnter = this.enterLeaveCounter.enter(e.target);
		if (!isFirstEnter \|\| this.monitor.isDragging()) {
		return;
		}

		var dataTransfer = e.dataTransfer;
		var dataTransfer = e.dataTransfer;

		var nativeType = (0, _NativeDragSources.matchNativeItemType)(dataTransfer);
		var nativeType = (0, _NativeDragSources.matchNativeItemType)(dataTransfer);

		if (nativeType) {
		// A native item (such as file or URL) dragged from outside the document
		this.beginDragNativeItem(nativeType);
		}
		}
		}, {
		key: 'handleDragEnter',
		value: function handleDragEnter(e, targetId) {
		this.dragEnterTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDragEnter',
		value: function handleTopDragEnter(e) {
		var _this5 = this;
		if (nativeType) {
		// A native item (such as file or URL) dragged from outside the document
		this.beginDragNativeItem(nativeType);
		}
		}
		}, {
		key: 'handleDragEnter',
		value: function handleDragEnter(e, targetId) {
		this.dragEnterTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDragEnter',
		value: function handleTopDragEnter(e) {
		var _this5 = this;

		var dragEnterTargetIds = this.dragEnterTargetIds;
		var dragEnterTargetIds = this.dragEnterTargetIds;

		this.dragEnterTargetIds = [];
		this.dragEnterTargetIds = [];

		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		return;
		}
		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		return;
		}

		this.altKeyPressed = e.altKey;
		this.altKeyPressed = e.altKey;

		if (!(0, _BrowserDetector.isFirefox)()) {
		// Don't emit hover in `dragenter` on Firefox due to an edge case.
		// If the target changes position as the result of `dragenter`, Firefox
		// will still happily dispatch `dragover` despite target being no longer
		// there. The easy solution is to only fire `hover` in `dragover` on FF.
		this.actions.hover(dragEnterTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});
		}
		if (!(0, _BrowserDetector.isFirefox)()) {
		// Don't emit hover in `dragenter` on Firefox due to an edge case.
		// If the target changes position as the result of `dragenter`, Firefox
		// will still happily dispatch `dragover` despite target being no longer
		// there. The easy solution is to only fire `hover` in `dragover` on FF.
		this.actions.hover(dragEnterTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});
		}

		var canDrop = dragEnterTargetIds.some(function (targetId) {
		return _this5.monitor.canDropOnTarget(targetId);
		});
		var canDrop = dragEnterTargetIds.some(function (targetId) {
		return _this5.monitor.canDropOnTarget(targetId);
		});

		if (canDrop) {
		// IE requires this to fire dragover events
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		}
		}
		}, {
		key: 'handleTopDragOverCapture',
		value: function handleTopDragOverCapture() {
		this.dragOverTargetIds = [];
		}
		}, {
		key: 'handleDragOver',
		value: function handleDragOver(e, targetId) {
		this.dragOverTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDragOver',
		value: function handleTopDragOver(e) {
		var _this6 = this;
		if (canDrop) {
		// IE requires this to fire dragover events
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		}
		}
		}, {
		key: 'handleTopDragOverCapture',
		value: function handleTopDragOverCapture() {
		this.dragOverTargetIds = [];
		}
		}, {
		key: 'handleDragOver',
		value: function handleDragOver(e, targetId) {
		this.dragOverTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDragOver',
		value: function handleTopDragOver(e) {
		var _this6 = this;

		var dragOverTargetIds = this.dragOverTargetIds;
		var dragOverTargetIds = this.dragOverTargetIds;

		this.dragOverTargetIds = [];
		this.dragOverTargetIds = [];

		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		// Prevent default "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		return;
		}
		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		// Prevent default "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		return;
		}

		this.altKeyPressed = e.altKey;
		this.altKeyPressed = e.altKey;

		this.actions.hover(dragOverTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});
		this.actions.hover(dragOverTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});

		var canDrop = dragOverTargetIds.some(function (targetId) {
		return _this6.monitor.canDropOnTarget(targetId);
		});
		var canDrop = dragOverTargetIds.some(function (targetId) {
		return _this6.monitor.canDropOnTarget(targetId);
		});

		if (canDrop) {
		// Show user-specified drop effect.
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		} else if (this.isDraggingNativeItem()) {
		// Don't show a nice cursor but still prevent default
		// "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		} else if (this.checkIfCurrentDragSourceRectChanged()) {
		// Prevent animating to incorrect position.
		// Drop effect must be other than 'none' to prevent animation.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		}
		}
		}, {
		key: 'handleTopDragLeaveCapture',
		value: function handleTopDragLeaveCapture(e) {
		if (this.isDraggingNativeItem()) {
		e.preventDefault();
		}
		if (canDrop) {
		// Show user-specified drop effect.
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		} else if (this.isDraggingNativeItem()) {
		// Don't show a nice cursor but still prevent default
		// "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		} else if (this.checkIfCurrentDragSourceRectChanged()) {
		// Prevent animating to incorrect position.
		// Drop effect must be other than 'none' to prevent animation.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		}
		}
		}, {
		key: 'handleTopDragLeaveCapture',
		value: function handleTopDragLeaveCapture(e) {
		if (this.isDraggingNativeItem()) {
		e.preventDefault();
		}

		var isLastLeave = this.enterLeaveCounter.leave(e.target);
		if (!isLastLeave) {
		return;
		}
		var isLastLeave = this.enterLeaveCounter.leave(e.target);
		if (!isLastLeave) {
		return;
		}

		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		}
		}
		}, {
		key: 'handleTopDropCapture',
		value: function handleTopDropCapture(e) {
		this.dropTargetIds = [];
		e.preventDefault();
		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		}
		}
		}, {
		key: 'handleTopDropCapture',
		value: function handleTopDropCapture(e) {
		this.dropTargetIds = [];
		e.preventDefault();

		if (this.isDraggingNativeItem()) {
		this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer);
		}
		if (this.isDraggingNativeItem()) {
		this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer);
		}

		this.enterLeaveCounter.reset();
		}
		}, {
		key: 'handleDrop',
		value: function handleDrop(e, targetId) {
		this.dropTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDrop',
		value: function handleTopDrop(e) {
		var dropTargetIds = this.dropTargetIds;
		this.enterLeaveCounter.reset();
		}
		}, {
		key: 'handleDrop',
		value: function handleDrop(e, targetId) {
		this.dropTargetIds.unshift(targetId);
		}
		}, {
		key: 'handleTopDrop',
		value: function handleTopDrop(e) {
		var dropTargetIds = this.dropTargetIds;

		this.dropTargetIds = [];
		this.dropTargetIds = [];

		this.actions.hover(dropTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});
		this.actions.drop({ dropEffect: this.getCurrentDropEffect() });
		this.actions.hover(dropTargetIds, {
		clientOffset: (0, _OffsetUtils.getEventClientOffset)(e)
		});
		this.actions.drop({ dropEffect: this.getCurrentDropEffect() });

		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		} else {
		this.endDragIfSourceWasRemovedFromDOM();
		}
		}
		}, {
		key: 'handleSelectStart',
		value: function handleSelectStart(e) {
		var target = e.target;
		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		} else {
		this.endDragIfSourceWasRemovedFromDOM();
		}
		}
		}, {
		key: 'handleSelectStart',
		value: function handleSelectStart(e) {
		var target = e.target;

		// Only IE requires us to explicitly say
		// we want drag drop operation to start
		// Only IE requires us to explicitly say
		// we want drag drop operation to start

		if (typeof target.dragDrop !== 'function') {
		return;
		}
		if (typeof target.dragDrop !== 'function') {
		return;
		}

		// Inputs and textareas should be selectable
		if (target.tagName === 'INPUT' \|\| target.tagName === 'SELECT' \|\| target.tagName === 'TEXTAREA' \|\| target.isContentEditable) {
		return;
		}
		// Inputs and textareas should be selectable
		if (target.tagName === 'INPUT' \|\| target.tagName === 'SELECT' \|\| target.tagName === 'TEXTAREA' \|\| target.isContentEditable) {
		return;
		}

		// For other targets, ask IE
		// to enable drag and drop
		e.preventDefault();
		target.dragDrop();
		}
		}, {
		key: 'window',
		get: function get() {
		if (this.context && this.context.window) {
		return this.context.window;
		} else if (typeof window !== 'undefined') {
		return window;
		}
		return undefined;
		}
		}]);
		// For other targets, ask IE
		// to enable drag and drop
		e.preventDefault();
		target.dragDrop();
		}
		}, {
		key: 'window',
		get: function get() {
		if (this.context && this.context.window) {
		return this.context.window;
		} else if (typeof window !== 'undefined') {
		return window;
		}
		return undefined;
		}
		}]);

		return HTML5Backend;
		return HTML5Backend;
		}();

		exports.default = HTML5Backend;

lib/index.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -28,3 +28,3 @@ exports.getEmptyImage = exports.NativeTypes = undefined;
		function createHTML5Backend(manager) {
		return new _HTML5Backend2.default(manager);
		return new _HTML5Backend2.default(manager);
		}

188

lib/MonotonicInterpolant.js

		"use strict";

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -16,109 +16,109 @@
		var MonotonicInterpolant = function () {
		function MonotonicInterpolant(xs, ys) {
		_classCallCheck(this, MonotonicInterpolant);
		function MonotonicInterpolant(xs, ys) {
		_classCallCheck(this, MonotonicInterpolant);

		var length = xs.length;
		var length = xs.length;

		// Rearrange xs and ys so that xs is sorted
		var indexes = [];
		for (var i = 0; i < length; i++) {
		indexes.push(i);
		}
		indexes.sort(function (a, b) {
		return xs[a] < xs[b] ? -1 : 1;
		});
		// Rearrange xs and ys so that xs is sorted
		var indexes = [];
		for (var i = 0; i < length; i++) {
		indexes.push(i);
		}
		indexes.sort(function (a, b) {
		return xs[a] < xs[b] ? -1 : 1;
		});

		// Get consecutive differences and slopes
		var dys = [];
		var dxs = [];
		var ms = [];
		var dx = void 0;
		var dy = void 0;
		for (var _i = 0; _i < length - 1; _i++) {
		dx = xs[_i + 1] - xs[_i];
		dy = ys[_i + 1] - ys[_i];
		dxs.push(dx);
		dys.push(dy);
		ms.push(dy / dx);
		}
		// Get consecutive differences and slopes
		var dys = [];
		var dxs = [];
		var ms = [];
		var dx = void 0;
		var dy = void 0;
		for (var _i = 0; _i < length - 1; _i++) {
		dx = xs[_i + 1] - xs[_i];
		dy = ys[_i + 1] - ys[_i];
		dxs.push(dx);
		dys.push(dy);
		ms.push(dy / dx);
		}

		// Get degree-1 coefficients
		var c1s = [ms[0]];
		for (var _i2 = 0; _i2 < dxs.length - 1; _i2++) {
		var _m = ms[_i2];
		var mNext = ms[_i2 + 1];
		if (_m * mNext <= 0) {
		c1s.push(0);
		} else {
		dx = dxs[_i2];
		var dxNext = dxs[_i2 + 1];
		var common = dx + dxNext;
		c1s.push(3 * common / ((common + dxNext) / _m + (common + dx) / mNext));
		}
		}
		c1s.push(ms[ms.length - 1]);
		// Get degree-1 coefficients
		var c1s = [ms[0]];
		for (var _i2 = 0; _i2 < dxs.length - 1; _i2++) {
		var _m = ms[_i2];
		var mNext = ms[_i2 + 1];
		if (_m * mNext <= 0) {
		c1s.push(0);
		} else {
		dx = dxs[_i2];
		var dxNext = dxs[_i2 + 1];
		var common = dx + dxNext;
		c1s.push(3 * common / ((common + dxNext) / _m + (common + dx) / mNext));
		}
		}
		c1s.push(ms[ms.length - 1]);

		// Get degree-2 and degree-3 coefficients
		var c2s = [];
		var c3s = [];
		var m = void 0;
		for (var _i3 = 0; _i3 < c1s.length - 1; _i3++) {
		m = ms[_i3];
		var c1 = c1s[_i3];
		var invDx = 1 / dxs[_i3];
		var _common = c1 + c1s[_i3 + 1] - m - m;
		c2s.push((m - c1 - _common) * invDx);
		c3s.push(_common * invDx * invDx);
		}
		// Get degree-2 and degree-3 coefficients
		var c2s = [];
		var c3s = [];
		var m = void 0;
		for (var _i3 = 0; _i3 < c1s.length - 1; _i3++) {
		m = ms[_i3];
		var c1 = c1s[_i3];
		var invDx = 1 / dxs[_i3];
		var _common = c1 + c1s[_i3 + 1] - m - m;
		c2s.push((m - c1 - _common) * invDx);
		c3s.push(_common * invDx * invDx);
		}

		this.xs = xs;
		this.ys = ys;
		this.c1s = c1s;
		this.c2s = c2s;
		this.c3s = c3s;
		}
		this.xs = xs;
		this.ys = ys;
		this.c1s = c1s;
		this.c2s = c2s;
		this.c3s = c3s;
		}

		_createClass(MonotonicInterpolant, [{
		key: "interpolate",
		value: function interpolate(x) {
		var xs = this.xs,
		ys = this.ys,
		c1s = this.c1s,
		c2s = this.c2s,
		c3s = this.c3s;
		_createClass(MonotonicInterpolant, [{
		key: "interpolate",
		value: function interpolate(x) {
		var xs = this.xs,
		ys = this.ys,
		c1s = this.c1s,
		c2s = this.c2s,
		c3s = this.c3s;

		// The rightmost point in the dataset should give an exact result
		// The rightmost point in the dataset should give an exact result

		var i = xs.length - 1;
		if (x === xs[i]) {
		return ys[i];
		}
		var i = xs.length - 1;
		if (x === xs[i]) {
		return ys[i];
		}

		// Search for the interval x is in, returning the corresponding y if x is one of the original xs
		var low = 0;
		var high = c3s.length - 1;
		var mid = void 0;
		while (low <= high) {
		mid = Math.floor(0.5 * (low + high));
		var xHere = xs[mid];
		if (xHere < x) {
		low = mid + 1;
		} else if (xHere > x) {
		high = mid - 1;
		} else {
		return ys[mid];
		}
		}
		i = Math.max(0, high);
		// Search for the interval x is in, returning the corresponding y if x is one of the original xs
		var low = 0;
		var high = c3s.length - 1;
		var mid = void 0;
		while (low <= high) {
		mid = Math.floor(0.5 * (low + high));
		var xHere = xs[mid];
		if (xHere < x) {
		low = mid + 1;
		} else if (xHere > x) {
		high = mid - 1;
		} else {
		return ys[mid];
		}
		}
		i = Math.max(0, high);

		// Interpolate
		var diff = x - xs[i];
		var diffSq = diff * diff;
		return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
		}
		}]);
		// Interpolate
		var diff = x - xs[i];
		var diffSq = diff * diff;
		return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
		}
		}]);

		return MonotonicInterpolant;
		return MonotonicInterpolant;
		}();

		exports.default = MonotonicInterpolant;

138

lib/NativeDragSources.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -27,90 +27,90 @@
		function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
		var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
		return resultSoFar \|\| dataTransfer.getData(typeToTry);
		}, null);
		var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
		return resultSoFar \|\| dataTransfer.getData(typeToTry);
		}, null);

		return result != null ? // eslint-disable-line eqeqeq
		result : defaultValue;
		return result != null // eslint-disable-line eqeqeq
		? result : defaultValue;
		}

		var nativeTypesConfig = (_nativeTypesConfig = {}, _defineProperty(_nativeTypesConfig, NativeTypes.FILE, {
		exposeProperty: 'files',
		matchesTypes: ['Files'],
		getData: function getData(dataTransfer) {
		return Array.prototype.slice.call(dataTransfer.files);
		}
		exposeProperty: 'files',
		matchesTypes: ['Files'],
		getData: function getData(dataTransfer) {
		return Array.prototype.slice.call(dataTransfer.files);
		}
		}), _defineProperty(_nativeTypesConfig, NativeTypes.URL, {
		exposeProperty: 'urls',
		matchesTypes: ['Url', 'text/uri-list'],
		getData: function getData(dataTransfer, matchesTypes) {
		return getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
		}
		exposeProperty: 'urls',
		matchesTypes: ['Url', 'text/uri-list'],
		getData: function getData(dataTransfer, matchesTypes) {
		return getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
		}
		}), _defineProperty(_nativeTypesConfig, NativeTypes.TEXT, {
		exposeProperty: 'text',
		matchesTypes: ['Text', 'text/plain'],
		getData: function getData(dataTransfer, matchesTypes) {
		return getDataFromDataTransfer(dataTransfer, matchesTypes, '');
		}
		exposeProperty: 'text',
		matchesTypes: ['Text', 'text/plain'],
		getData: function getData(dataTransfer, matchesTypes) {
		return getDataFromDataTransfer(dataTransfer, matchesTypes, '');
		}
		}), _nativeTypesConfig);

		function createNativeDragSource(type) {
		var _nativeTypesConfig$ty = nativeTypesConfig[type],
		exposeProperty = _nativeTypesConfig$ty.exposeProperty,
		matchesTypes = _nativeTypesConfig$ty.matchesTypes,
		getData = _nativeTypesConfig$ty.getData;
		var _nativeTypesConfig$ty = nativeTypesConfig[type],
		exposeProperty = _nativeTypesConfig$ty.exposeProperty,
		matchesTypes = _nativeTypesConfig$ty.matchesTypes,
		getData = _nativeTypesConfig$ty.getData;


		return function () {
		function NativeDragSource() {
		var _item, _mutatorMap;
		return function () {
		function NativeDragSource() {
		var _item, _mutatorMap;

		_classCallCheck(this, NativeDragSource);
		_classCallCheck(this, NativeDragSource);

		this.item = (_item = {}, _mutatorMap = {}, _mutatorMap[exposeProperty] = _mutatorMap[exposeProperty] \|\| {}, _mutatorMap[exposeProperty].get = function () {
		console.warn( // eslint-disable-line no-console
		'Browser doesn\'t allow reading "' + exposeProperty + '" until the drop event.');
		return null;
		}, _defineEnumerableProperties(_item, _mutatorMap), _item);
		}
		this.item = (_item = {}, _mutatorMap = {}, _mutatorMap[exposeProperty] = _mutatorMap[exposeProperty] \|\| {}, _mutatorMap[exposeProperty].get = function () {
		// eslint-disable-next-line no-console
		console.warn('Browser doesn\'t allow reading "' + exposeProperty + '" until the drop event.');
		return null;
		}, _defineEnumerableProperties(_item, _mutatorMap), _item);
		}

		_createClass(NativeDragSource, [{
		key: 'mutateItemByReadingDataTransfer',
		value: function mutateItemByReadingDataTransfer(dataTransfer) {
		delete this.item[exposeProperty];
		this.item[exposeProperty] = getData(dataTransfer, matchesTypes);
		}
		}, {
		key: 'canDrag',
		value: function canDrag() {
		return true;
		}
		}, {
		key: 'beginDrag',
		value: function beginDrag() {
		return this.item;
		}
		}, {
		key: 'isDragging',
		value: function isDragging(monitor, handle) {
		return handle === monitor.getSourceId();
		}
		}, {
		key: 'endDrag',
		value: function endDrag() {}
		}]);
		_createClass(NativeDragSource, [{
		key: 'mutateItemByReadingDataTransfer',
		value: function mutateItemByReadingDataTransfer(dataTransfer) {
		delete this.item[exposeProperty];
		this.item[exposeProperty] = getData(dataTransfer, matchesTypes);
		}
		}, {
		key: 'canDrag',
		value: function canDrag() {
		return true;
		}
		}, {
		key: 'beginDrag',
		value: function beginDrag() {
		return this.item;
		}
		}, {
		key: 'isDragging',
		value: function isDragging(monitor, handle) {
		return handle === monitor.getSourceId();
		}
		}, {
		key: 'endDrag',
		value: function endDrag() {}
		}]);

		return NativeDragSource;
		}();
		return NativeDragSource;
		}();
		}

		function matchNativeItemType(dataTransfer) {
		var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types \|\| []);
		var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types \|\| []);

		return Object.keys(nativeTypesConfig).filter(function (nativeItemType) {
		var matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;
		return Object.keys(nativeTypesConfig).filter(function (nativeItemType) {
		var matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;

		return matchesTypes.some(function (t) {
		return dataTransferTypes.indexOf(t) > -1;
		});
		})[0] \|\| null;
		return matchesTypes.some(function (t) {
		return dataTransferTypes.indexOf(t) > -1;
		});
		})[0] \|\| null;
		}

150

lib/OffsetUtils.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		@@ -24,97 +24,97 @@ exports.getNodeClientOffset = getNodeClientOffset;
		function getNodeClientOffset(node) {
		var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
		var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;

		if (!el) {
		return null;
		}
		if (!el) {
		return null;
		}

		var _el$getBoundingClient = el.getBoundingClientRect(),
		top = _el$getBoundingClient.top,
		left = _el$getBoundingClient.left;
		var _el$getBoundingClient = el.getBoundingClientRect(),
		top = _el$getBoundingClient.top,
		left = _el$getBoundingClient.left;

		return { x: left, y: top };
		return { x: left, y: top };
		}

		function getEventClientOffset(e) {
		return {
		x: e.clientX,
		y: e.clientY
		};
		return {
		x: e.clientX,
		y: e.clientY
		};
		}

		function isImageNode(node) {
		return node.nodeName === 'IMG' && ((0, _BrowserDetector.isFirefox)() \|\| !document.documentElement.contains(node));
		return node.nodeName === 'IMG' && ((0, _BrowserDetector.isFirefox)() \|\| !document.documentElement.contains(node));
		}

		function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
		var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
		var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
		var dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
		var dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;

		// Work around @2x coordinate discrepancies in browsers
		if ((0, _BrowserDetector.isSafari)() && isImage) {
		dragPreviewHeight /= window.devicePixelRatio;
		dragPreviewWidth /= window.devicePixelRatio;
		}
		return { dragPreviewWidth: dragPreviewWidth, dragPreviewHeight: dragPreviewHeight };
		// Work around @2x coordinate discrepancies in browsers
		if ((0, _BrowserDetector.isSafari)() && isImage) {
		dragPreviewHeight /= window.devicePixelRatio;
		dragPreviewWidth /= window.devicePixelRatio;
		}
		return { dragPreviewWidth: dragPreviewWidth, dragPreviewHeight: dragPreviewHeight };
		}

		function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
		// The browsers will use the image intrinsic size under different conditions.
		// Firefox only cares if it's an image, but WebKit also wants it to be detached.
		var isImage = isImageNode(dragPreview);
		var dragPreviewNode = isImage ? sourceNode : dragPreview;
		var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
		var offsetFromDragPreview = {
		x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
		y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
		};
		var sourceWidth = sourceNode.offsetWidth,
		sourceHeight = sourceNode.offsetHeight;
		var anchorX = anchorPoint.anchorX,
		anchorY = anchorPoint.anchorY;
		// The browsers will use the image intrinsic size under different conditions.
		// Firefox only cares if it's an image, but WebKit also wants it to be detached.
		var isImage = isImageNode(dragPreview);
		var dragPreviewNode = isImage ? sourceNode : dragPreview;
		var dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
		var offsetFromDragPreview = {
		x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
		y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
		};
		var sourceWidth = sourceNode.offsetWidth,
		sourceHeight = sourceNode.offsetHeight;
		var anchorX = anchorPoint.anchorX,
		anchorY = anchorPoint.anchorY;

		var _getDragPreviewSize = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight),
		dragPreviewWidth = _getDragPreviewSize.dragPreviewWidth,
		dragPreviewHeight = _getDragPreviewSize.dragPreviewHeight;
		var _getDragPreviewSize = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight),
		dragPreviewWidth = _getDragPreviewSize.dragPreviewWidth,
		dragPreviewHeight = _getDragPreviewSize.dragPreviewHeight;

		var calculateYOffset = function calculateYOffset() {
		var interpolantY = new _MonotonicInterpolant2.default([0, 0.5, 1], [
		// Dock to the top
		offsetFromDragPreview.y,
		// Align at the center
		offsetFromDragPreview.y / sourceHeight * dragPreviewHeight,
		// Dock to the bottom
		offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
		var y = interpolantY.interpolate(anchorY);
		// Work around Safari 8 positioning bug
		if ((0, _BrowserDetector.isSafari)() && isImage) {
		// We'll have to wait for @3x to see if this is entirely correct
		y += (window.devicePixelRatio - 1) * dragPreviewHeight;
		}
		return y;
		};
		var calculateYOffset = function calculateYOffset() {
		var interpolantY = new _MonotonicInterpolant2.default([0, 0.5, 1], [
		// Dock to the top
		offsetFromDragPreview.y,
		// Align at the center
		offsetFromDragPreview.y / sourceHeight * dragPreviewHeight,
		// Dock to the bottom
		offsetFromDragPreview.y + dragPreviewHeight - sourceHeight]);
		var y = interpolantY.interpolate(anchorY);
		// Work around Safari 8 positioning bug
		if ((0, _BrowserDetector.isSafari)() && isImage) {
		// We'll have to wait for @3x to see if this is entirely correct
		y += (window.devicePixelRatio - 1) * dragPreviewHeight;
		}
		return y;
		};

		var calculateXOffset = function calculateXOffset() {
		// Interpolate coordinates depending on anchor point
		// If you know a simpler way to do this, let me know
		var interpolantX = new _MonotonicInterpolant2.default([0, 0.5, 1], [
		// Dock to the left
		offsetFromDragPreview.x,
		// Align at the center
		offsetFromDragPreview.x / sourceWidth * dragPreviewWidth,
		// Dock to the right
		offsetFromDragPreview.x + dragPreviewWidth - sourceWidth]);
		return interpolantX.interpolate(anchorX);
		};
		var calculateXOffset = function calculateXOffset() {
		// Interpolate coordinates depending on anchor point
		// If you know a simpler way to do this, let me know
		var interpolantX = new _MonotonicInterpolant2.default([0, 0.5, 1], [
		// Dock to the left
		offsetFromDragPreview.x,
		// Align at the center
		offsetFromDragPreview.x / sourceWidth * dragPreviewWidth,
		// Dock to the right
		offsetFromDragPreview.x + dragPreviewWidth - sourceWidth]);
		return interpolantX.interpolate(anchorX);
		};

		// Force offsets if specified in the options.
		var offsetX = offsetPoint.offsetX,
		offsetY = offsetPoint.offsetY;
		// Force offsets if specified in the options.
		var offsetX = offsetPoint.offsetX,
		offsetY = offsetPoint.offsetY;

		var isManualOffsetX = offsetX === 0 \|\| offsetX;
		var isManualOffsetY = offsetY === 0 \|\| offsetY;
		return {
		x: isManualOffsetX ? offsetX : calculateXOffset(),
		y: isManualOffsetY ? offsetY : calculateYOffset()
		};
		var isManualOffsetX = offsetX === 0 \|\| offsetX;
		var isManualOffsetY = offsetY === 0 \|\| offsetY;
		return {
		x: isManualOffsetX ? offsetX : calculateXOffset(),
		y: isManualOffsetY ? offsetY : calculateYOffset()
		};
		}

lib/shallowEqual.js

		"use strict";

		Object.defineProperty(exports, "__esModule", {
		value: true
		value: true
		});
		exports.default = shallowEqual;
		function shallowEqual(objA, objB) {
		if (objA === objB) {
		return true;
		}
		if (objA === objB) {
		return true;
		}

		var keysA = Object.keys(objA);
		var keysB = Object.keys(objB);
		var keysA = Object.keys(objA);
		var keysB = Object.keys(objB);

		if (keysA.length !== keysB.length) {
		return false;
		}
		if (keysA.length !== keysB.length) {
		return false;
		}

		// Test for A's keys different from B.
		var hasOwn = Object.prototype.hasOwnProperty;
		for (var i = 0; i < keysA.length; i += 1) {
		if (!hasOwn.call(objB, keysA[i]) \|\| objA[keysA[i]] !== objB[keysA[i]]) {
		return false;
		}
		// Test for A's keys different from B.
		var hasOwn = Object.prototype.hasOwnProperty;
		for (var i = 0; i < keysA.length; i += 1) {
		if (!hasOwn.call(objB, keysA[i]) \|\| objA[keysA[i]] !== objB[keysA[i]]) {
		return false;
		}

		var valA = objA[keysA[i]];
		var valB = objB[keysA[i]];
		var valA = objA[keysA[i]];
		var valB = objB[keysA[i]];

		if (valA !== valB) {
		return false;
		}
		}
		if (valA !== valB) {
		return false;
		}
		}

		return true;
		return true;
		}

package.json

		{
		"name": "react-dnd-html5-backend",
		"version": "2.5.3",
		"version": "2.5.4",
		"description": "HTML5 backend for React DnD",
		@@ -20,3 +20,3 @@ "main": "lib/index.js",
		"devDependencies": {
		"react-dnd": "^2.5.3"
		"react-dnd": "^2.5.4"
		},
		@@ -23,0 +23,0 @@ "dependencies": {

src/BrowserDetector.js

		@@ -1,4 +0,4 @@
		import memoize from 'lodash/memoize';
		import memoize from 'lodash/memoize'

		export const isFirefox = memoize(() => /firefox/i.test(navigator.userAgent));
		export const isSafari = memoize(() => Boolean(window.safari));
		export const isFirefox = memoize(() => /firefox/i.test(navigator.userAgent))
		export const isSafari = memoize(() => Boolean(window.safari))

src/EnterLeaveCounter.js

		@@ -1,41 +0,35 @@
		import union from 'lodash/union';
		import without from 'lodash/without';
		import union from 'lodash/union'
		import without from 'lodash/without'

		export default class EnterLeaveCounter {
		constructor() {
		this.entered = [];
		}
		constructor() {
		this.entered = []
		}

		enter(enteringNode) {
		const previousLength = this.entered.length;
		enter(enteringNode) {
		const previousLength = this.entered.length

		const isNodeEntered = node => (
		document.documentElement.contains(node) &&
		(!node.contains \|\| node.contains(enteringNode))
		);
		const isNodeEntered = node =>
		document.documentElement.contains(node) &&
		(!node.contains \|\| node.contains(enteringNode))

		this.entered = union(
		this.entered.filter(isNodeEntered),
		[enteringNode],
		);
		this.entered = union(this.entered.filter(isNodeEntered), [enteringNode])

		return previousLength === 0 && this.entered.length > 0;
		}
		return previousLength === 0 && this.entered.length > 0
		}

		leave(leavingNode) {
		const previousLength = this.entered.length;
		leave(leavingNode) {
		const previousLength = this.entered.length

		this.entered = without(
		this.entered.filter(node =>
		document.documentElement.contains(node),
		),
		leavingNode,
		);
		this.entered = without(
		this.entered.filter(node => document.documentElement.contains(node)),
		leavingNode,
		)

		return previousLength > 0 && this.entered.length === 0;
		}
		return previousLength > 0 && this.entered.length === 0
		}

		reset() {
		this.entered = [];
		}
		reset() {
		this.entered = []
		}
		}

src/getEmptyImage.js

		@@ -1,9 +0,10 @@
		let emptyImage;
		let emptyImage
		export default function getEmptyImage() {
		if (!emptyImage) {
		emptyImage = new Image();
		emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
		}
		if (!emptyImage) {
		emptyImage = new Image()
		emptyImage.src =
		'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
		}

		return emptyImage;
		return emptyImage
		}

1030

src/HTML5Backend.js

		@@ -1,587 +0,631 @@
		import defaults from 'lodash/defaults';
		import shallowEqual from './shallowEqual';
		import EnterLeaveCounter from './EnterLeaveCounter';
		import { isFirefox } from './BrowserDetector';
		import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset } from './OffsetUtils';
		import { createNativeDragSource, matchNativeItemType } from './NativeDragSources';
		import * as NativeTypes from './NativeTypes';
		/* eslint-disable no-underscore-dangle */
		import defaults from 'lodash/defaults'
		import shallowEqual from './shallowEqual'
		import EnterLeaveCounter from './EnterLeaveCounter'
		import { isFirefox } from './BrowserDetector'
		import {
		getNodeClientOffset,
		getEventClientOffset,
		getDragPreviewOffset,
		} from './OffsetUtils'
		import {
		createNativeDragSource,
		matchNativeItemType,
		} from './NativeDragSources'
		import * as NativeTypes from './NativeTypes'

		export default class HTML5Backend {
		constructor(manager) {
		this.actions = manager.getActions();
		this.monitor = manager.getMonitor();
		this.registry = manager.getRegistry();
		this.context = manager.getContext();
		constructor(manager) {
		this.actions = manager.getActions()
		this.monitor = manager.getMonitor()
		this.registry = manager.getRegistry()
		this.context = manager.getContext()

		this.sourcePreviewNodes = {};
		this.sourcePreviewNodeOptions = {};
		this.sourceNodes = {};
		this.sourceNodeOptions = {};
		this.enterLeaveCounter = new EnterLeaveCounter();
		this.sourcePreviewNodes = {}
		this.sourcePreviewNodeOptions = {}
		this.sourceNodes = {}
		this.sourceNodeOptions = {}
		this.enterLeaveCounter = new EnterLeaveCounter()

		this.dragStartSourceIds = [];
		this.dropTargetIds = [];
		this.dragEnterTargetIds = [];
		this.currentNativeSource = null;
		this.currentNativeHandle = null;
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.altKeyPressed = false;
		this.dragStartSourceIds = []
		this.dropTargetIds = []
		this.dragEnterTargetIds = []
		this.currentNativeSource = null
		this.currentNativeHandle = null
		this.currentDragSourceNode = null
		this.currentDragSourceNodeOffset = null
		this.currentDragSourceNodeOffsetChanged = false
		this.altKeyPressed = false

		this.getSourceClientOffset = this.getSourceClientOffset.bind(this);
		this.handleTopDragStart = this.handleTopDragStart.bind(this);
		this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this);
		this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this);
		this.handleTopDragEnter = this.handleTopDragEnter.bind(this);
		this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this);
		this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
		this.handleTopDragOver = this.handleTopDragOver.bind(this);
		this.handleTopDragOverCapture = this.handleTopDragOverCapture.bind(this);
		this.handleTopDrop = this.handleTopDrop.bind(this);
		this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
		this.handleSelectStart = this.handleSelectStart.bind(this);
		this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
		this.endDragNativeItem = this.endDragNativeItem.bind(this);
		this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this);
		this.isNodeInDocument = this.isNodeInDocument.bind(this);
		}
		this.getSourceClientOffset = this.getSourceClientOffset.bind(this)
		this.handleTopDragStart = this.handleTopDragStart.bind(this)
		this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this)
		this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this)
		this.handleTopDragEnter = this.handleTopDragEnter.bind(this)
		this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this)
		this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this)
		this.handleTopDragOver = this.handleTopDragOver.bind(this)
		this.handleTopDragOverCapture = this.handleTopDragOverCapture.bind(this)
		this.handleTopDrop = this.handleTopDrop.bind(this)
		this.handleTopDropCapture = this.handleTopDropCapture.bind(this)
		this.handleSelectStart = this.handleSelectStart.bind(this)
		this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(
		this,
		)
		this.endDragNativeItem = this.endDragNativeItem.bind(this)
		this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this)
		this.isNodeInDocument = this.isNodeInDocument.bind(this)
		}

		get window() {
		if (this.context && this.context.window) {
		return this.context.window;
		} else if (typeof window !== 'undefined') {
		return window;
		}
		return undefined;
		}
		get window() {
		if (this.context && this.context.window) {
		return this.context.window
		} else if (typeof window !== 'undefined') {
		return window
		}
		return undefined
		}

		setup() {
		if (this.window === undefined) {
		return;
		}
		setup() {
		if (this.window === undefined) {
		return
		}

		if (this.window.__isReactDndBackendSetUp) { // eslint-disable-line no-underscore-dangle
		throw new Error('Cannot have two HTML5 backends at the same time.');
		}
		this.window.__isReactDndBackendSetUp = true; // eslint-disable-line no-underscore-dangle
		this.addEventListeners(this.window);
		}
		if (this.window.__isReactDndBackendSetUp) {
		throw new Error('Cannot have two HTML5 backends at the same time.')
		}
		this.window.__isReactDndBackendSetUp = true
		this.addEventListeners(this.window)
		}

		teardown() {
		if (this.window === undefined) {
		return;
		}
		teardown() {
		if (this.window === undefined) {
		return
		}

		this.window.__isReactDndBackendSetUp = false; // eslint-disable-line no-underscore-dangle
		this.removeEventListeners(this.window);
		this.clearCurrentDragSourceNode();
		if (this.asyncEndDragFrameId) {
		this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
		}
		}
		this.window.__isReactDndBackendSetUp = false
		this.removeEventListeners(this.window)
		this.clearCurrentDragSourceNode()
		if (this.asyncEndDragFrameId) {
		this.window.cancelAnimationFrame(this.asyncEndDragFrameId)
		}
		}

		addEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.addEventListener) {
		return;
		}
		target.addEventListener('dragstart', this.handleTopDragStart);
		target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.addEventListener('dragend', this.handleTopDragEndCapture, true);
		target.addEventListener('dragenter', this.handleTopDragEnter);
		target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.addEventListener('dragover', this.handleTopDragOver);
		target.addEventListener('dragover', this.handleTopDragOverCapture, true);
		target.addEventListener('drop', this.handleTopDrop);
		target.addEventListener('drop', this.handleTopDropCapture, true);
		}
		addEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.addEventListener) {
		return
		}
		target.addEventListener('dragstart', this.handleTopDragStart)
		target.addEventListener('dragstart', this.handleTopDragStartCapture, true)
		target.addEventListener('dragend', this.handleTopDragEndCapture, true)
		target.addEventListener('dragenter', this.handleTopDragEnter)
		target.addEventListener('dragenter', this.handleTopDragEnterCapture, true)
		target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true)
		target.addEventListener('dragover', this.handleTopDragOver)
		target.addEventListener('dragover', this.handleTopDragOverCapture, true)
		target.addEventListener('drop', this.handleTopDrop)
		target.addEventListener('drop', this.handleTopDropCapture, true)
		}

		removeEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.removeEventListener) {
		return;
		}
		target.removeEventListener('dragstart', this.handleTopDragStart);
		target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
		target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
		target.removeEventListener('dragenter', this.handleTopDragEnter);
		target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
		target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
		target.removeEventListener('dragover', this.handleTopDragOver);
		target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
		target.removeEventListener('drop', this.handleTopDrop);
		target.removeEventListener('drop', this.handleTopDropCapture, true);
		}
		removeEventListeners(target) {
		// SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
		if (!target.removeEventListener) {
		return
		}
		target.removeEventListener('dragstart', this.handleTopDragStart)
		target.removeEventListener(
		'dragstart',
		this.handleTopDragStartCapture,
		true,
		)
		target.removeEventListener('dragend', this.handleTopDragEndCapture, true)
		target.removeEventListener('dragenter', this.handleTopDragEnter)
		target.removeEventListener(
		'dragenter',
		this.handleTopDragEnterCapture,
		true,
		)
		target.removeEventListener(
		'dragleave',
		this.handleTopDragLeaveCapture,
		true,
		)
		target.removeEventListener('dragover', this.handleTopDragOver)
		target.removeEventListener('dragover', this.handleTopDragOverCapture, true)
		target.removeEventListener('drop', this.handleTopDrop)
		target.removeEventListener('drop', this.handleTopDropCapture, true)
		}

		connectDragPreview(sourceId, node, options) {
		this.sourcePreviewNodeOptions[sourceId] = options;
		this.sourcePreviewNodes[sourceId] = node;
		connectDragPreview(sourceId, node, options) {
		this.sourcePreviewNodeOptions[sourceId] = options
		this.sourcePreviewNodes[sourceId] = node

		return () => {
		delete this.sourcePreviewNodes[sourceId];
		delete this.sourcePreviewNodeOptions[sourceId];
		};
		}
		return () => {
		delete this.sourcePreviewNodes[sourceId]
		delete this.sourcePreviewNodeOptions[sourceId]
		}
		}

		connectDragSource(sourceId, node, options) {
		this.sourceNodes[sourceId] = node;
		this.sourceNodeOptions[sourceId] = options;
		connectDragSource(sourceId, node, options) {
		this.sourceNodes[sourceId] = node
		this.sourceNodeOptions[sourceId] = options

		const handleDragStart = e => this.handleDragStart(e, sourceId);
		const handleSelectStart = e => this.handleSelectStart(e, sourceId);
		const handleDragStart = e => this.handleDragStart(e, sourceId)
		const handleSelectStart = e => this.handleSelectStart(e, sourceId)

		node.setAttribute('draggable', true);
		node.addEventListener('dragstart', handleDragStart);
		node.addEventListener('selectstart', handleSelectStart);
		node.setAttribute('draggable', true)
		node.addEventListener('dragstart', handleDragStart)
		node.addEventListener('selectstart', handleSelectStart)

		return () => {
		delete this.sourceNodes[sourceId];
		delete this.sourceNodeOptions[sourceId];
		return () => {
		delete this.sourceNodes[sourceId]
		delete this.sourceNodeOptions[sourceId]

		node.removeEventListener('dragstart', handleDragStart);
		node.removeEventListener('selectstart', handleSelectStart);
		node.setAttribute('draggable', false);
		};
		}
		node.removeEventListener('dragstart', handleDragStart)
		node.removeEventListener('selectstart', handleSelectStart)
		node.setAttribute('draggable', false)
		}
		}

		connectDropTarget(targetId, node) {
		const handleDragEnter = e => this.handleDragEnter(e, targetId);
		const handleDragOver = e => this.handleDragOver(e, targetId);
		const handleDrop = e => this.handleDrop(e, targetId);
		connectDropTarget(targetId, node) {
		const handleDragEnter = e => this.handleDragEnter(e, targetId)
		const handleDragOver = e => this.handleDragOver(e, targetId)
		const handleDrop = e => this.handleDrop(e, targetId)

		node.addEventListener('dragenter', handleDragEnter);
		node.addEventListener('dragover', handleDragOver);
		node.addEventListener('drop', handleDrop);
		node.addEventListener('dragenter', handleDragEnter)
		node.addEventListener('dragover', handleDragOver)
		node.addEventListener('drop', handleDrop)

		return () => {
		node.removeEventListener('dragenter', handleDragEnter);
		node.removeEventListener('dragover', handleDragOver);
		node.removeEventListener('drop', handleDrop);
		};
		}
		return () => {
		node.removeEventListener('dragenter', handleDragEnter)
		node.removeEventListener('dragover', handleDragOver)
		node.removeEventListener('drop', handleDrop)
		}
		}

		getCurrentSourceNodeOptions() {
		const sourceId = this.monitor.getSourceId();
		const sourceNodeOptions = this.sourceNodeOptions[sourceId];
		getCurrentSourceNodeOptions() {
		const sourceId = this.monitor.getSourceId()
		const sourceNodeOptions = this.sourceNodeOptions[sourceId]

		return defaults(sourceNodeOptions \|\| {}, {
		dropEffect: this.altKeyPressed ? 'copy' : 'move',
		});
		}
		return defaults(sourceNodeOptions \|\| {}, {
		dropEffect: this.altKeyPressed ? 'copy' : 'move',
		})
		}

		getCurrentDropEffect() {
		if (this.isDraggingNativeItem()) {
		// It makes more sense to default to 'copy' for native resources
		return 'copy';
		}
		getCurrentDropEffect() {
		if (this.isDraggingNativeItem()) {
		// It makes more sense to default to 'copy' for native resources
		return 'copy'
		}

		return this.getCurrentSourceNodeOptions().dropEffect;
		}
		return this.getCurrentSourceNodeOptions().dropEffect
		}

		getCurrentSourcePreviewNodeOptions() {
		const sourceId = this.monitor.getSourceId();
		const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId];
		getCurrentSourcePreviewNodeOptions() {
		const sourceId = this.monitor.getSourceId()
		const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId]

		return defaults(sourcePreviewNodeOptions \|\| {}, {
		anchorX: 0.5,
		anchorY: 0.5,
		captureDraggingState: false,
		});
		}
		return defaults(sourcePreviewNodeOptions \|\| {}, {
		anchorX: 0.5,
		anchorY: 0.5,
		captureDraggingState: false,
		})
		}

		getSourceClientOffset(sourceId) {
		return getNodeClientOffset(this.sourceNodes[sourceId]);
		}
		getSourceClientOffset(sourceId) {
		return getNodeClientOffset(this.sourceNodes[sourceId])
		}

		isDraggingNativeItem() {
		const itemType = this.monitor.getItemType();
		return Object.keys(NativeTypes).some(
		key => NativeTypes[key] === itemType,
		);
		}
		isDraggingNativeItem() {
		const itemType = this.monitor.getItemType()
		return Object.keys(NativeTypes).some(key => NativeTypes[key] === itemType)
		}

		beginDragNativeItem(type) {
		this.clearCurrentDragSourceNode();
		beginDragNativeItem(type) {
		this.clearCurrentDragSourceNode()

		const SourceType = createNativeDragSource(type);
		this.currentNativeSource = new SourceType();
		this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
		this.actions.beginDrag([this.currentNativeHandle]);
		const SourceType = createNativeDragSource(type)
		this.currentNativeSource = new SourceType()
		this.currentNativeHandle = this.registry.addSource(
		type,
		this.currentNativeSource,
		)
		this.actions.beginDrag([this.currentNativeHandle])

		// On Firefox, if mouseover fires, the drag is over but browser failed to tell us.
		// See https://bugzilla.mozilla.org/show_bug.cgi?id=656164
		// This is not true for other browsers.
		if (isFirefox()) {
		this.window.addEventListener('mouseover', this.asyncEndDragNativeItem, true);
		}
		}
		// On Firefox, if mouseover fires, the drag is over but browser failed to tell us.
		// See https://bugzilla.mozilla.org/show_bug.cgi?id=656164
		// This is not true for other browsers.
		if (isFirefox()) {
		this.window.addEventListener(
		'mouseover',
		this.asyncEndDragNativeItem,
		true,
		)
		}
		}

		asyncEndDragNativeItem() {
		this.asyncEndDragFrameId = this.window.requestAnimationFrame(this.endDragNativeItem);
		if (isFirefox()) {
		this.window.removeEventListener('mouseover', this.asyncEndDragNativeItem, true);
		this.enterLeaveCounter.reset();
		}
		}
		asyncEndDragNativeItem() {
		this.asyncEndDragFrameId = this.window.requestAnimationFrame(
		this.endDragNativeItem,
		)
		if (isFirefox()) {
		this.window.removeEventListener(
		'mouseover',
		this.asyncEndDragNativeItem,
		true,
		)
		this.enterLeaveCounter.reset()
		}
		}

		endDragNativeItem() {
		if (!this.isDraggingNativeItem()) {
		return;
		}
		endDragNativeItem() {
		if (!this.isDraggingNativeItem()) {
		return
		}

		this.actions.endDrag();
		this.registry.removeSource(this.currentNativeHandle);
		this.currentNativeHandle = null;
		this.currentNativeSource = null;
		}
		this.actions.endDrag()
		this.registry.removeSource(this.currentNativeHandle)
		this.currentNativeHandle = null
		this.currentNativeSource = null
		}

		isNodeInDocument(node) {
		// Check the node either in the main document or in the current context
		return document.body.contains(node) \|\| this.window
		? this.window.document.body.contains(node)
		: false;
		}
		isNodeInDocument(node) {
		// Check the node either in the main document or in the current context
		return document.body.contains(node) \|\| this.window
		? this.window.document.body.contains(node)
		: false
		}

		endDragIfSourceWasRemovedFromDOM() {
		const node = this.currentDragSourceNode;
		if (this.isNodeInDocument(node)) {
		return;
		}
		endDragIfSourceWasRemovedFromDOM() {
		const node = this.currentDragSourceNode
		if (this.isNodeInDocument(node)) {
		return
		}

		if (this.clearCurrentDragSourceNode()) {
		this.actions.endDrag();
		}
		}
		if (this.clearCurrentDragSourceNode()) {
		this.actions.endDrag()
		}
		}

		setCurrentDragSourceNode(node) {
		this.clearCurrentDragSourceNode();
		this.currentDragSourceNode = node;
		this.currentDragSourceNodeOffset = getNodeClientOffset(node);
		this.currentDragSourceNodeOffsetChanged = false;
		setCurrentDragSourceNode(node) {
		this.clearCurrentDragSourceNode()
		this.currentDragSourceNode = node
		this.currentDragSourceNodeOffset = getNodeClientOffset(node)
		this.currentDragSourceNodeOffsetChanged = false

		// Receiving a mouse event in the middle of a dragging operation
		// means it has ended and the drag source node disappeared from DOM,
		// so the browser didn't dispatch the dragend event.
		this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		}
		// Receiving a mouse event in the middle of a dragging operation
		// means it has ended and the drag source node disappeared from DOM,
		// so the browser didn't dispatch the dragend event.
		this.window.addEventListener(
		'mousemove',
		this.endDragIfSourceWasRemovedFromDOM,
		true,
		)
		}

		clearCurrentDragSourceNode() {
		if (this.currentDragSourceNode) {
		this.currentDragSourceNode = null;
		this.currentDragSourceNodeOffset = null;
		this.currentDragSourceNodeOffsetChanged = false;
		this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
		return true;
		}
		clearCurrentDragSourceNode() {
		if (this.currentDragSourceNode) {
		this.currentDragSourceNode = null
		this.currentDragSourceNodeOffset = null
		this.currentDragSourceNodeOffsetChanged = false
		this.window.removeEventListener(
		'mousemove',
		this.endDragIfSourceWasRemovedFromDOM,
		true,
		)
		return true
		}

		return false;
		}
		return false
		}

		checkIfCurrentDragSourceRectChanged() {
		const node = this.currentDragSourceNode;
		if (!node) {
		return false;
		}
		checkIfCurrentDragSourceRectChanged() {
		const node = this.currentDragSourceNode
		if (!node) {
		return false
		}

		if (this.currentDragSourceNodeOffsetChanged) {
		return true;
		}
		if (this.currentDragSourceNodeOffsetChanged) {
		return true
		}

		this.currentDragSourceNodeOffsetChanged = !shallowEqual(
		getNodeClientOffset(node),
		this.currentDragSourceNodeOffset,
		);
		this.currentDragSourceNodeOffsetChanged = !shallowEqual(
		getNodeClientOffset(node),
		this.currentDragSourceNodeOffset,
		)

		return this.currentDragSourceNodeOffsetChanged;
		}
		return this.currentDragSourceNodeOffsetChanged
		}

		handleTopDragStartCapture() {
		this.clearCurrentDragSourceNode();
		this.dragStartSourceIds = [];
		}
		handleTopDragStartCapture() {
		this.clearCurrentDragSourceNode()
		this.dragStartSourceIds = []
		}

		handleDragStart(e, sourceId) {
		this.dragStartSourceIds.unshift(sourceId);
		}
		handleDragStart(e, sourceId) {
		this.dragStartSourceIds.unshift(sourceId)
		}

		handleTopDragStart(e) {
		const { dragStartSourceIds } = this;
		this.dragStartSourceIds = null;
		handleTopDragStart(e) {
		const { dragStartSourceIds } = this
		this.dragStartSourceIds = null

		const clientOffset = getEventClientOffset(e);
		const clientOffset = getEventClientOffset(e)

		// Avoid crashing if we missed a drop event or our previous drag died
		if (this.monitor.isDragging()) {
		this.actions.endDrag();
		}
		// Avoid crashing if we missed a drop event or our previous drag died
		if (this.monitor.isDragging()) {
		this.actions.endDrag()
		}

		// Don't publish the source just yet (see why below)
		this.actions.beginDrag(dragStartSourceIds, {
		publishSource: false,
		getSourceClientOffset: this.getSourceClientOffset,
		clientOffset,
		});
		// Don't publish the source just yet (see why below)
		this.actions.beginDrag(dragStartSourceIds, {
		publishSource: false,
		getSourceClientOffset: this.getSourceClientOffset,
		clientOffset,
		})

		const { dataTransfer } = e;
		const nativeType = matchNativeItemType(dataTransfer);
		const { dataTransfer } = e
		const nativeType = matchNativeItemType(dataTransfer)

		if (this.monitor.isDragging()) {
		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.
		const sourceId = this.monitor.getSourceId();
		const sourceNode = this.sourceNodes[sourceId];
		const dragPreview = this.sourcePreviewNodes[sourceId] \|\| sourceNode;
		const { anchorX, anchorY, offsetX, offsetY } = this.getCurrentSourcePreviewNodeOptions();
		const anchorPoint = { anchorX, anchorY };
		const offsetPoint = { offsetX, offsetY };
		const dragPreviewOffset = getDragPreviewOffset(
		sourceNode,
		dragPreview,
		clientOffset,
		anchorPoint,
		offsetPoint,
		);
		if (this.monitor.isDragging()) {
		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.
		const sourceId = this.monitor.getSourceId()
		const sourceNode = this.sourceNodes[sourceId]
		const dragPreview = this.sourcePreviewNodes[sourceId] \|\| sourceNode
		const {
		anchorX,
		anchorY,
		offsetX,
		offsetY,
		} = this.getCurrentSourcePreviewNodeOptions()
		const anchorPoint = { anchorX, anchorY }
		const offsetPoint = { offsetX, offsetY }
		const dragPreviewOffset = getDragPreviewOffset(
		sourceNode,
		dragPreview,
		clientOffset,
		anchorPoint,
		offsetPoint,
		)

		dataTransfer.setDragImage(
		dragPreview,
		dragPreviewOffset.x,
		dragPreviewOffset.y,
		);
		}
		dataTransfer.setDragImage(
		dragPreview,
		dragPreviewOffset.x,
		dragPreviewOffset.y,
		)
		}

		try {
		// Firefox won't drag without setting data
		dataTransfer.setData('application/json', {});
		} catch (err) {
		// IE doesn't support MIME types in setData
		}
		try {
		// Firefox won't drag without setting data
		dataTransfer.setData('application/json', {})
		} catch (err) {
		// IE doesn't support MIME types in setData
		}

		// Store drag source node so we can check whether
		// it is removed from DOM and trigger endDrag manually.
		this.setCurrentDragSourceNode(e.target);
		// Store drag source node so we can check whether
		// it is removed from DOM and trigger endDrag manually.
		this.setCurrentDragSourceNode(e.target)

		// Now we are ready to publish the drag source.. or are we not?
		const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions();
		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(() => this.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 (nativeType) {
		// A native item (such as URL) dragged from inside the document
		this.beginDragNativeItem(nativeType);
		} else if (
		!dataTransfer.types && (
		!e.target.hasAttribute \|\|
		!e.target.hasAttribute('draggable')
		)
		) {
		// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
		// Just let it drag. It's a native type (URL or text) and will be picked up in
		// dragenter handler.
		return; // eslint-disable-line no-useless-return
		} else {
		// If by this time no drag source reacted, tell browser not to drag.
		e.preventDefault();
		}
		}
		// Now we are ready to publish the drag source.. or are we not?
		const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions()
		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(() => this.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 (nativeType) {
		// A native item (such as URL) dragged from inside the document
		this.beginDragNativeItem(nativeType)
		} else if (
		!dataTransfer.types &&
		(!e.target.hasAttribute \|\| !e.target.hasAttribute('draggable'))
		) {
		// Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
		// Just let it drag. It's a native type (URL or text) and will be picked up in
		// dragenter handler.
		return // eslint-disable-line no-useless-return
		} else {
		// If by this time no drag source reacted, tell browser not to drag.
		e.preventDefault()
		}
		}

		handleTopDragEndCapture() {
		if (this.clearCurrentDragSourceNode()) {
		// Firefox can dispatch this event in an infinite loop
		// if dragend handler does something like showing an alert.
		// Only proceed if we have not handled it already.
		this.actions.endDrag();
		}
		}
		handleTopDragEndCapture() {
		if (this.clearCurrentDragSourceNode()) {
		// Firefox can dispatch this event in an infinite loop
		// if dragend handler does something like showing an alert.
		// Only proceed if we have not handled it already.
		this.actions.endDrag()
		}
		}

		handleTopDragEnterCapture(e) {
		this.dragEnterTargetIds = [];
		handleTopDragEnterCapture(e) {
		this.dragEnterTargetIds = []

		const isFirstEnter = this.enterLeaveCounter.enter(e.target);
		if (!isFirstEnter \|\| this.monitor.isDragging()) {
		return;
		}
		const isFirstEnter = this.enterLeaveCounter.enter(e.target)
		if (!isFirstEnter \|\| this.monitor.isDragging()) {
		return
		}

		const { dataTransfer } = e;
		const nativeType = matchNativeItemType(dataTransfer);
		const { dataTransfer } = e
		const nativeType = matchNativeItemType(dataTransfer)

		if (nativeType) {
		// A native item (such as file or URL) dragged from outside the document
		this.beginDragNativeItem(nativeType);
		}
		}
		if (nativeType) {
		// A native item (such as file or URL) dragged from outside the document
		this.beginDragNativeItem(nativeType)
		}
		}

		handleDragEnter(e, targetId) {
		this.dragEnterTargetIds.unshift(targetId);
		}
		handleDragEnter(e, targetId) {
		this.dragEnterTargetIds.unshift(targetId)
		}

		handleTopDragEnter(e) {
		const { dragEnterTargetIds } = this;
		this.dragEnterTargetIds = [];
		handleTopDragEnter(e) {
		const { dragEnterTargetIds } = this
		this.dragEnterTargetIds = []

		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		return;
		}
		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		return
		}

		this.altKeyPressed = e.altKey;
		this.altKeyPressed = e.altKey

		if (!isFirefox()) {
		// Don't emit hover in `dragenter` on Firefox due to an edge case.
		// If the target changes position as the result of `dragenter`, Firefox
		// will still happily dispatch `dragover` despite target being no longer
		// there. The easy solution is to only fire `hover` in `dragover` on FF.
		this.actions.hover(dragEnterTargetIds, {
		clientOffset: getEventClientOffset(e),
		});
		}
		if (!isFirefox()) {
		// Don't emit hover in `dragenter` on Firefox due to an edge case.
		// If the target changes position as the result of `dragenter`, Firefox
		// will still happily dispatch `dragover` despite target being no longer
		// there. The easy solution is to only fire `hover` in `dragover` on FF.
		this.actions.hover(dragEnterTargetIds, {
		clientOffset: getEventClientOffset(e),
		})
		}

		const canDrop = dragEnterTargetIds.some(
		targetId => this.monitor.canDropOnTarget(targetId),
		);
		const canDrop = dragEnterTargetIds.some(targetId =>
		this.monitor.canDropOnTarget(targetId),
		)

		if (canDrop) {
		// IE requires this to fire dragover events
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		}
		}
		if (canDrop) {
		// IE requires this to fire dragover events
		e.preventDefault()
		e.dataTransfer.dropEffect = this.getCurrentDropEffect()
		}
		}

		handleTopDragOverCapture() {
		this.dragOverTargetIds = [];
		}
		handleTopDragOverCapture() {
		this.dragOverTargetIds = []
		}

		handleDragOver(e, targetId) {
		this.dragOverTargetIds.unshift(targetId);
		}
		handleDragOver(e, targetId) {
		this.dragOverTargetIds.unshift(targetId)
		}

		handleTopDragOver(e) {
		const { dragOverTargetIds } = this;
		this.dragOverTargetIds = [];
		handleTopDragOver(e) {
		const { dragOverTargetIds } = this
		this.dragOverTargetIds = []

		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		// Prevent default "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		return;
		}
		if (!this.monitor.isDragging()) {
		// This is probably a native item type we don't understand.
		// Prevent default "drop and blow away the whole document" action.
		e.preventDefault()
		e.dataTransfer.dropEffect = 'none'
		return
		}

		this.altKeyPressed = e.altKey;
		this.altKeyPressed = e.altKey

		this.actions.hover(dragOverTargetIds, {
		clientOffset: getEventClientOffset(e),
		});
		this.actions.hover(dragOverTargetIds, {
		clientOffset: getEventClientOffset(e),
		})

		const canDrop = dragOverTargetIds.some(
		targetId => this.monitor.canDropOnTarget(targetId),
		);
		const canDrop = dragOverTargetIds.some(targetId =>
		this.monitor.canDropOnTarget(targetId),
		)

		if (canDrop) {
		// Show user-specified drop effect.
		e.preventDefault();
		e.dataTransfer.dropEffect = this.getCurrentDropEffect();
		} else if (this.isDraggingNativeItem()) {
		// Don't show a nice cursor but still prevent default
		// "drop and blow away the whole document" action.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'none';
		} else if (this.checkIfCurrentDragSourceRectChanged()) {
		// Prevent animating to incorrect position.
		// Drop effect must be other than 'none' to prevent animation.
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		}
		}
		if (canDrop) {
		// Show user-specified drop effect.
		e.preventDefault()
		e.dataTransfer.dropEffect = this.getCurrentDropEffect()
		} else if (this.isDraggingNativeItem()) {
		// Don't show a nice cursor but still prevent default
		// "drop and blow away the whole document" action.
		e.preventDefault()
		e.dataTransfer.dropEffect = 'none'
		} else if (this.checkIfCurrentDragSourceRectChanged()) {
		// Prevent animating to incorrect position.
		// Drop effect must be other than 'none' to prevent animation.
		e.preventDefault()
		e.dataTransfer.dropEffect = 'move'
		}
		}

		handleTopDragLeaveCapture(e) {
		if (this.isDraggingNativeItem()) {
		e.preventDefault();
		}
		handleTopDragLeaveCapture(e) {
		if (this.isDraggingNativeItem()) {
		e.preventDefault()
		}

		const isLastLeave = this.enterLeaveCounter.leave(e.target);
		if (!isLastLeave) {
		return;
		}
		const isLastLeave = this.enterLeaveCounter.leave(e.target)
		if (!isLastLeave) {
		return
		}

		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		}
		}
		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem()
		}
		}

		handleTopDropCapture(e) {
		this.dropTargetIds = [];
		e.preventDefault();
		handleTopDropCapture(e) {
		this.dropTargetIds = []
		e.preventDefault()

		if (this.isDraggingNativeItem()) {
		this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer);
		}
		if (this.isDraggingNativeItem()) {
		this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer)
		}

		this.enterLeaveCounter.reset();
		}
		this.enterLeaveCounter.reset()
		}

		handleDrop(e, targetId) {
		this.dropTargetIds.unshift(targetId);
		}
		handleDrop(e, targetId) {
		this.dropTargetIds.unshift(targetId)
		}

		handleTopDrop(e) {
		const { dropTargetIds } = this;
		this.dropTargetIds = [];
		handleTopDrop(e) {
		const { dropTargetIds } = this
		this.dropTargetIds = []

		this.actions.hover(dropTargetIds, {
		clientOffset: getEventClientOffset(e),
		});
		this.actions.drop({ dropEffect: this.getCurrentDropEffect() });
		this.actions.hover(dropTargetIds, {
		clientOffset: getEventClientOffset(e),
		})
		this.actions.drop({ dropEffect: this.getCurrentDropEffect() })

		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem();
		} else {
		this.endDragIfSourceWasRemovedFromDOM();
		}
		}
		if (this.isDraggingNativeItem()) {
		this.endDragNativeItem()
		} else {
		this.endDragIfSourceWasRemovedFromDOM()
		}
		}

		handleSelectStart(e) {
		const { target } = e;
		handleSelectStart(e) {
		const { target } = e

		// Only IE requires us to explicitly say
		// we want drag drop operation to start
		if (typeof target.dragDrop !== 'function') {
		return;
		}
		// Only IE requires us to explicitly say
		// we want drag drop operation to start
		if (typeof target.dragDrop !== 'function') {
		return
		}

		// Inputs and textareas should be selectable
		if (
		target.tagName === 'INPUT' \|\|
		target.tagName === 'SELECT' \|\|
		target.tagName === 'TEXTAREA' \|\|
		target.isContentEditable
		) {
		return;
		}
		// Inputs and textareas should be selectable
		if (
		target.tagName === 'INPUT' \|\|
		target.tagName === 'SELECT' \|\|
		target.tagName === 'TEXTAREA' \|\|
		target.isContentEditable
		) {
		return
		}

		// For other targets, ask IE
		// to enable drag and drop
		e.preventDefault();
		target.dragDrop();
		}
		// For other targets, ask IE
		// to enable drag and drop
		e.preventDefault()
		target.dragDrop()
		}
		}

src/index.js

		@@ -1,9 +0,9 @@
		import HTML5Backend from './HTML5Backend';
		import getEmptyImage from './getEmptyImage';
		import * as NativeTypes from './NativeTypes';
		import HTML5Backend from './HTML5Backend'
		import getEmptyImage from './getEmptyImage'
		import * as NativeTypes from './NativeTypes'

		export { NativeTypes, getEmptyImage };
		export { NativeTypes, getEmptyImage }

		export default function createHTML5Backend(manager) {
		return new HTML5Backend(manager);
		return new HTML5Backend(manager)
		}

164

src/MonotonicInterpolant.js

		@@ -6,93 +6,93 @@ /* eslint
		export default class MonotonicInterpolant {
		constructor(xs, ys) {
		const length = xs.length;
		constructor(xs, ys) {
		const length = xs.length

		// Rearrange xs and ys so that xs is sorted
		const indexes = [];
		for (let i = 0; i < length; i++) {
		indexes.push(i);
		}
		indexes.sort((a, b) => xs[a] < xs[b] ? -1 : 1);
		// Rearrange xs and ys so that xs is sorted
		const indexes = []
		for (let i = 0; i < length; i++) {
		indexes.push(i)
		}
		indexes.sort((a, b) => (xs[a] < xs[b] ? -1 : 1))

		// Get consecutive differences and slopes
		const dys = [];
		const dxs = [];
		const ms = [];
		let dx;
		let dy;
		for (let i = 0; i < length - 1; i++) {
		dx = xs[i + 1] - xs[i];
		dy = ys[i + 1] - ys[i];
		dxs.push(dx);
		dys.push(dy);
		ms.push(dy / dx);
		}
		// Get consecutive differences and slopes
		const dys = []
		const dxs = []
		const ms = []
		let dx
		let dy
		for (let i = 0; i < length - 1; i++) {
		dx = xs[i + 1] - xs[i]
		dy = ys[i + 1] - ys[i]
		dxs.push(dx)
		dys.push(dy)
		ms.push(dy / dx)
		}

		// Get degree-1 coefficients
		const c1s = [ms[0]];
		for (let i = 0; i < dxs.length - 1; i++) {
		const m = ms[i];
		const mNext = ms[i + 1];
		if (m * mNext <= 0) {
		c1s.push(0);
		} else {
		dx = dxs[i];
		const dxNext = dxs[i + 1];
		const common = dx + dxNext;
		c1s.push(3 * common / ((common + dxNext) / m + (common + dx) / mNext));
		}
		}
		c1s.push(ms[ms.length - 1]);
		// Get degree-1 coefficients
		const c1s = [ms[0]]
		for (let i = 0; i < dxs.length - 1; i++) {
		const m = ms[i]
		const mNext = ms[i + 1]
		if (m * mNext <= 0) {
		c1s.push(0)
		} else {
		dx = dxs[i]
		const dxNext = dxs[i + 1]
		const common = dx + dxNext
		c1s.push(3 * common / ((common + dxNext) / m + (common + dx) / mNext))
		}
		}
		c1s.push(ms[ms.length - 1])

		// Get degree-2 and degree-3 coefficients
		const c2s = [];
		const c3s = [];
		let m;
		for (let i = 0; i < c1s.length - 1; i++) {
		m = ms[i];
		const c1 = c1s[i];
		const invDx = 1 / dxs[i];
		const common = c1 + c1s[i + 1] - m - m;
		c2s.push((m - c1 - common) * invDx);
		c3s.push(common * invDx * invDx);
		}
		// Get degree-2 and degree-3 coefficients
		const c2s = []
		const c3s = []
		let m
		for (let i = 0; i < c1s.length - 1; i++) {
		m = ms[i]
		const c1 = c1s[i]
		const invDx = 1 / dxs[i]
		const common = c1 + c1s[i + 1] - m - m
		c2s.push((m - c1 - common) * invDx)
		c3s.push(common * invDx * invDx)
		}

		this.xs = xs;
		this.ys = ys;
		this.c1s = c1s;
		this.c2s = c2s;
		this.c3s = c3s;
		}
		this.xs = xs
		this.ys = ys
		this.c1s = c1s
		this.c2s = c2s
		this.c3s = c3s
		}

		interpolate(x) {
		const { xs, ys, c1s, c2s, c3s } = this;
		interpolate(x) {
		const { xs, ys, c1s, c2s, c3s } = this

		// The rightmost point in the dataset should give an exact result
		let i = xs.length - 1;
		if (x === xs[i]) {
		return ys[i];
		}
		// The rightmost point in the dataset should give an exact result
		let i = xs.length - 1
		if (x === xs[i]) {
		return ys[i]
		}

		// Search for the interval x is in, returning the corresponding y if x is one of the original xs
		let low = 0;
		let high = c3s.length - 1;
		let mid;
		while (low <= high) {
		mid = Math.floor(0.5 * (low + high));
		const xHere = xs[mid];
		if (xHere < x) {
		low = mid + 1;
		} else if (xHere > x) {
		high = mid - 1;
		} else {
		return ys[mid];
		}
		}
		i = Math.max(0, high);
		// Search for the interval x is in, returning the corresponding y if x is one of the original xs
		let low = 0
		let high = c3s.length - 1
		let mid
		while (low <= high) {
		mid = Math.floor(0.5 * (low + high))
		const xHere = xs[mid]
		if (xHere < x) {
		low = mid + 1
		} else if (xHere > x) {
		high = mid - 1
		} else {
		return ys[mid]
		}
		}
		i = Math.max(0, high)

		// Interpolate
		const diff = x - xs[i];
		const diffSq = diff * diff;
		return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
		}
		// Interpolate
		const diff = x - xs[i]
		const diffSq = diff * diff
		return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq
		}
		}

123

src/NativeDragSources.js

		@@ -1,81 +0,80 @@
		import * as NativeTypes from './NativeTypes';
		import * as NativeTypes from './NativeTypes'

		function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
		const result = typesToTry.reduce((resultSoFar, typeToTry) =>
		resultSoFar \|\| dataTransfer.getData(typeToTry),
		null,
		);
		const result = typesToTry.reduce(
		(resultSoFar, typeToTry) => resultSoFar \|\| dataTransfer.getData(typeToTry),
		null,
		)

		return (result != null) ? // eslint-disable-line eqeqeq
		result :
		defaultValue;
		return result != null // eslint-disable-line eqeqeq
		? result
		: defaultValue
		}

		const nativeTypesConfig = {
		[NativeTypes.FILE]: {
		exposeProperty: 'files',
		matchesTypes: ['Files'],
		getData: dataTransfer => Array.prototype.slice.call(dataTransfer.files),
		},
		[NativeTypes.URL]: {
		exposeProperty: 'urls',
		matchesTypes: ['Url', 'text/uri-list'],
		getData: (dataTransfer, matchesTypes) =>
		getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'),
		},
		[NativeTypes.TEXT]: {
		exposeProperty: 'text',
		matchesTypes: ['Text', 'text/plain'],
		getData: (dataTransfer, matchesTypes) =>
		getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
		},
		};
		[NativeTypes.FILE]: {
		exposeProperty: 'files',
		matchesTypes: ['Files'],
		getData: dataTransfer => Array.prototype.slice.call(dataTransfer.files),
		},
		[NativeTypes.URL]: {
		exposeProperty: 'urls',
		matchesTypes: ['Url', 'text/uri-list'],
		getData: (dataTransfer, matchesTypes) =>
		getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'),
		},
		[NativeTypes.TEXT]: {
		exposeProperty: 'text',
		matchesTypes: ['Text', 'text/plain'],
		getData: (dataTransfer, matchesTypes) =>
		getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
		},
		}

		export function createNativeDragSource(type) {
		const {
		exposeProperty,
		matchesTypes,
		getData,
		} = nativeTypesConfig[type];
		const { exposeProperty, matchesTypes, getData } = nativeTypesConfig[type]

		return class NativeDragSource {
		constructor() {
		this.item = {
		get [exposeProperty]() {
		console.warn( // eslint-disable-line no-console
		`Browser doesn't allow reading "${exposeProperty}" until the drop event.`,
		);
		return null;
		},
		};
		}
		return class NativeDragSource {
		constructor() {
		this.item = {
		get [exposeProperty]() {
		// eslint-disable-next-line no-console
		console.warn(
		`Browser doesn't allow reading "${exposeProperty}" until the drop event.`,
		)
		return null
		},
		}
		}

		mutateItemByReadingDataTransfer(dataTransfer) {
		delete this.item[exposeProperty];
		this.item[exposeProperty] = getData(dataTransfer, matchesTypes);
		}
		mutateItemByReadingDataTransfer(dataTransfer) {
		delete this.item[exposeProperty]
		this.item[exposeProperty] = getData(dataTransfer, matchesTypes)
		}

		canDrag() {
		return true;
		}
		canDrag() {
		return true
		}

		beginDrag() {
		return this.item;
		}
		beginDrag() {
		return this.item
		}

		isDragging(monitor, handle) {
		return handle === monitor.getSourceId();
		}
		isDragging(monitor, handle) {
		return handle === monitor.getSourceId()
		}

		endDrag() { }
		};
		endDrag() {}
		}
		}

		export function matchNativeItemType(dataTransfer) {
		const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types \|\| []);
		const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types \|\| [])

		return Object.keys(nativeTypesConfig).filter((nativeItemType) => {
		const { matchesTypes } = nativeTypesConfig[nativeItemType];
		return matchesTypes.some(t => dataTransferTypes.indexOf(t) > -1);
		})[0] \|\| null;
		return (
		Object.keys(nativeTypesConfig).filter(nativeItemType => {
		const { matchesTypes } = nativeTypesConfig[nativeItemType]
		return matchesTypes.some(t => dataTransferTypes.indexOf(t) > -1)
		})[0] \|\| null
		)
		}

src/NativeTypes.js

		@@ -1,3 +0,3 @@
		export const FILE = '__NATIVE_FILE__';
		export const URL = '__NATIVE_URL__';
		export const TEXT = '__NATIVE_TEXT__';
		export const FILE = '__NATIVE_FILE__'
		export const URL = '__NATIVE_URL__'
		export const TEXT = '__NATIVE_TEXT__'

184

src/OffsetUtils.js

		/* eslint
		no-mixed-operators: off
		*/
		import { isSafari, isFirefox } from './BrowserDetector';
		import MonotonicInterpolant from './MonotonicInterpolant';
		import { isSafari, isFirefox } from './BrowserDetector'
		import MonotonicInterpolant from './MonotonicInterpolant'

		const ELEMENT_NODE = 1;
		const ELEMENT_NODE = 1

		export function getNodeClientOffset(node) {
		const el = node.nodeType === ELEMENT_NODE ?
		node :
		node.parentElement;
		const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement

		if (!el) {
		return null;
		}
		if (!el) {
		return null
		}

		const { top, left } = el.getBoundingClientRect();
		return { x: left, y: top };
		const { top, left } = el.getBoundingClientRect()
		return { x: left, y: top }
		}

		export function getEventClientOffset(e) {
		return {
		x: e.clientX,
		y: e.clientY,
		};
		return {
		x: e.clientX,
		y: e.clientY,
		}
		}

		function isImageNode(node) {
		return node.nodeName === 'IMG' && (
		isFirefox() \|\|
		!document.documentElement.contains(node)
		);
		return (
		node.nodeName === 'IMG' &&
		(isFirefox() \|\| !document.documentElement.contains(node))
		)
		}

		function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
		let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
		let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
		let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth
		let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight

		// Work around @2x coordinate discrepancies in browsers
		if (isSafari() && isImage) {
		dragPreviewHeight /= window.devicePixelRatio;
		dragPreviewWidth /= window.devicePixelRatio;
		}
		return { dragPreviewWidth, dragPreviewHeight };
		// Work around @2x coordinate discrepancies in browsers
		if (isSafari() && isImage) {
		dragPreviewHeight /= window.devicePixelRatio
		dragPreviewWidth /= window.devicePixelRatio
		}
		return { dragPreviewWidth, dragPreviewHeight }
		}

		export function getDragPreviewOffset(
		sourceNode,
		dragPreview,
		clientOffset,
		anchorPoint,
		offsetPoint,
		) {
		// The browsers will use the image intrinsic size under different conditions.
		// Firefox only cares if it's an image, but WebKit also wants it to be detached.
		const isImage = isImageNode(dragPreview);
		const dragPreviewNode = isImage ? sourceNode : dragPreview;
		const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
		const offsetFromDragPreview = {
		x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
		y: clientOffset.y - dragPreviewNodeOffsetFromClient.y,
		};
		const {
		offsetWidth: sourceWidth,
		offsetHeight: sourceHeight,
		} = sourceNode;
		const {
		anchorX,
		anchorY,
		} = anchorPoint;
		const {
		dragPreviewWidth,
		dragPreviewHeight,
		} = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
		sourceNode,
		dragPreview,
		clientOffset,
		anchorPoint,
		offsetPoint,
		) {
		// The browsers will use the image intrinsic size under different conditions.
		// Firefox only cares if it's an image, but WebKit also wants it to be detached.
		const isImage = isImageNode(dragPreview)
		const dragPreviewNode = isImage ? sourceNode : dragPreview
		const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode)
		const offsetFromDragPreview = {
		x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
		y: clientOffset.y - dragPreviewNodeOffsetFromClient.y,
		}
		const { offsetWidth: sourceWidth, offsetHeight: sourceHeight } = sourceNode
		const { anchorX, anchorY } = anchorPoint
		const { dragPreviewWidth, dragPreviewHeight } = getDragPreviewSize(
		isImage,
		dragPreview,
		sourceWidth,
		sourceHeight,
		)

		const calculateYOffset = () => {
		const interpolantY = new MonotonicInterpolant([0, 0.5, 1], [
		// Dock to the top
		offsetFromDragPreview.y,
		// Align at the center
		(offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
		// Dock to the bottom
		offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
		]);
		let y = interpolantY.interpolate(anchorY);
		// Work around Safari 8 positioning bug
		if (isSafari() && isImage) {
		// We'll have to wait for @3x to see if this is entirely correct
		y += (window.devicePixelRatio - 1) * dragPreviewHeight;
		}
		return y;
		};
		const calculateYOffset = () => {
		const interpolantY = new MonotonicInterpolant(
		[0, 0.5, 1],
		[
		// Dock to the top
		offsetFromDragPreview.y,
		// Align at the center
		offsetFromDragPreview.y / sourceHeight * dragPreviewHeight,
		// Dock to the bottom
		offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
		],
		)
		let y = interpolantY.interpolate(anchorY)
		// Work around Safari 8 positioning bug
		if (isSafari() && isImage) {
		// We'll have to wait for @3x to see if this is entirely correct
		y += (window.devicePixelRatio - 1) * dragPreviewHeight
		}
		return y
		}

		const calculateXOffset = () => {
		// Interpolate coordinates depending on anchor point
		// If you know a simpler way to do this, let me know
		const interpolantX = new MonotonicInterpolant([0, 0.5, 1], [
		// Dock to the left
		offsetFromDragPreview.x,
		// Align at the center
		(offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
		// Dock to the right
		offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
		]);
		return interpolantX.interpolate(anchorX);
		};
		const calculateXOffset = () => {
		// Interpolate coordinates depending on anchor point
		// If you know a simpler way to do this, let me know
		const interpolantX = new MonotonicInterpolant(
		[0, 0.5, 1],
		[
		// Dock to the left
		offsetFromDragPreview.x,
		// Align at the center
		offsetFromDragPreview.x / sourceWidth * dragPreviewWidth,
		// Dock to the right
		offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
		],
		)
		return interpolantX.interpolate(anchorX)
		}

		// Force offsets if specified in the options.
		const { offsetX, offsetY } = offsetPoint;
		const isManualOffsetX = offsetX === 0 \|\| offsetX;
		const isManualOffsetY = offsetY === 0 \|\| offsetY;
		return {
		x: isManualOffsetX ? offsetX : calculateXOffset(),
		y: isManualOffsetY ? offsetY : calculateYOffset(),
		};
		// Force offsets if specified in the options.
		const { offsetX, offsetY } = offsetPoint
		const isManualOffsetX = offsetX === 0 \|\| offsetX
		const isManualOffsetY = offsetY === 0 \|\| offsetY
		return {
		x: isManualOffsetX ? offsetX : calculateXOffset(),
		y: isManualOffsetY ? offsetY : calculateYOffset(),
		}
		}

src/shallowEqual.js

		export default function shallowEqual(objA, objB) {
		if (objA === objB) {
		return true;
		}
		if (objA === objB) {
		return true
		}

		const keysA = Object.keys(objA);
		const keysB = Object.keys(objB);
		const keysA = Object.keys(objA)
		const keysB = Object.keys(objB)

		if (keysA.length !== keysB.length) {
		return false;
		}
		if (keysA.length !== keysB.length) {
		return false
		}

		// Test for A's keys different from B.
		const hasOwn = Object.prototype.hasOwnProperty;
		for (let i = 0; i < keysA.length; i += 1) {
		if (!hasOwn.call(objB, keysA[i]) \|\|
		objA[keysA[i]] !== objB[keysA[i]]) {
		return false;
		}
		// Test for A's keys different from B.
		const hasOwn = Object.prototype.hasOwnProperty
		for (let i = 0; i < keysA.length; i += 1) {
		if (!hasOwn.call(objB, keysA[i]) \|\| objA[keysA[i]] !== objB[keysA[i]]) {
		return false
		}

		const valA = objA[keysA[i]];
		const valB = objB[keysA[i]];
		const valA = objA[keysA[i]]
		const valB = objB[keysA[i]]

		if (valA !== valB) {
		return false;
		}
		}
		if (valA !== valB) {
		return false
		}
		}

		return true;
		return true
		}

package-lock.json

react-dnd-html5-backend - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics