From 3a96fdeac32ef4513b98aa4ddaeab76c2badb4b1 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sat, 3 Nov 2012 20:21:33 -0400 Subject: [PATCH] added directionality to graphs on Force Directed types --- .../Jit/ForceDirected/metamapFD.js | 54 +++++++++++-- .../javascripts/Jit/RGraph/metamapRG.js | 78 +++++++++---------- 2 files changed, 88 insertions(+), 44 deletions(-) diff --git a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js b/app/assets/javascripts/Jit/ForceDirected/metamapFD.js index 7f868916..3380cd72 100644 --- a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js +++ b/app/assets/javascripts/Jit/ForceDirected/metamapFD.js @@ -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 // init ForceDirected fd = new $jit.ForceDirected({ @@ -94,8 +134,8 @@ function initFD(){ Edge: { overridable: true, color: '#222222', - //type: 'arrow', - lineWidth: 0.5 + type: 'customEdge', + lineWidth: 1 }, //Native canvas text styling Label: { @@ -148,7 +188,8 @@ function initFD(){ adj.setDataset('end', { lineWidth: 0.5, color: '#222222' - }); + }); + adj.setData('showDesc', false, 'current'); }); }); if(!node.selected) { @@ -158,7 +199,8 @@ function initFD(){ adj.setDataset('end', { lineWidth: 3, color: '#FFF' - }); + }); + adj.setData('showDesc', true, 'current'); }); } else { delete node.selected; @@ -214,7 +256,8 @@ function initFD(){ adj.setDataset('end', { lineWidth: 0.4, color: '#222222' - }); + }); + adj.setData('showDesc', false, 'current'); }); }); if(!node.selected) { @@ -225,6 +268,7 @@ function initFD(){ lineWidth: 3, color: '#FFF' }); + adj.setData('showDesc', true, 'current'); }); } else { delete node.selected; diff --git a/app/assets/javascripts/Jit/RGraph/metamapRG.js b/app/assets/javascripts/Jit/RGraph/metamapRG.js index 12ba7870..2d3775a2 100644 --- a/app/assets/javascripts/Jit/RGraph/metamapRG.js +++ b/app/assets/javascripts/Jit/RGraph/metamapRG.js @@ -66,45 +66,45 @@ function initRG(){ } }); //implement an edge type -$jit.RGraph.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); - } - } - } -}); + $jit.RGraph.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 // init RGraph rg = new $jit.RGraph({