SigmaJS Workbench

http://hansifer.com/sigmaArrowDemo1.htm

by downedcrane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.parsers.json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.plugins.dragNodes.min.js"></script>
<script src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="https://cdn.rawgit.com/jacomyal/sigma.js/9c940aa9/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.renderers.parallelEdges.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.renderers.edgeLabels.min.js"></script>
<script src="https://raw.githubusercontent.com/jacomyal/sigma.js/master/plugins/sigma.renderers.customShapes/shape-library.js"></script>
<script src="https://raw.githubusercontent.com/jacomyal/sigma.js/master/examples/plugin-customShapes.html"></script>
<!-- http://sigmajs.org/ -->
<!-- See; https://github.com/jacomyal/sigma.js/issues/848#issuecomment-308049208 -->
<h1>Sigma JS Workbench</h1>
<div class="sigma-wrapper">
  <canvas id="sigma-container" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<div class="button-container">
  <input class="btn-drag" type="button" value="Disable Drag" />
</div>

CSS

body {
   background: #ddd;
 }
 h1 {
   text-align: center;
 }
 .sigma-wrapper {
   max-width: 300px;
   background: #fff;
   border: 2px solid #AAA;
   margin: auto;
 }
 #sigma-container {
   max-width: 300px;
   height: 300px;
 }
.button-container {
  width: 400px;
  margin: auto;
  text-align: center;
}

JavaScript

;(function() {
  'use strict';

  sigma.utils.pkg('sigma.canvas.edges');

  /**
   * This edge renderer will display edges as curves with arrow heading.
   *
   * @param  {object}                   edge         The edge object.
   * @param  {object}                   source node  The edge source node.
   * @param  {object}                   target node  The edge target node.
   * @param  {CanvasRenderingContext2D} context      The canvas context.
   * @param  {configurable}             settings     The settings function.
   */
  sigma.canvas.edges.duplexCurvedArrow =
    function(edge, source, target, context, settings) {
    var color = edge.color,
        prefix = settings('prefix') || '',
        edgeColor = settings('edgeColor'),
        defaultNodeColor = settings('defaultNodeColor'),
        defaultEdgeColor = settings('defaultEdgeColor'),
        cp = {},
        size = edge[prefix + 'size'] || 1,
        tSize = target[prefix + 'size'],
        sSize = source[prefix + 'size'],
        s_x = source[prefix + 'x'],
        s_y = source[prefix + 'y'],
        t_x = target[prefix + 'x'],
        t_y = target[prefix + 'y'],
        aSize = Math.max(size * 2.5, settings('minArrowSize')),
        s_d,
        s_aX,
        s_aY,
        s_vX,
        s_vY,
        t_d,
        t_aX,
        t_aY,
        t_vX,
        t_vY;

    cp = (source.id === target.id) ?
      sigma.utils.getSelfLoopControlPoints(s_x, s_y, tSize) :
      sigma.utils.getQuadraticControlPoint(s_x, s_y, t_x, t_y);

    if (source.id === target.id) {
      t_d = Math.sqrt(Math.pow(t_x - cp.x1, 2) + Math.pow(t_y - cp.y1, 2));
      t_aX = cp.x1 + (t_x - cp.x1) * (t_d - aSize - tSize) / t_d;
      t_aY = cp.y1 + (t_y - cp.y1) * (t_d - aSize - tSize) / t_d;
      t_vX = (t_x - cp.x1) * aSize / t_d;
      t_vY = (t_y - cp.y1) * aSize / t_d;
      
      s_d = Math.sqrt(Math.pow(s_x - cp.x1, 2) + Math.pow(s_y - cp.y1, 2));
      s_aX = cp.x1 + (s_x - cp.x1) * (s_d - aSize - sSize) / s_d;
      s_aY...