Add compat for drag-and-drop with webgme's default layout. Closes #1171 (#1172)

* Add compat for drag-and-drop with webgme's default layout. Closes #1171

* WIP #1171 improved drag-and-drop sensitivity

Author: brollb

src/visualizers/panels/PipelineIndex/PipelineIndexControl.js

@@ -2,9 +2,11 @@
 /*jshint browser: true*/
 
 define([
+    'js/DragDrop/DragHelper',
     'js/Constants',
     'js/NodePropertyNames'
 ], function (
+    DragHelper,
     CONSTANTS,
     nodePropertyNames
 ) {
@@ -72,6 +74,22 @@ define([
                 this._client.completeTransaction();
             }
         };
+
+        this._widget.onBackgroundDrop = (event, dragInfo) => {
+            if (!this._currentNodeId) {  // no active node. Cannot add pipeline
+                return;
+            }
+            const effects = DragHelper.getDragEffects(dragInfo);
+            const items = DragHelper.getDragItems(dragInfo);
+
+            if (effects.includes(DragHelper.DRAG_EFFECTS.DRAG_CREATE_INSTANCE)) {
+                const parentId = this._currentNodeId;
+                const msg = `Creating ${items.length} new pipeline(s)`;
+                this._client.startTransaction(msg);
+                items.forEach(baseId => this._client.createNode({parentId, baseId}));
+                this._client.completeTransaction();
+            }
+        };
     };
 
     /* * * * * * * * Visualizer content update callbacks * * * * * * * */

src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js

@@ -2,11 +2,13 @@
 /*jshint browser: true*/
 
 define([
+    'js/DragDrop/DropTarget',
     'text!./cards/Pipeline.ejs',
     'text!./cards/Architecture.ejs',
     'underscore',
     'css!./styles/PipelineIndexWidget.css'
 ], function (
+    DropTarget,
     PipelineHtml,
     ArchitectureHtml,
     _
@@ -34,11 +36,11 @@ define([
         this.$backgroundText = null;
         this.updateBackgroundText();
 
-        this._initializeEventHandlers();
+        this._initializeEventHandlers(container);
         this.logger.debug('ctor finished');
     };
 
-    PipelineIndexWidget.prototype._initializeEventHandlers = function () {
+    PipelineIndexWidget.prototype._initializeEventHandlers = function (container) {
         this.$el.on('click', '.open-pipeline', this.openPipeline);
         this.$el.on('click', '.preview.card-image', this.openPipeline);
 
@@ -60,6 +62,12 @@ define([
                 }
             });
         });
+
+        DropTarget.makeDroppable(container, {
+            drop: (event, dragInfo) => {
+                this.onBackgroundDrop(event, dragInfo);
+            }
+        });
     };
 
     PipelineIndexWidget.prototype.getEmptyMsg = function() {