Network feature: background style for edges (#3606)

* background docs * edge background * Update edges.html * Update EdgeBase.js
7 years ago · cdff6b12f3
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@ -252,6 +252,44 @@ network.setOptions(options);
            <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>
--- 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>
--- 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",
--- 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) {
--- 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);
--- 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;
--- 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' },