From 37a4edc7a6f46fe5146aedf47f13a6c8e0241531 Mon Sep 17 00:00:00 2001
From: Nag Mahadevan <nag.mahadevan@gmail.com>
Date: Fri, 17 Aug 2018 16:50:28 -0500
Subject: [PATCH] Added dragndrop for pipeline editor, resource index. (#1177)

* added dragndrop for certain visualizers.

* WIP fixed indentation and commit msgs
---
 .../PipelineEditor/PipelineEditorControl.js    | 18 ++++++++++++++++++
 .../ResourceIndex/ResourceIndexControl.js      | 18 ++++++++++++++++++
 .../PipelineEditor/PipelineEditorWidget.js     | 13 +++++++++++++
 3 files changed, 49 insertions(+)

diff --git a/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js b/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
index f30867624..c8ee7da69 100644
--- a/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
+++ b/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
@@ -2,6 +2,7 @@
 /*jshint browser: true*/
 
 define([
+    'js/DragDrop/DragHelper',
     'deepforge/Constants',
     'js/Constants',
     'deepforge/viz/panels/ThumbnailControl',
@@ -13,6 +14,7 @@ define([
     'q',
     'underscore'
 ], function (
+    DragHelper,
     CONSTANTS,
     GME_CONSTANTS,
     ThumbnailControl,
@@ -141,6 +143,22 @@ define([
         this._widget.createConnection = this.createConnection.bind(this);
         this._widget.removeConnection = this.removeConnection.bind(this);
         this._widget.getDecorator = this.getDecorator.bind(this);
+        
+        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 operation(s)`;
+                this._client.startTransaction(msg);
+                items.forEach(baseId => this._client.createNode({parentId, baseId}));
+                this._client.completeTransaction();
+            }
+        };
     };
 
     PipelineEditorControl.prototype.isContainedInActive = function (gmeId) {
diff --git a/src/visualizers/panels/ResourceIndex/ResourceIndexControl.js b/src/visualizers/panels/ResourceIndex/ResourceIndexControl.js
index cb286c301..d31d244e2 100644
--- a/src/visualizers/panels/ResourceIndex/ResourceIndexControl.js
+++ b/src/visualizers/panels/ResourceIndex/ResourceIndexControl.js
@@ -1,7 +1,9 @@
 /* globals define */
 define([
+    'js/DragDrop/DragHelper',
     'panels/PipelineIndex/PipelineIndexControl'
 ], function(
+    DragHelper,
     PipelineIndexControl
 ) {
     var ResourceIndexControl = function() {
@@ -50,6 +52,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 resource(s)`;
+                this._client.startTransaction(msg);
+                items.forEach(baseId => this._client.createNode({parentId, baseId}));
+                this._client.completeTransaction();
+            }
+        };
     };
     return ResourceIndexControl;
 });
diff --git a/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js b/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
index 883ba3d0c..dabf3e95e 100644
--- a/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
+++ b/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
@@ -2,6 +2,7 @@
 /*jshint browser: true*/
 
 define([
+    'js/DragDrop/DropTarget',
     'deepforge/Constants',
     'widgets/EasyDAG/AddNodeDialog',
     'deepforge/viz/widgets/Thumbnail',
@@ -15,6 +16,7 @@ define([
     './klay',
     'css!./styles/PipelineEditorWidget.css'
 ], function (
+    DropTarget,
     CONSTANTS,
     AddNodeDialog,
     ThumbnailWidget,
@@ -46,6 +48,8 @@ define([
         this.srcPortToConnectArgs = null;
         this._connForPort = {};
         this._itemsShowingPorts = [];
+        container.addClass(`${WIDGET_CLASS} container`);
+        this._initializeEventHandlers(container);
 
         this.updateExecutions = _.debounce(this._updateExecutions, 50);
         this.initExecs(execCntr);
@@ -60,6 +64,15 @@ define([
     PipelineEditorWidget.prototype.onCreateInitialNode =
         PipelineControl.prototype.onCreateInitialNode;
 
+    PipelineEditorWidget.prototype._initializeEventHandlers = function (container) {
+        
+        DropTarget.makeDroppable(container, {
+            drop: (event, dragInfo) => {
+                this.onBackgroundDrop(event, dragInfo);
+            }
+        });
+    };
+
     PipelineEditorWidget.prototype.getComponentId = function() {
         return 'PipelineEditor';
     };