Browse Source

Renamed Graph property style to shape, and text to label

css_transitions
josdejong 11 years ago
parent
commit
bbb8e086c9
16 changed files with 249 additions and 268 deletions
  1. +49
    -49
      docs/graph.html
  2. +5
    -5
      examples/graph/01_basic_usage.html
  3. +6
    -6
      examples/graph/02_random_nodes.html
  4. +9
    -9
      examples/graph/03_images.html
  5. +13
    -13
      examples/graph/04_shapes.html
  6. +21
    -21
      examples/graph/05_social_network.html
  7. +2
    -2
      examples/graph/06_groups.html
  8. +5
    -5
      examples/graph/08_selections.html
  9. +10
    -10
      examples/graph/16_scalable_images.html
  10. +6
    -7
      examples/graph/18_dashed_lines.html
  11. +6
    -6
      examples/graph/20_dot_language_playground.html
  12. +26
    -26
      src/graph/Edge.js
  13. +24
    -25
      src/graph/Node.js
  14. +6
    -14
      src/graph/dotparser.js
  15. +56
    -65
      vis.js
  16. +5
    -5
      vis.min.js

+ 49
- 49
docs/graph.html View File

@ -53,8 +53,8 @@
<h2 id="Overview">Overview</h2> <h2 id="Overview">Overview</h2>
<p> <p>
Graph is a visualization to display graphs and networks consisting of nodes Graph is a visualization to display graphs and networks consisting of nodes
and edges. The visualization is easy to use and supports custom styles,
colors, sizes, images, and more.
and edges. The visualization is easy to use and supports custom shapes,
styles, colors, sizes, images, and more.
</p> </p>
<p> <p>
@ -88,11 +88,11 @@
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;
// create an array with nodes // create an array with nodes
var nodes = [ var nodes = [
{id: 1, text: 'Node 1'},
{id: 2, text: 'Node 2'},
{id: 3, text: 'Node 3'},
{id: 4, text: 'Node 4'},
{id: 5, text: 'Node 5'}
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]; ];
// create an array with edges // create an array with edges
@ -203,9 +203,9 @@ var data = {
<h3 id="Nodes">Nodes</h3> <h3 id="Nodes">Nodes</h3>
<p> <p>
Nodes typically have an <code>id</code> and <code>text</code>.
Nodes typically have an <code>id</code> and <code>label</code>.
A node must contain at least a property <code>id</code>. A node must contain at least a property <code>id</code>.
Nodes can have extra properties, used to define the type and style the
Nodes can have extra properties, used to define the shape and style of the
nodes. nodes.
</p> </p>
@ -216,7 +216,7 @@ var data = {
var nodes = [ var nodes = [
{ {
id: 1, id: 1,
text: 'Node 1'
label: 'Node 1'
}, },
// ... more nodes // ... more nodes
]; ];
@ -262,21 +262,21 @@ var nodes = [
<td>fontColor</td> <td>fontColor</td>
<td>String</td> <td>String</td>
<td>"black"</td> <td>"black"</td>
<td>Font color for text 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>"sans"</td>
<td>Font face for text 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>14</td>
<td>Font size in pixels for text in the node.</td>
<td>Font size in pixels for label in the node.</td>
</tr> </tr>
<tr> <tr>
@ -300,7 +300,7 @@ var nodes = [
<td>image</td> <td>image</td>
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Url of an image. Only applicable when the style of the node is
<td>Url of an image. Only applicable when the shape of the node is
<code>image</code>.</td> <code>image</code>.</td>
</tr> </tr>
@ -308,19 +308,19 @@ var nodes = [
<td>radius</td> <td>radius</td>
<td>number</td> <td>number</td>
<td>no</td> <td>no</td>
<td>Radius for the node. Applicable for all styles except <code>rect</code>,
<td>Radius for the node. Applicable for all shapes except <code>rect</code>,
<code>circle</code>, and <code>database</code>. <code>circle</code>, and <code>database</code>.
The value of <code>radius</code> will override a value in The value of <code>radius</code> will override a value in
property <code>value</code>.</td> property <code>value</code>.</td>
</tr> </tr>
<tr> <tr>
<td>style</td>
<td>shape</td>
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Define the shape for the node. <td>Define the shape for the node.
Choose from <code>rect</code> (default), <code>circle</code>, Choose from <code>rect</code> (default), <code>circle</code>,
<code>database</code>, <code>image</code>, <code>text</code>,
<code>database</code>, <code>image</code>, <code>label</code>,
<code>dot</code>, <code>star</code>, <code>triangle</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>,
<code>triangleDown</code>, and <code>square</code>. <code>triangleDown</code>, and <code>square</code>.
<br><br> <br><br>
@ -335,19 +335,19 @@ var nodes = [
<code>value</code>. <code>value</code>.
<br><br> <br><br>
When a property <code>text</code> is provided,
this text will be displayed inside the shape in case of styles
When a property <code>label</code> is provided,
this label will be displayed inside the shape in case of shapes
<code>rect</code>, <code>circle</code>, and <code>database</code>. <code>rect</code>, <code>circle</code>, and <code>database</code>.
For all other shapes, the text will be displayed right below the shape.
For all other shapes, the label will be displayed right below the shape.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>text</td>
<td>label</td>
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Text to be displayed in the node or under the image of the node.
<td>Text label to be displayed in the node or under the image of the node.
Multiple lines can be separated by a newline character <code>\n</code> .</td> Multiple lines can be separated by a newline character <code>\n</code> .</td>
</tr> </tr>
@ -366,7 +366,7 @@ var nodes = [
<td>A value for the node. <td>A value for the node.
The radius of the nodes will be scaled automatically from minimum to The radius of the nodes will be scaled automatically from minimum to
maximum value. maximum value.
Only applicable when the style of the node is <code>dot</code>.
Only applicable when the shape of the node is <code>dot</code>.
If a <code>radius</code> is provided for the node too, it will override the If a <code>radius</code> is provided for the node too, it will override the
radius calculated from the value.</td> radius calculated from the value.</td>
</tr> </tr>
@ -465,7 +465,7 @@ var edges = [
<td>String</td> <td>String</td>
<td>"black"</td> <td>"black"</td>
<td>Font color for the text label of the edge. <td>Font color for the text label of the edge.
Only applicable when "text" is defined.</td>
Only applicable when property <code>label</code> is defined.</td>
</tr> </tr>
<tr> <tr>
@ -474,7 +474,7 @@ var edges = [
<td>"sans"</td> <td>"sans"</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 "text" is defined.</td>
Only applicable when property <code>label</code> is defined.</td>
</tr> </tr>
<tr> <tr>
@ -482,7 +482,7 @@ var edges = [
<td>Number</td> <td>Number</td>
<td>14</td> <td>14</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 "text" is defined.</td>
Only applicable when property <code>label</code> is defined.</td>
</tr> </tr>
<tr> <tr>
@ -505,17 +505,17 @@ var edges = [
<td>style</td> <td>style</td>
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Define a drawing style for the edge.
<td>Define a line style for the edge.
Choose from <code>line</code> (default), <code>arrow</code>, Choose from <code>line</code> (default), <code>arrow</code>,
<code>arrow-end</code>, or <code>dash-line</code>. <code>arrow-end</code>, or <code>dash-line</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>text</td>
<td>label</td>
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Text to be displayed halfway the edge.</td>
<td>Text label to be displayed halfway the edge.</td>
</tr> </tr>
<tr> <tr>
@ -737,19 +737,19 @@ var options = {
<td>nodes.fontColor</td> <td>nodes.fontColor</td>
<td>String</td> <td>String</td>
<td>"black"</td> <td>"black"</td>
<td>Default font color for text in the nodes.</td>
<td>Default font color for the text label in the nodes.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.fontFace</td> <td>nodes.fontFace</td>
<td>String</td> <td>String</td>
<td>"sans"</td> <td>"sans"</td>
<td>Default font face for text in the nodes, for example "verdana" or "arial".</td>
<td>Default font face for the text label in the nodes, for example "verdana" or "arial".</td>
</tr> </tr>
<tr> <tr>
<td>nodes.fontSize</td> <td>nodes.fontSize</td>
<td>Number</td> <td>Number</td>
<td>14</td> <td>14</td>
<td>Default font size in pixels for text in the nodes.</td>
<td>Default font size in pixels for the text label in the nodes.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.group</td> <td>nodes.group</td>
@ -761,48 +761,48 @@ var options = {
<td>nodes.image</td> <td>nodes.image</td>
<td>String</td> <td>String</td>
<td>none</td> <td>none</td>
<td>Default image url for the nodes. only applicable with style <code>image</code>.</td>
<td>Default image url for the nodes. only applicable with shape <code>image</code>.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.widthMin</td> <td>nodes.widthMin</td>
<td>Number</td> <td>Number</td>
<td>16</td> <td>16</td>
<td>The minimum width for a scaled image. Only applicable with style <code>image</code>.</td>
<td>The minimum width for a scaled image. Only applicable with shape <code>image</code>.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.widthMax</td> <td>nodes.widthMax</td>
<td>Number</td> <td>Number</td>
<td>64</td> <td>64</td>
<td>The maximum width for a scaled image. Only applicable with style <code>image</code>.</td>
<td>The maximum width for a scaled image. Only applicable with shape <code>image</code>.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.style</td>
<td>nodes.shape</td>
<td>String</td> <td>String</td>
<td>"rect"</td> <td>"rect"</td>
<td>The default style for all nodes.
<td>The default shape for all nodes.
Choose from <code>rect</code> (default), <code>circle</code>, Choose from <code>rect</code> (default), <code>circle</code>,
<code>database</code>, <code>image</code>, <code>text</code>, <code>dot</code>.
This style can be overridden by a group style, or by a style of an individual node.</td>
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>.
This shape can be overridden by a group shape, or by a shape of an individual node.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.radius</td> <td>nodes.radius</td>
<td>Number</td> <td>Number</td>
<td>5</td> <td>5</td>
<td>The default radius for a node. Only applicable with style <code>dot</code>.</td>
<td>The default radius for a node. Only applicable with shape <code>dot</code>.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.radiusMin</td> <td>nodes.radiusMin</td>
<td>Number</td> <td>Number</td>
<td>5</td> <td>5</td>
<td>The minimum radius for a scaled node. Only applicable with style <code>dot</code>.</td>
<td>The minimum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
</tr> </tr>
<tr> <tr>
<td>nodes.radiusMax</td> <td>nodes.radiusMax</td>
<td>Number</td> <td>Number</td>
<td>20</td> <td>20</td>
<td>The maximum radius for a scaled node. Only applicable with style <code>dot</code>.</td>
<td>The maximum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
</tr> </tr>
<tr> <tr>
@ -851,7 +851,7 @@ var options = {
groups: { groups: {
mygroup: { mygroup: {
style: 'circle',
shape: 'circle',
borderColor: 'black', borderColor: 'black',
backgroundColor: 'white', backgroundColor: 'white',
fontColor: 'red', fontColor: 'red',
@ -863,8 +863,8 @@ var options = {
}; };
var nodes = [ var nodes = [
{id: 1, text: 'Node 1'}, // will get the default style
{id: 2, text: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
{id: 1, label: 'Node 1'}, // will get the default style
{id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
// ... more nodes // ... more nodes
]; ];
</pre> </pre>
@ -903,7 +903,7 @@ var nodes = [
<td>String</td> <td>String</td>
<td>none</td> <td>none</td>
<td>Default image for the nodes. Only applicable in combination with <td>Default image for the nodes. Only applicable in combination with
style <code>image</code>.</td>
shape <code>image</code>.</td>
</tr> </tr>
<tr> <tr>
@ -925,11 +925,11 @@ var nodes = [
<td>Font size for the node in pixels.</td> <td>Font size for the node in pixels.</td>
</tr> </tr>
<tr> <tr>
<td>style</td>
<td>shape</td>
<td>String</td> <td>String</td>
<td>"rect"</td> <td>"rect"</td>
<td>Choose from <code>rect</code> (default), <code>circle</code>, <td>Choose from <code>rect</code> (default), <code>circle</code>,
<code>database</code>, <code>image</code>, <code>text</code>,
<code>database</code>, <code>image</code>, <code>label</code>,
<code>dot</code>. <code>dot</code>.
In case of image, a property with name image must be provided, containing In case of image, a property with name image must be provided, containing
image urls.</td> image urls.</td>
@ -939,7 +939,7 @@ var nodes = [
<td>Number</td> <td>Number</td>
<td>5</td> <td>5</td>
<td>Default radius for the node. Only applicable in combination with <td>Default radius for the node. Only applicable in combination with
styles <code>rect</code> and <code>dot</code>.</td>
shapes <code>rect</code> and <code>dot</code>.</td>
</tr> </tr>
</table> </table>

+ 5
- 5
examples/graph/01_basic_usage.html View File

@ -13,11 +13,11 @@
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = [ var nodes = [
{id: 1, text: 'Node 1'},
{id: 2, text: 'Node 2'},
{id: 3, text: 'Node 3'},
{id: 4, text: 'Node 4'},
{id: 5, text: 'Node 5'}
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]; ];
// create an array with edges // create an array with edges

+ 6
- 6
examples/graph/02_random_nodes.html View File

@ -25,8 +25,8 @@
var nodeCount = document.getElementById('nodeCount').value; var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) { for (var i = 0; i < nodeCount; i++) {
nodes.push({ nodes.push({
'id': i,
'text': String(i)
id: i,
label: String(i)
}); });
connectionCount[i] = 0; connectionCount[i] = 0;
@ -36,8 +36,8 @@
var from = i; var from = i;
var to = 0; var to = 0;
edges.push({ edges.push({
'from': from,
'to': to
from: from,
to: to
}); });
connectionCount[from]++; connectionCount[from]++;
connectionCount[to]++; connectionCount[to]++;
@ -55,8 +55,8 @@
var from = i; var from = i;
var to = j; var to = j;
edges.push({ edges.push({
'from': from,
'to': to
from: from,
to: to
}); });
connectionCount[from]++; connectionCount[from]++;
connectionCount[to]++; connectionCount[to]++;

+ 9
- 9
examples/graph/03_images.html View File

@ -26,31 +26,31 @@
// Create a data table with links. // Create a data table with links.
edges = []; edges = [];
nodes.push({id: 1, text: 'Main', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
nodes.push({id: 2, text: 'Office', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
nodes.push({id: 3, text: 'Wireless', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
edges.push({from: 1, to: 2, length: LENGTH_MAIN}); edges.push({from: 1, to: 2, length: LENGTH_MAIN});
edges.push({from: 1, to: 3, length: LENGTH_MAIN}); edges.push({from: 1, to: 3, length: LENGTH_MAIN});
for (var i = 4; i <= 7; i++) { for (var i = 4; i <= 7; i++) {
nodes.push({id: i, text: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', style: 'image'});
nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
edges.push({from: 2, to: i, length: LENGTH_SUB}); edges.push({from: 2, to: i, length: LENGTH_SUB});
} }
nodes.push({id: 101, text: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', style: 'image'});
nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
edges.push({from: 2, to: 101, length: LENGTH_SUB}); edges.push({from: 2, to: 101, length: LENGTH_SUB});
nodes.push({id: 102, text: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', style: 'image'});
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
edges.push({from: 3, to: 102, length: LENGTH_SUB}); edges.push({from: 3, to: 102, length: LENGTH_SUB});
nodes.push({id: 103, text: 'graph drive', image: DIR + 'Network-Drive-icon.png', style: 'image'});
nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
edges.push({from: 1, to: 103, length: LENGTH_SUB}); edges.push({from: 1, to: 103, length: LENGTH_SUB});
nodes.push({id: 104, text: 'Internet', image: DIR + 'System-Firewall-2-icon.png', style: 'image'});
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
edges.push({from: 1, to: 104, length: LENGTH_SUB}); edges.push({from: 1, to: 104, length: LENGTH_SUB});
for (var i = 200; i <= 201; i++ ) { for (var i = 200; i <= 201; i++ ) {
nodes.push({id: i, text: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', style: 'image'});
nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
edges.push({from: 3, to: i, length: LENGTH_SUB}); edges.push({from: 3, to: i, length: LENGTH_SUB});
} }

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

@ -18,31 +18,31 @@
function draw() { function draw() {
nodes = [ nodes = [
{id: 1, text: 'circle', style: 'circle', group: 'group_x'},
{id: 2, text: 'circle', style: 'circle', group: 'group_x'},
{id: 3, text: 'database', style: 'database', group: 'group_x'},
{id: 4, text: 'rect', style: 'rect', group: 'group_x'}
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 2, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 3, label: 'database', shape: 'database', group: 'group_x'},
{id: 4, label: 'rect', shape: 'rect', group: 'group_x'}
]; ];
edges = [ edges = [
{from: 3, to: 1, style: 'arrow'},
{from: 1, to: 4, style: 'dash-line'},
{from: 1, to: 2, style: 'arrow-end'}
{from: 3, to: 1, shape: 'arrow'},
{from: 1, to: 4, shape: 'dash-line'},
{from: 1, to: 2, shape: 'arrow-end'}
]; ];
var mainId = 5; var mainId = 5;
nodes.push({id: mainId, text: 'styles\nand\nsizes', style: 'rect', group: 'group_main'});
var styles = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
nodes.push({id: mainId, text: 'shapes\nand\nsizes', shape: 'rect', group: 'group_main'});
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++) {
var groupId = id; var groupId = id;
nodes.push({id: id, text: 'size ' + size, style: 'rect', group: 'group' + size});
nodes.push({id: id, label: 'size ' + size, shape: 'rect', group: 'group' + size});
edges.push({from: mainId, to: groupId, color: 'gray', width: size}); edges.push({from: mainId, to: groupId, color: 'gray', width: size});
id++; id++;
for (var i in styles) {
if (styles.hasOwnProperty(i)) {
nodes.push({id: id, value: size, text: styles[i], style: styles[i], group: 'group' + size});
for (var i in shapes) {
if (shapes.hasOwnProperty(i)) {
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
edges.push({from: groupId, to: id, color: 'gray', width: size}); edges.push({from: groupId, to: id, color: 'gray', width: size});
id++; id++;
} }

+ 21
- 21
examples/graph/05_social_network.html View File

@ -21,32 +21,32 @@
function draw() { function draw() {
// create people // create people
nodes = [ nodes = [
{id: 1, text: 'Algie', image: DIR + 'Smiley-Angry-icon.png', style: 'image'},
{id: 2, text: 'Alston', image: DIR + 'Smiley-Grin-icon.png', style: 'image'},
{id: 3, text: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', style: 'image'},
{id: 4, text: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', style: 'image'},
{id: 5, text: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', style: 'image'},
{id: 6, text: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', style: 'image'},
{id: 7, text: 'Lee', image: DIR + 'User-Coat-Red-icon.png', style: 'image'},
{id: 8, text: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', style: 'image'},
{id: 9, text: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', style: 'image'},
{id: 10, text: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', style: 'image'}
{id: 1, label: 'Algie', image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
{id: 2, label: 'Alston', image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
{id: 3, label: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
{id: 4, label: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
{id: 5, label: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
{id: 6, label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
{id: 7, label: 'Lee', image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
{id: 8, label: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
{id: 9, label: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
{id: 10, label: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
]; ];
// create connections // create connections
var color = '#BFBFBF'; var color = '#BFBFBF';
edges = [ edges = [
{from: 2, to: 8, value: 3, color: color},
{from: 2, to: 9, value: 5, color: color},
{from: 2, to: 10, value: 1, color: color},
{from: 4, to: 6, value: 8, color: color},
{from: 5, to: 7, value: 2, color: color},
{from: 4, to: 5, value: 1, color: color},
{from: 9, to: 10, value: 2, color: color},
{from: 2, to: 3, value: 6, color: color},
{from: 3, to: 9, value: 4, color: color},
{from: 5, to: 3, value: 1, color: color},
{from: 2, to: 7, value: 4, color: color}
{from: 2, to: 8, value: 3, label: 3, color: color},
{from: 2, to: 9, value: 5, label: 5, color: color},
{from: 2, to: 10, value: 1, label: 1, color: color},
{from: 4, to: 6, value: 8, label: 8, color: color},
{from: 5, to: 7, value: 2, label: 2, color: color},
{from: 4, to: 5, value: 1, label: 1, color: color},
{from: 9, to: 10, value: 2, label: 2, color: color},
{from: 2, to: 3, value: 6, label: 6, color: color},
{from: 3, to: 9, value: 4, label: 4, color: color},
{from: 5, to: 3, value: 1, label: 1, color: color},
{from: 2, to: 7, value: 4, label: 4, color: color}
]; ];
// create a graph // create a graph

+ 2
- 2
examples/graph/06_groups.html View File

@ -45,7 +45,7 @@
while (i < nodeCount) { while (i < nodeCount) {
nodes.push({ nodes.push({
id: i + nodeOffset, id: i + nodeOffset,
text: String(i + nodeOffset),
label: String(i + nodeOffset),
group: group group: group
}); });
connectionCount[i] = 0; connectionCount[i] = 0;
@ -128,7 +128,7 @@
height: '600px', height: '600px',
stabilize: false, stabilize: false,
nodes: { nodes: {
style: 'dot'
shape: 'dot'
}, },
edges: { edges: {
length: 50 length: 50

+ 5
- 5
examples/graph/08_selections.html View File

@ -14,11 +14,11 @@
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = [ var nodes = [
{id: 1, text: 'Node 1'},
{id: 2, text: 'Node 2'},
{id: 3, text: 'Node 3'},
{id: 4, text: 'Node 4'},
{id: 5, text: 'Node 5'}
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]; ];
// create an array with edges // create an array with edges

+ 10
- 10
examples/graph/16_scalable_images.html View File

@ -24,16 +24,16 @@
// value corresponds with the age of the person // value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/'; var DIR = 'img/soft-scraps-icons/';
nodes = [ nodes = [
{id: 1, value: 2, style: 'image', text: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
{id: 2, value: 31, style: 'image', text: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
{id: 3, value: 12, style: 'image', text: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, value: 16, style: 'image', text: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, value: 17, style: 'image', text: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, value: 15, style: 'image', text: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, value: 6, style: 'image', text: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 8, value: 5, style: 'image', text: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
{id: 9, value: 30, style: 'image', text: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, value: 18, style: 'image', text: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
{id: 1, value: 2, shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
{id: 2, value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
{id: 3, value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, value: 6, shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 8, value: 5, shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
{id: 9, value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
]; ];
// create connetions between people // create connetions between people

+ 6
- 7
examples/graph/18_dashed_lines.html View File

@ -15,12 +15,12 @@
// Called on page load // Called on page load
function draw() { function draw() {
var nodes = [ var nodes = [
{id: 1, text: "dashed\nline\nexamples"},
{id: 2, text: "default"},
{id: 3, text: "dashlength: 20\ndashgap: 20"},
{id: 4, text: "dashlength: 20\ndashgap: 5"},
{id: 5, text: "dashlength: 5\ndashgap: 20"},
{id: 6, text: "dashlength: 20\ndashgap: 5\naltdashlength: 5"}
{id: 1, label: "dashed\nline\nexamples"},
{id: 2, label: "default"},
{id: 3, label: "dashlength: 20\ndashgap: 20"},
{id: 4, label: "dashlength: 20\ndashgap: 5"},
{id: 5, label: "dashlength: 5\ndashgap: 20"},
{id: 6, label: "dashlength: 20\ndashgap: 5\naltdashlength: 5"}
]; ];
var edges = [ var edges = [
{from: 1, to: 2, style: "dash-line"}, {from: 1, to: 2, style: "dash-line"},
@ -30,7 +30,6 @@
{from: 1, to: 6, style: "dash-line", dashlength: 20, dashgap: 5, altdashlength: 5} {from: 1, to: 6, style: "dash-line", dashlength: 20, dashgap: 5, altdashlength: 5}
]; ];
// create the graph // create the graph
var container = document.getElementById('mygraph'); var container = document.getElementById('mygraph');
var data = { var data = {

+ 6
- 6
examples/graph/20_dot_language_playground.html View File

@ -133,15 +133,15 @@
<textarea id="example1" class="example"> <textarea id="example1" class="example">
digraph { digraph {
node [style=circle fontSize=16]
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black] edge [length=100, color=gray, fontColor=black]
A -> A[text=0.5];
B -> B[text=1.2] -> C[text=0.7] -- A;
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D; B -> D;
D -> B; D -> B;
D -> C; D -> C;
D -> E[text=0.2];
D -> E[label=0.2];
F -> F; F -> F;
A [ A [
fontColor=red, fontColor=red,
@ -165,7 +165,7 @@ digraph topology
"10.0.255.2" -> "10.0.255.3"[label="1.000"]; "10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"]; "10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"]; "10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", style=solid];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=rect]; "10.0.3.0/24"[shape=rect];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"]; "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=rect]; "10.0.2.0/24"[shape=rect];
@ -180,7 +180,7 @@ digraph G {
// unrecognized attributes are ignored // unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15] node[width=.25,height=.375,fontsize=15]
node [style=filled fillcolor=#F1AAF0]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ; 0-> 0 ;
1-> 1 ; 1-> 1 ;
2-> 2 ; 2-> 2 ;

+ 26
- 26
src/graph/Edge.js View File

@ -5,7 +5,7 @@
* @param {Object} properties Object with properties. Must contain * @param {Object} properties Object with properties. Must contain
* At least properties from and to. * At least properties from and to.
* Available properties: from (number), * Available properties: from (number),
* to (number), color (string),
* to (number), label (string, color (string),
* width (number), style (string), * width (number), style (string),
* length (number), title (string) * length (number), title (string)
* @param {Graph} graph A graph object, used to find and edge to * @param {Graph} graph A graph object, used to find and edge to
@ -61,8 +61,8 @@ Edge.prototype.setProperties = function(properties, constants) {
if (properties.id != undefined) {this.id = properties.id;} if (properties.id != undefined) {this.id = properties.id;}
if (properties.style != undefined) {this.style = properties.style;} if (properties.style != undefined) {this.style = properties.style;}
if (properties.text != undefined) {this.text = properties.text;}
if (this.text) {
if (properties.label != undefined) {this.label = properties.label;}
if (this.label) {
this.fontSize = constants.edges.fontSize; this.fontSize = constants.edges.fontSize;
this.fontFace = constants.edges.fontFace; this.fontFace = constants.edges.fontFace;
this.fontColor = constants.edges.fontColor; this.fontColor = constants.edges.fontColor;
@ -191,10 +191,10 @@ Edge.prototype._drawLine = function(ctx) {
// draw line // draw line
this._line(ctx); this._line(ctx);
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnLine(0.5); point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -214,7 +214,7 @@ Edge.prototype._drawLine = function(ctx) {
} }
this._circle(ctx, x, y, radius); this._circle(ctx, x, y, radius);
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
}; };
@ -262,20 +262,20 @@ Edge.prototype._circle = function (ctx, x, y, radius) {
}; };
/** /**
* Draw text with white background and with the middle at (x, y)
* Draw label with white background and with the middle at (x, y)
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @param {String} text * @param {String} text
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @private * @private
*/ */
Edge.prototype._text = function (ctx, text, x, y) {
Edge.prototype._label = function (ctx, text, x, y) {
if (text) { if (text) {
// TODO: cache the calculated size // TODO: cache the calculated size
ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
this.fontSize + "px " + this.fontFace; this.fontSize + "px " + this.fontFace;
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
var width = ctx.measureText(this.text).width;
var width = ctx.measureText(text).width;
var height = this.fontSize; var height = this.fontSize;
var left = x - width / 2; var left = x - width / 2;
var top = y - height / 2; var top = y - height / 2;
@ -286,7 +286,7 @@ Edge.prototype._text = function (ctx, text, x, y) {
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.fillText(this.text, left, top);
ctx.fillText(text, left, top);
} }
}; };
@ -322,10 +322,10 @@ Edge.prototype._drawDashLine = function(ctx) {
} }
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
var point = this._pointOnLine(0.5); var point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
}; };
@ -389,10 +389,10 @@ Edge.prototype._drawArrow = function(ctx) {
} }
} }
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnLine(0.5); point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -425,10 +425,10 @@ Edge.prototype._drawArrow = function(ctx) {
} }
} }
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
}; };
@ -478,10 +478,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
var point = this._pointOnLine(0.5); var point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -522,10 +522,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
}; };

+ 24
- 25
src/graph/Node.js View File

@ -4,10 +4,10 @@
* @param {object} properties An object containing properties for the node. All * @param {object} properties An object containing properties for the node. All
* properties are optional, except for the id. * properties are optional, except for the id.
* {number} id Id of the node. Required * {number} id Id of the node. Required
* {string} text Title for the node
* {string} label Text label for the node
* {number} x Horizontal position of the node * {number} x Horizontal position of the node
* {number} y Vertical position of the node * {number} y Vertical position of the node
* {string} style Drawing style, available:
* {string} shape Node shape, available:
* "database", "circle", "rect", * "database", "circle", "rect",
* "image", "text", "dot", "star", * "image", "text", "dot", "star",
* "triangle", "triangleDown", * "triangle", "triangleDown",
@ -38,7 +38,7 @@ function Node(properties, imagelist, grouplist, constants) {
// set defaults for the properties // set defaults for the properties
this.id = undefined; this.id = undefined;
this.style = constants.nodes.style;
this.shape = constants.nodes.shape;
this.image = constants.nodes.image; this.image = constants.nodes.image;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
@ -106,7 +106,7 @@ Node.prototype.setProperties = function(properties, constants) {
// basic properties // basic properties
if (properties.id != undefined) {this.id = properties.id;} if (properties.id != undefined) {this.id = properties.id;}
if (properties.text != undefined) {this.text = properties.text;}
if (properties.label != undefined) {this.label = properties.label;}
if (properties.title != undefined) {this.title = properties.title;} if (properties.title != undefined) {this.title = properties.title;}
if (properties.group != undefined) {this.group = properties.group;} if (properties.group != undefined) {this.group = properties.group;}
if (properties.x != undefined) {this.x = properties.x;} if (properties.x != undefined) {this.x = properties.x;}
@ -127,8 +127,8 @@ Node.prototype.setProperties = function(properties, constants) {
} }
} }
// individual style properties
if (properties.style != undefined) {this.style = properties.style;}
// individual shape properties
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.borderColor != undefined) {this.borderColor = properties.borderColor;}
@ -152,14 +152,13 @@ Node.prototype.setProperties = function(properties, constants) {
this.yFixed = this.yFixed || (properties.y != undefined); this.yFixed = this.yFixed || (properties.y != undefined);
this.radiusFixed = this.radiusFixed || (properties.radius != undefined); this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
if (this.style == 'image') {
if (this.shape == 'image') {
this.radiusMin = constants.nodes.widthMin; this.radiusMin = constants.nodes.widthMin;
this.radiusMax = constants.nodes.widthMax; this.radiusMax = constants.nodes.widthMax;
} }
// choose draw method depending on the style
var style = this.style;
switch (style) {
// choose draw method depending on the shape
switch (this.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break; case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break; case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break; case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
@ -227,7 +226,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
} }
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS
switch (this.style) {
switch (this.shape) {
case 'circle': case 'circle':
case 'dot': case 'dot':
return this.radius + borderWidth; return this.radius + borderWidth;
@ -413,17 +412,17 @@ Node.prototype._drawImage = 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;
var yText;
var yLabel;
if (this.imageObj) { if (this.imageObj) {
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
yText = this.y + this.height / 2;
yLabel = this.y + this.height / 2;
} }
else { else {
// image still loading... just draw the text for now
yText = this.y;
// image still loading... just draw the label for now
yLabel = this.y;
} }
this._text(ctx, this.text, this.x, yText, undefined, "top");
this._label(ctx, this.label, this.x, yLabel, undefined, "top");
}; };
@ -449,7 +448,7 @@ Node.prototype._drawRect = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
@ -475,7 +474,7 @@ Node.prototype._drawDatabase = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
@ -503,7 +502,7 @@ Node.prototype._drawCircle = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
Node.prototype._drawDot = function (ctx) { Node.prototype._drawDot = function (ctx) {
@ -548,8 +547,8 @@ Node.prototype._drawShape = function (ctx, shape) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
if (this.text) {
this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
if (this.label) {
this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top');
} }
}; };
@ -567,11 +566,11 @@ Node.prototype._drawText = 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;
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
Node.prototype._text = function (ctx, text, x, y, align, baseline) {
Node.prototype._label = function (ctx, text, x, y, align, baseline) {
if (text) { if (text) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
@ -592,10 +591,10 @@ Node.prototype._text = function (ctx, text, x, y, align, baseline) {
Node.prototype.getTextSize = function(ctx) { Node.prototype.getTextSize = function(ctx) {
if (this.text != undefined) {
if (this.label != undefined) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
var lines = this.text.split('\n'),
var lines = this.label.split('\n'),
height = (this.fontSize + 4) * lines.length, height = (this.fontSize + 4) * lines.length,
width = 0; width = 0;

+ 6
- 14
src/graph/dotparser.js View File

@ -173,7 +173,7 @@ util.parseDOT = function (data) {
/** /**
* Parse a set with attributes, * Parse a set with attributes,
* for example [label="1.000", style=solid]
* for example [label="1.000", shape=solid]
* @return {Object | undefined} attr * @return {Object | undefined} attr
*/ */
function parseAttributes() { function parseAttributes() {
@ -398,8 +398,8 @@ util.DOTToGraph = function (data) {
}; };
/** /**
* Merge the properties of object b into object a, and adjust properties
* not supported by Graph (for example replace "shape" with "style"
* Merge the properties of object b into object a, and replace non-supported
* attributes with supported properties.
* @param {Object} a * @param {Object} a
* @param {Object} b * @param {Object} b
* @param {Array} [ignore] Optional array with property names to be ignored * @param {Array} [ignore] Optional array with property names to be ignored
@ -411,15 +411,7 @@ util.DOTToGraph = function (data) {
} }
} }
// Convert aliases to configuration settings supported by Graph
if (a.label) {
a.text = a.label;
delete a.label;
}
if (a.shape) {
a.style = a.shape;
delete a.shape;
}
// TODO: Convert non supported attributes to properties supported by Graph
} }
dotData.nodes.forEach(function (node) { dotData.nodes.forEach(function (node) {
@ -435,7 +427,7 @@ util.DOTToGraph = function (data) {
else { else {
var graphNode = {}; var graphNode = {};
graphNode.id = node.id; graphNode.id = node.id;
graphNode.text = node.id;
graphNode.label = node.id;
merge(graphNode, node.attr); merge(graphNode, node.attr);
graphData.nodes.push(graphNode); graphData.nodes.push(graphNode);
} }
@ -445,7 +437,7 @@ util.DOTToGraph = function (data) {
var graphEdge = {}; var graphEdge = {};
graphEdge.from = edge.from; graphEdge.from = edge.from;
graphEdge.to = edge.to; graphEdge.to = edge.to;
graphEdge.text = edge.id;
graphEdge.label = edge.id;
graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line'; graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
merge(graphEdge, edge.attr); merge(graphEdge, edge.attr);
graphData.edges.push(graphEdge); graphData.edges.push(graphEdge);

+ 56
- 65
vis.js View File

@ -6981,7 +6981,7 @@ util.parseDOT = function (data) {
/** /**
* Parse a set with attributes, * Parse a set with attributes,
* for example [label="1.000", style=solid]
* for example [label="1.000", shape=solid]
* @return {Object | undefined} attr * @return {Object | undefined} attr
*/ */
function parseAttributes() { function parseAttributes() {
@ -7206,8 +7206,8 @@ util.DOTToGraph = function (data) {
}; };
/** /**
* Merge the properties of object b into object a, and adjust properties
* not supported by Graph (for example replace "shape" with "style"
* Merge the properties of object b into object a, and replace non-supported
* attributes with supported properties.
* @param {Object} a * @param {Object} a
* @param {Object} b * @param {Object} b
* @param {Array} [ignore] Optional array with property names to be ignored * @param {Array} [ignore] Optional array with property names to be ignored
@ -7219,15 +7219,7 @@ util.DOTToGraph = function (data) {
} }
} }
// Convert aliases to configuration settings supported by Graph
if (a.label) {
a.text = a.label;
delete a.label;
}
if (a.shape) {
a.style = a.shape;
delete a.shape;
}
// TODO: Convert non supported attributes to properties supported by Graph
} }
dotData.nodes.forEach(function (node) { dotData.nodes.forEach(function (node) {
@ -7243,7 +7235,7 @@ util.DOTToGraph = function (data) {
else { else {
var graphNode = {}; var graphNode = {};
graphNode.id = node.id; graphNode.id = node.id;
graphNode.text = node.id;
graphNode.label = node.id;
merge(graphNode, node.attr); merge(graphNode, node.attr);
graphData.nodes.push(graphNode); graphData.nodes.push(graphNode);
} }
@ -7253,7 +7245,7 @@ util.DOTToGraph = function (data) {
var graphEdge = {}; var graphEdge = {};
graphEdge.from = edge.from; graphEdge.from = edge.from;
graphEdge.to = edge.to; graphEdge.to = edge.to;
graphEdge.text = edge.id;
graphEdge.label = edge.id;
graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line'; graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
merge(graphEdge, edge.attr); merge(graphEdge, edge.attr);
graphData.edges.push(graphEdge); graphData.edges.push(graphEdge);
@ -7494,10 +7486,10 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @param {object} properties An object containing properties for the node. All * @param {object} properties An object containing properties for the node. All
* properties are optional, except for the id. * properties are optional, except for the id.
* {number} id Id of the node. Required * {number} id Id of the node. Required
* {string} text Title for the node
* {string} label Text label for the node
* {number} x Horizontal position of the node * {number} x Horizontal position of the node
* {number} y Vertical position of the node * {number} y Vertical position of the node
* {string} style Drawing style, available:
* {string} shape Node shape, available:
* "database", "circle", "rect", * "database", "circle", "rect",
* "image", "text", "dot", "star", * "image", "text", "dot", "star",
* "triangle", "triangleDown", * "triangle", "triangleDown",
@ -7528,7 +7520,7 @@ function Node(properties, imagelist, grouplist, constants) {
// set defaults for the properties // set defaults for the properties
this.id = undefined; this.id = undefined;
this.style = constants.nodes.style;
this.shape = constants.nodes.shape;
this.image = constants.nodes.image; this.image = constants.nodes.image;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
@ -7596,7 +7588,7 @@ Node.prototype.setProperties = function(properties, constants) {
// basic properties // basic properties
if (properties.id != undefined) {this.id = properties.id;} if (properties.id != undefined) {this.id = properties.id;}
if (properties.text != undefined) {this.text = properties.text;}
if (properties.label != undefined) {this.label = properties.label;}
if (properties.title != undefined) {this.title = properties.title;} if (properties.title != undefined) {this.title = properties.title;}
if (properties.group != undefined) {this.group = properties.group;} if (properties.group != undefined) {this.group = properties.group;}
if (properties.x != undefined) {this.x = properties.x;} if (properties.x != undefined) {this.x = properties.x;}
@ -7617,8 +7609,8 @@ Node.prototype.setProperties = function(properties, constants) {
} }
} }
// individual style properties
if (properties.style != undefined) {this.style = properties.style;}
// individual shape properties
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.borderColor != undefined) {this.borderColor = properties.borderColor;}
@ -7642,14 +7634,13 @@ Node.prototype.setProperties = function(properties, constants) {
this.yFixed = this.yFixed || (properties.y != undefined); this.yFixed = this.yFixed || (properties.y != undefined);
this.radiusFixed = this.radiusFixed || (properties.radius != undefined); this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
if (this.style == 'image') {
if (this.shape == 'image') {
this.radiusMin = constants.nodes.widthMin; this.radiusMin = constants.nodes.widthMin;
this.radiusMax = constants.nodes.widthMax; this.radiusMax = constants.nodes.widthMax;
} }
// choose draw method depending on the style
var style = this.style;
switch (style) {
// choose draw method depending on the shape
switch (this.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break; case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break; case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break; case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
@ -7717,7 +7708,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
} }
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS
switch (this.style) {
switch (this.shape) {
case 'circle': case 'circle':
case 'dot': case 'dot':
return this.radius + borderWidth; return this.radius + borderWidth;
@ -7903,17 +7894,17 @@ Node.prototype._drawImage = 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;
var yText;
var yLabel;
if (this.imageObj) { if (this.imageObj) {
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
yText = this.y + this.height / 2;
yLabel = this.y + this.height / 2;
} }
else { else {
// image still loading... just draw the text for now
yText = this.y;
// image still loading... just draw the label for now
yLabel = this.y;
} }
this._text(ctx, this.text, this.x, yText, undefined, "top");
this._label(ctx, this.label, this.x, yLabel, undefined, "top");
}; };
@ -7939,7 +7930,7 @@ Node.prototype._drawRect = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
@ -7965,7 +7956,7 @@ Node.prototype._drawDatabase = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
@ -7993,7 +7984,7 @@ Node.prototype._drawCircle = function (ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
Node.prototype._drawDot = function (ctx) { Node.prototype._drawDot = function (ctx) {
@ -8038,8 +8029,8 @@ Node.prototype._drawShape = function (ctx, shape) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
if (this.text) {
this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
if (this.label) {
this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top');
} }
}; };
@ -8057,11 +8048,11 @@ Node.prototype._drawText = 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;
this._text(ctx, this.text, this.x, this.y);
this._label(ctx, this.label, this.x, this.y);
}; };
Node.prototype._text = function (ctx, text, x, y, align, baseline) {
Node.prototype._label = function (ctx, text, x, y, align, baseline) {
if (text) { if (text) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
@ -8082,10 +8073,10 @@ Node.prototype._text = function (ctx, text, x, y, align, baseline) {
Node.prototype.getTextSize = function(ctx) { Node.prototype.getTextSize = function(ctx) {
if (this.text != undefined) {
if (this.label != undefined) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
var lines = this.text.split('\n'),
var lines = this.label.split('\n'),
height = (this.fontSize + 4) * lines.length, height = (this.fontSize + 4) * lines.length,
width = 0; width = 0;
@ -8107,7 +8098,7 @@ Node.prototype.getTextSize = function(ctx) {
* @param {Object} properties Object with properties. Must contain * @param {Object} properties Object with properties. Must contain
* At least properties from and to. * At least properties from and to.
* Available properties: from (number), * Available properties: from (number),
* to (number), color (string),
* to (number), label (string, color (string),
* width (number), style (string), * width (number), style (string),
* length (number), title (string) * length (number), title (string)
* @param {Graph} graph A graph object, used to find and edge to * @param {Graph} graph A graph object, used to find and edge to
@ -8163,8 +8154,8 @@ Edge.prototype.setProperties = function(properties, constants) {
if (properties.id != undefined) {this.id = properties.id;} if (properties.id != undefined) {this.id = properties.id;}
if (properties.style != undefined) {this.style = properties.style;} if (properties.style != undefined) {this.style = properties.style;}
if (properties.text != undefined) {this.text = properties.text;}
if (this.text) {
if (properties.label != undefined) {this.label = properties.label;}
if (this.label) {
this.fontSize = constants.edges.fontSize; this.fontSize = constants.edges.fontSize;
this.fontFace = constants.edges.fontFace; this.fontFace = constants.edges.fontFace;
this.fontColor = constants.edges.fontColor; this.fontColor = constants.edges.fontColor;
@ -8293,10 +8284,10 @@ Edge.prototype._drawLine = function(ctx) {
// draw line // draw line
this._line(ctx); this._line(ctx);
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnLine(0.5); point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -8316,7 +8307,7 @@ Edge.prototype._drawLine = function(ctx) {
} }
this._circle(ctx, x, y, radius); this._circle(ctx, x, y, radius);
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
}; };
@ -8364,20 +8355,20 @@ Edge.prototype._circle = function (ctx, x, y, radius) {
}; };
/** /**
* Draw text with white background and with the middle at (x, y)
* Draw label with white background and with the middle at (x, y)
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @param {String} text * @param {String} text
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @private * @private
*/ */
Edge.prototype._text = function (ctx, text, x, y) {
Edge.prototype._label = function (ctx, text, x, y) {
if (text) { if (text) {
// TODO: cache the calculated size // TODO: cache the calculated size
ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
this.fontSize + "px " + this.fontFace; this.fontSize + "px " + this.fontFace;
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
var width = ctx.measureText(this.text).width;
var width = ctx.measureText(text).width;
var height = this.fontSize; var height = this.fontSize;
var left = x - width / 2; var left = x - width / 2;
var top = y - height / 2; var top = y - height / 2;
@ -8388,7 +8379,7 @@ Edge.prototype._text = function (ctx, text, x, y) {
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.fillText(this.text, left, top);
ctx.fillText(text, left, top);
} }
}; };
@ -8424,10 +8415,10 @@ Edge.prototype._drawDashLine = function(ctx) {
} }
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
var point = this._pointOnLine(0.5); var point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
}; };
@ -8491,10 +8482,10 @@ Edge.prototype._drawArrow = function(ctx) {
} }
} }
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnLine(0.5); point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -8527,10 +8518,10 @@ Edge.prototype._drawArrow = function(ctx) {
} }
} }
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
}; };
@ -8580,10 +8571,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
var point = this._pointOnLine(0.5); var point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
else { else {
@ -8624,10 +8615,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
// draw text
if (this.text) {
// draw label
if (this.label) {
point = this._pointOnCircle(x, y, radius, 0.5); point = this._pointOnCircle(x, y, radius, 0.5);
this._text(ctx, this.text, point.x, point.y);
this._label(ctx, this.label, point.x, point.y);
} }
} }
}; };

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


Loading…
Cancel
Save