glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Connor Turland 2012-12-20 23:45:44 -05:00
parent 18a7675067
commit 355a6d4d0f
9 changed files with 132 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/assets/javascripts/Jit/graphsettings.js
View file

@ -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) {
tempNode2.setData('dim',25,'current');
Mconsole.fx.plotNode(tempNode2, Mconsole.canvas);
tempNode2 = null;
}
Mconsole.graph.eachNode(function (n) {
n.setData('dim', 25, 'current');
});
//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;
tempNode2 = null;
tempInit = false;
$('#item_addSynapse').val("true");
$('#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

2
app/assets/javascripts/Jit/loadgraphs.js
View file

@ -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),

4
app/assets/javascripts/application.js
View file

@ -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;
});

9
app/controllers/items_controller.rb
View file

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

15
app/controllers/synapses_controller.rb
View file

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

2
app/views/items/_new.html.erb
View file

@ -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>

103
app/views/items/create.js.erb
View file

@ -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 y = <%= @position['y'] %>;
if (Mconsole != null) {
Mconsole.graph.addNode(newnode);
// set the animation for everything back to normal
Mconsole.graph.eachNode( function (n) {
n.setData('dim', 25, 'start');
n.setData('dim', 25, 'end');
});
var temp = Mconsole.graph.getNode('<%= @item.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
if (gType == "centered") {
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
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);
temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping.id %>');
temp.setPos(new $jit.Complex(x, y), 'current');
temp.setPos(new $jit.Complex(x, y), 'start');
temp.setPos(new $jit.Complex(x, y), 'end');s
}
Mconsole.fx.plotNode(temp, Mconsole.canvas);
Mconsole.fx.animate({
modes: ['node-property:dim'],
duration: 400
});
}
else {
json = newnode;
initialize("chaotic");
}
var newnode = <%= @item.self_as_json.html_safe %>;
var x = <%= @position['x'] %>;
var y = <%= @position['y'] %>;
if (Mconsole != null) {
Mconsole.graph.addNode(newnode);
// set the animation for everything back to normal
Mconsole.graph.eachNode( function (n) {
n.setData('dim', 25, 'start');
n.setData('dim', 25, 'end');
});
var temp = Mconsole.graph.getNode('<%= @item.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
if (gType == "centered") {
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
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);
temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping.id %>');
temp.setPos(new $jit.Complex(x, y), 'current');
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({
modes: ['node-property:dim'],
duration: 400
});
if ( '<%= @synapse %>' == "true" ) {
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();
}

3
app/views/synapses/_new.html.erb
View file

@ -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 %>

74
app/views/synapses/create.js.erb
View file

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