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

increased line size. fixed ability to see synapses on Rgraph pages

Browse source
This commit is contained in:
Connor Turland 2012-12-25 22:47:02 -05:00
parent 3a071204f5
commit 475ccad493
5 changed files with 38 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ function graphSettings(type) {
overridable: true, overridable: true,
color: '#222222', color: '#222222',
type: 'customEdge', type: 'customEdge',
lineWidth: 1 lineWidth: 3
}, },
//Native canvas text styling //Native canvas text styling
Label: { Label: {
@ -57,7 +57,7 @@ function graphSettings(type) {
}, },
//Update node positions when dragged //Update node positions when dragged
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
clickDragOnTopicForceDirected(node, eventInfo, e); clickDragOnTopic(node, eventInfo, e);
}, },
onDragEnd: function() { onDragEnd: function() {
if (tempInit && tempNode2 == null) { if (tempInit && tempNode2 == null) {
@ -95,7 +95,7 @@ function graphSettings(type) {
onClick: function (node, eventInfo, e) { onClick: function (node, eventInfo, e) {
//clicking on a node, or clicking on blank part of canvas? //clicking on a node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (node.nodeFrom) {
selectEdgeOnClickHandler(node); selectEdgeOnClickHandler(node);
} }
else if (node && !node.nodeFrom) { else if (node && !node.nodeFrom) {
selectNodeOnClickHandler(node); selectNodeOnClickHandler(node);
@ -130,7 +130,7 @@ function graphSettings(type) {
node.setData('dim', 25, 'current'); node.setData('dim', 25, 'current');
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 0.5, lineWidth: 3,
color: '#222222' color: '#222222'
}); });
adj.setData('showDesc', false, 'current'); adj.setData('showDesc', false, 'current');
@ -209,7 +209,7 @@ function graphSettings(type) {
overridable: true, overridable: true,
color: '#222222', color: '#222222',
type: 'customEdge', type: 'customEdge',
lineWidth: 1 lineWidth: 3
}, },
//Native canvas text styling //Native canvas text styling
Label: { Label: {
@ -235,10 +235,16 @@ function graphSettings(type) {
}, },
//Update node positions when dragged //Update node positions when dragged
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
clickDragOnTopicRGraph(node, eventInfo, e); clickDragOnTopic(node, eventInfo, e);
}, },
onDragEnd: function() { onDragEnd: function() {
if (tempInit && tempNode2 != null) { if (tempInit && tempNode2 == null) {
$('#item_addSynapse').val("true");
$('#new_item').fadeIn('fast');
addMetacode();
$('#item_name').focus();
}
else if (tempInit && tempNode2 != null) {
$('#item_addSynapse').val("false"); $('#item_addSynapse').val("false");
$('#synapse_item1id').val(tempNode.id); $('#synapse_item1id').val(tempNode.id);
$('#synapse_item2id').val(tempNode2.id); $('#synapse_item2id').val(tempNode2.id);
@ -248,12 +254,6 @@ function graphSettings(type) {
tempNode2 = null; tempNode2 = null;
tempInit = false; tempInit = false;
} }
else {
tempNode = null;
tempNode2 = null;
tempInit = false;
Mconsole.plot();
}
}, },
onDragCancel: function() { onDragCancel: function() {
tempNode = null; tempNode = null;
@ -266,11 +266,12 @@ function graphSettings(type) {
$jit.util.event.stop(e); //stop default touchmove event $jit.util.event.stop(e); //stop default touchmove event
this.onDragMove(node, eventInfo, e); this.onDragMove(node, eventInfo, e);
}, },
//Add also a click handler to nodes //Add also a click handler to nodes
onClick: function (node, eventInfo, e) { onClick: function (node, eventInfo, e) {
//clicking on an edge, a node, or clicking on blank part of canvas? //clicking on an edge, a node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (eventInfo.getEdge() != false || node.nodeFrom) {
selectEdgeOnClickHandler(node); if (eventInfo.getEdge() != false) selectEdgeOnClickHandler(eventInfo.getEdge());
else if (node.nodeFrom) selectEdgeOnClickHandler(node);
} }
else if (node && !node.nodeFrom) { else if (node && !node.nodeFrom) {
if (!Mconsole.busy) { if (!Mconsole.busy) {
@ -312,7 +313,7 @@ function graphSettings(type) {
node.setData('dim', 25, 'current'); node.setData('dim', 25, 'current');
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 0.5, lineWidth: 3,
color: '#222222' color: '#222222'
}); });
adj.setData('showDesc', false, 'current'); adj.setData('showDesc', false, 'current');
@ -391,6 +392,7 @@ midPoint.y - vect.y);
var v1 = intermediatePoint.add(normal); var v1 = intermediatePoint.add(normal);
var v2 = intermediatePoint.$add(normal.$scale(-1)); var v2 = intermediatePoint.$add(normal.$scale(-1));
//ctx.strokeStyle = 'black';
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(from.x, from.y); ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y); ctx.lineTo(to.x, to.y);
@ -466,7 +468,7 @@ var nodeSettings = {
} }
//check for edge label in data //check for edge label in data
var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')'; var desc = adj.getData("desc") + ' (' + adj.getData("id") + ')';
var showDesc = adj.getData("showDesc"); var showDesc = adj.getData("showDesc");
if( desc != "" && showDesc ) { if( desc != "" && showDesc ) {
//now adjust the label placement //now adjust the label placement
@ -479,7 +481,7 @@ var nodeSettings = {
} }
}, 'contains' : function(adj, pos) { }, 'contains' : function(adj, pos) {
var from = adj.nodeFrom.pos.getc(true), var from = adj.nodeFrom.pos.getc(true),
to = adj.nodeTo.pos.getc(true); to = adj.nodeTo.pos.getc(true);
return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
} }
} }
@ -509,7 +511,7 @@ function selectNodeOnClickHandler(node) {
n.setData('dim', 25, 'current'); n.setData('dim', 25, 'current');
n.eachAdjacency(function (adj) { n.eachAdjacency(function (adj) {
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 0.5, lineWidth: 3,
color: '#222222' color: '#222222'
}); });
adj.setData('showDesc', false, 'current'); adj.setData('showDesc', false, 'current');
@ -521,7 +523,7 @@ function selectNodeOnClickHandler(node) {
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 3, lineWidth: 4,
color: '#FFF' color: '#FFF'
}); });
adj.setData('showDesc', true, 'current'); adj.setData('showDesc', true, 'current');
@ -548,7 +550,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
var storedTime = canvasDoubleClickHandlerObject.storedTime; var storedTime = canvasDoubleClickHandlerObject.storedTime;
var now = Date.now(); //not compatible with IE8 FYI var now = Date.now(); //not compatible with IE8 FYI
if (now - storedTime < TOLERANCE && (gType == "arranged" || gType == "chaotic")) { if (now - storedTime < TOLERANCE) {
//pop up node creation :) //pop up node creation :)
$('#item_grabItem').val("null"); $('#item_grabItem').val("null");
$('#item_addSynapse').val("false"); $('#item_addSynapse').val("false");
@ -561,9 +563,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
$('#item_name').focus(); $('#item_name').focus();
} else { } else {
canvasDoubleClickHandlerObject.storedTime = now; canvasDoubleClickHandlerObject.storedTime = now;
if (gType != "centered") { $('#new_item').fadeOut('fast');
$('#new_item').fadeOut('fast');
}
$('#new_synapse').fadeOut('fast'); $('#new_synapse').fadeOut('fast');
tempInit = false; tempInit = false;
tempNode = null; tempNode = null;
@ -573,12 +573,11 @@ function canvasDoubleClickHandler(canvasLoc,e) {
}//canvasDoubleClickHandler }//canvasDoubleClickHandler
// ForceDirected Mode: for the creation of new topics and synapses through clicking and draggin with right clicks off of topics // ForceDirected Mode: for the creation of new topics and synapses through clicking and draggin with right clicks off of topics
function clickDragOnTopicForceDirected(node, eventInfo, e) { function clickDragOnTopic(node, eventInfo, e) {
if (node && !node.nodeFrom) { if (node && !node.nodeFrom) {
$('#new_synapse').fadeOut('fast'); $('#new_synapse').fadeOut('fast');
$('#new_item').fadeOut('fast'); $('#new_item').fadeOut('fast');
var pos = eventInfo.getPos(); var pos = eventInfo.getPos();
console.log(e);
// if it's a left click, move the node // if it's a left click, move the node
if (e.button == 0 && !e.altKey ) { if (e.button == 0 && !e.altKey ) {
node.pos.setc(pos.x, pos.y); node.pos.setc(pos.x, pos.y);
@ -595,7 +594,7 @@ function clickDragOnTopicForceDirected(node, eventInfo, e) {
if (temp != false && temp.id != node.id) { // this means a Node has been returned if (temp != false && temp.id != node.id) { // this means a Node has been returned
tempNode2 = temp; tempNode2 = temp;
Mconsole.plot(); Mconsole.plot();
renderMidArrow({ x: tempNode.pos.x, y: tempNode.pos.y }, { x: temp.pos.x, y: temp.pos.y }, 13, false, Mconsole.canvas); renderMidArrow({ x: tempNode.pos.getc().x, y: tempNode.pos.getc().y }, { x: temp.pos.getc().x, y: temp.pos.getc().y }, 13, false, Mconsole.canvas);
// before making the highlighted one bigger, make sure all the others are regular size // before making the highlighted one bigger, make sure all the others are regular size
Mconsole.graph.eachNode(function (n) { Mconsole.graph.eachNode(function (n) {
n.setData('dim', 25, 'current'); n.setData('dim', 25, 'current');
@ -619,53 +618,6 @@ function clickDragOnTopicForceDirected(node, eventInfo, e) {
$('#item_x').val(eventInfo.getPos().x); $('#item_x').val(eventInfo.getPos().x);
$('#item_y').val(eventInfo.getPos().y); $('#item_y').val(eventInfo.getPos().y);
Mconsole.plot(); Mconsole.plot();
renderMidArrow({ x: tempNode.pos.x, y: tempNode.pos.y }, { x: pos.x, y: pos.y }, 13, false, Mconsole.canvas);
Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
}
}
}
}
// RGRAPH MODE: for the creation of synapses through clicking and draggin with right clicks off of topics
function clickDragOnTopicRGraph(node, eventInfo, e) {
if (node && !node.nodeFrom) {
$('#new_synapse').fadeOut('fast');
var pos = eventInfo.getPos();
// if it's a left click, move the node
if (e.button == 0) {
node.pos.setc(pos.x, pos.y);
Mconsole.plot();
}
// if it's a right click, start synapse creation
else if (e.button == 2) {
if (tempInit == false) {
tempNode = node;
tempInit = true;
}
//
temp = eventInfo.getNode();
if (temp != false && temp.id != node.id) { // this means a Node has been returned
tempNode2 = temp;
Mconsole.plot();
renderMidArrow({ x: tempNode.pos.getc().x, y: tempNode.pos.getc().y }, { x: temp.pos.getc().x, y: temp.pos.getc().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) {
tempNode2 = null;
Mconsole.graph.eachNode(function (n) {
n.setData('dim', 25, 'current');
});
var myX = e.x - 110;
var myY = e.y - 30;
document.getElementById('new_synapse').style.left = myX + "px";
document.getElementById('new_synapse').style.top = myY + "px";
Mconsole.plot();
renderMidArrow({ x: tempNode.pos.getc().x, y: tempNode.pos.getc().y }, { x: pos.x, y: pos.y }, 13, false, Mconsole.canvas); renderMidArrow({ x: tempNode.pos.getc().x, y: tempNode.pos.getc().y }, { x: pos.x, y: pos.y }, 13, false, Mconsole.canvas);
Mconsole.fx.plotNode(tempNode, Mconsole.canvas); Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
} }

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

@ -52,14 +52,14 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
sliding1 = true; sliding1 = true;
if (userid != null) { if (userid != null) {
$('.footer .menu').animate({ $('.footer .menu').animate({
height: '243px' height: '252px'
}, 300, function() { }, 300, function() {
sliding1 = false; sliding1 = false;
}); });
} }
else { else {
$('.footer .menu').animate({ $('.footer .menu').animate({
height: '55px' height: '57px'
}, 300, function() { }, 300, function() {
sliding1 = false; sliding1 = false;
}); });

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

@ -26,9 +26,11 @@ if (!$.isEmptyObject(Mconsole.graph.nodes)) {
temp.setData('dim', 40, 'end'); temp.setData('dim', 40, 'end');
if (gType == "centered") { if (gType == "centered") {
temp.setPos(new $jit.Polar(5.54, 347.6), 'current'); var tempPos = new $jit.Complex(x, y);
temp.setPos(new $jit.Polar(5.54, 347.6), 'start'); tempPos = tempPos.toPolar();
temp.setPos(new $jit.Polar(5.54, 347.6), 'end'); temp.setPos(tempPos, 'current');
temp.setPos(tempPos, 'start');
temp.setPos(tempPos, 'end');
} }
else if (gType == "arranged" || gType == "chaotic") { else if (gType == "arranged" || gType == "chaotic") {
temp.setData('xloc',0); temp.setData('xloc',0);
@ -48,7 +50,7 @@ if (!$.isEmptyObject(Mconsole.graph.nodes)) {
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function() { onComplete: function() {
renderMidArrow({ x: tempNode.pos.x, y: tempNode.pos.y }, { x: temp.pos.x, y: temp.pos.y }, 13, false, Mconsole.canvas); renderMidArrow({ x: tempNode.pos.getc().x, y: tempNode.pos.getc().y }, { x: temp.pos.getc().x, y: temp.pos.getc().y }, 13, false, Mconsole.canvas);
Mconsole.fx.plotNode(tempNode, Mconsole.canvas); Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
Mconsole.fx.plotNode(temp, Mconsole.canvas); Mconsole.fx.plotNode(temp, Mconsole.canvas);
tempNode = null; tempNode = null;

1
app/views/items/show.html.erb
View file

@ -32,6 +32,7 @@
</script> </script>
<% if authenticated? %> <% if authenticated? %>
<%= render :partial => 'items/new' %>
<%= render :partial => 'synapses/new' %> <%= render :partial => 'synapses/new' %>
<% end %> <% end %>

4
app/views/layouts/application.html.erb
View file

@ -45,8 +45,8 @@
<li><%= link_to "My Maps", user_maps_url(user) %></li> <li><%= link_to "My Maps", user_maps_url(user) %></li>
<li><%= link_to "Invite", invite_path %></li> <li><%= link_to "Invite", invite_path %></li>
<li><%= link_to "Settings", edit_user_url(user) %></li> <li><%= link_to "Settings", edit_user_url(user) %></li>
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %> <% unless Map.first(:conditions => [ "id = ?", 20]).nil? %>
<li><%= link_to "Feedback", map_path(Map.find(7)) %></li> <li><%= link_to "Feedback", map_path(Map.find(20)) %></li>
<% end %> <% end %>
<li class="last"><%= link_to "Logout", session_path, method: 'delete', id: "Login" %></li> <li class="last"><%= link_to "Logout", session_path, method: 'delete', id: "Login" %></li>
</ul> </ul>