Renamed options for dashed lines in Graph

docs/graph.html

@@ -448,26 +448,37 @@ var edges = [
     </tr>
 
     <tr>
-        <td>altdashlength</td>
-        <td>number</td>
+        <td>color</td>
+        <td>string</td>
         <td>no</td>
-        <td>Length of the alternated dash in pixels on a dashed line.
-            Specifying <code>altdashlength</code> allows for creating
-            a dashed line with a dash-dot style, for example when
-            <code>dashlength=10</code> and <code>altdashlength=5</code>.
-            See also the option <code>dashlength</code>.
-            Only applicable when the line style is <code>dash-line</code>.</td>
+        <td>A HTML color for the edge.</td>
     </tr>
 
     <tr>
-        <td>color</td>
-        <td>string</td>
+        <td>dash</td>
+        <td>Object</td>
         <td>no</td>
-        <td>A HTML color for the edge.</td>
+        <td>
+            Object containing properties for dashed lines.
+            Available properties: <code>length</code>, <code>gap</code>,
+            <code>altLength</code>.
+        </td>
+    </tr>
+
+    <tr>
+        <td>dash.altLength</td>
+        <td>number</td>
+        <td>no</td>
+        <td>Length of the alternated dash in pixels on a dashed line.
+            Specifying <code>dash.altLength</code> allows for creating
+            a dashed line with a dash-dot style, for example when
+            <code>dash.length=10</code> and <code>dash.altLength=5</code>.
+            See also the option <code>dahs.length</code>.
+            Only applicable when the line style is <code>dash-line</code>.</td>
     </tr>
 
     <tr>
-        <td>dashlength</td>
+        <td>dash.length</td>
         <td>number</td>
         <td>no</td>
         <td>Length of a dash in pixels on a dashed line.
@@ -475,7 +486,7 @@ var edges = [
     </tr>
 
     <tr>
-        <td>dashgap</td>
+        <td>dash.gap</td>
         <td>number</td>
         <td>no</td>
         <td>Length of a gap in pixels on a dashed line.
@@ -635,55 +646,48 @@ var options = {
 </tr>
 
 <tr>
-    <td>groups</td>
-    <td>Object</td>
-    <td>none</td>
-    <td>It is possible to specify custom styles for groups.
-        Each node assigned a group gets the specified style.
-        See <a href="#Groups">Groups</a> for an overview of the available styles
-        and an example.
-    </td>
+    <td>edges.color</td>
+    <td>String</td>
+    <td>"#2B7CE9"</td>
+    <td>The default color of a edge.</td>
 </tr>
 
 <tr>
-    <td>height</td>
-    <td>String</td>
-    <td>"400px"</td>
-    <td>The height of the graph in pixels or as a percentage.</td>
+    <td>edges.dash</td>
+    <td>Object</td>
+    <td>Object</td>
+    <td>
+        Object containing default properties for dashed lines.
+        Available properties: <code>length</code>, <code>gap</code>,
+        <code>altLength</code>.
+    </td>
 </tr>
 
 <tr>
-    <td>edges.altdashlength</td>
+    <td>edges.dash.altLength</td>
     <td>number</td>
     <td>none</td>
-    <td>Length of the alternated dash in pixels on a dashed line.
-        Specifying <code>altdashlength</code> allows for creating
+    <td>Default length of the alternated dash in pixels on a dashed line.
+        Specifying <code>dash.altLength</code> allows for creating
         a dashed line with a dash-dot style, for example when
-        <code>dashlength=10</code> and <code>altdashlength=5</code>.
-        See also the option <code>dashlength</code>.
+        <code>dash.length=10</code> and <code>dash.altLength=5</code>.
+        See also the option <code>dahs.length</code>.
         Only applicable when the line style is <code>dash-line</code>.</td>
 </tr>
 
 <tr>
-    <td>edges.color</td>
-    <td>String</td>
-    <td>"#2B7CE9"</td>
-    <td>The default color of a edge.</td>
-</tr>
-
-<tr>
-    <td>edges.dashlength</td>
+    <td>edges.dash.length</td>
     <td>number</td>
     <td>10</td>
-    <td>Length of a dash in pixels on a dashed line.
+    <td>Default length of a dash in pixels on a dashed line.
         Only applicable when the line style is <code>dash-line</code>.</td>
 </tr>
 
 <tr>
-    <td>edges.dashgap</td>
+    <td>edges.dash.gap</td>
     <td>number</td>
     <td>5</td>
-    <td>Length of a gap in pixels on a dashed line.
+    <td>Default length of a gap in pixels on a dashed line.
         Only applicable when the line style is <code>dash-line</code>.</td>
 </tr>
 
@@ -708,6 +712,24 @@ var options = {
     <td>The default width of a edge.</td>
 </tr>
 
+<tr>
+    <td>groups</td>
+    <td>Object</td>
+    <td>none</td>
+    <td>It is possible to specify custom styles for groups.
+        Each node assigned a group gets the specified style.
+        See <a href="#Groups">Groups</a> for an overview of the available styles
+        and an example.
+    </td>
+</tr>
+
+<tr>
+    <td>height</td>
+    <td>String</td>
+    <td>"400px"</td>
+    <td>The height of the graph in pixels or as a percentage.</td>
+</tr>
+
 <tr>
     <td>nodes.color</td>
     <td>String | Object</td>

examples/graph/13_dashed_lines.html

@@ -20,19 +20,19 @@
         // Called on page load
         function draw() {
             var nodes = [
-                {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"}
+                {id: 1, label: 'dashed\nline\nexamples'},
+                {id: 2, label: 'default'},
+                {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
+                {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
+                {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
+                {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
             ];
             var edges = [
-                {from: 1, to: 2, style: "dash-line"},
-                {from: 1, to: 3, style: "dash-line", dashlength: 20, dashgap: 20},
-                {from: 1, to: 4, style: "dash-line", dashlength: 20, dashgap: 5},
-                {from: 1, to: 5, style: "dash-line", dashlength: 5, dashgap: 20},
-                {from: 1, to: 6, style: "dash-line", dashlength: 20, dashgap: 5, altdashlength: 5}
+                {from: 1, to: 2, style: 'dash-line'},
+                {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
+                {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
+                {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
+                {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
             ];
 
             // create the graph

src/graph/Edge.js

@@ -34,9 +34,7 @@ function Edge (properties, graph, constants) {
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
-    this.dashlength = constants.edges.dashlength;
-    this.dashgap = constants.edges.dashgap;
-    this.altdashlength  = constants.edges.altdashlength;
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
 
     this.stiffness = undefined; // depends on the length of the edge
     this.color  = constants.edges.color;
@@ -78,10 +76,12 @@ Edge.prototype.setProperties = function(properties, constants) {
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
-    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
-    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
-    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
-
+    if (properties.dash) {
+        if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
+        if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
+        if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
+    
     if (properties.color != undefined) {this.color = properties.color;}
 
     if (!this.from) {
@@ -302,13 +302,15 @@ Edge.prototype._drawDashLine = function(ctx) {
     // draw dashed line
     ctx.beginPath();
     ctx.lineCap = 'round';
-    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
+    if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
     {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
     }
-    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
+    else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
     {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
     }
     else //If all else fails draw a line
     {

src/graph/Graph.js

@@ -57,8 +57,11 @@ function Graph (container, data, options) {
             fontFace: 'arial',
             //distance: 100, //px
             length: 100,   // px
-            dashlength: 10,
-            dashgap: 5
+            dash: {
+                length: 10,
+                gap: 5,
+                altLength: undefined
+            }
         },
         minForce: 0.05,
         minVelocity: 0.02,   // px/s
@@ -167,14 +170,16 @@ Graph.prototype.setOptions = function (options) {
             // Added to support dashed lines
             // David Jordan
             // 2012-08-08
-            if (options.edges.dashlength != undefined) {
-                this.constants.edges.dashlength   = options.edges.dashlength;
-            }
-            if (options.edges.dashgap != undefined) {
-                this.constants.edges.dashgap   = options.edges.dashgap;
-            }
-            if (options.edges.altdashlength != undefined) {
-                this.constants.edges.altdashlength   = options.edges.altdashlength;
+            if (options.edges.dash) {
+                if (options.edges.dash.length != undefined) {
+                    this.constants.edges.dash.length = options.edges.dash.length;
+                }
+                if (options.edges.dash.gap != undefined) {
+                    this.constants.edges.dash.gap = options.edges.dash.gap;
+                }
+                if (options.edges.dash.altLength != undefined) {
+                    this.constants.edges.dash.altLength = options.edges.dash.altLength;
+                }
             }
         }
 
@@ -185,6 +190,10 @@ Graph.prototype.setOptions = function (options) {
                 }
             }
 
+            if (options.nodes.color) {
+                this.constants.nodes.color = Node.parseColor(options.nodes.color);
+            }
+
             /*
              if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
              if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;

src/graph/Node.js

@@ -196,8 +196,8 @@ Node.parseColor = function(color) {
     }
     else {
         c = {};
-        c.background =  color.background || 'white';
-        c.border =      color.border || c.background;
+        c.background = color.background || 'white';
+        c.border = color.border || c.background;
         if (util.isString(color.highlight)) {
             c.highlight = {
                 border: color.highlight,
@@ -206,8 +206,8 @@ Node.parseColor = function(color) {
         }
         else {
             c.highlight = {};
-            c.highlight.background = color.highlight && color.highlight.background || c.border;
-            c.highlight.border =     color.highlight && color.highlight.border || c.highlight.background;
+            c.highlight.background = color.highlight && color.highlight.background || c.background;
+            c.highlight.border = color.highlight && color.highlight.border || c.border;
         }
     }
     return c;

vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.0.8
- * @date    2013-06-06
+ * @date    2013-06-07
  *
  * @license
  * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@@ -7784,8 +7784,8 @@ Node.parseColor = function(color) {
     }
     else {
         c = {};
-        c.background =  color.background || 'white';
-        c.border =      color.border || c.background;
+        c.background = color.background || 'white';
+        c.border = color.border || c.background;
         if (util.isString(color.highlight)) {
             c.highlight = {
                 border: color.highlight,
@@ -7794,8 +7794,8 @@ Node.parseColor = function(color) {
         }
         else {
             c.highlight = {};
-            c.highlight.background = color.highlight && color.highlight.background || c.border;
-            c.highlight.border =     color.highlight && color.highlight.border || c.highlight.background;
+            c.highlight.background = color.highlight && color.highlight.background || c.background;
+            c.highlight.border = color.highlight && color.highlight.border || c.border;
         }
     }
     return c;
@@ -8302,9 +8302,7 @@ function Edge (properties, graph, constants) {
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
-    this.dashlength = constants.edges.dashlength;
-    this.dashgap = constants.edges.dashgap;
-    this.altdashlength  = constants.edges.altdashlength;
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
 
     this.stiffness = undefined; // depends on the length of the edge
     this.color  = constants.edges.color;
@@ -8346,10 +8344,12 @@ Edge.prototype.setProperties = function(properties, constants) {
     // Added to support dashed lines
     // David Jordan
     // 2012-08-08
-    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
-    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
-    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
-
+    if (properties.dash) {
+        if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
+        if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
+        if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
+    
     if (properties.color != undefined) {this.color = properties.color;}
 
     if (!this.from) {
@@ -8570,13 +8570,15 @@ Edge.prototype._drawDashLine = function(ctx) {
     // draw dashed line
     ctx.beginPath();
     ctx.lineCap = 'round';
-    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
+    if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
     {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
     }
-    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
+    else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
     {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
     }
     else //If all else fails draw a line
     {
@@ -9114,8 +9116,11 @@ function Graph (container, data, options) {
             fontFace: 'arial',
             //distance: 100, //px
             length: 100,   // px
-            dashlength: 10,
-            dashgap: 5
+            dash: {
+                length: 10,
+                gap: 5,
+                altLength: undefined
+            }
         },
         minForce: 0.05,
         minVelocity: 0.02,   // px/s
@@ -9224,14 +9229,16 @@ Graph.prototype.setOptions = function (options) {
             // Added to support dashed lines
             // David Jordan
             // 2012-08-08
-            if (options.edges.dashlength != undefined) {
-                this.constants.edges.dashlength   = options.edges.dashlength;
-            }
-            if (options.edges.dashgap != undefined) {
-                this.constants.edges.dashgap   = options.edges.dashgap;
-            }
-            if (options.edges.altdashlength != undefined) {
-                this.constants.edges.altdashlength   = options.edges.altdashlength;
+            if (options.edges.dash) {
+                if (options.edges.dash.length != undefined) {
+                    this.constants.edges.dash.length = options.edges.dash.length;
+                }
+                if (options.edges.dash.gap != undefined) {
+                    this.constants.edges.dash.gap = options.edges.dash.gap;
+                }
+                if (options.edges.dash.altLength != undefined) {
+                    this.constants.edges.dash.altLength = options.edges.dash.altLength;
+                }
             }
         }
 
@@ -9242,6 +9249,10 @@ Graph.prototype.setOptions = function (options) {
                 }
             }
 
+            if (options.nodes.color) {
+                this.constants.nodes.color = Node.parseColor(options.nodes.color);
+            }
+
             /*
              if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
              if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;