Add support for drag and drop for the components.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

3 files changed, 61 insertions, 20 deletions

diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index ede71383..bf22aed2 100644
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -24,6 +24,10 @@ exports.DragDropMediator = Montage.create(Component, {
         writable: true
     },
 
+    dropDelegate: {
+        value: null
+    },
+
     deserializedFromTemplate: {
         value: function() {
             this.eventManager.addEventListener("appLoaded", this, false);
@@ -69,13 +73,14 @@ exports.DragDropMediator = Montage.create(Component, {
 
             xferString = evt.dataTransfer.getData("text/plain");
             if(xferString) {
-
-                if(xferString.lastIndexOf("-Component") !== -1) {
-                    component = xferString.substring(0, xferString.lastIndexOf("-Component"));
-                    NJevent( "executeAddComponent", { "component": component, "dropX": this.baseX, "dropY": this.baseY });
-//                    ComponentPanelModule.ComponentsPanelBase.addComponentToStage(componentStr.substring(0, compInd), this.baseX, this.baseY);
+                // If the drop is a component, call the delegate with the top,left coordinates
+                if(xferString.indexOf("componentDrop") > -1) {
+                    if(this.dropDelegate && typeof this.dropDelegate === 'object') {
+                        this.dropDelegate.handleComponentDrop(this.baseX, this.baseY);
+                        return;
+                    }
                 }
-                return;
+
             }
 
             // Verify that browser supports FileReader API.
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index c8625159..6daa75de 100644
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -276,6 +276,7 @@
                     "stage":                {"@": "stage1"},
                     "settings":             {"@": "settings1"},
                     "elementMediator":      {"@": "elementMediator"},
+                    "dragDropMediator":     {"@": "dragDropMediator"},
                     "undocontroller":       {"@": "undocontroller1"},
                     "selectionController":  {"@": "selectionController1"},
                     "documentController":   {"@": "documentController1"},
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 953c0484..7e5a76ee 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -53,12 +53,27 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: 0
     },
 
+    dragComponent: {
+        value: null
+    },
+
+    dragPosition: {
+        value: null
+    },
+
     centerStage: {
         value: null
     },
 
+
+    /*********************************************************************
+     * Components Tree and Model Creation
+     *********************************************************************/
+
     didCreate: {
         value: function() {
+            // Setup the drop delegate
+            this.application.ninja.dragDropMediator.dropDelegate = this;
             // Loop through the component and load the JSON data for them
             this._loadComponents();
         }
@@ -138,36 +153,56 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
-    applySelection: {
-        value: function(selection) {
-            //console.log(selection);
-            //console.log(this.componentsData[selection.component]);
-            this.addComponentToStage(this.componentsData[selection.component]);
+    /*********************************************************************
+     * Handle Tree / Drag-Drop events
+     *********************************************************************/
+
+    handleDblclick: {
+        value: function(obj) {
+            this.addComponentToStage(this.componentsData[obj.component]);
         }
     },
 
-    // This method will be used once we handle drag and drop
-    handleExecuteAddComponent: {
-        value: function(evt) {
+    handleDragStart: {
+        value: function(obj, event) {
+            this.dragComponent = obj;
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', 'componentDrop');
+        }
+    },
+
+    handleComponentDrop: {
+        value: function(left, top) {
+            this.addComponentToStage(this.componentsData[this.dragComponent.component], [left, top]);
         }
     },
 
+
     /**
      * Send a request to add a component to the user document and waits for a callback to continue
      */
     addComponentToStage: {
-        value: function(component) {
-            var that = this;
-            var element = this.makeComponent(component.component);
+        value: function(component, position) {
+            var that, element;
+
+            // Check for position. If none then center on the stage
+            if(position) {
+                this.dragPosition = position;
+            } else {
+                this.dragPosition = this.getStageCenter();
+
+            }
+            that = this;
+            element = this.makeComponent(component.component);
 
             this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
 
-                var pos = that.getStageCenter();
+                //var pos = that.getStageCenter();
 
                 var styles = {
                     'position': 'absolute',
-                    'left'      : pos[0] + 'px',
-                    'top'       : pos[1] + 'px',
+                    'left'      : that.dragPosition[0] + 'px',
+                    'top'       : that.dragPosition[1] + 'px',
                     '-webkit-transform-style' : 'preserve-3d',
                     '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
                 };