Skip to content

Commit

Permalink
Added a new node property, 'shape', that allows to draw square nodes …
Browse files Browse the repository at this point in the history
…by setting it to 'square'
  • Loading branch information
Raibaz committed May 18, 2012
1 parent 28e210b commit 9b012de
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 17 deletions.
1 change: 1 addition & 0 deletions src/core/graph.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ function Graph() {
break;
case 'color':
case 'label':
case 'shape':
node[k] = (copy[k] || '').toString();
break;
default:
Expand Down
70 changes: 53 additions & 17 deletions src/core/plotter.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
// NODES:
// ------
defaultNodeColor: '#aaa',
defaultNodeShape: 'circle',
// HOVER:
// Node hover color:
// - 'node'
Expand Down Expand Up @@ -278,16 +279,28 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
*/
function drawNode(node) {
var size = Math.round(node['displaySize'] * 10) / 10;
var shape = node['shape'];
if(!shape) {
shape = self.p.defaultNodeShape;
}
var ctx = nodesCtx;

ctx.fillStyle = node['color'];
ctx.beginPath();
ctx.arc(node['displayX'],
switch(shape) {
case 'square':
ctx.fillRect(node['displayX'],
node['displayY'],
size,
0,
Math.PI * 2,
true);
size * 2,
size * 2);
break;
default:
ctx.arc(node['displayX'],
node['displayY'],
size,
0,
Math.PI * 2,
true);

ctx.closePath();
ctx.fill();
Expand Down Expand Up @@ -389,6 +402,11 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
function drawHoverNode(node) {
var ctx = hoverCtx;

var nodeShape = node['shape'];
if(!nodeShape) {
nodeShape = self.p.defaultNodeShape;
}

var fontSize = self.p.labelSize == 'fixed' ?
self.p.defaultLabelSize :
self.p.labelSizeRatio * node['displaySize'];
Expand Down Expand Up @@ -434,12 +452,21 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
ctx.fillStyle = self.p.nodeBorderColor == 'node' ?
(node['color'] || self.p.defaultNodeColor) :
self.p.defaultNodeBorderColor;
ctx.arc(Math.round(node['displayX']),
Math.round(node['displayY']),
node['displaySize'] + self.p.borderSize,
0,
Math.PI * 2,
true);
switch(nodeShape) {
case 'square':
ctx.strokeRect(node['displayX'],
node['displayY'],
(node['displaySize'] * 2) + self.p.borderSize,
(node['displaySize'] * 2) + self.p.borderSize);
break;
default:
ctx.arc(Math.round(node['displayX']),
Math.round(node['displayY']),
node['displaySize'] + self.p.borderSize,
0,
Math.PI * 2,
true);
}
ctx.closePath();
ctx.fill();

Expand All @@ -448,12 +475,21 @@ function Plotter(nodesCtx, edgesCtx, labelsCtx, hoverCtx, graph, w, h) {
ctx.fillStyle = self.p.nodeHoverColor == 'node' ?
(node['color'] || self.p.defaultNodeColor) :
self.p.defaultNodeHoverColor;
ctx.arc(Math.round(node['displayX']),
Math.round(node['displayY']),
node['displaySize'],
0,
Math.PI * 2,
true);
switch(nodeShape) {
case 'square':
ctx.fillRect(node['displayX'],
node['displayY'],
node['displaySize'] * 2,
node['displaySize'] * 2);
break;
default:
ctx.arc(Math.round(node['displayX']),
Math.round(node['displayY']),
node['displaySize'],
0,
Math.PI * 2,
true);
}

ctx.closePath();
ctx.fill();
Expand Down

1 comment on commit 9b012de

@fabiojpoli
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How to change from circle to square? My node property shape is square, but render circle :(

Please sign in to comment.