almende · mojoaxel · Oct 23, 2017 · Oct 22, 2017 · Oct 22, 2017 · Oct 23, 2017
diff --git a/docs/network/edges.html b/docs/network/edges.html
@@ -252,6 +252,44 @@ <h3>Options</h3>
             <td><code>true</code></td>
             <td>When false, the edge stops at the arrow. This can be useful if you have thick lines and you want the arrow to end in a point. Middle arrows are not affected by this.</td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','background', this);">
+            <td><span parent="background" class="right-caret"></span> background</td>
+            <td>Object or Boolean</td>
+            <td><code>Object</code></td>
+            <td>When true, a background will be under the edge using the default settings. This can be further defined by supplying
+              an object.
+            </td>
+          </tr>
+          <tr parent="background" class="hidden">
+            <td class="indent">background.enabled</td>
+            <td>Boolean</td>
+            <td><code>false</code></td>
+            <td>Toggle the display of backgrounds. If this option is not defined, it is set to true if any of the properties
+              in this object are defined.
+            </td>
+          </tr>
+          <tr parent="background" class="hidden">
+            <td class="indent">background.color</td>
+            <td>String</td>
+            <td><code>'rgba(111,111,111,0.5)'</code></td>
+            <td>The color size of the background as a string. Supported formats are 'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'.</td>
+          </tr>
+          <tr parent="background" class="hidden">
+            <td class="indent">background.size</td>
+            <td>Number</td>
+            <td><code>10</code></td>
+            <td>The blur size of the background.</td>
+          </tr>
+          <tr parent="background" class="hidden">
+            <td class="indent">background.dashes</td>
+            <td>Array or Boolean</td>
+            <td><code>false</code></td>
+            <td>When true, the background will be drawn as a dashed line. You can customize the dashes by supplying an Array.
+              Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
+              repeated until the distance is filled.
+              <i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.
+            </td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','chosen', this);">
             <td><span parent="chosen" class="right-caret"></span> chosen</td>
             <td>Object or Boolean</td>

diff --git a/examples/network/edgeStyles/background.html b/examples/network/edgeStyles/background.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Edge background</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Edge background.
+</p>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {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'},
+    {id: 6, label: 'Node 6'}
+  ]);
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 3, dashes:true},
+    {from: 1, to: 2, dashes:[5,5]},
+    {from: 2, to: 4, dashes:[5,5,3,3], background: false},
+    {from: 2, to: 5, dashes:[2,2,10,10]},
+    {from: 2, to: 6, dashes:false, background:{ enabled: true, color: 'rgba(111,111,111,0.5)', size:10, dashes: [20,10] }},
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges:{
+      shadow: true,
+      smooth: true,
+      background:{
+        enabled: true,
+        color: '#ff0000'
+      }
+    }
+  }
+
+  var network = new vis.Network(container, data, options);
+</script>
+
+
+</body>
+</html>
diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js
@@ -103,6 +103,12 @@ class EdgesHandler {
         x:5,
         y:5
       },
+      background:{
+        enabled: false,
+        color: 'rgba(111,111,111,1)',
+        size:10,
+        dashes: false
+      },
       smooth: {
         enabled: true,
         type: "dynamic",

diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js
@@ -147,6 +147,7 @@ class Edge {
 
     util.mergeOptions(parentOptions, newOptions, 'smooth', globalOptions);
     util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions);
+    util.mergeOptions(parentOptions, newOptions, 'background', globalOptions);
 
     if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
       parentOptions.dashes = newOptions.dashes;
@@ -270,7 +271,11 @@ class Edge {
       shadowX: this.options.shadow.x,
       shadowY: this.options.shadow.y,
       dashes: this.options.dashes,
-      width: this.options.width
+      width: this.options.width,
+      background: this.options.background.enabled,
+      backgroundColor: this.options.background.color,
+      backgroundSize: this.options.background.size,
+      backgroundDashes: this.options.background.dashes
     };
     if (this.selected || this.hover) {
       if (this.chooser === true) {

diff --git a/lib/network/modules/components/edges/util/BezierEdgeBase.js b/lib/network/modules/components/edges/util/BezierEdgeBase.js
@@ -140,6 +140,8 @@ class BezierEdgeBase extends EdgeBase {
       // fallback to normal straight edge
       ctx.lineTo(this.toPoint.x, this.toPoint.y);
     }
+    // draw a background
+    this.drawBackground(ctx, values);
 
     // draw shadow if enabled
     this.enableShadow(ctx, values);

diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js
@@ -592,6 +592,62 @@ class EdgeBase {
       ctx.shadowOffsetY = 0;
     }
   }
+
+  /**
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   */
+  drawBackground(ctx, values) {
+    if (values.background !== false) {
+      let attrs = ['strokeStyle', 'lineWidth', 'dashes'];
+      let origCtxAttr = {};
+      // save original line attrs
+      attrs.forEach(function(attrname) {
+        origCtxAttr[attrname] = ctx[attrname];
+      });
+
+      ctx.strokeStyle = values.backgroundColor;
+      ctx.lineWidth = values.backgroundSize;
+      this.setStrokeDashed(ctx, values.backgroundDashes);
+
+      ctx.stroke();
+
+      // restore original line attrs
+      attrs.forEach(function(attrname) {
+        ctx[attrname] = origCtxAttr[attrname];
+      });
+      this.setStrokeDashed(ctx, values.dashes);
+    }
+  }
+
+  /**
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {boolean|Array} dashes
+   */
+  setStrokeDashed(ctx, dashes) {
+    if (dashes !== false) {
+      if (ctx.setLineDash !== undefined) {
+        let pattern = [5, 5];
+        if (Array.isArray(dashes) === true) {
+          pattern = dashes;
+        }
+        ctx.setLineDash(pattern);
+      }
+      else {
+        console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used.");
+      }
+    }
+    else {
+      if (ctx.setLineDash !== undefined) {
+        ctx.setLineDash([]);
+      }
+      else {
+        console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used.");
+      }
+    }
+  }
 }
 
 export default EdgeBase;
diff --git a/lib/network/options.js b/lib/network/options.js
@@ -32,6 +32,13 @@ let allOptions = {
       __type__: { string: ['from', 'to', 'middle'], object }
     },
     arrowStrikethrough: { boolean: bool },
+    background: {
+      enabled: { boolean: bool },
+      color: { string },
+      size: { number },
+      dashes: { boolean: bool, array },
+      __type__: { object, boolean: bool }
+    },
     chosen: {
       label: { boolean: bool, 'function': 'function' },
       edge: { boolean: bool, 'function': 'function' },