Browse Source

Changed color options to an object with properties for border, background, and highlight color.

css_transitions
josdejong 11 years ago
parent
commit
c099dcb9af
10 changed files with 377 additions and 218 deletions
  1. +97
    -33
      docs/graph.html
  2. +1
    -1
      examples/graph/04_shapes.html
  3. +48
    -39
      examples/graph/15_custom_style.html
  4. +2
    -4
      examples/graph/20_dot_language_playground.html
  5. +43
    -35
      src/graph/Graph.js
  6. +14
    -13
      src/graph/Groups.js
  7. +49
    -14
      src/graph/Node.js
  8. +4
    -2
      src/graph/dotparser.js
  9. +114
    -72
      vis.js
  10. +5
    -5
      vis.min.js

+ 97
- 33
docs/graph.html View File

@ -236,19 +236,47 @@ var nodes = [
</tr> </tr>
<tr> <tr>
<td>backgroundColor</td>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the node.</td>
</tr>
<tr>
<td>color.background</td>
<td>String</td> <td>String</td>
<td>"#97C2FC"</td>
<td>no</td>
<td>Background color for the node.</td> <td>Background color for the node.</td>
</tr> </tr>
<tr> <tr>
<td>borderColor</td>
<td>color.border</td>
<td>String</td> <td>String</td>
<td>"#2B7CE9"</td>
<td>no</td>
<td>Border color for the node.</td> <td>Border color for the node.</td>
</tr> </tr>
<tr>
<td>color.highlight</td>
<td>String | Object</td>
<td>no</td>
<td>Color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.background</td>
<td>String</td>
<td>no</td>
<td>Background color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.border</td>
<td>String</td>
<td>no</td>
<td>Border color of the node when selected.</td>
</tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>Number | String</td> <td>Number | String</td>
@ -261,31 +289,24 @@ var nodes = [
<tr> <tr>
<td>fontColor</td> <td>fontColor</td>
<td>String</td> <td>String</td>
<td>"black"</td>
<td>no</td>
<td>Font color for label in the node.</td> <td>Font color for label in the node.</td>
</tr> </tr>
<tr> <tr>
<td>fontFace</td> <td>fontFace</td>
<td>String</td> <td>String</td>
<td>"sans"</td>
<td>no</td>
<td>Font face for label in the node, for example "verdana" or "arial".</td> <td>Font face for label in the node, for example "verdana" or "arial".</td>
</tr> </tr>
<tr> <tr>
<td>fontSize</td> <td>fontSize</td>
<td>Number</td> <td>Number</td>
<td>14</td>
<td>no</td>
<td>Font size in pixels for label in the node.</td> <td>Font size in pixels for label in the node.</td>
</tr> </tr>
<tr>
<td>highlightColor</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Background color of the node when selected.</td>
</tr>
<tr> <tr>
<td>id</td> <td>id</td>
<td>Number | String</td> <td>Number | String</td>
@ -463,7 +484,7 @@ var edges = [
<tr> <tr>
<td>fontColor</td> <td>fontColor</td>
<td>String</td> <td>String</td>
<td>"black"</td>
<td>no</td>
<td>Font color for the text label of the edge. <td>Font color for the text label of the edge.
Only applicable when property <code>label</code> is defined.</td> Only applicable when property <code>label</code> is defined.</td>
</tr> </tr>
@ -471,7 +492,7 @@ var edges = [
<tr> <tr>
<td>fontFace</td> <td>fontFace</td>
<td>String</td> <td>String</td>
<td>"sans"</td>
<td>no</td>
<td>Font face for the text label of the edge, <td>Font face for the text label of the edge,
for example "verdana" or "arial". for example "verdana" or "arial".
Only applicable when property <code>label</code> is defined.</td> Only applicable when property <code>label</code> is defined.</td>
@ -480,7 +501,7 @@ var edges = [
<tr> <tr>
<td>fontSize</td> <td>fontSize</td>
<td>Number</td> <td>Number</td>
<td>14</td>
<td>no</td>
<td>Font size in pixels for the text label of the edge. <td>Font size in pixels for the text label of the edge.
Only applicable when property <code>label</code> is defined.</td> Only applicable when property <code>label</code> is defined.</td>
</tr> </tr>
@ -714,23 +735,42 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>nodes.borderColor</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Default border color of the nodes</td>
<td>nodes.color</td>
<td>String | Object</td>
<td>Object</td>
<td>Default color of the nodes. When color is a string, the color is applied
to both background as well as the border of the node.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.backgroundColor</td>
<td>nodes.color.background</td>
<td>String</td> <td>String</td>
<td>"#97C2FC"</td> <td>"#97C2FC"</td>
<td>Default background color of the nodes</td> <td>Default background color of the nodes</td>
</tr> </tr>
<tr> <tr>
<td>nodes.highlightColor</td>
<td>nodes.color.border</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Default border color of the nodes</td>
</tr>
<tr>
<td>nodes.color.highlight</td>
<td>String | Object</td>
<td>Object</td>
<td>Default color of the node when the node is selected. Applied to
both border and background of the node.</td>
</tr>
<tr>
<td>nodes.color.highlight.background</td>
<td>String</td> <td>String</td>
<td>"#D2E5FF"</td> <td>"#D2E5FF"</td>
<td>Default background color of the node when the node is selected.</td>
<td>Default background color of the node when selected.</td>
</tr>
<tr>
<td>nodes.color.highlight.border</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Default border color of the node when selected.</td>
</tr> </tr>
<tr> <tr>
@ -852,11 +892,16 @@ var options = {
groups: { groups: {
mygroup: { mygroup: {
shape: 'circle', shape: 'circle',
borderColor: 'black',
backgroundColor: 'white',
color: {
border: 'black',
background: 'white',
highlight: {
border: 'yellow',
background: 'orange'
}
}
fontColor: 'red', fontColor: 'red',
fontSize: 18,
highlightColor: 'yellow'
fontSize: 18
} }
// add more groups here // add more groups here
} }
@ -880,23 +925,42 @@ var nodes = [
</tr> </tr>
<tr> <tr>
<td>borderColor</td>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Color of the node</td>
</tr>
<tr>
<td>color.border</td>
<td>String</td> <td>String</td>
<td>"#2B7CE9"</td> <td>"#2B7CE9"</td>
<td>Border color of the node</td> <td>Border color of the node</td>
</tr> </tr>
<tr> <tr>
<td>backgroundColor</td>
<td>color.background</td>
<td>String</td> <td>String</td>
<td>"#97C2FC"</td> <td>"#97C2FC"</td>
<td>Background color of the node</td> <td>Background color of the node</td>
</tr> </tr>
<tr> <tr>
<td>highlightColor</td>
<td>color.highlight</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.background</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Background color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.border</td>
<td>String</td> <td>String</td>
<td>"#D2E5FF"</td> <td>"#D2E5FF"</td>
<td>Background color of the node when the node is selected.</td>
<td>Border color of the node when selected.</td>
</tr> </tr>
<tr> <tr>
<td>image</td> <td>image</td>

+ 1
- 1
examples/graph/04_shapes.html View File

@ -31,7 +31,7 @@
]; ];
var mainId = 5; var mainId = 5;
nodes.push({id: mainId, text: 'shapes\nand\nsizes', shape: 'rect', group: 'group_main'});
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'rect', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star']; var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
var id = 6; var id = 6;
for (var size = 1; size < 4; size++) { for (var size = 1; size < 4; size++) {

+ 48
- 39
examples/graph/15_custom_style.html View File

@ -24,7 +24,7 @@
{id: 1, label: 'black node', group: 'black'}, {id: 1, label: 'black node', group: 'black'},
{id: 2, label: 'black node', group: 'black'}, {id: 2, label: 'black node', group: 'black'},
{id: 3, label: 'black node', group: 'black'}, {id: 3, label: 'black node', group: 'black'},
{id: 4, label: 'red node', group: 'black', backgroundColor: 'red'},
{id: 4, label: 'red node', group: 'black', color: 'red'},
{id: 5, label: 'gray node', group: 'gray'}, {id: 5, label: 'gray node', group: 'gray'},
{id: 6, label: 'gray node', group: 'gray'}, {id: 6, label: 'gray node', group: 'gray'},
{id: 7, label: 'gray node', group: 'gray'}, {id: 7, label: 'gray node', group: 'gray'},
@ -54,50 +54,59 @@
// specify options // specify options
options = { options = {
'width': '600px',
'height': '600px',
'stabilize': false,
'edges': {
'length': 120,
'width': 2,
'style': 'arrow',
'color': 'gray'
width: '600px',
height: '600px',
stabilize: false,
edges: {
length: 120,
width: 2,
style: 'arrow',
color: 'gray'
}, },
'nodes': {
nodes: {
// default for all nodes // default for all nodes
'fontFace': 'times',
'shape': 'circle',
'borderColor': 'orange',
'backgroundColor': 'yellow',
'highlightColor': 'gold'
fontFace: 'times',
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
}, },
'groups': {
'black': {
groups: {
black: {
// defaults for nodes in this group // defaults for nodes in this group
'radius': 15,
'borderColor': 'black',
'backgroundColor': 'black',
'highlightColor': 'black',
'fontColor': 'white',
'fontSize': 18,
'fontFace': 'courier',
'shape': 'rect'
radius: 15,
color: 'black',
fontColor: 'white',
fontSize: 18,
fontFace: 'courier',
shape: 'rect'
}, },
'gray': {
'borderColor': 'black',
'backgroundColor': 'gray',
'highlightColor': 'gray',
'fontSize': 18,
'fontFace': 'arial',
'shape': 'circle'
gray: {
color: {
border: 'black',
background: 'gray',
highlight: {
border: 'black',
background: 'lightgray'
}
},
fontSize: 18,
fontFace: 'arial',
shape: 'circle'
}, },
'white': {
'borderColor': 'black',
'backgroundColor': 'white',
'highlightColor': 'white',
'fontColor': 'red',
'shape': 'image',
'image': 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
white: {
color: {
border: 'black',
background: 'white'
},
fontColor: 'red',
shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
} }
} }
}; };

+ 2
- 4
examples/graph/20_dot_language_playground.html View File

@ -144,10 +144,8 @@ digraph {
D -> E[label=0.2]; D -> E[label=0.2];
F -> F; F -> F;
A [ A [
fontColor=red,
borderColor=red,
backgroundColor=white,
highlightColor=white
fontColor=white,
color=red,
] ]
} }
</textarea> </textarea>

+ 43
- 35
src/graph/Graph.js View File

@ -12,49 +12,57 @@
function Graph (container, data, options) { function Graph (container, data, options) {
// create variables and set default values // create variables and set default values
this.containerElement = container; this.containerElement = container;
this.width = "100%";
this.height = "100%";
this.width = '100%';
this.height = '100%';
this.refreshRate = 50; // milliseconds this.refreshRate = 50; // milliseconds
this.stabilize = true; // stabilize before displaying the graph this.stabilize = true; // stabilize before displaying the graph
this.selectable = true; this.selectable = true;
// set constant values // set constant values
this.constants = { this.constants = {
"nodes": {
"radiusMin": 5,
"radiusMax": 20,
"radius": 5,
"distance": 100, // px
"style": "rect",
"image": undefined,
"widthMin": 16, // px
"widthMax": 64, // px
"fontColor": "black",
"fontSize": 14, // px
//"fontFace": "verdana",
"fontFace": "arial",
"borderColor": "#2B7CE9",
"backgroundColor": "#97C2FC",
"highlightColor": "#D2E5FF",
"group": undefined
nodes: {
radiusMin: 5,
radiusMax: 20,
radius: 5,
distance: 100, // px
style: 'rect',
image: undefined,
widthMin: 16, // px
widthMax: 64, // px
fontColor: 'black',
fontSize: 14, // px
//fontFace: verdana,
fontFace: 'arial',
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
borderColor: '#2B7CE9',
backgroundColor: '#97C2FC',
highlightColor: '#D2E5FF',
group: undefined
}, },
"edges": {
"widthMin": 1,
"widthMax": 15,
"width": 1,
"style": "line",
"color": "#343434",
"fontColor": "#343434",
"fontSize": 14, // px
"fontFace": "arial",
//"distance": 100, //px
"length": 100, // px
"dashlength": 10,
"dashgap": 5
edges: {
widthMin: 1,
widthMax: 15,
width: 1,
style: 'line',
color: '#343434',
fontColor: '#343434',
fontSize: 14, // px
fontFace: 'arial',
//distance: 100, //px
length: 100, // px
dashlength: 10,
dashgap: 5
}, },
"minForce": 0.05,
"minVelocity": 0.02, // px/s
"maxIterations": 1000 // maximum number of iteration to stabilize
minForce: 0.05,
minVelocity: 0.02, // px/s
maxIterations: 1000 // maximum number of iteration to stabilize
}; };
var graph = this; var graph = this;

+ 14
- 13
src/graph/Groups.js View File

@ -12,16 +12,16 @@ Groups = function () {
* default constants for group colors * default constants for group colors
*/ */
Groups.DEFAULT = [ Groups.DEFAULT = [
{"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
{"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
{"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
{"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
{"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
{"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
{"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
{"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
{"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
{"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"} // mint
{border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
{border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
{border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}}, // red
{border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}}, // green
{border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
{border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
{border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}}, // orange
{border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
{border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
{border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}} // mint
]; ];
@ -57,9 +57,7 @@ Groups.prototype.get = function (groupname) {
var index = this.defaultIndex % Groups.DEFAULT.length; var index = this.defaultIndex % Groups.DEFAULT.length;
this.defaultIndex++; this.defaultIndex++;
group = {}; group = {};
group.borderColor = Groups.DEFAULT[index].borderColor;
group.backgroundColor = Groups.DEFAULT[index].backgroundColor;
group.highlightColor = Groups.DEFAULT[index].highlightColor;
group.color = Groups.DEFAULT[index];
this.groups[groupname] = group; this.groups[groupname] = group;
} }
@ -75,5 +73,8 @@ Groups.prototype.get = function (groupname) {
*/ */
Groups.prototype.add = function (groupname, style) { Groups.prototype.add = function (groupname, style) {
this.groups[groupname] = style; this.groups[groupname] = style;
if (style.color) {
style.color = Node.parseColor(style.color);
}
return style; return style;
}; };

+ 49
- 14
src/graph/Node.js View File

@ -32,9 +32,7 @@ function Node(properties, imagelist, grouplist, constants) {
this.fontFace = constants.nodes.fontFace; this.fontFace = constants.nodes.fontFace;
this.fontColor = constants.nodes.fontColor; this.fontColor = constants.nodes.fontColor;
this.borderColor = constants.nodes.borderColor;
this.backgroundColor = constants.nodes.backgroundColor;
this.highlightColor = constants.nodes.highlightColor;
this.color = constants.nodes.color;
// set defaults for the properties // set defaults for the properties
this.id = undefined; this.id = undefined;
@ -131,9 +129,8 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.shape != undefined) {this.shape = properties.shape;} if (properties.shape != undefined) {this.shape = properties.shape;}
if (properties.image != undefined) {this.image = properties.image;} if (properties.image != undefined) {this.image = properties.image;}
if (properties.radius != undefined) {this.radius = properties.radius;} if (properties.radius != undefined) {this.radius = properties.radius;}
if (properties.borderColor != undefined) {this.borderColor = properties.borderColor;}
if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
if (properties.color != undefined) {this.color = Node.parseColor(properties.color);}
if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;} if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;} if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;} if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
@ -178,6 +175,44 @@ Node.prototype.setProperties = function(properties, constants) {
this._reset(); this._reset();
}; };
/**
* Parse a color property into an object with border, background, and
* hightlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
Node.parseColor = function(color) {
var c;
if (util.isString(color)) {
c = {
border: color,
background: color,
highlight: {
border: color,
background: color
}
};
// TODO: automatically generate a nice highlight color
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.border;
c.highlight.border = color.highlight && color.highlight.border || c.highlight.background;
}
}
return c;
};
/** /**
* select this node * select this node
*/ */
@ -441,8 +476,8 @@ Node.prototype._drawRect = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.roundRect(this.left, this.top, this.width, this.height, this.radius); ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
ctx.fill(); ctx.fill();
@ -467,8 +502,8 @@ Node.prototype._drawDatabase = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height); ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
ctx.fill(); ctx.fill();
@ -495,8 +530,8 @@ Node.prototype._drawCircle = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.circle(this.x, this.y, this.radius); ctx.circle(this.x, this.y, this.radius);
ctx.fill(); ctx.fill();
@ -539,8 +574,8 @@ Node.prototype._drawShape = function (ctx, shape) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx[shape](this.x, this.y, this.radius); ctx[shape](this.x, this.y, this.radius);

+ 4
- 2
src/graph/dotparser.js View File

@ -123,7 +123,8 @@
// add // add
graph.nodes[node.id] = node; graph.nodes[node.id] = node;
if (nodeAttr) { if (nodeAttr) {
node.attr = merge(node.attr, nodeAttr);
var attr = merge({}, nodeAttr); // clone global attributes
node.attr = merge(attr, node.attr); // merge attributes
} }
} }
} }
@ -138,7 +139,8 @@
} }
graph.edges.push(edge); graph.edges.push(edge);
if (edgeAttr) { if (edgeAttr) {
edge.attr = merge(edge.attr, edgeAttr);
var attr = merge({}, edgeAttr); // clone global attributes
edge.attr = merge(attr, edge.attr); // merge attributes
} }
} }

+ 114
- 72
vis.js View File

@ -6931,7 +6931,8 @@ Timeline.prototype.getItemRange = function getItemRange() {
// add // add
graph.nodes[node.id] = node; graph.nodes[node.id] = node;
if (nodeAttr) { if (nodeAttr) {
node.attr = merge(node.attr, nodeAttr);
var attr = merge({}, nodeAttr); // clone global attributes
node.attr = merge(attr, node.attr); // merge attributes
} }
} }
} }
@ -6946,7 +6947,8 @@ Timeline.prototype.getItemRange = function getItemRange() {
} }
graph.edges.push(edge); graph.edges.push(edge);
if (edgeAttr) { if (edgeAttr) {
edge.attr = merge(edge.attr, edgeAttr);
var attr = merge({}, edgeAttr); // clone global attributes
edge.attr = merge(attr, edge.attr); // merge attributes
} }
} }
@ -7618,9 +7620,7 @@ function Node(properties, imagelist, grouplist, constants) {
this.fontFace = constants.nodes.fontFace; this.fontFace = constants.nodes.fontFace;
this.fontColor = constants.nodes.fontColor; this.fontColor = constants.nodes.fontColor;
this.borderColor = constants.nodes.borderColor;
this.backgroundColor = constants.nodes.backgroundColor;
this.highlightColor = constants.nodes.highlightColor;
this.color = constants.nodes.color;
// set defaults for the properties // set defaults for the properties
this.id = undefined; this.id = undefined;
@ -7717,9 +7717,8 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.shape != undefined) {this.shape = properties.shape;} if (properties.shape != undefined) {this.shape = properties.shape;}
if (properties.image != undefined) {this.image = properties.image;} if (properties.image != undefined) {this.image = properties.image;}
if (properties.radius != undefined) {this.radius = properties.radius;} if (properties.radius != undefined) {this.radius = properties.radius;}
if (properties.borderColor != undefined) {this.borderColor = properties.borderColor;}
if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
if (properties.color != undefined) {this.color = Node.parseColor(properties.color);}
if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;} if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;} if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;} if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
@ -7764,6 +7763,44 @@ Node.prototype.setProperties = function(properties, constants) {
this._reset(); this._reset();
}; };
/**
* Parse a color property into an object with border, background, and
* hightlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
Node.parseColor = function(color) {
var c;
if (util.isString(color)) {
c = {
border: color,
background: color,
highlight: {
border: color,
background: color
}
};
// TODO: automatically generate a nice highlight color
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.border;
c.highlight.border = color.highlight && color.highlight.border || c.highlight.background;
}
}
return c;
};
/** /**
* select this node * select this node
*/ */
@ -8027,8 +8064,8 @@ Node.prototype._drawRect = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.roundRect(this.left, this.top, this.width, this.height, this.radius); ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
ctx.fill(); ctx.fill();
@ -8053,8 +8090,8 @@ Node.prototype._drawDatabase = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height); ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
ctx.fill(); ctx.fill();
@ -8081,8 +8118,8 @@ Node.prototype._drawCircle = function (ctx) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx.circle(this.x, this.y, this.radius); ctx.circle(this.x, this.y, this.radius);
ctx.fill(); ctx.fill();
@ -8125,8 +8162,8 @@ Node.prototype._drawShape = function (ctx, shape) {
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
ctx.lineWidth = this.selected ? 2.0 : 1.0; ctx.lineWidth = this.selected ? 2.0 : 1.0;
ctx[shape](this.x, this.y, this.radius); ctx[shape](this.x, this.y, this.radius);
@ -8604,14 +8641,10 @@ Edge.prototype._drawArrowCenter = function(ctx) {
// draw all arrows // draw all arrows
var angle = 0.2 * Math.PI; var angle = 0.2 * Math.PI;
var length = 10 + 5 * this.width; // TODO: make customizable? var length = 10 + 5 * this.width; // TODO: make customizable?
for (var a in this.arrows) {
if (this.arrows.hasOwnProperty(a)) {
point = this._pointOnCircle(x, y, radius, this.arrows[a]);
ctx.arrow(point.x, point.y, angle, length);
ctx.fill();
ctx.stroke();
}
}
point = this._pointOnCircle(x, y, radius, 0.5);
ctx.arrow(point.x, point.y, angle, length);
ctx.fill();
ctx.stroke();
// draw label // draw label
if (this.label) { if (this.label) {
@ -8879,16 +8912,16 @@ Groups = function () {
* default constants for group colors * default constants for group colors
*/ */
Groups.DEFAULT = [ Groups.DEFAULT = [
{"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
{"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
{"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
{"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
{"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
{"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
{"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
{"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
{"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
{"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"} // mint
{border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
{border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
{border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}}, // red
{border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}}, // green
{border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
{border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
{border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}}, // orange
{border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
{border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
{border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}} // mint
]; ];
@ -8924,9 +8957,7 @@ Groups.prototype.get = function (groupname) {
var index = this.defaultIndex % Groups.DEFAULT.length; var index = this.defaultIndex % Groups.DEFAULT.length;
this.defaultIndex++; this.defaultIndex++;
group = {}; group = {};
group.borderColor = Groups.DEFAULT[index].borderColor;
group.backgroundColor = Groups.DEFAULT[index].backgroundColor;
group.highlightColor = Groups.DEFAULT[index].highlightColor;
group.color = Groups.DEFAULT[index];
this.groups[groupname] = group; this.groups[groupname] = group;
} }
@ -8942,6 +8973,9 @@ Groups.prototype.get = function (groupname) {
*/ */
Groups.prototype.add = function (groupname, style) { Groups.prototype.add = function (groupname, style) {
this.groups[groupname] = style; this.groups[groupname] = style;
if (style.color) {
style.color = Node.parseColor(style.color);
}
return style; return style;
}; };
@ -9001,49 +9035,57 @@ Images.prototype.load = function(url) {
function Graph (container, data, options) { function Graph (container, data, options) {
// create variables and set default values // create variables and set default values
this.containerElement = container; this.containerElement = container;
this.width = "100%";
this.height = "100%";
this.width = '100%';
this.height = '100%';
this.refreshRate = 50; // milliseconds this.refreshRate = 50; // milliseconds
this.stabilize = true; // stabilize before displaying the graph this.stabilize = true; // stabilize before displaying the graph
this.selectable = true; this.selectable = true;
// set constant values // set constant values
this.constants = { this.constants = {
"nodes": {
"radiusMin": 5,
"radiusMax": 20,
"radius": 5,
"distance": 100, // px
"style": "rect",
"image": undefined,
"widthMin": 16, // px
"widthMax": 64, // px
"fontColor": "black",
"fontSize": 14, // px
//"fontFace": "verdana",
"fontFace": "arial",
"borderColor": "#2B7CE9",
"backgroundColor": "#97C2FC",
"highlightColor": "#D2E5FF",
"group": undefined
nodes: {
radiusMin: 5,
radiusMax: 20,
radius: 5,
distance: 100, // px
style: 'rect',
image: undefined,
widthMin: 16, // px
widthMax: 64, // px
fontColor: 'black',
fontSize: 14, // px
//fontFace: verdana,
fontFace: 'arial',
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
borderColor: '#2B7CE9',
backgroundColor: '#97C2FC',
highlightColor: '#D2E5FF',
group: undefined
}, },
"edges": {
"widthMin": 1,
"widthMax": 15,
"width": 1,
"style": "line",
"color": "#343434",
"fontColor": "#343434",
"fontSize": 14, // px
"fontFace": "arial",
//"distance": 100, //px
"length": 100, // px
"dashlength": 10,
"dashgap": 5
edges: {
widthMin: 1,
widthMax: 15,
width: 1,
style: 'line',
color: '#343434',
fontColor: '#343434',
fontSize: 14, // px
fontFace: 'arial',
//distance: 100, //px
length: 100, // px
dashlength: 10,
dashgap: 5
}, },
"minForce": 0.05,
"minVelocity": 0.02, // px/s
"maxIterations": 1000 // maximum number of iteration to stabilize
minForce: 0.05,
minVelocity: 0.02, // px/s
maxIterations: 1000 // maximum number of iteration to stabilize
}; };
var graph = this; var graph = this;

+ 5
- 5
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save