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

added directionality to graphs on Force Directed types

Browse source
This commit is contained in:
Connor Turland 2012-11-03 20:21:33 -04:00
parent 1d32749848
commit 3a96fdeac3
2 changed files with 88 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/javascripts/Jit/ForceDirected/metamapFD.js
View file

@ -65,6 +65,46 @@ function initFD(){
} }
} }
}); });
//implement an edge type
$jit.ForceDirected.Plot.EdgeTypes.implement({
'customEdge': {
'render': function(adj, canvas) {
//get nodes cartesian coordinates
var pos = adj.nodeFrom.pos.getc(true);
var posChild = adj.nodeTo.pos.getc(true);
var direction = adj.getData("category");
//label placement on edges
//plot arrow edge
if (direction == "none") {
this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
}
else if (direction == "both") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
}
else if (direction == "from-to") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
}
else if (direction == "to-from") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
}
//check for edge label in data
var desc = adj.getData("desc");
var showDesc = adj.getData("showDesc");
if( desc != "" && showDesc ) {
//now adjust the label placement
var radius = canvas.getSize();
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
var y = parseInt((pos.y + posChild.y) /2);
canvas.getCtx().fillStyle = '#000';
canvas.getCtx().font = 'bold 14px arial';
canvas.getCtx().fillText(desc, x, y);
}
}
}
});
// end // end
// init ForceDirected // init ForceDirected
fd = new $jit.ForceDirected({ fd = new $jit.ForceDirected({
@ -94,8 +134,8 @@ function initFD(){
Edge: { Edge: {
overridable: true, overridable: true,
color: '#222222', color: '#222222',
//type: 'arrow', type: 'customEdge',
lineWidth: 0.5 lineWidth: 1
}, },
//Native canvas text styling //Native canvas text styling
Label: { Label: {
@ -148,7 +188,8 @@ function initFD(){
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 0.5, lineWidth: 0.5,
color: '#222222' color: '#222222'
}); });
adj.setData('showDesc', false, 'current');
}); });
}); });
if(!node.selected) { if(!node.selected) {
@ -158,7 +199,8 @@ function initFD(){
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 3, lineWidth: 3,
color: '#FFF' color: '#FFF'
}); });
adj.setData('showDesc', true, 'current');
}); });
} else { } else {
delete node.selected; delete node.selected;
@ -214,7 +256,8 @@ function initFD(){
adj.setDataset('end', { adj.setDataset('end', {
lineWidth: 0.4, lineWidth: 0.4,
color: '#222222' color: '#222222'
}); });
adj.setData('showDesc', false, 'current');
}); });
}); });
if(!node.selected) { if(!node.selected) {
@ -225,6 +268,7 @@ function initFD(){
lineWidth: 3, lineWidth: 3,
color: '#FFF' color: '#FFF'
}); });
adj.setData('showDesc', true, 'current');
}); });
} else { } else {
delete node.selected; delete node.selected;

78
app/assets/javascripts/Jit/RGraph/metamapRG.js
View file

@ -66,45 +66,45 @@ function initRG(){
} }
}); });
//implement an edge type //implement an edge type
$jit.RGraph.Plot.EdgeTypes.implement({ $jit.RGraph.Plot.EdgeTypes.implement({
'customEdge': { 'customEdge': {
'render': function(adj, canvas) { 'render': function(adj, canvas) {
//get nodes cartesian coordinates //get nodes cartesian coordinates
var pos = adj.nodeFrom.pos.getc(true); var pos = adj.nodeFrom.pos.getc(true);
var posChild = adj.nodeTo.pos.getc(true); var posChild = adj.nodeTo.pos.getc(true);
var direction = adj.getData("category"); var direction = adj.getData("category");
//label placement on edges //label placement on edges
//plot arrow edge //plot arrow edge
if (direction == "none") { if (direction == "none") {
this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas); this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
} }
else if (direction == "both") { else if (direction == "both") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas); this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas); this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
} }
else if (direction == "from-to") { else if (direction == "from-to") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas); this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
} }
else if (direction == "to-from") { else if (direction == "to-from") {
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas); this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
} }
//check for edge label in data //check for edge label in data
var desc = adj.getData("desc"); var desc = adj.getData("desc");
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
var radius = canvas.getSize(); var radius = canvas.getSize();
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2); var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
var y = parseInt((pos.y + posChild.y) /2); var y = parseInt((pos.y + posChild.y) /2);
canvas.getCtx().fillStyle = '#000'; canvas.getCtx().fillStyle = '#000';
canvas.getCtx().font = 'bold 14px arial'; canvas.getCtx().font = 'bold 14px arial';
canvas.getCtx().fillText(desc, x, y); canvas.getCtx().fillText(desc, x, y);
} }
} }
} }
}); });
// end // end
// init RGraph // init RGraph
rg = new $jit.RGraph({ rg = new $jit.RGraph({