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

Comparing version 9.0.2 to 9.1.0

lib/index.js

 import TouchBackend from './TouchBackend';
-const createTouchBackendFactory = (manager, context, options = {}) => new TouchBackend(manager, context, options);
-export default createTouchBackendFactory;
+
+var createTouchBackendFactory = function createTouchBackendFactory(manager, context) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return new TouchBackend(manager, context, options);
+};
+
+export default createTouchBackendFactory;

lib/interfaces.d.ts

@@ -25,3 +25,3 @@ export interface EventName {
 }
-export declare const enum ListenerType {
+export declare enum ListenerType {
     mouse = "mouse",
@@ -28,0 +28,0 @@ touch = "touch",

lib/OptionsReader.d.ts

 import { TouchBackendOptions, AngleRange } from './interfaces';
 export declare class OptionsReader implements TouchBackendOptions {
-    private context?;
     enableTouchEvents: boolean;
@@ -14,2 +13,3 @@ enableMouseEvents: boolean;
     getDropTargetElementsAtPoint?: Function;
+    private context;
     constructor(incoming: TouchBackendOptions, context?: any);
@@ -16,0 +16,0 @@ readonly window: any;

lib/OptionsReader.js

@@ -1,35 +0,73 @@
-export class OptionsReader {
-    constructor(incoming, context) {
-        this.context = context;
-        this.enableTouchEvents = true;
-        this.enableMouseEvents = false;
-        this.enableKeyboardEvents = false;
-        this.ignoreContextMenu = false;
-        this.enableHoverOutsideTarget = false;
-        this.touchSlop = 0;
-        this.scrollAngleRanges = undefined;
-        this.delayTouchStart = incoming.delayTouchStart || incoming.delay || 0;
-        this.delayMouseStart = incoming.delayMouseStart || incoming.delay || 0;
-        Object.keys(incoming).forEach(key => {
-            if (incoming[key] != null) {
-                ;
-                this[key] = incoming[key];
-            }
-        });
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+export var OptionsReader =
+/*#__PURE__*/
+function () {
+  function OptionsReader(incoming, context) {
+    var _this = this;
+
+    _classCallCheck(this, OptionsReader);
+
+    _defineProperty(this, "enableTouchEvents", true);
+
+    _defineProperty(this, "enableMouseEvents", false);
+
+    _defineProperty(this, "enableKeyboardEvents", false);
+
+    _defineProperty(this, "ignoreContextMenu", false);
+
+    _defineProperty(this, "enableHoverOutsideTarget", false);
+
+    _defineProperty(this, "touchSlop", 0);
+
+    _defineProperty(this, "scrollAngleRanges", undefined);
+
+    _defineProperty(this, "delayTouchStart", void 0);
+
+    _defineProperty(this, "delayMouseStart", void 0);
+
+    _defineProperty(this, "getDropTargetElementsAtPoint", void 0);
+
+    _defineProperty(this, "context", void 0);
+
+    this.context = context;
+    this.delayTouchStart = incoming.delayTouchStart || incoming.delay || 0;
+    this.delayMouseStart = incoming.delayMouseStart || incoming.delay || 0;
+    Object.keys(incoming).forEach(function (key) {
+      if (incoming[key] != null) {
+        ;
+        _this[key] = incoming[key];
+      }
+    });
+  }
+
+  _createClass(OptionsReader, [{
+    key: "window",
+    get: function get() {
+      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;
+  }, {
+    key: "document",
+    get: function get() {
+      if (this.window) {
+        return this.window.document;
+      }
+
+      return undefined;
     }
-    get document() {
-        if (this.window) {
-            return this.window.document;
-        }
-        return undefined;
-    }
-}
+  }]);
+
+  return OptionsReader;
+}();

lib/TouchBackend.js

@@ -0,2 +1,13 @@
+var _eventNames;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import invariant from 'invariant';
+import { ListenerType } from './interfaces';
 import { eventShouldStartDrag, eventShouldEndDrag } from './utils/predicates';
@@ -7,376 +18,523 @@ import { getEventClientOffset, getNodeClientOffset } from './utils/offsets';
 import { OptionsReader } from './OptionsReader';
-const eventNames = {
-    ["mouse" /* mouse */]: {
-        start: 'mousedown',
-        move: 'mousemove',
-        end: 'mouseup',
-        contextmenu: 'contextmenu',
-    },
-    ["touch" /* touch */]: {
-        start: 'touchstart',
-        move: 'touchmove',
-        end: 'touchend',
-    },
-    ["keyboard" /* keyboard */]: {
-        keydown: 'keydown',
-    },
-};
-export default class TouchBackend {
-    constructor(manager, context, options) {
-        this.getSourceClientOffset = (sourceId) => {
-            return getNodeClientOffset(this.sourceNodes[sourceId]);
-        };
-        this.handleTopMoveStartCapture = (e) => {
-            if (!eventShouldStartDrag(e)) {
-                return;
-            }
-            this.moveStartSourceIds = [];
-        };
-        this.handleMoveStart = (sourceId) => {
-            // Just because we received an event doesn't necessarily mean we need to collect drag sources.
-            // We only collect start collecting drag sources on touch and left mouse events.
-            if (Array.isArray(this.moveStartSourceIds)) {
-                this.moveStartSourceIds.unshift(sourceId);
-            }
-        };
-        this.handleTopMoveStart = (e) => {
-            if (!eventShouldStartDrag(e)) {
-                return;
-            }
-            // Don't prematurely preventDefault() here since it might:
-            // 1. Mess up scrolling
-            // 2. Mess up long tap (which brings up context menu)
-            // 3. If there's an anchor link as a child, tap won't be triggered on link
-            const clientOffset = getEventClientOffset(e);
-            if (clientOffset) {
-                this._mouseClientOffset = clientOffset;
-            }
-            this.waitingForDelay = false;
-        };
-        this.handleTopMoveStartDelay = (e) => {
-            if (!eventShouldStartDrag(e)) {
-                return;
-            }
-            const delay = e.type === eventNames.touch.start
-                ? this.options.delayTouchStart
-                : this.options.delayMouseStart;
-            this.timeout = setTimeout(this.handleTopMoveStart.bind(this, e), delay);
-            this.waitingForDelay = true;
-        };
-        this.handleTopMoveCapture = () => {
-            this.dragOverTargetIds = [];
-        };
-        this.handleMove = (_, targetId) => {
-            if (this.dragOverTargetIds) {
-                this.dragOverTargetIds.unshift(targetId);
-            }
-        };
-        this.handleTopMove = (e) => {
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-            }
-            if (!this.document || this.waitingForDelay) {
-                return;
-            }
-            const { moveStartSourceIds, dragOverTargetIds } = this;
-            const enableHoverOutsideTarget = this.options.enableHoverOutsideTarget;
-            const clientOffset = getEventClientOffset(e);
-            if (!clientOffset) {
-                return;
-            }
-            // If the touch move started as a scroll, or is is between the scroll angles
-            if (this._isScrolling ||
-                (!this.monitor.isDragging() &&
-                    inAngleRanges(this._mouseClientOffset.x || 0, this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y, this.options.scrollAngleRanges))) {
-                this._isScrolling = true;
-                return;
-            }
-            // If we're not dragging and we've moved a little, that counts as a drag start
-            if (!this.monitor.isDragging() &&
-                // eslint-disable-next-line no-prototype-builtins
-                this._mouseClientOffset.hasOwnProperty('x') &&
-                moveStartSourceIds &&
-                distance(this._mouseClientOffset.x || 0, this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y) > (this.options.touchSlop ? this.options.touchSlop : 0)) {
-                this.moveStartSourceIds = undefined;
-                this.actions.beginDrag(moveStartSourceIds, {
-                    clientOffset: this._mouseClientOffset,
-                    getSourceClientOffset: this.getSourceClientOffset,
-                    publishSource: false,
-                });
-            }
-            if (!this.monitor.isDragging()) {
-                return;
-            }
-            const sourceNode = this.sourceNodes[this.monitor.getSourceId()];
-            this.installSourceNodeRemovalObserver(sourceNode);
-            this.actions.publishDragSource();
-            e.preventDefault();
-            // Get the node elements of the hovered DropTargets
-            const dragOverTargetNodes = (dragOverTargetIds || []).map(key => this.targetNodes[key]);
-            // Get the a ordered list of nodes that are touched by
-            let elementsAtPoint = this.options.getDropTargetElementsAtPoint
-                ? this.options.getDropTargetElementsAtPoint(clientOffset.x, clientOffset.y, dragOverTargetNodes)
-                : this.document.elementsFromPoint(clientOffset.x, clientOffset.y);
-            // Extend list with parents that are not receiving elementsFromPoint events (size 0 elements and svg groups)
-            let elementsAtPointExtended = [];
-            for (let nodeId in elementsAtPoint) {
-                // eslint-disable-next-line no-prototype-builtins
-                if (!elementsAtPoint.hasOwnProperty(nodeId)) {
-                    continue;
-                }
-                let currentNode = elementsAtPoint[nodeId];
-                elementsAtPointExtended.push(currentNode);
-                while (currentNode) {
-                    currentNode = currentNode.parentElement;
-                    if (elementsAtPointExtended.indexOf(currentNode) === -1) {
-                        elementsAtPointExtended.push(currentNode);
-                    }
-                }
-            }
-            let orderedDragOverTargetIds = elementsAtPointExtended
-                // Filter off nodes that arent a hovered DropTargets nodes
-                .filter(node => dragOverTargetNodes.indexOf(node) > -1)
-                // Map back the nodes elements to targetIds
-                .map(node => {
-                for (let targetId in this.targetNodes) {
-                    if (node === this.targetNodes[targetId]) {
-                        return targetId;
-                    }
-                }
-                return undefined;
-            })
-                // Filter off possible null rows
-                .filter(node => !!node)
-                .filter((id, index, ids) => ids.indexOf(id) === index);
-            // Invoke hover for drop targets when source node is still over and pointer is outside
-            if (enableHoverOutsideTarget) {
-                for (let targetId in this.targetNodes) {
-                    if (this.targetNodes[targetId] &&
-                        this.targetNodes[targetId].contains(sourceNode) &&
-                        orderedDragOverTargetIds.indexOf(targetId) === -1) {
-                        orderedDragOverTargetIds.unshift(targetId);
-                        break;
-                    }
-                }
-            }
-            // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
-            orderedDragOverTargetIds.reverse();
-            this.actions.hover(orderedDragOverTargetIds, {
-                clientOffset: clientOffset,
-            });
-        };
-        this.handleTopMoveEndCapture = (e) => {
-            this._isScrolling = false;
-            if (!eventShouldEndDrag(e)) {
-                return;
-            }
-            if (!this.monitor.isDragging() || this.monitor.didDrop()) {
-                this.moveStartSourceIds = undefined;
-                return;
-            }
-            e.preventDefault();
-            this._mouseClientOffset = {};
-            this.uninstallSourceNodeRemovalObserver();
-            this.actions.drop();
-            this.actions.endDrag();
-        };
-        this.handleCancelOnEscape = (e) => {
-            if (e.key === 'Escape' && this.monitor.isDragging()) {
-                this._mouseClientOffset = {};
-                this.uninstallSourceNodeRemovalObserver();
-                this.actions.endDrag();
-            }
-        };
-        this.options = new OptionsReader(options, context);
-        this.actions = manager.getActions();
-        this.monitor = manager.getMonitor();
-        this.sourceNodes = {};
-        this.sourcePreviewNodes = {};
-        this.sourcePreviewNodeOptions = {};
-        this.targetNodes = {};
-        this.listenerTypes = [];
-        this._mouseClientOffset = {};
-        this._isScrolling = false;
-        if (this.options.enableMouseEvents) {
-            this.listenerTypes.push("mouse" /* mouse */);
+var eventNames = (_eventNames = {}, _defineProperty(_eventNames, ListenerType.mouse, {
+  start: 'mousedown',
+  move: 'mousemove',
+  end: 'mouseup',
+  contextmenu: 'contextmenu'
+}), _defineProperty(_eventNames, ListenerType.touch, {
+  start: 'touchstart',
+  move: 'touchmove',
+  end: 'touchend'
+}), _defineProperty(_eventNames, ListenerType.keyboard, {
+  keydown: 'keydown'
+}), _eventNames);
+
+var TouchBackend =
+/*#__PURE__*/
+function () {
+  // React-DnD Dependencies
+  // Internal State
+  function TouchBackend(manager, context, options) {
+    var _this = this;
+
+    _classCallCheck(this, TouchBackend);
+
+    _defineProperty(this, "options", void 0);
+
+    _defineProperty(this, "actions", void 0);
+
+    _defineProperty(this, "monitor", void 0);
+
+    _defineProperty(this, "sourceNodes", void 0);
+
+    _defineProperty(this, "sourcePreviewNodes", void 0);
+
+    _defineProperty(this, "sourcePreviewNodeOptions", void 0);
+
+    _defineProperty(this, "targetNodes", void 0);
+
+    _defineProperty(this, "_mouseClientOffset", void 0);
+
+    _defineProperty(this, "_isScrolling", void 0);
+
+    _defineProperty(this, "listenerTypes", void 0);
+
+    _defineProperty(this, "moveStartSourceIds", void 0);
+
+    _defineProperty(this, "waitingForDelay", void 0);
+
+    _defineProperty(this, "timeout", void 0);
+
+    _defineProperty(this, "dragOverTargetIds", void 0);
+
+    _defineProperty(this, "draggedSourceNode", void 0);
+
+    _defineProperty(this, "draggedSourceNodeRemovalObserver", void 0);
+
+    _defineProperty(this, "getSourceClientOffset", function (sourceId) {
+      return getNodeClientOffset(_this.sourceNodes[sourceId]);
+    });
+
+    _defineProperty(this, "handleTopMoveStartCapture", function (e) {
+      if (!eventShouldStartDrag(e)) {
+        return;
+      }
+
+      _this.moveStartSourceIds = [];
+    });
+
+    _defineProperty(this, "handleMoveStart", function (sourceId) {
+      // Just because we received an event doesn't necessarily mean we need to collect drag sources.
+      // We only collect start collecting drag sources on touch and left mouse events.
+      if (Array.isArray(_this.moveStartSourceIds)) {
+        _this.moveStartSourceIds.unshift(sourceId);
+      }
+    });
+
+    _defineProperty(this, "handleTopMoveStart", function (e) {
+      if (!eventShouldStartDrag(e)) {
+        return;
+      } // Don't prematurely preventDefault() here since it might:
+      // 1. Mess up scrolling
+      // 2. Mess up long tap (which brings up context menu)
+      // 3. If there's an anchor link as a child, tap won't be triggered on link
+
+
+      var clientOffset = getEventClientOffset(e);
+
+      if (clientOffset) {
+        _this._mouseClientOffset = clientOffset;
+      }
+
+      _this.waitingForDelay = false;
+    });
+
+    _defineProperty(this, "handleTopMoveStartDelay", function (e) {
+      if (!eventShouldStartDrag(e)) {
+        return;
+      }
+
+      var delay = e.type === eventNames.touch.start ? _this.options.delayTouchStart : _this.options.delayMouseStart;
+      _this.timeout = setTimeout(_this.handleTopMoveStart.bind(_this, e), delay);
+      _this.waitingForDelay = true;
+    });
+
+    _defineProperty(this, "handleTopMoveCapture", function () {
+      _this.dragOverTargetIds = [];
+    });
+
+    _defineProperty(this, "handleMove", function (_, targetId) {
+      if (_this.dragOverTargetIds) {
+        _this.dragOverTargetIds.unshift(targetId);
+      }
+    });
+
+    _defineProperty(this, "handleTopMove", function (e) {
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+
+      if (!_this.document || _this.waitingForDelay) {
+        return;
+      }
+
+      var moveStartSourceIds = _this.moveStartSourceIds,
+          dragOverTargetIds = _this.dragOverTargetIds;
+      var enableHoverOutsideTarget = _this.options.enableHoverOutsideTarget;
+      var clientOffset = getEventClientOffset(e);
+
+      if (!clientOffset) {
+        return;
+      } // If the touch move started as a scroll, or is is between the scroll angles
+
+
+      if (_this._isScrolling || !_this.monitor.isDragging() && inAngleRanges(_this._mouseClientOffset.x || 0, _this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y, _this.options.scrollAngleRanges)) {
+        _this._isScrolling = true;
+        return;
+      } // If we're not dragging and we've moved a little, that counts as a drag start
+
+
+      if (!_this.monitor.isDragging() && // eslint-disable-next-line no-prototype-builtins
+      _this._mouseClientOffset.hasOwnProperty('x') && moveStartSourceIds && distance(_this._mouseClientOffset.x || 0, _this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y) > (_this.options.touchSlop ? _this.options.touchSlop : 0)) {
+        _this.moveStartSourceIds = undefined;
+
+        _this.actions.beginDrag(moveStartSourceIds, {
+          clientOffset: _this._mouseClientOffset,
+          getSourceClientOffset: _this.getSourceClientOffset,
+          publishSource: false
+        });
+      }
+
+      if (!_this.monitor.isDragging()) {
+        return;
+      }
+
+      var sourceNode = _this.sourceNodes[_this.monitor.getSourceId()];
+
+      _this.installSourceNodeRemovalObserver(sourceNode);
+
+      _this.actions.publishDragSource();
+
+      e.preventDefault(); // Get the node elements of the hovered DropTargets
+
+      var dragOverTargetNodes = (dragOverTargetIds || []).map(function (key) {
+        return _this.targetNodes[key];
+      }); // Get the a ordered list of nodes that are touched by
+
+      var elementsAtPoint = _this.options.getDropTargetElementsAtPoint ? _this.options.getDropTargetElementsAtPoint(clientOffset.x, clientOffset.y, dragOverTargetNodes) : _this.document.elementsFromPoint(clientOffset.x, clientOffset.y); // Extend list with parents that are not receiving elementsFromPoint events (size 0 elements and svg groups)
+
+      var elementsAtPointExtended = [];
+
+      for (var nodeId in elementsAtPoint) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (!elementsAtPoint.hasOwnProperty(nodeId)) {
+          continue;
         }
-        if (this.options.enableTouchEvents) {
-            this.listenerTypes.push("touch" /* touch */);
+
+        var currentNode = elementsAtPoint[nodeId];
+        elementsAtPointExtended.push(currentNode);
+
+        while (currentNode) {
+          currentNode = currentNode.parentElement;
+
+          if (elementsAtPointExtended.indexOf(currentNode) === -1) {
+            elementsAtPointExtended.push(currentNode);
+          }
         }
-        if (this.options.enableKeyboardEvents) {
-            this.listenerTypes.push("keyboard" /* keyboard */);
+      }
+
+      var orderedDragOverTargetIds = elementsAtPointExtended // Filter off nodes that arent a hovered DropTargets nodes
+      .filter(function (node) {
+        return dragOverTargetNodes.indexOf(node) > -1;
+      }) // Map back the nodes elements to targetIds
+      .map(function (node) {
+        for (var targetId in _this.targetNodes) {
+          if (node === _this.targetNodes[targetId]) {
+            return targetId;
+          }
         }
+
+        return undefined;
+      }) // Filter off possible null rows
+      .filter(function (node) {
+        return !!node;
+      }).filter(function (id, index, ids) {
+        return ids.indexOf(id) === index;
+      }); // Invoke hover for drop targets when source node is still over and pointer is outside
+
+      if (enableHoverOutsideTarget) {
+        for (var targetId in _this.targetNodes) {
+          if (_this.targetNodes[targetId] && _this.targetNodes[targetId].contains(sourceNode) && orderedDragOverTargetIds.indexOf(targetId) === -1) {
+            orderedDragOverTargetIds.unshift(targetId);
+            break;
+          }
+        }
+      } // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
+
+
+      orderedDragOverTargetIds.reverse();
+
+      _this.actions.hover(orderedDragOverTargetIds, {
+        clientOffset: clientOffset
+      });
+    });
+
+    _defineProperty(this, "handleTopMoveEndCapture", function (e) {
+      _this._isScrolling = false;
+
+      if (!eventShouldEndDrag(e)) {
+        return;
+      }
+
+      if (!_this.monitor.isDragging() || _this.monitor.didDrop()) {
+        _this.moveStartSourceIds = undefined;
+        return;
+      }
+
+      e.preventDefault();
+      _this._mouseClientOffset = {};
+
+      _this.uninstallSourceNodeRemovalObserver();
+
+      _this.actions.drop();
+
+      _this.actions.endDrag();
+    });
+
+    _defineProperty(this, "handleCancelOnEscape", function (e) {
+      if (e.key === 'Escape' && _this.monitor.isDragging()) {
+        _this._mouseClientOffset = {};
+
+        _this.uninstallSourceNodeRemovalObserver();
+
+        _this.actions.endDrag();
+      }
+    });
+
+    this.options = new OptionsReader(options, context);
+    this.actions = manager.getActions();
+    this.monitor = manager.getMonitor();
+    this.sourceNodes = {};
+    this.sourcePreviewNodes = {};
+    this.sourcePreviewNodeOptions = {};
+    this.targetNodes = {};
+    this.listenerTypes = [];
+    this._mouseClientOffset = {};
+    this._isScrolling = false;
+
+    if (this.options.enableMouseEvents) {
+      this.listenerTypes.push(ListenerType.mouse);
     }
-    // public for test
-    get window() {
-        return this.options.window;
+
+    if (this.options.enableTouchEvents) {
+      this.listenerTypes.push(ListenerType.touch);
     }
-    // public for test
-    get document() {
-        if (this.window) {
-            return this.window.document;
-        }
-        return undefined;
+
+    if (this.options.enableKeyboardEvents) {
+      this.listenerTypes.push(ListenerType.keyboard);
     }
-    setup() {
-        if (!this.window) {
-            return;
+  } // public for test
+
+
+  _createClass(TouchBackend, [{
+    key: "setup",
+    value: function setup() {
+      if (!this.window) {
+        return;
+      }
+
+      invariant(!TouchBackend.isSetUp, 'Cannot have two Touch backends at the same time.');
+      TouchBackend.isSetUp = true;
+      this.addEventListener(this.window, 'start', this.getTopMoveStartHandler());
+      this.addEventListener(this.window, 'start', this.handleTopMoveStartCapture, true);
+      this.addEventListener(this.window, 'move', this.handleTopMove);
+      this.addEventListener(this.window, 'move', this.handleTopMoveCapture, true);
+      this.addEventListener(this.window, 'end', this.handleTopMoveEndCapture, true);
+
+      if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
+        this.addEventListener(this.window, 'contextmenu', this.handleTopMoveEndCapture);
+      }
+
+      if (this.options.enableKeyboardEvents) {
+        this.addEventListener(this.window, 'keydown', this.handleCancelOnEscape, true);
+      }
+    }
+  }, {
+    key: "teardown",
+    value: function teardown() {
+      if (!this.window) {
+        return;
+      }
+
+      TouchBackend.isSetUp = false;
+      this._mouseClientOffset = {};
+      this.removeEventListener(this.window, 'start', this.handleTopMoveStartCapture, true);
+      this.removeEventListener(this.window, 'start', this.handleTopMoveStart);
+      this.removeEventListener(this.window, 'move', this.handleTopMoveCapture, true);
+      this.removeEventListener(this.window, 'move', this.handleTopMove);
+      this.removeEventListener(this.window, 'end', this.handleTopMoveEndCapture, true);
+
+      if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
+        this.removeEventListener(this.window, 'contextmenu', this.handleTopMoveEndCapture);
+      }
+
+      if (this.options.enableKeyboardEvents) {
+        this.removeEventListener(this.window, 'keydown', this.handleCancelOnEscape, true);
+      }
+
+      this.uninstallSourceNodeRemovalObserver();
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(subject, event, handler, capture) {
+      var options = supportsPassive ? {
+        capture: capture,
+        passive: false
+      } : capture;
+      this.listenerTypes.forEach(function (listenerType) {
+        var evt = eventNames[listenerType][event];
+
+        if (evt) {
+          subject.addEventListener(evt, handler, options);
         }
-        invariant(!TouchBackend.isSetUp, 'Cannot have two Touch backends at the same time.');
-        TouchBackend.isSetUp = true;
-        this.addEventListener(this.window, 'start', this.getTopMoveStartHandler());
-        this.addEventListener(this.window, 'start', this.handleTopMoveStartCapture, true);
-        this.addEventListener(this.window, 'move', this.handleTopMove);
-        this.addEventListener(this.window, 'move', this.handleTopMoveCapture, true);
-        this.addEventListener(this.window, 'end', this.handleTopMoveEndCapture, true);
-        if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
-            this.addEventListener(this.window, 'contextmenu', this
-                .handleTopMoveEndCapture);
-        }
-        if (this.options.enableKeyboardEvents) {
-            this.addEventListener(this.window, 'keydown', this.handleCancelOnEscape, true);
-        }
+      });
     }
-    teardown() {
-        if (!this.window) {
-            return;
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(subject, event, handler, capture) {
+      var options = supportsPassive ? {
+        capture: capture,
+        passive: false
+      } : capture;
+      this.listenerTypes.forEach(function (listenerType) {
+        var evt = eventNames[listenerType][event];
+
+        if (evt) {
+          subject.removeEventListener(evt, handler, options);
         }
-        TouchBackend.isSetUp = false;
-        this._mouseClientOffset = {};
-        this.removeEventListener(this.window, 'start', this.handleTopMoveStartCapture, true);
-        this.removeEventListener(this.window, 'start', this
-            .handleTopMoveStart);
-        this.removeEventListener(this.window, 'move', this.handleTopMoveCapture, true);
-        this.removeEventListener(this.window, 'move', this.handleTopMove);
-        this.removeEventListener(this.window, 'end', this.handleTopMoveEndCapture, true);
-        if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
-            this.removeEventListener(this.window, 'contextmenu', this
-                .handleTopMoveEndCapture);
-        }
-        if (this.options.enableKeyboardEvents) {
-            this.removeEventListener(this.window, 'keydown', this.handleCancelOnEscape, true);
-        }
-        this.uninstallSourceNodeRemovalObserver();
+      });
     }
-    addEventListener(subject, event, handler, capture) {
-        const options = supportsPassive ? { capture, passive: false } : capture;
-        this.listenerTypes.forEach(function (listenerType) {
-            const evt = eventNames[listenerType][event];
-            if (evt) {
-                subject.addEventListener(evt, handler, options);
-            }
-        });
+  }, {
+    key: "connectDragSource",
+    value: function connectDragSource(sourceId, node) {
+      var _this2 = this;
+
+      var handleMoveStart = this.handleMoveStart.bind(this, sourceId);
+      this.sourceNodes[sourceId] = node;
+      this.addEventListener(node, 'start', handleMoveStart);
+      return function () {
+        delete _this2.sourceNodes[sourceId];
+
+        _this2.removeEventListener(node, 'start', handleMoveStart);
+      };
     }
-    removeEventListener(subject, event, handler, capture) {
-        const options = supportsPassive ? { capture, passive: false } : capture;
-        this.listenerTypes.forEach(function (listenerType) {
-            const evt = eventNames[listenerType][event];
-            if (evt) {
-                subject.removeEventListener(evt, handler, options);
-            }
-        });
+  }, {
+    key: "connectDragPreview",
+    value: function connectDragPreview(sourceId, node, options) {
+      var _this3 = this;
+
+      this.sourcePreviewNodeOptions[sourceId] = options;
+      this.sourcePreviewNodes[sourceId] = node;
+      return function () {
+        delete _this3.sourcePreviewNodes[sourceId];
+        delete _this3.sourcePreviewNodeOptions[sourceId];
+      };
     }
-    connectDragSource(sourceId, node) {
-        const handleMoveStart = this.handleMoveStart.bind(this, sourceId);
-        this.sourceNodes[sourceId] = node;
-        this.addEventListener(node, 'start', handleMoveStart);
-        return () => {
-            delete this.sourceNodes[sourceId];
-            this.removeEventListener(node, 'start', handleMoveStart);
+  }, {
+    key: "connectDropTarget",
+    value: function connectDropTarget(targetId, node) {
+      var _this4 = this;
+
+      if (!this.document) {
+        return function () {
+          return null;
         };
-    }
-    connectDragPreview(sourceId, node, options) {
-        this.sourcePreviewNodeOptions[sourceId] = options;
-        this.sourcePreviewNodes[sourceId] = node;
-        return () => {
-            delete this.sourcePreviewNodes[sourceId];
-            delete this.sourcePreviewNodeOptions[sourceId];
-        };
-    }
-    connectDropTarget(targetId, node) {
-        if (!this.document) {
-            return () => null;
+      }
+
+      var handleMove = function handleMove(e) {
+        if (!_this4.document || !_this4.monitor.isDragging()) {
+          return;
         }
-        const handleMove = (e) => {
-            if (!this.document || !this.monitor.isDragging()) {
-                return;
-            }
-            let coords;
-            /**
-             * Grab the coordinates for the current mouse/touch position
-             */
-            switch (e.type) {
-                case eventNames.mouse.move:
-                    coords = {
-                        x: e.clientX,
-                        y: e.clientY,
-                    };
-                    break;
-                case eventNames.touch.move:
-                    coords = {
-                        x: e.touches[0].clientX,
-                        y: e.touches[0].clientY,
-                    };
-                    break;
-            }
-            /**
-             * Use the coordinates to grab the element the drag ended on.
-             * If the element is the same as the target node (or any of it's children) then we have hit a drop target and can handle the move.
-             */
-            let droppedOn = coords != null
-                ? this.document.elementFromPoint(coords.x, coords.y)
-                : undefined;
-            let childMatch = droppedOn && node.contains(droppedOn);
-            if (droppedOn === node || childMatch) {
-                return this.handleMove(e, targetId);
-            }
-        };
+
+        var coords;
         /**
-         * Attaching the event listener to the body so that touchmove will work while dragging over multiple target elements.
+         * Grab the coordinates for the current mouse/touch position
          */
-        this.addEventListener(this.document.body, 'move', handleMove);
-        this.targetNodes[targetId] = node;
-        return () => {
-            if (this.document) {
-                delete this.targetNodes[targetId];
-                this.removeEventListener(this.document.body, 'move', handleMove);
-            }
-        };
-    }
-    getTopMoveStartHandler() {
-        if (!this.options.delayTouchStart && !this.options.delayMouseStart) {
-            return this.handleTopMoveStart;
+
+        switch (e.type) {
+          case eventNames.mouse.move:
+            coords = {
+              x: e.clientX,
+              y: e.clientY
+            };
+            break;
+
+          case eventNames.touch.move:
+            coords = {
+              x: e.touches[0].clientX,
+              y: e.touches[0].clientY
+            };
+            break;
         }
-        return this.handleTopMoveStartDelay;
-    }
-    installSourceNodeRemovalObserver(node) {
-        this.uninstallSourceNodeRemovalObserver();
-        this.draggedSourceNode = node;
-        this.draggedSourceNodeRemovalObserver = new MutationObserver(() => {
-            if (node && !node.parentElement) {
-                this.resurrectSourceNode();
-                this.uninstallSourceNodeRemovalObserver();
-            }
-        });
-        if (!node || !node.parentElement) {
-            return;
+        /**
+         * Use the coordinates to grab the element the drag ended on.
+         * If the element is the same as the target node (or any of it's children) then we have hit a drop target and can handle the move.
+         */
+
+
+        var droppedOn = coords != null ? _this4.document.elementFromPoint(coords.x, coords.y) : undefined;
+        var childMatch = droppedOn && node.contains(droppedOn);
+
+        if (droppedOn === node || childMatch) {
+          return _this4.handleMove(e, targetId);
         }
-        this.draggedSourceNodeRemovalObserver.observe(node.parentElement, {
-            childList: true,
-        });
-    }
-    resurrectSourceNode() {
-        if (this.document && this.draggedSourceNode) {
-            this.draggedSourceNode.style.display = 'none';
-            this.draggedSourceNode.removeAttribute('data-reactid');
-            this.document.body.appendChild(this.draggedSourceNode);
+      };
+      /**
+       * Attaching the event listener to the body so that touchmove will work while dragging over multiple target elements.
+       */
+
+
+      this.addEventListener(this.document.body, 'move', handleMove);
+      this.targetNodes[targetId] = node;
+      return function () {
+        if (_this4.document) {
+          delete _this4.targetNodes[targetId];
+
+          _this4.removeEventListener(_this4.document.body, 'move', handleMove);
         }
+      };
     }
-    uninstallSourceNodeRemovalObserver() {
-        if (this.draggedSourceNodeRemovalObserver) {
-            this.draggedSourceNodeRemovalObserver.disconnect();
+  }, {
+    key: "getTopMoveStartHandler",
+    value: function getTopMoveStartHandler() {
+      if (!this.options.delayTouchStart && !this.options.delayMouseStart) {
+        return this.handleTopMoveStart;
+      }
+
+      return this.handleTopMoveStartDelay;
+    }
+  }, {
+    key: "installSourceNodeRemovalObserver",
+    value: function installSourceNodeRemovalObserver(node) {
+      var _this5 = this;
+
+      this.uninstallSourceNodeRemovalObserver();
+      this.draggedSourceNode = node;
+      this.draggedSourceNodeRemovalObserver = new MutationObserver(function () {
+        if (node && !node.parentElement) {
+          _this5.resurrectSourceNode();
+
+          _this5.uninstallSourceNodeRemovalObserver();
         }
-        this.draggedSourceNodeRemovalObserver = undefined;
-        this.draggedSourceNode = undefined;
+      });
+
+      if (!node || !node.parentElement) {
+        return;
+      }
+
+      this.draggedSourceNodeRemovalObserver.observe(node.parentElement, {
+        childList: true
+      });
     }
-}
+  }, {
+    key: "resurrectSourceNode",
+    value: function resurrectSourceNode() {
+      if (this.document && this.draggedSourceNode) {
+        this.draggedSourceNode.style.display = 'none';
+        this.draggedSourceNode.removeAttribute('data-reactid');
+        this.document.body.appendChild(this.draggedSourceNode);
+      }
+    }
+  }, {
+    key: "uninstallSourceNodeRemovalObserver",
+    value: function uninstallSourceNodeRemovalObserver() {
+      if (this.draggedSourceNodeRemovalObserver) {
+        this.draggedSourceNodeRemovalObserver.disconnect();
+      }
+
+      this.draggedSourceNodeRemovalObserver = undefined;
+      this.draggedSourceNode = undefined;
+    }
+  }, {
+    key: "window",
+    get: function get() {
+      return this.options.window;
+    } // public for test
+
+  }, {
+    key: "document",
+    get: function get() {
+      if (this.window) {
+        return this.window.document;
+      }
+
+      return undefined;
+    }
+  }]);
+
+  return TouchBackend;
+}();
+
+_defineProperty(TouchBackend, "isSetUp", void 0);
+
+export { TouchBackend as default };

lib/utils/math.js

 export function distance(x1, y1, x2, y2) {
-    return Math.sqrt(Math.pow(Math.abs(x2 - x1), 2) + Math.pow(Math.abs(y2 - y1), 2));
+  return Math.sqrt(Math.pow(Math.abs(x2 - x1), 2) + Math.pow(Math.abs(y2 - y1), 2));
 }
 export function inAngleRanges(x1, y1, x2, y2, angleRanges) {
-    if (!angleRanges) {
-        return false;
+  if (!angleRanges) {
+    return false;
+  }
+
+  var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI + 180;
+
+  for (var i = 0; i < angleRanges.length; ++i) {
+    if ((angleRanges[i].start == null || angle >= angleRanges[i].start) && (angleRanges[i].end == null || angle <= angleRanges[i].end)) {
+      return true;
     }
-    const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 180;
-    for (let i = 0; i < angleRanges.length; ++i) {
-        if ((angleRanges[i].start == null || angle >= angleRanges[i].start) &&
-            (angleRanges[i].end == null || angle <= angleRanges[i].end)) {
-            return true;
-        }
-    }
-    return false;
-}
+  }
+
+  return false;
+}

lib/utils/offsets.js

 import { isTouchEvent } from './predicates';
-const ELEMENT_NODE = 1;
+var ELEMENT_NODE = 1;
 export function getNodeClientOffset(node) {
-    const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
-    if (!el) {
-        return undefined;
-    }
-    const { top, left } = el.getBoundingClientRect();
-    return { x: left, y: top };
+  var el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
+
+  if (!el) {
+    return undefined;
+  }
+
+  var _el$getBoundingClient = el.getBoundingClientRect(),
+      top = _el$getBoundingClient.top,
+      left = _el$getBoundingClient.left;
+
+  return {
+    x: left,
+    y: top
+  };
 }
 export function getEventClientTouchOffset(e) {
-    if (e.targetTouches.length === 1) {
-        return getEventClientOffset(e.targetTouches[0]);
-    }
+  if (e.targetTouches.length === 1) {
+    return getEventClientOffset(e.targetTouches[0]);
+  }
 }
 export function getEventClientOffset(e) {
-    if (isTouchEvent(e)) {
-        return getEventClientTouchOffset(e);
-    }
-    else {
-        return {
-            x: e.clientX,
-            y: e.clientY,
-        };
-    }
-}
+  if (isTouchEvent(e)) {
+    return getEventClientTouchOffset(e);
+  } else {
+    return {
+      x: e.clientX,
+      y: e.clientY
+    };
+  }
+}

lib/utils/predicates.js

 // Used for MouseEvent.buttons (note the s on the end).
-const MouseButtons = {
-    Left: 1,
-    Right: 2,
-    Center: 4,
+var MouseButtons = {
+  Left: 1,
+  Right: 2,
+  Center: 4 // Used for e.button (note the lack of an s on the end).
+
 };
-// Used for e.button (note the lack of an s on the end).
-const MouseButton = {
-    Left: 0,
-    Center: 1,
-    Right: 2,
+var MouseButton = {
+  Left: 0,
+  Center: 1,
+  Right: 2
+  /**
+   * Only touch events and mouse events where the left button is pressed should initiate a drag.
+   * @param {MouseEvent | TouchEvent} e The event
+   */
+
 };
-/**
- * Only touch events and mouse events where the left button is pressed should initiate a drag.
- * @param {MouseEvent | TouchEvent} e The event
- */
 export function eventShouldStartDrag(e) {
-    // For touch events, button will be undefined. If e.button is defined,
-    // then it should be MouseButton.Left.
-    return e.button === undefined || e.button === MouseButton.Left;
+  // For touch events, button will be undefined. If e.button is defined,
+  // then it should be MouseButton.Left.
+  return e.button === undefined || e.button === MouseButton.Left;
 }
@@ -28,9 +29,10 @@ /**
  */
+
 export function eventShouldEndDrag(e) {
-    // Touch events will have buttons be undefined, while mouse events will have e.buttons's left button
-    // bit field unset if the left mouse button has been released
-    return e.buttons === undefined || (e.buttons & MouseButtons.Left) === 0;
+  // Touch events will have buttons be undefined, while mouse events will have e.buttons's left button
+  // bit field unset if the left mouse button has been released
+  return e.buttons === undefined || (e.buttons & MouseButtons.Left) === 0;
 }
 export function isTouchEvent(e) {
-    return !!e.targetTouches;
-}
+  return !!e.targetTouches;
+}

lib/utils/supportsPassive.js

@@ -1,17 +0,18 @@
-const supportsPassive = (() => {
-    // simular to jQuery's test
-    let supported = false;
-    try {
-        addEventListener('test', () => { }, Object.defineProperty({}, 'passive', {
-            get() {
-                supported = true;
-                return true;
-            },
-        }));
-    }
-    catch (e) {
-        // do nothing
-    }
-    return supported;
-})();
-export default supportsPassive;
+var supportsPassive = function () {
+  // simular to jQuery's test
+  var supported = false;
+
+  try {
+    addEventListener('test', function () {}, Object.defineProperty({}, 'passive', {
+      get: function get() {
+        supported = true;
+        return true;
+      }
+    }));
+  } catch (e) {// do nothing
+  }
+
+  return supported;
+}();
+
+export default supportsPassive;

package.json

 {
 	"name": "react-dnd-touch-backend",
-	"version": "9.0.2",
+	"version": "9.1.0",
 	"description": "Touch backend for react-dnd",
@@ -16,17 +16,12 @@ "type": "module",
 	"scripts": {
-		"clean": "rimraf lib",
-		"build": "tsc -b tsconfig.json",
-		"start": "tsc -b tsconfig.json -w --preserveWatchOutput"
+		"clean": "../../../scripts/clean_package.sh",
+		"build": "../../../scripts/build_package.sh",
+		"start": "../../../scripts/watch_package.sh"
 	},
 	"dependencies": {
 		"@types/invariant": "^2.2.30",
-		"dnd-core": "^9.0.0",
+		"dnd-core": "^9.1.0",
 		"invariant": "^2.2.4"
 	},
-	"devDependencies": {
-		"npm-run-all": "^4.1.5",
-		"rimraf": "^2.6.3",
-		"typescript": "^3.5.2"
-	},
-	"gitHead": "39b1e64dc652284e25bf002e8ad2ccfb8700679e"
+	"gitHead": "446e8f997b6bebf677b6bd8f875307f6f05601e0"
 }

src/interfaces.ts

@@ -28,3 +28,3 @@ export interface EventName {
 
-export const enum ListenerType {
+export enum ListenerType {
 	mouse = 'mouse',
@@ -31,0 +31,0 @@ touch = 'touch',

src/OptionsReader.ts

@@ -14,4 +14,6 @@ import { TouchBackendOptions, AngleRange } from './interfaces'
 	public getDropTargetElementsAtPoint?: Function
+	private context: any
 
-	constructor(incoming: TouchBackendOptions, private context?: any) {
+	public constructor(incoming: TouchBackendOptions, context?: any) {
+		this.context = context
 		this.delayTouchStart = incoming.delayTouchStart || incoming.delay || 0
@@ -18,0 +20,0 @@ this.delayMouseStart = incoming.delayMouseStart || incoming.delay || 0

src/TouchBackend.ts

@@ -58,3 +58,3 @@ import invariant from 'invariant'
 
-	constructor(
+	public constructor(
 		manager: DragDropManager,
@@ -61,0 +61,0 @@ context: any,

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210178

1.6%

Dev dependency count

0

-100%

Lines of code

1397

5.12%

Worsened metrics

Number of low supply chain risk alerts

3

50%

Dependency changes

• Updated

  dnd-core@^9.1.0