From 5219d08cb8fe15f755819a6a38e0d9fe64aa609a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 31 Dec 2013 21:32:50 +0000
Subject: [PATCH] Support drag/drop of flow json onto the canvas Closes #43

---
 public/index.html  |  1 +
 public/red/main.js | 24 +++++++++++++++++++++++-
 public/style.css   | 17 +++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 49fcc0d08..8fafa6550 100644
--- a/public/index.html
+++ b/public/index.html
@@ -145,6 +145,7 @@
 
 
 <div id="notifications"></div>
+<div id="dropTarget"><div>Drop the flow here</div></div>
 
 <div id="dialog" class="hide"><form id="dialog-form" class="form-horizontal"></form></div>
 <div id="node-config-dialog" class="hide"><form id="dialog-config-form" class="form-horizontal"></form><div class="form-tips" id="node-config-dialog-user-count"></div></div>
diff --git a/public/red/main.js b/public/red/main.js
index fb1c98ccc..074ed6bb9 100644
--- a/public/red/main.js
+++ b/public/red/main.js
@@ -16,7 +16,29 @@
 var RED = function() {
 
     $('#btn-keyboard-shortcuts').click(function(){showHelp();});
-
+    
+    
+    $('#chart').on("dragenter",function(event) {
+        if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+            $("#dropTarget").css({display:'table'});
+        }
+    });
+    
+    $('#dropTarget').on("dragover",function(event) {
+        if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+            event.preventDefault();
+        }
+    })
+    .on("dragleave",function(event) {
+        $("#dropTarget").hide();
+    })
+    .on("drop",function(event) {
+        var data = event.originalEvent.dataTransfer.getData("text/plain");
+        RED.view.importNodes(data);
+        $("#dropTarget").hide();
+    });
+    
+        
     function save(force) {
         if (RED.view.dirty()) {
 
diff --git a/public/style.css b/public/style.css
index 36802e0c3..6ea6f9616 100644
--- a/public/style.css
+++ b/public/style.css
@@ -19,6 +19,23 @@ body {
   padding-top: 100px;
   background: url("pw_maze_white.png");
 }
+#dropTarget {
+    position: absolute;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+    background: rgba(100,100,100,0.5);
+    display:table;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+#dropTarget div {
+    display: table-cell; 
+    vertical-align: middle;
+    text-align: center;
+    font-size: 40px;
+    color: #fff;
+}
 a.brand {
         line-height: 16px;
 }