dnd-multi-backend - npm Package Compare versions

Comparing version 3.1.7 to 3.1.9

lib/createTransition.js

@@ -1,8 +0,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (event, check) {
+export default (function (event, check) {
   return {
@@ -13,2 +7,2 @@ _isMBTransition: true,
   };
-};
+});

lib/index.js

@@ -1,54 +0,13 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PreviewManager = exports.MultiBackend = exports.createTransition = exports.MouseTransition = exports.TouchTransition = exports.HTML5DragTransition = undefined;
-
-var _Transitions = require('./Transitions');
-
-Object.defineProperty(exports, 'HTML5DragTransition', {
-  enumerable: true,
-  get: function get() {
-    return _Transitions.HTML5DragTransition;
+export { HTML5DragTransition, TouchTransition, MouseTransition } from './Transitions';
+export { default as createTransition } from './createTransition';
+import MultiBackend, { PreviewManager } from './MultiBackend';
+export { MultiBackend, PreviewManager };
+export default (function (managerOrOptions) {
+  if (managerOrOptions.getMonitor) {
+    return new MultiBackend(managerOrOptions);
   }
-});
-Object.defineProperty(exports, 'TouchTransition', {
-  enumerable: true,
-  get: function get() {
-    return _Transitions.TouchTransition;
-  }
-});
-Object.defineProperty(exports, 'MouseTransition', {
-  enumerable: true,
-  get: function get() {
-    return _Transitions.MouseTransition;
-  }
-});
 
-var _createTransition = require('./createTransition');
-
-Object.defineProperty(exports, 'createTransition', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_createTransition).default;
-  }
-});
-
-var _MultiBackend = require('./MultiBackend');
-
-var _MultiBackend2 = _interopRequireDefault(_MultiBackend);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.MultiBackend = _MultiBackend2.default;
-exports.PreviewManager = _MultiBackend.PreviewManager;
-
-exports.default = function (managerOrOptions) {
-  if (managerOrOptions.getMonitor) {
-    return new _MultiBackend2.default(managerOrOptions);
-  }
   return function (manager) {
-    return new _MultiBackend2.default(manager, managerOrOptions);
+    return new MultiBackend(manager, managerOrOptions);
   };
-};
+});

lib/MultiBackend.js

@@ -1,18 +0,13 @@
-'use strict';
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PreviewManager = undefined;
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
 
-var _objectAssign = require('./objectAssign');
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
 
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+import objectAssign from './objectAssign';
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 var PreviewList = function PreviewList() {
@@ -28,3 +23,4 @@ var _this = this;
   this.unregister = function (preview) {
-    var index = void 0;
+    var index;
+
     while ((index = _this.previews.indexOf(preview)) !== -1) {
@@ -43,3 +39,2 @@ _this.previews.splice(index, 1);
         var preview = _step.value;
-
         preview.backendChanged(backend);
@@ -52,3 +47,3 @@ }
       try {
-        if (!_iteratorNormalCompletion && _iterator.return) {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
           _iterator.return();
@@ -67,3 +62,3 @@ }
 
-var PreviewManager = exports.PreviewManager = new PreviewList();
+export var PreviewManager = new PreviewList();
 
@@ -83,4 +78,7 @@ var _default = function _default(manager, sourceOptions) {
     }
+
     _this2.constructor.isSetUp = true;
+
     _this2.addEventListeners(window);
+
     _this2.backends[_this2.current].instance.setup();
@@ -95,3 +93,5 @@ };
     _this2.constructor.isSetUp = false;
+
     _this2.removeEventListeners(window);
+
     _this2.backends[_this2.current].instance.teardown();
@@ -101,3 +101,3 @@ };
   this.connectDragSource = function () {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -110,3 +110,3 @@ }
   this.connectDragPreview = function () {
-    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
@@ -119,3 +119,3 @@ }
   this.connectDropTarget = function () {
-    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
@@ -149,4 +149,4 @@ }
     var oldBackend = _this2.current;
+    var i = 0;
 
-    var i = 0;
     _this2.backends.some(function (backend) {
@@ -157,2 +157,3 @@ if (i !== _this2.current && backend.transition && backend.transition.check(event)) {
       }
+
       i += 1;
@@ -164,2 +165,3 @@ return false;
       _this2.backends[oldBackend].instance.teardown();
+
       Object.keys(_this2.nodes).forEach(function (id) {
@@ -171,5 +173,7 @@ var node = _this2.nodes[id];
       PreviewManager.backendChanged(_this2);
+
       _this2.backends[_this2.current].instance.setup();
 
       var newEvent = null;
+
       try {
@@ -181,2 +185,3 @@ newEvent = new event.constructor(event.type, event);
       }
+
       event.target.dispatchEvent(newEvent);
@@ -187,16 +192,22 @@ }
   this.callBackend = function (func, args) {
-    var _backends$current$ins;
+    var _this2$backends$_this;
 
-    return (_backends$current$ins = _this2.backends[_this2.current].instance)[func].apply(_backends$current$ins, _toConsumableArray(args));
+    return (_this2$backends$_this = _this2.backends[_this2.current].instance)[func].apply(_this2$backends$_this, _toConsumableArray(args));
   };
 
   this.connectBackend = function (func, args) {
-    var nodeId = func + '_' + args[0];
+    var nodeId = "".concat(func, "_").concat(args[0]);
+
     var handler = _this2.callBackend(func, args);
-    _this2.nodes[nodeId] = { func: func, args: args, handler: handler };
 
+    _this2.nodes[nodeId] = {
+      func: func,
+      args: args,
+      handler: handler
+    };
     return function () {
-      var _nodes$nodeId;
+      var _this2$nodes$nodeId;
 
-      var r = (_nodes$nodeId = _this2.nodes[nodeId]).handler.apply(_nodes$nodeId, arguments);
+      var r = (_this2$nodes$nodeId = _this2.nodes[nodeId]).handler.apply(_this2$nodes$nodeId, arguments);
+
       delete _this2.nodes[nodeId];
@@ -207,19 +218,23 @@ return r;
 
-  var options = (0, _objectAssign2.default)({ backends: [] }, sourceOptions || {});
+  var options = objectAssign({
+    backends: []
+  }, sourceOptions || {});
 
   if (options.backends.length < 1) {
-    throw new Error('You must specify at least one Backend, if you are coming from 2.x.x (or don\'t understand this error)\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx');
+    throw new Error("You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx");
   }
 
   this.current = 0;
-
   this.backends = [];
   options.backends.forEach(function (backend) {
     if (!backend.backend) {
-      throw new Error('You must specify a \'backend\' property in your Backend entry: ' + backend);
+      throw new Error("You must specify a 'backend' property in your Backend entry: ".concat(backend));
     }
+
     var transition = backend.transition;
+
     if (transition && !transition._isMBTransition) {
-      throw new Error('You must specify a valid \'transition\' property (either undefined or the return of \'createTransition\') in your Backend entry: ' + backend);
+      throw new Error("You must specify a valid 'transition' property (either undefined or the return of 'createTransition') in your Backend entry: ".concat(backend));
     }
+
     _this2.backends.push({
@@ -231,18 +246,6 @@ instance: new backend.backend(manager),
   });
-
   this.nodes = {};
-}
-
-// DnD Backend API
-
-
-// Used by Preview component
-
-
-// Multi Backend Listeners
-
-
-// Switching logic
+} // DnD Backend API
 ;
 
-exports.default = _default;
+export { _default as default };

lib/objectAssign.js

@@ -1,9 +0,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (target) {
-  for (var _len = arguments.length, sources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+export default function (target) {
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     sources[_key - 1] = arguments[_key];
@@ -20,2 +14,2 @@ }
   return target;
-};
+}

lib/Transitions.js

@@ -1,30 +0,18 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MouseTransition = exports.HTML5DragTransition = exports.TouchTransition = undefined;
-
-var _createTransition = require('./createTransition');
-
-var _createTransition2 = _interopRequireDefault(_createTransition);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var TouchTransition = exports.TouchTransition = (0, _createTransition2.default)('touchstart', function (event) {
+import createTransition from './createTransition';
+export var TouchTransition = createTransition('touchstart', function (event) {
   return event.touches != null; // eslint-disable-line no-eq-null, eqeqeq
 });
-
-var HTML5DragTransition = exports.HTML5DragTransition = (0, _createTransition2.default)('dragstart', function (event) {
+export var HTML5DragTransition = createTransition('dragstart', function (event) {
   if (event.type) {
     return event.type.indexOf('drag') !== -1 || event.type.indexOf('drop') !== -1;
   }
+
   return false;
 });
-
-var MouseTransition = exports.MouseTransition = (0, _createTransition2.default)('mousedown', function (event) {
+export var MouseTransition = createTransition('mousedown', function (event) {
   if (event.type) {
     return event.type.indexOf('touch') === -1 && event.type.indexOf('mouse') !== -1;
   }
+
   return false;
 });

package.json

 {
   "name": "dnd-multi-backend",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "Multi Backend system compatible with DnD Core / React DnD",
@@ -5,0 +5,0 @@ "author": "Louis Brunner <[e-mail]> (https://github.com/LouisBrunner)",

README.md

@@ -5,3 +5,3 @@ # DnD Multi Backend [![NPM Version][npm-image]][npm-url] [![dependencies Status][deps-image]][deps-url] [![devDependencies Status][deps-dev-image]][deps-dev-url]
 
-This project is a Drag'n'Drop backend compatible with [DnD Core](https://github.com/react-dnd/react-dnd).
+This project is a Drag'n'Drop backend compatible with [DnD Core](https://github.com/react-dnd/react-dnd/tree/master/packages/dnd-core).
 It enables your application to use different DnD backends depending on the situation. This package is completely frontend-agnostic, you can refer to [this page](https://github.com/LouisBrunner/dnd-multi-backend) for frontend-specific packages. This means if your front-end is not yet supported, you'll have to roll out your own.
@@ -11,18 +11,109 @@
 
-TODO:
+```sh
+npm install dnd-multi-backend
+```
 
+## Usage & Example
 
-## Usage
+You should only use this package if your framework is not in the supported list:
+ - [React](../react-dnd-multi-backend)
+ - [Angular](https://github.com/cormacrelf/angular-skyhook)
 
-TODO:
+In this case, you will need to write a [custom pipeline](../react-dnd-multi-backend#create-a-custom-pipeline) including as many `dnd-core` backends as you wish. See also the [examples](examples/) for more information.
 
+```js
+import { DragDropManager, DragSource, DropTarget } from 'dnd-core';
+import MultiBackend from 'dnd-multi-backend';
 
-### Examples
+// Define the backend and pipeline
+class HTML5Backend {
+  constructor(manager) {
+    this.manager = manager;
+  }
 
-TODO:
+  setup() {}
+  teardown() {}
 
+  connectDragSource(sourceId, node, options) {
+    ...
 
+    return () => {};
+  }
+
+  connectDragPreview(previewId, node, options) {
+    ...
+
+    return () => {};
+  }
+
+  connectDropTarget(targetId, node, options) {
+    ...
+
+    return () => {};
+  }
+}
+
+...
+
+const pipeline = {
+  backends: [
+    {
+      backend: HTML5Backend,
+      transition: MouseTransition,
+    },
+    {
+      backend: TouchBackend,
+      preview: true,
+      transition: TouchTransition,
+    },
+  ],
+};
+
+// Setup the manager
+const manager = new DragDropManager(MultiBackend(pipeline));
+const registry = manager.getRegistry();
+
+// Setup your DnD logic
+class Source {
+  ...
+
+  canDrag() {}
+  beginDrag() {}
+  isDragging() {}
+  endDrag() {}
+}
+
+class Target {
+  ...
+
+  canDrop() {}
+  hover() {}
+  drop() {}
+}
+
+// Define the DnD logic on the manager
+const Item = 'item';
+const src = new Source();
+const dst = new Target();
+
+const srcId = registry.addSource(Item, src);
+const dstId = registry.addTarget(Item, dst);
+
+// Link the DOM with the logic
+const srcP = document.createElement('p');
+const srcTxt = document.createTextNode('Source');
+srcP.appendChild(srcTxt);
+document.body.appendChild(srcP);
+manager.getBackend().connectDragSource(srcId, srcP);
+
+const dstP = document.createElement('p');
+const dstTxt = document.createTextNode('Target');
+dstP.appendChild(dstTxt);
+document.body.appendChild(dstP);
+manager.getBackend().connectDropTarget(dstId, dstP);
+```
+
 ## License
 
-MIT, Copyright (c) 2016-2017 Louis Brunner
+MIT, Copyright (c) 2016-2018 Louis Brunner
 
@@ -29,0 +120,0 @@

New alerts

Deprecated

Maintenance

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32531

173.67%

Number of package files

11

57.14%

Lines of code

702

160.97%

Number of lines in readme file

126

260%

Worsened metrics

Number of medium maintenance alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes