Add endpoint 'bar' to Network (#3444)

* Add endpoint 'bar' to Network Fixes #3412 - Adds class `Bar` and handling to `EndPoints.js` - Adjusted `options.js` for endpoint, minor code changes - Added to example `network/edgeTypes/arrowTypes`. - Added to edges documentation * Grumbl fix travis unit test yet again. Go die already!
7 years ago · 091473a75e
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@ -279,7 +279,7 @@ network.setOptions(options);
            <td class="indent2">arrows.to.type</td>
            <td>String</td>
            <td><code>arrow</code></td>
            <td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
            <td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent">arrows.middle</td>
--- a/examples/network/edgeStyles/arrowTypes.html
+++ b/examples/network/edgeStyles/arrowTypes.html
@ -17,7 +17,8 @@
 <body>

 <p>
  There two type of liner endings. The classical "arrow" (default) and "circle".
  The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
  The default is <code>'arrow'</code>.
 </p>

 <div id="mynetwork"></div>
@ -25,9 +26,10 @@
 <script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'X'},
    {id: 2, label: 'Y'},
    {id: 3, label: 'Z'}
    {id: 1, label: 'A'},
    {id: 2, label: 'B'},
    {id: 3, label: 'C'},
    {id: 4, label: 'D'}
  ]);

  // create an array with edges
@ -35,9 +37,16 @@
    {from: 1, to: 2, arrows:'to'},
    {from: 2, to: 3, arrows:{
      to: {
        enabled: true,
        type: 'circle'
      }
    }},
    {from: 3, to: 4, arrows:{
      to: {
        enabled: true,
        type: 'bar'
      }
    }},
  ]);

  // create a network
@ -46,7 +55,20 @@
    nodes: nodes,
    edges: edges
  };
  var options = {};

  var options = {
 /*
    // Enable this to make the endpoints smaller/larger
    edges: {
      arrows: {
        to: {
          scaleFactor: 5
        }
      }
    }
 */
  };

  var network = new vis.Network(container, data, options);
 </script>

--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@ -149,11 +149,12 @@ class CanvasRenderer {
    // This is not something that will happen in normal operation, but we still need
    // to take it into account.
    //
    if (typeof window === 'undefined') return;  // Note: `if (window === undefined)` doesn't work
    if (typeof window === 'undefined') return;  // Doing `if (window === undefined)` does not work here!

    let timer;

    var myWindow = window;  // Grab a reference to reduce the possibility that 'window' is reset
                            // while running this method.
    let timer;

    if (this.requiresTimeout === true) {
      // wait given number of milliseconds and perform the animation step function
--- a/lib/network/modules/components/edges/util/EndPoints.js
+++ b/lib/network/modules/components/edges/util/EndPoints.js
@ -1,4 +1,4 @@
 /**
 /** ============================================================================
 * Location of all the endpoint drawing routines.
 *
 * Every endpoint has its own drawing routine, which contains an endpoint definition.
@ -9,9 +9,21 @@
 * - The endpoints are orientated to the positive x-direction
 * - The length of the endpoint is at most 1
 *
 * As long as the endpoint classes remain simple and not too numerous, they will be contained within this module.
 * As long as the endpoint classes remain simple and not too numerous, they will
 * be contained within this module.
 * All classes here except `EndPoints` should be considered as private to this module.
 */
 *
 * -----------------------------------------------------------------------------
 * ### Further Actions
 *
 * After adding a new endpoint here, you also need to do the following things:
 *
 * - Add the new endpoint name to `network/options.js` in array `endPoints`.
 * - Add the new endpoint name to the documentation.
 *   Scan for 'arrows.to.type` and add it to the description.
 * - Add the endpoint to the examples. At the very least, add it to example
 *   `edgeStyles/arrowTypes`.
 * ============================================================================= */

 // NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it,
 //       using the rest of the commenting in the code block. Usage of typedef in other comments then
@ -145,6 +157,45 @@ class Circle {
 }


 /**
 * Drawing methods for the bar endpoint.
 */
 class Bar {

  /**
   * Draw this shape at the end of a line.
   *
   * @param {CanvasRenderingContext2D} ctx
   * @param {ArrowData} arrowData
   * @static
   */
  static draw(ctx, arrowData) {
 /*
    var points = [
      {x:0, y:0.5},
      {x:0, y:-0.5}
    ];

    EndPoint.transform(points, arrowData);
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    ctx.lineTo(points[1].x, points[1].y);
    ctx.stroke();
 */

    var points = [
      {x:0, y:0.5},
      {x:0, y:-0.5},
      {x:-0.15, y:-0.5},
      {x:-0.15, y:0.5},
    ];

    EndPoint.transform(points, arrowData);
    EndPoint.drawPath(ctx, points);
  }
 }


 /**
 * Drawing methods for the endpoints.
 */
@ -167,6 +218,9 @@ class EndPoints {
    case 'circle':
      Circle.draw(ctx, arrowData);
      break;
    case 'bar':
      Bar.draw(ctx, arrowData);
      break;
    case 'arrow':  // fall-through
    default:
      Arrow.draw(ctx, arrowData);
--- a/lib/network/options.js
+++ b/lib/network/options.js
@ -13,6 +13,8 @@ let object = 'object'; // should only be in a __type__ property
 let dom = 'dom';
 let any = 'any';

 // List of endpoints
 let endPoints = ['arrow', 'circle', 'bar'];

 let allOptions = {
  configure: {
@ -24,9 +26,9 @@ let allOptions = {
  },
  edges: {
    arrows: {
      to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
      middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
      from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
      to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
      middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
      from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
      __type__: { string: ['from', 'to', 'middle'], object }
    },
    arrowStrikethrough: { boolean: bool },