Add edge styles support for DOT lib (#3348)

* Add support for edge style * Update for TODO: support of solid/dotted/dashed edges (attr = 'style') * Edge styles are defined as var edgeStyles in parseAttributeList(). * Add example for edge styles Add an editable example for playing DOT edge styles * Correct typo and remove TODO description * Correct typo of filename from 'dotEdgeSytles.html' to 'dotEdgeStyles.html'. * Remove TODO description of the issue for edge style
7 years ago · e44b0b0185
--- a/examples/network/data/dotLanguage/dotEdgeStyles.html
+++ b/examples/network/data/dotLanguage/dotEdgeStyles.html
@ -0,0 +1,197 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | DOT edge styles</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font: 10pt sans;
      line-height: 1.5em;;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: #4d4d4d;
      box-sizing: border-box;
      overflow: hidden;
    }

    #header {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }

    #contents {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
    }

    #left, #right {
      position: absolute;
      width: 50%;
      height: 100%;
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
      display: inline-block;
    }

    #left {
      top: 0;
      left: 0;
    }

    #right {
      top: 0;
      right: 0;
    }

    #error {
      color: red;
    }

    #data {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      resize: none;
    }

    #draw, #reset {
      padding: 5px 15px;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
    }

    a:hover {
      color: red;
    }

  </style>
  
 </head>
 <body>

 <div id="header">
  <h1>DOT edge styles</h1>

  <div>
    <p>
      Example of edge styles support
    </p>

    <ul>
      <li> label: text displayed on the edge</li>
      <li> color: edge color</li>
      <li> style: edge style is solid(default), dashed or dotted</li>
    </ul>
  </div>

  <div>
    <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
    <button id="reset" title="Reset the DOT graph">Reset</button>
    <span id="error"></span>
  </div>
 </div>

 <div id="contents">
  <div id="left">
    <textarea id="data">
    </textarea>
  </div>
  <div id="right">
    <div id="mynetwork"></div>
  </div>
 </div>

 <script type="text/javascript">
  var dotDefault = "digraph {\n" +
    " Parent -> C1[label=\"default\"];  // Default style is solid \n" +
    " Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
    " Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
    " Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
    "}";

  // create a network
  var container = document.getElementById('mynetwork');
  var options = {
    physics: {
      stabilization: false,
      barnesHut: {
        springLength: 200
      }
    }
  };
  var data = {};
  var network = new vis.Network(container, data, options);

  $('#draw').click(draw);
  $('#reset').click(reset);

  $(window).resize(resize);
  $(window).load(draw);

  $('#data').keydown(function (event) {
    if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
      draw();
      event.stopPropagation();
      event.preventDefault();
    }
  });

  function resize() {
    $('#contents').height($('body').height() - $('#header').height() - 30);
  }

  function draw () {
    try {
      resize();
      $('#error').html('');

      // Provide a string with data in DOT language
      data = vis.network.convertDot($('#data').val());

      network.setData(data);
    }
    catch (err) {
      // set the cursor at the position where the error occurred
      var match = /\(char (.*)\)/.exec(err);
      if (match) {
        var pos = Number(match[1]);
        var textarea = $('#data')[0];
        if(textarea.setSelectionRange) {
          textarea.focus();
          textarea.setSelectionRange(pos, pos);
        }
      }

      // show an error message
      $('#error').html(err.toString());
    }
  }

  function reset() {
    $('#data').val(dotDefault);
    draw();
  }

  window.onload = function() {
    reset();
  }
 </script>
 </body>
 </html>
--- a/lib/network/dotparser.js
+++ b/lib/network/dotparser.js
@ -52,6 +52,7 @@ var NODE_ATTR_MAPPING = {
 };
 var EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);
 EDGE_ATTR_MAPPING.color = 'color.color';
 EDGE_ATTR_MAPPING.style = 'dashes';

 // token types enumeration
 var TOKENTYPE = {
@ -682,6 +683,13 @@ function parseEdge(graph, from) {
 function parseAttributeList() {
  var attr = null;

  // edge styles of dot and vis
  var edgeStyles = {
    'dashed': true,
    'solid': false,
    'dotted': [1, 5]
  };

  while (token === '[') {
    getToken();
    attr = {};
@ -701,6 +709,12 @@ function parseAttributeList() {
        throw newSyntaxError('Attribute value expected');
      }
      var value = token;

      // convert from dot style to vis
      if (name === 'style') {
        value = edgeStyles[value];
      }

      setValue(attr, name, value); // name can be a path

      getToken();
@ -885,7 +899,6 @@ function DOTToGraph (data) {
        }
      }

      // TODO: support of solid/dotted/dashed edges (attr = 'style')
      // TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)

      if (dotEdge.to instanceof Object) {