got basic right click on node and drag to create synapse working!

app/assets/javascripts/Jit/graphsettings.js

@@ -58,6 +58,7 @@ function graphSettings(type) {
             //Update node positions when dragged
             onDragMove: function (node, eventInfo, e) {
 			   if (node && !node.nodeFrom) {
+				   $('#new_synapse').fadeOut('fast');
 				   $('#new_item').fadeOut('fast');
 				   var pos = eventInfo.getPos();
 				   // if it's a left click, move the node
@@ -78,15 +79,17 @@ function graphSettings(type) {
 						  tempNode2 = temp;
 						  Mconsole.plot();
 						  renderMidArrow({ x: tempNode.pos.x, y: tempNode.pos.y }, { x: temp.pos.x, y: temp.pos.y }, 13, false, Mconsole.canvas);
+						  // before making the highlighted one bigger, make sure all the others are regular size
+						  Mconsole.graph.eachNode(function (n) {
+							  n.setData('dim', 25, 'current');
+						  });
 						  temp.setData('dim',35,'current');
 						  Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
 						  Mconsole.fx.plotNode(temp, Mconsole.canvas);
 					   } else if (!temp) {
-						   if (tempNode2 != null) {
+						   Mconsole.graph.eachNode(function (n) {
-							   tempNode2.setData('dim',25,'current');
+							  n.setData('dim', 25, 'current');
-							   Mconsole.fx.plotNode(tempNode2, Mconsole.canvas);
+						   });
-							   tempNode2 = null;
-						   }
 						   //pop up node creation :)
 						  $('#item_grabItem').val("null");
 						  var myX = e.x - 110;
@@ -106,13 +109,14 @@ function graphSettings(type) {
             },
 			onDragEnd: function() {
 				if (tempInit && tempNode2 == null) {
-					tempNode = null;
+					$('#item_addSynapse').val("true");
-					tempNode2 = null;
-					tempInit = false;
 					$('#new_item').fadeIn('fast');
 					$('#item_name').focus();
 				}
 				else if (tempInit && tempNode2 != null) {
+					$('#item_addSynapse').val("false");
+					$('#synapse_item1id').val(tempNode.id);
+        			$('#synapse_item2id').val(tempNode2.id);
 					$('#new_synapse').fadeIn('fast');
 					$('#synapse_desc').focus();
 					tempNode = null;
@@ -125,6 +129,9 @@ function graphSettings(type) {
 					tempNode = null;
 					tempNode2 = null;
 					tempInit = false;
+					$('#item_addSynapse').val("false");
+					$('#item_item1id').val(0);
+					$('#item_item2id').val(0);
 					Mconsole.plot();
 				}
 			},
@@ -517,6 +524,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
    if (now - storedTime < TOLERANCE) {
       //pop up node creation :)
 	  $('#item_grabItem').val("null");
+	  $('#item_addSynapse').val("false");
       document.getElementById('new_item').style.left = e.x + "px";
       document.getElementById('new_item').style.top = e.y + "px";
       $('#item_x').val(canvasLoc.x);
@@ -526,5 +534,10 @@ function canvasDoubleClickHandler(canvasLoc,e) {
    } else {
       canvasDoubleClickHandlerObject.storedTime = now;
 	  $('#new_item').fadeOut('fast');
+	  $('#new_synapse').fadeOut('fast');
+	  tempInit = false;
+	  tempNode = null;
+	  tempNode2 = null;
+	  Mconsole.plot();
    }
 }//canvasDoubleClickHandler

app/assets/javascripts/Jit/loadgraphs.js

@@ -1,5 +1,3 @@
-var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, gType, tempNode, tempInit = false, tempNode2 = null;
-
 (function() {
   var ua = navigator.userAgent,
       iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),

app/assets/javascripts/application.js

@@ -19,9 +19,11 @@
 // other options are 'graph'
 var viewMode = "list";
 
+var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, gType, tempNode = null, tempInit = false, tempNode2 = null;
+
  $(document).ready(function() {
  
-    $('#new_item').bind('contextmenu', function(e){
+    $('#new_item, #new_synapse').bind('contextmenu', function(e){
 		return false;
 	});
 	

app/controllers/items_controller.rb

@@ -66,11 +66,10 @@ class ItemsController < ApplicationController
       @item.save
     end
 
-    # pass the variables for synapse creation onto the javascript file
+    # pass on to the item create js whether it's being created with a synapse
-    if params[:item][:addSynapse] != "false"
+    @synapse = "false"
-      @synapse = Hash.new()
+    if params[:item][:addSynapse] == "true"
-      @synapse['item1id'] = params[:item][:item1id]
+      @synapse = "true" 
-      @synapse['item2id'] = params[:item][:item2id]
     end		
 
     # also create an object to return the position to the canvas

app/controllers/synapses_controller.rb

@@ -54,12 +54,15 @@ class SynapsesController < ApplicationController
   def create
 	
     @user = current_user
-	@synapse = Synapse.new()
+    @synapse = Synapse.new()
-	@synapse.desc = params[:synapse][:desc]
+    @synapse.desc = params[:synapse][:desc]
-	@synapse.item1 = Item.find(params[:synapse][:item1id])
+    @synapse.item1 = Item.find(params[:synapse][:item1id])
-	@synapse.item2 = Item.find(params[:synapse][:item2id])
+    @synapse.item2 = Item.find(params[:synapse][:item2id])
-  @synapse.user = @user	
+    @synapse.permission = "commons"
-	@synapse.save   
+    @synapse.category = "from-to"
+    @synapse.weight = 5
+    @synapse.user = @user	
+    @synapse.save   
 	
 	if params[:synapse][:map]
 		@mapping = Mapping.new()

app/views/items/_new.html.erb

@@ -5,7 +5,5 @@
   <%= form.hidden_field :y, :value => 0 %>
   <%= form.hidden_field :grabItem, :value => "null" %>
   <%= form.hidden_field :addSynapse, :value => false %>
-  <%= form.hidden_field :item1id, :value => 0 %>
-  <%= form.hidden_field :item2id, :value => 0 %>
 <% end %>
 </div>

app/views/items/create.js.erb

@@ -3,51 +3,62 @@ $('#item_name').data().autocomplete.term = null;
 $('.ui-autocomplete').children().remove();
 $('.ui-autocomplete').css('display','none');
 $('#item_name').attr('value','');
+$('#item_grabItem').attr('value','null');
+$('#item_addSynapse').attr('value','false');
 
-if(viewMode == "graph") {
+
-	  var newnode = <%= @item.self_as_json.html_safe %>;
+
-      var x = <%= @position['x'] %>;
+var newnode = <%= @item.self_as_json.html_safe %>;
-      var y = <%= @position['y'] %>;
+var x = <%= @position['x'] %>;
-      
+var y = <%= @position['y'] %>;
-		
+  
-		if (Mconsole != null) {
+
-      Mconsole.graph.addNode(newnode);
+if (Mconsole != null) {
-      
+  Mconsole.graph.addNode(newnode);
-      // set the animation for everything back to normal
+  
-      Mconsole.graph.eachNode( function (n) {
+  // set the animation for everything back to normal
-        n.setData('dim', 25, 'start');
+  Mconsole.graph.eachNode( function (n) {
-			  n.setData('dim', 25, 'end');
+    n.setData('dim', 25, 'start');
-      });
+    n.setData('dim', 25, 'end');
-      var temp = Mconsole.graph.getNode('<%= @item.id %>');
+  });
-			temp.setData('dim', 1, 'start');
+  var temp = Mconsole.graph.getNode('<%= @item.id %>');
-			temp.setData('dim', 40, 'end');
+  temp.setData('dim', 1, 'start');
-      
+  temp.setData('dim', 40, 'end');
-      if (gType == "centered") {
+  
-        temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
+  if (gType == "centered") {
-			  temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
+    temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
-			  temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
+    temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
-      }
+    temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
-      else if (gType == "arranged" || gType == "chaotic") {
+  }
-        temp.setData('xloc',0);
+  else if (gType == "arranged" || gType == "chaotic") {
-        temp.setData('yloc',0);
+    temp.setData('xloc',0);
-        temp.setData('mappingid', '<%= @mapping.id %>');
+    temp.setData('yloc',0);
-        temp.setPos(new $jit.Complex(x, y), 'current');
+    temp.setData('mappingid', '<%= @mapping.id %>');
-        temp.setPos(new $jit.Complex(x, y), 'start');
+    temp.setPos(new $jit.Complex(x, y), 'current');
-        temp.setPos(new $jit.Complex(x, y), 'end');s
+    temp.setPos(new $jit.Complex(x, y), 'start');
-      }
+    temp.setPos(new $jit.Complex(x, y), 'end');
-      
+  }
-			Mconsole.fx.plotNode(temp, Mconsole.canvas);
+  
-			Mconsole.fx.animate({  
+  Mconsole.fx.plotNode(temp, Mconsole.canvas);
-				modes: ['node-property:dim'],  
+  Mconsole.fx.animate({  
-				duration: 400  
+    modes: ['node-property:dim'],  
-			  });
+    duration: 400  
-		 }
+    });
-		 else {
+  
-			json = newnode;
+  if ( '<%= @synapse %>' == "true" ) {
-			initialize("chaotic");
+    renderMidArrow({ x: tempNode.pos.x, y: tempNode.pos.y }, { x: temp.pos.x, y: temp.pos.y }, 13, false, Mconsole.canvas);
-		 }
+		Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
+    Mconsole.fx.plotNode(temp, Mconsole.canvas);
+    $('#synapse_item1id').val(tempNode.id);
+    $('#synapse_item2id').val(temp.id);
+    $('#new_synapse').fadeIn('fast');
+    $('#synapse_desc').focus();
+		tempNode = null;
+		tempNode2 = null;
+		tempInit = false;
+  }
+  
+} else {
+  json = newnode;
+  initialize("chaotic");
 }
-else {
-	$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
-	$(".scroll").mCustomScrollbar(); 
-}

app/views/synapses/_new.html.erb

@@ -1,7 +1,6 @@
 <div class="anypage">
 	<%= form_for Synapse.new, url: user_synapses_url(user), remote: true do |form| %>
-	  <button id="closenewsynapse" onclick="$('#new_synapse').fadeOut('fast'); $('#new_synapse')[0].reset(); return false;">close</button>
+    <%= form.autocomplete_field :desc, autocomplete_synapse_desc_synapses_path, :placeholder => "Describe the connection..." %>
-	  <%= form.autocomplete_field :desc, autocomplete_synapse_desc_synapses_path, :placeholder => "Describe the connection..." %>
     <%= form.hidden_field :item1id, :value => 0 %>
     <%= form.hidden_field :item2id, :value => 0 %>
 	<% end %>

app/views/synapses/create.js.erb

@@ -1,41 +1,41 @@
 $('#new_synapse').fadeOut('fast');
-$('#new_synapse')[0].reset();
+$('#synapse_desc').attr('value','');
+$('#synapse_item1id').attr('value','0');
+$('#synapse_item2id').attr('value','0');
 
-if (viewMode == "graph") {
+var temp1, temp2, temp;	
-		
-		var temp1, temp2, temp;	
 		 
-		if ( Mconsole != null) {
+if ( Mconsole != null) {
-				temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
+    temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
-				temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
+    temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
-				Mconsole.graph.addAdjacence(temp1, temp2, {});
+    Mconsole.graph.addAdjacence(temp1, temp2, {});
-				temp = Mconsole.graph.getAdjacence(temp1.id, temp2.id);
+    temp = Mconsole.graph.getAdjacence(temp1.id, temp2.id);
-				temp.setDataset('start', {  
+    console.log(temp);
-					lineWidth: 0.4,  
+    temp.setDataset('start', {  
-					color: '#d1d1d1'  
+      lineWidth: 0.4,  
-				  });
+      color: '#d1d1d1'  
-				temp.setDataset('end', {
+      });
-					lineWidth: 3,  
+    temp.setDataset('end', {
-					color: '#36acfb'
+      lineWidth: 3,  
-				});
+      color: '#36acfb'
-				var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
+    });
-				temp.setDataset('current', {  
+    var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
-					desc: '<%= @synapse.desc %>',  
+    temp.setDataset('current', {  
-					showDesc: false,
+      desc: '<%= @synapse.desc %>',  
-					category: '<%= @synapse.category %>',
+      showDesc: true,
-				  id: '<%= @synapse.id %>',
+      category: '<%= @synapse.category %>',
-					userid: '<%= @synapse.user.id %>',
+      id: '<%= @synapse.id %>',
-					username: '<%= @synapse.user.name %>'					
+      userid: '<%= @synapse.user.id %>',
-				  });
+      username: '<%= @synapse.user.name %>'					
-				  temp.data.$direction = d;
+      });
-				Mconsole.fx.plotLine(temp, Mconsole.canvas);
+    temp.data.$direction = d;
-				Mconsole.fx.animate({  
+    Mconsole.fx.plotLine(temp, Mconsole.canvas);
-					modes: ['node-property:dim','edge-property:lineWidth:color'],  
+    Mconsole.fx.animate({  
-					duration: 400  
+      modes: ['edge-property:lineWidth:color'],  
-				  });
+      duration: 400  
-		}
+      });
-		else {
+}
-			json = <%= @synapse.selfplusnodes_as_json.html_safe %>
+else {
-			initialize("chaotic");
+  json = <%= @synapse.selfplusnodes_as_json.html_safe %>
-		}
+  initialize("chaotic");
 }