Added dragndrop for pipeline editor, resource index. (#1177)

* added dragndrop for certain visualizers. * WIP fixed indentation and commit msgs
deepforge-dev · Aug 17, 2018 · 37a4edc · 37a4edc
1 parent 1ccab4f
commit 37a4edc
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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';
     };