Worked on client side rendering of the graph.

pom.xml

@@ -53,6 +53,13 @@
       <artifactId>json</artifactId>
       <version>20180130</version>
     </dependency>
+
+    <!-- https://mvnrepository.com/artifact/org.java-websocket/Java-WebSocket -->
+    <dependency>
+      <groupId>org.java-websocket</groupId>
+      <artifactId>Java-WebSocket</artifactId>
+      <version>1.3.0</version>
+    </dependency>
   </dependencies>
 
   <build>

src/main/java/net/jrtechs/www/client/basic.html

@@ -0,0 +1,241 @@
+<script src="src/sigma.core.js"></script>
+<script src="src/conrad.js"></script>
+<script src="src/utils/sigma.utils.js"></script>
+<script src="src/utils/sigma.polyfills.js"></script>
+<script src="src/sigma.settings.js"></script>
+<script src="src/classes/sigma.classes.dispatcher.js"></script>
+<script src="src/classes/sigma.classes.configurable.js"></script>
+<script src="src/classes/sigma.classes.graph.js"></script>
+<script src="src/classes/sigma.classes.camera.js"></script>
+<script src="src/classes/sigma.classes.quad.js"></script>
+<script src="src/classes/sigma.classes.edgequad.js"></script>
+<script src="src/captors/sigma.captors.mouse.js"></script>
+<script src="src/captors/sigma.captors.touch.js"></script>
+<script src="src/renderers/sigma.renderers.canvas.js"></script>
+<script src="src/renderers/sigma.renderers.webgl.js"></script>
+<script src="src/renderers/sigma.renderers.svg.js"></script>
+<script src="src/renderers/sigma.renderers.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.labels.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.utils.js"></script>
+<script src="src/renderers/svg/sigma.svg.nodes.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.edges.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.edges.curve.js"></script>
+<script src="src/renderers/svg/sigma.svg.labels.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.hovers.def.js"></script>
+<script src="src/middlewares/sigma.middlewares.rescale.js"></script>
+<script src="src/middlewares/sigma.middlewares.copy.js"></script>
+<script src="src/misc/sigma.misc.animation.js"></script>
+<script src="src/misc/sigma.misc.bindEvents.js"></script>
+<script src="src/misc/sigma.misc.bindDOMEvents.js"></script>
+<script src="src/misc/sigma.misc.drawHovers.js"></script>
+
+<script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
+<script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
+<script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>
+<script src="src/jquery-2.1.1.min.js"></script>
+
+
+<!-- END SIGMA IMPORTS -->
+<div id="container">
+  <style>
+    #graph-container {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      position: absolute;
+      background-color: #455660;
+    }
+    .sigma-edge {
+      stroke: #14191C;
+    }
+    .sigma-node {
+      fill: green;
+      stroke: #14191C;
+      stroke-width: 2px;
+    }
+    .sigma-node:hover {
+      fill: blue;
+    }
+    .muted {
+      fill-opacity: 0.1;
+      stroke-opacity: 0.1;
+    }
+  </style>
+  <div id="graph-container"></div>
+</div>
+
+<script src="src/worker.js"></script>
+<script src="src/supervisor.js"></script>
+
+<script>
+
+/**
+ * This is a basic example on how to instantiate sigma. A random graph is
+ * generated and stored in the "graph" variable, and then sigma is instantiated
+ * directly with the graph.
+ *
+ * The simple instance of sigma is enough to make it render the graph on the on
+ * the screen, since the graph is given directly to the constructor.
+ *
+ * var sigInstance = new sigma();
+
+ // Adding node
+ sigInstance.graph.addNode(params);
+
+ // Adding edge
+ sigInstance.graph.addEdge(params);
+
+ // You can also use the read method if you already have a object of nodes and edges
+ sigInst.graph.read({nodes: [...], edges: [...]});
+
+ // Updating nodes
+ sigInstance.graph.nodes().forEach(function(n) {
+  n.size = 34;
+  n.color = '#000';
+});
+
+ // Replace 'nodes' by 'edges' for the edges
+
+ // Don't forget to refresh your instance when done so the new graph is correctly displayed
+ sigInst.refresh();
+
+ // If you want to clear the graph, use the clear method
+ sigInst.graph.clear(); // graph now empty
+ *
+ */
+var s,
+    g = {
+      nodes: [],
+      edges: []
+    };
+
+// Instantiate sigma:
+s = new sigma({
+  graph: g,
+  container: 'graph-container'
+});
+
+
+s.addRenderer({
+    id: 'main',
+    type: 'svg',
+    container: document.getElementById('graph-container'),
+    freeStyle: true
+});
+
+s.refresh();
+
+// Binding silly interactions
+function mute(node) {
+    if (!~node.getAttribute('class').search(/muted/))
+        node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
+}
+
+function unmute(node) {
+    node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
+}
+
+$('.sigma-node').click(function() {
+
+    // Muting
+    $('.sigma-node, .sigma-edge').each(function() {
+        mute(this);
+    });
+
+    // Unmuting neighbors
+    var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
+    neighbors.nodes.forEach(function(node) {
+        unmute($('[data-node-id="' + node.id + '"]')[0]);
+    });
+
+    neighbors.edges.forEach(function(edge) {
+        unmute($('[data-edge-id="' + edge.id + '"]')[0]);
+    });
+});
+
+s.bind('clickStage', function() {
+    $('.sigma-node, .sigma-edge').each(function() {
+        unmute(this);
+    });
+});
+
+
+
+
+var connection = new WebSocket('ws://127.0.0.1:4444');
+
+connection.onopen = function ()
+{
+    console.log('Connected!');
+    connection.send('Ping'); // Send the message 'Ping' to the server
+};
+
+// Log errors
+connection.onerror = function (error)
+{
+    console.log('WebSocket Error ' + error);
+};
+
+function addNodeToGraph(request)
+{
+    s.graph.addNode({
+        id: request.id,
+        label: request.name,
+        x: Math.random(),
+        y: Math.random(),
+        size: Math.random(),
+        color: '#666'
+    });
+    s.refresh();
+}
+
+
+function addEdgeToGraph(request)
+{
+    s.graph.addEdge({
+        id: request.id,
+        source: request.p1,
+        target: request.p2,
+        size: Math.random(),
+        color: '#000'
+    });
+    s.refresh();
+}
+
+
+// Log messages from the server
+connection.onmessage = function (e)
+{
+    var request = JSON.parse(e.data);
+
+    if(request.action == 1)
+    {
+        addNodeToGraph(request);
+    }
+    else if(request.action == 2)
+    {
+        addEdgeToGraph(request);
+    }
+    console.log('Server: ' + e.data);
+};
+
+
+//s.startForceAtlas2({worker: true, barnesHutOptimize: false});
+</script>

src/main/java/net/jrtechs/www/client/images.html

@@ -0,0 +1,290 @@
+<script src="src/sigma.core.js"></script>
+<script src="src/conrad.js"></script>
+<script src="src/utils/sigma.utils.js"></script>
+<script src="src/utils/sigma.polyfills.js"></script>
+<script src="src/sigma.settings.js"></script>
+<script src="src/classes/sigma.classes.dispatcher.js"></script>
+<script src="src/classes/sigma.classes.configurable.js"></script>
+<script src="src/classes/sigma.classes.graph.js"></script>
+<script src="src/classes/sigma.classes.camera.js"></script>
+<script src="src/classes/sigma.classes.quad.js"></script>
+<script src="src/classes/sigma.classes.edgequad.js"></script>
+<script src="src/captors/sigma.captors.mouse.js"></script>
+<script src="src/captors/sigma.captors.touch.js"></script>
+<script src="src/renderers/sigma.renderers.canvas.js"></script>
+<script src="src/renderers/sigma.renderers.webgl.js"></script>
+<script src="src/renderers/sigma.renderers.svg.js"></script>
+<script src="src/renderers/sigma.renderers.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.def.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
+<script src="src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.labels.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
+<script src="src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.utils.js"></script>
+<script src="src/renderers/svg/sigma.svg.nodes.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.edges.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.edges.curve.js"></script>
+<script src="src/renderers/svg/sigma.svg.labels.def.js"></script>
+<script src="src/renderers/svg/sigma.svg.hovers.def.js"></script>
+<script src="src/middlewares/sigma.middlewares.rescale.js"></script>
+<script src="src/middlewares/sigma.middlewares.copy.js"></script>
+<script src="src/misc/sigma.misc.animation.js"></script>
+<script src="src/misc/sigma.misc.bindEvents.js"></script>
+<script src="src/misc/sigma.misc.bindDOMEvents.js"></script>
+<script src="src/misc/sigma.misc.drawHovers.js"></script>
+
+<script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
+<script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
+<script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>
+<script src="src/jquery-2.1.1.min.js"></script>
+
+
+<!-- END SIGMA IMPORTS -->
+<div id="container">
+    <style>
+        #graph-container {
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            position: absolute;
+        }
+    </style>
+    <div id="graph-container"></div>
+</div>
+
+<script src="src/worker.js"></script>
+<script src="src/supervisor.js"></script>
+
+<script>
+
+    sigma.utils.pkg('sigma.canvas.nodes');
+    sigma.canvas.nodes.image = (function() {
+        var _cache = {},
+            _loading = {},
+            _callbacks = {};
+
+        // Return the renderer itself:
+        var renderer = function(node, context, settings) {
+            var args = arguments,
+                prefix = settings('prefix') || '',
+                size = node[prefix + 'size'],
+                color = node.color || settings('defaultNodeColor'),
+                url = node.url;
+
+            if (_cache[url]) {
+                context.save();
+
+                // Draw the clipping disc:
+                context.beginPath();
+                context.arc(
+                    node[prefix + 'x'],
+                    node[prefix + 'y'],
+                    node[prefix + 'size'],
+                    0,
+                    Math.PI * 2,
+                    true
+                );
+                context.closePath();
+                context.clip();
+
+                // Draw the image
+                context.drawImage(
+                    _cache[url],
+                    node[prefix + 'x'] - size,
+                    node[prefix + 'y'] - size,
+                    2 * size,
+                    2 * size
+                );
+
+                // Quit the "clipping mode":
+                context.restore();
+
+                // Draw the border:
+                context.beginPath();
+                context.arc(
+                    node[prefix + 'x'],
+                    node[prefix + 'y'],
+                    node[prefix + 'size'],
+                    0,
+                    Math.PI * 2,
+                    true
+                );
+                context.lineWidth = size / 5;
+                context.strokeStyle = node.color || settings('defaultNodeColor');
+                context.stroke();
+            } else {
+                sigma.canvas.nodes.image.cache(url);
+                sigma.canvas.nodes.def.apply(
+                    sigma.canvas.nodes,
+                    args
+                );
+            }
+        };
+
+        // Let's add a public method to cache images, to make it possible to
+        // preload images before the initial rendering:
+        renderer.cache = function(url, callback) {
+            if (callback)
+                _callbacks[url] = callback;
+
+            if (_loading[url])
+                return;
+
+            var img = new Image();
+
+            img.onload = function() {
+                _loading[url] = false;
+                _cache[url] = img;
+
+                if (_callbacks[url]) {
+                    _callbacks[url].call(this, img);
+                    delete _callbacks[url];
+                }
+            };
+
+            _loading[url] = true;
+            img.src = url;
+        };
+
+        return renderer;
+    })();
+
+    // Now that's the renderer has been implemented, let's generate a graph
+    // to render:
+    var i,
+        s,
+        img,
+        N = 50,
+        E = 300,
+        g = {
+            nodes: [],
+            edges: []
+        },
+        urls = [
+            'img/img1.png',
+            'img/img2.png',
+            'img/img3.png',
+            'img/img4.png'
+        ],
+        loaded = 0,
+        colors = [
+            '#617db4',
+            '#668f3c',
+            '#c6583e',
+            '#b956af'
+        ];
+
+    // // Generate a random graph, with ~30% nodes having the type "image":
+    // for (i = 0; i < N; i++) {
+    //     img = Math.random() >= 0.7;
+    //     g.nodes.push({
+    //         id: 'n' + i,
+    //         label: 'Node ' + i,
+    //         type: img ? 'image' : 'def',
+    //         url: img ? urls[Math.floor(Math.random() * urls.length)] : null,
+    //         x: Math.random(),
+    //         y: Math.random(),
+    //         size: Math.random(),
+    //         color: colors[Math.floor(Math.random() * colors.length)]
+    //     });
+    // }
+    //
+    // for (i = 0; i < E; i++)
+    //     g.edges.push({
+    //         id: 'e' + i,
+    //         source: 'n' + (Math.random() * N | 0),
+    //         target: 'n' + (Math.random() * N | 0),
+    //         size: Math.random()
+    //     });
+
+    // Then, wait for all images to be loaded before instanciating sigma:
+    s = new sigma({
+        graph: g,
+        renderer: {
+            // IMPORTANT:
+            // This works only with the canvas renderer, so the
+            // renderer type set as "canvas" is necessary here.
+            container: document.getElementById('graph-container'),
+            type: 'canvas'
+        },
+        settings: {
+            minNodeSize: 8,
+            maxNodeSize: 16,
+        }
+    });
+
+
+    connection = new WebSocket('ws://127.0.0.1:4444');
+
+    connection.onopen = function ()
+    {
+        console.log('Connected!');
+        connection.send('Ping'); // Send the message 'Ping' to the server
+    };
+
+    // Log errors
+    connection.onerror = function (error)
+    {
+        console.log('WebSocket Error ' + error);
+    };
+
+    function addNodeToGraph(request)
+    {
+        s.graph.addNode({
+            id: request.id,
+            label: request.name,
+            type: img ? 'image' : 'def',
+            url: request.url,
+            x: request.x,
+            y: request.y,
+            size: Math.random(),
+            color: colors[Math.floor(Math.random() * colors.length)]
+        });
+        s.refresh();
+    }
+
+
+    function addEdgeToGraph(request)
+    {
+        s.graph.addEdge({
+            id: request.id,
+            source: request.p1,
+            target: request.p2,
+            size: Math.random(),
+        });
+        s.refresh();
+    }
+
+
+    // Log messages from the server
+    connection.onmessage = function (e)
+    {
+        var request = JSON.parse(e.data);
+
+        if(request.action == 1)
+        {
+            addNodeToGraph(request);
+        }
+        else if(request.action == 2)
+        {
+            addEdgeToGraph(request);
+        }
+        console.log('Server: ' + e.data);
+    };
+
+
+    //s.startForceAtlas2({worker: true, barnesHutOptimize: false});
+</script>

src/main/java/net/jrtechs/www/client/serverConnection.js

@@ -0,0 +1,56 @@
+var connection = new WebSocket('ws://127.0.0.1:4444');
+
+connection.onopen = function ()
+{
+    console.log('Connected!');
+    connection.send('Ping'); // Send the message 'Ping' to the server
+};
+
+// Log errors
+connection.onerror = function (error)
+{
+    console.log('WebSocket Error ' + error);
+};
+
+function addNodeToGraph(request)
+{
+    s.graph.addNode({
+        id: request.id,
+        label: request.name,
+        x: Math.random(),
+        y: Math.random(),
+        size: Math.random(),
+        color: '#666'
+    });
+    s.refresh();
+}
+
+
+function addEdgeToGraph(request)
+{
+    s.graph.addEdge({
+        id: request.id,
+        source: request.p1,
+        target: request.p2,
+        size: Math.random(),
+        color: '#000'
+    });
+    s.refresh();
+}
+
+
+// Log messages from the server
+connection.onmessage = function (e)
+{
+    var request = JSON.parse(e.data);
+
+    if(request.action == 1)
+    {
+        addNodeToGraph(request);
+    }
+    else if(request.action == 2)
+    {
+        addEdgeToGraph(request);
+    }
+    console.log('Server: ' + e.data);
+};

src/main/java/net/jrtechs/www/client/src/captors/sigma.captors.mouse.js

@@ -0,0 +1,349 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.captors');
+
+  /**
+   * The user inputs default captor. It deals with mouse events, keyboards
+   * events and touch events.
+   *
+   * @param  {DOMElement}   target   The DOM element where the listeners will be
+   *                                 bound.
+   * @param  {camera}       camera   The camera related to the target.
+   * @param  {configurable} settings The settings function.
+   * @return {sigma.captor}          The fresh new captor instance.
+   */
+  sigma.captors.mouse = function(target, camera, settings) {
+    var _self = this,
+        _target = target,
+        _camera = camera,
+        _settings = settings,
+
+        // CAMERA MANAGEMENT:
+        // ******************
+        // The camera position when the user starts dragging:
+        _startCameraX,
+        _startCameraY,
+        _startCameraAngle,
+
+        // The latest stage position:
+        _lastCameraX,
+        _lastCameraY,
+        _lastCameraAngle,
+        _lastCameraRatio,
+
+        // MOUSE MANAGEMENT:
+        // *****************
+        // The mouse position when the user starts dragging:
+        _startMouseX,
+        _startMouseY,
+
+        _isMouseDown,
+        _isMoving,
+        _hasDragged,
+        _downStartTime,
+        _movingTimeoutId;
+
+    sigma.classes.dispatcher.extend(this);
+
+    sigma.utils.doubleClick(_target, 'click', _doubleClickHandler);
+    _target.addEventListener('DOMMouseScroll', _wheelHandler, false);
+    _target.addEventListener('mousewheel', _wheelHandler, false);
+    _target.addEventListener('mousemove', _moveHandler, false);
+    _target.addEventListener('mousedown', _downHandler, false);
+    _target.addEventListener('click', _clickHandler, false);
+    _target.addEventListener('mouseout', _outHandler, false);
+    document.addEventListener('mouseup', _upHandler, false);
+
+
+
+
+    /**
+     * This method unbinds every handlers that makes the captor work.
+     */
+    this.kill = function() {
+      sigma.utils.unbindDoubleClick(_target, 'click');
+      _target.removeEventListener('DOMMouseScroll', _wheelHandler);
+      _target.removeEventListener('mousewheel', _wheelHandler);
+      _target.removeEventListener('mousemove', _moveHandler);
+      _target.removeEventListener('mousedown', _downHandler);
+      _target.removeEventListener('click', _clickHandler);
+      _target.removeEventListener('mouseout', _outHandler);
+      document.removeEventListener('mouseup', _upHandler);
+    };
+
+
+
+
+    // MOUSE EVENTS:
+    // *************
+
+    /**
+     * The handler listening to the 'move' mouse event. It will effectively
+     * drag the graph.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _moveHandler(e) {
+      var x,
+          y,
+          pos;
+
+      // Dispatch event:
+      if (_settings('mouseEnabled')) {
+        _self.dispatchEvent('mousemove',
+          sigma.utils.mouseCoords(e));
+
+        if (_isMouseDown) {
+          _isMoving = true;
+          _hasDragged = true;
+
+          if (_movingTimeoutId)
+            clearTimeout(_movingTimeoutId);
+
+          _movingTimeoutId = setTimeout(function() {
+            _isMoving = false;
+          }, _settings('dragTimeout'));
+
+          sigma.misc.animation.killAll(_camera);
+
+          _camera.isMoving = true;
+          pos = _camera.cameraPosition(
+            sigma.utils.getX(e) - _startMouseX,
+            sigma.utils.getY(e) - _startMouseY,
+            true
+          );
+
+          x = _startCameraX - pos.x;
+          y = _startCameraY - pos.y;
+
+          if (x !== _camera.x || y !== _camera.y) {
+            _lastCameraX = _camera.x;
+            _lastCameraY = _camera.y;
+
+            _camera.goTo({
+              x: x,
+              y: y
+            });
+          }
+
+          if (e.preventDefault)
+            e.preventDefault();
+          else
+            e.returnValue = false;
+
+          e.stopPropagation();
+          return false;
+        }
+      }
+    }
+
+    /**
+     * The handler listening to the 'up' mouse event. It will stop dragging the
+     * graph.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _upHandler(e) {
+      if (_settings('mouseEnabled') && _isMouseDown) {
+        _isMouseDown = false;
+        if (_movingTimeoutId)
+          clearTimeout(_movingTimeoutId);
+
+        _camera.isMoving = false;
+
+        var x = sigma.utils.getX(e),
+            y = sigma.utils.getY(e);
+
+        if (_isMoving) {
+          sigma.misc.animation.killAll(_camera);
+          sigma.misc.animation.camera(
+            _camera,
+            {
+              x: _camera.x +
+                _settings('mouseInertiaRatio') * (_camera.x - _lastCameraX),
+              y: _camera.y +
+                _settings('mouseInertiaRatio') * (_camera.y - _lastCameraY)
+            },
+            {
+              easing: 'quadraticOut',
+              duration: _settings('mouseInertiaDuration')
+            }
+          );
+        } else if (
+          _startMouseX !== x ||
+          _startMouseY !== y
+        )
+          _camera.goTo({
+            x: _camera.x,
+            y: _camera.y
+          });
+
+        _self.dispatchEvent('mouseup',
+          sigma.utils.mouseCoords(e));
+
+        // Update _isMoving flag:
+        _isMoving = false;
+      }
+    }
+
+    /**
+     * The handler listening to the 'down' mouse event. It will start observing
+     * the mouse position for dragging the graph.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _downHandler(e) {
+      if (_settings('mouseEnabled')) {
+        _startCameraX = _camera.x;
+        _startCameraY = _camera.y;
+
+        _lastCameraX = _camera.x;
+        _lastCameraY = _camera.y;
+
+        _startMouseX = sigma.utils.getX(e);
+        _startMouseY = sigma.utils.getY(e);
+
+        _hasDragged = false;
+        _downStartTime = (new Date()).getTime();
+
+        switch (e.which) {
+          case 2:
+            // Middle mouse button pressed
+            // Do nothing.
+            break;
+          case 3:
+            // Right mouse button pressed
+            _self.dispatchEvent('rightclick',
+              sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
+            break;
+          // case 1:
+          default:
+            // Left mouse button pressed
+            _isMouseDown = true;
+
+            _self.dispatchEvent('mousedown',
+              sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
+        }
+      }
+    }
+
+    /**
+     * The handler listening to the 'out' mouse event. It will just redispatch
+     * the event.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _outHandler(e) {
+      if (_settings('mouseEnabled'))
+        _self.dispatchEvent('mouseout');
+    }
+
+    /**
+     * The handler listening to the 'click' mouse event. It will redispatch the
+     * click event, but with normalized X and Y coordinates.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _clickHandler(e) {
+      if (_settings('mouseEnabled')) {
+        var event = sigma.utils.mouseCoords(e);
+        event.isDragging =
+          (((new Date()).getTime() - _downStartTime) > 100) && _hasDragged;
+        _self.dispatchEvent('click', event);
+      }
+
+      if (e.preventDefault)
+        e.preventDefault();
+      else
+        e.returnValue = false;
+
+      e.stopPropagation();
+      return false;
+    }
+
+    /**
+     * The handler listening to the double click custom event. It will
+     * basically zoom into the graph.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _doubleClickHandler(e) {
+      var pos,
+          ratio,
+          animation;
+
+      if (_settings('mouseEnabled')) {
+        ratio = 1 / _settings('doubleClickZoomingRatio');
+
+        _self.dispatchEvent('doubleclick',
+            sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
+
+        if (_settings('doubleClickEnabled')) {
+          pos = _camera.cameraPosition(
+            sigma.utils.getX(e) - sigma.utils.getCenter(e).x,
+            sigma.utils.getY(e) - sigma.utils.getCenter(e).y,
+            true
+          );
+
+          animation = {
+            duration: _settings('doubleClickZoomDuration')
+          };
+
+          sigma.utils.zoomTo(_camera, pos.x, pos.y, ratio, animation);
+        }
+
+        if (e.preventDefault)
+          e.preventDefault();
+        else
+          e.returnValue = false;
+
+        e.stopPropagation();
+        return false;
+      }
+    }
+
+    /**
+     * The handler listening to the 'wheel' mouse event. It will basically zoom
+     * in or not into the graph.
+     *
+     * @param {event} e A mouse event.
+     */
+    function _wheelHandler(e) {
+      var pos,
+          ratio,
+          animation,
+          wheelDelta = sigma.utils.getDelta(e);
+
+      if (_settings('mouseEnabled') && _settings('mouseWheelEnabled') && wheelDelta !== 0) {
+        ratio = wheelDelta > 0 ?
+          1 / _settings('zoomingRatio') :
+          _settings('zoomingRatio');
+
+        pos = _camera.cameraPosition(
+          sigma.utils.getX(e) - sigma.utils.getCenter(e).x,
+          sigma.utils.getY(e) - sigma.utils.getCenter(e).y,
+          true
+        );
+
+        animation = {
+          duration: _settings('mouseZoomDuration')
+        };
+
+        sigma.utils.zoomTo(_camera, pos.x, pos.y, ratio, animation);
+
+        if (e.preventDefault)
+          e.preventDefault();
+        else
+          e.returnValue = false;
+
+        e.stopPropagation();
+        return false;
+      }
+    }
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/captors/sigma.captors.touch.js

@@ -0,0 +1,410 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.captors');
+
+  /**
+   * The user inputs default captor. It deals with mouse events, keyboards
+   * events and touch events.
+   *
+   * @param  {DOMElement}   target   The DOM element where the listeners will be
+   *                                 bound.
+   * @param  {camera}       camera   The camera related to the target.
+   * @param  {configurable} settings The settings function.
+   * @return {sigma.captor}          The fresh new captor instance.
+   */
+  sigma.captors.touch = function(target, camera, settings) {
+    var _self = this,
+        _target = target,
+        _camera = camera,
+        _settings = settings,
+
+        // CAMERA MANAGEMENT:
+        // ******************
+        // The camera position when the user starts dragging:
+        _startCameraX,
+        _startCameraY,
+        _startCameraAngle,
+        _startCameraRatio,
+
+        // The latest stage position:
+        _lastCameraX,
+        _lastCameraY,
+        _lastCameraAngle,
+        _lastCameraRatio,
+
+        // TOUCH MANAGEMENT:
+        // *****************
+        // Touches that are down:
+        _downTouches = [],
+
+        _startTouchX0,
+        _startTouchY0,
+        _startTouchX1,
+        _startTouchY1,
+        _startTouchAngle,
+        _startTouchDistance,
+
+        _touchMode,
+
+        _isMoving,
+        _doubleTap,
+        _movingTimeoutId;
+
+    sigma.classes.dispatcher.extend(this);
+
+    sigma.utils.doubleClick(_target, 'touchstart', _doubleTapHandler);
+    _target.addEventListener('touchstart', _handleStart, false);
+    _target.addEventListener('touchend', _handleLeave, false);
+    _target.addEventListener('touchcancel', _handleLeave, false);
+    _target.addEventListener('touchleave', _handleLeave, false);
+    _target.addEventListener('touchmove', _handleMove, false);
+
+    function position(e) {
+      var offset = sigma.utils.getOffset(_target);
+
+      return {
+        x: e.pageX - offset.left,
+        y: e.pageY - offset.top
+      };
+    }
+
+    /**
+     * This method unbinds every handlers that makes the captor work.
+     */
+    this.kill = function() {
+      sigma.utils.unbindDoubleClick(_target, 'touchstart');
+      _target.addEventListener('touchstart', _handleStart);
+      _target.addEventListener('touchend', _handleLeave);
+      _target.addEventListener('touchcancel', _handleLeave);
+      _target.addEventListener('touchleave', _handleLeave);
+      _target.addEventListener('touchmove', _handleMove);
+    };
+
+    // TOUCH EVENTS:
+    // *************
+    /**
+     * The handler listening to the 'touchstart' event. It will set the touch
+     * mode ("_touchMode") and start observing the user touch moves.
+     *
+     * @param {event} e A touch event.
+     */
+    function _handleStart(e) {
+      if (_settings('touchEnabled')) {
+        var x0,
+            x1,
+            y0,
+            y1,
+            pos0,
+            pos1;
+
+        _downTouches = e.touches;
+
+        switch (_downTouches.length) {
+          case 1:
+            _camera.isMoving = true;
+            _touchMode = 1;
+
+            _startCameraX = _camera.x;
+            _startCameraY = _camera.y;
+
+            _lastCameraX = _camera.x;
+            _lastCameraY = _camera.y;
+
+            pos0 = position(_downTouches[0]);
+            _startTouchX0 = pos0.x;
+            _startTouchY0 = pos0.y;
+
+            break;
+          case 2:
+            _camera.isMoving = true;
+            _touchMode = 2;
+
+            pos0 = position(_downTouches[0]);
+            pos1 = position(_downTouches[1]);
+            x0 = pos0.x;
+            y0 = pos0.y;
+            x1 = pos1.x;
+            y1 = pos1.y;
+
+            _lastCameraX = _camera.x;
+            _lastCameraY = _camera.y;
+
+            _startCameraAngle = _camera.angle;
+            _startCameraRatio = _camera.ratio;
+
+            _startCameraX = _camera.x;
+            _startCameraY = _camera.y;
+
+            _startTouchX0 = x0;
+            _startTouchY0 = y0;
+            _startTouchX1 = x1;
+            _startTouchY1 = y1;
+
+            _startTouchAngle = Math.atan2(
+              _startTouchY1 - _startTouchY0,
+              _startTouchX1 - _startTouchX0
+            );
+            _startTouchDistance = Math.sqrt(
+              (_startTouchY1 - _startTouchY0) *
+                (_startTouchY1 - _startTouchY0) +
+              (_startTouchX1 - _startTouchX0) *
+                (_startTouchX1 - _startTouchX0)
+            );
+
+            e.preventDefault();
+            return false;
+        }
+      }
+    }
+
+    /**
+     * The handler listening to the 'touchend', 'touchcancel' and 'touchleave'
+     * event. It will update the touch mode if there are still at least one
+     * finger, and stop dragging else.
+     *
+     * @param {event} e A touch event.
+     */
+    function _handleLeave(e) {
+      if (_settings('touchEnabled')) {
+        _downTouches = e.touches;
+        var inertiaRatio = _settings('touchInertiaRatio');
+
+        if (_movingTimeoutId) {
+          _isMoving = false;
+          clearTimeout(_movingTimeoutId);
+        }
+
+        switch (_touchMode) {
+          case 2:
+            if (e.touches.length === 1) {
+              _handleStart(e);
+
+              e.preventDefault();
+              break;
+            }
+            /* falls through */
+          case 1:
+            _camera.isMoving = false;
+            _self.dispatchEvent('stopDrag');
+
+            if (_isMoving) {
+              _doubleTap = false;
+              sigma.misc.animation.camera(
+                _camera,
+                {
+                  x: _camera.x +
+                    inertiaRatio * (_camera.x - _lastCameraX),
+                  y: _camera.y +
+                    inertiaRatio * (_camera.y - _lastCameraY)
+                },
+                {
+                  easing: 'quadraticOut',
+                  duration: _settings('touchInertiaDuration')
+                }
+              );
+            }
+
+            _isMoving = false;
+            _touchMode = 0;
+            break;
+        }
+      }
+    }
+
+    /**
+     * The handler listening to the 'touchmove' event. It will effectively drag
+     * the graph, and eventually zooms and turn it if the user is using two
+     * fingers.
+     *
+     * @param {event} e A touch event.
+     */
+    function _handleMove(e) {
+      if (!_doubleTap && _settings('touchEnabled')) {
+        var x0,
+            x1,
+            y0,
+            y1,
+            cos,
+            sin,
+            end,
+            pos0,
+            pos1,
+            diff,
+            start,
+            dAngle,
+            dRatio,
+            newStageX,
+            newStageY,
+            newStageRatio,
+            newStageAngle;
+
+        _downTouches = e.touches;
+        _isMoving = true;
+
+        if (_movingTimeoutId)
+          clearTimeout(_movingTimeoutId);
+
+        _movingTimeoutId = setTimeout(function() {
+          _isMoving = false;
+        }, _settings('dragTimeout'));
+
+        switch (_touchMode) {
+          case 1:
+            pos0 = position(_downTouches[0]);
+            x0 = pos0.x;
+            y0 = pos0.y;
+
+            diff = _camera.cameraPosition(
+              x0 - _startTouchX0,
+              y0 - _startTouchY0,
+              true
+            );
+
+            newStageX = _startCameraX - diff.x;
+            newStageY = _startCameraY - diff.y;
+
+            if (newStageX !== _camera.x || newStageY !== _camera.y) {
+              _lastCameraX = _camera.x;
+              _lastCameraY = _camera.y;
+
+              _camera.goTo({
+                x: newStageX,
+                y: newStageY
+              });
+
+              _self.dispatchEvent('mousemove',
+                sigma.utils.mouseCoords(e, pos0.x, pos0.y));
+
+              _self.dispatchEvent('drag');
+            }
+            break;
+          case 2:
+            pos0 = position(_downTouches[0]);
+            pos1 = position(_downTouches[1]);
+            x0 = pos0.x;
+            y0 = pos0.y;
+            x1 = pos1.x;
+            y1 = pos1.y;
+
+            start = _camera.cameraPosition(
+              (_startTouchX0 + _startTouchX1) / 2 -
+                sigma.utils.getCenter(e).x,
+              (_startTouchY0 + _startTouchY1) / 2 -
+                sigma.utils.getCenter(e).y,
+              true
+            );
+            end = _camera.cameraPosition(
+              (x0 + x1) / 2 - sigma.utils.getCenter(e).x,
+              (y0 + y1) / 2 - sigma.utils.getCenter(e).y,
+              true
+            );
+
+            dAngle = Math.atan2(y1 - y0, x1 - x0) - _startTouchAngle;
+            dRatio = Math.sqrt(
+              (y1 - y0) * (y1 - y0) + (x1 - x0) * (x1 - x0)
+            ) / _startTouchDistance;
+
+            // Translation:
+            x0 = start.x;
+            y0 = start.y;
+
+            // Homothetic transformation:
+            newStageRatio = _startCameraRatio / dRatio;
+            x0 = x0 * dRatio;
+            y0 = y0 * dRatio;
+
+            // Rotation:
+            newStageAngle = _startCameraAngle - dAngle;
+            cos = Math.cos(-dAngle);
+            sin = Math.sin(-dAngle);
+            x1 = x0 * cos + y0 * sin;
+            y1 = y0 * cos - x0 * sin;
+            x0 = x1;
+            y0 = y1;
+
+            // Finalize:
+            newStageX = x0 - end.x + _startCameraX;
+            newStageY = y0 - end.y + _startCameraY;
+
+            if (
+              newStageRatio !== _camera.ratio ||
+              newStageAngle !== _camera.angle ||
+              newStageX !== _camera.x ||
+              newStageY !== _camera.y
+            ) {
+              _lastCameraX = _camera.x;
+              _lastCameraY = _camera.y;
+              _lastCameraAngle = _camera.angle;
+              _lastCameraRatio = _camera.ratio;
+
+              _camera.goTo({
+                x: newStageX,
+                y: newStageY,
+                angle: newStageAngle,
+                ratio: newStageRatio
+              });
+
+              _self.dispatchEvent('drag');
+            }
+
+            break;
+        }
+
+        e.preventDefault();
+        return false;
+      }
+    }
+
+    /**
+     * The handler listening to the double tap custom event. It will
+     * basically zoom into the graph.
+     *
+     * @param {event} e A touch event.
+     */
+    function _doubleTapHandler(e) {
+      var pos,
+          ratio,
+          animation;
+
+      if (e.touches && e.touches.length === 1 && _settings('touchEnabled')) {
+        _doubleTap = true;
+
+        ratio = 1 / _settings('doubleClickZoomingRatio');
+
+        pos = position(e.touches[0]);
+        _self.dispatchEvent('doubleclick',
+          sigma.utils.mouseCoords(e, pos.x, pos.y));
+
+        if (_settings('doubleClickEnabled')) {
+          pos = _camera.cameraPosition(
+            pos.x - sigma.utils.getCenter(e).x,
+            pos.y - sigma.utils.getCenter(e).y,
+            true
+          );
+
+          animation = {
+            duration: _settings('doubleClickZoomDuration'),
+            onComplete: function() {
+              _doubleTap = false;
+            }
+          };
+
+          sigma.utils.zoomTo(_camera, pos.x, pos.y, ratio, animation);
+        }
+
+        if (e.preventDefault)
+          e.preventDefault();
+        else
+          e.returnValue = false;
+
+        e.stopPropagation();
+        return false;
+      }
+    }
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.camera.js

@@ -0,0 +1,240 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  sigma.utils.pkg('sigma.classes');
+
+  /**
+   * The camera constructor. It just initializes its attributes and methods.
+   *
+   * @param  {string}       id       The id.
+   * @param  {sigma.classes.graph}  graph    The graph.
+   * @param  {configurable} settings The settings function.
+   * @param  {?object}      options  Eventually some overriding options.
+   * @return {camera}                Returns the fresh new camera instance.
+   */
+  sigma.classes.camera = function(id, graph, settings, options) {
+    sigma.classes.dispatcher.extend(this);
+
+    Object.defineProperty(this, 'graph', {
+      value: graph
+    });
+    Object.defineProperty(this, 'id', {
+      value: id
+    });
+    Object.defineProperty(this, 'readPrefix', {
+      value: 'read_cam' + id + ':'
+    });
+    Object.defineProperty(this, 'prefix', {
+      value: 'cam' + id + ':'
+    });
+
+    this.x = 0;
+    this.y = 0;
+    this.ratio = 1;
+    this.angle = 0;
+    this.isAnimated = false;
+    this.settings = (typeof options === 'object' && options) ?
+      settings.embedObject(options) :
+      settings;
+  };
+
+  /**
+   * Updates the camera position.
+   *
+   * @param  {object} coordinates The new coordinates object.
+   * @return {camera}             Returns the camera.
+   */
+  sigma.classes.camera.prototype.goTo = function(coordinates) {
+    if (!this.settings('enableCamera'))
+      return this;
+
+    var i,
+        l,
+        c = coordinates || {},
+        keys = ['x', 'y', 'ratio', 'angle'];
+
+    for (i = 0, l = keys.length; i < l; i++)
+      if (c[keys[i]] !== undefined) {
+        if (typeof c[keys[i]] === 'number' && !isNaN(c[keys[i]]))
+          this[keys[i]] = c[keys[i]];
+        else
+          throw 'Value for "' + keys[i] + '" is not a number.';
+      }
+
+    this.dispatchEvent('coordinatesUpdated');
+    return this;
+  };
+
+  /**
+   * This method takes a graph and computes for each node and edges its
+   * coordinates relatively to the center of the camera. Basically, it will
+   * compute the coordinates that will be used by the graphic renderers.
+   *
+   * Since it should be possible to use different cameras and different
+   * renderers, it is possible to specify a prefix to put before the new
+   * coordinates (to get something like "node.camera1_x")
+   *
+   * @param  {?string} read    The prefix of the coordinates to read.
+   * @param  {?string} write   The prefix of the coordinates to write.
+   * @param  {?object} options Eventually an object of options. Those can be:
+   *                           - A restricted nodes array.
+   *                           - A restricted edges array.
+   *                           - A width.
+   *                           - A height.
+   * @return {camera}        Returns the camera.
+   */
+  sigma.classes.camera.prototype.applyView = function(read, write, options) {
+    options = options || {};
+    write = write !== undefined ? write : this.prefix;
+    read = read !== undefined ? read : this.readPrefix;
+
+    var nodes = options.nodes || this.graph.nodes(),
+        edges = options.edges || this.graph.edges();
+
+    var i,
+        l,
+        node,
+        relCos = Math.cos(this.angle) / this.ratio,
+        relSin = Math.sin(this.angle) / this.ratio,
+        nodeRatio = Math.pow(this.ratio, this.settings('nodesPowRatio')),
+        edgeRatio = Math.pow(this.ratio, this.settings('edgesPowRatio')),
+        xOffset = (options.width || 0) / 2 - this.x * relCos - this.y * relSin,
+        yOffset = (options.height || 0) / 2 - this.y * relCos + this.x * relSin;
+
+    for (i = 0, l = nodes.length; i < l; i++) {
+      node = nodes[i];
+      node[write + 'x'] =
+        (node[read + 'x'] || 0) * relCos +
+        (node[read + 'y'] || 0) * relSin +
+        xOffset;
+      node[write + 'y'] =
+        (node[read + 'y'] || 0) * relCos -
+        (node[read + 'x'] || 0) * relSin +
+        yOffset;
+      node[write + 'size'] =
+        (node[read + 'size'] || 0) /
+        nodeRatio;
+    }
+
+    for (i = 0, l = edges.length; i < l; i++) {
+      edges[i][write + 'size'] =
+        (edges[i][read + 'size'] || 0) /
+        edgeRatio;
+    }
+
+    return this;
+  };
+
+  /**
+   * This function converts the coordinates of a point from the frame of the
+   * camera to the frame of the graph.
+   *
+   * @param  {number} x The X coordinate of the point in the frame of the
+   *                    camera.
+   * @param  {number} y The Y coordinate of the point in the frame of the
+   *                    camera.
+   * @return {object}   The point coordinates in the frame of the graph.
+   */
+  sigma.classes.camera.prototype.graphPosition = function(x, y, vector) {
+    var X = 0,
+        Y = 0,
+        cos = Math.cos(this.angle),
+        sin = Math.sin(this.angle);
+
+    // Revert the origin differential vector:
+    if (!vector) {
+      X = - (this.x * cos + this.y * sin) / this.ratio;
+      Y = - (this.y * cos - this.x * sin) / this.ratio;
+    }
+
+    return {
+      x: (x * cos + y * sin) / this.ratio + X,
+      y: (y * cos - x * sin) / this.ratio + Y
+    };
+  };
+
+  /**
+   * This function converts the coordinates of a point from the frame of the
+   * graph to the frame of the camera.
+   *
+   * @param  {number} x The X coordinate of the point in the frame of the
+   *                    graph.
+   * @param  {number} y The Y coordinate of the point in the frame of the
+   *                    graph.
+   * @return {object}   The point coordinates in the frame of the camera.
+   */
+  sigma.classes.camera.prototype.cameraPosition = function(x, y, vector) {
+    var X = 0,
+        Y = 0,
+        cos = Math.cos(this.angle),
+        sin = Math.sin(this.angle);
+
+    // Revert the origin differential vector:
+    if (!vector) {
+      X = - (this.x * cos + this.y * sin) / this.ratio;
+      Y = - (this.y * cos - this.x * sin) / this.ratio;
+    }
+
+    return {
+      x: ((x - X) * cos - (y - Y) * sin) * this.ratio,
+      y: ((y - Y) * cos + (x - X) * sin) * this.ratio
+    };
+  };
+
+  /**
+   * This method returns the transformation matrix of the camera. This is
+   * especially useful to apply the camera view directly in shaders, in case of
+   * WebGL rendering.
+   *
+   * @return {array} The transformation matrix.
+   */
+  sigma.classes.camera.prototype.getMatrix = function() {
+    var scale = sigma.utils.matrices.scale(1 / this.ratio),
+        rotation = sigma.utils.matrices.rotation(this.angle),
+        translation = sigma.utils.matrices.translation(-this.x, -this.y),
+        matrix = sigma.utils.matrices.multiply(
+          translation,
+          sigma.utils.matrices.multiply(
+            rotation,
+            scale
+          )
+        );
+
+    return matrix;
+  };
+
+  /**
+   * Taking a width and a height as parameters, this method returns the
+   * coordinates of the rectangle representing the camera on screen, in the
+   * graph's referentiel.
+   *
+   * To keep displaying labels of nodes going out of the screen, the method
+   * keeps a margin around the screen in the returned rectangle.
+   *
+   * @param  {number} width  The width of the screen.
+   * @param  {number} height The height of the screen.
+   * @return {object}        The rectangle as x1, y1, x2 and y2, representing
+   *                         two opposite points.
+   */
+  sigma.classes.camera.prototype.getRectangle = function(width, height) {
+    var widthVect = this.cameraPosition(width, 0, true),
+        heightVect = this.cameraPosition(0, height, true),
+        centerVect = this.cameraPosition(width / 2, height / 2, true),
+        marginX = this.cameraPosition(width / 4, 0, true).x,
+        marginY = this.cameraPosition(0, height / 4, true).y;
+
+    return {
+      x1: this.x - centerVect.x - marginX,
+      y1: this.y - centerVect.y - marginY,
+      x2: this.x - centerVect.x + marginX + widthVect.x,
+      y2: this.y - centerVect.y - marginY + widthVect.y,
+      height: Math.sqrt(
+        Math.pow(heightVect.x, 2) +
+        Math.pow(heightVect.y + 2 * marginY, 2)
+      )
+    };
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.configurable.js

@@ -0,0 +1,116 @@
+;(function() {
+  'use strict';
+
+  /**
+   * This utils aims to facilitate the manipulation of each instance setting.
+   * Using a function instead of an object brings two main advantages: First,
+   * it will be easier in the future to catch settings updates through a
+   * function than an object. Second, giving it a full object will "merge" it
+   * to the settings object properly, keeping us to have to always add a loop.
+   *
+   * @return {configurable} The "settings" function.
+   */
+  var configurable = function() {
+    var i,
+        l,
+        data = {},
+        datas = Array.prototype.slice.call(arguments, 0);
+
+    /**
+     * The method to use to set or get any property of this instance.
+     *
+     * @param  {string|object}    a1 If it is a string and if a2 is undefined,
+     *                               then it will return the corresponding
+     *                               property. If it is a string and if a2 is
+     *                               set, then it will set a2 as the property
+     *                               corresponding to a1, and return this. If
+     *                               it is an object, then each pair string +
+     *                               object(or any other type) will be set as a
+     *                               property.
+     * @param  {*?}               a2 The new property corresponding to a1 if a1
+     *                               is a string.
+     * @return {*|configurable}      Returns itself or the corresponding
+     *                               property.
+     *
+     * Polymorphism:
+     * *************
+     * Here are some basic use examples:
+     *
+     *  > settings = new configurable();
+     *  > settings('mySetting', 42);
+     *  > settings('mySetting'); // Logs: 42
+     *  > settings('mySetting', 123);
+     *  > settings('mySetting'); // Logs: 123
+     *  > settings({mySetting: 456});
+     *  > settings('mySetting'); // Logs: 456
+     *
+     * Also, it is possible to use the function as a fallback:
+     *  > settings({mySetting: 'abc'}, 'mySetting');  // Logs: 'abc'
+     *  > settings({hisSetting: 'abc'}, 'mySetting'); // Logs: 456
+     */
+    var settings = function(a1, a2) {
+      var o,
+          i,
+          l,
+          k;
+
+      if (arguments.length === 1 && typeof a1 === 'string') {
+        if (data[a1] !== undefined)
+          return data[a1];
+        for (i = 0, l = datas.length; i < l; i++)
+          if (datas[i][a1] !== undefined)
+            return datas[i][a1];
+        return undefined;
+      } else if (typeof a1 === 'object' && typeof a2 === 'string') {
+        return (a1 || {})[a2] !== undefined ? a1[a2] : settings(a2);
+      } else {
+        o = (typeof a1 === 'object' && a2 === undefined) ? a1 : {};
+
+        if (typeof a1 === 'string')
+          o[a1] = a2;
+
+        for (i = 0, k = Object.keys(o), l = k.length; i < l; i++)
+          data[k[i]] = o[k[i]];
+
+        return this;
+      }
+    };
+
+    /**
+     * This method returns a new configurable function, with new objects
+     *
+     * @param  {object*}  Any number of objects to search in.
+     * @return {function} Returns the function. Check its documentation to know
+     *                    more about how it works.
+     */
+    settings.embedObjects = function() {
+      var args = datas.concat(
+        data
+      ).concat(
+        Array.prototype.splice.call(arguments, 0)
+      );
+
+      return configurable.apply({}, args);
+    };
+
+    // Initialize
+    for (i = 0, l = arguments.length; i < l; i++)
+      settings(arguments[i]);
+
+    return settings;
+  };
+
+  /**
+   * EXPORT:
+   * *******
+   */
+  if (typeof this.sigma !== 'undefined') {
+    this.sigma.classes = this.sigma.classes || {};
+    this.sigma.classes.configurable = configurable;
+  } else if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = configurable;
+    exports.configurable = configurable;
+  } else
+    this.configurable = configurable;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.dispatcher.js

@@ -0,0 +1,204 @@
+;(function() {
+  'use strict';
+
+  /**
+   * Dispatcher constructor.
+   *
+   * @return {dispatcher} The new dispatcher instance.
+   */
+  var dispatcher = function() {
+    Object.defineProperty(this, '_handlers', {
+      value: {}
+    });
+  };
+
+
+
+
+  /**
+   * Will execute the handler everytime that the indicated event (or the
+   * indicated events) will be triggered.
+   *
+   * @param  {string}           events  The name of the event (or the events
+   *                                    separated by spaces).
+   * @param  {function(Object)} handler The handler to bind.
+   * @return {dispatcher}               Returns the instance itself.
+   */
+  dispatcher.prototype.bind = function(events, handler) {
+    var i,
+        l,
+        event,
+        eArray;
+
+    if (
+      arguments.length === 1 &&
+      typeof arguments[0] === 'object'
+    )
+      for (events in arguments[0])
+        this.bind(events, arguments[0][events]);
+    else if (
+      arguments.length === 2 &&
+      typeof arguments[1] === 'function'
+    ) {
+      eArray = typeof events === 'string' ? events.split(' ') : events;
+
+      for (i = 0, l = eArray.length; i !== l; i += 1) {
+        event = eArray[i];
+
+        // Check that event is not '':
+        if (!event)
+          continue;
+
+        if (!this._handlers[event])
+          this._handlers[event] = [];
+
+        // Using an object instead of directly the handler will make possible
+        // later to add flags
+        this._handlers[event].push({
+          handler: handler
+        });
+      }
+    } else
+      throw 'bind: Wrong arguments.';
+
+    return this;
+  };
+
+  /**
+   * Removes the handler from a specified event (or specified events).
+   *
+   * @param  {?string}           events  The name of the event (or the events
+   *                                     separated by spaces). If undefined,
+   *                                     then all handlers are removed.
+   * @param  {?function(object)} handler The handler to unbind. If undefined,
+   *                                     each handler bound to the event or the
+   *                                     events will be removed.
+   * @return {dispatcher}                Returns the instance itself.
+   */
+  dispatcher.prototype.unbind = function(events, handler) {
+    var i,
+        n,
+        j,
+        m,
+        k,
+        a,
+        event,
+        eArray = typeof events === 'string' ? events.split(' ') : events;
+
+    if (!arguments.length) {
+      for (k in this._handlers)
+        delete this._handlers[k];
+      return this;
+    }
+
+    if (handler) {
+      for (i = 0, n = eArray.length; i !== n; i += 1) {
+        event = eArray[i];
+        if (this._handlers[event]) {
+          a = [];
+          for (j = 0, m = this._handlers[event].length; j !== m; j += 1)
+            if (this._handlers[event][j].handler !== handler)
+              a.push(this._handlers[event][j]);
+
+          this._handlers[event] = a;
+        }
+
+        if (this._handlers[event] && this._handlers[event].length === 0)
+          delete this._handlers[event];
+      }
+    } else
+      for (i = 0, n = eArray.length; i !== n; i += 1)
+        delete this._handlers[eArray[i]];
+
+    return this;
+  };
+
+  /**
+   * Executes each handler bound to the event
+   *
+   * @param  {string}     events The name of the event (or the events separated
+   *                             by spaces).
+   * @param  {?object}    data   The content of the event (optional).
+   * @return {dispatcher}        Returns the instance itself.
+   */
+  dispatcher.prototype.dispatchEvent = function(events, data) {
+    var i,
+        n,
+        j,
+        m,
+        a,
+        event,
+        eventName,
+        self = this,
+        eArray = typeof events === 'string' ? events.split(' ') : events;
+
+    data = data === undefined ? {} : data;
+
+    for (i = 0, n = eArray.length; i !== n; i += 1) {
+      eventName = eArray[i];
+
+      if (this._handlers[eventName]) {
+        event = self.getEvent(eventName, data);
+        a = [];
+
+        for (j = 0, m = this._handlers[eventName].length; j !== m; j += 1) {
+          this._handlers[eventName][j].handler(event);
+          if (!this._handlers[eventName][j].one)
+            a.push(this._handlers[eventName][j]);
+        }
+
+        this._handlers[eventName] = a;
+      }
+    }
+
+    return this;
+  };
+
+  /**
+   * Return an event object.
+   *
+   * @param  {string}  events The name of the event.
+   * @param  {?object} data   The content of the event (optional).
+   * @return {object}         Returns the instance itself.
+   */
+  dispatcher.prototype.getEvent = function(event, data) {
+    return {
+      type: event,
+      data: data || {},
+      target: this
+    };
+  };
+
+  /**
+   * A useful function to deal with inheritance. It will make the target
+   * inherit the prototype of the class dispatcher as well as its constructor.
+   *
+   * @param {object} target The target.
+   */
+  dispatcher.extend = function(target, args) {
+    var k;
+
+    for (k in dispatcher.prototype)
+      if (dispatcher.prototype.hasOwnProperty(k))
+        target[k] = dispatcher.prototype[k];
+
+    dispatcher.apply(target, args);
+  };
+
+
+
+
+  /**
+   * EXPORT:
+   * *******
+   */
+  if (typeof this.sigma !== 'undefined') {
+    this.sigma.classes = this.sigma.classes || {};
+    this.sigma.classes.dispatcher = dispatcher;
+  } else if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = dispatcher;
+    exports.dispatcher = dispatcher;
+  } else
+    this.dispatcher = dispatcher;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.edgequad.js

@@ -0,0 +1,832 @@
+;(function(undefined) {
+  'use strict';
+
+  /**
+   * Sigma Quadtree Module for edges
+   * ===============================
+   *
+   * Author: Sébastien Heymann,
+   *   from the quad of Guillaume Plique (Yomguithereal)
+   * Version: 0.2
+   */
+
+
+
+  /**
+   * Quad Geometric Operations
+   * -------------------------
+   *
+   * A useful batch of geometric operations used by the quadtree.
+   */
+
+  var _geom = {
+
+    /**
+     * Transforms a graph node with x, y and size into an
+     * axis-aligned square.
+     *
+     * @param  {object} A graph node with at least a point (x, y) and a size.
+     * @return {object} A square: two points (x1, y1), (x2, y2) and height.
+     */
+    pointToSquare: function(n) {
+      return {
+        x1: n.x - n.size,
+        y1: n.y - n.size,
+        x2: n.x + n.size,
+        y2: n.y - n.size,
+        height: n.size * 2
+      };
+    },
+
+    /**
+     * Transforms a graph edge with x1, y1, x2, y2 and size into an
+     * axis-aligned square.
+     *
+     * @param  {object} A graph edge with at least two points
+     *                  (x1, y1), (x2, y2) and a size.
+     * @return {object} A square: two points (x1, y1), (x2, y2) and height.
+     */
+    lineToSquare: function(e) {
+      if (e.y1 < e.y2) {
+        // (e.x1, e.y1) on top
+        if (e.x1 < e.x2) {
+          // (e.x1, e.y1) on left
+          return {
+            x1: e.x1 - e.size,
+            y1: e.y1 - e.size,
+            x2: e.x2 + e.size,
+            y2: e.y1 - e.size,
+            height: e.y2 - e.y1 + e.size * 2
+          };
+        }
+        // (e.x1, e.y1) on right
+        return {
+          x1: e.x2 - e.size,
+          y1: e.y1 - e.size,
+          x2: e.x1 + e.size,
+          y2: e.y1 - e.size,
+          height: e.y2 - e.y1 + e.size * 2
+        };
+      }
+
+      // (e.x2, e.y2) on top
+      if (e.x1 < e.x2) {
+        // (e.x1, e.y1) on left
+        return {
+          x1: e.x1 - e.size,
+          y1: e.y2 - e.size,
+          x2: e.x2 + e.size,
+          y2: e.y2 - e.size,
+          height: e.y1 - e.y2 + e.size * 2
+        };
+      }
+      // (e.x2, e.y2) on right
+      return {
+        x1: e.x2 - e.size,
+        y1: e.y2 - e.size,
+        x2: e.x1 + e.size,
+        y2: e.y2 - e.size,
+        height: e.y1 - e.y2 + e.size * 2
+      };
+    },
+
+    /**
+     * Transforms a graph edge of type 'curve' with x1, y1, x2, y2,
+     * control point and size into an axis-aligned square.
+     *
+     * @param  {object} e  A graph edge with at least two points
+     *                     (x1, y1), (x2, y2) and a size.
+     * @param  {object} cp A control point (x,y).
+     * @return {object}    A square: two points (x1, y1), (x2, y2) and height.
+     */
+    quadraticCurveToSquare: function(e, cp) {
+      var pt = sigma.utils.getPointOnQuadraticCurve(
+        0.5,
+        e.x1,
+        e.y1,
+        e.x2,
+        e.y2,
+        cp.x,
+        cp.y
+      );
+
+      // Bounding box of the two points and the point at the middle of the
+      // curve:
+      var minX = Math.min(e.x1, e.x2, pt.x),
+          maxX = Math.max(e.x1, e.x2, pt.x),
+          minY = Math.min(e.y1, e.y2, pt.y),
+          maxY = Math.max(e.y1, e.y2, pt.y);
+
+      return {
+        x1: minX - e.size,
+        y1: minY - e.size,
+        x2: maxX + e.size,
+        y2: minY - e.size,
+        height: maxY - minY + e.size * 2
+      };
+    },
+
+    /**
+     * Transforms a graph self loop into an axis-aligned square.
+     *
+     * @param  {object} n A graph node with a point (x, y) and a size.
+     * @return {object}   A square: two points (x1, y1), (x2, y2) and height.
+     */
+    selfLoopToSquare: function(n) {
+      // Fitting to the curve is too costly, we compute a larger bounding box
+      // using the control points:
+      var cp = sigma.utils.getSelfLoopControlPoints(n.x, n.y, n.size);
+
+      // Bounding box of the point and the two control points:
+      var minX = Math.min(n.x, cp.x1, cp.x2),
+          maxX = Math.max(n.x, cp.x1, cp.x2),
+          minY = Math.min(n.y, cp.y1, cp.y2),
+          maxY = Math.max(n.y, cp.y1, cp.y2);
+
+      return {
+        x1: minX - n.size,
+        y1: minY - n.size,
+        x2: maxX + n.size,
+        y2: minY - n.size,
+        height: maxY - minY + n.size * 2
+      };
+    },
+
+    /**
+     * Checks whether a rectangle is axis-aligned.
+     *
+     * @param  {object}  A rectangle defined by two points
+     *                   (x1, y1) and (x2, y2).
+     * @return {boolean} True if the rectangle is axis-aligned.
+     */
+    isAxisAligned: function(r) {
+      return r.x1 === r.x2 || r.y1 === r.y2;
+    },
+
+    /**
+     * Compute top points of an axis-aligned rectangle. This is useful in
+     * cases when the rectangle has been rotated (left, right or bottom up) and
+     * later operations need to know the top points.
+     *
+     * @param  {object} An axis-aligned rectangle defined by two points
+     *                  (x1, y1), (x2, y2) and height.
+     * @return {object} A rectangle: two points (x1, y1), (x2, y2) and height.
+     */
+    axisAlignedTopPoints: function(r) {
+
+      // Basic
+      if (r.y1 === r.y2 && r.x1 < r.x2)
+        return r;
+
+      // Rotated to right
+      if (r.x1 === r.x2 && r.y2 > r.y1)
+        return {
+          x1: r.x1 - r.height, y1: r.y1,
+          x2: r.x1, y2: r.y1,
+          height: r.height
+        };
+
+      // Rotated to left
+      if (r.x1 === r.x2 && r.y2 < r.y1)
+        return {
+          x1: r.x1, y1: r.y2,
+          x2: r.x2 + r.height, y2: r.y2,
+          height: r.height
+        };
+
+      // Bottom's up
+      return {
+        x1: r.x2, y1: r.y1 - r.height,
+        x2: r.x1, y2: r.y1 - r.height,
+        height: r.height
+      };
+    },
+
+    /**
+     * Get coordinates of a rectangle's lower left corner from its top points.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @return {object} Coordinates of the corner (x, y).
+     */
+    lowerLeftCoor: function(r) {
+      var width = (
+        Math.sqrt(
+          Math.pow(r.x2 - r.x1, 2) +
+          Math.pow(r.y2 - r.y1, 2)
+        )
+      );
+
+      return {
+        x: r.x1 - (r.y2 - r.y1) * r.height / width,
+        y: r.y1 + (r.x2 - r.x1) * r.height / width
+      };
+    },
+
+    /**
+     * Get coordinates of a rectangle's lower right corner from its top points
+     * and its lower left corner.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @param  {object} A corner's coordinates (x, y).
+     * @return {object} Coordinates of the corner (x, y).
+     */
+    lowerRightCoor: function(r, llc) {
+      return {
+        x: llc.x - r.x1 + r.x2,
+        y: llc.y - r.y1 + r.y2
+      };
+    },
+
+    /**
+     * Get the coordinates of all the corners of a rectangle from its top point.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @return {array}  An array of the four corners' coordinates (x, y).
+     */
+    rectangleCorners: function(r) {
+      var llc = this.lowerLeftCoor(r),
+          lrc = this.lowerRightCoor(r, llc);
+
+      return [
+        {x: r.x1, y: r.y1},
+        {x: r.x2, y: r.y2},
+        {x: llc.x, y: llc.y},
+        {x: lrc.x, y: lrc.y}
+      ];
+    },
+
+    /**
+     * Split a square defined by its boundaries into four.
+     *
+     * @param  {object} Boundaries of the square (x, y, width, height).
+     * @return {array}  An array containing the four new squares, themselves
+     *                  defined by an array of their four corners (x, y).
+     */
+    splitSquare: function(b) {
+      return [
+        [
+          {x: b.x, y: b.y},
+          {x: b.x + b.width / 2, y: b.y},
+          {x: b.x, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2}
+        ],
+        [
+          {x: b.x + b.width / 2, y: b.y},
+          {x: b.x + b.width, y: b.y},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x + b.width, y: b.y + b.height / 2}
+        ],
+        [
+          {x: b.x, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x, y: b.y + b.height},
+          {x: b.x + b.width / 2, y: b.y + b.height}
+        ],
+        [
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x + b.width, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height},
+          {x: b.x + b.width, y: b.y + b.height}
+        ]
+      ];
+    },
+
+    /**
+     * Compute the four axis between corners of rectangle A and corners of
+     * rectangle B. This is needed later to check an eventual collision.
+     *
+     * @param  {array} An array of rectangle A's four corners (x, y).
+     * @param  {array} An array of rectangle B's four corners (x, y).
+     * @return {array} An array of four axis defined by their coordinates (x,y).
+     */
+    axis: function(c1, c2) {
+      return [
+        {x: c1[1].x - c1[0].x, y: c1[1].y - c1[0].y},
+        {x: c1[1].x - c1[3].x, y: c1[1].y - c1[3].y},
+        {x: c2[0].x - c2[2].x, y: c2[0].y - c2[2].y},
+        {x: c2[0].x - c2[1].x, y: c2[0].y - c2[1].y}
+      ];
+    },
+
+    /**
+     * Project a rectangle's corner on an axis.
+     *
+     * @param  {object} Coordinates of a corner (x, y).
+     * @param  {object} Coordinates of an axis (x, y).
+     * @return {object} The projection defined by coordinates (x, y).
+     */
+    projection: function(c, a) {
+      var l = (
+        (c.x * a.x + c.y * a.y) /
+        (Math.pow(a.x, 2) + Math.pow(a.y, 2))
+      );
+
+      return {
+        x: l * a.x,
+        y: l * a.y
+      };
+    },
+
+    /**
+     * Check whether two rectangles collide on one particular axis.
+     *
+     * @param  {object}   An axis' coordinates (x, y).
+     * @param  {array}    Rectangle A's corners.
+     * @param  {array}    Rectangle B's corners.
+     * @return {boolean}  True if the rectangles collide on the axis.
+     */
+    axisCollision: function(a, c1, c2) {
+      var sc1 = [],
+          sc2 = [];
+
+      for (var ci = 0; ci < 4; ci++) {
+        var p1 = this.projection(c1[ci], a),
+            p2 = this.projection(c2[ci], a);
+
+        sc1.push(p1.x * a.x + p1.y * a.y);
+        sc2.push(p2.x * a.x + p2.y * a.y);
+      }
+
+      var maxc1 = Math.max.apply(Math, sc1),
+          maxc2 = Math.max.apply(Math, sc2),
+          minc1 = Math.min.apply(Math, sc1),
+          minc2 = Math.min.apply(Math, sc2);
+
+      return (minc2 <= maxc1 && maxc2 >= minc1);
+    },
+
+    /**
+     * Check whether two rectangles collide on each one of their four axis. If
+     * all axis collide, then the two rectangles do collide on the plane.
+     *
+     * @param  {array}    Rectangle A's corners.
+     * @param  {array}    Rectangle B's corners.
+     * @return {boolean}  True if the rectangles collide.
+     */
+    collision: function(c1, c2) {
+      var axis = this.axis(c1, c2),
+          col = true;
+
+      for (var i = 0; i < 4; i++)
+        col = col && this.axisCollision(axis[i], c1, c2);
+
+      return col;
+    }
+  };
+
+
+  /**
+   * Quad Functions
+   * ------------
+   *
+   * The Quadtree functions themselves.
+   * For each of those functions, we consider that in a splitted quad, the
+   * index of each node is the following:
+   * 0: top left
+   * 1: top right
+   * 2: bottom left
+   * 3: bottom right
+   *
+   * Moreover, the hereafter quad's philosophy is to consider that if an element
+   * collides with more than one nodes, this element belongs to each of the
+   * nodes it collides with where other would let it lie on a higher node.
+   */
+
+  /**
+   * Get the index of the node containing the point in the quad
+   *
+   * @param  {object}  point      A point defined by coordinates (x, y).
+   * @param  {object}  quadBounds Boundaries of the quad (x, y, width, heigth).
+   * @return {integer}            The index of the node containing the point.
+   */
+  function _quadIndex(point, quadBounds) {
+    var xmp = quadBounds.x + quadBounds.width / 2,
+        ymp = quadBounds.y + quadBounds.height / 2,
+        top = (point.y < ymp),
+        left = (point.x < xmp);
+
+    if (top) {
+      if (left)
+        return 0;
+      else
+        return 1;
+    }
+    else {
+      if (left)
+        return 2;
+      else
+        return 3;
+    }
+  }
+
+  /**
+   * Get a list of indexes of nodes containing an axis-aligned rectangle
+   *
+   * @param  {object}  rectangle   A rectangle defined by two points (x1, y1),
+   *                               (x2, y2) and height.
+   * @param  {array}   quadCorners An array of the quad nodes' corners.
+   * @return {array}               An array of indexes containing one to
+   *                               four integers.
+   */
+  function _quadIndexes(rectangle, quadCorners) {
+    var indexes = [];
+
+    // Iterating through quads
+    for (var i = 0; i < 4; i++)
+      if ((rectangle.x2 >= quadCorners[i][0].x) &&
+          (rectangle.x1 <= quadCorners[i][1].x) &&
+          (rectangle.y1 + rectangle.height >= quadCorners[i][0].y) &&
+          (rectangle.y1 <= quadCorners[i][2].y))
+        indexes.push(i);
+
+    return indexes;
+  }
+
+  /**
+   * Get a list of indexes of nodes containing a non-axis-aligned rectangle
+   *
+   * @param  {array}  corners      An array containing each corner of the
+   *                               rectangle defined by its coordinates (x, y).
+   * @param  {array}  quadCorners  An array of the quad nodes' corners.
+   * @return {array}               An array of indexes containing one to
+   *                               four integers.
+   */
+  function _quadCollision(corners, quadCorners) {
+    var indexes = [];
+
+    // Iterating through quads
+    for (var i = 0; i < 4; i++)
+      if (_geom.collision(corners, quadCorners[i]))
+        indexes.push(i);
+
+    return indexes;
+  }
+
+  /**
+   * Subdivide a quad by creating a node at a precise index. The function does
+   * not generate all four nodes not to potentially create unused nodes.
+   *
+   * @param  {integer}  index The index of the node to create.
+   * @param  {object}   quad  The quad object to subdivide.
+   * @return {object}         A new quad representing the node created.
+   */
+  function _quadSubdivide(index, quad) {
+    var next = quad.level + 1,
+        subw = Math.round(quad.bounds.width / 2),
+        subh = Math.round(quad.bounds.height / 2),
+        qx = Math.round(quad.bounds.x),
+        qy = Math.round(quad.bounds.y),
+        x,
+        y;
+
+    switch (index) {
+      case 0:
+        x = qx;
+        y = qy;
+        break;
+      case 1:
+        x = qx + subw;
+        y = qy;
+        break;
+      case 2:
+        x = qx;
+        y = qy + subh;
+        break;
+      case 3:
+        x = qx + subw;
+        y = qy + subh;
+        break;
+    }
+
+    return _quadTree(
+      {x: x, y: y, width: subw, height: subh},
+      next,
+      quad.maxElements,
+      quad.maxLevel
+    );
+  }
+
+  /**
+   * Recursively insert an element into the quadtree. Only points
+   * with size, i.e. axis-aligned squares, may be inserted with this
+   * method.
+   *
+   * @param  {object}  el         The element to insert in the quadtree.
+   * @param  {object}  sizedPoint A sized point defined by two top points
+   *                              (x1, y1), (x2, y2) and height.
+   * @param  {object}  quad       The quad in which to insert the element.
+   * @return {undefined}          The function does not return anything.
+   */
+  function _quadInsert(el, sizedPoint, quad) {
+    if (quad.level < quad.maxLevel) {
+
+      // Searching appropriate quads
+      var indexes = _quadIndexes(sizedPoint, quad.corners);
+
+      // Iterating
+      for (var i = 0, l = indexes.length; i < l; i++) {
+
+        // Subdividing if necessary
+        if (quad.nodes[indexes[i]] === undefined)
+          quad.nodes[indexes[i]] = _quadSubdivide(indexes[i], quad);
+
+        // Recursion
+        _quadInsert(el, sizedPoint, quad.nodes[indexes[i]]);
+      }
+    }
+    else {
+
+      // Pushing the element in a leaf node
+      quad.elements.push(el);
+    }
+  }
+
+  /**
+   * Recursively retrieve every elements held by the node containing the
+   * searched point.
+   *
+   * @param  {object}  point The searched point (x, y).
+   * @param  {object}  quad  The searched quad.
+   * @return {array}         An array of elements contained in the relevant
+   *                         node.
+   */
+  function _quadRetrievePoint(point, quad) {
+    if (quad.level < quad.maxLevel) {
+      var index = _quadIndex(point, quad.bounds);
+
+      // If node does not exist we return an empty list
+      if (quad.nodes[index] !== undefined) {
+        return _quadRetrievePoint(point, quad.nodes[index]);
+      }
+      else {
+        return [];
+      }
+    }
+    else {
+      return quad.elements;
+    }
+  }
+
+  /**
+   * Recursively retrieve every elements contained within an rectangular area
+   * that may or may not be axis-aligned.
+   *
+   * @param  {object|array} rectData       The searched area defined either by
+   *                                       an array of four corners (x, y) in
+   *                                       the case of a non-axis-aligned
+   *                                       rectangle or an object with two top
+   *                                       points (x1, y1), (x2, y2) and height.
+   * @param  {object}       quad           The searched quad.
+   * @param  {function}     collisionFunc  The collision function used to search
+   *                                       for node indexes.
+   * @param  {array?}       els            The retrieved elements.
+   * @return {array}                       An array of elements contained in the
+   *                                       area.
+   */
+  function _quadRetrieveArea(rectData, quad, collisionFunc, els) {
+    els = els || {};
+
+    if (quad.level < quad.maxLevel) {
+      var indexes = collisionFunc(rectData, quad.corners);
+
+      for (var i = 0, l = indexes.length; i < l; i++)
+        if (quad.nodes[indexes[i]] !== undefined)
+          _quadRetrieveArea(
+            rectData,
+            quad.nodes[indexes[i]],
+            collisionFunc,
+            els
+          );
+    } else
+      for (var j = 0, m = quad.elements.length; j < m; j++)
+        if (els[quad.elements[j].id] === undefined)
+          els[quad.elements[j].id] = quad.elements[j];
+
+    return els;
+  }
+
+  /**
+   * Creates the quadtree object itself.
+   *
+   * @param  {object}   bounds       The boundaries of the quad defined by an
+   *                                 origin (x, y), width and heigth.
+   * @param  {integer}  level        The level of the quad in the tree.
+   * @param  {integer}  maxElements  The max number of element in a leaf node.
+   * @param  {integer}  maxLevel     The max recursion level of the tree.
+   * @return {object}                The quadtree object.
+   */
+  function _quadTree(bounds, level, maxElements, maxLevel) {
+    return {
+      level: level || 0,
+      bounds: bounds,
+      corners: _geom.splitSquare(bounds),
+      maxElements: maxElements || 40,
+      maxLevel: maxLevel || 8,
+      elements: [],
+      nodes: []
+    };
+  }
+
+
+  /**
+   * Sigma Quad Constructor
+   * ----------------------
+   *
+   * The edgequad API as exposed to sigma.
+   */
+
+  /**
+   * The edgequad core that will become the sigma interface with the quadtree.
+   *
+   * property {object} _tree     Property holding the quadtree object.
+   * property {object} _geom     Exposition of the _geom namespace for testing.
+   * property {object} _cache    Cache for the area method.
+   * property {boolean} _enabled Can index and retreive elements.
+   */
+  var edgequad = function() {
+    this._geom = _geom;
+    this._tree = null;
+    this._cache = {
+      query: false,
+      result: false
+    };
+    this._enabled = true;
+  };
+
+  /**
+   * Index a graph by inserting its edges into the quadtree.
+   *
+   * @param  {object} graph   A graph instance.
+   * @param  {object} params  An object of parameters with at least the quad
+   *                          bounds.
+   * @return {object}         The quadtree object.
+   *
+   * Parameters:
+   * ----------
+   * bounds:      {object}   boundaries of the quad defined by its origin (x, y)
+   *                         width and heigth.
+   * prefix:      {string?}  a prefix for edge geometric attributes.
+   * maxElements: {integer?} the max number of elements in a leaf node.
+   * maxLevel:    {integer?} the max recursion level of the tree.
+   */
+  edgequad.prototype.index = function(graph, params) {
+    if (!this._enabled)
+      return this._tree;
+
+    // Enforcing presence of boundaries
+    if (!params.bounds)
+      throw 'sigma.classes.edgequad.index: bounds information not given.';
+
+    // Prefix
+    var prefix = params.prefix || '',
+        cp,
+        source,
+        target,
+        n,
+        e;
+
+    // Building the tree
+    this._tree = _quadTree(
+      params.bounds,
+      0,
+      params.maxElements,
+      params.maxLevel
+    );
+
+    var edges = graph.edges();
+
+    // Inserting graph edges into the tree
+    for (var i = 0, l = edges.length; i < l; i++) {
+      source = graph.nodes(edges[i].source);
+      target = graph.nodes(edges[i].target);
+      e = {
+        x1: source[prefix + 'x'],
+        y1: source[prefix + 'y'],
+        x2: target[prefix + 'x'],
+        y2: target[prefix + 'y'],
+        size: edges[i][prefix + 'size'] || 0
+      };
+
+      // Inserting edge
+      if (edges[i].type === 'curve' || edges[i].type === 'curvedArrow') {
+        if (source.id === target.id) {
+          n = {
+            x: source[prefix + 'x'],
+            y: source[prefix + 'y'],
+            size: source[prefix + 'size'] || 0
+          };
+          _quadInsert(
+            edges[i],
+            _geom.selfLoopToSquare(n),
+            this._tree);
+        }
+        else {
+          cp = sigma.utils.getQuadraticControlPoint(e.x1, e.y1, e.x2, e.y2);
+          _quadInsert(
+            edges[i],
+            _geom.quadraticCurveToSquare(e, cp),
+            this._tree);
+        }
+      }
+      else {
+        _quadInsert(
+          edges[i],
+          _geom.lineToSquare(e),
+          this._tree);
+      }
+    }
+
+    // Reset cache:
+    this._cache = {
+      query: false,
+      result: false
+    };
+
+    // remove?
+    return this._tree;
+  };
+
+  /**
+   * Retrieve every graph edges held by the quadtree node containing the
+   * searched point.
+   *
+   * @param  {number} x of the point.
+   * @param  {number} y of the point.
+   * @return {array}  An array of edges retrieved.
+   */
+  edgequad.prototype.point = function(x, y) {
+    if (!this._enabled)
+      return [];
+
+    return this._tree ?
+      _quadRetrievePoint({x: x, y: y}, this._tree) || [] :
+      [];
+  };
+
+  /**
+   * Retrieve every graph edges within a rectangular area. The methods keep the
+   * last area queried in cache for optimization reason and will act differently
+   * for the same reason if the area is axis-aligned or not.
+   *
+   * @param  {object} A rectangle defined by two top points (x1, y1), (x2, y2)
+   *                  and height.
+   * @return {array}  An array of edges retrieved.
+   */
+  edgequad.prototype.area = function(rect) {
+    if (!this._enabled)
+      return [];
+
+    var serialized = JSON.stringify(rect),
+        collisionFunc,
+        rectData;
+
+    // Returning cache?
+    if (this._cache.query === serialized)
+      return this._cache.result;
+
+    // Axis aligned ?
+    if (_geom.isAxisAligned(rect)) {
+      collisionFunc = _quadIndexes;
+      rectData = _geom.axisAlignedTopPoints(rect);
+    }
+    else {
+      collisionFunc = _quadCollision;
+      rectData = _geom.rectangleCorners(rect);
+    }
+
+    // Retrieving edges
+    var edges = this._tree ?
+      _quadRetrieveArea(
+        rectData,
+        this._tree,
+        collisionFunc
+      ) :
+      [];
+
+    // Object to array
+    var edgesArray = [];
+    for (var i in edges)
+      edgesArray.push(edges[i]);
+
+    // Caching
+    this._cache.query = serialized;
+    this._cache.result = edgesArray;
+
+    return edgesArray;
+  };
+
+
+  /**
+   * EXPORT:
+   * *******
+   */
+  if (typeof this.sigma !== 'undefined') {
+    this.sigma.classes = this.sigma.classes || {};
+    this.sigma.classes.edgequad = edgequad;
+  } else if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = edgequad;
+    exports.edgequad = edgequad;
+  } else
+    this.edgequad = edgequad;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.graph.js

@@ -0,0 +1,859 @@
+;(function(undefined) {
+  'use strict';
+
+  var _methods = Object.create(null),
+      _indexes = Object.create(null),
+      _initBindings = Object.create(null),
+      _methodBindings = Object.create(null),
+      _methodBeforeBindings = Object.create(null),
+      _defaultSettings = {
+        immutable: true,
+        clone: true
+      },
+      _defaultSettingsFunction = function(key) {
+        return _defaultSettings[key];
+      };
+
+  /**
+   * The graph constructor. It initializes the data and the indexes, and binds
+   * the custom indexes and methods to its own scope.
+   *
+   * Recognized parameters:
+   * **********************
+   * Here is the exhaustive list of every accepted parameters in the settings
+   * object:
+   *
+   *   {boolean} clone     Indicates if the data have to be cloned in methods
+   *                       to add nodes or edges.
+   *   {boolean} immutable Indicates if nodes "id" values and edges "id",
+   *                       "source" and "target" values must be set as
+   *                       immutable.
+   *
+   * @param  {?configurable} settings Eventually a settings function.
+   * @return {graph}                  The new graph instance.
+   */
+  var graph = function(settings) {
+    var k,
+        fn,
+        data;
+
+    /**
+     * DATA:
+     * *****
+     * Every data that is callable from graph methods are stored in this "data"
+     * object. This object will be served as context for all these methods,
+     * and it is possible to add other type of data in it.
+     */
+    data = {
+      /**
+       * SETTINGS FUNCTION:
+       * ******************
+       */
+      settings: settings || _defaultSettingsFunction,
+
+      /**
+       * MAIN DATA:
+       * **********
+       */
+      nodesArray: [],
+      edgesArray: [],
+
+      /**
+       * GLOBAL INDEXES:
+       * ***************
+       * These indexes just index data by ids.
+       */
+      nodesIndex: Object.create(null),
+      edgesIndex: Object.create(null),
+
+      /**
+       * LOCAL INDEXES:
+       * **************
+       * These indexes refer from node to nodes. Each key is an id, and each
+       * value is the array of the ids of related nodes.
+       */
+      inNeighborsIndex: Object.create(null),
+      outNeighborsIndex: Object.create(null),
+      allNeighborsIndex: Object.create(null),
+
+      inNeighborsCount: Object.create(null),
+      outNeighborsCount: Object.create(null),
+      allNeighborsCount: Object.create(null)
+    };
+
+    // Execute bindings:
+    for (k in _initBindings)
+      _initBindings[k].call(data);
+
+    // Add methods to both the scope and the data objects:
+    for (k in _methods) {
+      fn = __bindGraphMethod(k, data, _methods[k]);
+      this[k] = fn;
+      data[k] = fn;
+    }
+  };
+
+
+
+
+  /**
+   * A custom tool to bind methods such that function that are bound to it will
+   * be executed anytime the method is called.
+   *
+   * @param  {string}   methodName The name of the method to bind.
+   * @param  {object}   scope      The scope where the method must be executed.
+   * @param  {function} fn         The method itself.
+   * @return {function}            The new method.
+   */
+  function __bindGraphMethod(methodName, scope, fn) {
+    var result = function() {
+      var k,
+          res;
+
+      // Execute "before" bound functions:
+      for (k in _methodBeforeBindings[methodName])
+        _methodBeforeBindings[methodName][k].apply(scope, arguments);
+
+      // Apply the method:
+      res = fn.apply(scope, arguments);
+
+      // Execute bound functions:
+      for (k in _methodBindings[methodName])
+        _methodBindings[methodName][k].apply(scope, arguments);
+
+      // Return res:
+      return res;
+    };
+
+    return result;
+  }
+
+  /**
+   * This custom tool function removes every pair key/value from an hash. The
+   * goal is to avoid creating a new object while some other references are
+   * still hanging in some scopes...
+   *
+   * @param  {object} obj The object to empty.
+   * @return {object}     The empty object.
+   */
+  function __emptyObject(obj) {
+    var k;
+
+    for (k in obj)
+      if (!('hasOwnProperty' in obj) || obj.hasOwnProperty(k))
+        delete obj[k];
+
+    return obj;
+  }
+
+
+
+
+  /**
+   * This global method adds a method that will be bound to the futurly created
+   * graph instances.
+   *
+   * Since these methods will be bound to their scope when the instances are
+   * created, it does not use the prototype. Because of that, methods have to
+   * be added before instances are created to make them available.
+   *
+   * Here is an example:
+   *
+   *  > graph.addMethod('getNodesCount', function() {
+   *  >   return this.nodesArray.length;
+   *  > });
+   *  >
+   *  > var myGraph = new graph();
+   *  > console.log(myGraph.getNodesCount()); // outputs 0
+   *
+   * @param  {string}   methodName The name of the method.
+   * @param  {function} fn         The method itself.
+   * @return {object}              The global graph constructor.
+   */
+  graph.addMethod = function(methodName, fn) {
+    if (
+      typeof methodName !== 'string' ||
+      typeof fn !== 'function' ||
+      arguments.length !== 2
+    )
+      throw 'addMethod: Wrong arguments.';
+
+    if (_methods[methodName] || graph[methodName])
+      throw 'The method "' + methodName + '" already exists.';
+
+    _methods[methodName] = fn;
+    _methodBindings[methodName] = Object.create(null);
+    _methodBeforeBindings[methodName] = Object.create(null);
+
+    return this;
+  };
+
+  /**
+   * This global method returns true if the method has already been added, and
+   * false else.
+   *
+   * Here are some examples:
+   *
+   *  > graph.hasMethod('addNode'); // returns true
+   *  > graph.hasMethod('hasMethod'); // returns true
+   *  > graph.hasMethod('unexistingMethod'); // returns false
+   *
+   * @param  {string}  methodName The name of the method.
+   * @return {boolean}            The result.
+   */
+  graph.hasMethod = function(methodName) {
+    return !!(_methods[methodName] || graph[methodName]);
+  };
+
+  /**
+   * This global methods attaches a function to a method. Anytime the specified
+   * method is called, the attached function is called right after, with the
+   * same arguments and in the same scope. The attached function is called
+   * right before if the last argument is true, unless the method is the graph
+   * constructor.
+   *
+   * To attach a function to the graph constructor, use 'constructor' as the
+   * method name (first argument).
+   *
+   * The main idea is to have a clean way to keep custom indexes up to date,
+   * for instance:
+   *
+   *  > var timesAddNodeCalled = 0;
+   *  > graph.attach('addNode', 'timesAddNodeCalledInc', function() {
+   *  >   timesAddNodeCalled++;
+   *  > });
+   *  >
+   *  > var myGraph = new graph();
+   *  > console.log(timesAddNodeCalled); // outputs 0
+   *  >
+   *  > myGraph.addNode({ id: '1' }).addNode({ id: '2' });
+   *  > console.log(timesAddNodeCalled); // outputs 2
+   *
+   * The idea for calling a function before is to provide pre-processors, for
+   * instance:
+   *
+   *  > var colorPalette = { Person: '#C3CBE1', Place: '#9BDEBD' };
+   *  > graph.attach('addNode', 'applyNodeColorPalette', function(n) {
+   *  >   n.color = colorPalette[n.category];
+   *  > }, true);
+   *  >
+   *  > var myGraph = new graph();
+   *  > myGraph.addNode({ id: 'n0', category: 'Person' });
+   *  > console.log(myGraph.nodes('n0').color); // outputs '#C3CBE1'
+   *
+   * @param  {string}   methodName The name of the related method or
+   *                               "constructor".
+   * @param  {string}   key        The key to identify the function to attach.
+   * @param  {function} fn         The function to bind.
+   * @param  {boolean}  before     If true the function is called right before.
+   * @return {object}              The global graph constructor.
+   */
+  graph.attach = function(methodName, key, fn, before) {
+    if (
+      typeof methodName !== 'string' ||
+      typeof key !== 'string' ||
+      typeof fn !== 'function' ||
+      arguments.length < 3 ||
+      arguments.length > 4
+    )
+      throw 'attach: Wrong arguments.';
+
+    var bindings;
+
+    if (methodName === 'constructor')
+      bindings = _initBindings;
+    else {
+      if (before) {
+        if (!_methodBeforeBindings[methodName])
+        throw 'The method "' + methodName + '" does not exist.';
+
+        bindings = _methodBeforeBindings[methodName];
+      }
+      else {
+        if (!_methodBindings[methodName])
+          throw 'The method "' + methodName + '" does not exist.';
+
+        bindings = _methodBindings[methodName];
+      }
+    }
+
+    if (bindings[key])
+      throw 'A function "' + key + '" is already attached ' +
+            'to the method "' + methodName + '".';
+
+    bindings[key] = fn;
+
+    return this;
+  };
+
+  /**
+   * Alias of attach(methodName, key, fn, true).
+   */
+  graph.attachBefore = function(methodName, key, fn) {
+    return this.attach(methodName, key, fn, true);
+  };
+
+  /**
+   * This methods is just an helper to deal with custom indexes. It takes as
+   * arguments the name of the index and an object containing all the different
+   * functions to bind to the methods.
+   *
+   * Here is a basic example, that creates an index to keep the number of nodes
+   * in the current graph. It also adds a method to provide a getter on that
+   * new index:
+   *
+   *  > sigma.classes.graph.addIndex('nodesCount', {
+   *  >   constructor: function() {
+   *  >     this.nodesCount = 0;
+   *  >   },
+   *  >   addNode: function() {
+   *  >     this.nodesCount++;
+   *  >   },
+   *  >   dropNode: function() {
+   *  >     this.nodesCount--;
+   *  >   }
+   *  > });
+   *  >
+   *  > sigma.classes.graph.addMethod('getNodesCount', function() {
+   *  >   return this.nodesCount;
+   *  > });
+   *  >
+   *  > var myGraph = new sigma.classes.graph();
+   *  > console.log(myGraph.getNodesCount()); // outputs 0
+   *  >
+   *  > myGraph.addNode({ id: '1' }).addNode({ id: '2' });
+   *  > console.log(myGraph.getNodesCount()); // outputs 2
+   *
+   * @param  {string} name     The name of the index.
+   * @param  {object} bindings The object containing the functions to bind.
+   * @return {object}          The global graph constructor.
+   */
+  graph.addIndex = function(name, bindings) {
+    if (
+      typeof name !== 'string' ||
+      Object(bindings) !== bindings ||
+      arguments.length !== 2
+    )
+      throw 'addIndex: Wrong arguments.';
+
+    if (_indexes[name])
+      throw 'The index "' + name + '" already exists.';
+
+    var k;
+
+    // Store the bindings:
+    _indexes[name] = bindings;
+
+    // Attach the bindings:
+    for (k in bindings)
+      if (typeof bindings[k] !== 'function')
+        throw 'The bindings must be functions.';
+      else
+        graph.attach(k, name, bindings[k]);
+
+    return this;
+  };
+
+
+
+
+  /**
+   * This method adds a node to the graph. The node must be an object, with a
+   * string under the key "id". Except for this, it is possible to add any
+   * other attribute, that will be preserved all along the manipulations.
+   *
+   * If the graph option "clone" has a truthy value, the node will be cloned
+   * when added to the graph. Also, if the graph option "immutable" has a
+   * truthy value, its id will be defined as immutable.
+   *
+   * @param  {object} node The node to add.
+   * @return {object}      The graph instance.
+   */
+  graph.addMethod('addNode', function(node) {
+    // Check that the node is an object and has an id:
+    if (Object(node) !== node || arguments.length !== 1)
+      throw 'addNode: Wrong arguments.';
+
+    if (typeof node.id !== 'string' && typeof node.id !== 'number')
+      throw 'The node must have a string or number id.';
+
+    if (this.nodesIndex[node.id])
+      throw 'The node "' + node.id + '" already exists.';
+
+    var k,
+        id = node.id,
+        validNode = Object.create(null);
+
+    // Check the "clone" option:
+    if (this.settings('clone')) {
+      for (k in node)
+        if (k !== 'id')
+          validNode[k] = node[k];
+    } else
+      validNode = node;
+
+    // Check the "immutable" option:
+    if (this.settings('immutable'))
+      Object.defineProperty(validNode, 'id', {
+        value: id,
+        enumerable: true
+      });
+    else
+      validNode.id = id;
+
+    // Add empty containers for edges indexes:
+    this.inNeighborsIndex[id] = Object.create(null);
+    this.outNeighborsIndex[id] = Object.create(null);
+    this.allNeighborsIndex[id] = Object.create(null);
+
+    this.inNeighborsCount[id] = 0;
+    this.outNeighborsCount[id] = 0;
+    this.allNeighborsCount[id] = 0;
+
+    // Add the node to indexes:
+    this.nodesArray.push(validNode);
+    this.nodesIndex[validNode.id] = validNode;
+
+    // Return the current instance:
+    return this;
+  });
+
+  /**
+   * This method adds an edge to the graph. The edge must be an object, with a
+   * string under the key "id", and strings under the keys "source" and
+   * "target" that design existing nodes. Except for this, it is possible to
+   * add any other attribute, that will be preserved all along the
+   * manipulations.
+   *
+   * If the graph option "clone" has a truthy value, the edge will be cloned
+   * when added to the graph. Also, if the graph option "immutable" has a
+   * truthy value, its id, source and target will be defined as immutable.
+   *
+   * @param  {object} edge The edge to add.
+   * @return {object}      The graph instance.
+   */
+  graph.addMethod('addEdge', function(edge) {
+    // Check that the edge is an object and has an id:
+    if (Object(edge) !== edge || arguments.length !== 1)
+      throw 'addEdge: Wrong arguments.';
+
+    if (typeof edge.id !== 'string' && typeof edge.id !== 'number')
+      throw 'The edge must have a string or number id.';
+
+    if ((typeof edge.source !== 'string' && typeof edge.source !== 'number') ||
+        !this.nodesIndex[edge.source])
+      throw 'The edge source must have an existing node id.';
+
+    if ((typeof edge.target !== 'string' && typeof edge.target !== 'number') ||
+        !this.nodesIndex[edge.target])
+      throw 'The edge target must have an existing node id.';
+
+    if (this.edgesIndex[edge.id])
+      throw 'The edge "' + edge.id + '" already exists.';
+
+    var k,
+        validEdge = Object.create(null);
+
+    // Check the "clone" option:
+    if (this.settings('clone')) {
+      for (k in edge)
+        if (k !== 'id' && k !== 'source' && k !== 'target')
+          validEdge[k] = edge[k];
+    } else
+      validEdge = edge;
+
+    // Check the "immutable" option:
+    if (this.settings('immutable')) {
+      Object.defineProperty(validEdge, 'id', {
+        value: edge.id,
+        enumerable: true
+      });
+
+      Object.defineProperty(validEdge, 'source', {
+        value: edge.source,
+        enumerable: true
+      });
+
+      Object.defineProperty(validEdge, 'target', {
+        value: edge.target,
+        enumerable: true
+      });
+    } else {
+      validEdge.id = edge.id;
+      validEdge.source = edge.source;
+      validEdge.target = edge.target;
+    }
+
+    // Add the edge to indexes:
+    this.edgesArray.push(validEdge);
+    this.edgesIndex[validEdge.id] = validEdge;
+
+    if (!this.inNeighborsIndex[validEdge.target][validEdge.source])
+      this.inNeighborsIndex[validEdge.target][validEdge.source] =
+        Object.create(null);
+    this.inNeighborsIndex[validEdge.target][validEdge.source][validEdge.id] =
+      validEdge;
+
+    if (!this.outNeighborsIndex[validEdge.source][validEdge.target])
+      this.outNeighborsIndex[validEdge.source][validEdge.target] =
+        Object.create(null);
+    this.outNeighborsIndex[validEdge.source][validEdge.target][validEdge.id] =
+      validEdge;
+
+    if (!this.allNeighborsIndex[validEdge.source][validEdge.target])
+      this.allNeighborsIndex[validEdge.source][validEdge.target] =
+        Object.create(null);
+    this.allNeighborsIndex[validEdge.source][validEdge.target][validEdge.id] =
+      validEdge;
+
+    if (validEdge.target !== validEdge.source) {
+      if (!this.allNeighborsIndex[validEdge.target][validEdge.source])
+        this.allNeighborsIndex[validEdge.target][validEdge.source] =
+          Object.create(null);
+      this.allNeighborsIndex[validEdge.target][validEdge.source][validEdge.id] =
+        validEdge;
+    }
+
+    // Keep counts up to date:
+    this.inNeighborsCount[validEdge.target]++;
+    this.outNeighborsCount[validEdge.source]++;
+    this.allNeighborsCount[validEdge.target]++;
+    this.allNeighborsCount[validEdge.source]++;
+
+    return this;
+  });
+
+  /**
+   * This method drops a node from the graph. It also removes each edge that is
+   * bound to it, through the dropEdge method. An error is thrown if the node
+   * does not exist.
+   *
+   * @param  {string} id The node id.
+   * @return {object}    The graph instance.
+   */
+  graph.addMethod('dropNode', function(id) {
+    // Check that the arguments are valid:
+    if ((typeof id !== 'string' && typeof id !== 'number') ||
+        arguments.length !== 1)
+      throw 'dropNode: Wrong arguments.';
+
+    if (!this.nodesIndex[id])
+      throw 'The node "' + id + '" does not exist.';
+
+    var i, k, l;
+
+    // Remove the node from indexes:
+    delete this.nodesIndex[id];
+    for (i = 0, l = this.nodesArray.length; i < l; i++)
+      if (this.nodesArray[i].id === id) {
+        this.nodesArray.splice(i, 1);
+        break;
+      }
+
+    // Remove related edges:
+    for (i = this.edgesArray.length - 1; i >= 0; i--)
+      if (this.edgesArray[i].source === id || this.edgesArray[i].target === id)
+        this.dropEdge(this.edgesArray[i].id);
+
+    // Remove related edge indexes:
+    delete this.inNeighborsIndex[id];
+    delete this.outNeighborsIndex[id];
+    delete this.allNeighborsIndex[id];
+
+    delete this.inNeighborsCount[id];
+    delete this.outNeighborsCount[id];
+    delete this.allNeighborsCount[id];
+
+    for (k in this.nodesIndex) {
+      delete this.inNeighborsIndex[k][id];
+      delete this.outNeighborsIndex[k][id];
+      delete this.allNeighborsIndex[k][id];
+    }
+
+    return this;
+  });
+
+  /**
+   * This method drops an edge from the graph. An error is thrown if the edge
+   * does not exist.
+   *
+   * @param  {string} id The edge id.
+   * @return {object}    The graph instance.
+   */
+  graph.addMethod('dropEdge', function(id) {
+    // Check that the arguments are valid:
+    if ((typeof id !== 'string' && typeof id !== 'number') ||
+        arguments.length !== 1)
+      throw 'dropEdge: Wrong arguments.';
+
+    if (!this.edgesIndex[id])
+      throw 'The edge "' + id + '" does not exist.';
+
+    var i, l, edge;
+
+    // Remove the edge from indexes:
+    edge = this.edgesIndex[id];
+    delete this.edgesIndex[id];
+    for (i = 0, l = this.edgesArray.length; i < l; i++)
+      if (this.edgesArray[i].id === id) {
+        this.edgesArray.splice(i, 1);
+        break;
+      }
+
+    delete this.inNeighborsIndex[edge.target][edge.source][edge.id];
+    if (!Object.keys(this.inNeighborsIndex[edge.target][edge.source]).length)
+      delete this.inNeighborsIndex[edge.target][edge.source];
+
+    delete this.outNeighborsIndex[edge.source][edge.target][edge.id];
+    if (!Object.keys(this.outNeighborsIndex[edge.source][edge.target]).length)
+      delete this.outNeighborsIndex[edge.source][edge.target];
+
+    delete this.allNeighborsIndex[edge.source][edge.target][edge.id];
+    if (!Object.keys(this.allNeighborsIndex[edge.source][edge.target]).length)
+      delete this.allNeighborsIndex[edge.source][edge.target];
+
+    if (edge.target !== edge.source) {
+      delete this.allNeighborsIndex[edge.target][edge.source][edge.id];
+      if (!Object.keys(this.allNeighborsIndex[edge.target][edge.source]).length)
+        delete this.allNeighborsIndex[edge.target][edge.source];
+    }
+
+    this.inNeighborsCount[edge.target]--;
+    this.outNeighborsCount[edge.source]--;
+    this.allNeighborsCount[edge.source]--;
+    this.allNeighborsCount[edge.target]--;
+
+    return this;
+  });
+
+  /**
+   * This method destroys the current instance. It basically empties each index
+   * and methods attached to the graph.
+   */
+  graph.addMethod('kill', function() {
+    // Delete arrays:
+    this.nodesArray.length = 0;
+    this.edgesArray.length = 0;
+    delete this.nodesArray;
+    delete this.edgesArray;
+
+    // Delete indexes:
+    delete this.nodesIndex;
+    delete this.edgesIndex;
+    delete this.inNeighborsIndex;
+    delete this.outNeighborsIndex;
+    delete this.allNeighborsIndex;
+    delete this.inNeighborsCount;
+    delete this.outNeighborsCount;
+    delete this.allNeighborsCount;
+  });
+
+  /**
+   * This method empties the nodes and edges arrays, as well as the different
+   * indexes.
+   *
+   * @return {object} The graph instance.
+   */
+  graph.addMethod('clear', function() {
+    this.nodesArray.length = 0;
+    this.edgesArray.length = 0;
+
+    // Due to GC issues, I prefer not to create new object. These objects are
+    // only available from the methods and attached functions, but still, it is
+    // better to prevent ghost references to unrelevant data...
+    __emptyObject(this.nodesIndex);
+    __emptyObject(this.edgesIndex);
+    __emptyObject(this.nodesIndex);
+    __emptyObject(this.inNeighborsIndex);
+    __emptyObject(this.outNeighborsIndex);
+    __emptyObject(this.allNeighborsIndex);
+    __emptyObject(this.inNeighborsCount);
+    __emptyObject(this.outNeighborsCount);
+    __emptyObject(this.allNeighborsCount);
+
+    return this;
+  });
+
+  /**
+   * This method reads an object and adds the nodes and edges, through the
+   * proper methods "addNode" and "addEdge".
+   *
+   * Here is an example:
+   *
+   *  > var myGraph = new graph();
+   *  > myGraph.read({
+   *  >   nodes: [
+   *  >     { id: 'n0' },
+   *  >     { id: 'n1' }
+   *  >   ],
+   *  >   edges: [
+   *  >     {
+   *  >       id: 'e0',
+   *  >       source: 'n0',
+   *  >       target: 'n1'
+   *  >     }
+   *  >   ]
+   *  > });
+   *  >
+   *  > console.log(
+   *  >   myGraph.nodes().length,
+   *  >   myGraph.edges().length
+   *  > ); // outputs 2 1
+   *
+   * @param  {object} g The graph object.
+   * @return {object}   The graph instance.
+   */
+  graph.addMethod('read', function(g) {
+    var i,
+        a,
+        l;
+
+    a = g.nodes || [];
+    for (i = 0, l = a.length; i < l; i++)
+      this.addNode(a[i]);
+
+    a = g.edges || [];
+    for (i = 0, l = a.length; i < l; i++)
+      this.addEdge(a[i]);
+
+    return this;
+  });
+
+  /**
+   * This methods returns one or several nodes, depending on how it is called.
+   *
+   * To get the array of nodes, call "nodes" without argument. To get a
+   * specific node, call it with the id of the node. The get multiple node,
+   * call it with an array of ids, and it will return the array of nodes, in
+   * the same order.
+   *
+   * @param  {?(string|array)} v Eventually one id, an array of ids.
+   * @return {object|array}      The related node or array of nodes.
+   */
+  graph.addMethod('nodes', function(v) {
+    // Clone the array of nodes and return it:
+    if (!arguments.length)
+      return this.nodesArray.slice(0);
+
+    // Return the related node:
+    if (arguments.length === 1 &&
+        (typeof v === 'string' || typeof v === 'number'))
+      return this.nodesIndex[v];
+
+    // Return an array of the related node:
+    if (
+      arguments.length === 1 &&
+      Object.prototype.toString.call(v) === '[object Array]'
+    ) {
+      var i,
+          l,
+          a = [];
+
+      for (i = 0, l = v.length; i < l; i++)
+        if (typeof v[i] === 'string' || typeof v[i] === 'number')
+          a.push(this.nodesIndex[v[i]]);
+        else
+          throw 'nodes: Wrong arguments.';
+
+      return a;
+    }
+
+    throw 'nodes: Wrong arguments.';
+  });
+
+  /**
+   * This methods returns the degree of one or several nodes, depending on how
+   * it is called. It is also possible to get incoming or outcoming degrees
+   * instead by specifying 'in' or 'out' as a second argument.
+   *
+   * @param  {string|array} v     One id, an array of ids.
+   * @param  {?string}      which Which degree is required. Values are 'in',
+   *                              'out', and by default the normal degree.
+   * @return {number|array}       The related degree or array of degrees.
+   */
+  graph.addMethod('degree', function(v, which) {
+    // Check which degree is required:
+    which = {
+      'in': this.inNeighborsCount,
+      'out': this.outNeighborsCount
+    }[which || ''] || this.allNeighborsCount;
+
+    // Return the related node:
+    if (typeof v === 'string' || typeof v === 'number')
+      return which[v];
+
+    // Return an array of the related node:
+    if (Object.prototype.toString.call(v) === '[object Array]') {
+      var i,
+          l,
+          a = [];
+
+      for (i = 0, l = v.length; i < l; i++)
+        if (typeof v[i] === 'string' || typeof v[i] === 'number')
+          a.push(which[v[i]]);
+        else
+          throw 'degree: Wrong arguments.';
+
+      return a;
+    }
+
+    throw 'degree: Wrong arguments.';
+  });
+
+  /**
+   * This methods returns one or several edges, depending on how it is called.
+   *
+   * To get the array of edges, call "edges" without argument. To get a
+   * specific edge, call it with the id of the edge. The get multiple edge,
+   * call it with an array of ids, and it will return the array of edges, in
+   * the same order.
+   *
+   * @param  {?(string|array)} v Eventually one id, an array of ids.
+   * @return {object|array}      The related edge or array of edges.
+   */
+  graph.addMethod('edges', function(v) {
+    // Clone the array of edges and return it:
+    if (!arguments.length)
+      return this.edgesArray.slice(0);
+
+    // Return the related edge:
+    if (arguments.length === 1 &&
+        (typeof v === 'string' || typeof v === 'number'))
+      return this.edgesIndex[v];
+
+    // Return an array of the related edge:
+    if (
+      arguments.length === 1 &&
+      Object.prototype.toString.call(v) === '[object Array]'
+    ) {
+      var i,
+          l,
+          a = [];
+
+      for (i = 0, l = v.length; i < l; i++)
+        if (typeof v[i] === 'string' || typeof v[i] === 'number')
+          a.push(this.edgesIndex[v[i]]);
+        else
+          throw 'edges: Wrong arguments.';
+
+      return a;
+    }
+
+    throw 'edges: Wrong arguments.';
+  });
+
+
+  /**
+   * EXPORT:
+   * *******
+   */
+  if (typeof sigma !== 'undefined') {
+    sigma.classes = sigma.classes || Object.create(null);
+    sigma.classes.graph = graph;
+  } else if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = graph;
+    exports.graph = graph;
+  } else
+    this.graph = graph;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/classes/sigma.classes.quad.js

@@ -0,0 +1,674 @@
+;(function(undefined) {
+  'use strict';
+
+  /**
+   * Sigma Quadtree Module
+   * =====================
+   *
+   * Author: Guillaume Plique (Yomguithereal)
+   * Version: 0.2
+   */
+
+
+
+  /**
+   * Quad Geometric Operations
+   * -------------------------
+   *
+   * A useful batch of geometric operations used by the quadtree.
+   */
+
+  var _geom = {
+
+    /**
+     * Transforms a graph node with x, y and size into an
+     * axis-aligned square.
+     *
+     * @param  {object} A graph node with at least a point (x, y) and a size.
+     * @return {object} A square: two points (x1, y1), (x2, y2) and height.
+     */
+    pointToSquare: function(n) {
+      return {
+        x1: n.x - n.size,
+        y1: n.y - n.size,
+        x2: n.x + n.size,
+        y2: n.y - n.size,
+        height: n.size * 2
+      };
+    },
+
+    /**
+     * Checks whether a rectangle is axis-aligned.
+     *
+     * @param  {object}  A rectangle defined by two points
+     *                   (x1, y1) and (x2, y2).
+     * @return {boolean} True if the rectangle is axis-aligned.
+     */
+    isAxisAligned: function(r) {
+      return r.x1 === r.x2 || r.y1 === r.y2;
+    },
+
+    /**
+     * Compute top points of an axis-aligned rectangle. This is useful in
+     * cases when the rectangle has been rotated (left, right or bottom up) and
+     * later operations need to know the top points.
+     *
+     * @param  {object} An axis-aligned rectangle defined by two points
+     *                  (x1, y1), (x2, y2) and height.
+     * @return {object} A rectangle: two points (x1, y1), (x2, y2) and height.
+     */
+    axisAlignedTopPoints: function(r) {
+
+      // Basic
+      if (r.y1 === r.y2 && r.x1 < r.x2)
+        return r;
+
+      // Rotated to right
+      if (r.x1 === r.x2 && r.y2 > r.y1)
+        return {
+          x1: r.x1 - r.height, y1: r.y1,
+          x2: r.x1, y2: r.y1,
+          height: r.height
+        };
+
+      // Rotated to left
+      if (r.x1 === r.x2 && r.y2 < r.y1)
+        return {
+          x1: r.x1, y1: r.y2,
+          x2: r.x2 + r.height, y2: r.y2,
+          height: r.height
+        };
+
+      // Bottom's up
+      return {
+        x1: r.x2, y1: r.y1 - r.height,
+        x2: r.x1, y2: r.y1 - r.height,
+        height: r.height
+      };
+    },
+
+    /**
+     * Get coordinates of a rectangle's lower left corner from its top points.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @return {object} Coordinates of the corner (x, y).
+     */
+    lowerLeftCoor: function(r) {
+      var width = (
+        Math.sqrt(
+          Math.pow(r.x2 - r.x1, 2) +
+          Math.pow(r.y2 - r.y1, 2)
+        )
+      );
+
+      return {
+        x: r.x1 - (r.y2 - r.y1) * r.height / width,
+        y: r.y1 + (r.x2 - r.x1) * r.height / width
+      };
+    },
+
+    /**
+     * Get coordinates of a rectangle's lower right corner from its top points
+     * and its lower left corner.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @param  {object} A corner's coordinates (x, y).
+     * @return {object} Coordinates of the corner (x, y).
+     */
+    lowerRightCoor: function(r, llc) {
+      return {
+        x: llc.x - r.x1 + r.x2,
+        y: llc.y - r.y1 + r.y2
+      };
+    },
+
+    /**
+     * Get the coordinates of all the corners of a rectangle from its top point.
+     *
+     * @param  {object} A rectangle defined by two points (x1, y1) and (x2, y2).
+     * @return {array}  An array of the four corners' coordinates (x, y).
+     */
+    rectangleCorners: function(r) {
+      var llc = this.lowerLeftCoor(r),
+          lrc = this.lowerRightCoor(r, llc);
+
+      return [
+        {x: r.x1, y: r.y1},
+        {x: r.x2, y: r.y2},
+        {x: llc.x, y: llc.y},
+        {x: lrc.x, y: lrc.y}
+      ];
+    },
+
+    /**
+     * Split a square defined by its boundaries into four.
+     *
+     * @param  {object} Boundaries of the square (x, y, width, height).
+     * @return {array}  An array containing the four new squares, themselves
+     *                  defined by an array of their four corners (x, y).
+     */
+    splitSquare: function(b) {
+      return [
+        [
+          {x: b.x, y: b.y},
+          {x: b.x + b.width / 2, y: b.y},
+          {x: b.x, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2}
+        ],
+        [
+          {x: b.x + b.width / 2, y: b.y},
+          {x: b.x + b.width, y: b.y},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x + b.width, y: b.y + b.height / 2}
+        ],
+        [
+          {x: b.x, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x, y: b.y + b.height},
+          {x: b.x + b.width / 2, y: b.y + b.height}
+        ],
+        [
+          {x: b.x + b.width / 2, y: b.y + b.height / 2},
+          {x: b.x + b.width, y: b.y + b.height / 2},
+          {x: b.x + b.width / 2, y: b.y + b.height},
+          {x: b.x + b.width, y: b.y + b.height}
+        ]
+      ];
+    },
+
+    /**
+     * Compute the four axis between corners of rectangle A and corners of
+     * rectangle B. This is needed later to check an eventual collision.
+     *
+     * @param  {array} An array of rectangle A's four corners (x, y).
+     * @param  {array} An array of rectangle B's four corners (x, y).
+     * @return {array} An array of four axis defined by their coordinates (x,y).
+     */
+    axis: function(c1, c2) {
+      return [
+        {x: c1[1].x - c1[0].x, y: c1[1].y - c1[0].y},
+        {x: c1[1].x - c1[3].x, y: c1[1].y - c1[3].y},
+        {x: c2[0].x - c2[2].x, y: c2[0].y - c2[2].y},
+        {x: c2[0].x - c2[1].x, y: c2[0].y - c2[1].y}
+      ];
+    },
+
+    /**
+     * Project a rectangle's corner on an axis.
+     *
+     * @param  {object} Coordinates of a corner (x, y).
+     * @param  {object} Coordinates of an axis (x, y).
+     * @return {object} The projection defined by coordinates (x, y).
+     */
+    projection: function(c, a) {
+      var l = (
+        (c.x * a.x + c.y * a.y) /
+        (Math.pow(a.x, 2) + Math.pow(a.y, 2))
+      );
+
+      return {
+        x: l * a.x,
+        y: l * a.y
+      };
+    },
+
+    /**
+     * Check whether two rectangles collide on one particular axis.
+     *
+     * @param  {object}   An axis' coordinates (x, y).
+     * @param  {array}    Rectangle A's corners.
+     * @param  {array}    Rectangle B's corners.
+     * @return {boolean}  True if the rectangles collide on the axis.
+     */
+    axisCollision: function(a, c1, c2) {
+      var sc1 = [],
+          sc2 = [];
+
+      for (var ci = 0; ci < 4; ci++) {
+        var p1 = this.projection(c1[ci], a),
+            p2 = this.projection(c2[ci], a);
+
+        sc1.push(p1.x * a.x + p1.y * a.y);
+        sc2.push(p2.x * a.x + p2.y * a.y);
+      }
+
+      var maxc1 = Math.max.apply(Math, sc1),
+          maxc2 = Math.max.apply(Math, sc2),
+          minc1 = Math.min.apply(Math, sc1),
+          minc2 = Math.min.apply(Math, sc2);
+
+      return (minc2 <= maxc1 && maxc2 >= minc1);
+    },
+
+    /**
+     * Check whether two rectangles collide on each one of their four axis. If
+     * all axis collide, then the two rectangles do collide on the plane.
+     *
+     * @param  {array}    Rectangle A's corners.
+     * @param  {array}    Rectangle B's corners.
+     * @return {boolean}  True if the rectangles collide.
+     */
+    collision: function(c1, c2) {
+      var axis = this.axis(c1, c2),
+          col = true;
+
+      for (var i = 0; i < 4; i++)
+        col = col && this.axisCollision(axis[i], c1, c2);
+
+      return col;
+    }
+  };
+
+
+  /**
+   * Quad Functions
+   * ------------
+   *
+   * The Quadtree functions themselves.
+   * For each of those functions, we consider that in a splitted quad, the
+   * index of each node is the following:
+   * 0: top left
+   * 1: top right
+   * 2: bottom left
+   * 3: bottom right
+   *
+   * Moreover, the hereafter quad's philosophy is to consider that if an element
+   * collides with more than one nodes, this element belongs to each of the
+   * nodes it collides with where other would let it lie on a higher node.
+   */
+
+  /**
+   * Get the index of the node containing the point in the quad
+   *
+   * @param  {object}  point      A point defined by coordinates (x, y).
+   * @param  {object}  quadBounds Boundaries of the quad (x, y, width, heigth).
+   * @return {integer}            The index of the node containing the point.
+   */
+  function _quadIndex(point, quadBounds) {
+    var xmp = quadBounds.x + quadBounds.width / 2,
+        ymp = quadBounds.y + quadBounds.height / 2,
+        top = (point.y < ymp),
+        left = (point.x < xmp);
+
+    if (top) {
+      if (left)
+        return 0;
+      else
+        return 1;
+    }
+    else {
+      if (left)
+        return 2;
+      else
+        return 3;
+    }
+  }
+
+  /**
+   * Get a list of indexes of nodes containing an axis-aligned rectangle
+   *
+   * @param  {object}  rectangle   A rectangle defined by two points (x1, y1),
+   *                               (x2, y2) and height.
+   * @param  {array}   quadCorners An array of the quad nodes' corners.
+   * @return {array}               An array of indexes containing one to
+   *                               four integers.
+   */
+  function _quadIndexes(rectangle, quadCorners) {
+    var indexes = [];
+
+    // Iterating through quads
+    for (var i = 0; i < 4; i++)
+      if ((rectangle.x2 >= quadCorners[i][0].x) &&
+          (rectangle.x1 <= quadCorners[i][1].x) &&
+          (rectangle.y1 + rectangle.height >= quadCorners[i][0].y) &&
+          (rectangle.y1 <= quadCorners[i][2].y))
+        indexes.push(i);
+
+    return indexes;
+  }
+
+  /**
+   * Get a list of indexes of nodes containing a non-axis-aligned rectangle
+   *
+   * @param  {array}  corners      An array containing each corner of the
+   *                               rectangle defined by its coordinates (x, y).
+   * @param  {array}  quadCorners  An array of the quad nodes' corners.
+   * @return {array}               An array of indexes containing one to
+   *                               four integers.
+   */
+  function _quadCollision(corners, quadCorners) {
+    var indexes = [];
+
+    // Iterating through quads
+    for (var i = 0; i < 4; i++)
+      if (_geom.collision(corners, quadCorners[i]))
+        indexes.push(i);
+
+    return indexes;
+  }
+
+  /**
+   * Subdivide a quad by creating a node at a precise index. The function does
+   * not generate all four nodes not to potentially create unused nodes.
+   *
+   * @param  {integer}  index The index of the node to create.
+   * @param  {object}   quad  The quad object to subdivide.
+   * @return {object}         A new quad representing the node created.
+   */
+  function _quadSubdivide(index, quad) {
+    var next = quad.level + 1,
+        subw = Math.round(quad.bounds.width / 2),
+        subh = Math.round(quad.bounds.height / 2),
+        qx = Math.round(quad.bounds.x),
+        qy = Math.round(quad.bounds.y),
+        x,
+        y;
+
+    switch (index) {
+      case 0:
+        x = qx;
+        y = qy;
+        break;
+      case 1:
+        x = qx + subw;
+        y = qy;
+        break;
+      case 2:
+        x = qx;
+        y = qy + subh;
+        break;
+      case 3:
+        x = qx + subw;
+        y = qy + subh;
+        break;
+    }
+
+    return _quadTree(
+      {x: x, y: y, width: subw, height: subh},
+      next,
+      quad.maxElements,
+      quad.maxLevel
+    );
+  }
+
+  /**
+   * Recursively insert an element into the quadtree. Only points
+   * with size, i.e. axis-aligned squares, may be inserted with this
+   * method.
+   *
+   * @param  {object}  el         The element to insert in the quadtree.
+   * @param  {object}  sizedPoint A sized point defined by two top points
+   *                              (x1, y1), (x2, y2) and height.
+   * @param  {object}  quad       The quad in which to insert the element.
+   * @return {undefined}          The function does not return anything.
+   */
+  function _quadInsert(el, sizedPoint, quad) {
+    if (quad.level < quad.maxLevel) {
+
+      // Searching appropriate quads
+      var indexes = _quadIndexes(sizedPoint, quad.corners);
+
+      // Iterating
+      for (var i = 0, l = indexes.length; i < l; i++) {
+
+        // Subdividing if necessary
+        if (quad.nodes[indexes[i]] === undefined)
+          quad.nodes[indexes[i]] = _quadSubdivide(indexes[i], quad);
+
+        // Recursion
+        _quadInsert(el, sizedPoint, quad.nodes[indexes[i]]);
+      }
+    }
+    else {
+
+      // Pushing the element in a leaf node
+      quad.elements.push(el);
+    }
+  }
+
+  /**
+   * Recursively retrieve every elements held by the node containing the
+   * searched point.
+   *
+   * @param  {object}  point The searched point (x, y).
+   * @param  {object}  quad  The searched quad.
+   * @return {array}         An array of elements contained in the relevant
+   *                         node.
+   */
+  function _quadRetrievePoint(point, quad) {
+    if (quad.level < quad.maxLevel) {
+      var index = _quadIndex(point, quad.bounds);
+
+      // If node does not exist we return an empty list
+      if (quad.nodes[index] !== undefined) {
+        return _quadRetrievePoint(point, quad.nodes[index]);
+      }
+      else {
+        return [];
+      }
+    }
+    else {
+      return quad.elements;
+    }
+  }
+
+  /**
+   * Recursively retrieve every elements contained within an rectangular area
+   * that may or may not be axis-aligned.
+   *
+   * @param  {object|array} rectData       The searched area defined either by
+   *                                       an array of four corners (x, y) in
+   *                                       the case of a non-axis-aligned
+   *                                       rectangle or an object with two top
+   *                                       points (x1, y1), (x2, y2) and height.
+   * @param  {object}       quad           The searched quad.
+   * @param  {function}     collisionFunc  The collision function used to search
+   *                                       for node indexes.
+   * @param  {array?}       els            The retrieved elements.
+   * @return {array}                       An array of elements contained in the
+   *                                       area.
+   */
+  function _quadRetrieveArea(rectData, quad, collisionFunc, els) {
+    els = els || {};
+
+    if (quad.level < quad.maxLevel) {
+      var indexes = collisionFunc(rectData, quad.corners);
+
+      for (var i = 0, l = indexes.length; i < l; i++)
+        if (quad.nodes[indexes[i]] !== undefined)
+          _quadRetrieveArea(
+            rectData,
+            quad.nodes[indexes[i]],
+            collisionFunc,
+            els
+          );
+    } else
+      for (var j = 0, m = quad.elements.length; j < m; j++)
+        if (els[quad.elements[j].id] === undefined)
+          els[quad.elements[j].id] = quad.elements[j];
+
+    return els;
+  }
+
+  /**
+   * Creates the quadtree object itself.
+   *
+   * @param  {object}   bounds       The boundaries of the quad defined by an
+   *                                 origin (x, y), width and heigth.
+   * @param  {integer}  level        The level of the quad in the tree.
+   * @param  {integer}  maxElements  The max number of element in a leaf node.
+   * @param  {integer}  maxLevel     The max recursion level of the tree.
+   * @return {object}                The quadtree object.
+   */
+  function _quadTree(bounds, level, maxElements, maxLevel) {
+    return {
+      level: level || 0,
+      bounds: bounds,
+      corners: _geom.splitSquare(bounds),
+      maxElements: maxElements || 20,
+      maxLevel: maxLevel || 4,
+      elements: [],
+      nodes: []
+    };
+  }
+
+
+  /**
+   * Sigma Quad Constructor
+   * ----------------------
+   *
+   * The quad API as exposed to sigma.
+   */
+
+  /**
+   * The quad core that will become the sigma interface with the quadtree.
+   *
+   * property {object} _tree  Property holding the quadtree object.
+   * property {object} _geom  Exposition of the _geom namespace for testing.
+   * property {object} _cache Cache for the area method.
+   */
+  var quad = function() {
+    this._geom = _geom;
+    this._tree = null;
+    this._cache = {
+      query: false,
+      result: false
+    };
+  };
+
+  /**
+   * Index a graph by inserting its nodes into the quadtree.
+   *
+   * @param  {array}  nodes   An array of nodes to index.
+   * @param  {object} params  An object of parameters with at least the quad
+   *                          bounds.
+   * @return {object}         The quadtree object.
+   *
+   * Parameters:
+   * ----------
+   * bounds:      {object}   boundaries of the quad defined by its origin (x, y)
+   *                         width and heigth.
+   * prefix:      {string?}  a prefix for node geometric attributes.
+   * maxElements: {integer?} the max number of elements in a leaf node.
+   * maxLevel:    {integer?} the max recursion level of the tree.
+   */
+  quad.prototype.index = function(nodes, params) {
+
+    // Enforcing presence of boundaries
+    if (!params.bounds)
+      throw 'sigma.classes.quad.index: bounds information not given.';
+
+    // Prefix
+    var prefix = params.prefix || '';
+
+    // Building the tree
+    this._tree = _quadTree(
+      params.bounds,
+      0,
+      params.maxElements,
+      params.maxLevel
+    );
+
+    // Inserting graph nodes into the tree
+    for (var i = 0, l = nodes.length; i < l; i++) {
+
+      // Inserting node
+      _quadInsert(
+        nodes[i],
+        _geom.pointToSquare({
+          x: nodes[i][prefix + 'x'],
+          y: nodes[i][prefix + 'y'],
+          size: nodes[i][prefix + 'size']
+        }),
+        this._tree
+      );
+    }
+
+    // Reset cache:
+    this._cache = {
+      query: false,
+      result: false
+    };
+
+    // remove?
+    return this._tree;
+  };
+
+  /**
+   * Retrieve every graph nodes held by the quadtree node containing the
+   * searched point.
+   *
+   * @param  {number} x of the point.
+   * @param  {number} y of the point.
+   * @return {array}  An array of nodes retrieved.
+   */
+  quad.prototype.point = function(x, y) {
+    return this._tree ?
+      _quadRetrievePoint({x: x, y: y}, this._tree) || [] :
+      [];
+  };
+
+  /**
+   * Retrieve every graph nodes within a rectangular area. The methods keep the
+   * last area queried in cache for optimization reason and will act differently
+   * for the same reason if the area is axis-aligned or not.
+   *
+   * @param  {object} A rectangle defined by two top points (x1, y1), (x2, y2)
+   *                  and height.
+   * @return {array}  An array of nodes retrieved.
+   */
+  quad.prototype.area = function(rect) {
+    var serialized = JSON.stringify(rect),
+        collisionFunc,
+        rectData;
+
+    // Returning cache?
+    if (this._cache.query === serialized)
+      return this._cache.result;
+
+    // Axis aligned ?
+    if (_geom.isAxisAligned(rect)) {
+      collisionFunc = _quadIndexes;
+      rectData = _geom.axisAlignedTopPoints(rect);
+    }
+    else {
+      collisionFunc = _quadCollision;
+      rectData = _geom.rectangleCorners(rect);
+    }
+
+    // Retrieving nodes
+    var nodes = this._tree ?
+      _quadRetrieveArea(
+        rectData,
+        this._tree,
+        collisionFunc
+      ) :
+      [];
+
+    // Object to array
+    var nodesArray = [];
+    for (var i in nodes)
+      nodesArray.push(nodes[i]);
+
+    // Caching
+    this._cache.query = serialized;
+    this._cache.result = nodesArray;
+
+    return nodesArray;
+  };
+
+
+  /**
+   * EXPORT:
+   * *******
+   */
+  if (typeof this.sigma !== 'undefined') {
+    this.sigma.classes = this.sigma.classes || {};
+    this.sigma.classes.quad = quad;
+  } else if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = quad;
+    exports.quad = quad;
+  } else
+    this.quad = quad;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/conrad.js

@@ -0,0 +1,984 @@
+/**
+ * conrad.js is a tiny JavaScript jobs scheduler,
+ *
+ * Version: 0.1.0
+ * Sources: http://github.com/jacomyal/conrad.js
+ * Doc:     http://github.com/jacomyal/conrad.js#readme
+ *
+ * License:
+ * --------
+ * Copyright © 2013 Alexis Jacomy, Sciences-Po médialab
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * The Software is provided "as is", without warranty of any kind, express or
+ * implied, including but not limited to the warranties of merchantability,
+ * fitness for a particular purpose and noninfringement. In no event shall the
+ * authors or copyright holders be liable for any claim, damages or other
+ * liability, whether in an action of contract, tort or otherwise, arising
+ * from, out of or in connection with the software or the use or other dealings
+ * in the Software.
+ */
+(function(global) {
+  'use strict';
+
+  // Check that conrad.js has not been loaded yet:
+  if (global.conrad)
+    throw new Error('conrad already exists');
+
+
+  /**
+   * PRIVATE VARIABLES:
+   * ******************
+   */
+
+  /**
+   * A flag indicating whether conrad is running or not.
+   *
+   * @type {Number}
+   */
+  var _lastFrameTime;
+
+  /**
+   * A flag indicating whether conrad is running or not.
+   *
+   * @type {Boolean}
+   */
+  var _isRunning = false;
+
+  /**
+   * The hash of registered jobs. Each job must at least have a unique ID
+   * under the key "id" and a function under the key "job". This hash
+   * contains each running job and each waiting job.
+   *
+   * @type {Object}
+   */
+  var _jobs = {};
+
+  /**
+   * The hash of currently running jobs.
+   *
+   * @type {Object}
+   */
+  var _runningJobs = {};
+
+  /**
+   * The array of currently running jobs, sorted by priority.
+   *
+   * @type {Array}
+   */
+  var _sortedByPriorityJobs = [];
+
+  /**
+   * The array of currently waiting jobs.
+   *
+   * @type {Object}
+   */
+  var _waitingJobs = {};
+
+  /**
+   * The array of finished jobs. They are stored in an array, since two jobs
+   * with the same "id" can happen at two different times.
+   *
+   * @type {Array}
+   */
+  var _doneJobs = [];
+
+  /**
+   * A dirty flag to keep conrad from starting: Indeed, when addJob() is called
+   * with several jobs, conrad must be started only at the end. This flag keeps
+   * me from duplicating the code that effectively adds a job.
+   *
+   * @type {Boolean}
+   */
+  var _noStart = false;
+
+  /**
+   * An hash containing some global settings about how conrad.js should
+   * behave.
+   *
+   * @type {Object}
+   */
+  var _parameters = {
+    frameDuration: 20,
+    history: true
+  };
+
+  /**
+   * This object contains every handlers bound to conrad events. It does not
+   * requirea any DOM implementation, since the events are all JavaScript.
+   *
+   * @type {Object}
+   */
+  var _handlers = Object.create(null);
+
+
+  /**
+   * PRIVATE FUNCTIONS:
+   * ******************
+   */
+
+  /**
+   * Will execute the handler everytime that the indicated event (or the
+   * indicated events) will be triggered.
+   *
+   * @param  {string|array|object} events  The name of the event (or the events
+   *                                       separated by spaces).
+   * @param  {function(Object)}    handler The handler to bind.
+   * @return {Object}                      Returns conrad.
+   */
+  function _bind(events, handler) {
+    var i,
+        i_end,
+        event,
+        eArray;
+
+    if (!arguments.length)
+      return;
+    else if (
+      arguments.length === 1 &&
+      Object(arguments[0]) === arguments[0]
+    )
+      for (events in arguments[0])
+        _bind(events, arguments[0][events]);
+    else if (arguments.length > 1) {
+      eArray =
+        Array.isArray(events) ?
+          events :
+          events.split(/ /);
+
+      for (i = 0, i_end = eArray.length; i !== i_end; i += 1) {
+        event = eArray[i];
+
+        if (!_handlers[event])
+          _handlers[event] = [];
+
+        // Using an object instead of directly the handler will make possible
+        // later to add flags
+        _handlers[event].push({
+          handler: handler
+        });
+      }
+    }
+  }
+
+  /**
+   * Removes the handler from a specified event (or specified events).
+   *
+   * @param  {?string}           events  The name of the event (or the events
+   *                                     separated by spaces). If undefined,
+   *                                     then all handlers are removed.
+   * @param  {?function(Object)} handler The handler to unbind. If undefined,
+   *                                     each handler bound to the event or the
+   *                                     events will be removed.
+   * @return {Object}            Returns conrad.
+   */
+  function _unbind(events, handler) {
+    var i,
+        i_end,
+        j,
+        j_end,
+        a,
+        event,
+        eArray = Array.isArray(events) ?
+                   events :
+                   events.split(/ /);
+
+    if (!arguments.length)
+      _handlers = Object.create(null);
+    else if (handler) {
+      for (i = 0, i_end = eArray.length; i !== i_end; i += 1) {
+        event = eArray[i];
+        if (_handlers[event]) {
+          a = [];
+          for (j = 0, j_end = _handlers[event].length; j !== j_end; j += 1)
+            if (_handlers[event][j].handler !== handler)
+              a.push(_handlers[event][j]);
+
+          _handlers[event] = a;
+        }
+
+        if (_handlers[event] && _handlers[event].length === 0)
+          delete _handlers[event];
+      }
+    } else
+      for (i = 0, i_end = eArray.length; i !== i_end; i += 1)
+        delete _handlers[eArray[i]];
+  }
+
+  /**
+   * Executes each handler bound to the event.
+   *
+   * @param  {string}  events The name of the event (or the events separated
+   *                          by spaces).
+   * @param  {?Object} data   The content of the event (optional).
+   * @return {Object}         Returns conrad.
+   */
+  function _dispatch(events, data) {
+    var i,
+        j,
+        i_end,
+        j_end,
+        event,
+        eventName,
+        eArray = Array.isArray(events) ?
+                   events :
+                   events.split(/ /);
+
+    data = data === undefined ? {} : data;
+
+    for (i = 0, i_end = eArray.length; i !== i_end; i += 1) {
+      eventName = eArray[i];
+
+      if (_handlers[eventName]) {
+        event = {
+          type: eventName,
+          data: data || {}
+        };
+
+        for (j = 0, j_end = _handlers[eventName].length; j !== j_end; j += 1)
+          try {
+            _handlers[eventName][j].handler(event);
+          } catch (e) {}
+      }
+    }
+  }
+
+  /**
+   * Executes the most prioritary job once, and deals with filling the stats
+   * (done, time, averageTime, currentTime, etc...).
+   *
+   * @return {?Object} Returns the job object if it has to be killed, null else.
+   */
+  function _executeFirstJob() {
+    var i,
+        l,
+        test,
+        kill,
+        pushed = false,
+        time = __dateNow(),
+        job = _sortedByPriorityJobs.shift();
+
+    // Execute the job and look at the result:
+    test = job.job();
+
+    // Deal with stats:
+    time = __dateNow() - time;
+    job.done++;
+    job.time += time;
+    job.currentTime += time;
+    job.weightTime = job.currentTime / (job.weight || 1);
+    job.averageTime = job.time / job.done;
+
+    // Check if the job has to be killed:
+    kill = job.count ? (job.count <= job.done) : !test;
+
+    // Reset priorities:
+    if (!kill) {
+      for (i = 0, l = _sortedByPriorityJobs.length; i < l; i++)
+        if (_sortedByPriorityJobs[i].weightTime > job.weightTime) {
+          _sortedByPriorityJobs.splice(i, 0, job);
+          pushed = true;
+          break;
+        }
+
+      if (!pushed)
+        _sortedByPriorityJobs.push(job);
+    }
+
+    return kill ? job : null;
+  }
+
+  /**
+   * Activates a job, by adding it to the _runningJobs object and the
+   * _sortedByPriorityJobs array. It also initializes its currentTime value.
+   *
+   * @param  {Object} job The job to activate.
+   */
+  function _activateJob(job) {
+    var l = _sortedByPriorityJobs.length;
+
+    // Add the job to the running jobs:
+    _runningJobs[job.id] = job;
+    job.status = 'running';
+
+    // Add the job to the priorities:
+    if (l) {
+      job.weightTime = _sortedByPriorityJobs[l - 1].weightTime;
+      job.currentTime = job.weightTime * (job.weight || 1);
+    }
+
+    // Initialize the job and dispatch:
+    job.startTime = __dateNow();
+    _dispatch('jobStarted', __clone(job));
+
+    _sortedByPriorityJobs.push(job);
+  }
+
+  /**
+   * The main loop of conrad.js:
+   *  . It executes job such that they all occupate the same processing time.
+   *  . It stops jobs that do not need to be executed anymore.
+   *  . It triggers callbacks when it is relevant.
+   *  . It starts waiting jobs when they need to be started.
+   *  . It injects frames to keep a constant frapes per second ratio.
+   *  . It stops itself when there are no more jobs to execute.
+   */
+  function _loop() {
+    var k,
+        o,
+        l,
+        job,
+        time,
+        deadJob;
+
+    // Deal with the newly added jobs (the _jobs object):
+    for (k in _jobs) {
+      job = _jobs[k];
+
+      if (job.after)
+        _waitingJobs[k] = job;
+      else
+        _activateJob(job);
+
+      delete _jobs[k];
+    }
+
+    // Set the _isRunning flag to false if there are no running job:
+    _isRunning = !!_sortedByPriorityJobs.length;
+
+    // Deal with the running jobs (the _runningJobs object):
+    while (
+      _sortedByPriorityJobs.length &&
+      __dateNow() - _lastFrameTime < _parameters.frameDuration
+    ) {
+      deadJob = _executeFirstJob();
+
+      // Deal with the case where the job has ended:
+      if (deadJob) {
+        _killJob(deadJob.id);
+
+        // Check for waiting jobs:
+        for (k in _waitingJobs)
+          if (_waitingJobs[k].after === deadJob.id) {
+            _activateJob(_waitingJobs[k]);
+            delete _waitingJobs[k];
+          }
+      }
+    }
+
+    // Check if conrad still has jobs to deal with, and kill it if not:
+    if (_isRunning) {
+      // Update the _lastFrameTime:
+      _lastFrameTime = __dateNow();
+
+      _dispatch('enterFrame');
+      setTimeout(_loop, 0);
+    } else
+      _dispatch('stop');
+  }
+
+  /**
+   * Adds one or more jobs, and starts the loop if no job was running before. A
+   * job is at least a unique string "id" and a function, and there are some
+   * parameters that you can specify for each job to modify the way conrad will
+   * execute it. If a job is added with the "id" of another job that is waiting
+   * or still running, an error will be thrown.
+   *
+   * When a job is added, it is referenced in the _jobs object, by its id.
+   * Then, if it has to be executed right now, it will be also referenced in
+   * the _runningJobs object. If it has to wait, then it will be added into the
+   * _waitingJobs object, until it can start.
+   *
+   * Keep reading this documentation to see how to call this method.
+   *
+   * @return {Object} Returns conrad.
+   *
+   * Adding one job:
+   * ***************
+   * Basically, a job is defined by its string id and a function (the job). It
+   * is also possible to add some parameters:
+   *
+   *  > conrad.addJob('myJobId', myJobFunction);
+   *  > conrad.addJob('myJobId', {
+   *  >   job: myJobFunction,
+   *  >   someParameter: someValue
+   *  > });
+   *  > conrad.addJob({
+   *  >   id: 'myJobId',
+   *  >   job: myJobFunction,
+   *  >   someParameter: someValue
+   *  > });
+   *
+   * Adding several jobs:
+   * ********************
+   * When adding several jobs at the same time, it is possible to specify
+   * parameters for each one individually or for all:
+   *
+   *  > conrad.addJob([
+   *  >   {
+   *  >     id: 'myJobId1',
+   *  >     job: myJobFunction1,
+   *  >     someParameter1: someValue1
+   *  >   },
+   *  >   {
+   *  >     id: 'myJobId2',
+   *  >     job: myJobFunction2,
+   *  >     someParameter2: someValue2
+   *  >   }
+   *  > ], {
+   *  >   someCommonParameter: someCommonValue
+   *  > });
+   *  > conrad.addJob({
+   *  >   myJobId1: {,
+   *  >     job: myJobFunction1,
+   *  >     someParameter1: someValue1
+   *  >   },
+   *  >   myJobId2: {,
+   *  >     job: myJobFunction2,
+   *  >     someParameter2: someValue2
+   *  >   }
+   *  > }, {
+   *  >   someCommonParameter: someCommonValue
+   *  > });
+   *  > conrad.addJob({
+   *  >   myJobId1: myJobFunction1,
+   *  >   myJobId2: myJobFunction2
+   *  > }, {
+   *  >   someCommonParameter: someCommonValue
+   *  > });
+   *
+   *  Recognized parameters:
+   *  **********************
+   *  Here is the exhaustive list of every accepted parameters:
+   *
+   *    {?Function} end      A callback to execute when the job is ended. It is
+   *                         not executed if the job is killed instead of ended
+   *                         "naturally".
+   *    {?Integer}  count    The number of time the job has to be executed.
+   *    {?Number}   weight   If specified, the job will be executed as it was
+   *                         added "weight" times.
+   *    {?String}   after    The id of another job (eventually not added yet).
+   *                         If specified, this job will start only when the
+   *                         specified "after" job is ended.
+   */
+  function _addJob(v1, v2) {
+    var i,
+        l,
+        o;
+
+    // Array of jobs:
+    if (Array.isArray(v1)) {
+      // Keep conrad to start until the last job is added:
+      _noStart = true;
+
+      for (i = 0, l = v1.length; i < l; i++)
+        _addJob(v1[i].id, __extend(v1[i], v2));
+
+      _noStart = false;
+      if (!_isRunning) {
+        // Update the _lastFrameTime:
+        _lastFrameTime = __dateNow();
+
+        _dispatch('start');
+        _loop();
+      }
+    } else if (typeof v1 === 'object') {
+      // One job (object):
+      if (typeof v1.id === 'string')
+        _addJob(v1.id, v1);
+
+      // Hash of jobs:
+      else {
+        // Keep conrad to start until the last job is added:
+        _noStart = true;
+
+        for (i in v1)
+          if (typeof v1[i] === 'function')
+            _addJob(i, __extend({
+              job: v1[i]
+            }, v2));
+          else
+            _addJob(i, __extend(v1[i], v2));
+
+        _noStart = false;
+        if (!_isRunning) {
+          // Update the _lastFrameTime:
+          _lastFrameTime = __dateNow();
+
+          _dispatch('start');
+          _loop();
+        }
+      }
+
+    // One job (string, *):
+    } else if (typeof v1 === 'string') {
+      if (_hasJob(v1))
+        throw new Error(
+          '[conrad.addJob] Job with id "' + v1 + '" already exists.'
+        );
+
+      // One job (string, function):
+      if (typeof v2 === 'function') {
+        o = {
+          id: v1,
+          done: 0,
+          time: 0,
+          status: 'waiting',
+          currentTime: 0,
+          averageTime: 0,
+          weightTime: 0,
+          job: v2
+        };
+
+      // One job (string, object):
+      } else if (typeof v2 === 'object') {
+        o = __extend(
+          {
+            id: v1,
+            done: 0,
+            time: 0,
+            status: 'waiting',
+            currentTime: 0,
+            averageTime: 0,
+            weightTime: 0
+          },
+          v2
+        );
+
+      // If none of those cases, throw an error:
+      } else
+        throw new Error('[conrad.addJob] Wrong arguments.');
+
+      // Effectively add the job:
+      _jobs[v1] = o;
+      _dispatch('jobAdded', __clone(o));
+
+      // Check if the loop has to be started:
+      if (!_isRunning && !_noStart) {
+        // Update the _lastFrameTime:
+        _lastFrameTime = __dateNow();
+
+        _dispatch('start');
+        _loop();
+      }
+
+    // If none of those cases, throw an error:
+    } else
+      throw new Error('[conrad.addJob] Wrong arguments.');
+
+    return this;
+  }
+
+  /**
+   * Kills one or more jobs, indicated by their ids. It is only possible to
+   * kill running jobs or waiting jobs. If you try to kill a job that does not
+   * exist or that is already killed, a warning will be thrown.
+   *
+   * @param  {Array|String} v1 A string job id or an array of job ids.
+   * @return {Object}       Returns conrad.
+   */
+  function _killJob(v1) {
+    var i,
+        l,
+        k,
+        a,
+        job,
+        found = false;
+
+    // Array of job ids:
+    if (Array.isArray(v1))
+      for (i = 0, l = v1.length; i < l; i++)
+        _killJob(v1[i]);
+
+    // One job's id:
+    else if (typeof v1 === 'string') {
+      a = [_runningJobs, _waitingJobs, _jobs];
+
+      // Remove the job from the hashes:
+      for (i = 0, l = a.length; i < l; i++)
+        if (v1 in a[i]) {
+          job = a[i][v1];
+
+          if (_parameters.history) {
+            job.status = 'done';
+            _doneJobs.push(job);
+          }
+
+          _dispatch('jobEnded', __clone(job));
+          delete a[i][v1];
+
+          if (typeof job.end === 'function')
+            job.end();
+
+          found = true;
+        }
+
+      // Remove the priorities array:
+      a = _sortedByPriorityJobs;
+      for (i = 0, l = a.length; i < l; i++)
+        if (a[i].id === v1) {
+          a.splice(i, 1);
+          break;
+        }
+
+      if (!found)
+        throw new Error('[conrad.killJob] Job "' + v1 + '" not found.');
+
+    // If none of those cases, throw an error:
+    } else
+      throw new Error('[conrad.killJob] Wrong arguments.');
+
+    return this;
+  }
+
+  /**
+   * Kills every running, waiting, and just added jobs.
+   *
+   * @return {Object} Returns conrad.
+   */
+  function _killAll() {
+    var k,
+        jobs = __extend(_jobs, _runningJobs, _waitingJobs);
+
+    // Take every jobs and push them into the _doneJobs object:
+    if (_parameters.history)
+      for (k in jobs) {
+        jobs[k].status = 'done';
+        _doneJobs.push(jobs[k]);
+
+        if (typeof jobs[k].end === 'function')
+          jobs[k].end();
+      }
+
+    // Reinitialize the different jobs lists:
+    _jobs = {};
+    _waitingJobs = {};
+    _runningJobs = {};
+    _sortedByPriorityJobs = [];
+
+    // In case some jobs are added right after the kill:
+    _isRunning = false;
+
+    return this;
+  }
+
+  /**
+   * Returns true if a job with the specified id is currently running or
+   * waiting, and false else.
+   *
+   * @param  {String}  id The id of the job.
+   * @return {?Object} Returns the job object if it exists.
+   */
+  function _hasJob(id) {
+    var job = _jobs[id] || _runningJobs[id] || _waitingJobs[id];
+    return job ? __extend(job) : null;
+  }
+
+  /**
+   * This method will set the setting specified by "v1" to the value specified
+   * by "v2" if both are given, and else return the current value of the
+   * settings "v1".
+   *
+   * @param  {String}   v1 The name of the property.
+   * @param  {?*}       v2 Eventually, a value to set to the specified
+   *                       property.
+   * @return {Object|*} Returns the specified settings value if "v2" is not
+   *                    given, and conrad else.
+   */
+  function _settings(v1, v2) {
+    var o;
+
+    if (typeof a1 === 'string' && arguments.length === 1)
+      return _parameters[a1];
+    else {
+      o = (typeof a1 === 'object' && arguments.length === 1) ?
+        a1 || {} :
+        {};
+      if (typeof a1 === 'string')
+        o[a1] = a2;
+
+      for (var k in o)
+        if (o[k] !== undefined)
+          _parameters[k] = o[k];
+        else
+          delete _parameters[k];
+
+      return this;
+    }
+  }
+
+  /**
+   * Returns true if conrad is currently running, and false else.
+   *
+   * @return {Boolean} Returns _isRunning.
+   */
+  function _getIsRunning() {
+    return _isRunning;
+  }
+
+  /**
+   * Unreference every job that is stored in the _doneJobs object. It will
+   * not be possible anymore to get stats about these jobs, but it will release
+   * the memory.
+   *
+   * @return {Object} Returns conrad.
+   */
+  function _clearHistory() {
+    _doneJobs = [];
+    return this;
+  }
+
+  /**
+   * Returns a snapshot of every data about jobs that wait to be started, are
+   * currently running or are done.
+   *
+   * It is possible to get only running, waiting or done jobs by giving
+   * "running", "waiting" or "done" as fist argument.
+   *
+   * It is also possible to get every job with a specified id by giving it as
+   * first argument. Also, using a RegExp instead of an id will return every
+   * jobs whose ids match the RegExp. And these two last use cases work as well
+   * by giving before "running", "waiting" or "done".
+   *
+   * @return {Array} The array of the matching jobs.
+   *
+   * Some call examples:
+   * *******************
+   *  > conrad.getStats('running')
+   *  > conrad.getStats('waiting')
+   *  > conrad.getStats('done')
+   *  > conrad.getStats('myJob')
+   *  > conrad.getStats(/test/)
+   *  > conrad.getStats('running', 'myRunningJob')
+   *  > conrad.getStats('running', /test/)
+   */
+  function _getStats(v1, v2) {
+    var a,
+        k,
+        i,
+        l,
+        stats,
+        pattern,
+        isPatternString;
+
+    if (!arguments.length) {
+      stats = [];
+
+      for (k in _jobs)
+        stats.push(_jobs[k]);
+
+      for (k in _waitingJobs)
+        stats.push(_waitingJobs[k]);
+
+      for (k in _runningJobs)
+        stats.push(_runningJobs[k]);
+
+      stats = stats.concat(_doneJobs);
+    }
+
+    if (typeof v1 === 'string')
+      switch (v1) {
+        case 'waiting':
+          stats = __objectValues(_waitingJobs);
+          break;
+        case 'running':
+          stats = __objectValues(_runningJobs);
+          break;
+        case 'done':
+          stats = _doneJobs;
+          break;
+        default:
+          pattern = v1;
+      }
+
+    if (v1 instanceof RegExp)
+      pattern = v1;
+
+    if (!pattern && (typeof v2 === 'string' || v2 instanceof RegExp))
+      pattern = v2;
+
+    // Filter jobs if a pattern is given:
+    if (pattern) {
+      isPatternString = typeof pattern === 'string';
+
+      if (stats instanceof Array) {
+        a = stats;
+      } else if (typeof stats === 'object') {
+        a = [];
+
+        for (k in stats)
+          a = a.concat(stats[k]);
+      } else {
+        a = [];
+
+        for (k in _jobs)
+          a.push(_jobs[k]);
+
+        for (k in _waitingJobs)
+          a.push(_waitingJobs[k]);
+
+        for (k in _runningJobs)
+          a.push(_runningJobs[k]);
+
+        a = a.concat(_doneJobs);
+      }
+
+      stats = [];
+      for (i = 0, l = a.length; i < l; i++)
+        if (isPatternString ? a[i].id === pattern : a[i].id.match(pattern))
+          stats.push(a[i]);
+    }
+
+    return __clone(stats);
+  }
+
+
+  /**
+   * TOOLS FUNCTIONS:
+   * ****************
+   */
+
+  /**
+   * This function takes any number of objects as arguments, copies from each
+   * of these objects each pair key/value into a new object, and finally
+   * returns this object.
+   *
+   * The arguments are parsed from the last one to the first one, such that
+   * when two objects have keys in common, the "earliest" object wins.
+   *
+   * Example:
+   * ********
+   *  > var o1 = {
+   *  >       a: 1,
+   *  >       b: 2,
+   *  >       c: '3'
+   *  >     },
+   *  >     o2 = {
+   *  >       c: '4',
+   *  >       d: [ 5 ]
+   *  >     };
+   *  > __extend(o1, o2);
+   *  > // Returns: {
+   *  > //   a: 1,
+   *  > //   b: 2,
+   *  > //   c: '3',
+   *  > //   d: [ 5 ]
+   *  > // };
+   *
+   * @param  {Object+} Any number of objects.
+   * @return {Object}  The merged object.
+   */
+  function __extend() {
+    var i,
+        k,
+        res = {},
+        l = arguments.length;
+
+    for (i = l - 1; i >= 0; i--)
+      for (k in arguments[i])
+        res[k] = arguments[i][k];
+
+    return res;
+  }
+
+  /**
+   * This function simply clones an object. This object must contain only
+   * objects, arrays and immutable values. Since it is not public, it does not
+   * deal with cyclic references, DOM elements and instantiated objects - so
+   * use it carefully.
+   *
+   * @param  {Object} The object to clone.
+   * @return {Object} The clone.
+   */
+  function __clone(item) {
+    var result, i, k, l;
+
+    if (!item)
+      return item;
+
+    if (Array.isArray(item)) {
+      result = [];
+      for (i = 0, l = item.length; i < l; i++)
+        result.push(__clone(item[i]));
+    } else if (typeof item === 'object') {
+      result = {};
+      for (i in item)
+        result[i] = __clone(item[i]);
+    } else
+      result = item;
+
+    return result;
+  }
+
+  /**
+   * Returns an array containing the values of an object.
+   *
+   * @param  {Object} The object.
+   * @return {Array}  The array of values.
+   */
+  function __objectValues(o) {
+    var k,
+        a = [];
+
+    for (k in o)
+      a.push(o[k]);
+
+    return a;
+  }
+
+  /**
+   * A short "Date.now()" polyfill.
+   *
+   * @return {Number} The current time (in ms).
+   */
+  function __dateNow() {
+    return Date.now ? Date.now() : new Date().getTime();
+  }
+
+  /**
+   * Polyfill for the Array.isArray function:
+   */
+  if (!Array.isArray)
+    Array.isArray = function(v) {
+      return Object.prototype.toString.call(v) === '[object Array]';
+    };
+
+
+  /**
+   * EXPORT PUBLIC API:
+   * ******************
+   */
+  var conrad = {
+    hasJob: _hasJob,
+    addJob: _addJob,
+    killJob: _killJob,
+    killAll: _killAll,
+    settings: _settings,
+    getStats: _getStats,
+    isRunning: _getIsRunning,
+    clearHistory: _clearHistory,
+
+    // Events management:
+    bind: _bind,
+    unbind: _unbind,
+
+    // Version:
+    version: '0.1.0'
+  };
+
+  if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports)
+      exports = module.exports = conrad;
+    exports.conrad = conrad;
+  }
+  global.conrad = conrad;
+})(this);

src/main/java/net/jrtechs/www/client/src/middlewares/sigma.middlewares.copy.js

@@ -0,0 +1,35 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.middlewares');
+
+  /**
+   * This middleware will just copy the graphic properties.
+   *
+   * @param {?string} readPrefix  The read prefix.
+   * @param {?string} writePrefix The write prefix.
+   */
+  sigma.middlewares.copy = function(readPrefix, writePrefix) {
+    var i,
+        l,
+        a;
+
+    if (writePrefix + '' === readPrefix + '')
+      return;
+
+    a = this.graph.nodes();
+    for (i = 0, l = a.length; i < l; i++) {
+      a[i][writePrefix + 'x'] = a[i][readPrefix + 'x'];
+      a[i][writePrefix + 'y'] = a[i][readPrefix + 'y'];
+      a[i][writePrefix + 'size'] = a[i][readPrefix + 'size'];
+    }
+
+    a = this.graph.edges();
+    for (i = 0, l = a.length; i < l; i++)
+      a[i][writePrefix + 'size'] = a[i][readPrefix + 'size'];
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/middlewares/sigma.middlewares.rescale.js

@@ -0,0 +1,189 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.middlewares');
+  sigma.utils.pkg('sigma.utils');
+
+  /**
+   * This middleware will rescale the graph such that it takes an optimal space
+   * on the renderer.
+   *
+   * As each middleware, this function is executed in the scope of the sigma
+   * instance.
+   *
+   * @param {?string} readPrefix  The read prefix.
+   * @param {?string} writePrefix The write prefix.
+   * @param {object}  options     The parameters.
+   */
+  sigma.middlewares.rescale = function(readPrefix, writePrefix, options) {
+    var i,
+        l,
+        a,
+        b,
+        c,
+        d,
+        scale,
+        margin,
+        n = this.graph.nodes(),
+        e = this.graph.edges(),
+        settings = this.settings.embedObjects(options || {}),
+        bounds = settings('bounds') || sigma.utils.getBoundaries(
+          this.graph,
+          readPrefix,
+          true
+        ),
+        minX = bounds.minX,
+        minY = bounds.minY,
+        maxX = bounds.maxX,
+        maxY = bounds.maxY,
+        sizeMax = bounds.sizeMax,
+        weightMax = bounds.weightMax,
+        w = settings('width') || 1,
+        h = settings('height') || 1,
+        rescaleSettings = settings('autoRescale'),
+        validSettings = {
+          nodePosition: 1,
+          nodeSize: 1,
+          edgeSize: 1
+        };
+
+    /**
+     * What elements should we rescale?
+     */
+    if (!(rescaleSettings instanceof Array))
+      rescaleSettings = ['nodePosition', 'nodeSize', 'edgeSize'];
+
+    for (i = 0, l = rescaleSettings.length; i < l; i++)
+      if (!validSettings[rescaleSettings[i]])
+        throw new Error(
+          'The rescale setting "' + rescaleSettings[i] + '" is not recognized.'
+        );
+
+    var np = ~rescaleSettings.indexOf('nodePosition'),
+        ns = ~rescaleSettings.indexOf('nodeSize'),
+        es = ~rescaleSettings.indexOf('edgeSize');
+
+    /**
+     * First, we compute the scaling ratio, without considering the sizes
+     * of the nodes : Each node will have its center in the canvas, but might
+     * be partially out of it.
+     */
+    scale = settings('scalingMode') === 'outside' ?
+      Math.max(
+        w / Math.max(maxX - minX, 1),
+        h / Math.max(maxY - minY, 1)
+      ) :
+      Math.min(
+        w / Math.max(maxX - minX, 1),
+        h / Math.max(maxY - minY, 1)
+      );
+
+    /**
+     * Then, we correct that scaling ratio considering a margin, which is
+     * basically the size of the biggest node.
+     * This has to be done as a correction since to compare the size of the
+     * biggest node to the X and Y values, we have to first get an
+     * approximation of the scaling ratio.
+     **/
+    margin =
+      (
+        settings('rescaleIgnoreSize') ?
+          0 :
+          (settings('maxNodeSize') || sizeMax) / scale
+      ) +
+      (settings('sideMargin') || 0);
+    maxX += margin;
+    minX -= margin;
+    maxY += margin;
+    minY -= margin;
+
+    // Fix the scaling with the new extrema:
+    scale = settings('scalingMode') === 'outside' ?
+      Math.max(
+        w / Math.max(maxX - minX, 1),
+        h / Math.max(maxY - minY, 1)
+      ) :
+      Math.min(
+        w / Math.max(maxX - minX, 1),
+        h / Math.max(maxY - minY, 1)
+      );
+
+    // Size homothetic parameters:
+    if (!settings('maxNodeSize') && !settings('minNodeSize')) {
+      a = 1;
+      b = 0;
+    } else if (settings('maxNodeSize') === settings('minNodeSize')) {
+      a = 0;
+      b = +settings('maxNodeSize');
+    } else {
+      a = (settings('maxNodeSize') - settings('minNodeSize')) / sizeMax;
+      b = +settings('minNodeSize');
+    }
+
+    if (!settings('maxEdgeSize') && !settings('minEdgeSize')) {
+      c = 1;
+      d = 0;
+    } else if (settings('maxEdgeSize') === settings('minEdgeSize')) {
+      c = 0;
+      d = +settings('minEdgeSize');
+    } else {
+      c = (settings('maxEdgeSize') - settings('minEdgeSize')) / weightMax;
+      d = +settings('minEdgeSize');
+    }
+
+    // Rescale the nodes and edges:
+    for (i = 0, l = e.length; i < l; i++)
+      e[i][writePrefix + 'size'] =
+        e[i][readPrefix + 'size'] * (es ? c : 1) + (es ? d : 0);
+
+    for (i = 0, l = n.length; i < l; i++) {
+      n[i][writePrefix + 'size'] =
+        n[i][readPrefix + 'size'] * (ns ? a : 1) + (ns ? b : 0);
+      n[i][writePrefix + 'x'] =
+        (n[i][readPrefix + 'x'] - (maxX + minX) / 2) * (np ? scale : 1);
+      n[i][writePrefix + 'y'] =
+        (n[i][readPrefix + 'y'] - (maxY + minY) / 2) * (np ? scale : 1);
+    }
+  };
+
+  sigma.utils.getBoundaries = function(graph, prefix, doEdges) {
+    var i,
+        l,
+        e = graph.edges(),
+        n = graph.nodes(),
+        weightMax = -Infinity,
+        sizeMax = -Infinity,
+        minX = Infinity,
+        minY = Infinity,
+        maxX = -Infinity,
+        maxY = -Infinity;
+
+    if (doEdges)
+      for (i = 0, l = e.length; i < l; i++)
+        weightMax = Math.max(e[i][prefix + 'size'], weightMax);
+
+    for (i = 0, l = n.length; i < l; i++) {
+      sizeMax = Math.max(n[i][prefix + 'size'], sizeMax);
+      maxX = Math.max(n[i][prefix + 'x'], maxX);
+      minX = Math.min(n[i][prefix + 'x'], minX);
+      maxY = Math.max(n[i][prefix + 'y'], maxY);
+      minY = Math.min(n[i][prefix + 'y'], minY);
+    }
+
+    weightMax = weightMax || 1;
+    sizeMax = sizeMax || 1;
+
+    return {
+      weightMax: weightMax,
+      sizeMax: sizeMax,
+      minX: minX,
+      minY: minY,
+      maxX: maxX,
+      maxY: maxY
+    };
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/misc/sigma.misc.animation.js

@@ -0,0 +1,239 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.misc.animation.running');
+
+  /**
+   * Generates a unique ID for the animation.
+   *
+   * @return {string} Returns the new ID.
+   */
+  var _getID = (function() {
+    var id = 0;
+    return function() {
+      return '' + (++id);
+    };
+  })();
+
+  /**
+   * This function animates a camera. It has to be called with the camera to
+   * animate, the values of the coordinates to reach and eventually some
+   * options. It returns a number id, that you can use to kill the animation,
+   * with the method sigma.misc.animation.kill(id).
+   *
+   * The available options are:
+   *
+   *   {?number}            duration   The duration of the animation.
+   *   {?function}          onNewFrame A callback to execute when the animation
+   *                                   enter a new frame.
+   *   {?function}          onComplete A callback to execute when the animation
+   *                                   is completed or killed.
+   *   {?(string|function)} easing     The name of a function from the package
+   *                                   sigma.utils.easings, or a custom easing
+   *                                   function.
+   *
+   * @param  {camera}  camera  The camera to animate.
+   * @param  {object}  target  The coordinates to reach.
+   * @param  {?object} options Eventually an object to specify some options to
+   *                           the function. The available options are
+   *                           presented in the description of the function.
+   * @return {number}          The animation id, to make it easy to kill
+   *                           through the method "sigma.misc.animation.kill".
+   */
+  sigma.misc.animation.camera = function(camera, val, options) {
+    if (
+      !(camera instanceof sigma.classes.camera) ||
+      typeof val !== 'object' ||
+      !val
+    )
+      throw 'animation.camera: Wrong arguments.';
+
+    if (
+      typeof val.x !== 'number' &&
+      typeof val.y !== 'number' &&
+      typeof val.ratio !== 'number' &&
+      typeof val.angle !== 'number'
+    )
+      throw 'There must be at least one valid coordinate in the given val.';
+
+    var fn,
+        id,
+        anim,
+        easing,
+        duration,
+        initialVal,
+        o = options || {},
+        start = sigma.utils.dateNow();
+
+    // Store initial values:
+    initialVal = {
+      x: camera.x,
+      y: camera.y,
+      ratio: camera.ratio,
+      angle: camera.angle
+    };
+
+    duration = o.duration;
+    easing = typeof o.easing !== 'function' ?
+      sigma.utils.easings[o.easing || 'quadraticInOut'] :
+      o.easing;
+
+    fn = function() {
+      var coef,
+          t = o.duration ? (sigma.utils.dateNow() - start) / o.duration : 1;
+
+      // If the animation is over:
+      if (t >= 1) {
+        camera.isAnimated = false;
+        camera.goTo({
+          x: val.x !== undefined ? val.x : initialVal.x,
+          y: val.y !== undefined ? val.y : initialVal.y,
+          ratio: val.ratio !== undefined ? val.ratio : initialVal.ratio,
+          angle: val.angle !== undefined ? val.angle : initialVal.angle
+        });
+
+        cancelAnimationFrame(id);
+        delete sigma.misc.animation.running[id];
+
+        // Check callbacks:
+        if (typeof o.onComplete === 'function')
+          o.onComplete();
+
+      // Else, let's keep going:
+      } else {
+        coef = easing(t);
+        camera.isAnimated = true;
+        camera.goTo({
+          x: val.x !== undefined ?
+            initialVal.x + (val.x - initialVal.x) * coef :
+            initialVal.x,
+          y: val.y !== undefined ?
+            initialVal.y + (val.y - initialVal.y) * coef :
+            initialVal.y,
+          ratio: val.ratio !== undefined ?
+            initialVal.ratio + (val.ratio - initialVal.ratio) * coef :
+            initialVal.ratio,
+          angle: val.angle !== undefined ?
+            initialVal.angle + (val.angle - initialVal.angle) * coef :
+            initialVal.angle
+        });
+
+        // Check callbacks:
+        if (typeof o.onNewFrame === 'function')
+          o.onNewFrame();
+
+        anim.frameId = requestAnimationFrame(fn);
+      }
+    };
+
+    id = _getID();
+    anim = {
+      frameId: requestAnimationFrame(fn),
+      target: camera,
+      type: 'camera',
+      options: o,
+      fn: fn
+    };
+    sigma.misc.animation.running[id] = anim;
+
+    return id;
+  };
+
+  /**
+   * Kills a running animation. It triggers the eventual onComplete callback.
+   *
+   * @param  {number} id  The id of the animation to kill.
+   * @return {object}     Returns the sigma.misc.animation package.
+   */
+  sigma.misc.animation.kill = function(id) {
+    if (arguments.length !== 1 || typeof id !== 'number')
+      throw 'animation.kill: Wrong arguments.';
+
+    var o = sigma.misc.animation.running[id];
+
+    if (o) {
+      cancelAnimationFrame(id);
+      delete sigma.misc.animation.running[o.frameId];
+
+      if (o.type === 'camera')
+        o.target.isAnimated = false;
+
+      // Check callbacks:
+      if (typeof (o.options || {}).onComplete === 'function')
+        o.options.onComplete();
+    }
+
+    return this;
+  };
+
+  /**
+   * Kills every running animations, or only the one with the specified type,
+   * if a string parameter is given.
+   *
+   * @param  {?(string|object)} filter A string to filter the animations to kill
+   *                                   on their type (example: "camera"), or an
+   *                                   object to filter on their target.
+   * @return {number}                  Returns the number of animations killed
+   *                                   that way.
+   */
+  sigma.misc.animation.killAll = function(filter) {
+    var o,
+        id,
+        count = 0,
+        type = typeof filter === 'string' ? filter : null,
+        target = typeof filter === 'object' ? filter : null,
+        running = sigma.misc.animation.running;
+
+    for (id in running)
+      if (
+        (!type || running[id].type === type) &&
+        (!target || running[id].target === target)
+      ) {
+        o = sigma.misc.animation.running[id];
+        cancelAnimationFrame(o.frameId);
+        delete sigma.misc.animation.running[id];
+
+        if (o.type === 'camera')
+          o.target.isAnimated = false;
+
+        // Increment counter:
+        count++;
+
+        // Check callbacks:
+        if (typeof (o.options || {}).onComplete === 'function')
+          o.options.onComplete();
+      }
+
+    return count;
+  };
+
+  /**
+   * Returns "true" if any animation that is currently still running matches
+   * the filter given to the function.
+   *
+   * @param  {string|object} filter A string to filter the animations to kill
+   *                                on their type (example: "camera"), or an
+   *                                object to filter on their target.
+   * @return {boolean}              Returns true if any running animation
+   *                                matches.
+   */
+  sigma.misc.animation.has = function(filter) {
+    var id,
+        type = typeof filter === 'string' ? filter : null,
+        target = typeof filter === 'object' ? filter : null,
+        running = sigma.misc.animation.running;
+
+    for (id in running)
+      if (
+        (!type || running[id].type === type) &&
+        (!target || running[id].target === target)
+      )
+        return true;
+
+    return false;
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/misc/sigma.misc.bindDOMEvents.js

@@ -0,0 +1,156 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.misc');
+
+  /**
+   * This helper will bind any DOM renderer (for instance svg)
+   * to its captors, to properly dispatch the good events to the sigma instance
+   * to manage clicking, hovering etc...
+   *
+   * It has to be called in the scope of the related renderer.
+   */
+  sigma.misc.bindDOMEvents = function(container) {
+    var self = this,
+        graph = this.graph;
+
+    // DOMElement abstraction
+    function Element(domElement) {
+
+      // Helpers
+      this.attr = function(attrName) {
+        return domElement.getAttributeNS(null, attrName);
+      };
+
+      // Properties
+      this.tag = domElement.tagName;
+      this.class = this.attr('class');
+      this.id = this.attr('id');
+
+      // Methods
+      this.isNode = function() {
+        return !!~this.class.indexOf(self.settings('classPrefix') + '-node');
+      };
+
+      this.isEdge = function() {
+        return !!~this.class.indexOf(self.settings('classPrefix') + '-edge');
+      };
+
+      this.isHover = function() {
+        return !!~this.class.indexOf(self.settings('classPrefix') + '-hover');
+      };
+    }
+
+    // Click
+    function click(e) {
+      if (!self.settings('eventsEnabled'))
+        return;
+
+      // Generic event
+      self.dispatchEvent('click', e);
+
+      // Are we on a node?
+      var element = new Element(e.target);
+
+      if (element.isNode())
+        self.dispatchEvent('clickNode', {
+          node: graph.nodes(element.attr('data-node-id'))
+        });
+      else
+        self.dispatchEvent('clickStage');
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    // Double click
+    function doubleClick(e) {
+      if (!self.settings('eventsEnabled'))
+        return;
+
+      // Generic event
+      self.dispatchEvent('doubleClick', e);
+
+      // Are we on a node?
+      var element = new Element(e.target);
+
+      if (element.isNode())
+        self.dispatchEvent('doubleClickNode', {
+          node: graph.nodes(element.attr('data-node-id'))
+        });
+      else
+        self.dispatchEvent('doubleClickStage');
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    // On over
+    function onOver(e) {
+      var target = e.toElement || e.target;
+
+      if (!self.settings('eventsEnabled') || !target)
+        return;
+
+      var el = new Element(target);
+
+      if (el.isNode()) {
+        self.dispatchEvent('overNode', {
+          node: graph.nodes(el.attr('data-node-id'))
+        });
+      }
+      else if (el.isEdge()) {
+        var edge = graph.edges(el.attr('data-edge-id'));
+        self.dispatchEvent('overEdge', {
+          edge: edge,
+          source: graph.nodes(edge.source),
+          target: graph.nodes(edge.target)
+        });
+      }
+    }
+
+    // On out
+    function onOut(e) {
+      var target = e.fromElement || e.originalTarget;
+
+      if (!self.settings('eventsEnabled'))
+        return;
+
+      var el = new Element(target);
+
+      if (el.isNode()) {
+        self.dispatchEvent('outNode', {
+          node: graph.nodes(el.attr('data-node-id'))
+        });
+      }
+      else if (el.isEdge()) {
+        var edge = graph.edges(el.attr('data-edge-id'));
+        self.dispatchEvent('outEdge', {
+          edge: edge,
+          source: graph.nodes(edge.source),
+          target: graph.nodes(edge.target)
+        });
+      }
+    }
+
+    // Registering Events:
+
+    // Click
+    container.addEventListener('click', click, false);
+    sigma.utils.doubleClick(container, 'click', doubleClick);
+
+    // Touch counterparts
+    container.addEventListener('touchstart', click, false);
+    sigma.utils.doubleClick(container, 'touchstart', doubleClick);
+
+    // Mouseover
+    container.addEventListener('mouseover', onOver, true);
+
+    // Mouseout
+    container.addEventListener('mouseout', onOut, true);
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/misc/sigma.misc.bindEvents.js

@@ -0,0 +1,509 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.misc');
+
+  /**
+   * This helper will bind any no-DOM renderer (for instance canvas or WebGL)
+   * to its captors, to properly dispatch the good events to the sigma instance
+   * to manage clicking, hovering etc...
+   *
+   * It has to be called in the scope of the related renderer.
+   */
+  sigma.misc.bindEvents = function(prefix) {
+    var i,
+        l,
+        mX,
+        mY,
+        captor,
+        self = this;
+
+    function getNodes(e) {
+      if (e) {
+        mX = 'x' in e.data ? e.data.x : mX;
+        mY = 'y' in e.data ? e.data.y : mY;
+      }
+
+      var i,
+          j,
+          l,
+          n,
+          x,
+          y,
+          s,
+          inserted,
+          selected = [],
+          modifiedX = mX + self.width / 2,
+          modifiedY = mY + self.height / 2,
+          point = self.camera.cameraPosition(
+            mX,
+            mY
+          ),
+          nodes = self.camera.quadtree.point(
+            point.x,
+            point.y
+          );
+
+      if (nodes.length)
+        for (i = 0, l = nodes.length; i < l; i++) {
+          n = nodes[i];
+          x = n[prefix + 'x'];
+          y = n[prefix + 'y'];
+          s = n[prefix + 'size'];
+
+          if (
+            !n.hidden &&
+            modifiedX > x - s &&
+            modifiedX < x + s &&
+            modifiedY > y - s &&
+            modifiedY < y + s &&
+            Math.sqrt(
+              Math.pow(modifiedX - x, 2) +
+              Math.pow(modifiedY - y, 2)
+            ) < s
+          ) {
+            // Insert the node:
+            inserted = false;
+
+            for (j = 0; j < selected.length; j++)
+              if (n.size > selected[j].size) {
+                selected.splice(j, 0, n);
+                inserted = true;
+                break;
+              }
+
+            if (!inserted)
+              selected.push(n);
+          }
+        }
+
+      return selected;
+    }
+
+
+    function getEdges(e) {
+      if (!self.settings('enableEdgeHovering')) {
+        // No event if the setting is off:
+        return [];
+      }
+
+      var isCanvas = (
+        sigma.renderers.canvas && self instanceof sigma.renderers.canvas);
+
+      if (!isCanvas) {
+        // A quick hardcoded rule to prevent people from using this feature
+        // with the WebGL renderer (which is not good enough at the moment):
+        throw new Error(
+          'The edge events feature is not compatible with the WebGL renderer'
+        );
+      }
+
+      if (e) {
+        mX = 'x' in e.data ? e.data.x : mX;
+        mY = 'y' in e.data ? e.data.y : mY;
+      }
+
+      var i,
+          j,
+          l,
+          a,
+          edge,
+          s,
+          maxEpsilon = self.settings('edgeHoverPrecision'),
+          source,
+          target,
+          cp,
+          nodeIndex = {},
+          inserted,
+          selected = [],
+          modifiedX = mX + self.width / 2,
+          modifiedY = mY + self.height / 2,
+          point = self.camera.cameraPosition(
+            mX,
+            mY
+          ),
+          edges = [];
+
+      if (isCanvas) {
+        var nodesOnScreen = self.camera.quadtree.area(
+          self.camera.getRectangle(self.width, self.height)
+        );
+        for (a = nodesOnScreen, i = 0, l = a.length; i < l; i++)
+          nodeIndex[a[i].id] = a[i];
+      }
+
+      if (self.camera.edgequadtree !== undefined) {
+        edges = self.camera.edgequadtree.point(
+          point.x,
+          point.y
+        );
+      }
+
+      function insertEdge(selected, edge) {
+        inserted = false;
+
+        for (j = 0; j < selected.length; j++)
+          if (edge.size > selected[j].size) {
+            selected.splice(j, 0, edge);
+            inserted = true;
+            break;
+          }
+
+        if (!inserted)
+          selected.push(edge);
+      }
+
+      if (edges.length)
+        for (i = 0, l = edges.length; i < l; i++) {
+          edge = edges[i];
+          source = self.graph.nodes(edge.source);
+          target = self.graph.nodes(edge.target);
+          // (HACK) we can't get edge[prefix + 'size'] on WebGL renderer:
+          s = edge[prefix + 'size'] ||
+              edge['read_' + prefix + 'size'];
+
+          // First, let's identify which edges are drawn. To do this, we keep
+          // every edges that have at least one extremity displayed according to
+          // the quadtree and the "hidden" attribute. We also do not keep hidden
+          // edges.
+          // Then, let's check if the mouse is on the edge (we suppose that it
+          // is a line segment).
+
+          if (
+            !edge.hidden &&
+            !source.hidden && !target.hidden &&
+            (!isCanvas ||
+              (nodeIndex[edge.source] || nodeIndex[edge.target])) &&
+            sigma.utils.getDistance(
+              source[prefix + 'x'],
+              source[prefix + 'y'],
+              modifiedX,
+              modifiedY) > source[prefix + 'size'] &&
+            sigma.utils.getDistance(
+              target[prefix + 'x'],
+              target[prefix + 'y'],
+              modifiedX,
+              modifiedY) > target[prefix + 'size']
+          ) {
+            if (edge.type == 'curve' || edge.type == 'curvedArrow') {
+              if (source.id === target.id) {
+                cp = sigma.utils.getSelfLoopControlPoints(
+                  source[prefix + 'x'],
+                  source[prefix + 'y'],
+                  source[prefix + 'size']
+                );
+                if (
+                  sigma.utils.isPointOnBezierCurve(
+                  modifiedX,
+                  modifiedY,
+                  source[prefix + 'x'],
+                  source[prefix + 'y'],
+                  target[prefix + 'x'],
+                  target[prefix + 'y'],
+                  cp.x1,
+                  cp.y1,
+                  cp.x2,
+                  cp.y2,
+                  Math.max(s, maxEpsilon)
+                )) {
+                  insertEdge(selected, edge);
+                }
+              }
+              else {
+                cp = sigma.utils.getQuadraticControlPoint(
+                  source[prefix + 'x'],
+                  source[prefix + 'y'],
+                  target[prefix + 'x'],
+                  target[prefix + 'y']);
+                if (
+                  sigma.utils.isPointOnQuadraticCurve(
+                  modifiedX,
+                  modifiedY,
+                  source[prefix + 'x'],
+                  source[prefix + 'y'],
+                  target[prefix + 'x'],
+                  target[prefix + 'y'],
+                  cp.x,
+                  cp.y,
+                  Math.max(s, maxEpsilon)
+                )) {
+                  insertEdge(selected, edge);
+                }
+              }
+            } else if (
+                sigma.utils.isPointOnSegment(
+                modifiedX,
+                modifiedY,
+                source[prefix + 'x'],
+                source[prefix + 'y'],
+                target[prefix + 'x'],
+                target[prefix + 'y'],
+                Math.max(s, maxEpsilon)
+              )) {
+              insertEdge(selected, edge);
+            }
+          }
+        }
+
+      return selected;
+    }
+
+
+    function bindCaptor(captor) {
+      var nodes,
+          edges,
+          overNodes = {},
+          overEdges = {};
+
+      function onClick(e) {
+        if (!self.settings('eventsEnabled'))
+          return;
+
+        self.dispatchEvent('click', e.data);
+
+        nodes = getNodes(e);
+        edges = getEdges(e);
+
+        if (nodes.length) {
+          self.dispatchEvent('clickNode', {
+            node: nodes[0],
+            captor: e.data
+          });
+          self.dispatchEvent('clickNodes', {
+            node: nodes,
+            captor: e.data
+          });
+        } else if (edges.length) {
+          self.dispatchEvent('clickEdge', {
+            edge: edges[0],
+            captor: e.data
+          });
+          self.dispatchEvent('clickEdges', {
+            edge: edges,
+            captor: e.data
+          });
+        } else
+          self.dispatchEvent('clickStage', {captor: e.data});
+      }
+
+      function onDoubleClick(e) {
+        if (!self.settings('eventsEnabled'))
+          return;
+
+        self.dispatchEvent('doubleClick', e.data);
+
+        nodes = getNodes(e);
+        edges = getEdges(e);
+
+        if (nodes.length) {
+          self.dispatchEvent('doubleClickNode', {
+            node: nodes[0],
+            captor: e.data
+          });
+          self.dispatchEvent('doubleClickNodes', {
+            node: nodes,
+            captor: e.data
+          });
+        } else if (edges.length) {
+          self.dispatchEvent('doubleClickEdge', {
+            edge: edges[0],
+            captor: e.data
+          });
+          self.dispatchEvent('doubleClickEdges', {
+            edge: edges,
+            captor: e.data
+          });
+        } else
+          self.dispatchEvent('doubleClickStage', {captor: e.data});
+      }
+
+      function onRightClick(e) {
+        if (!self.settings('eventsEnabled'))
+          return;
+
+        self.dispatchEvent('rightClick', e.data);
+
+        nodes = getNodes(e);
+        edges = getEdges(e);
+
+        if (nodes.length) {
+          self.dispatchEvent('rightClickNode', {
+            node: nodes[0],
+            captor: e.data
+          });
+          self.dispatchEvent('rightClickNodes', {
+            node: nodes,
+            captor: e.data
+          });
+        } else if (edges.length) {
+          self.dispatchEvent('rightClickEdge', {
+            edge: edges[0],
+            captor: e.data
+          });
+          self.dispatchEvent('rightClickEdges', {
+            edge: edges,
+            captor: e.data
+          });
+        } else
+          self.dispatchEvent('rightClickStage', {captor: e.data});
+      }
+
+      function onOut(e) {
+        if (!self.settings('eventsEnabled'))
+          return;
+
+        var k,
+            i,
+            l,
+            le,
+            outNodes = [],
+            outEdges = [];
+
+        for (k in overNodes)
+          outNodes.push(overNodes[k]);
+
+        overNodes = {};
+        // Dispatch both single and multi events:
+        for (i = 0, l = outNodes.length; i < l; i++)
+          self.dispatchEvent('outNode', {
+            node: outNodes[i],
+            captor: e.data
+          });
+        if (outNodes.length)
+          self.dispatchEvent('outNodes', {
+            nodes: outNodes,
+            captor: e.data
+          });
+
+        overEdges = {};
+        // Dispatch both single and multi events:
+        for (i = 0, le = outEdges.length; i < le; i++)
+          self.dispatchEvent('outEdge', {
+            edge: outEdges[i],
+            captor: e.data
+          });
+        if (outEdges.length)
+          self.dispatchEvent('outEdges', {
+            edges: outEdges,
+            captor: e.data
+          });
+      }
+
+      function onMove(e) {
+        if (!self.settings('eventsEnabled'))
+          return;
+
+        nodes = getNodes(e);
+        edges = getEdges(e);
+
+        var i,
+            k,
+            node,
+            edge,
+            newOutNodes = [],
+            newOverNodes = [],
+            currentOverNodes = {},
+            l = nodes.length,
+            newOutEdges = [],
+            newOverEdges = [],
+            currentOverEdges = {},
+            le = edges.length;
+
+        // Check newly overred nodes:
+        for (i = 0; i < l; i++) {
+          node = nodes[i];
+          currentOverNodes[node.id] = node;
+          if (!overNodes[node.id]) {
+            newOverNodes.push(node);
+            overNodes[node.id] = node;
+          }
+        }
+
+        // Check no more overred nodes:
+        for (k in overNodes)
+          if (!currentOverNodes[k]) {
+            newOutNodes.push(overNodes[k]);
+            delete overNodes[k];
+          }
+
+        // Dispatch both single and multi events:
+        for (i = 0, l = newOverNodes.length; i < l; i++)
+          self.dispatchEvent('overNode', {
+            node: newOverNodes[i],
+            captor: e.data
+          });
+        for (i = 0, l = newOutNodes.length; i < l; i++)
+          self.dispatchEvent('outNode', {
+            node: newOutNodes[i],
+            captor: e.data
+          });
+        if (newOverNodes.length)
+          self.dispatchEvent('overNodes', {
+            nodes: newOverNodes,
+            captor: e.data
+          });
+        if (newOutNodes.length)
+          self.dispatchEvent('outNodes', {
+            nodes: newOutNodes,
+            captor: e.data
+          });
+
+        // Check newly overred edges:
+        for (i = 0; i < le; i++) {
+          edge = edges[i];
+          currentOverEdges[edge.id] = edge;
+          if (!overEdges[edge.id]) {
+            newOverEdges.push(edge);
+            overEdges[edge.id] = edge;
+          }
+        }
+
+        // Check no more overred edges:
+        for (k in overEdges)
+          if (!currentOverEdges[k]) {
+            newOutEdges.push(overEdges[k]);
+            delete overEdges[k];
+          }
+
+        // Dispatch both single and multi events:
+        for (i = 0, le = newOverEdges.length; i < le; i++)
+          self.dispatchEvent('overEdge', {
+            edge: newOverEdges[i],
+            captor: e.data
+          });
+        for (i = 0, le = newOutEdges.length; i < le; i++)
+          self.dispatchEvent('outEdge', {
+            edge: newOutEdges[i],
+            captor: e.data
+          });
+        if (newOverEdges.length)
+          self.dispatchEvent('overEdges', {
+            edges: newOverEdges,
+            captor: e.data
+          });
+        if (newOutEdges.length)
+          self.dispatchEvent('outEdges', {
+            edges: newOutEdges,
+            captor: e.data
+          });
+      }
+
+      // Bind events:
+      captor.bind('click', onClick);
+      captor.bind('mousedown', onMove);
+      captor.bind('mouseup', onMove);
+      captor.bind('mousemove', onMove);
+      captor.bind('mouseout', onOut);
+      captor.bind('doubleclick', onDoubleClick);
+      captor.bind('rightclick', onRightClick);
+      self.bind('render', onMove);
+    }
+
+    for (i = 0, l = this.captors.length; i < l; i++)
+      bindCaptor(this.captors[i]);
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/misc/sigma.misc.drawHovers.js

@@ -0,0 +1,222 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.misc');
+
+  /**
+   * This method listens to "overNode", "outNode", "overEdge" and "outEdge"
+   * events from a renderer and renders the nodes differently on the top layer.
+   * The goal is to make any node label readable with the mouse, and to
+   * highlight hovered nodes and edges.
+   *
+   * It has to be called in the scope of the related renderer.
+   */
+  sigma.misc.drawHovers = function(prefix) {
+    var self = this,
+        hoveredNodes = {},
+        hoveredEdges = {};
+
+    this.bind('overNode', function(event) {
+      var node = event.data.node;
+      if (!node.hidden) {
+        hoveredNodes[node.id] = node;
+        draw();
+      }
+    });
+
+    this.bind('outNode', function(event) {
+      delete hoveredNodes[event.data.node.id];
+      draw();
+    });
+
+    this.bind('overEdge', function(event) {
+      var edge = event.data.edge;
+      if (!edge.hidden) {
+        hoveredEdges[edge.id] = edge;
+        draw();
+      }
+    });
+
+    this.bind('outEdge', function(event) {
+      delete hoveredEdges[event.data.edge.id];
+      draw();
+    });
+
+    this.bind('render', function(event) {
+      draw();
+    });
+
+    function draw() {
+
+      var k,
+          source,
+          target,
+          hoveredNode,
+          hoveredEdge,
+          c = self.contexts.hover.canvas,
+          defaultNodeType = self.settings('defaultNodeType'),
+          defaultEdgeType = self.settings('defaultEdgeType'),
+          nodeRenderers = sigma.canvas.hovers,
+          edgeRenderers = sigma.canvas.edgehovers,
+          extremitiesRenderers = sigma.canvas.extremities,
+          embedSettings = self.settings.embedObjects({
+            prefix: prefix
+          });
+
+      // Clear self.contexts.hover:
+      self.contexts.hover.clearRect(0, 0, c.width, c.height);
+
+      // Node render: single hover
+      if (
+        embedSettings('enableHovering') &&
+        embedSettings('singleHover') &&
+        Object.keys(hoveredNodes).length
+      ) {
+        hoveredNode = hoveredNodes[Object.keys(hoveredNodes)[0]];
+        (
+          nodeRenderers[hoveredNode.type] ||
+          nodeRenderers[defaultNodeType] ||
+          nodeRenderers.def
+        )(
+          hoveredNode,
+          self.contexts.hover,
+          embedSettings
+        );
+      }
+
+      // Node render: multiple hover
+      if (
+        embedSettings('enableHovering') &&
+        !embedSettings('singleHover')
+      )
+        for (k in hoveredNodes)
+          (
+            nodeRenderers[hoveredNodes[k].type] ||
+            nodeRenderers[defaultNodeType] ||
+            nodeRenderers.def
+          )(
+            hoveredNodes[k],
+            self.contexts.hover,
+            embedSettings
+          );
+
+      // Edge render: single hover
+      if (
+        embedSettings('enableEdgeHovering') &&
+        embedSettings('singleHover') &&
+        Object.keys(hoveredEdges).length
+      ) {
+        hoveredEdge = hoveredEdges[Object.keys(hoveredEdges)[0]];
+        source = self.graph.nodes(hoveredEdge.source);
+        target = self.graph.nodes(hoveredEdge.target);
+
+        if (! hoveredEdge.hidden) {
+          (
+            edgeRenderers[hoveredEdge.type] ||
+            edgeRenderers[defaultEdgeType] ||
+            edgeRenderers.def
+          ) (
+            hoveredEdge,
+            source,
+            target,
+            self.contexts.hover,
+            embedSettings
+          );
+
+          if (embedSettings('edgeHoverExtremities')) {
+            (
+              extremitiesRenderers[hoveredEdge.type] ||
+              extremitiesRenderers.def
+            )(
+              hoveredEdge,
+              source,
+              target,
+              self.contexts.hover,
+              embedSettings
+            );
+
+          } else {
+            // Avoid edges rendered over nodes:
+            (
+              sigma.canvas.nodes[source.type] ||
+              sigma.canvas.nodes.def
+            ) (
+              source,
+              self.contexts.hover,
+              embedSettings
+            );
+            (
+              sigma.canvas.nodes[target.type] ||
+              sigma.canvas.nodes.def
+            ) (
+              target,
+              self.contexts.hover,
+              embedSettings
+            );
+          }
+        }
+      }
+
+      // Edge render: multiple hover
+      if (
+        embedSettings('enableEdgeHovering') &&
+        !embedSettings('singleHover')
+      ) {
+        for (k in hoveredEdges) {
+          hoveredEdge = hoveredEdges[k];
+          source = self.graph.nodes(hoveredEdge.source);
+          target = self.graph.nodes(hoveredEdge.target);
+
+          if (!hoveredEdge.hidden) {
+            (
+              edgeRenderers[hoveredEdge.type] ||
+              edgeRenderers[defaultEdgeType] ||
+              edgeRenderers.def
+            ) (
+              hoveredEdge,
+              source,
+              target,
+              self.contexts.hover,
+              embedSettings
+            );
+
+            if (embedSettings('edgeHoverExtremities')) {
+              (
+                extremitiesRenderers[hoveredEdge.type] ||
+                extremitiesRenderers.def
+              )(
+                hoveredEdge,
+                source,
+                target,
+                self.contexts.hover,
+                embedSettings
+              );
+            } else {
+              // Avoid edges rendered over nodes:
+              (
+                sigma.canvas.nodes[source.type] ||
+                sigma.canvas.nodes.def
+              ) (
+                source,
+                self.contexts.hover,
+                embedSettings
+              );
+              (
+                sigma.canvas.nodes[target.type] ||
+                sigma.canvas.nodes.def
+              ) (
+                target,
+                self.contexts.hover,
+                embedSettings
+              );
+            }
+          }
+        }
+      }
+    }
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.exporters.svg/README.md

@@ -0,0 +1,41 @@
+sigma.exporters.svg
+========================
+
+Plugin by [Guillaume Plique](https://github.com/Yomguithereal).
+
+---
+
+This plugin aims at providing an easy way to export a graph as a SVG file.
+
+*Basic usage*
+
+```js
+// Retrieving the svg file as a string
+var svgString = sigInst.toSVG();
+
+// Dowload the svg file
+sigInst.toSVG({download: true, filename: 'my-fancy-graph.svg'});
+```
+
+*Complex usage*
+
+```js
+sigInst.toSVG({
+  labels: true,
+  classes: false,
+  data: true,
+  download: true,
+  filename: 'hello.svg'
+});
+```
+
+*Parameters*
+
+* **size** *?integer* [`1000`]: size of the svg canvas in pixels.
+* **height** *?integer* [`1000`]: height of the svg canvas in pixels (useful only if you want a height different from the width).
+* **width** *?integer* [`1000`]: width of the svg canvas in pixels (useful only if you want a width different from the height).
+* **classes** *?boolean* [`true`]: should the exporter try to optimize the svg document by creating classes?
+* **labels** *?boolean* [`false`]: should the labels be included in the svg file?
+* **data** *?boolean* [`false`]: should additional data (node ids for instance) be included in the svg file?
+* **download** *?boolean* [`false`]: should the exporter make the browser download the svg file?
+* **filename** *?string* [`'graph.svg'`]: filename of the file to download.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.exporters.svg/sigma.exporters.svg.js

@@ -0,0 +1,225 @@
+;(function(undefined) {
+  'use strict';
+
+  /**
+   * Sigma SVG Exporter
+   * ===================
+   *
+   * This plugin is designed to export a graph to a svg file that can be
+   * downloaded or just used elsewhere.
+   *
+   * Author: Guillaume Plique (Yomguithereal)
+   * Version: 0.0.1
+   */
+
+  // Terminating if sigma were not to be found
+  if (typeof sigma === 'undefined')
+    throw 'sigma.renderers.snapshot: sigma not in scope.';
+
+
+  /**
+   * Polyfills
+   */
+  var URL = this.URL || this.webkitURL || this;
+
+
+  /**
+   * Utilities
+   */
+  function createBlob(data) {
+    return new Blob(
+      [data],
+      {type: 'image/svg+xml;charset=utf-8'}
+    );
+  }
+
+  function download(string, filename) {
+
+    // Creating blob href
+    var blob = createBlob(string);
+
+    // Anchor
+    var o = {};
+    o.anchor = document.createElement('a');
+    o.anchor.setAttribute('href', URL.createObjectURL(blob));
+    o.anchor.setAttribute('download', filename);
+
+    // Click event
+    var event = document.createEvent('MouseEvent');
+    event.initMouseEvent('click', true, false, window, 0, 0, 0 ,0, 0,
+      false, false, false, false, 0, null);
+
+    URL.revokeObjectURL(blob);
+
+    o.anchor.dispatchEvent(event);
+    delete o.anchor;
+  }
+
+
+  /**
+   * Defaults
+   */
+  var DEFAULTS = {
+    size: '1000',
+    width: '1000',
+    height: '1000',
+    classes: true,
+    labels: true,
+    data: false,
+    download: false,
+    filename: 'graph.svg'
+  };
+
+  var XMLNS = 'http://www.w3.org/2000/svg';
+
+
+  /**
+   * Subprocesses
+   */
+  function optimize(svg, prefix, params) {
+    var nodeColorIndex = {},
+        edgeColorIndex = {},
+        count = 0,
+        color,
+        style,
+        styleText = '',
+        f,
+        i,
+        l;
+
+    // Creating style tag if needed
+    if (params.classes) {
+      style = document.createElementNS(XMLNS, 'style');
+      style.setAttribute('type', 'text/css')
+      svg.insertBefore(style, svg.firstChild);
+    }
+
+    // Iterating over nodes
+    var nodes = svg.querySelectorAll('[id="' + prefix + '-group-nodes"] > [class="' + prefix + '-node"]');
+
+    for (i = 0, l = nodes.length, f = true; i < l; i++) {
+      color = nodes[i].getAttribute('fill');
+
+      if (!params.data)
+        nodes[i].removeAttribute('data-node-id');
+
+      if (params.classes) {
+
+        if (!(color in nodeColorIndex)) {
+          nodeColorIndex[color] = (f ? prefix + '-node' : 'c-' + (count++));
+          styleText += '.' + nodeColorIndex[color] + '{fill: ' + color + '}';
+        }
+
+        if (nodeColorIndex[color] !== prefix + '-node')
+          nodes[i].setAttribute('class', nodes[i].getAttribute('class') + ' ' + nodeColorIndex[color]);
+        nodes[i].removeAttribute('fill');
+      }
+
+      f = false;
+    }
+
+    // Iterating over edges
+    var edges = svg.querySelectorAll('[id="' + prefix + '-group-edges"] > [class="' + prefix + '-edge"]');
+
+    for (i = 0, l = edges.length, f = true; i < l; i++) {
+      color = edges[i].getAttribute('stroke');
+
+      if (!params.data)
+        edges[i].removeAttribute('data-edge-id');
+
+      if (params.classes) {
+
+        if (!(color in edgeColorIndex)) {
+          edgeColorIndex[color] = (f ? prefix + '-edge' : 'c-' + (count++));
+          styleText += '.' + edgeColorIndex[color] + '{stroke: ' + color + '}';
+        }
+
+        if (edgeColorIndex[color] !== prefix + '-edge')
+          edges[i].setAttribute('class', edges[i].getAttribute('class') + ' ' + edgeColorIndex[color]);
+        edges[i].removeAttribute('stroke');
+      }
+
+      f = false;
+    }
+
+    if (params.classes)
+      style.appendChild(document.createTextNode(styleText));
+  }
+
+
+  /**
+   * Extending prototype
+   */
+  sigma.prototype.toSVG = function(params) {
+    params = params || {};
+
+    var prefix = this.settings('classPrefix'),
+        w = params.size || params.width || DEFAULTS.size,
+        h = params.size || params.height || DEFAULTS.size;
+
+    // Creating a dummy container
+    var container = document.createElement('div');
+    container.setAttribute('width', w);
+    container.setAttribute('height', h);
+    container.setAttribute('style', 'position:absolute; top: 0px; left:0px; width: ' + w + 'px; height: ' + h + 'px;');
+
+    // Creating a camera
+    var camera = this.addCamera();
+
+    // Creating a svg renderer
+    var renderer = this.addRenderer({
+      camera: camera,
+      container: container,
+      type: 'svg',
+      forceLabels: !!params.labels
+    });
+
+    // Refreshing
+    renderer.resize(w, h);
+    this.refresh();
+
+    // Dropping camera and renderers before something nasty happens
+    this.killRenderer(renderer);
+    this.killCamera(camera);
+
+    // Retrieving svg
+    var svg = container.querySelector('svg');
+    svg.removeAttribute('style');
+    svg.setAttribute('width', w + 'px');
+    svg.setAttribute('height', h + 'px');
+    svg.setAttribute('x', '0px');
+    svg.setAttribute('y', '0px');
+    // svg.setAttribute('viewBox', '0 0 1000 1000');
+
+    // Dropping labels
+    if (!params.labels) {
+      var labelGroup = svg.querySelector('[id="' + prefix + '-group-labels"]');
+      svg.removeChild(labelGroup);
+    }
+
+    // Dropping hovers
+    var hoverGroup = svg.querySelector('[id="' + prefix + '-group-hovers"]');
+    svg.removeChild(hoverGroup);
+
+    // Optims?
+    params.classes = (params.classes !== false);
+    if (!params.data || params.classes)
+      optimize(svg, prefix, params);
+
+    // Retrieving svg string
+    var svgString = svg.outerHTML;
+
+    // Paranoid cleanup
+    container = null;
+
+    // Output string
+    var output = '<?xml version="1.0" encoding="utf-8"?>\n';
+    output += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n';
+    output += svgString;
+
+    if (params.download)
+      download(output, params.filename || DEFAULTS.filename);
+
+    return output;
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.forceAtlas2/Gruntfile.js

@@ -0,0 +1,28 @@
+module.exports = function(grunt) {
+
+
+  // Setting grunt base as sigma's root directory
+  grunt.file.setBase('../../');
+
+  // Registering needed files
+  var files = ['supervisor.js', 'worker.js'].map(function(p) {
+    return __dirname + '/' + p;
+  });
+
+  // Project configuration:
+  grunt.initConfig({
+    forceAtlas2: {
+      prod: {
+        files: {
+          'build/plugins/sigma.layout.forceAtlas2.min.js': files
+        }
+      }
+    }
+  });
+
+  // Loading tasks
+  grunt.loadTasks(__dirname + '/tasks');
+
+  // By default, we will crush and then minify
+  grunt.registerTask('default', ['forceAtlas2:prod']);
+};

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.forceAtlas2/README.md

@@ -0,0 +1,79 @@
+sigma.layout.forceAtlas2
+========================
+
+Algorithm by [Mathieu Jacomy](https://github.com/jacomyma).
+
+Plugin by [Guillaume Plique](https://github.com/Yomguithereal).
+
+---
+
+This plugin implements [ForceAtlas2](http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0098679), a force-directed layout algorithm.
+
+For optimization purposes, the algorithm's computations are delegated to a web worker.
+
+## Methods
+
+**sigma.startForceAtlas2**
+
+Starts or unpauses the layout. It is possible to pass a configuration if this is the first time you start the layout.
+
+```js
+sigmaInstance.startForceAtlas2(config);
+```
+
+**sigma.stopForceAtlas2**
+
+Pauses the layout.
+
+```js
+sigmaInstance.stopForceAtlas2();
+```
+
+**sigma.configForceAtlas2**
+
+Changes the layout's configuration.
+
+```js
+sigmaInstance.configForceAtlas2(config);
+```
+
+**sigma.killForceAtlas2**
+
+Completely stops the layout and terminates the assiociated worker. You can still restart it later, but a new worker will have to initialize.
+
+```js
+sigmaInstance.killForceAtlas2();
+```
+
+**sigma.isForceAtlas2Running**
+
+Returns whether ForceAtlas2 is running.
+
+```js
+sigmaInstance.isForceAtlas2Running();
+```
+
+## Configuration
+
+*Algorithm configuration*
+
+* **linLogMode** *boolean* `false`: switch ForceAtlas' model from lin-lin to lin-log (tribute to Andreas Noack). Makes clusters more tight.
+* **outboundAttractionDistribution** *boolean* `false`
+* **adjustSizes** *boolean* `false`
+* **edgeWeightInfluence** *number* `0`: how much influence you give to the edges weight. 0 is "no influence" and 1 is "normal".
+* **scalingRatio** *number* `1`: how much repulsion you want. More makes a more sparse graph.
+* **strongGravityMode** *boolean* `false`
+* **gravity** *number* `1`: attracts nodes to the center. Prevents islands from drifting away.
+* **barnesHutOptimize** *boolean* `true`: should we use the algorithm's Barnes-Hut to improve repulsion's scalability (`O(n²)` to `O(nlog(n))`)? This is useful for large graph but harmful to small ones.
+* **barnesHutTheta** *number* `0.5`
+* **slowDown** *number* `1`
+* **startingIterations** *integer* `1`: number of iterations to be run before the first render.
+* **iterationsPerRender** *integer* `1`: number of iterations to be run before each render.
+
+*Supervisor configuration*
+
+* **worker** *boolean* `true`: should the layout use a web worker?
+* **workerUrl** *string* : path to the worker file if needed because your browser does not support blob workers.
+
+## Notes
+1. The layout won't stop by itself, so if you want it to stop, you will have to trigger it explicitly.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.forceAtlas2/supervisor.js

@@ -0,0 +1,340 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  /**
+   * Sigma ForceAtlas2.5 Supervisor
+   * ===============================
+   *
+   * Author: Guillaume Plique (Yomguithereal)
+   * Version: 0.1
+   */
+  var _root = this;
+
+  /**
+   * Feature detection
+   * ------------------
+   */
+  var webWorkers = 'Worker' in _root;
+
+  /**
+   * Supervisor Object
+   * ------------------
+   */
+  function Supervisor(sigInst, options) {
+    var _this = this,
+        workerFn = sigInst.getForceAtlas2Worker &&
+          sigInst.getForceAtlas2Worker();
+
+    options = options || {};
+
+    // _root URL Polyfill
+    _root.URL = _root.URL || _root.webkitURL;
+
+    // Properties
+    this.sigInst = sigInst;
+    this.graph = this.sigInst.graph;
+    this.ppn = 10;
+    this.ppe = 3;
+    this.config = {};
+    this.shouldUseWorker =
+      options.worker === false ? false : true && webWorkers;
+    this.workerUrl = options.workerUrl;
+
+    // State
+    this.started = false;
+    this.running = false;
+
+    // Web worker or classic DOM events?
+    if (this.shouldUseWorker) {
+      if (!this.workerUrl) {
+        var blob = this.makeBlob(workerFn);
+        this.worker = new Worker(URL.createObjectURL(blob));
+      }
+      else {
+        this.worker = new Worker(this.workerUrl);
+      }
+
+      // Post Message Polyfill
+      this.worker.postMessage =
+        this.worker.webkitPostMessage || this.worker.postMessage;
+    }
+    else {
+
+      eval(workerFn);
+    }
+
+    // Worker message receiver
+    this.msgName = (this.worker) ? 'message' : 'newCoords';
+    this.listener = function(e) {
+
+      // Retrieving data
+      _this.nodesByteArray = new Float32Array(e.data.nodes);
+
+      // If ForceAtlas2 is running, we act accordingly
+      if (_this.running) {
+
+        // Applying layout
+        _this.applyLayoutChanges();
+
+        // Send data back to worker and loop
+        _this.sendByteArrayToWorker();
+
+        // Rendering graph
+        _this.sigInst.refresh();
+      }
+    };
+
+    (this.worker || document).addEventListener(this.msgName, this.listener);
+
+    // Filling byteArrays
+    this.graphToByteArrays();
+
+    // Binding on kill to properly terminate layout when parent is killed
+    sigInst.bind('kill', function() {
+      sigInst.killForceAtlas2();
+    });
+  }
+
+  Supervisor.prototype.makeBlob = function(workerFn) {
+    var blob;
+
+    try {
+      blob = new Blob([workerFn], {type: 'application/javascript'});
+    }
+    catch (e) {
+      _root.BlobBuilder = _root.BlobBuilder ||
+                          _root.WebKitBlobBuilder ||
+                          _root.MozBlobBuilder;
+
+      blob = new BlobBuilder();
+      blob.append(workerFn);
+      blob = blob.getBlob();
+    }
+
+    return blob;
+  };
+
+  Supervisor.prototype.graphToByteArrays = function() {
+    var nodes = this.graph.nodes(),
+        edges = this.graph.edges(),
+        nbytes = nodes.length * this.ppn,
+        ebytes = edges.length * this.ppe,
+        nIndex = {},
+        i,
+        j,
+        l;
+
+    // Allocating Byte arrays with correct nb of bytes
+    this.nodesByteArray = new Float32Array(nbytes);
+    this.edgesByteArray = new Float32Array(ebytes);
+
+    // Iterate through nodes
+    for (i = j = 0, l = nodes.length; i < l; i++) {
+
+      // Populating index
+      nIndex[nodes[i].id] = j;
+
+      // Populating byte array
+      this.nodesByteArray[j] = nodes[i].x;
+      this.nodesByteArray[j + 1] = nodes[i].y;
+      this.nodesByteArray[j + 2] = 0;
+      this.nodesByteArray[j + 3] = 0;
+      this.nodesByteArray[j + 4] = 0;
+      this.nodesByteArray[j + 5] = 0;
+      this.nodesByteArray[j + 6] = 1 + this.graph.degree(nodes[i].id);
+      this.nodesByteArray[j + 7] = 1;
+      this.nodesByteArray[j + 8] = nodes[i].size;
+      this.nodesByteArray[j + 9] = 0;
+      j += this.ppn;
+    }
+
+    // Iterate through edges
+    for (i = j = 0, l = edges.length; i < l; i++) {
+      this.edgesByteArray[j] = nIndex[edges[i].source];
+      this.edgesByteArray[j + 1] = nIndex[edges[i].target];
+      this.edgesByteArray[j + 2] = edges[i].weight || 0;
+      j += this.ppe;
+    }
+  };
+
+  // TODO: make a better send function
+  Supervisor.prototype.applyLayoutChanges = function() {
+    var nodes = this.graph.nodes(),
+        j = 0,
+        realIndex;
+
+    // Moving nodes
+    for (var i = 0, l = this.nodesByteArray.length; i < l; i += this.ppn) {
+      nodes[j].x = this.nodesByteArray[i];
+      nodes[j].y = this.nodesByteArray[i + 1];
+      j++;
+    }
+  };
+
+  Supervisor.prototype.sendByteArrayToWorker = function(action) {
+    var content = {
+      action: action || 'loop',
+      nodes: this.nodesByteArray.buffer
+    };
+
+    var buffers = [this.nodesByteArray.buffer];
+
+    if (action === 'start') {
+      content.config = this.config || {};
+      content.edges = this.edgesByteArray.buffer;
+      buffers.push(this.edgesByteArray.buffer);
+    }
+
+    if (this.shouldUseWorker)
+      this.worker.postMessage(content, buffers);
+    else
+      _root.postMessage(content, '*');
+  };
+
+  Supervisor.prototype.start = function() {
+    if (this.running)
+      return;
+
+    this.running = true;
+
+    // Do not refresh edgequadtree during layout:
+    var k,
+        c;
+    for (k in this.sigInst.cameras) {
+      c = this.sigInst.cameras[k];
+      c.edgequadtree._enabled = false;
+    }
+
+    if (!this.started) {
+
+      // Sending init message to worker
+      this.sendByteArrayToWorker('start');
+      this.started = true;
+    }
+    else {
+      this.sendByteArrayToWorker();
+    }
+  };
+
+  Supervisor.prototype.stop = function() {
+    if (!this.running)
+      return;
+
+    // Allow to refresh edgequadtree:
+    var k,
+        c,
+        bounds;
+    for (k in this.sigInst.cameras) {
+      c = this.sigInst.cameras[k];
+      c.edgequadtree._enabled = true;
+
+      // Find graph boundaries:
+      bounds = sigma.utils.getBoundaries(
+        this.graph,
+        c.readPrefix
+      );
+
+      // Refresh edgequadtree:
+      if (c.settings('drawEdges') && c.settings('enableEdgeHovering'))
+        c.edgequadtree.index(this.sigInst.graph, {
+          prefix: c.readPrefix,
+          bounds: {
+            x: bounds.minX,
+            y: bounds.minY,
+            width: bounds.maxX - bounds.minX,
+            height: bounds.maxY - bounds.minY
+          }
+        });
+    }
+
+    this.running = false;
+  };
+
+  Supervisor.prototype.killWorker = function() {
+    if (this.worker) {
+      this.worker.terminate();
+    }
+    else {
+      _root.postMessage({action: 'kill'}, '*');
+      document.removeEventListener(this.msgName, this.listener);
+    }
+  };
+
+  Supervisor.prototype.configure = function(config) {
+
+    // Setting configuration
+    this.config = config;
+
+    if (!this.started)
+      return;
+
+    var data = {action: 'config', config: this.config};
+
+    if (this.shouldUseWorker)
+      this.worker.postMessage(data);
+    else
+      _root.postMessage(data, '*');
+  };
+
+  /**
+   * Interface
+   * ----------
+   */
+  sigma.prototype.startForceAtlas2 = function(config) {
+
+    // Create supervisor if undefined
+    if (!this.supervisor)
+      this.supervisor = new Supervisor(this, config);
+
+    // Configuration provided?
+    if (config)
+      this.supervisor.configure(config);
+
+    // Start algorithm
+    this.supervisor.start();
+
+    return this;
+  };
+
+  sigma.prototype.stopForceAtlas2 = function() {
+    if (!this.supervisor)
+      return this;
+
+    // Pause algorithm
+    this.supervisor.stop();
+
+    return this;
+  };
+
+  sigma.prototype.killForceAtlas2 = function() {
+    if (!this.supervisor)
+      return this;
+
+    // Stop Algorithm
+    this.supervisor.stop();
+
+    // Kill Worker
+    this.supervisor.killWorker();
+
+    // Kill supervisor
+    this.supervisor = null;
+
+    return this;
+  };
+
+  sigma.prototype.configForceAtlas2 = function(config) {
+    if (!this.supervisor)
+      this.supervisor = new Supervisor(this, config);
+
+    this.supervisor.configure(config);
+
+    return this;
+  };
+
+  sigma.prototype.isForceAtlas2Running = function(config) {
+    return !!this.supervisor && this.supervisor.running;
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.forceAtlas2/tasks/forceAtlas2.js

@@ -0,0 +1,127 @@
+/*
+ * grunt-forceAtlas2
+ *
+ * This task crush and minify Force Atlas 2 code.
+ */
+var uglify = require('uglify-js');
+
+// Shorteners
+function minify(string) {
+  return uglify.minify(string, {fromString: true}).code;
+}
+
+// Crushing function
+function crush(fnString) {
+  var pattern,
+      i,
+      l;
+
+  var np = [
+    'x',
+    'y',
+    'dx',
+    'dy',
+    'old_dx',
+    'old_dy',
+    'mass',
+    'convergence',
+    'size',
+    'fixed'
+  ];
+
+  var ep = [
+    'source',
+    'target',
+    'weight'
+  ];
+
+  var rp = [
+    'node',
+    'centerX',
+    'centerY',
+    'size',
+    'nextSibling',
+    'firstChild',
+    'mass',
+    'massCenterX',
+    'massCenterY'
+  ];
+
+  // Replacing matrix accessors by incremented indexes
+  for (i = 0, l = rp.length; i < l; i++) {
+    pattern = new RegExp('rp\\(([^,]*), \'' + rp[i] + '\'\\)', 'g');
+    fnString = fnString.replace(
+      pattern,
+      (i === 0) ? '$1' : '$1 + ' + i
+    );
+  }
+
+  for (i = 0, l = np.length; i < l; i++) {
+    pattern = new RegExp('np\\(([^,]*), \'' + np[i] + '\'\\)', 'g');
+    fnString = fnString.replace(
+      pattern,
+      (i === 0) ? '$1' : '$1 + ' + i
+    );
+  }
+
+  for (i = 0, l = ep.length; i < l; i++) {
+    pattern = new RegExp('ep\\(([^,]*), \'' + ep[i] + '\'\\)', 'g');
+    fnString = fnString.replace(
+      pattern,
+      (i === 0) ? '$1' : '$1 + ' + i
+    );
+  }
+
+  return fnString;
+}
+
+// Cleaning function
+function clean(string) {
+  return string.replace(
+    /function crush\(fnString\)/,
+    'var crush = null; function no_crush(fnString)'
+  );
+}
+
+module.exports = function(grunt) {
+
+  // Force atlas grunt multitask
+  function multitask() {
+
+    // Merge task-specific and/or target-specific options with these defaults.
+    var options = this.options({});
+
+    // Iterate over all specified file groups.
+    this.files.forEach(function(f) {
+      // Concat specified files.
+      var src = f.src.filter(function(filepath) {
+        // Warn on and remove invalid source files (if nonull was set).
+        if (!grunt.file.exists(filepath)) {
+          grunt.log.warn('Source file "' + filepath + '" not found.');
+          return false;
+        } else {
+          return true;
+        }
+      }).map(function(filepath) {
+        // Read file source.
+        return grunt.file.read(filepath);
+      }).join('\n');
+
+      // Crushing, cleaning and minifying
+      src = minify(clean(crush(src)));
+
+      // Write the destination file.
+      grunt.file.write(f.dest, src);
+
+      // Print a success message.
+      grunt.log.writeln('File "' + f.dest + '" created.');
+    });
+  }
+
+  // Registering the task
+  grunt.registerMultiTask(
+    'forceAtlas2',
+    'A grunt task to crush and minify ForceAtlas2.',
+    multitask
+  );
+};

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.noverlap/README.md

@@ -0,0 +1,87 @@
+sigma.layout.noverlap
+========================
+
+Plugin developed by [Andrew Pitts](https://github.com/apitts) and published under the [MIT](LICENSE) license. Original algorithm by [Mathieu Jacomy](https://github.com/jacomyma) and ported to sigma.js with permission.
+
+---
+
+This plugin runs an algorithm which distributes nodes in the network, ensuring that they do not overlap and providing a margin where specified.
+
+## Methods
+
+**configure**
+
+Changes the layout's configuration.
+
+```js
+var listener = s.configNoverlap(config);
+```
+
+**start**
+
+Starts the layout. It is possible to pass a configuration if this is the first time you start the layout.
+
+```js
+s.startNoverlap();
+```
+
+**isRunning**
+
+Returns whether the layout is running.
+
+```js
+s.isNoverlapRunning();
+```
+
+## Configuration
+
+* **nodes**: *array*: the subset of nodes to apply the layout.
+
+*Algorithm configuration*
+
+* **nodeMargin**: *number* `5.0`: The additional minimum space to apply around each and every node.
+* **scaleNodes**: *number* `1.2`: A multiplier to apply to nodes such that larger nodes will have more space around them if this multiplier is greater than zero.
+* **gridSize**: *integer* `20`: The number of rows and columns to use when dividing the nodes up into cells which the algorithm is applied to. Use more rows and columns for larger graphs for a more efficient algorithm.
+* **permittedExpansion** *number* `1.1`: At every step, this is the maximum ratio to apply to the bounding box, i.e. the maximum by which the network is permitted to expand.
+* **rendererIndex** *integer* `0`: The index of the renderer to use to compute overlap and collisions of the nodes.
+* **speed** *number* `2`: A larger value increases the speed with which the algorithm will convergence at the cost of precision.
+* **maxIterations** *number* `500`: The maximum number of iterations to run the algorithm for before stopping it.
+
+*Easing configuration*
+
+* **easing** *string*: if specified, ease the transition between nodes positions if background is `true`. The duration is specified by the Sigma settings `animationsTime`. See [sigma.utils.easing](../../src/utils/sigma.utils.js#L723) for available values.
+* **duration** *number*: duration of the transition for the easing method. Default value is Sigma setting `animationsTime`.
+
+## Events
+
+The plugin dispatches the following events:
+
+- `start`: on layout start.
+- `interpolate`: at the beginning of the layout animation if an *easing* function is specified and the layout is ran on background.
+- `stop`: on layout stop, will be dispatched after `interpolate`.
+
+Example:
+
+```js
+
+s = new sigma({
+  graph: g,
+  container: 'graph-container'
+});
+
+var config = {
+  nodeMargin: 3.0,
+  scaleNodes: 1.3
+};
+
+// Configure the algorithm
+var listener = s.configNoverlap(config);
+
+// Bind all events:
+listener.bind('start stop interpolate', function(event) {
+  console.log(event.type);
+});
+
+// Start the algorithm:
+s.startNoverlap();
+```

src/main/java/net/jrtechs/www/client/src/plugins/sigma.layout.noverlap/sigma.layout.noverlap.js

@@ -0,0 +1,408 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw new Error('sigma is not declared');
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.layout.noverlap');
+
+  /**
+   * Noverlap Layout
+   * ===============================
+   *
+   * Author: @apitts / Andrew Pitts
+   * Algorithm: @jacomyma / Mathieu Jacomy (originally contributed to Gephi and ported to sigma.js under the MIT license by @andpitts with permission)
+   * Acknowledgement: @sheyman / Sébastien Heymann (some inspiration has been taken from other MIT licensed layout algorithms authored by @sheyman)
+   * Version: 0.1
+   */
+
+  var settings = {
+    speed: 3,
+    scaleNodes: 1.2,
+    nodeMargin: 5.0,
+    gridSize: 20,
+    permittedExpansion: 1.1,
+    rendererIndex: 0,
+    maxIterations: 500
+  };
+
+  var _instance = {};
+
+  /**
+   * Event emitter Object
+   * ------------------
+   */
+  var _eventEmitter = {};
+
+   /**
+   * Noverlap Object
+   * ------------------
+   */
+  function Noverlap() {
+    var self = this;
+
+    this.init = function (sigInst, options) {
+      options = options || {};
+
+      // Properties
+      this.sigInst = sigInst;
+      this.config = sigma.utils.extend(options, settings);
+      this.easing = options.easing;
+      this.duration = options.duration;
+
+      if (options.nodes) {
+        this.nodes = options.nodes;
+        delete options.nodes;
+      }
+
+      if (!sigma.plugins || typeof sigma.plugins.animate === 'undefined') {
+        throw new Error('sigma.plugins.animate is not declared');
+      }
+
+      // State
+      this.running = false;
+    };
+
+    /**
+     * Single layout iteration.
+     */
+    this.atomicGo = function () {
+      if (!this.running || this.iterCount < 1) return false;
+
+      var nodes = this.nodes || this.sigInst.graph.nodes(),
+          nodesCount = nodes.length,
+          i,
+          n,
+          n1,
+          n2,
+          xmin = Infinity,
+          xmax = -Infinity,
+          ymin = Infinity,
+          ymax = -Infinity,
+          xwidth,
+          yheight,
+          xcenter,
+          ycenter,
+          grid,
+          row,
+          col,
+          minXBox,
+          maxXBox,
+          minYBox,
+          maxYBox,
+          adjacentNodes,
+          subRow,
+          subCol,
+          nxmin,
+          nxmax,
+          nymin,
+          nymax;
+
+      this.iterCount--;
+      this.running = false;
+
+      for (i=0; i < nodesCount; i++) {
+        n = nodes[i];
+        n.dn.dx = 0;
+        n.dn.dy = 0;
+
+        //Find the min and max for both x and y across all nodes
+        xmin = Math.min(xmin, n.dn_x - (n.dn_size*self.config.scaleNodes + self.config.nodeMargin) );
+        xmax = Math.max(xmax, n.dn_x + (n.dn_size*self.config.scaleNodes + self.config.nodeMargin) );
+        ymin = Math.min(ymin, n.dn_y - (n.dn_size*self.config.scaleNodes + self.config.nodeMargin) );
+        ymax = Math.max(ymax, n.dn_y + (n.dn_size*self.config.scaleNodes + self.config.nodeMargin) );
+
+      }
+
+      xwidth = xmax - xmin;
+      yheight = ymax - ymin;
+      xcenter = (xmin + xmax) / 2;
+      ycenter = (ymin + ymax) / 2;
+      xmin = xcenter - self.config.permittedExpansion*xwidth / 2;
+      xmax = xcenter + self.config.permittedExpansion*xwidth / 2;
+      ymin = ycenter - self.config.permittedExpansion*yheight / 2;
+      ymax = ycenter + self.config.permittedExpansion*yheight / 2;
+
+      grid = {}; //An object of objects where grid[row][col] is an array of node ids representing nodes that fall in that grid. Nodes can fall in more than one grid
+
+      for(row = 0; row < self.config.gridSize; row++) {
+        grid[row] = {};
+        for(col = 0; col < self.config.gridSize; col++) {
+          grid[row][col] = [];
+        }
+      }
+
+      //Place nodes in grid
+      for (i=0; i < nodesCount; i++) {
+        n = nodes[i];
+
+        nxmin = n.dn_x - (n.dn_size*self.config.scaleNodes + self.config.nodeMargin);
+        nxmax = n.dn_x + (n.dn_size*self.config.scaleNodes + self.config.nodeMargin);
+        nymin = n.dn_y - (n.dn_size*self.config.scaleNodes + self.config.nodeMargin);
+        nymax = n.dn_y + (n.dn_size*self.config.scaleNodes + self.config.nodeMargin);
+
+        minXBox = Math.floor(self.config.gridSize* (nxmin - xmin) / (xmax - xmin) );
+        maxXBox = Math.floor(self.config.gridSize* (nxmax - xmin) / (xmax - xmin) );
+        minYBox = Math.floor(self.config.gridSize* (nymin - ymin) / (ymax - ymin) );
+        maxYBox = Math.floor(self.config.gridSize* (nymax - ymin) / (ymax - ymin) );
+        for(col = minXBox; col <= maxXBox; col++) {
+          for(row = minYBox; row <= maxYBox; row++) {
+            grid[row][col].push(n.id);
+          }
+        }
+      }
+
+
+      adjacentNodes = {}; //An object that stores the node ids of adjacent nodes (either in same grid box or adjacent grid box) for all nodes
+
+      for(row = 0; row < self.config.gridSize; row++) {
+        for(col = 0; col < self.config.gridSize; col++) {
+          grid[row][col].forEach(function(nodeId) {
+            if(!adjacentNodes[nodeId]) {
+              adjacentNodes[nodeId] = [];
+            }
+            for(subRow = Math.max(0, row - 1); subRow <= Math.min(row + 1, self.config.gridSize - 1); subRow++) {
+              for(subCol = Math.max(0, col - 1); subCol <= Math.min(col + 1,  self.config.gridSize - 1); subCol++) {
+                grid[subRow][subCol].forEach(function(subNodeId) {
+                  if(subNodeId !== nodeId && adjacentNodes[nodeId].indexOf(subNodeId) === -1) {
+                    adjacentNodes[nodeId].push(subNodeId);
+                  }
+                });
+              }
+            }
+          });
+        }
+      }
+
+      //If two nodes overlap then repulse them
+      for (i=0; i < nodesCount; i++) {
+        n1 = nodes[i];
+        adjacentNodes[n1.id].forEach(function(nodeId) {
+          var n2 = self.sigInst.graph.nodes(nodeId);
+          var xDist = n2.dn_x - n1.dn_x;
+          var yDist = n2.dn_y - n1.dn_y;
+          var dist = Math.sqrt(xDist*xDist + yDist*yDist);
+          var collision = (dist < ((n1.dn_size*self.config.scaleNodes + self.config.nodeMargin) + (n2.dn_size*self.config.scaleNodes + self.config.nodeMargin)));
+          if(collision) {
+            self.running = true;
+            if(dist > 0) {
+              n2.dn.dx += xDist / dist * (1 + n1.dn_size);
+              n2.dn.dy += yDist / dist * (1 + n1.dn_size);
+            } else {
+              n2.dn.dx += xwidth * 0.01 * (0.5 - Math.random());
+              n2.dn.dy += yheight * 0.01 * (0.5 - Math.random());
+            }
+          }
+        });
+      }
+
+      for (i=0; i < nodesCount; i++) {
+        n = nodes[i];
+        if(!n.fixed) {
+          n.dn_x = n.dn_x + n.dn.dx * 0.1 * self.config.speed;
+          n.dn_y = n.dn_y + n.dn.dy * 0.1 * self.config.speed;
+        }
+      }
+
+      if(this.running && this.iterCount < 1) {
+        this.running = false;
+      }
+
+      return this.running;
+    };
+
+    this.go = function () {
+      this.iterCount = this.config.maxIterations;
+
+      while (this.running) {
+        this.atomicGo();
+      };
+
+      this.stop();
+    };
+
+    this.start = function() {
+      if (this.running) return;
+
+      var nodes = this.sigInst.graph.nodes();
+
+      var prefix = this.sigInst.renderers[self.config.rendererIndex].options.prefix;
+
+      this.running = true;
+
+      // Init nodes
+      for (var i = 0; i < nodes.length; i++) {
+        nodes[i].dn_x = nodes[i][prefix + 'x'];
+        nodes[i].dn_y = nodes[i][prefix + 'y'];
+        nodes[i].dn_size = nodes[i][prefix + 'size'];
+        nodes[i].dn = {
+          dx: 0,
+          dy: 0
+        };
+      }
+      _eventEmitter[self.sigInst.id].dispatchEvent('start');
+      this.go();
+    };
+
+    this.stop = function() {
+      var nodes = this.sigInst.graph.nodes();
+
+      this.running = false;
+
+      if (this.easing) {
+        _eventEmitter[self.sigInst.id].dispatchEvent('interpolate');
+        sigma.plugins.animate(
+          self.sigInst,
+          {
+            x: 'dn_x',
+            y: 'dn_y'
+          },
+          {
+            easing: self.easing,
+            onComplete: function() {
+              self.sigInst.refresh();
+              for (var i = 0; i < nodes.length; i++) {
+                nodes[i].dn = null;
+                nodes[i].dn_x = null;
+                nodes[i].dn_y = null;
+              }
+              _eventEmitter[self.sigInst.id].dispatchEvent('stop');
+            },
+            duration: self.duration
+          }
+        );
+      }
+      else {
+        // Apply changes
+        for (var i = 0; i < nodes.length; i++) {
+          nodes[i].x = nodes[i].dn_x;
+          nodes[i].y = nodes[i].dn_y;
+        }
+
+        this.sigInst.refresh();
+
+        for (var i = 0; i < nodes.length; i++) {
+          nodes[i].dn = null;
+          nodes[i].dn_x = null;
+          nodes[i].dn_y = null;
+        }
+        _eventEmitter[self.sigInst.id].dispatchEvent('stop');
+      }
+    };
+
+    this.kill = function() {
+      this.sigInst = null;
+      this.config = null;
+      this.easing = null;
+    };
+  };
+
+  /**
+   * Interface
+   * ----------
+   */
+
+  /**
+   * Configure the layout algorithm.
+
+   * Recognized options:
+   * **********************
+   * Here is the exhaustive list of every accepted parameter in the settings
+   * object:
+   *
+   *   {?number}            speed               A larger value increases the convergence speed at the cost of precision
+   *   {?number}            scaleNodes          The ratio to scale nodes by - a larger ratio will lead to more space around larger nodes
+   *   {?number}            nodeMargin          A fixed margin to apply around nodes regardless of size
+   *   {?number}            maxIterations       The maximum number of iterations to perform before the layout completes.
+   *   {?integer}           gridSize            The number of rows and columns to use when partioning nodes into a grid for efficient computation
+   *   {?number}            permittedExpansion  A permitted expansion factor to the overall size of the network applied at each iteration
+   *   {?integer}           rendererIndex       The index of the renderer to use for node co-ordinates. Defaults to zero.
+   *   {?(function|string)} easing              Either the name of an easing in the sigma.utils.easings package or a function. If not specified, the
+   *                                            quadraticInOut easing from this package will be used instead.
+   *   {?number}            duration            The duration of the animation. If not specified, the "animationsTime" setting value of the sigma instance will be used instead.
+   *
+   *
+   * @param  {object} config  The optional configuration object.
+   *
+   * @return {sigma.classes.dispatcher} Returns an event emitter.
+   */
+  sigma.prototype.configNoverlap = function(config) {
+
+    var sigInst = this;
+
+    if (!config) throw new Error('Missing argument: "config"');
+
+    // Create instance if undefined
+    if (!_instance[sigInst.id]) {
+      _instance[sigInst.id] = new Noverlap();
+
+      _eventEmitter[sigInst.id] = {};
+      sigma.classes.dispatcher.extend(_eventEmitter[sigInst.id]);
+
+      // Binding on kill to clear the references
+      sigInst.bind('kill', function() {
+        _instance[sigInst.id].kill();
+        _instance[sigInst.id] = null;
+        _eventEmitter[sigInst.id] = null;
+      });
+    }
+
+    _instance[sigInst.id].init(sigInst, config);
+
+    return _eventEmitter[sigInst.id];
+  };
+
+  /**
+   * Start the layout algorithm. It will use the existing configuration if no
+   * new configuration is passed.
+
+   * Recognized options:
+   * **********************
+   * Here is the exhaustive list of every accepted parameter in the settings
+   * object
+   *
+   *   {?number}            speed               A larger value increases the convergence speed at the cost of precision
+   *   {?number}            scaleNodes          The ratio to scale nodes by - a larger ratio will lead to more space around larger nodes
+   *   {?number}            nodeMargin          A fixed margin to apply around nodes regardless of size
+   *   {?number}            maxIterations       The maximum number of iterations to perform before the layout completes.
+   *   {?integer}           gridSize            The number of rows and columns to use when partioning nodes into a grid for efficient computation
+   *   {?number}            permittedExpansion  A permitted expansion factor to the overall size of the network applied at each iteration
+   *   {?integer}           rendererIndex       The index of the renderer to use for node co-ordinates. Defaults to zero.
+   *   {?(function|string)} easing              Either the name of an easing in the sigma.utils.easings package or a function. If not specified, the
+   *                                            quadraticInOut easing from this package will be used instead.
+   *   {?number}            duration            The duration of the animation. If not specified, the "animationsTime" setting value of the sigma instance will be used instead.
+   *
+   *
+   *
+   * @param  {object} config  The optional configuration object.
+   *
+   * @return {sigma.classes.dispatcher} Returns an event emitter.
+   */
+
+  sigma.prototype.startNoverlap = function(config) {
+
+    var sigInst = this;
+
+    if (config) {
+      this.configNoverlap(sigInst, config);
+    }
+
+    _instance[sigInst.id].start();
+
+    return _eventEmitter[sigInst.id];
+  };
+
+  /**
+   * Returns true if the layout has started and is not completed.
+   *
+   * @return {boolean}
+   */
+  sigma.prototype.isNoverlapRunning = function() {
+
+    var sigInst = this;
+
+    return !!_instance[sigInst.id] && _instance[sigInst.id].running;
+  };
+
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.neo4j.cypher/LICENSE

@@ -0,0 +1,553 @@
+GNU GENERAL PUBLIC LICENSE
+Version 3, 29 June 2007
+Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+Preamble
+The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users. We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors. You can apply it to
+your programs, too.
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights. Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received. You must make sure that they, too, receive
+or can get the source code. And you must show them these terms so they
+know their rights.
+Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software. For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so. This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software. The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable. Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products. If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary. To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+The precise terms and conditions for copying, distribution and
+modification follow.
+TERMS AND CONDITIONS
+0. Definitions.
+"This License" refers to version 3 of the GNU General Public License.
+"Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+1. Source Code.
+The "source code" for a work means the preferred form of the work
+for making modifications to it. "Object code" means any non-source
+form of a work.
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+The Corresponding Source for a work in source code form is that
+same work.
+2. Basic Permissions.
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+Conveying under any other circumstances is permitted solely under
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+4. Conveying Verbatim Copies.
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+5. Conveying Modified Source Versions.
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+a) The work must carry prominent notices stating that you modified
+it, and giving a relevant date.
+b) The work must carry prominent notices stating that it is
+released under this License and any conditions added under section
+7. This requirement modifies the requirement in section 4 to
+"keep intact all notices".
+c) You must license the entire work, as a whole, under this
+License to anyone who comes into possession of a copy. This
+License will therefore apply, along with any applicable section 7
+additional terms, to the whole of the work, and all its parts,
+regardless of how they are packaged. This License gives no
+permission to license the work in any other way, but it does not
+invalidate such permission if you have separately received it.
+d) If the work has interactive user interfaces, each must display
+Appropriate Legal Notices; however, if the Program has interactive
+interfaces that do not display Appropriate Legal Notices, your
+work need not make them do so.
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+6. Conveying Non-Source Forms.
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+a) Convey the object code in, or embodied in, a physical product
+(including a physical distribution medium), accompanied by the
+Corresponding Source fixed on a durable physical medium
+customarily used for software interchange.
+b) Convey the object code in, or embodied in, a physical product
+(including a physical distribution medium), accompanied by a
+written offer, valid for at least three years and valid for as
+long as you offer spare parts or customer support for that product
+model, to give anyone who possesses the object code either (1) a
+copy of the Corresponding Source for all the software in the
+product that is covered by this License, on a durable physical
+medium customarily used for software interchange, for a price no
+more than your reasonable cost of physically performing this
+conveying of source, or (2) access to copy the
+Corresponding Source from a network server at no charge.
+c) Convey individual copies of the object code with a copy of the
+written offer to provide the Corresponding Source. This
+alternative is allowed only occasionally and noncommercially, and
+only if you received the object code with such an offer, in accord
+with subsection 6b.
+d) Convey the object code by offering access from a designated
+place (gratis or for a charge), and offer equivalent access to the
+Corresponding Source in the same way through the same place at no
+further charge. You need not require recipients to copy the
+Corresponding Source along with the object code. If the place to
+copy the object code is a network server, the Corresponding Source
+may be on a different server (operated by you or a third party)
+that supports equivalent copying facilities, provided you maintain
+clear directions next to the object code saying where to find the
+Corresponding Source. Regardless of what server hosts the
+Corresponding Source, you remain obligated to ensure that it is
+available for as long as needed to satisfy these requirements.
+e) Convey the object code using peer-to-peer transmission, provided
+you inform other peers where the object code and Corresponding
+Source of the work are being offered to the general public at no
+charge under subsection 6d.
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+7. Additional Terms.
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+a) Disclaiming warranty or limiting liability differently from the
+terms of sections 15 and 16 of this License; or
+b) Requiring preservation of specified reasonable legal notices or
+author attributions in that material or in the Appropriate Legal
+Notices displayed by works containing it; or
+c) Prohibiting misrepresentation of the origin of that material, or
+requiring that modified versions of such material be marked in
+reasonable ways as different from the original version; or
+d) Limiting the use for publicity purposes of names of licensors or
+authors of the material; or
+e) Declining to grant rights under trademark law for use of some
+trade names, trademarks, or service marks; or
+f) Requiring indemnification of licensors and authors of that
+material by anyone who conveys the material (or modified versions of
+it) with contractual assumptions of liability to the recipient, for
+any liability that these contractual assumptions directly impose on
+those licensors and authors.
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+8. Termination.
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+9. Acceptance Not Required for Having Copies.
+You are not required to accept this License in order to receive or
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+10. Automatic Licensing of Downstream Recipients.
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+11. Patents.
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+12. No Surrender of Others' Freedom.
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+13. Use with the GNU Affero General Public License.
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+14. Revised Versions of this License.
+The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time. Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+Each version is given a distinguishing version number. If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+15. Disclaimer of Warranty.
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+16. Limitation of Liability.
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+17. Interpretation of Sections 15 and 16.
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+END OF TERMS AND CONDITIONS
+How to Apply These Terms to Your New Programs
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+To do so, attach the following notices to the program. It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+{one line to give the program's name and a brief idea of what it does.}
+Copyright (C) {year} {name of author}
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+Also add information on how to contact you by electronic and paper mail.
+If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+{project} Copyright (C) {year} {fullname}
+This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+This is free software, and you are welcome to redistribute it
+under certain conditions; type `show c' for details.
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License. Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+The GNU General Public License does not permit incorporating your program
+into proprietary programs. If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library. If this is what you want to do, use the GNU Lesser General
+Public License instead of this License. But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.neo4j.cypher/README.md

@@ -0,0 +1,58 @@
+sigma.neo4j.cypher
+====================
+
+Plugin developed by [Benoît Simard](https://github.com/sim51).
+
+---
+
+This plugin provides a simple function, `sigma.neo4j.cypher()`, that will run a cypher query on a neo4j instance, parse the response, eventually instantiate sigma and fill the graph with the `graph.read()` method.
+
+Nodes are created with the following structure :
+ * id -> Neo4j node id
+ * label -> Neo4j node id
+ * neo4j_labels -> Labels of Neo4j node
+ * neo4j_data -> All the properties of the neo4j node
+
+Edges are created with the following structure :
+ * id -> Neo4j edge id
+ * label -> Neo4j edge type
+ * neo4j_type -> Neo4j edge type
+ * neo4j_data -> All the properties of Neo4j relationship
+
+The most basic way to use this helper is to call it with a neo4j server url and a cypher query. It will then instantiate sigma, but after having added the graph into the config object.
+
+For neo4j < 2.2
+````javascript
+sigma.neo4j.cypher(
+  'http://localhost:7474',
+  'MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100',
+  { container: 'myContainer' }
+);
+````
+
+For neo4j >= 2.2, you must pass a neo4j user with its password. So instead of the neo4j url, you have to pass a neo4j server object like this :  
+````javascript
+sigma.neo4j.cypher(
+  { url: 'http://localhost:7474', user:'neo4j', password:'admin' },
+  'MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100',
+  { container: 'myContainer' }
+);
+````
+
+It is also possible to update an existing instance's graph instead.
+
+````javascript
+sigma.neo4j.cypher(
+  { url: 'http://localhost:7474', user:'neo4j', password:'admin' },
+  'MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100',
+  myExistingInstance,
+  function() {
+    myExistingInstance.refresh();
+  }
+);
+````
+
+There is two additional functions provided by the plugin :
+
+ * ```sigma.neo4j.getTypes({ url: 'http://localhost:7474', user:'neo4j', password:'admin' }, callback)``` : Return all relationship type of the database
+ * ```sigma.neo4j.getLabels({ url: 'http://localhost:7474', user:'neo4j', password:'admin' }, callback)``` : Return all node label of the database 

src/main/java/net/jrtechs/www/client/src/plugins/sigma.neo4j.cypher/sigma.neo4j.cypher.js

@@ -0,0 +1,218 @@
+;(function (undefined) {
+    'use strict';
+
+    if (typeof sigma === 'undefined')
+        throw 'sigma is not declared';
+
+    // Declare neo4j package
+    sigma.utils.pkg("sigma.neo4j");
+
+    // Initialize package:
+    sigma.utils.pkg('sigma.utils');
+
+
+    /**
+     * This function is an helper for the neo4j communication.
+     *
+     * @param   {string|object}     neo4j       The URL of neo4j server or a neo4j server object.
+     * @param   {string}            endpoint    Endpoint of the neo4j server
+     * @param   {string}            method      The calling method for the endpoint : 'GET' or 'POST'
+     * @param   {object|string}     data        Data that will be send to the server
+     * @param   {function}          callback    The callback function
+     */
+    sigma.neo4j.send = function(neo4j, endpoint, method, data, callback) {
+        var xhr = sigma.utils.xhr(),
+            url, user, password;
+
+        // if neo4j arg is not an object
+        url = neo4j;
+        if(typeof neo4j === 'object') {
+            url = neo4j.url;
+            user = neo4j.user;
+            password = neo4j.password;
+        }
+
+        if (!xhr)
+            throw 'XMLHttpRequest not supported, cannot load the file.';
+
+        // Construct the endpoint url
+        url += endpoint;
+
+        xhr.open(method, url, true);
+        if( user && password) {
+            xhr.setRequestHeader('Authorization', 'Basic ' + btoa(user + ':' + password));
+        }
+        xhr.setRequestHeader('Accept', 'application/json');
+        xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                // Call the callback if specified:
+                callback(JSON.parse(xhr.responseText));
+            }
+        };
+        xhr.send(data);
+    };
+
+    /**
+     * This function parse a neo4j cypher query result, and transform it into
+     * a sigma graph object.
+     *
+     * @param  {object}     result      The server response of a cypher query.
+     *
+     * @return A graph object
+     */
+    sigma.neo4j.cypher_parse = function(result) {
+        var graph = { nodes: [], edges: [] },
+            nodesMap = {},
+            edgesMap = {},
+            key;
+
+        // Iteration on all result data
+        result.results[0].data.forEach(function (data) {
+
+            // iteration on graph for all node
+            data.graph.nodes.forEach(function (node) {
+
+                var sigmaNode =  {
+                    id : node.id,
+                    label : node.id,
+                    x : Math.random(),
+                    y : Math.random(),
+                    size : 1,
+                    color : '#000000',
+                    neo4j_labels : node.labels,
+                    neo4j_data : node.properties
+                };
+
+                if (sigmaNode.id in nodesMap) {
+                    // do nothing
+                } else {
+                    nodesMap[sigmaNode.id] = sigmaNode;
+                }
+            });
+
+            // iteration on graph for all node
+            data.graph.relationships.forEach(function (edge) {
+                var sigmaEdge =  {
+                    id : edge.id,
+                    label : edge.type,
+                    source : edge.startNode,
+                    target : edge.endNode,
+                    color : '#7D7C8E',
+                    neo4j_type : edge.type,
+                    neo4j_data : edge.properties
+                };
+
+                if (sigmaEdge.id in edgesMap) {
+                    // do nothing
+                } else {
+                    edgesMap[sigmaEdge.id] = sigmaEdge;
+                }
+            });
+
+        });
+
+        // construct sigma nodes
+        for (key in nodesMap) {
+            graph.nodes.push(nodesMap[key]);
+        }
+        // construct sigma nodes
+        for (key in edgesMap) {
+            graph.edges.push(edgesMap[key]);
+        }
+
+        return graph;
+    };
+
+
+    /**
+     * This function execute a cypher and create a new sigma instance or
+     * updates the graph of a given instance. It is possible to give a callback
+     * that will be executed at the end of the process.
+     *
+     * @param  {object|string}      neo4j       The URL of neo4j server or a neo4j server object.
+     * @param  {string}             cypher      The cypher query
+     * @param  {?object|?sigma}     sig         A sigma configuration object or a sigma instance.
+     * @param  {?function}          callback    Eventually a callback to execute after
+     *                                          having parsed the file. It will be called
+     *                                          with the related sigma instance as
+     *                                          parameter.
+     */
+    sigma.neo4j.cypher = function (neo4j, cypher, sig, callback) {
+        var endpoint = '/db/data/transaction/commit',
+            data, cypherCallback;
+
+        // Data that will be send to the server
+        data = JSON.stringify({
+            "statements": [
+                {
+                    "statement": cypher,
+                    "resultDataContents": ["graph"],
+                    "includeStats": false
+                }
+            ]
+        });
+
+        // Callback method after server response
+        cypherCallback = function (callback) {
+
+            return function (response) {
+
+                var graph = { nodes: [], edges: [] };
+
+                graph = sigma.neo4j.cypher_parse(response);
+
+                // Update the instance's graph:
+                if (sig instanceof sigma) {
+                    sig.graph.clear();
+                    sig.graph.read(graph);
+
+                    // ...or instantiate sigma if needed:
+                } else if (typeof sig === 'object') {
+                    sig = new sigma(sig);
+                    sig.graph.read(graph);
+                    sig.refresh();
+
+                    // ...or it's finally the callback:
+                } else if (typeof sig === 'function') {
+                    callback = sig;
+                    sig = null;
+                }
+
+                // Call the callback if specified:
+                if (callback)
+                    callback(sig || graph);
+            };
+        };
+
+        // Let's call neo4j
+        sigma.neo4j.send(neo4j, endpoint, 'POST', data, cypherCallback(callback));
+    };
+
+    /**
+     * This function call neo4j to get all labels of the graph.
+     *
+     * @param  {string}       neo4j      The URL of neo4j server or an object with the url, user & password.
+     * @param  {function}     callback   The callback function
+     *
+     * @return An array of label
+     */
+    sigma.neo4j.getLabels = function(neo4j, callback) {
+        sigma.neo4j.send(neo4j, '/db/data/labels', 'GET', null, callback);
+    };
+
+    /**
+     * This function parse a neo4j cypher query result.
+     *
+     * @param  {string}       neo4j      The URL of neo4j server or an object with the url, user & password.
+     * @param  {function}     callback   The callback function
+     *
+     * @return An array of relationship type
+     */
+    sigma.neo4j.getTypes = function(neo4j, callback) {
+        sigma.neo4j.send(neo4j, '/db/data/relationship/types', 'GET', null, callback);
+    };
+
+}).call(this);
+
+    

src/main/java/net/jrtechs/www/client/src/plugins/sigma.parsers.gexf/README.md

@@ -0,0 +1,29 @@
+sigma.parsers.gexf
+==================
+
+Plugin developed by [Alexis Jacomy](https://github.com/jacomyal), on top of [gexf-parser](https://github.com/Yomguithereal/gexf-parser), developed by [Guillaume Plique](https://github.com/Yomguithereal).
+
+---
+
+This plugin provides a single function, `sigma.parsers.gexf()`, that will load a GEXF encoded file, parse it, and instantiate sigma.
+
+The most basic way to use this helper is to call it with a path and a sigma configuration object. It will then instantiate sigma, but after having added the graph into the config object.
+
+````javascript
+sigma.parsers.gexf(
+  'myGraph.gexf',
+  { container: 'myContainer' }
+);
+````
+
+It is also possible to update an existing instance's graph instead.
+
+````javascript
+sigma.parsers.gexf(
+  'myGraph.gexf',
+  myExistingInstance,
+  function() {
+    myExistingInstance.refresh();
+  }
+);
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.parsers.gexf/gexf-parser.js

@@ -0,0 +1,551 @@
+;(function(undefined) {
+  'use strict';
+
+  /**
+   * GEXF Library
+   * =============
+   *
+   * Author: PLIQUE Guillaume (Yomguithereal)
+   * URL: https://github.com/Yomguithereal/gexf-parser
+   * Version: 0.1.1
+   */
+
+  /**
+   * Helper Namespace
+   * -----------------
+   *
+   * A useful batch of function dealing with DOM operations and types.
+   */
+  var _helpers = {
+    getModelTags: function(xml) {
+      var attributesTags = xml.getElementsByTagName('attributes'),
+          modelTags = {},
+          l = attributesTags.length,
+          i;
+
+      for (i = 0; i < l; i++)
+        modelTags[attributesTags[i].getAttribute('class')] =
+          attributesTags[i].childNodes;
+
+      return modelTags;
+    },
+    nodeListToArray: function(nodeList) {
+
+      // Return array
+      var children = [];
+
+      // Iterating
+      for (var i = 0, len = nodeList.length; i < len; ++i) {
+        if (nodeList[i].nodeName !== '#text')
+          children.push(nodeList[i]);
+      }
+
+      return children;
+    },
+    nodeListEach: function(nodeList, func) {
+
+      // Iterating
+      for (var i = 0, len = nodeList.length; i < len; ++i) {
+        if (nodeList[i].nodeName !== '#text')
+          func(nodeList[i]);
+      }
+    },
+    nodeListToHash: function(nodeList, filter) {
+
+      // Return object
+      var children = {};
+
+      // Iterating
+      for (var i = 0; i < nodeList.length; i++) {
+        if (nodeList[i].nodeName !== '#text') {
+          var prop = filter(nodeList[i]);
+          children[prop.key] = prop.value;
+        }
+      }
+
+      return children;
+    },
+    namedNodeMapToObject: function(nodeMap) {
+
+      // Return object
+      var attributes = {};
+
+      // Iterating
+      for (var i = 0; i < nodeMap.length; i++) {
+        attributes[nodeMap[i].name] = nodeMap[i].value;
+      }
+
+      return attributes;
+    },
+    getFirstElementByTagNS: function(node, ns, tag) {
+      var el = node.getElementsByTagName(ns + ':' + tag)[0];
+
+      if (!el)
+        el = node.getElementsByTagNameNS(ns, tag)[0];
+
+      if (!el)
+        el = node.getElementsByTagName(tag)[0];
+
+      return el;
+    },
+    getAttributeNS: function(node, ns, attribute) {
+      var attr_value = node.getAttribute(ns + ':' + attribute);
+
+      if (attr_value === undefined)
+        attr_value = node.getAttributeNS(ns, attribute);
+
+      if (attr_value === undefined)
+        attr_value = node.getAttribute(attribute);
+
+      return attr_value;
+    },
+    enforceType: function(type, value) {
+
+      switch (type) {
+        case 'boolean':
+          value = (value === 'true');
+          break;
+
+        case 'integer':
+        case 'long':
+        case 'float':
+        case 'double':
+          value = +value;
+          break;
+
+        case 'liststring':
+          value = value ? value.split('|') : [];
+          break;
+      }
+
+      return value;
+    },
+    getRGB: function(values) {
+      return (values[3]) ?
+        'rgba(' + values.join(',') + ')' :
+        'rgb(' + values.slice(0, -1).join(',') + ')';
+    }
+  };
+
+
+  /**
+   * Parser Core Functions
+   * ----------------------
+   *
+   * The XML parser's functions themselves.
+   */
+
+  /**
+   * Node structure.
+   * A function returning an object guarded with default value.
+   *
+   * @param  {object} properties The node properties.
+   * @return {object}            The guarded node object.
+   */
+  function Node(properties) {
+
+    // Possible Properties
+    var node = {
+      id: properties.id,
+      label: properties.label
+    };
+
+    if (properties.viz)
+      node.viz = properties.viz;
+
+    if (properties.attributes)
+      node.attributes = properties.attributes;
+
+    return node;
+  }
+
+
+  /**
+   * Edge structure.
+   * A function returning an object guarded with default value.
+   *
+   * @param  {object} properties The edge properties.
+   * @return {object}            The guarded edge object.
+   */
+  function Edge(properties) {
+
+    // Possible Properties
+    var edge = {
+      id: properties.id,
+      type: properties.type || 'undirected',
+      label: properties.label || '',
+      source: properties.source,
+      target: properties.target,
+      weight: +properties.weight || 1.0
+    };
+
+    if (properties.viz)
+      edge.viz = properties.viz;
+
+    if (properties.attributes)
+      edge.attributes = properties.attributes;
+
+    return edge;
+  }
+
+  /**
+   * Graph parser.
+   * This structure parse a gexf string and return an object containing the
+   * parsed graph.
+   *
+   * @param  {string} xml The xml string of the gexf file to parse.
+   * @return {object}     The parsed graph.
+   */
+  function Graph(xml) {
+    var _xml = {};
+
+    // Basic Properties
+    //------------------
+    _xml.els = {
+      root: xml.getElementsByTagName('gexf')[0],
+      graph: xml.getElementsByTagName('graph')[0],
+      meta: xml.getElementsByTagName('meta')[0],
+      nodes: xml.getElementsByTagName('node'),
+      edges: xml.getElementsByTagName('edge'),
+      model: _helpers.getModelTags(xml)
+    };
+
+    // Information
+    _xml.hasViz = !!_helpers.getAttributeNS(_xml.els.root, 'xmlns', 'viz');
+    _xml.version = _xml.els.root.getAttribute('version') || '1.0';
+    _xml.mode = _xml.els.graph.getAttribute('mode') || 'static';
+
+    var edgeType = _xml.els.graph.getAttribute('defaultedgetype');
+    _xml.defaultEdgetype = edgeType || 'undirected';
+
+    // Parser Functions
+    //------------------
+
+    // Meta Data
+    function _metaData() {
+
+      var metas = {};
+      if (!_xml.els.meta)
+        return metas;
+
+      // Last modified date
+      metas.lastmodifieddate = _xml.els.meta.getAttribute('lastmodifieddate');
+
+      // Other information
+      _helpers.nodeListEach(_xml.els.meta.childNodes, function(child) {
+        metas[child.tagName.toLowerCase()] = child.textContent;
+      });
+
+      return metas;
+    }
+
+    // Model
+    function _model(cls) {
+      var attributes = [];
+
+      // Iterating through attributes
+      if (_xml.els.model[cls])
+        _helpers.nodeListEach(_xml.els.model[cls], function(attr) {
+
+          // Properties
+          var properties = {
+            id: attr.getAttribute('id') || attr.getAttribute('for'),
+            type: attr.getAttribute('type') || 'string',
+            title: attr.getAttribute('title') || ''
+          };
+
+          // Defaults
+          var default_el = _helpers.nodeListToArray(attr.childNodes);
+
+          if (default_el.length > 0)
+            properties.defaultValue = default_el[0].textContent;
+
+          // Creating attribute
+          attributes.push(properties);
+        });
+
+      return attributes.length > 0 ? attributes : false;
+    }
+
+    // Data from nodes or edges
+    function _data(model, node_or_edge) {
+
+      var data = {};
+      var attvalues_els = node_or_edge.getElementsByTagName('attvalue');
+
+      // Getting Node Indicated Attributes
+      var ah = _helpers.nodeListToHash(attvalues_els, function(el) {
+        var attributes = _helpers.namedNodeMapToObject(el.attributes);
+        var key = attributes.id || attributes['for'];
+
+        // Returning object
+        return {key: key, value: attributes.value};
+      });
+
+
+      // Iterating through model
+      model.map(function(a) {
+
+        // Default value?
+        data[a.id] = !(a.id in ah) && 'defaultValue' in a ?
+          _helpers.enforceType(a.type, a.defaultValue) :
+          _helpers.enforceType(a.type, ah[a.id]);
+
+      });
+
+      return data;
+    }
+
+    // Nodes
+    function _nodes(model) {
+      var nodes = [];
+
+      // Iteration through nodes
+      _helpers.nodeListEach(_xml.els.nodes, function(n) {
+
+        // Basic properties
+        var properties = {
+          id: n.getAttribute('id'),
+          label: n.getAttribute('label') || ''
+        };
+
+        // Retrieving data from nodes if any
+        if (model)
+          properties.attributes = _data(model, n);
+
+        // Retrieving viz information
+        if (_xml.hasViz)
+          properties.viz = _nodeViz(n);
+
+        // Pushing node
+        nodes.push(Node(properties));
+      });
+
+      return nodes;
+    }
+
+    // Viz information from nodes
+    function _nodeViz(node) {
+      var viz = {};
+
+      // Color
+      var color_el = _helpers.getFirstElementByTagNS(node, 'viz', 'color');
+
+      if (color_el) {
+        var color = ['r', 'g', 'b', 'a'].map(function(c) {
+          return color_el.getAttribute(c);
+        });
+
+        viz.color = _helpers.getRGB(color);
+      }
+
+      // Position
+      var pos_el = _helpers.getFirstElementByTagNS(node, 'viz', 'position');
+
+      if (pos_el) {
+        viz.position = {};
+
+        ['x', 'y', 'z'].map(function(p) {
+          viz.position[p] = +pos_el.getAttribute(p);
+        });
+      }
+
+      // Size
+      var size_el = _helpers.getFirstElementByTagNS(node, 'viz', 'size');
+      if (size_el)
+        viz.size = +size_el.getAttribute('value');
+
+      // Shape
+      var shape_el = _helpers.getFirstElementByTagNS(node, 'viz', 'shape');
+      if (shape_el)
+        viz.shape = shape_el.getAttribute('value');
+
+      return viz;
+    }
+
+    // Edges
+    function _edges(model, default_type) {
+      var edges = [];
+
+      // Iteration through edges
+      _helpers.nodeListEach(_xml.els.edges, function(e) {
+
+        // Creating the edge
+        var properties = _helpers.namedNodeMapToObject(e.attributes);
+        if (!('type' in properties)) {
+          properties.type = default_type;
+        }
+
+        // Retrieving edge data
+        if (model)
+          properties.attributes = _data(model, e);
+
+
+        // Retrieving viz information
+        if (_xml.hasViz)
+          properties.viz = _edgeViz(e);
+
+        edges.push(Edge(properties));
+      });
+
+      return edges;
+    }
+
+    // Viz information from edges
+    function _edgeViz(edge) {
+      var viz = {};
+
+      // Color
+      var color_el = _helpers.getFirstElementByTagNS(edge, 'viz', 'color');
+
+      if (color_el) {
+        var color = ['r', 'g', 'b', 'a'].map(function(c) {
+          return color_el.getAttribute(c);
+        });
+
+        viz.color = _helpers.getRGB(color);
+      }
+
+      // Shape
+      var shape_el = _helpers.getFirstElementByTagNS(edge, 'viz', 'shape');
+      if (shape_el)
+        viz.shape = shape_el.getAttribute('value');
+
+      // Thickness
+      var thick_el = _helpers.getFirstElementByTagNS(edge, 'viz', 'thickness');
+      if (thick_el)
+        viz.thickness = +thick_el.getAttribute('value');
+
+      return viz;
+    }
+
+
+    // Returning the Graph
+    //---------------------
+    var nodeModel = _model('node'),
+        edgeModel = _model('edge');
+
+    var graph = {
+      version: _xml.version,
+      mode: _xml.mode,
+      defaultEdgeType: _xml.defaultEdgetype,
+      meta: _metaData(),
+      model: {},
+      nodes: _nodes(nodeModel),
+      edges: _edges(edgeModel, _xml.defaultEdgetype)
+    };
+
+    if (nodeModel)
+      graph.model.node = nodeModel;
+    if (edgeModel)
+      graph.model.edge = edgeModel;
+
+    return graph;
+  }
+
+
+  /**
+   * Public API
+   * -----------
+   *
+   * User-accessible functions.
+   */
+
+  // Fetching GEXF with XHR
+  function fetch(gexf_url, callback) {
+    var xhr = (function() {
+      if (window.XMLHttpRequest)
+        return new XMLHttpRequest();
+
+      var names,
+          i;
+
+      if (window.ActiveXObject) {
+        names = [
+          'Msxml2.XMLHTTP.6.0',
+          'Msxml2.XMLHTTP.3.0',
+          'Msxml2.XMLHTTP',
+          'Microsoft.XMLHTTP'
+        ];
+
+        for (i in names)
+          try {
+            return new ActiveXObject(names[i]);
+          } catch (e) {}
+      }
+
+      return null;
+    })();
+
+    if (!xhr)
+      throw 'XMLHttpRequest not supported, cannot load the file.';
+
+    // Async?
+    var async = (typeof callback === 'function'),
+        getResult;
+
+    // If we can't override MIME type, we are on IE 9
+    // We'll be parsing the response string then.
+    if (xhr.overrideMimeType) {
+      xhr.overrideMimeType('text/xml');
+      getResult = function(r) {
+        return r.responseXML;
+      };
+    }
+    else {
+      getResult = function(r) {
+        var p = new DOMParser();
+        return p.parseFromString(r.responseText, 'application/xml');
+      };
+    }
+
+    xhr.open('GET', gexf_url, async);
+
+    if (async)
+      xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4)
+          callback(getResult(xhr));
+      };
+
+    xhr.send();
+
+    return (async) ? xhr : getResult(xhr);
+  }
+
+  // Parsing the GEXF File
+  function parse(gexf) {
+    return Graph(gexf);
+  }
+
+  // Fetch and parse the GEXF File
+  function fetchAndParse(gexf_url, callback) {
+    if (typeof callback === 'function') {
+      return fetch(gexf_url, function(gexf) {
+        callback(Graph(gexf));
+      });
+    } else
+      return Graph(fetch(gexf_url));
+  }
+
+
+  /**
+   * Exporting
+   * ----------
+   */
+  if (typeof this.gexf !== 'undefined')
+    throw 'gexf: error - a variable called "gexf" already ' +
+          'exists in the global scope';
+
+  this.gexf = {
+
+    // Functions
+    parse: parse,
+    fetch: fetchAndParse,
+
+    // Version
+    version: '0.1.1'
+  };
+
+  if (typeof exports !== 'undefined' && this.exports !== exports)
+    module.exports = this.gexf;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.parsers.gexf/sigma.parsers.gexf.js

@@ -0,0 +1,112 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.parsers');
+
+  // Just a basic ID generator:
+  var _id = 0;
+  function edgeId() {
+    return 'e' + (_id++);
+  }
+
+  /**
+   * If the first arguments is a valid URL, this function loads a GEXF file and
+   * creates a new sigma instance or updates the graph of a given instance. It
+   * is possible to give a callback that will be executed at the end of the
+   * process. And if the first argument is a DOM element, it will skip the
+   * loading step and parse the given XML tree to fill the graph.
+   *
+   * @param  {string|DOMElement} target   The URL of the GEXF file or a valid
+   *                                      GEXF tree.
+   * @param  {object|sigma}      sig      A sigma configuration object or a
+   *                                      sigma instance.
+   * @param  {?function}         callback Eventually a callback to execute
+   *                                      after having parsed the file. It will
+   *                                      be called with the related sigma
+   *                                      instance as parameter.
+   */
+  sigma.parsers.gexf = function(target, sig, callback) {
+    var i,
+        l,
+        arr,
+        obj;
+
+    function parse(graph) {
+      // Adapt the graph:
+      arr = graph.nodes;
+      for (i = 0, l = arr.length; i < l; i++) {
+        obj = arr[i];
+
+        obj.id = obj.id;
+        if (obj.viz && typeof obj.viz === 'object') {
+          if (obj.viz.position && typeof obj.viz.position === 'object') {
+            obj.x = obj.viz.position.x;
+            obj.y = -obj.viz.position.y; // Needed otherwise it's up side down
+          }
+          obj.size = obj.viz.size;
+          obj.color = obj.viz.color;
+        }
+      }
+
+      arr = graph.edges;
+      for (i = 0, l = arr.length; i < l; i++) {
+        obj = arr[i];
+
+        obj.id = typeof obj.id === 'string' ? obj.id : edgeId();
+        obj.source = '' + obj.source;
+        obj.target = '' + obj.target;
+
+        if (obj.viz && typeof obj.viz === 'object') {
+          obj.color = obj.viz.color;
+          obj.size = obj.viz.thickness;
+        }
+
+        // Weight over viz.thickness?
+        obj.size = obj.weight;
+
+        // Changing type to be direction so it won't mess with sigma's naming
+        obj.direction = obj.type;
+        delete obj.type;
+      }
+
+      // Update the instance's graph:
+      if (sig instanceof sigma) {
+        sig.graph.clear();
+
+        arr = graph.nodes;
+        for (i = 0, l = arr.length; i < l; i++)
+          sig.graph.addNode(arr[i]);
+
+        arr = graph.edges;
+        for (i = 0, l = arr.length; i < l; i++)
+          sig.graph.addEdge(arr[i]);
+
+      // ...or instantiate sigma if needed:
+      } else if (typeof sig === 'object') {
+        sig.graph = graph;
+        sig = new sigma(sig);
+
+      // ...or it's finally the callback:
+      } else if (typeof sig === 'function') {
+        callback = sig;
+        sig = null;
+      }
+
+      // Call the callback if specified:
+      if (callback) {
+        callback(sig || graph);
+        return;
+      } else
+        return graph;
+    }
+
+    if (typeof target === 'string')
+      gexf.fetch(target, parse);
+    else if (typeof target === 'object')
+      return parse(gexf.parse(target));
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.parsers.json/README.md

@@ -0,0 +1,29 @@
+sigma.parsers.json
+==================
+
+Plugin developed by [Alexis Jacomy](https://github.com/jacomyal).
+
+---
+
+This plugin provides a single function, `sigma.parsers.json()`, that will load a JSON encoded file, parse it, eventually instantiate sigma and fill the graph with the `graph.read()` method. The main goal is to avoid using jQuery only to load an external JSON file.
+
+The most basic way to use this helper is to call it with a path and a sigma configuration object. It will then instanciate sigma, but after having added the graph into the config object.
+
+````javascript
+sigma.parsers.json(
+  'myGraph.json',
+  { container: 'myContainer' }
+);
+````
+
+It is also possible to update an existing instance's graph instead.
+
+````javascript
+sigma.parsers.json(
+  'myGraph.json',
+  myExistingInstance,
+  function() {
+    myExistingInstance.refresh();
+  }
+);
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.parsers.json/sigma.parsers.json.js

@@ -0,0 +1,88 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.parsers');
+  sigma.utils.pkg('sigma.utils');
+
+  /**
+   * Just an XmlHttpRequest polyfill for different IE versions.
+   *
+   * @return {*} The XHR like object.
+   */
+  sigma.utils.xhr = function() {
+    if (window.XMLHttpRequest)
+      return new XMLHttpRequest();
+
+    var names,
+        i;
+
+    if (window.ActiveXObject) {
+      names = [
+        'Msxml2.XMLHTTP.6.0',
+        'Msxml2.XMLHTTP.3.0',
+        'Msxml2.XMLHTTP',
+        'Microsoft.XMLHTTP'
+      ];
+
+      for (i in names)
+        try {
+          return new ActiveXObject(names[i]);
+        } catch (e) {}
+    }
+
+    return null;
+  };
+
+  /**
+   * This function loads a JSON file and creates a new sigma instance or
+   * updates the graph of a given instance. It is possible to give a callback
+   * that will be executed at the end of the process.
+   *
+   * @param  {string}       url      The URL of the JSON file.
+   * @param  {object|sigma} sig      A sigma configuration object or a sigma
+   *                                 instance.
+   * @param  {?function}    callback Eventually a callback to execute after
+   *                                 having parsed the file. It will be called
+   *                                 with the related sigma instance as
+   *                                 parameter.
+   */
+  sigma.parsers.json = function(url, sig, callback) {
+    var graph,
+        xhr = sigma.utils.xhr();
+
+    if (!xhr)
+      throw 'XMLHttpRequest not supported, cannot load the file.';
+
+    xhr.open('GET', url, true);
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        graph = JSON.parse(xhr.responseText);
+
+        // Update the instance's graph:
+        if (sig instanceof sigma) {
+          sig.graph.clear();
+          sig.graph.read(graph);
+
+        // ...or instantiate sigma if needed:
+        } else if (typeof sig === 'object') {
+          sig.graph = graph;
+          sig = new sigma(sig);
+
+        // ...or it's finally the callback:
+        } else if (typeof sig === 'function') {
+          callback = sig;
+          sig = null;
+        }
+
+        // Call the callback if specified:
+        if (callback)
+          callback(sig || graph);
+      }
+    };
+    xhr.send();
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.pathfinding.astar/LICENSE

@@ -0,0 +1,25 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>
+

src/main/java/net/jrtechs/www/client/src/plugins/sigma.pathfinding.astar/README.md

@@ -0,0 +1,27 @@
+sigma.pathfinding.astar.js — v1.0.0
+===================================
+
+> Plugin author: [@A----](https://github.com/A----)
+> Main repository for this plugin is here: https://github.com/A----/sigma-pathfinding-astar
+> Please report issues, make PR, there.
+> This project is released under Public Domain license (see LICENSE for more information).
+
+
+*sigma.pathfinding.astar.js* is a plugin for [sigma.js](http://sigmajs.org) that computes path in a graph
+using a naive implementation of the [A*](http://en.wikipedia.org/wiki/A*_search_algorithm) algorithm.
+
+## Usage
+
+Either download a tarball, `git clone` the repository or `npm install` it. Then it's pretty straight-forward.
+
+It adds a method to your `sigma.graph` called `astar(srcId, destId[, options])`.
+- `srcId`, identifier of the start node;
+- `destId`, identification of the destination node;
+- `options` (optional), an object containing one or more of those properties:
+   - `undirected` (default: `false`), if set to `true`, consider the graph as non-oriented (will explore all edges, including the inbound ones);
+   - `pathLengthFunction` (default is the geometrical distance), a `function(node1, node2, previousLength)` that should return the new path length between the start node and `node2`, knowing that the path length between the start node and `node1` is contained in `previousLength`.
+   - `heuristicLengthFunction` (default: `undefined`), a `function(node1, node2)` guesses the path length between `node1` and `node2` (`node2` actually is the destination node). If left undefined, takes the `pathLengthFunction` option (third parameter will be left undefined).
+
+Return value is either:
+- `undefined`: no path could be found between the source node and the destination node;
+- `[srcNode, …, destNode ]`: an array of nodes, including source and destination node.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.pathfinding.astar/sigma.pathfinding.astar.js

@@ -0,0 +1,134 @@
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined') {
+    throw 'sigma is not declared';
+  }
+
+  // Default function to compute path length between two nodes:
+  // the euclidian
+  var defaultPathLengthFunction = function(node1, node2, previousPathLength) {
+    var isEverythingDefined =
+      node1 != undefined &&
+      node2 != undefined &&
+      node1.x != undefined &&
+      node1.y != undefined &&
+      node2.x != undefined &&
+      node2.y != undefined;
+    if(!isEverythingDefined) {
+      return undefined;
+    }
+
+    return (previousPathLength || 0) + Math.sqrt(
+      Math.pow((node2.y - node1.y), 2) + Math.pow((node2.x - node1.x), 2)
+    );
+  };
+
+  sigma.classes.graph.addMethod(
+    'astar',
+    function(srcId, destId, settings) {
+      var currentSettings = new sigma.classes.configurable(
+        // Default settings
+        {
+          // Graph is directed, affects which edges are taken into account
+          undirected: false,
+          // Function to compute the distance between two connected node
+          pathLengthFunction: defaultPathLengthFunction,
+          // Function to compute an distance between two nodes
+          // if undefined, uses pathLengthFunction
+          heuristicLengthFunction: undefined
+        },
+        settings || {});
+
+      var pathLengthFunction = currentSettings("pathLengthFunction"),
+          heuristicLengthFunction = currentSettings("heuristicLengthFunction") || pathLengthFunction;
+
+      var srcNode = this.nodes(srcId),
+          destNode = this.nodes(destId);
+
+      var closedList = {},
+          openList = [];
+
+      var addToLists = function(node, previousNode, pathLength, heuristicLength) {
+        var nodeId = node.id;
+        var newItem = {
+          pathLength: pathLength,
+          heuristicLength: heuristicLength,
+          node: node,
+          nodeId: nodeId,
+          previousNode: previousNode
+        };
+
+        if(closedList[nodeId] == undefined || closedList[nodeId].pathLength > pathLength) {
+          closedList[nodeId] = newItem;
+
+          var item;
+          var i;
+          for(i = 0; i < openList.length; i++) {
+            item = openList[i];
+            if(item.heuristicLength > heuristicLength) {
+              break;
+            }
+          }
+
+          openList.splice(i, 0, newItem);
+        }
+      };
+
+      addToLists(srcNode, null, 0, 0);
+
+      var pathFound = false;
+
+      // Depending of the type of graph (directed or not),
+      // the neighbors are either the out neighbors or all.
+      var allNeighbors;
+      if(currentSettings("undirected")) {
+        allNeighbors = this.allNeighborsIndex;
+      }
+      else {
+        allNeighbors = this.outNeighborsIndex;
+      }
+
+
+      var inspectedItem,
+          neighbors,
+          neighbor,
+          pathLength,
+          heuristicLength,
+          i;
+      while(openList.length > 0) {
+        inspectedItem = openList.shift();
+
+        // We reached the destination node
+        if(inspectedItem.nodeId == destId) {
+          pathFound = true;
+          break;
+        }
+
+        neighbors = Object.keys(allNeighbors[inspectedItem.nodeId]);
+        for(i = 0; i < neighbors.length; i++) {
+          neighbor = this.nodes(neighbors[i]);
+          pathLength = pathLengthFunction(inspectedItem.node, neighbor, inspectedItem.pathLength);
+          heuristicLength = heuristicLengthFunction(neighbor, destNode);
+          addToLists(neighbor, inspectedItem.node, pathLength, heuristicLength);
+        }
+      }
+
+      if(pathFound) {
+        // Rebuilding path
+        var path = [],
+            currentNode = destNode;
+
+        while(currentNode) {
+          path.unshift(currentNode);
+          currentNode = closedList[currentNode.id].previousNode;
+        }
+
+        return path;
+      }
+      else {
+        return undefined;
+      }
+    }
+  );
+}).call(window);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.animate/README.md

@@ -0,0 +1,71 @@
+sigma.plugins.animate
+=====================
+
+Plugin developed by [Alexis Jacomy](https://github.com/jacomyal).
+
+---
+
+This plugin provides a method to animate a sigma instance by interpolating some node properties. Check the `sigma.plugins.animate` function doc or the `examples/animate.html` code sample to know more.
+
+Interpolate coordinates as follows:
+
+```js
+sigma.plugins.animate(
+    s,
+    {
+      x: 'target_x',
+      y: 'target_y',
+    }
+  );
+```
+
+Interpolate colors and sizes as follows:
+
+```js
+sigma.plugins.animate(
+    s,
+    {
+      size: 'target_size',
+      color: 'target_color'
+    }
+  );
+```
+
+Animate a subset of nodes as follows:
+
+```js
+sigma.plugins.animate(
+    s,
+    {
+      x: 'to_x',
+      y: 'to_y',
+      size: 'to_size',
+      color: 'to_color'
+    },
+    {
+      nodes: ['n0', 'n1', 'n2']
+    }
+  );
+```
+
+Example using all options:
+
+```js
+sigma.plugins.animate(
+    s,
+    {
+      x: 'to_x',
+      y: 'to_y',
+      size: 'to_size',
+      color: 'to_color'
+    },
+    {
+      nodes: ['n0', 'n1', 'n2'],
+      easing: 'cubicInOut',
+      duration: 300,
+      onComplete: function() {
+        // do stuff here after animation is complete
+      }
+    }
+  );
+```

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.animate/sigma.plugins.animate.js

@@ -0,0 +1,204 @@
+/**
+ * This plugin provides a method to animate a sigma instance by interpolating
+ * some node properties. Check the sigma.plugins.animate function doc or the
+ * examples/animate.html code sample to know more.
+ */
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  sigma.utils.pkg('sigma.plugins');
+
+  var _id = 0,
+      _cache = {};
+
+  // TOOLING FUNCTIONS:
+  // ******************
+  function parseColor(val) {
+    if (_cache[val])
+      return _cache[val];
+
+    var result = [0, 0, 0];
+
+    if (val.match(/^#/)) {
+      val = (val || '').replace(/^#/, '');
+      result = (val.length === 3) ?
+        [
+          parseInt(val.charAt(0) + val.charAt(0), 16),
+          parseInt(val.charAt(1) + val.charAt(1), 16),
+          parseInt(val.charAt(2) + val.charAt(2), 16)
+        ] :
+        [
+          parseInt(val.charAt(0) + val.charAt(1), 16),
+          parseInt(val.charAt(2) + val.charAt(3), 16),
+          parseInt(val.charAt(4) + val.charAt(5), 16)
+        ];
+    } else if (val.match(/^ *rgba? *\(/)) {
+      val = val.match(
+        /^ *rgba? *\( *([0-9]*) *, *([0-9]*) *, *([0-9]*) *(,.*)?\) *$/
+      );
+      result = [
+        +val[1],
+        +val[2],
+        +val[3]
+      ];
+    }
+
+    _cache[val] = {
+      r: result[0],
+      g: result[1],
+      b: result[2]
+    };
+
+    return _cache[val];
+  }
+
+  function interpolateColors(c1, c2, p) {
+    c1 = parseColor(c1);
+    c2 = parseColor(c2);
+
+    var c = {
+      r: c1.r * (1 - p) + c2.r * p,
+      g: c1.g * (1 - p) + c2.g * p,
+      b: c1.b * (1 - p) + c2.b * p
+    };
+
+    return 'rgb(' + [c.r | 0, c.g | 0, c.b | 0].join(',') + ')';
+  }
+
+  /**
+   * This function will animate some specified node properties. It will
+   * basically call requestAnimationFrame, interpolate the values and call the
+   * refresh method during a specified duration.
+   *
+   * Recognized parameters:
+   * **********************
+   * Here is the exhaustive list of every accepted parameters in the settings
+   * object:
+   *
+   *   {?array}             nodes      An array of node objects or node ids. If
+   *                                   not specified, all nodes of the graph
+   *                                   will be animated.
+   *   {?(function|string)} easing     Either the name of an easing in the
+   *                                   sigma.utils.easings package or a
+   *                                   function. If not specified, the
+   *                                   quadraticInOut easing from this package
+   *                                   will be used instead.
+   *   {?number}            duration   The duration of the animation. If not
+   *                                   specified, the "animationsTime" setting
+   *                                   value of the sigma instance will be used
+   *                                   instead.
+   *   {?function}          onComplete Eventually a function to call when the
+   *                                   animation is ended.
+   *
+   * @param  {sigma}   s       The related sigma instance.
+   * @param  {object}  animate An hash with the keys being the node properties
+   *                           to interpolate, and the values being the related
+   *                           target values.
+   * @param  {?object} options Eventually an object with options.
+   */
+  sigma.plugins.animate = function(s, animate, options) {
+    var o = options || {},
+        id = ++_id,
+        duration = o.duration || s.settings('animationsTime'),
+        easing = typeof o.easing === 'string' ?
+          sigma.utils.easings[o.easing] :
+          typeof o.easing === 'function' ?
+          o.easing :
+          sigma.utils.easings.quadraticInOut,
+        start = sigma.utils.dateNow(),
+        nodes,
+        startPositions;
+
+    if (o.nodes && o.nodes.length) {
+      if (typeof o.nodes[0] === 'object')
+        nodes = o.nodes;
+      else
+        nodes = s.graph.nodes(o.nodes); // argument is an array of IDs
+    }
+    else
+      nodes = s.graph.nodes();
+
+    // Store initial positions:
+    startPositions = nodes.reduce(function(res, node) {
+      var k;
+      res[node.id] = {};
+      for (k in animate)
+        if (k in node)
+          res[node.id][k] = node[k];
+      return res;
+    }, {});
+
+    s.animations = s.animations || Object.create({});
+    sigma.plugins.kill(s);
+
+    // Do not refresh edgequadtree during drag:
+    var k,
+        c;
+    for (k in s.cameras) {
+      c = s.cameras[k];
+      c.edgequadtree._enabled = false;
+    }
+
+    function step() {
+      var p = (sigma.utils.dateNow() - start) / duration;
+
+      if (p >= 1) {
+        nodes.forEach(function(node) {
+          for (var k in animate)
+            if (k in animate)
+              node[k] = node[animate[k]];
+        });
+
+        // Allow to refresh edgequadtree:
+        var k,
+            c;
+        for (k in s.cameras) {
+          c = s.cameras[k];
+          c.edgequadtree._enabled = true;
+        }
+
+        s.refresh();
+        if (typeof o.onComplete === 'function')
+          o.onComplete();
+      } else {
+        p = easing(p);
+        nodes.forEach(function(node) {
+          for (var k in animate)
+            if (k in animate) {
+              if (k.match(/color$/))
+                node[k] = interpolateColors(
+                  startPositions[node.id][k],
+                  node[animate[k]],
+                  p
+                );
+              else
+                node[k] =
+                  node[animate[k]] * p +
+                  startPositions[node.id][k] * (1 - p);
+            }
+        });
+
+        s.refresh();
+        s.animations[id] = requestAnimationFrame(step);
+      }
+    }
+
+    step();
+  };
+
+  sigma.plugins.kill = function(s) {
+    for (var k in (s.animations || {}))
+      cancelAnimationFrame(s.animations[k]);
+
+    // Allow to refresh edgequadtree:
+    var k,
+        c;
+    for (k in s.cameras) {
+      c = s.cameras[k];
+      c.edgequadtree._enabled = true;
+    }
+  };
+}).call(window);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.dragNodes/README.md

@@ -0,0 +1,36 @@
+sigma.plugins.dragNodes
+=====================
+
+Plugin developed by [José M. Camacho](https://github.com/josemazo), events by [Sébastien Heymann](https://github.com/sheymann) for [Linkurious](https://github.com/Linkurious).
+
+---
+
+This plugin provides a method to drag & drop nodes. At the moment, this plugin is not compatible with the WebGL renderer. Check the sigma.plugins.dragNodes function doc or the [example code](../../examples/drag-nodes.html) to know more.
+
+To use, include all .js files under this folder. Then initialize it as follows:
+
+````javascript
+var dragListener = new sigma.plugins.dragNodes(sigInst, renderer);
+````
+
+Kill the plugin as follows:
+
+````javascript
+sigma.plugins.killDragNodes(sigInst);
+````
+
+## Events
+
+This plugin provides the following events fired by the instance of the plugin:
+* `startdrag`: fired at the beginning of the drag
+* `drag`: fired while the node is dragged
+* `drop`: fired at the end of the drag if the node has been dragged
+* `dragend`: fired at the end of the drag
+
+Exemple of event binding:
+
+````javascript
+dragListener.bind('startdrag', function(event) {
+  console.log(event);
+});
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js

@@ -0,0 +1,326 @@
+/**
+ * This plugin provides a method to drag & drop nodes. Check the
+ * sigma.plugins.dragNodes function doc or the examples/basic.html &
+ * examples/api-candy.html code samples to know more.
+ */
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  sigma.utils.pkg('sigma.plugins');
+
+
+  /**
+   * This function will add `mousedown`, `mouseup` & `mousemove` events to the
+   * nodes in the `overNode`event to perform drag & drop operations. It uses
+   * `linear interpolation` [http://en.wikipedia.org/wiki/Linear_interpolation]
+   * and `rotation matrix` [http://en.wikipedia.org/wiki/Rotation_matrix] to
+   * calculate the X and Y coordinates from the `cam` or `renderer` node
+   * attributes. These attributes represent the coordinates of the nodes in
+   * the real container, not in canvas.
+   *
+   * Fired events:
+   * *************
+   * startdrag  Fired at the beginning of the drag.
+   * drag       Fired while the node is dragged.
+   * drop       Fired at the end of the drag if the node has been dragged.
+   * dragend    Fired at the end of the drag.
+   *
+   * Recognized parameters:
+   * **********************
+   * @param  {sigma}    s        The related sigma instance.
+   * @param  {renderer} renderer The related renderer instance.
+   */
+  function DragNodes(s, renderer) {
+    sigma.classes.dispatcher.extend(this);
+
+    // A quick hardcoded rule to prevent people from using this plugin with the
+    // WebGL renderer (which is impossible at the moment):
+    // if (
+    //   sigma.renderers.webgl &&
+    //   renderer instanceof sigma.renderers.webgl
+    // )
+    //   throw new Error(
+    //     'The sigma.plugins.dragNodes is not compatible with the WebGL renderer'
+    //   );
+
+    // Init variables:
+    var _self = this,
+      _s = s,
+      _body = document.body,
+      _renderer = renderer,
+      _mouse = renderer.container.lastChild,
+      _camera = renderer.camera,
+      _node = null,
+      _prefix = '',
+      _hoverStack = [],
+      _hoverIndex = {},
+      _isMouseDown = false,
+      _isMouseOverCanvas = false,
+      _drag = false;
+
+    if (renderer instanceof sigma.renderers.svg) {
+        _mouse = renderer.container.firstChild;
+    }
+
+    // It removes the initial substring ('read_') if it's a WegGL renderer.
+    if (renderer instanceof sigma.renderers.webgl) {
+      _prefix = renderer.options.prefix.substr(5);
+    } else {
+      _prefix = renderer.options.prefix;
+    }
+
+    renderer.bind('overNode', nodeMouseOver);
+    renderer.bind('outNode', treatOutNode);
+    renderer.bind('click', click);
+
+    _s.bind('kill', function() {
+      _self.unbindAll();
+    });
+
+    /**
+     * Unbind all event listeners.
+     */
+    this.unbindAll = function() {
+      _mouse.removeEventListener('mousedown', nodeMouseDown);
+      _body.removeEventListener('mousemove', nodeMouseMove);
+      _body.removeEventListener('mouseup', nodeMouseUp);
+      _renderer.unbind('overNode', nodeMouseOver);
+      _renderer.unbind('outNode', treatOutNode);
+    }
+
+    // Calculates the global offset of the given element more accurately than
+    // element.offsetTop and element.offsetLeft.
+    function calculateOffset(element) {
+      var style = window.getComputedStyle(element);
+      var getCssProperty = function(prop) {
+        return parseInt(style.getPropertyValue(prop).replace('px', '')) || 0;
+      };
+      return {
+        left: element.getBoundingClientRect().left + getCssProperty('padding-left'),
+        top: element.getBoundingClientRect().top + getCssProperty('padding-top')
+      };
+    };
+
+    function click(event) {
+      // event triggered at the end of the click
+      _isMouseDown = false;
+      _body.removeEventListener('mousemove', nodeMouseMove);
+      _body.removeEventListener('mouseup', nodeMouseUp);
+
+      if (!_hoverStack.length) {
+        _node = null;
+      }
+    };
+
+    function nodeMouseOver(event) {
+      // Don't treat the node if it is already registered
+      if (_hoverIndex[event.data.node.id]) {
+        return;
+      }
+
+      // Add node to array of current nodes over
+      _hoverStack.push(event.data.node);
+      _hoverIndex[event.data.node.id] = true;
+
+      if(_hoverStack.length && ! _isMouseDown) {
+        // Set the current node to be the last one in the array
+        _node = _hoverStack[_hoverStack.length - 1];
+        _mouse.addEventListener('mousedown', nodeMouseDown);
+      }
+    };
+
+    function treatOutNode(event) {
+      // Remove the node from the array
+      var indexCheck = _hoverStack.map(function(e) { return e; }).indexOf(event.data.node);
+      _hoverStack.splice(indexCheck, 1);
+      delete _hoverIndex[event.data.node.id];
+
+      if(_hoverStack.length && ! _isMouseDown) {
+        // On out, set the current node to be the next stated in array
+        _node = _hoverStack[_hoverStack.length - 1];
+      } else {
+        _mouse.removeEventListener('mousedown', nodeMouseDown);
+      }
+    };
+
+    function nodeMouseDown(event) {
+      _isMouseDown = true;
+      var size = _s.graph.nodes().length;
+
+      // when there is only node in the graph, the plugin cannot apply
+      // linear interpolation. So treat it as if a user is dragging
+      // the graph
+      if (_node && size > 1) {
+        _mouse.removeEventListener('mousedown', nodeMouseDown);
+        _body.addEventListener('mousemove', nodeMouseMove);
+        _body.addEventListener('mouseup', nodeMouseUp);
+
+        // Do not refresh edgequadtree during drag:
+        var k,
+            c;
+        for (k in _s.cameras) {
+          c = _s.cameras[k];
+          if (c.edgequadtree !== undefined) {
+            c.edgequadtree._enabled = false;
+          }
+        }
+
+        // Deactivate drag graph.
+        _renderer.settings({mouseEnabled: false, enableHovering: false});
+        _s.refresh();
+
+        _self.dispatchEvent('startdrag', {
+          node: _node,
+          captor: event,
+          renderer: _renderer
+        });
+      }
+    };
+
+    function nodeMouseUp(event) {
+      _isMouseDown = false;
+      _mouse.addEventListener('mousedown', nodeMouseDown);
+      _body.removeEventListener('mousemove', nodeMouseMove);
+      _body.removeEventListener('mouseup', nodeMouseUp);
+
+      // Allow to refresh edgequadtree:
+      var k,
+          c;
+      for (k in _s.cameras) {
+        c = _s.cameras[k];
+        if (c.edgequadtree !== undefined) {
+          c.edgequadtree._enabled = true;
+        }
+      }
+
+      // Activate drag graph.
+      _renderer.settings({mouseEnabled: true, enableHovering: true});
+      _s.refresh();
+
+      if (_drag) {
+        _self.dispatchEvent('drop', {
+          node: _node,
+          captor: event,
+          renderer: _renderer
+        });
+      }
+      _self.dispatchEvent('dragend', {
+        node: _node,
+        captor: event,
+        renderer: _renderer
+      });
+
+      _drag = false;
+      _node = null;
+    };
+
+    function nodeMouseMove(event) {
+      if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+        clearTimeout(timeOut);
+        var timeOut = setTimeout(executeNodeMouseMove, 0);
+      } else {
+        executeNodeMouseMove();
+      }
+
+      function executeNodeMouseMove() {
+        var offset = calculateOffset(_renderer.container),
+            x = event.clientX - offset.left,
+            y = event.clientY - offset.top,
+            cos = Math.cos(_camera.angle),
+            sin = Math.sin(_camera.angle),
+            nodes = _s.graph.nodes(),
+            ref = [];
+
+        // Getting and derotating the reference coordinates.
+        for (var i = 0; i < 2; i++) {
+          var n = nodes[i];
+          var aux = {
+            x: n.x * cos + n.y * sin,
+            y: n.y * cos - n.x * sin,
+            renX: n[_prefix + 'x'],
+            renY: n[_prefix + 'y'],
+          };
+          ref.push(aux);
+        }
+
+        // Applying linear interpolation.
+        // if the nodes are on top of each other, we use the camera ratio to interpolate
+        if (ref[0].x === ref[1].x && ref[0].y === ref[1].y) {
+          var xRatio = (ref[0].renX === 0) ? 1 : ref[0].renX;
+          var yRatio = (ref[0].renY === 0) ? 1 : ref[0].renY;
+          x = (ref[0].x / xRatio) * (x - ref[0].renX) + ref[0].x;
+          y = (ref[0].y / yRatio) * (y - ref[0].renY) + ref[0].y;
+        } else {
+          var xRatio = (ref[1].renX - ref[0].renX) / (ref[1].x - ref[0].x);
+          var yRatio = (ref[1].renY - ref[0].renY) / (ref[1].y - ref[0].y);
+
+          // if the coordinates are the same, we use the other ratio to interpolate
+          if (ref[1].x === ref[0].x) {
+            xRatio = yRatio;
+          }
+
+          if (ref[1].y === ref[0].y) {
+            yRatio = xRatio;
+          }
+
+          x = (x - ref[0].renX) / xRatio + ref[0].x;
+          y = (y - ref[0].renY) / yRatio + ref[0].y;
+        }
+
+        // Rotating the coordinates.
+        _node.x = x * cos - y * sin;
+        _node.y = y * cos + x * sin;
+
+        _s.refresh();
+
+        _drag = true;
+        _self.dispatchEvent('drag', {
+          node: _node,
+          captor: event,
+          renderer: _renderer
+        });
+      }
+    };
+  };
+
+  /**
+   * Interface
+   * ------------------
+   *
+   * > var dragNodesListener = sigma.plugins.dragNodes(s, s.renderers[0]);
+   */
+  var _instance = {};
+
+  /**
+   * @param  {sigma} s The related sigma instance.
+   * @param  {renderer} renderer The related renderer instance.
+   */
+  sigma.plugins.dragNodes = function(s, renderer) {
+    // Create object if undefined
+    if (!_instance[s.id]) {
+      _instance[s.id] = new DragNodes(s, renderer);
+    }
+
+    s.bind('kill', function() {
+      sigma.plugins.killDragNodes(s);
+    });
+
+    return _instance[s.id];
+  };
+
+  /**
+   * This method removes the event listeners and kills the dragNodes instance.
+   *
+   * @param  {sigma} s The related sigma instance.
+   */
+  sigma.plugins.killDragNodes = function(s) {
+    if (_instance[s.id] instanceof DragNodes) {
+      _instance[s.id].unbindAll();
+      delete _instance[s.id];
+    }
+  };
+
+}).call(window);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.filter/README.md

@@ -0,0 +1,187 @@
+sigma.plugins.filter
+==================
+
+Plugin developed by [Sébastien Heymann](sheymann) for [Linkurious](https://github.com/Linkurious).
+
+---
+## General
+This plugin filters nodes and edges in a fancy manner:
+- Define your own filters on nodes and edges using the `nodesBy` and `edgesBy` methods, or execute more complex filters using the `neighborsOf` method.
+- Register multiple filters before applying them anytime at once.
+- Undo any filter while preserving the execution order. 
+- Chain all methods for concise style.
+
+See the following [example code](../../examples/filters.html) and [unit tests](../../test/unit.plugins.filter.js) for full usage.
+
+To use, include all .js files under this folder. Then initialize it as follows:
+
+````javascript
+var filter = new sigma.plugins.filter(sigInst);
+````
+
+## Predicates
+Predicates are truth tests (i.e. functions which return a boolean) on a single node or a single edge. They return true if the element should be visible. For instance:
+
+````javascript
+// Only edges of size above one should be visible:
+function(e) {
+  return e.size > 1;
+}
+````
+
+In this example, notice that if the size attribute is undefined, the edge will be hidden. If you still want to display edges with no size attribute defined, you have to modify the predicate a bit:
+
+````javascript
+// Only edges of size above one should be visible:
+function(e) {
+  return e.size === undefined || e.size > 1;
+}
+````
+
+Predicates are applied by predicate processors.
+
+## Predicate processors
+Predicate processors are functions which wrap one predicate and apply it to the graph. Three predicate processors are available:
+- `nodesBy`
+- `edgesBy`
+- `neighborsOf`
+
+For each node of the graph, the `nodesBy` processor sets the attribute `hidden` to false if the predicate is true for the node. It also sets the `hidden` attribute of edges to true if one of the edge's extremities is hidden. For instance:
+
+````javascript
+// Only connected nodes (i.e. nodes of positive degree) should be visible:
+filter.nodesBy(function(n) {
+  return this.degree(n.id) > 0;
+}, 'non-isolates');
+````
+
+For each edge of the graph, the `edgesBy` processor sets the attribute `hidden` to false if the predicate is true for the edge. For instance:
+
+````javascript
+// Only edges of size above one should be visible:
+filter.edgesBy(function(e) {
+  return e.size > 1;
+}, 'edge-size-above-one');
+````
+
+For each neighbor node of a specified node, the `neighborsOf` processor sets the attribute `hidden` to true if it is not directly connected to the node. It also sets the `hidden` attribute of edges to true if one of the edge's extremities is hidden. For instance:
+
+````javascript
+// Only neighbors of the node 'n0' should be visible:
+filter.neighborsOf('n0');
+````
+
+Processors instanciated with a predicate are called filters. **Filters are not applied until the `apply` method is called.**
+
+## Filters chain
+Combining filters is easy! Declare one filter after another, then call the `apply` method to execute them on the graph in that order. For instance:
+
+````javascript
+// graph = {
+//   nodes: [{id:'n0'}, {id:'n1'}, {id:'n2'}, {id:'n3'}], 
+//   edges: [
+//     {id:'e0', source:'n0', target:'n1', size:1},
+//     {id:'e1', source:'n1', target:'n2', size:0.5},
+//     {id:'e2', source:'n1', target:'n2'}]
+// }
+filter
+    .nodesBy(function(n) {
+      return this.degree(n.id) > 0;
+    })
+    .edgesBy(function(e) {
+      return e.size >= 1;
+    })
+    .apply();
+// n3.hidden == true
+// e1.hidden == true
+// e2.hidden == true
+````
+
+Combined filters work like if there was an 'AND' operator between them. Be careful not to create mutually exclusive filters, for instance:
+
+````javascript
+filter
+    .nodesBy(function(n) {
+      return n.attributes.animal === 'pony';
+    })
+    .nodesBy(function(n) {
+      return n.attributes.animal !== 'pony';
+    })
+    .apply();
+// all nodes are hidden
+````
+
+Filters are internally stored in an array called the `chain`.
+
+## Undo filters
+Undoing filters means to remove them from the `chain`. Filters can be undone easily. Choose which filter(s) to undo, or undo all of them at once.
+
+Filters can be associated with keys at declaration, where keys are any string you give. For instance, the following filter has the key *node-animal*:
+
+````javascript
+filter.nodesBy(function(n) {
+  return n.attributes.animal === 'pony';
+}, 'node-animal');
+````
+
+Manually undo this filter as follows:
+
+````javascript
+filter
+  .undo('node-animal')
+  .apply(); // we want it applied now
+````
+
+Multiple filters can be undone at once, for instance:
+
+````javascript
+filter.undo('node-animal', 'edge-size', 'high-node-degree');
+// don't forget to call `apply()` anytime!
+````
+
+Alternative syntax:
+
+````javascript
+var a = ['node-animal', 'edge-size', 'high-node-degree'];
+filter.undo(a);
+// don't forget to call `apply()` anytime!
+````
+
+Finally, undo all filters (with or without keys) as follows:
+
+````javascript
+filter.undo();
+// don't forget to call `apply()` anytime!
+````
+
+Warning: you can't declare two filters with the same key, or it will throw an exception.
+
+## Export the chain
+The exported chain is an array of objects. Each object represents a filter by a triplet *(?key, processor, predicate)*. The processor value is the internal name of the processor: `filter.processors.nodes`, `filter.processors.edges`, `filter.processors.neighbors`. The predicate value is a copy of the predicate function. Dump the `chain` using the `export` method as follows:
+
+````javascript
+var chain = filter.export();
+// chain == [
+//  {
+//     key: '...', 
+//     processor: '...', 
+//     predicate: function() {...}
+//   }, ...
+// ]
+````
+
+## Import a chain
+You can load a filters chain using the `import` method:
+
+````javascript
+var chain = [
+  {
+    key: 'my-filter',
+    predicate: function(n) { return this.degree(n.id) > 0; },
+    processor: 'filter.processors.nodes'
+  }
+];
+filter
+  .import(chain)
+  .apply();
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.filter/sigma.plugins.filter.js

@@ -0,0 +1,504 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.plugins');
+
+  // Add custom graph methods:
+  /**
+   * This methods returns an array of nodes that are adjacent to a node.
+   *
+   * @param  {string} id The node id.
+   * @return {array}     The array of adjacent nodes.
+   */
+  if (!sigma.classes.graph.hasMethod('adjacentNodes'))
+    sigma.classes.graph.addMethod('adjacentNodes', function(id) {
+      if (typeof id !== 'string')
+        throw 'adjacentNodes: the node id must be a string.';
+
+      var target,
+          nodes = [];
+      for(target in this.allNeighborsIndex[id]) {
+        nodes.push(this.nodesIndex[target]);
+      }
+      return nodes;
+    });
+
+  /**
+   * This methods returns an array of edges that are adjacent to a node.
+   *
+   * @param  {string} id The node id.
+   * @return {array}     The array of adjacent edges.
+   */
+  if (!sigma.classes.graph.hasMethod('adjacentEdges'))
+    sigma.classes.graph.addMethod('adjacentEdges', function(id) {
+      if (typeof id !== 'string')
+        throw 'adjacentEdges: the node id must be a string.';
+
+      var a = this.allNeighborsIndex[id],
+          eid,
+          target,
+          edges = [];
+      for(target in a) {
+        for(eid in a[target]) {
+          edges.push(a[target][eid]);
+        }
+      }
+      return edges;
+    });
+
+  /**
+   * Sigma Filter
+   * =============================
+   *
+   * @author Sébastien Heymann <seb@linkurio.us> (Linkurious)
+   * @version 0.1
+   */
+
+   var _g = undefined,
+       _s = undefined,
+       _chain = [], // chain of wrapped filters
+       _keysIndex = Object.create(null),
+       Processors = {};   // available predicate processors
+
+
+  /**
+   * Library of processors
+   * ------------------
+   */
+
+   /**
+    *
+    * @param  {function} fn The predicate.
+    */
+  Processors.nodes = function nodes(fn) {
+    var n = _g.nodes(),
+        ln = n.length,
+        e = _g.edges(),
+        le = e.length;
+
+    // hide node, or keep former value
+    while(ln--)
+      n[ln].hidden = !fn.call(_g, n[ln]) || n[ln].hidden;
+
+    while(le--)
+      if (_g.nodes(e[le].source).hidden || _g.nodes(e[le].target).hidden)
+        e[le].hidden = true;
+  };
+
+   /**
+    *
+    * @param  {function} fn The predicate.
+    */
+  Processors.edges = function edges(fn) {
+    var e = _g.edges(),
+        le = e.length;
+
+    // hide edge, or keep former value
+    while(le--)
+      e[le].hidden = !fn.call(_g, e[le]) || e[le].hidden;
+  };
+
+   /**
+    *
+    * @param  {string} id The center node.
+    */
+  Processors.neighbors = function neighbors(id) {
+    var n = _g.nodes(),
+        ln = n.length,
+        e = _g.edges(),
+        le = e.length,
+        neighbors = _g.adjacentNodes(id),
+        nn = neighbors.length,
+        no = {};
+
+    while(nn--)
+      no[neighbors[nn].id] = true;
+
+    while(ln--)
+      if (n[ln].id !== id && !(n[ln].id in no))
+        n[ln].hidden = true;
+
+    while(le--)
+      if (_g.nodes(e[le].source).hidden || _g.nodes(e[le].target).hidden)
+        e[le].hidden = true;
+  };
+
+
+  /**
+   * This function adds a filter to the chain of filters.
+   *
+   * @param  {function} fn  The filter (i.e. predicate processor).
+   * @param  {function} p   The predicate.
+   * @param  {?string}  key The key to identify the filter.
+   */
+  function register(fn, p, key) {
+    if (key != undefined && typeof key !== 'string')
+      throw 'The filter key "'+ key.toString() +'" must be a string.';
+
+    if (key != undefined && !key.length)
+      throw 'The filter key must be a non-empty string.';
+
+    if (typeof fn !== 'function')
+      throw 'The predicate of key "'+ key +'" must be a function.';
+
+    if ('undo' === key)
+      throw '"undo" is a reserved key.';
+
+    if (_keysIndex[key])
+      throw 'The filter "' + key + '" already exists.';
+
+    if (key)
+      _keysIndex[key] = true;
+
+    _chain.push({
+      'key': key,
+      'processor': fn,
+      'predicate': p
+    });
+  };
+
+  /**
+   * This function removes a set of filters from the chain.
+   *
+   * @param {object} o The filter keys.
+   */
+  function unregister (o) {
+    _chain = _chain.filter(function(a) {
+      return !(a.key in o);
+    });
+
+    for(var key in o)
+      delete _keysIndex[key];
+  };
+
+
+
+
+  /**
+   * Filter Object
+   * ------------------
+   * @param  {sigma} s The related sigma instance.
+   */
+  function Filter(s) {
+    _s = s;
+    _g = s.graph;
+  };
+
+
+  /**
+   * This method is used to filter the nodes. The method must be called with
+   * the predicate, which is a function that takes a node as argument and
+   * returns a boolean. It may take an identifier as argument to undo the
+   * filter later. The method wraps the predicate into an anonymous function
+   * that looks through each node in the graph. When executed, the anonymous
+   * function hides the nodes that fail a truth test (predicate). The method
+   * adds the anonymous function to the chain of filters. The filter is not
+   * executed until the apply() method is called.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter.nodesBy(function(n) {
+   * >   return this.degree(n.id) > 0;
+   * > }, 'degreeNotNull');
+   *
+   * @param  {function}             fn  The filter predicate.
+   * @param  {?string}              key The key to identify the filter.
+   * @return {sigma.plugins.filter}     Returns the instance.
+   */
+  Filter.prototype.nodesBy = function(fn, key) {
+    // Wrap the predicate to be applied on the graph and add it to the chain.
+    register(Processors.nodes, fn, key);
+
+    return this;
+  };
+
+  /**
+   * This method is used to filter the edges. The method must be called with
+   * the predicate, which is a function that takes a node as argument and
+   * returns a boolean. It may take an identifier as argument to undo the
+   * filter later. The method wraps the predicate into an anonymous function
+   * that looks through each edge in the graph. When executed, the anonymous
+   * function hides the edges that fail a truth test (predicate). The method
+   * adds the anonymous function to the chain of filters. The filter is not
+   * executed until the apply() method is called.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter.edgesBy(function(e) {
+   * >   return e.size > 1;
+   * > }, 'edgeSize');
+   *
+   * @param  {function}             fn  The filter predicate.
+   * @param  {?string}              key The key to identify the filter.
+   * @return {sigma.plugins.filter}     Returns the instance.
+   */
+  Filter.prototype.edgesBy = function(fn, key) {
+    // Wrap the predicate to be applied on the graph and add it to the chain.
+    register(Processors.edges, fn, key);
+
+    return this;
+  };
+
+  /**
+   * This method is used to filter the nodes which are not direct connections
+   * of a given node. The method must be called with the node identifier. It
+   * may take an identifier as argument to undo the filter later. The filter
+   * is not executed until the apply() method is called.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter.neighborsOf('n0');
+   *
+   * @param  {string}               id  The node id.
+   * @param  {?string}              key The key to identify the filter.
+   * @return {sigma.plugins.filter}     Returns the instance.
+   */
+  Filter.prototype.neighborsOf = function(id, key) {
+    if (typeof id !== 'string')
+      throw 'The node id "'+ id.toString() +'" must be a string.';
+    if (!id.length)
+      throw 'The node id must be a non-empty string.';
+
+    // Wrap the predicate to be applied on the graph and add it to the chain.
+    register(Processors.neighbors, id, key);
+
+    return this;
+  };
+
+  /**
+   * This method is used to execute the chain of filters and to refresh the
+   * display.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter
+   * >   .nodesBy(function(n) {
+   * >     return this.degree(n.id) > 0;
+   * >   }, 'degreeNotNull')
+   * >   .apply();
+   *
+   * @return {sigma.plugins.filter}      Returns the instance.
+   */
+  Filter.prototype.apply = function() {
+    for (var i = 0, len = _chain.length; i < len; ++i) {
+      _chain[i].processor(_chain[i].predicate);
+    };
+
+    if (_chain[0] && 'undo' === _chain[0].key) {
+      _chain.shift();
+    }
+
+    _s.refresh();
+
+    return this;
+  };
+
+  /**
+   * This method undoes one or several filters, depending on how it is called.
+   *
+   * To undo all filters, call "undo" without argument. To undo a specific
+   * filter, call it with the key of the filter. To undo multiple filters, call
+   * it with an array of keys or multiple arguments, and it will undo each
+   * filter, in the same order. The undo is not executed until the apply()
+   * method is called. For instance:
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter
+   * >   .nodesBy(function(n) {
+   * >     return this.degree(n.id) > 0;
+   * >   }, 'degreeNotNull');
+   * >   .edgesBy(function(e) {
+   * >     return e.size > 1;
+   * >   }, 'edgeSize')
+   * >   .undo();
+   *
+   * Other examples:
+   * > filter.undo();
+   * > filter.undo('myfilter');
+   * > filter.undo(['myfilter1', 'myfilter2']);
+   * > filter.undo('myfilter1', 'myfilter2');
+   *
+   * @param  {?(string|array|*string))} v Eventually one key, an array of keys.
+   * @return {sigma.plugins.filter}       Returns the instance.
+   */
+  Filter.prototype.undo = function(v) {
+    var q = Object.create(null),
+        la = arguments.length;
+
+    // find removable filters
+    if (la === 1) {
+      if (Object.prototype.toString.call(v) === '[object Array]')
+        for (var i = 0, len = v.length; i < len; i++)
+          q[v[i]] = true;
+
+      else // 1 filter key
+        q[v] = true;
+
+    } else if (la > 1) {
+      for (var i = 0; i < la; i++)
+        q[arguments[i]] = true;
+    }
+    else
+      this.clear();
+
+    unregister(q);
+
+    function processor() {
+      var n = _g.nodes(),
+          ln = n.length,
+          e = _g.edges(),
+          le = e.length;
+
+      while(ln--)
+        n[ln].hidden = false;
+
+      while(le--)
+        e[le].hidden = false;
+    };
+
+    _chain.unshift({
+      'key': 'undo',
+      'processor': processor
+    });
+
+    return this;
+  };
+
+  // fast deep copy function
+  function deepCopy(o) {
+    var copy = Object.create(null);
+    for (var i in o) {
+      if (typeof o[i] === "object" && o[i] !== null) {
+        copy[i] = deepCopy(o[i]);
+      }
+      else if (typeof o[i] === "function" && o[i] !== null) {
+        // clone function:
+        eval(" copy[i] = " +  o[i].toString());
+        //copy[i] = o[i].bind(_g);
+      }
+
+      else
+        copy[i] = o[i];
+    }
+    return copy;
+  };
+
+  function cloneChain(chain) {
+    // Clone the array of filters:
+    var copy = chain.slice(0);
+    for (var i = 0, len = copy.length; i < len; i++) {
+      copy[i] = deepCopy(copy[i]);
+      if (typeof copy[i].processor === "function")
+        copy[i].processor = 'filter.processors.' + copy[i].processor.name;
+    };
+    return copy;
+  }
+
+  /**
+   * This method is used to empty the chain of filters.
+   * Prefer the undo() method to reset filters.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > filter.clear();
+   *
+   * @return {sigma.plugins.filter} Returns the instance.
+   */
+  Filter.prototype.clear = function() {
+    _chain.length = 0; // clear the array
+    _keysIndex = Object.create(null);
+    return this;
+  };
+
+  /**
+   * This method clones the filter chain and return the copy.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > var chain = filter.export();
+   *
+   * @return {object}   The cloned chain of filters.
+   */
+  Filter.prototype.export = function() {
+    var c = cloneChain(_chain);
+    return c;
+  };
+
+  /**
+   * This method sets the chain of filters with the specified chain.
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   * > var chain = [
+   * >   {
+   * >     key: 'my-filter',
+   * >     predicate: function(n) {...},
+   * >     processor: 'filter.processors.nodes'
+   * >   }, ...
+   * > ];
+   * > filter.import(chain);
+   *
+   * @param {array} chain The chain of filters.
+   * @return {sigma.plugins.filter} Returns the instance.
+   */
+  Filter.prototype.import = function(chain) {
+    if (chain === undefined)
+      throw 'Wrong arguments.';
+
+    if (Object.prototype.toString.call(chain) !== '[object Array]')
+      throw 'The chain" must be an array.';
+
+    var copy = cloneChain(chain);
+
+    for (var i = 0, len = copy.length; i < len; i++) {
+      if (copy[i].predicate === undefined || copy[i].processor === undefined)
+        throw 'Wrong arguments.';
+
+      if (copy[i].key != undefined && typeof copy[i].key !== 'string')
+        throw 'The filter key "'+ copy[i].key.toString() +'" must be a string.';
+
+      if (typeof copy[i].predicate !== 'function')
+        throw 'The predicate of key "'+ copy[i].key +'" must be a function.';
+
+      if (typeof copy[i].processor !== 'string')
+        throw 'The processor of key "'+ copy[i].key +'" must be a string.';
+
+      // Replace the processor name by the corresponding function:
+      switch(copy[i].processor) {
+        case 'filter.processors.nodes':
+          copy[i].processor = Processors.nodes;
+          break;
+        case 'filter.processors.edges':
+          copy[i].processor = Processors.edges;
+          break;
+        case 'filter.processors.neighbors':
+          copy[i].processor = Processors.neighbors;
+          break;
+        default:
+          throw 'Unknown processor ' + copy[i].processor;
+      }
+    };
+
+    _chain = copy;
+
+    return this;
+  };
+
+
+  /**
+   * Interface
+   * ------------------
+   *
+   * > var filter = new sigma.plugins.filter(s);
+   */
+  var filter = null;
+
+  /**
+   * @param  {sigma} s The related sigma instance.
+   */
+  sigma.plugins.filter = function(s) {
+    // Create filter if undefined
+    if (!filter) {
+      filter = new Filter(s);
+    }
+    return filter;
+  };
+
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.neighborhoods/README.md

@@ -0,0 +1,24 @@
+sigma.plugins.neighborhood
+==========================
+
+Plugin developed by [Alexis Jacomy](https://github.com/jacomyal).
+
+---
+
+This plugin provides a method to retrieve the neighborhood of a node. Basically, it loads a graph and stores it in a headless `sigma.classes.graph` instance, that you can query to retrieve neighborhoods.
+
+It is useful for people who want to provide a neighborhoods navigation inside a big graph instead of just displaying it, and without having to deploy an API or the list of every neighborhoods. But please note that this plugin is here as an example of what you can do with the graph model, and do not hesitate to try customizing your navigation through graphs.
+
+This plugin also adds to the graph model a method called "neighborhood". Check the code for more information.
+
+Here is how to use it:
+
+````javascript
+var db = new sigma.plugins.neighborhoods();
+db.load('path/to/my/graph.json', function() {
+  var nodeId = 'anyNodeID';
+  mySigmaInstance
+    .read(db.neighborhood(nodeId))
+    .refresh();
+});
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js

@@ -0,0 +1,186 @@
+/**
+ * This plugin provides a method to retrieve the neighborhood of a node.
+ * Basically, it loads a graph and stores it in a headless sigma.classes.graph
+ * instance, that you can query to retrieve neighborhoods.
+ *
+ * It is useful for people who want to provide a neighborhoods navigation
+ * inside a big graph instead of just displaying it, and without having to
+ * deploy an API or the list of every neighborhoods.
+ *
+ * This plugin also adds to the graph model a method called "neighborhood".
+ * Check the code for more information.
+ *
+ * Here is how to use it:
+ *
+ *  > var db = new sigma.plugins.neighborhoods();
+ *  > db.load('path/to/my/graph.json', function() {
+ *  >   var nodeId = 'anyNodeID';
+ *  >   mySigmaInstance
+ *  >     .read(db.neighborhood(nodeId))
+ *  >     .refresh();
+ *  > });
+ */
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  /**
+   * This method takes the ID of node as argument and returns the graph of the
+   * specified node, with every other nodes that are connected to it and every
+   * edges that connect two of the previously cited nodes. It uses the built-in
+   * indexes from sigma's graph model to search in the graph.
+   *
+   * @param  {string} centerId The ID of the center node.
+   * @return {object}          The graph, as a simple descriptive object, in
+   *                           the format required by the "read" graph method.
+   */
+  sigma.classes.graph.addMethod(
+    'neighborhood',
+    function(centerId) {
+      var k1,
+          k2,
+          k3,
+          node,
+          center,
+          // Those two local indexes are here just to avoid duplicates:
+          localNodesIndex = {},
+          localEdgesIndex = {},
+          // And here is the resulted graph, empty at the moment:
+          graph = {
+            nodes: [],
+            edges: []
+          };
+
+      // Check that the exists:
+      if (!this.nodes(centerId))
+        return graph;
+
+      // Add center. It has to be cloned to add it the "center" attribute
+      // without altering the current graph:
+      node = this.nodes(centerId);
+      center = {};
+      center.center = true;
+      for (k1 in node)
+        center[k1] = node[k1];
+
+      localNodesIndex[centerId] = true;
+      graph.nodes.push(center);
+
+      // Add neighbors and edges between the center and the neighbors:
+      for (k1 in this.allNeighborsIndex[centerId]) {
+        if (!localNodesIndex[k1]) {
+          localNodesIndex[k1] = true;
+          graph.nodes.push(this.nodesIndex[k1]);
+        }
+
+        for (k2 in this.allNeighborsIndex[centerId][k1])
+          if (!localEdgesIndex[k2]) {
+            localEdgesIndex[k2] = true;
+            graph.edges.push(this.edgesIndex[k2]);
+          }
+      }
+
+      // Add edges connecting two neighbors:
+      for (k1 in localNodesIndex)
+        if (k1 !== centerId)
+          for (k2 in localNodesIndex)
+            if (
+              k2 !== centerId &&
+              k1 !== k2 &&
+              this.allNeighborsIndex[k1][k2]
+            )
+              for (k3 in this.allNeighborsIndex[k1][k2])
+                if (!localEdgesIndex[k3]) {
+                  localEdgesIndex[k3] = true;
+                  graph.edges.push(this.edgesIndex[k3]);
+                }
+
+      // Finally, let's return the final graph:
+      return graph;
+    }
+  );
+
+  sigma.utils.pkg('sigma.plugins');
+
+  /**
+   * sigma.plugins.neighborhoods constructor.
+   */
+  sigma.plugins.neighborhoods = function() {
+    var ready = false,
+        readyCallbacks = [],
+        graph = new sigma.classes.graph();
+
+    /**
+     * This method just returns the neighborhood of a node.
+     *
+     * @param  {string} centerNodeID The ID of the center node.
+     * @return {object}              Returns the neighborhood.
+     */
+    this.neighborhood = function(centerNodeID) {
+      return graph.neighborhood(centerNodeID);
+    };
+
+    /**
+     * This method loads the JSON graph at "path", stores it in the local graph
+     * instance, and executes the callback.
+     *
+     * @param {string}    path     The path of the JSON graph file.
+     * @param {?function} callback Eventually a callback to execute.
+     */
+    this.load = function(path, callback) {
+      // Quick XHR polyfill:
+      var xhr = (function() {
+        if (window.XMLHttpRequest)
+          return new XMLHttpRequest();
+
+        var names,
+            i;
+
+        if (window.ActiveXObject) {
+          names = [
+            'Msxml2.XMLHTTP.6.0',
+            'Msxml2.XMLHTTP.3.0',
+            'Msxml2.XMLHTTP',
+            'Microsoft.XMLHTTP'
+          ];
+
+          for (i in names)
+            try {
+              return new ActiveXObject(names[i]);
+            } catch (e) {}
+        }
+
+        return null;
+      })();
+
+      if (!xhr)
+        throw 'XMLHttpRequest not supported, cannot load the data.';
+
+      xhr.open('GET', path, true);
+      xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+          graph.clear().read(JSON.parse(xhr.responseText));
+
+          if (callback)
+            callback();
+        }
+      };
+
+      // Start loading the file:
+      xhr.send();
+
+      return this;
+    };
+
+    /**
+     * This method cleans the graph instance "reads" a graph into it.
+     *
+     * @param {object} g The graph object to read.
+     */
+    this.read = function(g) {
+      graph.clear().read(g);
+    };
+  };
+}).call(window);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.relativeSize/README.md

@@ -0,0 +1,8 @@
+sigma.plugins.relativeSize
+=====================
+
+Plugin developed by [Anatoliy Stegniy](https://github.com/tsdaemon).
+
+---
+
+This plugin provides a method to change nodes size depending to their degree (number of relationships)

src/main/java/net/jrtechs/www/client/src/plugins/sigma.plugins.relativeSize/sigma.plugins.relativeSize.js

@@ -0,0 +1,28 @@
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  sigma.utils.pkg('sigma.plugins');
+
+  var _id = 0,
+      _cache = {};
+
+  /**
+   * This function will change size for all nodes depending to their degree
+   *
+   * @param  {sigma}   s       		The related sigma instance.
+   * @param  {object}  initialSize 	Start size property
+   */
+  sigma.plugins.relativeSize = function(s, initialSize) {
+    var nodes = s.graph.nodes();
+
+    // second create size for every node
+    for(var i = 0; i < nodes.length; i++) {
+      var degree = s.graph.degree(nodes[i].id);
+      nodes[i].size = initialSize * Math.sqrt(degree);
+    }
+    s.refresh();
+  };
+}).call(window);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/README.md

@@ -0,0 +1,21 @@
+sigma.renderers.customEdgeShapes
+==================
+
+Plugin developed by [Sébastien Heymann](https://github.com/sheymann) for [Linkurious](https://github.com/Linkurious).
+
+Contact: seb@linkurio.us
+
+---
+## General
+This plugin registers custom edge shape renderers. See the following [example code](../../examples/plugin-customEdgeShapes.html) for full usage.
+
+To use, include all .js files under this folder.
+
+## Shapes
+The plugin implements the following shapes:
+  * `dashed`
+  * `dotted`
+  * `parallel`: two solid parallel lines representing an edge aggregating multiple edges in the original graph.
+  * `tapered` (see Danny Holten, Petra Isenberg, Jean-Daniel Fekete, and J. Van Wijk (2010) Performance Evaluation of Tapered, Curved, and Animated Directed-Edge Representations in Node-Link Graphs. Research Report, Sep 2010.)
+
+To assign a shape renderer to an edge, simply set `edge.type='shape-name'` e.g. `edge.type='dotted'`. The default renderer implemented by sigma.js is named `def` (alias `line`) - see also [generic custom edge renderer example](../../examples/custom-edge-renderer.html).

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dashed.js

@@ -0,0 +1,64 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.dashed =
+    function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+    size *= settings('edgeHoverSizeRatio');
+
+    context.save();
+
+    context.setLineDash([8,3]);
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dotted.js

@@ -0,0 +1,64 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.dotted =
+    function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+    size *= settings('edgeHoverSizeRatio');
+
+    context.save();
+
+    context.setLineDash([2]);
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.parallel.js

@@ -0,0 +1,77 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.parallel =
+    function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        c,
+        d,
+        dist = sigma.utils.getDistance(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+    size *= settings('edgeHoverSizeRatio');
+
+    // Intersection points of the source node circle:
+    c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
+
+    // Intersection points of the target node circle:
+    d = sigma.utils.getCircleIntersection(tX, tY, size, sX, sY, dist);
+
+    context.save();
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(c.xi, c.yi);
+    context.lineTo(d.xi_prime, d.yi_prime);
+    context.closePath();
+    context.stroke();
+
+    context.beginPath();
+    context.moveTo(c.xi_prime, c.yi_prime);
+    context.lineTo(d.xi, d.yi);
+    context.closePath();
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.tapered.js

@@ -0,0 +1,74 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.tapered =
+    function(edge, source, target, context, settings) {
+    // The goal is to draw a triangle where the target node is a point of
+    // the triangle, and the two other points are the intersection of the
+    // source circle and the circle (target, distance(source, target)).
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        prefix = settings('prefix') || '',
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        dist = sigma.utils.getDistance(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+    size *= settings('edgeHoverSizeRatio');
+
+    // Intersection points:
+    var c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
+
+    context.save();
+
+    // Turn transparency on:
+    context.globalAlpha = 0.65;
+
+    // Draw the triangle:
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(tX, tY);
+    context.lineTo(c.xi, c.yi);
+    context.lineTo(c.xi_prime, c.yi_prime);
+    context.closePath();
+    context.fill();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dashed.js

@@ -0,0 +1,64 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This method renders the edge as a dashed line.
+   *
+   * @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.dashed = function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.save();
+
+    if (edge.active) {
+      context.strokeStyle = settings('edgeActiveColor') === 'edge' ?
+        (color || defaultEdgeColor) :
+        settings('defaultEdgeActiveColor');
+    }
+    else {
+      context.strokeStyle = color;
+    }
+
+    context.setLineDash([8,3]);
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dotted.js

@@ -0,0 +1,64 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This method renders the edge as a dotted line.
+   *
+   * @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.dotted = function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.save();
+
+    if (edge.active) {
+      context.strokeStyle = settings('edgeActiveColor') === 'edge' ?
+        (color || defaultEdgeColor) :
+        settings('defaultEdgeActiveColor');
+    }
+    else {
+      context.strokeStyle = color;
+    }
+
+    context.setLineDash([2]);
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.parallel.js

@@ -0,0 +1,77 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This method renders the edge as two parallel lines.
+   *
+   * @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.parallel = function(edge, source, target, context, settings) {
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        c,
+        d,
+        dist = sigma.utils.getDistance(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    // Intersection points of the source node circle:
+    c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
+
+    // Intersection points of the target node circle:
+    d = sigma.utils.getCircleIntersection(tX, tY, size, sX, sY, dist);
+
+    context.save();
+
+    if (edge.active) {
+      context.strokeStyle = settings('edgeActiveColor') === 'edge' ?
+        (color || defaultEdgeColor) :
+        settings('defaultEdgeActiveColor');
+    }
+    else {
+      context.strokeStyle = color;
+    }
+
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(c.xi, c.yi);
+    context.lineTo(d.xi_prime, d.yi_prime);
+    context.closePath();
+    context.stroke();
+
+    context.beginPath();
+    context.moveTo(c.xi_prime, c.yi_prime);
+    context.lineTo(d.xi, d.yi);
+    context.closePath();
+    context.stroke();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.tapered.js

@@ -0,0 +1,77 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This method renders the edge as a tapered line.
+   * Danny Holten, Petra Isenberg, Jean-Daniel Fekete, and J. Van Wijk (2010)
+   * Performance Evaluation of Tapered, Curved, and Animated Directed-Edge
+   * Representations in Node-Link Graphs. Research Report, Sep 2010.
+   *
+   * @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.tapered = function(edge, source, target, context, settings) {
+    // The goal is to draw a triangle where the target node is a point of
+    // the triangle, and the two other points are the intersection of the
+    // source circle and the circle (target, distance(source, target)).
+    var color = edge.active ?
+          edge.active_color || settings('defaultEdgeActiveColor') :
+          edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        prefix = settings('prefix') || '',
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        dist = sigma.utils.getDistance(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    // Intersection points:
+    var c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
+
+    context.save();
+
+    if (edge.active) {
+      context.fillStyle = settings('edgeActiveColor') === 'edge' ?
+        (color || defaultEdgeColor) :
+        settings('defaultEdgeActiveColor');
+    }
+    else {
+      context.fillStyle = color;
+    }
+
+    // Turn transparency on:
+    context.globalAlpha = 0.65;
+
+    // Draw the triangle:
+    context.beginPath();
+    context.moveTo(tX, tY);
+    context.lineTo(c.xi, c.yi);
+    context.lineTo(c.xi_prime, c.yi_prime);
+    context.closePath();
+    context.fill();
+
+    context.restore();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customShapes/README.md

@@ -0,0 +1,61 @@
+sigma.renderers.customShapes
+==================
+
+Plugin developed by [Ron Peleg](https://github.com/rpeleg1970).
+
+---
+## General
+This plugin registers custom node shape renderers, and allows adding scaled images on top of them. See the following [example code](../../examples/plugin-customShapes.html) for full usage.
+
+To use, include all .js files under this folder.
+
+The plugin implements the `node.borderColor` property to allow control of the (surprise) border color.
+
+## Shapes
+The plugin implements the following shapes. To set a shape renderer, you simply set `node.type='shape-name'` e.g. `node.type='star'`. The default renderer implemented by sigma.js is named `def` - see also [generic custom node renderer example](../../examples/custom-node-renderer.html)
+  * `circle`: similar to the `def` renderer, but also allows images
+  * `square`
+  * `diamond`
+  * `equilateral`: equilateral polygon. you can control additional properties in this polygon by setting more values as follows:
+````javascript
+  node.equilateral = {
+    rotate: /* rotate right, value in deg */,
+    numPoints: /* default 5, integer */ 
+  }
+````
+  * `star`:  you can control additional properties in this star by setting more as follows:
+````javascript
+  node.star = {
+    numPoints: /* default 5, integer */,
+    innerRatio: /* ratio of inner radius in star, compared to node.size */
+  }
+````
+  * `cross`: plus shape. you can control additional properties in this polygon by setting more values as follows:
+````javascript
+  node.cross = {
+    lineWeight: /* width of cross arms */,
+  }
+````
+  * `pacman`: an example of a more exotic renderer
+
+The list of available renderer types can be obtained by calling `ShapeLibrary.enumerate()`
+
+## Images
+You can add an image to any node, simply by adding `node.image` property, with the following content:
+````javascript
+node.image = {
+  url: /* mandatory image URL */,
+  clip: /* Ratio of image clipping disk compared to node size (def 1.0) - see example to how we adapt this to differenmt shapes */,
+  scale: /* Ratio of how to scale the image, compared to node size, default 1.0 */,
+  w: /* numeric width - important for correct scaling if w/h ratio is not 1.0 */,
+  h: /* numeric height - important for correct scaling if w/h ratio is not 1.0 */
+}
+````
+Because the plug-in calls the sigma instance `refresh()` method on image loading, you MUST init as follows or you will not see rendered images:
+````javascript
+  s = new sigma({
+   ...
+  });
+  CustomShapes.init(s);
+  s.refresh();
+````

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customShapes/shape-library.js

@@ -0,0 +1,162 @@
+;(function(undefined) {
+  'use strict';
+
+  var shapes = [];
+  var register = function(name,drawShape,drawBorder) {
+    shapes.push({
+      'name': name,
+      'drawShape': drawShape,
+      'drawBorder': drawBorder
+    });
+  }
+
+  var enumerateShapes = function() {
+    return shapes;
+  }
+
+  /**
+   * For the standard closed shapes - the shape fill and border are drawn the
+   * same, with some minor differences for fill and border. To facilitate this we
+   * create the generic draw functions, that take a shape drawing func and
+   * return a shape-renderer/border-renderer
+   * ----------
+   */
+  var genericDrawShape = function(shapeFunc) {
+    return function(node,x,y,size,color,context) {
+      context.fillStyle = color;
+      context.beginPath();
+      shapeFunc(node,x,y,size,context);
+      context.closePath();
+      context.fill();
+    };
+  }
+
+  var genericDrawBorder = function(shapeFunc) {
+    return function(node,x,y,size,color,context) {
+      context.strokeStyle = color;
+      context.lineWidth = size / 5;
+      context.beginPath();
+      shapeFunc(node,x,y,size,context);
+      context.closePath();
+      context.stroke();
+    };
+  }
+
+  /**
+   * We now proced to use the generics to define our standard shape/border
+   * drawers: square, diamond, equilateral (polygon), and star
+   * ----------
+   */
+  var drawSquare = function(node,x,y,size,context) {
+    var rotate = Math.PI*45/180; // 45 deg rotation of a diamond shape
+    context.moveTo(x+size*Math.sin(rotate), y-size*Math.cos(rotate)); // first point on outer radius, dwangle 'rotate'
+    for(var i=1; i<4; i++) {
+      context.lineTo(x+Math.sin(rotate+2*Math.PI*i/4)*size, y-Math.cos(rotate+2*Math.PI*i/4)*size);
+    }
+  }
+  register("square",genericDrawShape(drawSquare),genericDrawBorder(drawSquare));
+
+  var drawCircle = function(node,x,y,size,context) {
+    context.arc(x,y,size,0,Math.PI*2,true);
+  }
+  register("circle",genericDrawShape(drawCircle),genericDrawBorder(drawCircle));
+
+  var drawDiamond = function(node,x,y,size,context) {
+    context.moveTo(x-size, y);
+    context.lineTo(x, y-size);
+    context.lineTo(x+size, y);
+    context.lineTo(x, y+size);
+  }
+  register("diamond",genericDrawShape(drawDiamond),genericDrawBorder(drawDiamond));
+
+  var drawCross = function(node,x,y,size,context) {
+    var lineWeight = (node.cross && node.cross.lineWeight) || 5;
+    context.moveTo(x-size, y-lineWeight);
+    context.lineTo(x-size, y+lineWeight);
+    context.lineTo(x-lineWeight, y+lineWeight);
+    context.lineTo(x-lineWeight, y+size);
+    context.lineTo(x+lineWeight, y+size);
+    context.lineTo(x+lineWeight, y+lineWeight);
+    context.lineTo(x+size, y+lineWeight);
+    context.lineTo(x+size, y-lineWeight);
+    context.lineTo(x+lineWeight, y-lineWeight);
+    context.lineTo(x+lineWeight, y-size);
+    context.lineTo(x-lineWeight, y-size);
+    context.lineTo(x-lineWeight, y-lineWeight);
+  }
+  register("cross",genericDrawShape(drawCross),genericDrawBorder(drawCross));
+
+  var drawEquilateral = function(node,x,y,size,context) {
+    var pcount = (node.equilateral && node.equilateral.numPoints) || 5;
+    var rotate = ((node.equilateral && node.equilateral.rotate) || 0)*Math.PI/180;
+    var radius = size;
+    context.moveTo(x+radius*Math.sin(rotate), y-radius*Math.cos(rotate)); // first point on outer radius, angle 'rotate'
+    for(var i=1; i<pcount; i++) {
+      context.lineTo(x+Math.sin(rotate+2*Math.PI*i/pcount)*radius, y-Math.cos(rotate+2*Math.PI*i/pcount)*radius);
+    }
+  }
+  register("equilateral",genericDrawShape(drawEquilateral),genericDrawBorder(drawEquilateral));
+
+
+  var starShape = function(node,x,y,size,context) {
+    var pcount = (node.star && node.star.numPoints) || 5,
+        inRatio = (node.star && node.star.innerRatio) || 0.5,
+        outR = size,
+        inR = size*inRatio,
+        angleOffset = Math.PI/pcount;
+    context.moveTo(x, y-size); // first point on outer radius, top
+    for(var i=0; i<pcount; i++) {
+      context.lineTo(x+Math.sin(angleOffset+2*Math.PI*i/pcount)*inR,
+          y-Math.cos(angleOffset+2*Math.PI*i/pcount)*inR);
+      context.lineTo(x+Math.sin(2*Math.PI*(i+1)/pcount)*outR,
+          y-Math.cos(2*Math.PI*(i+1)/pcount)*outR);
+    }
+  }
+  register("star",genericDrawShape(starShape),genericDrawBorder(starShape));
+
+  /**
+   * An example of a non standard shape (pacman). Here we WILL NOT use the
+   * genericDraw functions, but rather register a full custom node renderer for
+   * fill, and skip the border renderer which is irrelevant for this shape
+   * ----------
+   */
+  var drawPacman = function(node,x,y,size,color,context) {
+    context.fillStyle = 'yellow';
+    context.beginPath();
+    context.arc(x,y,size,1.25*Math.PI,0,false);
+    context.arc(x,y,size,0,0.75*Math.PI,false);
+    context.lineTo(x,y);
+    context.closePath();
+    context.fill();
+
+    context.fillStyle = 'white';
+    context.strokeStyle = 'black';
+    context.beginPath();
+    context.arc(x+size/3,y-size/3,size/4,0,2*Math.PI,false);
+    context.closePath();
+    context.fill();
+    context.stroke();
+
+    context.fillStyle = 'black';
+    context.beginPath();
+    context.arc(x+4*size/9,y-size/3,size/8,0,2*Math.PI,false);
+    context.closePath();
+    context.fill();
+  }
+  register("pacman",drawPacman,null);
+
+  /**
+   * Exporting
+   * ----------
+   */
+  this.ShapeLibrary = {
+
+    // Functions
+    enumerate: enumerateShapes,
+    // add: addShape,
+
+    // Version
+    version: '0.1'
+  };
+
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.customShapes/sigma.renderers.customShapes.js

@@ -0,0 +1,236 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  if (typeof ShapeLibrary === 'undefined')
+    throw 'ShapeLibrary is not declared';
+
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.canvas.nodes');
+  sigma.utils.pkg('sigma.svg.nodes');
+
+  var sigInst = undefined;
+  var imgCache = {};
+
+  var initPlugin = function(inst) {
+    sigInst = inst;
+  }
+
+  var drawImage = function (node,x,y,size,context) {
+    if(sigInst && node.image && node.image.url) {
+      var url = node.image.url;
+      var ih = node.image.h || 1; // 1 is arbitrary, anyway only the ratio counts
+      var iw = node.image.w || 1;
+      var scale = node.image.scale || 1;
+      var clip = node.image.clip || 1;
+
+      // create new IMG or get from imgCache
+      var image = imgCache[url];
+      if(!image) {
+        image = document.createElement('IMG');
+        image.src = url;
+        image.status = 'loading';
+        image.onerror = function() {
+          console.log("error loading", url);
+          image.status = 'error';
+        };
+        image.onload = function(){
+          // TODO see how we redraw on load
+          // need to provide the siginst as a parameter to the library
+          console.log("redraw on image load", url);
+          image.status = 'ok';
+          sigInst.refresh();
+        };
+        imgCache[url] = image;
+      }
+
+      // calculate position and draw
+      var xratio = (iw<ih) ? (iw/ih) : 1;
+      var yratio = (ih<iw) ? (ih/iw) : 1;
+      var r = size*scale;
+
+      // Draw the clipping disc:
+      context.save(); // enter clipping mode
+      context.beginPath();
+      context.arc(x,y,size*clip,0,Math.PI*2,true);
+      context.closePath();
+      context.clip();
+
+      if(image.status === 'ok') {
+        // Draw the actual image
+        context.drawImage(image,
+            x+Math.sin(-3.142/4)*r*xratio,
+            y-Math.cos(-3.142/4)*r*yratio,
+            r*xratio*2*Math.sin(-3.142/4)*(-1),
+            r*yratio*2*Math.cos(-3.142/4));
+      }
+      context.restore(); // exit clipping mode
+    }
+  }
+
+  var drawSVGImage = function (node, group, settings) {
+    if(sigInst && node.image && node.image.url) {
+      var clipCircle = document.createElementNS(settings('xmlns'), 'circle'),
+        clipPath = document.createElementNS(settings('xmlns'), 'clipPath'),
+        clipPathId = settings('classPrefix') + '-clip-path-' + node.id,
+        def = document.createElementNS(settings('xmlns'), 'defs'),
+        image = document.createElementNS(settings('xmlns'), 'image'),
+        url = node.image.url;
+
+      clipPath.setAttributeNS(null, 'id', clipPathId);
+      clipPath.appendChild(clipCircle);
+      def.appendChild(clipPath);
+
+      // angular's base tag will change the relative fragment id, so
+      // #<clipPathId> doesn't work
+      // HACKHACK: IE <=9 does not respect the HTML base element in SVG.
+      // They don't need the current URL in the clip path reference.
+      var absolutePath = /MSIE [5-9]/.test(navigator.userAgent) ?
+        "" : document.location.href;
+      // To fix cases where an anchor tag was used
+      absolutePath = absolutePath.split("#")[0];
+      image.setAttributeNS(null, 'class',
+        settings('classPrefix') + '-node-image');
+      image.setAttributeNS(null, 'clip-path',
+        'url(' + absolutePath + '#' + clipPathId + ')');
+      image.setAttributeNS(null, 'pointer-events', 'none');
+      image.setAttributeNS('http://www.w3.org/1999/xlink', 'href',
+        node.image.url);
+      group.appendChild(def);
+      group.appendChild(image);
+    }
+  }
+
+  var register = function(name,drawShape,drawBorder) {
+    sigma.canvas.nodes[name] = function(node, context, settings) {
+      var args = arguments,
+          prefix = settings('prefix') || '',
+          size = node[prefix + 'size'],
+          color = node.color || settings('defaultNodeColor'),
+          borderColor = node.borderColor || color,
+          x = node[prefix + 'x'],
+          y = node[prefix + 'y'];
+
+      context.save();
+
+      if(drawShape) {
+        drawShape(node,x,y,size,color,context);
+      }
+
+      if(drawBorder) {
+        drawBorder(node,x,y,size,borderColor,context);
+      }
+
+      drawImage(node,x,y,size,context);
+
+      context.restore();
+    };
+
+    sigma.svg.nodes[name] = {
+      create: function(node, settings) {
+        var group = document.createElementNS(settings('xmlns'), 'g'),
+        circle = document.createElementNS(settings('xmlns'), 'circle');
+
+        group.setAttributeNS(null, 'class',
+          settings('classPrefix') + '-node-group');
+        group.setAttributeNS(null, 'data-node-id', node.id);
+        // Defining the node's circle
+        circle.setAttributeNS(null, 'data-node-id', node.id);
+        circle.setAttributeNS(null, 'class',
+          settings('classPrefix') + '-node');
+        circle.setAttributeNS(null, 'fill',
+          node.color || settings('defaultNodeColor'));
+
+        group.appendChild(circle);
+        drawSVGImage(node, group, settings);
+        return group;
+      },
+      update: function(node, group, settings) {
+        var classPrefix = settings('classPrefix'),
+          clip = node.image.clip || 1,
+          // 1 is arbitrary, anyway only the ratio counts
+          ih = node.image.h || 1,
+          iw = node.image.w || 1,
+          prefix = settings('prefix') || '',
+          scale = node.image.scale || 1,
+          size = node[prefix + 'size'],
+          x = node[prefix + 'x'],
+          y = node[prefix + 'y'];
+
+          var r = scale * size,
+          xratio = (iw<ih) ? (iw/ih) : 1,
+          yratio = (ih<iw) ? (ih/iw) : 1;
+
+        for(var i = 0, childNodes = group.childNodes; i < childNodes.length; i ++) {
+          var className = childNodes[i].getAttribute('class');
+
+          switch (className) {
+            case classPrefix + '-node':
+              childNodes[i].setAttributeNS(null, 'cx', x);
+              childNodes[i].setAttributeNS(null, 'cy', y);
+              childNodes[i].setAttributeNS(null, 'r', size);
+
+              // // Updating only if not freestyle
+              if (!settings('freeStyle')) {
+                childNodes[i].setAttributeNS(
+                  null,
+                  'fill',
+                  node.color || settings('defaultNodeColor'));
+              }
+              break;
+            case classPrefix + '-node-image':
+              childNodes[i].setAttributeNS(null, 'x',
+                x+Math.sin(-3.142/4)*r*xratio);
+              childNodes[i].setAttributeNS(null, 'y',
+                y-Math.cos(-3.142/4)*r*yratio);
+              childNodes[i].setAttributeNS(null, 'width',
+                r*xratio*2*Math.sin(-3.142/4)*(-1));
+              childNodes[i].setAttributeNS(null, 'height',
+                r*yratio*2*Math.cos(-3.142/4));
+              break;
+            default:
+              // no class name, must be the clip-path
+              var clipPath = childNodes[i].firstChild;
+              if (clipPath != null) {
+                var clipPathId = classPrefix + '-clip-path-' + node.id;
+                if (clipPath.getAttribute('id') === clipPathId) {
+                  clipPath.firstChild.setAttributeNS(null, 'cx', x);
+                  clipPath.firstChild.setAttributeNS(null, 'cy', y);
+                  clipPath.firstChild.setAttributeNS(null, 'r',
+                    clip * size);
+                }
+              }
+              break;
+          }
+        }
+
+        // showing
+        group.style.display = '';
+      }
+    }
+  }
+
+  ShapeLibrary.enumerate().forEach(function(shape) {
+    register(shape.name,shape.drawShape,shape.drawBorder);
+  });
+
+  /**
+   * Exporting
+   * ----------
+   */
+  this.CustomShapes = {
+
+    // Functions
+    init: initPlugin,
+    // add pre-cache images
+
+    // Version
+    version: '0.1'
+  };
+
+
+
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeDots/README.md

@@ -0,0 +1,38 @@
+sigma.renderers.edgeDots
+========================
+
+Plugin developed by [Joakim af Sandeberg](https://github.com/jotunacorn).
+
+Contact: joakim.afs+github@gmail.com
+
+---
+## General
+This plugin adds the option to show colored dots near the source and target of an edge when using the canvas renderer.
+
+See the following [example](../../examples/plugin-edgeDots.html) for full usage.
+
+To use it, include all .js files under this folder.
+
+## Edges
+
+This plugin extends Sigma.js canvas edges:
+ * **sourceDotColor**
+   * The value to use as color for the source dot. If left undefined there will be no dot at the source.
+   * type: *string*
+   * default value: undefined
+ * **targetDotColor**
+   * The value to use as color for the target dot. If left undefined there will be no dot at the target.
+   * type: *string*
+   * default value: undefined
+ * **dotOffset**
+   * The value which define the distance between the dots and the nodes, relative to the node size.
+   * type: *number*
+   * default value: 3
+ * **dotSize**
+   * The value which define the size of the dot relative to the edge.
+   * type: *number*
+   * default value: 1
+## Renderers
+
+This plugin modifies the sigma.canvas.edges.curve and sigma.canvas.edges.curvedArrow
+

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeDots/sigma.canvas.edges.dotCurve.js

@@ -0,0 +1,114 @@
+;(function() {
+    'use strict';
+
+    sigma.utils.pkg('sigma.canvas.edges');
+
+    /**
+     * This edge renderer will display edges as curves.
+     *
+     * @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.dotCurve = function(edge, source, target, context, settings) {
+        var color = edge.color,
+            prefix = settings('prefix') || '',
+            size = edge[prefix + 'size'] || 1,
+            edgeColor = settings('edgeColor'),
+            defaultNodeColor = settings('defaultNodeColor'),
+            defaultEdgeColor = settings('defaultEdgeColor'),
+            cp = {},
+            sSize = source[prefix + 'size'],
+            sX = source[prefix + 'x'],
+            sY = source[prefix + 'y'],
+            tX = target[prefix + 'x'],
+            tY = target[prefix + 'y'];
+
+        cp = (source.id === target.id) ?
+            sigma.utils.getSelfLoopControlPoints(sX, sY, sSize) :
+            sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+
+        if (!color)
+            switch (edgeColor) {
+                case 'source':
+                    color = source.color || defaultNodeColor;
+                    break;
+                case 'target':
+                    color = target.color || defaultNodeColor;
+                    break;
+                default:
+                    color = defaultEdgeColor;
+                    break;
+            }
+
+        context.strokeStyle = color;
+        context.lineWidth = size;
+        context.beginPath();
+        context.moveTo(sX, sY);
+        if (source.id === target.id) {
+            context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+        } else {
+            context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+        }
+        context.stroke();
+        if(edge.sourceDotColor != undefined || edge.targetDotColor != undefined) {
+            var dotOffset = edge.dotOffset || 3;
+            var dotSize = edge.dotSize || 1;
+            dotSize = size*dotSize;
+            dotOffset = dotOffset*sSize;
+            if(edge.sourceDotColor != undefined) {
+                createDot(context, sX, sY, cp, tX, tY, dotOffset, dotSize, edge.sourceDotColor);
+            }
+            if (edge.targetDotColor != undefined){
+                createDot(context, tX, tY, cp, sX, sY, dotOffset, dotSize, edge.targetDotColor);
+            }
+        }
+    };
+
+    function createDot(context, sX, sY, cp, tX, tY, offset, size, color) {
+        context.beginPath();
+        context.fillStyle = color;
+        var dot = getPointOnBezier(sX, sY, cp.x, cp.y, tX, tY,
+            offset);
+        context.arc(dot.x, dot.y, size * 3, 0, 2 * Math.PI,
+            false);
+        context.fill();
+    }
+
+    function getQBezierValue(t, p1, p2, p3) {
+        var iT = 1 - t;
+        return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
+    }
+
+    function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
+        return {
+            x:getQBezierValue(position, startX, cpX, endX),
+            y:getQBezierValue(position, startY, cpY, endY)
+        };
+    }
+    function getDistanceBetweenPoints(x1, y1, x2, y2){
+        return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
+    }
+    /* Function to get a point on a bezier curve a certain distance away from
+     its source. Needed since the position on a beziercurve is given to the
+     formula as a percentage (t).*/
+    function getPointOnBezier(startX, startY, cpX, cpY, endX, endY, distance){
+        var bestT = 0;
+        var bestAccuracy = 1000;
+        var stepSize = 0.001;
+        for(var t = 0; t<1; t+=stepSize){
+            var currentPoint = getQuadraticCurvePoint(startX, startY, cpX, cpY,
+                endX, endY, t);
+            var currentDistance = getDistanceBetweenPoints(startX, startY,
+                currentPoint.x, currentPoint.y);
+            if(Math.abs(currentDistance-distance) < bestAccuracy){
+                bestAccuracy = Math.abs(currentDistance-distance);
+                bestT = t;
+            }
+        }
+        return getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, bestT);
+    }
+
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeDots/sigma.canvas.edges.dotCurvedArrow.js

@@ -0,0 +1,145 @@
+;(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.dotCurvedArrow =
+    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,
+        count = edge.count || 0,
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        aSize = Math.max(size * 2.5, settings('minArrowSize')),
+        d,
+        aX,
+        aY,
+        vX,
+        vY;
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, tSize, count) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+    if (source.id === target.id) {
+      d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+      aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+      aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x1) * aSize / d;
+      vY = (tY - cp.y1) * aSize / d;
+    }
+    else {
+      d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+      aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+      aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x) * aSize / d;
+      vY = (tY - cp.y) * aSize / d;
+    }
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+    }
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+      if(edge.sourceDotColor != undefined || edge.targetDotColor != undefined) {
+        var dotOffset = edge.dotOffset || 3;
+        var dotSize = edge.dotSize || 1;
+        dotSize = size*dotSize;
+        dotOffset = dotOffset*tSize;
+        if(edge.sourceDotColor != undefined) {
+          createDot(context, sX, sY, cp, tX, tY, dotOffset, dotSize, edge.sourceDotColor);
+        }
+        if (edge.targetDotColor != undefined){
+          createDot(context, tX, tY, cp, sX, sY, dotOffset, dotSize, edge.targetDotColor);
+        }
+      }
+    };
+
+  function createDot(context, sX, sY, cp, tX, tY, offset, size, color) {
+    context.beginPath();
+    context.fillStyle = color;
+    var dot = getPointOnBezier(sX, sY, cp.x, cp.y, tX, tY,
+        offset);
+    context.arc(dot.x, dot.y, size * 3, 0, 2 * Math.PI,
+        false);
+    context.fill();
+  }
+
+  function getQBezierValue(t, p1, p2, p3) {
+    var iT = 1 - t;
+    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
+  }
+
+  function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
+    return {
+      x:getQBezierValue(position, startX, cpX, endX),
+      y:getQBezierValue(position, startY, cpY, endY)
+    };
+  }
+  function getDistanceBetweenPoints(x1, y1, x2, y2){
+    return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
+  }
+  /* Function to get a point on a bezier curve a certain distance away from
+   its source. Needed since the position on a beziercurve is given to the
+   formula as a percentage (t).*/
+  function getPointOnBezier(startX, startY, cpX, cpY, endX, endY, distance){
+    var bestT = 0;
+    var bestAccuracy = 1000;
+    var stepSize = 0.001;
+    for(var t = 0; t<1; t+=stepSize){
+      var currentPoint = getQuadraticCurvePoint(startX, startY, cpX, cpY,
+          endX, endY, t);
+      var currentDistance = getDistanceBetweenPoints(startX, startY,
+          currentPoint.x, currentPoint.y);
+      if(Math.abs(currentDistance-distance) < bestAccuracy){
+        bestAccuracy = Math.abs(currentDistance-distance);
+        bestT = t;
+      }
+    }
+    return getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, bestT);
+  }
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeLabels/README.md

@@ -0,0 +1,76 @@
+sigma.renderers.edgeLabels
+==================
+
+Plugin developed by [Sébastien Heymann](https://github.com/sheymann) for [Linkurious](https://github.com/Linkurious).
+
+Contact: seb@linkurio.us
+
+---
+## General
+This plugin displays edge labels.
+
+See the following [example](../../examples/edge-renderers.html) for full usage.
+
+To use it, include all .js files under this folder.
+
+## Settings
+
+This plugin extends Sigma.js settings in a transparent way to render edge labels, see [settings.js](settings.js):
+
+ * **defaultEdgeLabelColor**
+   * type: *string*
+   * default value: `#000`
+
+ * **defaultEdgeLabelActiveColor**
+   * type: *string*
+   * default value: `rgb(236, 81, 72)`
+
+ * **defaultEdgeLabelSize**
+   * type: *number*
+   * default value: `10`
+
+ * **edgeLabelSize**
+   * Indicates how to choose the edge labels size.
+   * type: *string*
+   * default value: `fixed`
+   * available values: `fixed`, `proportional`
+
+ * **edgeLabelSizePowRatio**
+   * The opposite power ratio between the font size of the label and the edge size.
+   * type: *number*
+   * default value: `0.8`
+
+````javascript
+// Formula:
+Math.pow(size, - 1 / edgeLabelSizePowRatio) * size * defaultEdgeLabelSize
+````
+
+ * **edgeLabelThreshold**
+   * The minimum size an edge must have to see its label displayed.
+   * type: *number*
+   * default value: `1`
+
+The plugin also forces `drawEdgeLabels` to `true`.
+
+The default values provided by the plugin may be overridden when instantiating Sigma, e.g.:
+
+````javascript
+var sigInst = new sigma({
+  container: 'graph-container',
+  settings: {
+    edgeLabelSize: 'proportional'
+  }
+});
+````
+
+## Renderers
+
+This plugin provides the following edge label renderers:
+- `line` (default)
+- `arrow` (use default)
+- `curve`
+- `curvedArrow`
+
+## Compatibility
+
+This plugin is compatible with `sigma.plugins.activeState`.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeLabels/settings.js

@@ -0,0 +1,41 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize package:
+  sigma.utils.pkg('sigma.settings');
+
+  /**
+  * Extended sigma settings for sigma.renderers.edgeLabels.
+  */
+  var settings = {
+    /**
+     * RENDERERS SETTINGS:
+     * *******************
+     */
+    // {string}
+    defaultEdgeLabelColor: '#000',
+    // {string}
+    defaultEdgeLabelActiveColor: '#000',
+    // {string}
+    defaultEdgeLabelSize: 10,
+    // {string} Indicates how to choose the edge labels size. Available values:
+    //          "fixed", "proportional"
+    edgeLabelSize: 'fixed',
+    // {string} The opposite power ratio between the font size of the label and
+    // the edge size:
+    // Math.pow(size, -1 / edgeLabelSizePowRatio) * size * defaultEdgeLabelSize
+    edgeLabelSizePowRatio: 1,
+    // {number} The minimum size an edge must have to see its label displayed.
+    edgeLabelThreshold: 1,
+  };
+
+  // Export the previously designed settings:
+  sigma.settings = sigma.utils.extend(sigma.settings || {}, settings);
+
+  // Override default settings:
+  sigma.settings.drawEdgeLabels = true;
+
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curve.js

@@ -0,0 +1,112 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.edges.labels');
+
+  /**
+   * This label renderer will just display the label on the curve of the edge.
+   * The label is rendered at half distance of the edge extremities, and is
+   * always oriented from left to right on the top side of the curve.
+   *
+   * @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.labels.curve =
+    function(edge, source, target, context, settings) {
+    if (typeof edge.label !== 'string')
+      return;
+
+    var prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1;
+
+    if (size < settings('edgeLabelThreshold'))
+      return;
+
+    var fontSize,
+        sSize = source[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        dX = tX - sX,
+        dY = tY - sY,
+        sign = (sX < tX) ? 1 : -1,
+        cp = {},
+        c,
+        angle,
+        t = 0.5;  //length of the curve
+
+    if (source.id === target.id) {
+      cp = sigma.utils.getSelfLoopControlPoints(sX, sY, sSize);
+      c = sigma.utils.getPointOnBezierCurve(
+        t, sX, sY, tX, tY, cp.x1, cp.y1, cp.x2, cp.y2
+      );
+      angle = Math.atan2(1, 1); // 45°
+    } else {
+      cp = sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+      c = sigma.utils.getPointOnQuadraticCurve(t, sX, sY, tX, tY, cp.x, cp.y);
+      angle = Math.atan2(dY * sign, dX * sign);
+    }
+
+    // The font size is sublineraly proportional to the edge size, in order to
+    // avoid very large labels on screen.
+    // This is achieved by f(x) = x * x^(-1/ a), where 'x' is the size and 'a'
+    // is the edgeLabelSizePowRatio. Notice that f(1) = 1.
+    // The final form is:
+    // f'(x) = b * x * x^(-1 / a), thus f'(1) = b. Application:
+    // fontSize = defaultEdgeLabelSize if edgeLabelSizePowRatio = 1
+    fontSize = (settings('edgeLabelSize') === 'fixed') ?
+      settings('defaultEdgeLabelSize') :
+      settings('defaultEdgeLabelSize') *
+      size *
+      Math.pow(size, -1 / settings('edgeLabelSizePowRatio'));
+
+    context.save();
+
+    
+    if (edge.active) {
+      context.font = [
+        settings('activeFontStyle'),
+        fontSize + 'px',
+        settings('activeFont') || settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        settings('edgeActiveColor') === 'edge' ?
+        (edge.active_color || settings('defaultEdgeActiveColor')) :
+        settings('defaultEdgeLabelActiveColor');
+    }
+    else {
+      context.font = [
+        settings('fontStyle'),
+        fontSize + 'px',
+        settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        (settings('edgeLabelColor') === 'edge') ?
+        (edge.color || settings('defaultEdgeColor')) :
+        settings('defaultEdgeLabelColor');
+    }
+
+    context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
+
+    context.translate(c.x, c.y);
+    context.rotate(angle);
+    context.fillText(
+      edge.label,
+      0,
+      (-size / 2) - 3
+    );
+
+    context.restore();
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curvedArrow.js

@@ -0,0 +1,25 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.edges.labels');
+
+  /**
+   * This label renderer will just display the label on the curve of the edge.
+   * The label is rendered at half distance of the edge extremities, and is
+   * always oriented from left to right on the top side of the curve.
+   *
+   * @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.labels.curvedArrow =
+    function(edge, source, target, context, settings) {
+    sigma.canvas.edges.labels.curve(edge, source, target, context, settings);
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.def.js

@@ -0,0 +1,96 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.edges.labels');
+
+  /**
+   * This label renderer will just display the label on the line of the edge.
+   * The label is rendered at half distance of the edge extremities, and is
+   * always oriented from left to right on the top side of the line.
+   *
+   * @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.labels.def =
+    function(edge, source, target, context, settings) {
+    if (typeof edge.label !== 'string' || source == target)
+      return;
+
+    var prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1;
+
+    if (size < settings('edgeLabelThreshold'))
+      return;
+
+    if (0 === settings('edgeLabelSizePowRatio'))
+      throw '"edgeLabelSizePowRatio" must not be 0.';
+
+    var fontSize,
+        x = (source[prefix + 'x'] + target[prefix + 'x']) / 2,
+        y = (source[prefix + 'y'] + target[prefix + 'y']) / 2,
+        dX = target[prefix + 'x'] - source[prefix + 'x'],
+        dY = target[prefix + 'y'] - source[prefix + 'y'],
+        sign = (source[prefix + 'x'] < target[prefix + 'x']) ? 1 : -1,
+        angle = Math.atan2(dY * sign, dX * sign);
+
+    // The font size is sublineraly proportional to the edge size, in order to
+    // avoid very large labels on screen.
+    // This is achieved by f(x) = x * x^(-1/ a), where 'x' is the size and 'a'
+    // is the edgeLabelSizePowRatio. Notice that f(1) = 1.
+    // The final form is:
+    // f'(x) = b * x * x^(-1 / a), thus f'(1) = b. Application:
+    // fontSize = defaultEdgeLabelSize if edgeLabelSizePowRatio = 1
+    fontSize = (settings('edgeLabelSize') === 'fixed') ?
+      settings('defaultEdgeLabelSize') :
+      settings('defaultEdgeLabelSize') *
+      size *
+      Math.pow(size, -1 / settings('edgeLabelSizePowRatio'));
+
+    context.save();
+
+    if (edge.active) {
+      context.font = [
+        settings('activeFontStyle'),
+        fontSize + 'px',
+        settings('activeFont') || settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        settings('edgeActiveColor') === 'edge' ?
+        (edge.active_color || settings('defaultEdgeActiveColor')) :
+        settings('defaultEdgeLabelActiveColor');
+    }
+    else {
+      context.font = [
+        settings('fontStyle'),
+        fontSize + 'px',
+        settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        (settings('edgeLabelColor') === 'edge') ?
+        (edge.color || settings('defaultEdgeColor')) :
+        settings('defaultEdgeLabelColor');
+    }
+
+    context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
+
+    context.translate(x, y);
+    context.rotate(angle);
+    context.fillText(
+      edge.label,
+      0,
+      (-size / 2) - 3
+    );
+
+    context.restore();
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/README.md

@@ -0,0 +1,31 @@
+sigma.renderers.edgeLabels
+==================
+
+Plugin developed by [Jack Miner](https://github.com/3ch01c).
+
+Contact: 3ch01c@gmail.com
+
+---
+## General
+This plugin allows visualizing multiple parallel edges.
+
+See the following [example](../../examples/parallel-edges.html) for full usage.
+
+To use it, include all .js files under this folder.
+
+## Edges
+
+This plugin extends Sigma.js edges:
+
+ * **count**
+   * Represents the index of the edge in the set of parallel edges. Inversely proportional to the amplitude of the vertex of the edge curve.
+   * type: *number*
+   * default value: `0`
+
+## Renderers
+
+This plugin modifies
+
+## Utils
+
+This plugin modifies functions `sigma.utils.getQuadraticControlPoint` and `sigma.utils.getSelfLoopControlPoints` with an optional amplitude modifier parameters.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/sigma.canvas.edgehovers.curve.js

@@ -0,0 +1,65 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.curve =
+    function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+        count = edge.count || 0,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        sSize = source[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'];
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, sSize, count) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+    }
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/sigma.canvas.edgehovers.curvedArrow.js

@@ -0,0 +1,97 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.curvedArrow =
+    function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+        count = edge.count || 0,
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        d,
+        aSize,
+        aX,
+        aY,
+        vX,
+        vY;
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, tSize, count) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+    if (source.id === target.id) {
+      d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+      aSize = size * 2.5;
+      aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+      aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x1) * aSize / d;
+      vY = (tY - cp.y1) * aSize / d;
+    }
+    else {
+      d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+      aSize = size * 2.5;
+      aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+      aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x) * aSize / d;
+      vY = (tY - cp.y) * aSize / d;
+    }
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+    }
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/sigma.canvas.edges.curve.js

@@ -0,0 +1,58 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This edge renderer will display edges as curves.
+   *
+   * @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.curve = function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        count = edge.count || 0,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        sSize = source[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'];
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, sSize, count) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+    }
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/sigma.canvas.edges.curvedArrow.js

@@ -0,0 +1,89 @@
+;(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.curvedArrow =
+    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,
+        count = edge.count || 0,
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        aSize = Math.max(size * 2.5, settings('minArrowSize')),
+        d,
+        aX,
+        aY,
+        vX,
+        vY;
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, tSize, count) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+    if (source.id === target.id) {
+      d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+      aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+      aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x1) * aSize / d;
+      vY = (tY - cp.y1) * aSize / d;
+    }
+    else {
+      d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+      aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+      aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x) * aSize / d;
+      vY = (tY - cp.y) * aSize / d;
+    }
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+    }
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/sigma.canvas.edges.labels.curve.js

@@ -0,0 +1,112 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.edges.labels');
+
+  /**
+   * This label renderer will just display the label on the curve of the edge.
+   * The label is rendered at half distance of the edge extremities, and is
+   * always oriented from left to right on the top side of the curve.
+   *
+   * @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.labels.curve =
+    function(edge, source, target, context, settings) {
+    if (typeof edge.label !== 'string')
+      return;
+
+    var prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1;
+
+    if (size < settings('edgeLabelThreshold'))
+      return;
+
+    var fontSize,
+        sSize = source[prefix + 'size'],
+        count = edge.count || 0,
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        dX = tX - sX,
+        dY = tY - sY,
+        sign = (sX < tX) ? 1 : -1,
+        cp = {},
+        c,
+        angle,
+        t = 0.5;  //length of the curve
+
+    if (source.id === target.id) {
+      cp = sigma.utils.getSelfLoopControlPoints(sX, sY, sSize, count);
+      c = sigma.utils.getPointOnBezierCurve(
+        t, sX, sY, tX, tY, cp.x1, cp.y1, cp.x2, cp.y2
+      );
+      angle = Math.atan2(1, 1); // 45°
+    } else {
+      cp = sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+      c = sigma.utils.getPointOnQuadraticCurve(t, sX, sY, tX, tY, cp.x, cp.y);
+      angle = Math.atan2(dY * sign, dX * sign);
+    }
+
+    // The font size is sublineraly proportional to the edge size, in order to
+    // avoid very large labels on screen.
+    // This is achieved by f(x) = x * x^(-1/ a), where 'x' is the size and 'a'
+    // is the edgeLabelSizePowRatio. Notice that f(1) = 1.
+    // The final form is:
+    // f'(x) = b * x * x^(-1 / a), thus f'(1) = b. Application:
+    // fontSize = defaultEdgeLabelSize if edgeLabelSizePowRatio = 1
+    fontSize = (settings('edgeLabelSize') === 'fixed') ?
+      settings('defaultEdgeLabelSize') :
+      settings('defaultEdgeLabelSize') *
+      size *
+      Math.pow(size, -1 / settings('edgeLabelSizePowRatio'));
+
+    context.save();
+
+
+    if (edge.active) {
+      context.font = [
+        settings('activeFontStyle'),
+        fontSize + 'px',
+        settings('activeFont') || settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        settings('edgeActiveColor') === 'edge' ?
+        (edge.active_color || settings('defaultEdgeActiveColor')) :
+        settings('defaultEdgeLabelActiveColor');
+    }
+    else {
+      context.font = [
+        settings('fontStyle'),
+        fontSize + 'px',
+        settings('font')
+      ].join(' ');
+
+      context.fillStyle =
+        (settings('edgeLabelColor') === 'edge') ?
+        (edge.color || settings('defaultEdgeColor')) :
+        settings('defaultEdgeLabelColor');
+    }
+
+    context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
+    context.translate(c.x, c.y);
+    context.rotate(angle);
+    context.fillText(
+      edge.label,
+      0,
+      (-size / 2) - 3
+    );
+
+    context.restore();
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.parallelEdges/utils.js

@@ -0,0 +1,50 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  var _root = this;
+
+  // Initialize packages:
+  sigma.utils = sigma.utils || {};
+
+  /**
+   * Return the control point coordinates for a quadratic bezier curve.
+   *
+   * @param  {number} x1  The X coordinate of the start point.
+   * @param  {number} y1  The Y coordinate of the start point.
+   * @param  {number} x2  The X coordinate of the end point.
+   * @param  {number} y2  The Y coordinate of the end point.
+   * @param  {number} a   Modifier for the amplitude of the curve.
+   * @return {x,y}        The control point coordinates.
+   */
+  sigma.utils.getQuadraticControlPoint = function(x1, y1, x2, y2, a) {
+    a = a || 0;
+    return {
+      x: (x1 + x2) / 2 + (y2 - y1) / (60 / (15 + a)),
+      y: (y1 + y2) / 2 + (x1 - x2) / (60 / (15 + a))
+    };
+  };
+
+  /**
+   * Return the coordinates of the two control points for a self loop (i.e.
+   * where the start point is also the end point) computed as a cubic bezier
+   * curve.
+   *
+   * @param  {number} x    The X coordinate of the node.
+   * @param  {number} y    The Y coordinate of the node.
+   * @param  {number} size The node size.
+   * @param  {number} a    Modifier to the loop size.
+   * @return {x1,y1,x2,y2} The coordinates of the two control points.
+   */
+  sigma.utils.getSelfLoopControlPoints = function(x , y, size, a) {
+    a = a || 0;
+    return {
+      x1: x - (size + a) * 7,
+      y1: y,
+      x2: x,
+      y2: y + (size + a) * 7
+    };
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.snapshot/README.md

@@ -0,0 +1,36 @@
+sigma.renderers.snapshot
+========================
+
+Plugin by [Guillaume Plique](https://github.com/Yomguithereal).
+
+---
+
+This plugin makes the retrieval of an image version of the graph rendered with canvas or webgl as easy as a stroll in a park.
+
+*Basic usage*
+
+```js
+// Retrieving a dataUrl of the rendered graph
+var dataUrl = myRenderer.snapshot();
+
+// Download the rendered graph as an image
+myRenderer.snapshot({download: true});
+```
+
+*Complex usage*
+
+```js
+myRenderer.snapshot({
+  format: 'jpg',
+  background: 'white',
+  labels: false
+});
+```
+
+*Parameters*
+
+* **format** *?string* [`png`]: file format of the image. Supported: `png`, `jpg`, `gif`, `tiff`.
+* **background** *?string*: whether you want to specify a background color for the snapshot. Transparent if none specified.
+* **labels** *?boolean* [`true`] : do we want the labels on screen to be displayed on the snapshot?
+* **download** *?boolean* [`false`] : whether you want the graph image to be downloaded by the browser.
+* **filename** *?string* [`graph.png`] : full filename for the file to download.

src/main/java/net/jrtechs/www/client/src/plugins/sigma.renderers.snapshot/sigma.renderers.snapshot.js

@@ -0,0 +1,122 @@
+;(function(undefined) {
+
+  /**
+   * Sigma Renderer Snapshot Utility
+   * ================================
+   *
+   * The aim of this plugin is to enable users to retrieve a static image
+   * of the graph being rendered.
+   *
+   * Author: Guillaume Plique (Yomguithereal)
+   * Version: 0.0.1
+   */
+
+  // Terminating if sigma were not to be found
+  if (typeof sigma === 'undefined')
+    throw 'sigma.renderers.snapshot: sigma not in scope.';
+
+  // Constants
+  var CONTEXTS = ['scene', 'edges', 'nodes', 'labels'],
+      TYPES = {
+        png: 'image/png',
+        jpg: 'image/jpeg',
+        gif: 'image/gif',
+        tiff: 'image/tiff'
+      };
+
+  // Utilities
+  function download(dataUrl, extension, filename) {
+
+    // Anchor
+    var anchor = document.createElement('a');
+    anchor.setAttribute('href', dataUrl);
+    anchor.setAttribute('download', filename || 'graph.' + extension);
+
+    // Click event
+    var event = document.createEvent('MouseEvent');
+    event.initMouseEvent('click', true, false, window, 0, 0, 0 ,0, 0,
+      false, false, false, false, 0, null);
+
+    anchor.dispatchEvent(event);
+    delete anchor;
+  }
+
+  // Main function
+  function snapshot(params) {
+    params = params || {};
+
+    // Enforcing
+    if (params.format && !(params.format in TYPES))
+      throw Error('sigma.renderers.snaphot: unsupported format "' +
+                  params.format + '".');
+
+    var self = this,
+        webgl = this instanceof sigma.renderers.webgl,
+        doneContexts = [];
+
+    // Creating a false canvas where we'll merge the other
+    var merged = document.createElement('canvas'),
+        mergedContext = merged.getContext('2d'),
+        sized = false;
+
+    // Iterating through context
+    CONTEXTS.forEach(function(name) {
+      if (!self.contexts[name])
+        return;
+
+      if (params.labels === false && name === 'labels')
+        return;
+
+      var canvas = self.domElements[name] || self.domElements['scene'],
+          context = self.contexts[name];
+
+      if (~doneContexts.indexOf(context))
+        return;
+
+      if (!sized) {
+        merged.width = webgl && context instanceof WebGLRenderingContext ?
+         canvas.width / 2 :
+         canvas.width;
+        merged.height = webgl && context instanceof WebGLRenderingContext ?
+          canvas.height / 2 :
+          canvas.height
+        sized = true;
+
+        // Do we want a background color?
+        if (params.background) {
+          mergedContext.rect(0, 0, merged.width, merged.height);
+          mergedContext.fillStyle = params.background;
+          mergedContext.fill();
+        }
+      }
+
+      if (context instanceof WebGLRenderingContext)
+        mergedContext.drawImage(canvas, 0, 0,
+          canvas.width / 2, canvas.height / 2);
+      else
+        mergedContext.drawImage(canvas, 0, 0);
+
+      doneContexts.push(context);
+    });
+
+    var dataUrl = merged.toDataURL(TYPES[params.format || 'png']);
+
+    if (params.download)
+      download(
+        dataUrl,
+        params.format || 'png',
+        params.filename
+      );
+
+    // Cleaning
+    delete mergedContext;
+    delete merged;
+    delete doneContexts;
+
+    return dataUrl;
+  }
+
+  // Extending canvas and webl renderers
+  sigma.renderers.canvas.prototype.snapshot = snapshot;
+  sigma.renderers.webgl.prototype.snapshot = snapshot;
+}).call(this);

src/main/java/net/jrtechs/www/client/src/plugins/sigma.statistics.HITS/sigma.statistics.HITS.js

@@ -0,0 +1,154 @@
+/**
+* This plugin computes HITS statistics (Authority and Hub measures) for each node of the graph.
+* It adds to the graph model a method called "HITS".
+*
+* Author: Mehdi El Fadil, Mango Information Systems
+* License: This plugin for sigma.js follows the same licensing terms as sigma.js library.
+* 
+* This implementation is based on the original paper J. Kleinberg, Authoritative Sources in a Hyperlinked Environment (http://www.cs.cornell.edu/home/kleinber/auth.pdf), and is inspired by implementation in Gephi software (Patick J. McSweeney <pjmcswee@syr.edu>, Sebastien Heymann <seb@gephi.org>, Dual-licensed under GPL v3 and CDDL)
+* https://github.com/Mango-information-systems/gephi/blob/fix-hits/modules/StatisticsPlugin/src/main/java/org/gephi/statistics/plugin/Hits.java
+* 
+* Bugs in Gephi implementation should not be found in this implementation.
+* Tests have been put in place based on a test plan used to test implementation in Gephi, cf. discussion here: https://github.com/jacomyal/sigma.js/issues/309
+* No guarantee is provided regarding the correctness of the calculations. Plugin author did not control the validity of the test scenarii.
+* 
+* Warning: tricky edge-case. Hubs and authorities for nodes without any edge are only reliable in an undirected graph calculation mode. 
+* 
+* Check the code for more information.
+*
+* Here is how to use it:
+*
+* > // directed graph
+* > var stats = s.graph.HITS()
+* > // returns an object indexed by node Id with the authority and hub measures
+* > // like { "n0": {"authority": 0.00343, "hub": 0.023975}, "n1": [...]*
+* 
+* > // undirected graph: pass 'true' as function parameter
+* > var stats = s.graph.HITS(true)
+* > // returns an object indexed by node Id with the authority and hub measures
+* > // like { "n0": {"authority": 0.00343, "hub": 0.023975}, "n1": [...]
+*/
+
+(function() {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+/**
+* This method takes a graph instance and returns authority and hub measures computed for each node. It uses the built-in
+* indexes from sigma's graph model to search in the graph.
+*
+* @param {boolean} isUndirected flag informing whether the graph is directed or not. Default false: directed graph.
+* @return {object} object indexed by node Ids, containing authority and hub measures for each node of the graph.
+*/
+
+  sigma.classes.graph.addMethod(
+    'HITS',
+    function(isUndirected) {
+      var res = {}
+      , epsilon = 0.0001
+      , hubList = []
+      , authList = []
+      , nodes = this.nodes()
+      , nodesCount = nodes.length
+      , tempRes = {}
+
+      if (!isUndirected)
+        isUndirected = false
+
+      for (var i in nodes) {
+     
+        if (isUndirected) {
+          hubList.push(nodes[i])
+          authList.push(nodes[i])
+        }
+        else {
+          if (this.degree(nodes[i].id, 'out') > 0)
+            hubList.push(nodes[i])
+            
+          if (this.degree(nodes[i].id, 'in') > 0)
+            authList.push(nodes[i])
+        }
+        
+        res[nodes[i].id] = { authority : 1, hub: 1 }
+      }
+
+      var done
+      
+      while (true) {
+        done  = true
+        var authSum = 0
+          , hubSum = 0
+        
+        for (var i in authList) {
+          
+          tempRes[authList[i].id] = {authority : 1, hub:0 }
+          
+          var connectedNodes = []
+
+          if (isUndirected)
+            connectedNodes =  this.allNeighborsIndex[authList[i].id]
+          else
+            connectedNodes =  this.inNeighborsIndex[authList[i].id]
+          
+          for (var j in connectedNodes) {
+            if (j != authList[i].id)
+              tempRes[authList[i].id].authority += res[j].hub
+          }
+          
+          authSum += tempRes[authList[i].id].authority
+          
+        }
+        
+        for (var i in hubList) {
+          
+          if (tempRes[hubList[i].id])
+            tempRes[hubList[i].id].hub = 1
+          else
+            tempRes[hubList[i].id] = {authority: 0, hub : 1 }
+          
+          var connectedNodes = []
+          
+          if (isUndirected)
+            connectedNodes =  this.allNeighborsIndex[hubList[i].id]
+          else
+            connectedNodes =  this.outNeighborsIndex[hubList[i].id]
+          
+          for (var j in connectedNodes) {
+            if (j != hubList[i].id)
+              tempRes[hubList[i].id].hub += res[j].authority
+          }
+          
+          hubSum += tempRes[hubList[i].id].hub
+          
+        }
+        
+        for (var i in authList) {
+          tempRes[authList[i].id].authority /= authSum
+          
+          if (Math.abs((tempRes[authList[i].id].authority - res[authList[i].id].authority) / res[authList[i].id].authority) >= epsilon)
+            done = false
+        }
+        
+        for (var i in hubList) {
+          tempRes[hubList[i].id].hub /= hubSum
+          
+          if (Math.abs((tempRes[hubList[i].id].hub - res[hubList[i].id].hub) / res[hubList[i].id].hub) >= epsilon)
+            done = false
+        }
+        res = tempRes
+        
+        tempRes = {}
+
+        if (done)
+          break
+        
+      }
+
+      return res
+
+    }
+  )
+
+}).call(window)

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js

@@ -0,0 +1,76 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.arrow =
+    function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        size = edge[prefix + 'size'] || 1,
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'];
+
+    size = (edge.hover) ?
+      settings('edgeHoverSizeRatio') * size : size;
+    var aSize = size * 2.5,
+        d = Math.sqrt(Math.pow(tX - sX, 2) + Math.pow(tY - sY, 2)),
+        aX = sX + (tX - sX) * (d - aSize - tSize) / d,
+        aY = sY + (tY - sY) * (d - aSize - tSize) / d,
+        vX = (tX - sX) * aSize / d,
+        vY = (tY - sY) * aSize / d;
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    context.lineTo(
+      aX,
+      aY
+    );
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edgehovers.curve.js

@@ -0,0 +1,64 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.curve =
+    function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        sSize = source[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'];
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, sSize) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+    }
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js

@@ -0,0 +1,96 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.curvedArrow =
+    function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        d,
+        aSize,
+        aX,
+        aY,
+        vX,
+        vY;
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, tSize) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+
+    if (source.id === target.id) {
+      d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+      aSize = size * 2.5;
+      aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+      aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x1) * aSize / d;
+      vY = (tY - cp.y1) * aSize / d;
+    }
+    else {
+      d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+      aSize = size * 2.5;
+      aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+      aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x) * aSize / d;
+      vY = (tY - cp.y) * aSize / d;
+    }
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+    }
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edgehovers.def.js

@@ -0,0 +1,57 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edgehovers');
+
+  /**
+   * This hover renderer will display the edge with a different color or size.
+   *
+   * @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.edgehovers.def =
+    function(edge, source, target, context, settings) {
+      var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    if (settings('edgeHoverColor') === 'edge') {
+      color = edge.hover_color || color;
+    } else {
+      color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+    }
+    size *= settings('edgeHoverSizeRatio');
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edges.arrow.js

@@ -0,0 +1,66 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This edge renderer will display edges as arrows going from the source node
+   *
+   * @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.arrow = function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        size = edge[prefix + 'size'] || 1,
+        tSize = target[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        aSize = Math.max(size * 2.5, settings('minArrowSize')),
+        d = Math.sqrt(Math.pow(tX - sX, 2) + Math.pow(tY - sY, 2)),
+        aX = sX + (tX - sX) * (d - aSize - tSize) / d,
+        aY = sY + (tY - sY) * (d - aSize - tSize) / d,
+        vX = (tX - sX) * aSize / d,
+        vY = (tY - sY) * aSize / d;
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    context.lineTo(
+      aX,
+      aY
+    );
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edges.curve.js

@@ -0,0 +1,57 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * This edge renderer will display edges as curves.
+   *
+   * @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.curve = function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor'),
+        cp = {},
+        sSize = source[prefix + 'size'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'];
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, sSize) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+    }
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js

@@ -0,0 +1,88 @@
+;(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.curvedArrow =
+    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'],
+        sX = source[prefix + 'x'],
+        sY = source[prefix + 'y'],
+        tX = target[prefix + 'x'],
+        tY = target[prefix + 'y'],
+        aSize = Math.max(size * 2.5, settings('minArrowSize')),
+        d,
+        aX,
+        aY,
+        vX,
+        vY;
+
+    cp = (source.id === target.id) ?
+      sigma.utils.getSelfLoopControlPoints(sX, sY, tSize) :
+      sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
+
+    if (source.id === target.id) {
+      d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+      aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+      aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x1) * aSize / d;
+      vY = (tY - cp.y1) * aSize / d;
+    }
+    else {
+      d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+      aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+      aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+      vX = (tX - cp.x) * aSize / d;
+      vY = (tY - cp.y) * aSize / d;
+    }
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(sX, sY);
+    if (source.id === target.id) {
+      context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+    } else {
+      context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+    }
+    context.stroke();
+
+    context.fillStyle = color;
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+    context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.edges.def.js

@@ -0,0 +1,49 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.edges');
+
+  /**
+   * The default edge renderer. It renders the edge as a simple line.
+   *
+   * @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.def = function(edge, source, target, context, settings) {
+    var color = edge.color,
+        prefix = settings('prefix') || '',
+        size = edge[prefix + 'size'] || 1,
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+    if (!color)
+      switch (edgeColor) {
+        case 'source':
+          color = source.color || defaultNodeColor;
+          break;
+        case 'target':
+          color = target.color || defaultNodeColor;
+          break;
+        default:
+          color = defaultEdgeColor;
+          break;
+      }
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    context.beginPath();
+    context.moveTo(
+      source[prefix + 'x'],
+      source[prefix + 'y']
+    );
+    context.lineTo(
+      target[prefix + 'x'],
+      target[prefix + 'y']
+    );
+    context.stroke();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.extremities.def.js

@@ -0,0 +1,38 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.extremities');
+
+  /**
+   * The default renderer for hovered edge extremities. It renders the edge
+   * extremities as hovered.
+   *
+   * @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.extremities.def =
+    function(edge, source, target, context, settings) {
+    // Source Node:
+    (
+      sigma.canvas.hovers[source.type] ||
+      sigma.canvas.hovers.def
+    ) (
+      source, context, settings
+    );
+
+    // Target Node:
+    (
+      sigma.canvas.hovers[target.type] ||
+      sigma.canvas.hovers.def
+    ) (
+      target, context, settings
+    );
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.hovers.def.js

@@ -0,0 +1,106 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.hovers');
+
+  /**
+   * This hover renderer will basically display the label with a background.
+   *
+   * @param  {object}                   node     The node object.
+   * @param  {CanvasRenderingContext2D} context  The canvas context.
+   * @param  {configurable}             settings The settings function.
+   */
+  sigma.canvas.hovers.def = function(node, context, settings) {
+    var x,
+        y,
+        w,
+        h,
+        e,
+        fontStyle = settings('hoverFontStyle') || settings('fontStyle'),
+        prefix = settings('prefix') || '',
+        size = node[prefix + 'size'],
+        fontSize = (settings('labelSize') === 'fixed') ?
+          settings('defaultLabelSize') :
+          settings('labelSizeRatio') * size;
+
+    // Label background:
+    context.font = (fontStyle ? fontStyle + ' ' : '') +
+      fontSize + 'px ' + (settings('hoverFont') || settings('font'));
+
+    context.beginPath();
+    context.fillStyle = settings('labelHoverBGColor') === 'node' ?
+      (node.color || settings('defaultNodeColor')) :
+      settings('defaultHoverLabelBGColor');
+
+    if (node.label && settings('labelHoverShadow')) {
+      context.shadowOffsetX = 0;
+      context.shadowOffsetY = 0;
+      context.shadowBlur = 8;
+      context.shadowColor = settings('labelHoverShadowColor');
+    }
+
+    if (node.label && typeof node.label === 'string') {
+      x = Math.round(node[prefix + 'x'] - fontSize / 2 - 2);
+      y = Math.round(node[prefix + 'y'] - fontSize / 2 - 2);
+      w = Math.round(
+        context.measureText(node.label).width + fontSize / 2 + size + 7
+      );
+      h = Math.round(fontSize + 4);
+      e = Math.round(fontSize / 2 + 2);
+
+      context.moveTo(x, y + e);
+      context.arcTo(x, y, x + e, y, e);
+      context.lineTo(x + w, y);
+      context.lineTo(x + w, y + h);
+      context.lineTo(x + e, y + h);
+      context.arcTo(x, y + h, x, y + h - e, e);
+      context.lineTo(x, y + e);
+
+      context.closePath();
+      context.fill();
+
+      context.shadowOffsetX = 0;
+      context.shadowOffsetY = 0;
+      context.shadowBlur = 0;
+    }
+
+    // Node border:
+    if (settings('borderSize') > 0) {
+      context.beginPath();
+      context.fillStyle = settings('nodeBorderColor') === 'node' ?
+        (node.color || settings('defaultNodeColor')) :
+        settings('defaultNodeBorderColor');
+      context.arc(
+        node[prefix + 'x'],
+        node[prefix + 'y'],
+        size + settings('borderSize'),
+        0,
+        Math.PI * 2,
+        true
+      );
+      context.closePath();
+      context.fill();
+    }
+
+    // Node:
+    var nodeRenderer = sigma.canvas.nodes[node.type] || sigma.canvas.nodes.def;
+    nodeRenderer(node, context, settings);
+
+    // Display the label:
+    if (node.label && typeof node.label === 'string') {
+      context.fillStyle = (settings('labelHoverColor') === 'node') ?
+        (node.color || settings('defaultNodeColor')) :
+        settings('defaultLabelHoverColor');
+
+      context.fillText(
+        node.label,
+        Math.round(node[prefix + 'x'] + size + 3),
+        Math.round(node[prefix + 'y'] + fontSize / 3)
+      );
+    }
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.labels.def.js

@@ -0,0 +1,44 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.canvas.labels');
+
+  /**
+   * This label renderer will just display the label on the right of the node.
+   *
+   * @param  {object}                   node     The node object.
+   * @param  {CanvasRenderingContext2D} context  The canvas context.
+   * @param  {configurable}             settings The settings function.
+   */
+  sigma.canvas.labels.def = function(node, context, settings) {
+    var fontSize,
+        prefix = settings('prefix') || '',
+        size = node[prefix + 'size'];
+
+    if (size < settings('labelThreshold'))
+      return;
+
+    if (!node.label || typeof node.label !== 'string')
+      return;
+
+    fontSize = (settings('labelSize') === 'fixed') ?
+      settings('defaultLabelSize') :
+      settings('labelSizeRatio') * size;
+
+    context.font = (settings('fontStyle') ? settings('fontStyle') + ' ' : '') +
+      fontSize + 'px ' + settings('font');
+    context.fillStyle = (settings('labelColor') === 'node') ?
+      (node.color || settings('defaultNodeColor')) :
+      settings('defaultLabelColor');
+
+    context.fillText(
+      node.label,
+      Math.round(node[prefix + 'x'] + size + 3),
+      Math.round(node[prefix + 'y'] + fontSize / 3)
+    );
+  };
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/canvas/sigma.canvas.nodes.def.js

@@ -0,0 +1,30 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.canvas.nodes');
+
+  /**
+   * The default node renderer. It renders the node as a simple disc.
+   *
+   * @param  {object}                   node     The node object.
+   * @param  {CanvasRenderingContext2D} context  The canvas context.
+   * @param  {configurable}             settings The settings function.
+   */
+  sigma.canvas.nodes.def = function(node, context, settings) {
+    var prefix = settings('prefix') || '';
+
+    context.fillStyle = node.color || settings('defaultNodeColor');
+    context.beginPath();
+    context.arc(
+      node[prefix + 'x'],
+      node[prefix + 'y'],
+      node[prefix + 'size'],
+      0,
+      Math.PI * 2,
+      true
+    );
+
+    context.closePath();
+    context.fill();
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/sigma.renderers.canvas.js

@@ -0,0 +1,442 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  if (typeof conrad === 'undefined')
+    throw 'conrad is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.renderers');
+
+  /**
+   * This function is the constructor of the canvas sigma's renderer.
+   *
+   * @param  {sigma.classes.graph}            graph    The graph to render.
+   * @param  {sigma.classes.camera}           camera   The camera.
+   * @param  {configurable}           settings The sigma instance settings
+   *                                           function.
+   * @param  {object}                 object   The options object.
+   * @return {sigma.renderers.canvas}          The renderer instance.
+   */
+  sigma.renderers.canvas = function(graph, camera, settings, options) {
+    if (typeof options !== 'object')
+      throw 'sigma.renderers.canvas: Wrong arguments.';
+
+    if (!(options.container instanceof HTMLElement))
+      throw 'Container not found.';
+
+    var k,
+        i,
+        l,
+        a,
+        fn,
+        self = this;
+
+    sigma.classes.dispatcher.extend(this);
+
+    // Initialize main attributes:
+    Object.defineProperty(this, 'conradId', {
+      value: sigma.utils.id()
+    });
+    this.graph = graph;
+    this.camera = camera;
+    this.contexts = {};
+    this.domElements = {};
+    this.options = options;
+    this.container = this.options.container;
+    this.settings = (
+        typeof options.settings === 'object' &&
+        options.settings
+      ) ?
+        settings.embedObjects(options.settings) :
+        settings;
+
+    // Node indexes:
+    this.nodesOnScreen = [];
+    this.edgesOnScreen = [];
+
+    // Conrad related attributes:
+    this.jobs = {};
+
+    // Find the prefix:
+    this.options.prefix = 'renderer' + this.conradId + ':';
+
+    // Initialize the DOM elements:
+    if (
+      !this.settings('batchEdgesDrawing')
+    ) {
+      this.initDOM('canvas', 'scene');
+      this.contexts.edges = this.contexts.scene;
+      this.contexts.nodes = this.contexts.scene;
+      this.contexts.labels = this.contexts.scene;
+    } else {
+      this.initDOM('canvas', 'edges');
+      this.initDOM('canvas', 'scene');
+      this.contexts.nodes = this.contexts.scene;
+      this.contexts.labels = this.contexts.scene;
+    }
+
+    this.initDOM('canvas', 'mouse');
+    this.contexts.hover = this.contexts.mouse;
+
+    // Initialize captors:
+    this.captors = [];
+    a = this.options.captors || [sigma.captors.mouse, sigma.captors.touch];
+    for (i = 0, l = a.length; i < l; i++) {
+      fn = typeof a[i] === 'function' ? a[i] : sigma.captors[a[i]];
+      this.captors.push(
+        new fn(
+          this.domElements.mouse,
+          this.camera,
+          this.settings
+        )
+      );
+    }
+
+    // Deal with sigma events:
+    sigma.misc.bindEvents.call(this, this.options.prefix);
+    sigma.misc.drawHovers.call(this, this.options.prefix);
+
+    this.resize(false);
+  };
+
+
+
+
+  /**
+   * This method renders the graph on the canvases.
+   *
+   * @param  {?object}                options Eventually an object of options.
+   * @return {sigma.renderers.canvas}         Returns the instance itself.
+   */
+  sigma.renderers.canvas.prototype.render = function(options) {
+    options = options || {};
+
+    var a,
+        i,
+        k,
+        l,
+        o,
+        id,
+        end,
+        job,
+        start,
+        edges,
+        renderers,
+        rendererType,
+        batchSize,
+        tempGCO,
+        index = {},
+        graph = this.graph,
+        nodes = this.graph.nodes,
+        prefix = this.options.prefix || '',
+        drawEdges = this.settings(options, 'drawEdges'),
+        drawNodes = this.settings(options, 'drawNodes'),
+        drawLabels = this.settings(options, 'drawLabels'),
+        drawEdgeLabels = this.settings(options, 'drawEdgeLabels'),
+        embedSettings = this.settings.embedObjects(options, {
+          prefix: this.options.prefix
+        });
+
+    // Call the resize function:
+    this.resize(false);
+
+    // Check the 'hideEdgesOnMove' setting:
+    if (this.settings(options, 'hideEdgesOnMove'))
+      if (this.camera.isAnimated || this.camera.isMoving)
+        drawEdges = false;
+
+    // Apply the camera's view:
+    this.camera.applyView(
+      undefined,
+      this.options.prefix,
+      {
+        width: this.width,
+        height: this.height
+      }
+    );
+
+    // Clear canvases:
+    this.clear();
+
+    // Kill running jobs:
+    for (k in this.jobs)
+      if (conrad.hasJob(k))
+        conrad.killJob(k);
+
+    // Find which nodes are on screen:
+    this.edgesOnScreen = [];
+    this.nodesOnScreen = this.camera.quadtree.area(
+      this.camera.getRectangle(this.width, this.height)
+    );
+
+    for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++)
+      index[a[i].id] = a[i];
+
+    // Draw edges:
+    // - If settings('batchEdgesDrawing') is true, the edges are displayed per
+    //   batches. If not, they are drawn in one frame.
+    if (drawEdges) {
+      // First, let's identify which edges to draw. To do this, we just keep
+      // every edges that have at least one extremity displayed according to
+      // the quadtree and the "hidden" attribute. We also do not keep hidden
+      // edges.
+      for (a = graph.edges(), i = 0, l = a.length; i < l; i++) {
+        o = a[i];
+        if (
+          (index[o.source] || index[o.target]) &&
+          (!o.hidden && !nodes(o.source).hidden && !nodes(o.target).hidden)
+        )
+          this.edgesOnScreen.push(o);
+      }
+
+      // If the "batchEdgesDrawing" settings is true, edges are batched:
+      if (this.settings(options, 'batchEdgesDrawing')) {
+        id = 'edges_' + this.conradId;
+        batchSize = embedSettings('canvasEdgesBatchSize');
+
+        edges = this.edgesOnScreen;
+        l = edges.length;
+
+        start = 0;
+        end = Math.min(edges.length, start + batchSize);
+
+        job = function() {
+          tempGCO = this.contexts.edges.globalCompositeOperation;
+          this.contexts.edges.globalCompositeOperation = 'destination-over';
+
+          renderers = sigma.canvas.edges;
+          for (i = start; i < end; i++) {
+            o = edges[i];
+            (renderers[
+              o.type || this.settings(options, 'defaultEdgeType')
+            ] || renderers.def)(
+              o,
+              graph.nodes(o.source),
+              graph.nodes(o.target),
+              this.contexts.edges,
+              embedSettings
+            );
+          }
+
+          // Draw edge labels:
+          if (drawEdgeLabels) {
+            renderers = sigma.canvas.edges.labels;
+            for (i = start; i < end; i++) {
+              o = edges[i];
+              if (!o.hidden)
+                (renderers[
+                  o.type || this.settings(options, 'defaultEdgeType')
+                ] || renderers.def)(
+                  o,
+                  graph.nodes(o.source),
+                  graph.nodes(o.target),
+                  this.contexts.labels,
+                  embedSettings
+                );
+            }
+          }
+
+          // Restore original globalCompositeOperation:
+          this.contexts.edges.globalCompositeOperation = tempGCO;
+
+          // Catch job's end:
+          if (end === edges.length) {
+            delete this.jobs[id];
+            return false;
+          }
+
+          start = end + 1;
+          end = Math.min(edges.length, start + batchSize);
+          return true;
+        };
+
+        this.jobs[id] = job;
+        conrad.addJob(id, job.bind(this));
+
+      // If not, they are drawn in one frame:
+      } else {
+        renderers = sigma.canvas.edges;
+        for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++) {
+          o = a[i];
+          (renderers[
+            o.type || this.settings(options, 'defaultEdgeType')
+          ] || renderers.def)(
+            o,
+            graph.nodes(o.source),
+            graph.nodes(o.target),
+            this.contexts.edges,
+            embedSettings
+          );
+        }
+
+        // Draw edge labels:
+        // - No batching
+        if (drawEdgeLabels) {
+          renderers = sigma.canvas.edges.labels;
+          for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++)
+            if (!a[i].hidden)
+              (renderers[
+                a[i].type || this.settings(options, 'defaultEdgeType')
+              ] || renderers.def)(
+                a[i],
+                graph.nodes(a[i].source),
+                graph.nodes(a[i].target),
+                this.contexts.labels,
+                embedSettings
+              );
+        }
+      }
+    }
+
+    // Draw nodes:
+    // - No batching
+    if (drawNodes) {
+      renderers = sigma.canvas.nodes;
+      for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++)
+        if (!a[i].hidden)
+          (renderers[
+            a[i].type || this.settings(options, 'defaultNodeType')
+          ] || renderers.def)(
+            a[i],
+            this.contexts.nodes,
+            embedSettings
+          );
+    }
+
+    // Draw labels:
+    // - No batching
+    if (drawLabels) {
+      renderers = sigma.canvas.labels;
+      for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++)
+        if (!a[i].hidden)
+          (renderers[
+            a[i].type || this.settings(options, 'defaultNodeType')
+          ] || renderers.def)(
+            a[i],
+            this.contexts.labels,
+            embedSettings
+          );
+    }
+
+    this.dispatchEvent('render');
+
+    return this;
+  };
+
+  /**
+   * This method creates a DOM element of the specified type, switches its
+   * position to "absolute", references it to the domElements attribute, and
+   * finally appends it to the container.
+   *
+   * @param  {string} tag The label tag.
+   * @param  {string} id  The id of the element (to store it in "domElements").
+   */
+  sigma.renderers.canvas.prototype.initDOM = function(tag, id) {
+    var dom = document.createElement(tag);
+
+    dom.style.position = 'absolute';
+    dom.setAttribute('class', 'sigma-' + id);
+
+    this.domElements[id] = dom;
+    this.container.appendChild(dom);
+
+    if (tag.toLowerCase() === 'canvas')
+      this.contexts[id] = dom.getContext('2d');
+  };
+
+  /**
+   * This method resizes each DOM elements in the container and stores the new
+   * dimensions. Then, it renders the graph.
+   *
+   * @param  {?number}                width  The new width of the container.
+   * @param  {?number}                height The new height of the container.
+   * @return {sigma.renderers.canvas}        Returns the instance itself.
+   */
+  sigma.renderers.canvas.prototype.resize = function(w, h) {
+    var k,
+        oldWidth = this.width,
+        oldHeight = this.height,
+        pixelRatio = sigma.utils.getPixelRatio();
+
+    if (w !== undefined && h !== undefined) {
+      this.width = w;
+      this.height = h;
+    } else {
+      this.width = this.container.offsetWidth;
+      this.height = this.container.offsetHeight;
+
+      w = this.width;
+      h = this.height;
+    }
+
+    if (oldWidth !== this.width || oldHeight !== this.height) {
+      for (k in this.domElements) {
+        this.domElements[k].style.width = w + 'px';
+        this.domElements[k].style.height = h + 'px';
+
+        if (this.domElements[k].tagName.toLowerCase() === 'canvas') {
+          this.domElements[k].setAttribute('width', (w * pixelRatio) + 'px');
+          this.domElements[k].setAttribute('height', (h * pixelRatio) + 'px');
+
+          if (pixelRatio !== 1)
+            this.contexts[k].scale(pixelRatio, pixelRatio);
+        }
+      }
+    }
+
+    return this;
+  };
+
+  /**
+   * This method clears each canvas.
+   *
+   * @return {sigma.renderers.canvas} Returns the instance itself.
+   */
+  sigma.renderers.canvas.prototype.clear = function() {
+    for (var k in this.contexts) {
+      this.contexts[k].clearRect(0, 0, this.width, this.height);
+    }
+
+    return this;
+  };
+
+  /**
+   * This method kills contexts and other attributes.
+   */
+  sigma.renderers.canvas.prototype.kill = function() {
+    var k,
+        captor;
+
+    // Kill captors:
+    while ((captor = this.captors.pop()))
+      captor.kill();
+    delete this.captors;
+
+    // Kill contexts:
+    for (k in this.domElements) {
+      this.domElements[k].parentNode.removeChild(this.domElements[k]);
+      delete this.domElements[k];
+      delete this.contexts[k];
+    }
+    delete this.domElements;
+    delete this.contexts;
+  };
+
+
+
+
+  /**
+   * The labels, nodes and edges renderers are stored in the three following
+   * objects. When an element is drawn, its type will be checked and if a
+   * renderer with the same name exists, it will be used. If not found, the
+   * default renderer will be used instead.
+   *
+   * They are stored in different files, in the "./canvas" folder.
+   */
+  sigma.utils.pkg('sigma.canvas.nodes');
+  sigma.utils.pkg('sigma.canvas.edges');
+  sigma.utils.pkg('sigma.canvas.labels');
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/sigma.renderers.def.js

@@ -0,0 +1,29 @@
+;(function(global) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.renderers');
+
+  // Check if WebGL is enabled:
+  var canvas,
+      webgl = !!global.WebGLRenderingContext;
+  if (webgl) {
+    canvas = document.createElement('canvas');
+    try {
+      webgl = !!(
+        canvas.getContext('webgl') ||
+        canvas.getContext('experimental-webgl')
+      );
+    } catch (e) {
+      webgl = false;
+    }
+  }
+
+  // Copy the good renderer:
+  sigma.renderers.def = webgl ?
+    sigma.renderers.webgl :
+    sigma.renderers.canvas;
+})(this);

src/main/java/net/jrtechs/www/client/src/renderers/sigma.renderers.svg.js

@@ -0,0 +1,479 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  if (typeof conrad === 'undefined')
+    throw 'conrad is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.renderers');
+
+  /**
+   * This function is the constructor of the svg sigma's renderer.
+   *
+   * @param  {sigma.classes.graph}            graph    The graph to render.
+   * @param  {sigma.classes.camera}           camera   The camera.
+   * @param  {configurable}           settings The sigma instance settings
+   *                                           function.
+   * @param  {object}                 object   The options object.
+   * @return {sigma.renderers.svg}             The renderer instance.
+   */
+  sigma.renderers.svg = function(graph, camera, settings, options) {
+    if (typeof options !== 'object')
+      throw 'sigma.renderers.svg: Wrong arguments.';
+
+    if (!(options.container instanceof HTMLElement))
+      throw 'Container not found.';
+
+    var i,
+        l,
+        a,
+        fn,
+        self = this;
+
+    sigma.classes.dispatcher.extend(this);
+
+    // Initialize main attributes:
+    this.graph = graph;
+    this.camera = camera;
+    this.domElements = {
+      graph: null,
+      groups: {},
+      nodes: {},
+      edges: {},
+      labels: {},
+      hovers: {}
+    };
+    this.measurementCanvas = null;
+    this.options = options;
+    this.container = this.options.container;
+    this.settings = (
+        typeof options.settings === 'object' &&
+        options.settings
+      ) ?
+        settings.embedObjects(options.settings) :
+        settings;
+
+    // Is the renderer meant to be freestyle?
+    this.settings('freeStyle', !!this.options.freeStyle);
+
+    // SVG xmlns
+    this.settings('xmlns', 'http://www.w3.org/2000/svg');
+
+    // Indexes:
+    this.nodesOnScreen = [];
+    this.edgesOnScreen = [];
+
+    // Find the prefix:
+    this.options.prefix = 'renderer' + sigma.utils.id() + ':';
+
+    // Initialize the DOM elements
+    this.initDOM('svg');
+
+    // Initialize captors:
+    this.captors = [];
+    a = this.options.captors || [sigma.captors.mouse, sigma.captors.touch];
+    for (i = 0, l = a.length; i < l; i++) {
+      fn = typeof a[i] === 'function' ? a[i] : sigma.captors[a[i]];
+      this.captors.push(
+        new fn(
+          this.domElements.graph,
+          this.camera,
+          this.settings
+        )
+      );
+    }
+
+    // Bind resize:
+    window.addEventListener('resize', function() {
+      self.resize();
+    });
+
+    // Deal with sigma events:
+    // TODO: keep an option to override the DOM events?
+    sigma.misc.bindDOMEvents.call(this, this.domElements.graph);
+    this.bindHovers(this.options.prefix);
+
+    // Resize
+    this.resize(false);
+  };
+
+  /**
+   * This method renders the graph on the svg scene.
+   *
+   * @param  {?object}                options Eventually an object of options.
+   * @return {sigma.renderers.svg}            Returns the instance itself.
+   */
+  sigma.renderers.svg.prototype.render = function(options) {
+    options = options || {};
+
+    var a,
+        i,
+        k,
+        e,
+        l,
+        o,
+        source,
+        target,
+        start,
+        edges,
+        renderers,
+        subrenderers,
+        index = {},
+        graph = this.graph,
+        nodes = this.graph.nodes,
+        prefix = this.options.prefix || '',
+        drawEdges = this.settings(options, 'drawEdges'),
+        drawNodes = this.settings(options, 'drawNodes'),
+        drawLabels = this.settings(options, 'drawLabels'),
+        embedSettings = this.settings.embedObjects(options, {
+          prefix: this.options.prefix,
+          forceLabels: this.options.forceLabels
+        });
+
+    // Check the 'hideEdgesOnMove' setting:
+    if (this.settings(options, 'hideEdgesOnMove'))
+      if (this.camera.isAnimated || this.camera.isMoving)
+        drawEdges = false;
+
+    // Apply the camera's view:
+    this.camera.applyView(
+      undefined,
+      this.options.prefix,
+      {
+        width: this.width,
+        height: this.height
+      }
+    );
+
+    // Hiding everything
+    // TODO: find a more sensible way to perform this operation
+    this.hideDOMElements(this.domElements.nodes);
+    this.hideDOMElements(this.domElements.edges);
+    this.hideDOMElements(this.domElements.labels);
+
+    // Find which nodes are on screen
+    this.edgesOnScreen = [];
+    this.nodesOnScreen = this.camera.quadtree.area(
+      this.camera.getRectangle(this.width, this.height)
+    );
+
+    // Node index
+    for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++)
+      index[a[i].id] = a[i];
+
+    // Find which edges are on screen
+    for (a = graph.edges(), i = 0, l = a.length; i < l; i++) {
+      o = a[i];
+      if (
+        (index[o.source] || index[o.target]) &&
+        (!o.hidden && !nodes(o.source).hidden && !nodes(o.target).hidden)
+      )
+        this.edgesOnScreen.push(o);
+    }
+
+    // Display nodes
+    //---------------
+    renderers = sigma.svg.nodes;
+    subrenderers = sigma.svg.labels;
+
+    //-- First we create the nodes which are not already created
+    if (drawNodes)
+      for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++) {
+        if (!a[i].hidden && !this.domElements.nodes[a[i].id]) {
+
+          // Node
+          e = (renderers[a[i].type] || renderers.def).create(
+            a[i],
+            embedSettings
+          );
+
+          this.domElements.nodes[a[i].id] = e;
+          this.domElements.groups.nodes.appendChild(e);
+
+          // Label
+          e = (subrenderers[a[i].type] || subrenderers.def).create(
+            a[i],
+            embedSettings
+          );
+
+          this.domElements.labels[a[i].id] = e;
+          this.domElements.groups.labels.appendChild(e);
+        }
+      }
+
+    //-- Second we update the nodes
+    if (drawNodes)
+      for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++) {
+
+        if (a[i].hidden)
+          continue;
+
+        // Node
+        (renderers[a[i].type] || renderers.def).update(
+          a[i],
+          this.domElements.nodes[a[i].id],
+          embedSettings
+        );
+
+        // Label
+        (subrenderers[a[i].type] || subrenderers.def).update(
+          a[i],
+          this.domElements.labels[a[i].id],
+          embedSettings
+        );
+      }
+
+    // Display edges
+    //---------------
+    renderers = sigma.svg.edges;
+
+    //-- First we create the edges which are not already created
+    if (drawEdges)
+      for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++) {
+        if (!this.domElements.edges[a[i].id]) {
+          source = nodes(a[i].source);
+          target = nodes(a[i].target);
+
+          e = (renderers[a[i].type] || renderers.def).create(
+            a[i],
+            source,
+            target,
+            embedSettings
+          );
+
+          this.domElements.edges[a[i].id] = e;
+          this.domElements.groups.edges.appendChild(e);
+        }
+       }
+
+    //-- Second we update the edges
+    if (drawEdges)
+      for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++) {
+        source = nodes(a[i].source);
+        target = nodes(a[i].target);
+
+        (renderers[a[i].type] || renderers.def).update(
+          a[i],
+          this.domElements.edges[a[i].id],
+          source,
+          target,
+          embedSettings
+        );
+       }
+
+    this.dispatchEvent('render');
+
+    return this;
+  };
+
+  /**
+   * This method creates a DOM element of the specified type, switches its
+   * position to "absolute", references it to the domElements attribute, and
+   * finally appends it to the container.
+   *
+   * @param  {string} tag The label tag.
+   * @param  {string} id  The id of the element (to store it in "domElements").
+   */
+  sigma.renderers.svg.prototype.initDOM = function(tag) {
+    var dom = document.createElementNS(this.settings('xmlns'), tag),
+        c = this.settings('classPrefix'),
+        g,
+        l,
+        i;
+
+    dom.style.position = 'absolute';
+    dom.setAttribute('class', c + '-svg');
+
+    // Setting SVG namespace
+    dom.setAttribute('xmlns', this.settings('xmlns'));
+    dom.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    dom.setAttribute('version', '1.1');
+
+    // Creating the measurement canvas
+    var canvas = document.createElement('canvas');
+    canvas.setAttribute('class', c + '-measurement-canvas');
+
+    // Appending elements
+    this.domElements.graph = this.container.appendChild(dom);
+
+    // Creating groups
+    var groups = ['edges', 'nodes', 'labels', 'hovers'];
+    for (i = 0, l = groups.length; i < l; i++) {
+      g = document.createElementNS(this.settings('xmlns'), 'g');
+
+      g.setAttributeNS(null, 'id', c + '-group-' + groups[i]);
+      g.setAttributeNS(null, 'class', c + '-group');
+
+      this.domElements.groups[groups[i]] =
+        this.domElements.graph.appendChild(g);
+    }
+
+    // Appending measurement canvas
+    this.container.appendChild(canvas);
+    this.measurementCanvas = canvas.getContext('2d');
+  };
+
+  /**
+   * This method hides a batch of SVG DOM elements.
+   *
+   * @param  {array}                  elements  An array of elements to hide.
+   * @param  {object}                 renderer  The renderer to use.
+   * @return {sigma.renderers.svg}              Returns the instance itself.
+   */
+  sigma.renderers.svg.prototype.hideDOMElements = function(elements) {
+    var o,
+        i;
+
+    for (i in elements) {
+      o = elements[i];
+      sigma.svg.utils.hide(o);
+    }
+
+    return this;
+  };
+
+  /**
+   * This method binds the hover events to the renderer.
+   *
+   * @param  {string} prefix The renderer prefix.
+   */
+  // TODO: add option about whether to display hovers or not
+  sigma.renderers.svg.prototype.bindHovers = function(prefix) {
+    var renderers = sigma.svg.hovers,
+        self = this,
+        hoveredNode;
+
+    function overNode(e) {
+      var node = e.data.node,
+          embedSettings = self.settings.embedObjects({
+            prefix: prefix
+          });
+
+      if (!embedSettings('enableHovering'))
+        return;
+
+      var hover = (renderers[node.type] || renderers.def).create(
+        node,
+        self.domElements.nodes[node.id],
+        self.measurementCanvas,
+        embedSettings
+      );
+
+      self.domElements.hovers[node.id] = hover;
+
+      // Inserting the hover in the dom
+      self.domElements.groups.hovers.appendChild(hover);
+      hoveredNode = node;
+    }
+
+    function outNode(e) {
+      var node = e.data.node,
+          embedSettings = self.settings.embedObjects({
+            prefix: prefix
+          });
+
+      if (!embedSettings('enableHovering'))
+        return;
+
+      // Deleting element
+      self.domElements.groups.hovers.removeChild(
+        self.domElements.hovers[node.id]
+      );
+      hoveredNode = null;
+      delete self.domElements.hovers[node.id];
+
+      // Reinstate
+      self.domElements.groups.nodes.appendChild(
+        self.domElements.nodes[node.id]
+      );
+    }
+
+    // OPTIMIZE: perform a real update rather than a deletion
+    function update() {
+      if (!hoveredNode)
+        return;
+
+      var embedSettings = self.settings.embedObjects({
+            prefix: prefix
+          });
+
+      // Deleting element before update
+      self.domElements.groups.hovers.removeChild(
+        self.domElements.hovers[hoveredNode.id]
+      );
+      delete self.domElements.hovers[hoveredNode.id];
+
+      var hover = (renderers[hoveredNode.type] || renderers.def).create(
+        hoveredNode,
+        self.domElements.nodes[hoveredNode.id],
+        self.measurementCanvas,
+        embedSettings
+      );
+
+      self.domElements.hovers[hoveredNode.id] = hover;
+
+      // Inserting the hover in the dom
+      self.domElements.groups.hovers.appendChild(hover);
+    }
+
+    // Binding events
+    this.bind('overNode', overNode);
+    this.bind('outNode', outNode);
+
+    // Update on render
+    this.bind('render', update);
+  };
+
+  /**
+   * This method resizes each DOM elements in the container and stores the new
+   * dimensions. Then, it renders the graph.
+   *
+   * @param  {?number}                width  The new width of the container.
+   * @param  {?number}                height The new height of the container.
+   * @return {sigma.renderers.svg}           Returns the instance itself.
+   */
+  sigma.renderers.svg.prototype.resize = function(w, h) {
+    var oldWidth = this.width,
+        oldHeight = this.height,
+        pixelRatio = 1;
+
+    if (w !== undefined && h !== undefined) {
+      this.width = w;
+      this.height = h;
+    } else {
+      this.width = this.container.offsetWidth;
+      this.height = this.container.offsetHeight;
+
+      w = this.width;
+      h = this.height;
+    }
+
+    if (oldWidth !== this.width || oldHeight !== this.height) {
+      this.domElements.graph.style.width = w + 'px';
+      this.domElements.graph.style.height = h + 'px';
+
+      if (this.domElements.graph.tagName.toLowerCase() === 'svg') {
+        this.domElements.graph.setAttribute('width', (w * pixelRatio));
+        this.domElements.graph.setAttribute('height', (h * pixelRatio));
+      }
+    }
+
+    return this;
+  };
+
+
+  /**
+   * The labels, nodes and edges renderers are stored in the three following
+   * objects. When an element is drawn, its type will be checked and if a
+   * renderer with the same name exists, it will be used. If not found, the
+   * default renderer will be used instead.
+   *
+   * They are stored in different files, in the "./svg" folder.
+   */
+  sigma.utils.pkg('sigma.svg.nodes');
+  sigma.utils.pkg('sigma.svg.edges');
+  sigma.utils.pkg('sigma.svg.labels');
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/sigma.renderers.webgl.js

@@ -0,0 +1,717 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.renderers');
+
+  /**
+   * This function is the constructor of the canvas sigma's renderer.
+   *
+   * @param  {sigma.classes.graph}            graph    The graph to render.
+   * @param  {sigma.classes.camera}           camera   The camera.
+   * @param  {configurable}           settings The sigma instance settings
+   *                                           function.
+   * @param  {object}                 object   The options object.
+   * @return {sigma.renderers.canvas}          The renderer instance.
+   */
+  sigma.renderers.webgl = function(graph, camera, settings, options) {
+    if (typeof options !== 'object')
+      throw 'sigma.renderers.webgl: Wrong arguments.';
+
+    if (!(options.container instanceof HTMLElement))
+      throw 'Container not found.';
+
+    var k,
+        i,
+        l,
+        a,
+        fn,
+        _self = this;
+
+    sigma.classes.dispatcher.extend(this);
+
+    // Conrad related attributes:
+    this.jobs = {};
+
+    Object.defineProperty(this, 'conradId', {
+      value: sigma.utils.id()
+    });
+
+    // Initialize main attributes:
+    this.graph = graph;
+    this.camera = camera;
+    this.contexts = {};
+    this.domElements = {};
+    this.options = options;
+    this.container = this.options.container;
+    this.settings = (
+        typeof options.settings === 'object' &&
+        options.settings
+      ) ?
+        settings.embedObjects(options.settings) :
+        settings;
+
+    // Find the prefix:
+    this.options.prefix = this.camera.readPrefix;
+
+    // Initialize programs hash
+    Object.defineProperty(this, 'nodePrograms', {
+      value: {}
+    });
+    Object.defineProperty(this, 'edgePrograms', {
+      value: {}
+    });
+    Object.defineProperty(this, 'nodeFloatArrays', {
+      value: {}
+    });
+    Object.defineProperty(this, 'edgeFloatArrays', {
+      value: {}
+    });
+    Object.defineProperty(this, 'edgeIndicesArrays', {
+      value: {}
+    });
+
+    // Initialize the DOM elements:
+    if (this.settings(options, 'batchEdgesDrawing')) {
+      this.initDOM('canvas', 'edges', true);
+      this.initDOM('canvas', 'nodes', true);
+    } else {
+      this.initDOM('canvas', 'scene', true);
+      this.contexts.nodes = this.contexts.scene;
+      this.contexts.edges = this.contexts.scene;
+    }
+
+    this.initDOM('canvas', 'labels');
+    this.initDOM('canvas', 'mouse');
+    this.contexts.hover = this.contexts.mouse;
+
+    // Initialize captors:
+    this.captors = [];
+    a = this.options.captors || [sigma.captors.mouse, sigma.captors.touch];
+    for (i = 0, l = a.length; i < l; i++) {
+      fn = typeof a[i] === 'function' ? a[i] : sigma.captors[a[i]];
+      this.captors.push(
+        new fn(
+          this.domElements.mouse,
+          this.camera,
+          this.settings
+        )
+      );
+    }
+
+    // Deal with sigma events:
+    sigma.misc.bindEvents.call(this, this.camera.prefix);
+    sigma.misc.drawHovers.call(this, this.camera.prefix);
+
+    this.resize();
+  };
+
+
+
+
+  /**
+   * This method will generate the nodes and edges float arrays. This step is
+   * separated from the "render" method, because to keep WebGL efficient, since
+   * all the camera and middlewares are modelised as matrices and they do not
+   * require the float arrays to be regenerated.
+   *
+   * Basically, when the user moves the camera or applies some specific linear
+   * transformations, this process step will be skipped, and the "render"
+   * method will efficiently refresh the rendering.
+   *
+   * And when the user modifies the graph colors or positions (applying a new
+   * layout or filtering the colors, for instance), this "process" step will be
+   * required to regenerate the float arrays.
+   *
+   * @return {sigma.renderers.webgl} Returns the instance itself.
+   */
+  sigma.renderers.webgl.prototype.process = function() {
+    var a,
+        i,
+        l,
+        k,
+        type,
+        renderer,
+        graph = this.graph,
+        options = sigma.utils.extend(options, this.options),
+        defaultEdgeType = this.settings(options, 'defaultEdgeType'),
+        defaultNodeType = this.settings(options, 'defaultNodeType');
+
+    // Empty float arrays:
+    for (k in this.nodeFloatArrays)
+      delete this.nodeFloatArrays[k];
+
+    for (k in this.edgeFloatArrays)
+      delete this.edgeFloatArrays[k];
+
+    for (k in this.edgeIndicesArrays)
+      delete this.edgeIndicesArrays[k];
+
+    // Sort edges and nodes per types:
+    for (a = graph.edges(), i = 0, l = a.length; i < l; i++) {
+      type = a[i].type || defaultEdgeType;
+      k = (type && sigma.webgl.edges[type]) ? type : 'def';
+
+      if (!this.edgeFloatArrays[k])
+        this.edgeFloatArrays[k] = {
+          edges: []
+        };
+
+      this.edgeFloatArrays[k].edges.push(a[i]);
+    }
+
+    for (a = graph.nodes(), i = 0, l = a.length; i < l; i++) {
+      type = a[i].type || defaultNodeType;
+      k = (type && sigma.webgl.nodes[type]) ? type : 'def';
+
+      if (!this.nodeFloatArrays[k])
+        this.nodeFloatArrays[k] = {
+          nodes: []
+        };
+
+      this.nodeFloatArrays[k].nodes.push(a[i]);
+    }
+
+    // Push edges:
+    for (k in this.edgeFloatArrays) {
+      renderer = sigma.webgl.edges[k];
+      a = this.edgeFloatArrays[k].edges;
+
+      // Creating the necessary arrays
+      this.edgeFloatArrays[k].array = new Float32Array(
+        a.length * renderer.POINTS * renderer.ATTRIBUTES
+      );
+
+      for (i = 0, l = a.length; i < l; i++) {
+
+        // Just check that the edge and both its extremities are visible:
+        if (
+          !a[i].hidden &&
+          !graph.nodes(a[i].source).hidden &&
+          !graph.nodes(a[i].target).hidden
+        )
+          renderer.addEdge(
+            a[i],
+            graph.nodes(a[i].source),
+            graph.nodes(a[i].target),
+            this.edgeFloatArrays[k].array,
+            i * renderer.POINTS * renderer.ATTRIBUTES,
+            options.prefix,
+            this.settings
+          );
+      }
+
+      if (typeof renderer.computeIndices === 'function')
+        this.edgeIndicesArrays[k] = renderer.computeIndices(
+          this.edgeFloatArrays[k].array
+        );
+    }
+
+    // Push nodes:
+    for (k in this.nodeFloatArrays) {
+      renderer = sigma.webgl.nodes[k];
+      a = this.nodeFloatArrays[k].nodes;
+
+      // Creating the necessary arrays
+      this.nodeFloatArrays[k].array = new Float32Array(
+        a.length * renderer.POINTS * renderer.ATTRIBUTES
+      );
+
+      for (i = 0, l = a.length; i < l; i++) {
+        if (!this.nodeFloatArrays[k].array)
+          this.nodeFloatArrays[k].array = new Float32Array(
+            a.length * renderer.POINTS * renderer.ATTRIBUTES
+          );
+
+        // Just check that the edge and both its extremities are visible:
+        if (
+          !a[i].hidden
+        )
+          renderer.addNode(
+            a[i],
+            this.nodeFloatArrays[k].array,
+            i * renderer.POINTS * renderer.ATTRIBUTES,
+            options.prefix,
+            this.settings
+          );
+      }
+    }
+
+    return this;
+  };
+
+
+
+
+  /**
+   * This method renders the graph. It basically calls each program (and
+   * generate them if they do not exist yet) to render nodes and edges, batched
+   * per renderer.
+   *
+   * As in the canvas renderer, it is possible to display edges, nodes and / or
+   * labels in batches, to make the whole thing way more scalable.
+   *
+   * @param  {?object}               params Eventually an object of options.
+   * @return {sigma.renderers.webgl}        Returns the instance itself.
+   */
+  sigma.renderers.webgl.prototype.render = function(params) {
+    var a,
+        i,
+        l,
+        k,
+        o,
+        program,
+        renderer,
+        self = this,
+        graph = this.graph,
+        nodesGl = this.contexts.nodes,
+        edgesGl = this.contexts.edges,
+        matrix = this.camera.getMatrix(),
+        options = sigma.utils.extend(params, this.options),
+        drawLabels = this.settings(options, 'drawLabels'),
+        drawEdges = this.settings(options, 'drawEdges'),
+        drawNodes = this.settings(options, 'drawNodes');
+
+    // Call the resize function:
+    this.resize(false);
+
+    // Check the 'hideEdgesOnMove' setting:
+    if (this.settings(options, 'hideEdgesOnMove'))
+      if (this.camera.isAnimated || this.camera.isMoving)
+        drawEdges = false;
+
+    // Clear canvases:
+    this.clear();
+
+    // Translate matrix to [width/2, height/2]:
+    matrix = sigma.utils.matrices.multiply(
+      matrix,
+      sigma.utils.matrices.translation(this.width / 2, this.height / 2)
+    );
+
+    // Kill running jobs:
+    for (k in this.jobs)
+      if (conrad.hasJob(k))
+        conrad.killJob(k);
+
+    if (drawEdges) {
+      if (this.settings(options, 'batchEdgesDrawing'))
+        (function() {
+          var a,
+              k,
+              i,
+              id,
+              job,
+              arr,
+              end,
+              start,
+              indices,
+              renderer,
+              batchSize,
+              currentProgram;
+
+          id = 'edges_' + this.conradId;
+          batchSize = this.settings(options, 'webglEdgesBatchSize');
+          a = Object.keys(this.edgeFloatArrays);
+
+          if (!a.length)
+            return;
+          i = 0;
+          renderer = sigma.webgl.edges[a[i]];
+          arr = this.edgeFloatArrays[a[i]].array;
+          indices = this.edgeIndicesArrays[a[i]];
+          start = 0;
+          end = Math.min(
+            start + batchSize * renderer.POINTS,
+            arr.length / renderer.ATTRIBUTES
+          );
+
+          job = function() {
+            // Check program:
+            if (!this.edgePrograms[a[i]])
+              this.edgePrograms[a[i]] = renderer.initProgram(edgesGl);
+
+            if (start < end) {
+              edgesGl.useProgram(this.edgePrograms[a[i]]);
+              renderer.render(
+                edgesGl,
+                this.edgePrograms[a[i]],
+                arr,
+                {
+                  settings: this.settings,
+                  matrix: matrix,
+                  width: this.width,
+                  height: this.height,
+                  ratio: this.camera.ratio,
+                  scalingRatio: this.settings(
+                    options,
+                    'webglOversamplingRatio'
+                  ),
+                  start: start,
+                  count: end - start,
+                  indicesData: indices
+                }
+              );
+            }
+
+            // Catch job's end:
+            if (
+              end >= arr.length / renderer.ATTRIBUTES &&
+              i === a.length - 1
+            ) {
+              delete this.jobs[id];
+              return false;
+            }
+
+            if (end >= arr.length / renderer.ATTRIBUTES) {
+              i++;
+              arr = this.edgeFloatArrays[a[i]].array;
+              renderer = sigma.webgl.edges[a[i]];
+              start = 0;
+              end = Math.min(
+                start + batchSize * renderer.POINTS,
+                arr.length / renderer.ATTRIBUTES
+              );
+            } else {
+              start = end;
+              end = Math.min(
+                start + batchSize * renderer.POINTS,
+                arr.length / renderer.ATTRIBUTES
+              );
+            }
+
+            return true;
+          };
+
+          this.jobs[id] = job;
+          conrad.addJob(id, job.bind(this));
+        }).call(this);
+      else {
+        for (k in this.edgeFloatArrays) {
+          renderer = sigma.webgl.edges[k];
+
+          // Check program:
+          if (!this.edgePrograms[k])
+            this.edgePrograms[k] = renderer.initProgram(edgesGl);
+
+          // Render
+          if (this.edgeFloatArrays[k]) {
+            edgesGl.useProgram(this.edgePrograms[k]);
+            renderer.render(
+              edgesGl,
+              this.edgePrograms[k],
+              this.edgeFloatArrays[k].array,
+              {
+                settings: this.settings,
+                matrix: matrix,
+                width: this.width,
+                height: this.height,
+                ratio: this.camera.ratio,
+                scalingRatio: this.settings(options, 'webglOversamplingRatio'),
+                indicesData: this.edgeIndicesArrays[k]
+              }
+            );
+          }
+        }
+      }
+    }
+
+    if (drawNodes) {
+      // Enable blending:
+      nodesGl.blendFunc(nodesGl.SRC_ALPHA, nodesGl.ONE_MINUS_SRC_ALPHA);
+      nodesGl.enable(nodesGl.BLEND);
+
+      for (k in this.nodeFloatArrays) {
+        renderer = sigma.webgl.nodes[k];
+
+        // Check program:
+        if (!this.nodePrograms[k])
+          this.nodePrograms[k] = renderer.initProgram(nodesGl);
+
+        // Render
+        if (this.nodeFloatArrays[k]) {
+          nodesGl.useProgram(this.nodePrograms[k]);
+          renderer.render(
+            nodesGl,
+            this.nodePrograms[k],
+            this.nodeFloatArrays[k].array,
+            {
+              settings: this.settings,
+              matrix: matrix,
+              width: this.width,
+              height: this.height,
+              ratio: this.camera.ratio,
+              scalingRatio: this.settings(options, 'webglOversamplingRatio')
+            }
+          );
+        }
+      }
+    }
+
+    if (drawLabels) {
+      a = this.camera.quadtree.area(
+        this.camera.getRectangle(this.width, this.height)
+      );
+
+      // Apply camera view to these nodes:
+      this.camera.applyView(
+        undefined,
+        undefined,
+        {
+          nodes: a,
+          edges: [],
+          width: this.width,
+          height: this.height
+        }
+      );
+
+      o = function(key) {
+        return self.settings({
+          prefix: self.camera.prefix
+        }, key);
+      };
+
+      for (i = 0, l = a.length; i < l; i++)
+        if (!a[i].hidden)
+          (
+            sigma.canvas.labels[
+              a[i].type ||
+              this.settings(options, 'defaultNodeType')
+            ] || sigma.canvas.labels.def
+          )(a[i], this.contexts.labels, o);
+    }
+
+    this.dispatchEvent('render');
+
+    return this;
+  };
+
+
+
+
+  /**
+   * This method creates a DOM element of the specified type, switches its
+   * position to "absolute", references it to the domElements attribute, and
+   * finally appends it to the container.
+   *
+   * @param  {string}   tag   The label tag.
+   * @param  {string}   id    The id of the element (to store it in
+   *                          "domElements").
+   * @param  {?boolean} webgl Will init the WebGL context if true.
+   */
+  sigma.renderers.webgl.prototype.initDOM = function(tag, id, webgl) {
+    var gl,
+        dom = document.createElement(tag),
+        self = this;
+
+    dom.style.position = 'absolute';
+    dom.setAttribute('class', 'sigma-' + id);
+
+    this.domElements[id] = dom;
+    this.container.appendChild(dom);
+
+    if (tag.toLowerCase() === 'canvas') {
+      this.contexts[id] = dom.getContext(webgl ? 'experimental-webgl' : '2d', {
+        preserveDrawingBuffer: true
+      });
+
+      // Adding webgl context loss listeners
+      if (webgl) {
+        dom.addEventListener('webglcontextlost', function(e) {
+          e.preventDefault();
+        }, false);
+
+        dom.addEventListener('webglcontextrestored', function(e) {
+          self.render();
+        }, false);
+      }
+    }
+  };
+
+  /**
+   * This method resizes each DOM elements in the container and stores the new
+   * dimensions. Then, it renders the graph.
+   *
+   * @param  {?number}               width  The new width of the container.
+   * @param  {?number}               height The new height of the container.
+   * @return {sigma.renderers.webgl}        Returns the instance itself.
+   */
+  sigma.renderers.webgl.prototype.resize = function(w, h) {
+    var k,
+        oldWidth = this.width,
+        oldHeight = this.height,
+        pixelRatio = sigma.utils.getPixelRatio();
+
+    if (w !== undefined && h !== undefined) {
+      this.width = w;
+      this.height = h;
+    } else {
+      this.width = this.container.offsetWidth;
+      this.height = this.container.offsetHeight;
+
+      w = this.width;
+      h = this.height;
+    }
+
+    if (oldWidth !== this.width || oldHeight !== this.height) {
+      for (k in this.domElements) {
+        this.domElements[k].style.width = w + 'px';
+        this.domElements[k].style.height = h + 'px';
+
+        if (this.domElements[k].tagName.toLowerCase() === 'canvas') {
+          // If simple 2D canvas:
+          if (this.contexts[k] && this.contexts[k].scale) {
+            this.domElements[k].setAttribute('width', (w * pixelRatio) + 'px');
+            this.domElements[k].setAttribute('height', (h * pixelRatio) + 'px');
+
+            if (pixelRatio !== 1)
+              this.contexts[k].scale(pixelRatio, pixelRatio);
+          } else {
+            this.domElements[k].setAttribute(
+              'width',
+              (w * this.settings('webglOversamplingRatio')) + 'px'
+            );
+            this.domElements[k].setAttribute(
+              'height',
+              (h * this.settings('webglOversamplingRatio')) + 'px'
+            );
+          }
+        }
+      }
+    }
+
+    // Scale:
+    for (k in this.contexts)
+      if (this.contexts[k] && this.contexts[k].viewport)
+        this.contexts[k].viewport(
+          0,
+          0,
+          this.width * this.settings('webglOversamplingRatio'),
+          this.height * this.settings('webglOversamplingRatio')
+        );
+
+    return this;
+  };
+
+  /**
+   * This method clears each canvas.
+   *
+   * @return {sigma.renderers.webgl} Returns the instance itself.
+   */
+  sigma.renderers.webgl.prototype.clear = function() {
+    this.contexts.labels.clearRect(0, 0, this.width, this.height);
+    this.contexts.nodes.clear(this.contexts.nodes.COLOR_BUFFER_BIT);
+    this.contexts.edges.clear(this.contexts.edges.COLOR_BUFFER_BIT);
+
+    return this;
+  };
+
+  /**
+   * This method kills contexts and other attributes.
+   */
+  sigma.renderers.webgl.prototype.kill = function() {
+    var k,
+        captor;
+
+    // Kill captors:
+    while ((captor = this.captors.pop()))
+      captor.kill();
+    delete this.captors;
+
+    // Kill contexts:
+    for (k in this.domElements) {
+      this.domElements[k].parentNode.removeChild(this.domElements[k]);
+      delete this.domElements[k];
+      delete this.contexts[k];
+    }
+    delete this.domElements;
+    delete this.contexts;
+  };
+
+
+
+
+  /**
+   * The object "sigma.webgl.nodes" contains the different WebGL node
+   * renderers. The default one draw nodes as discs. Here are the attributes
+   * any node renderer must have:
+   *
+   * {number}   POINTS      The number of points required to draw a node.
+   * {number}   ATTRIBUTES  The number of attributes needed to draw one point.
+   * {function} addNode     A function that adds a node to the data stack that
+   *                        will be given to the buffer. Here is the arguments:
+   *                        > {object}       node
+   *                        > {number}       index   The node index in the
+   *                                                 nodes array.
+   *                        > {Float32Array} data    The stack.
+   *                        > {object}       options Some options.
+   * {function} render      The function that will effectively render the nodes
+   *                        into the buffer.
+   *                        > {WebGLRenderingContext} gl
+   *                        > {WebGLProgram}          program
+   *                        > {Float32Array} data    The stack to give to the
+   *                                                 buffer.
+   *                        > {object}       params  An object containing some
+   *                                                 options, like width,
+   *                                                 height, the camera ratio.
+   * {function} initProgram The function that will initiate the program, with
+   *                        the relevant shaders and parameters. It must return
+   *                        the newly created program.
+   *
+   * Check sigma.webgl.nodes.def or sigma.webgl.nodes.fast to see how it
+   * works more precisely.
+   */
+  sigma.utils.pkg('sigma.webgl.nodes');
+
+
+
+
+  /**
+   * The object "sigma.webgl.edges" contains the different WebGL edge
+   * renderers. The default one draw edges as direct lines. Here are the
+   * attributes any edge renderer must have:
+   *
+   * {number}   POINTS      The number of points required to draw an edge.
+   * {number}   ATTRIBUTES  The number of attributes needed to draw one point.
+   * {function} addEdge     A function that adds an edge to the data stack that
+   *                        will be given to the buffer. Here is the arguments:
+   *                        > {object}       edge
+   *                        > {object}       source
+   *                        > {object}       target
+   *                        > {Float32Array} data    The stack.
+   *                        > {object}       options Some options.
+   * {function} render      The function that will effectively render the edges
+   *                        into the buffer.
+   *                        > {WebGLRenderingContext} gl
+   *                        > {WebGLProgram}          program
+   *                        > {Float32Array} data    The stack to give to the
+   *                                                 buffer.
+   *                        > {object}       params  An object containing some
+   *                                                 options, like width,
+   *                                                 height, the camera ratio.
+   * {function} initProgram The function that will initiate the program, with
+   *                        the relevant shaders and parameters. It must return
+   *                        the newly created program.
+   *
+   * Check sigma.webgl.edges.def or sigma.webgl.edges.fast to see how it
+   * works more precisely.
+   */
+  sigma.utils.pkg('sigma.webgl.edges');
+
+
+
+
+  /**
+   * The object "sigma.canvas.labels" contains the different
+   * label renderers for the WebGL renderer. Since displaying texts in WebGL is
+   * definitely painful and since there a way less labels to display than nodes
+   * or edges, the default renderer simply renders them in a canvas.
+   *
+   * A labels renderer is a simple function, taking as arguments the related
+   * node, the renderer and a settings function.
+   */
+  sigma.utils.pkg('sigma.canvas.labels');
+}).call(this);

src/main/java/net/jrtechs/www/client/src/renderers/svg/sigma.svg.edges.curve.js

@@ -0,0 +1,84 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.svg.edges');
+
+  /**
+   * The curve edge renderer. It renders the node as a bezier curve.
+   */
+  sigma.svg.edges.curve = {
+
+    /**
+     * SVG Element creation.
+     *
+     * @param  {object}                   edge       The edge object.
+     * @param  {object}                   source     The source node object.
+     * @param  {object}                   target     The target node object.
+     * @param  {configurable}             settings   The settings function.
+     */
+    create: function(edge, source, target, settings) {
+      var color = edge.color,
+          prefix = settings('prefix') || '',
+          edgeColor = settings('edgeColor'),
+          defaultNodeColor = settings('defaultNodeColor'),
+          defaultEdgeColor = settings('defaultEdgeColor');
+
+      if (!color)
+        switch (edgeColor) {
+          case 'source':
+            color = source.color || defaultNodeColor;
+            break;
+          case 'target':
+            color = target.color || defaultNodeColor;
+            break;
+          default:
+            color = defaultEdgeColor;
+            break;
+        }
+
+      var path = document.createElementNS(settings('xmlns'), 'path');
+
+      // Attributes
+      path.setAttributeNS(null, 'data-edge-id', edge.id);
+      path.setAttributeNS(null, 'class', settings('classPrefix') + '-edge');
+      path.setAttributeNS(null, 'stroke', color);
+
+      return path;
+    },
+
+    /**
+     * SVG Element update.
+     *
+     * @param  {object}                   edge       The edge object.
+     * @param  {DOMElement}               line       The line DOM Element.
+     * @param  {object}                   source     The source node object.
+     * @param  {object}                   target     The target node object.
+     * @param  {configurable}             settings   The settings function.
+     */
+    update: function(edge, path, source, target, settings) {
+      var prefix = settings('prefix') || '';
+
+      path.setAttributeNS(null, 'stroke-width', edge[prefix + 'size'] || 1);
+
+      // Control point
+      var cx = (source[prefix + 'x'] + target[prefix + 'x']) / 2 +
+        (target[prefix + 'y'] - source[prefix + 'y']) / 4,
+          cy = (source[prefix + 'y'] + target[prefix + 'y']) / 2 +
+        (source[prefix + 'x'] - target[prefix + 'x']) / 4;
+
+      // Path
+      var p = 'M' + source[prefix + 'x'] + ',' + source[prefix + 'y'] + ' ' +
+              'Q' + cx + ',' + cy + ' ' +
+              target[prefix + 'x'] + ',' + target[prefix + 'y'];
+
+      // Updating attributes
+      path.setAttributeNS(null, 'd', p);
+      path.setAttributeNS(null, 'fill', 'none');
+
+      // Showing
+      path.style.display = '';
+
+      return this;
+    }
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/svg/sigma.svg.edges.def.js

@@ -0,0 +1,73 @@
+;(function() {
+  'use strict';
+
+  sigma.utils.pkg('sigma.svg.edges');
+
+  /**
+   * The default edge renderer. It renders the node as a simple line.
+   */
+  sigma.svg.edges.def = {
+
+    /**
+     * SVG Element creation.
+     *
+     * @param  {object}                   edge       The edge object.
+     * @param  {object}                   source     The source node object.
+     * @param  {object}                   target     The target node object.
+     * @param  {configurable}             settings   The settings function.
+     */
+    create: function(edge, source, target, settings) {
+      var color = edge.color,
+          prefix = settings('prefix') || '',
+          edgeColor = settings('edgeColor'),
+          defaultNodeColor = settings('defaultNodeColor'),
+          defaultEdgeColor = settings('defaultEdgeColor');
+
+      if (!color)
+        switch (edgeColor) {
+          case 'source':
+            color = source.color || defaultNodeColor;
+            break;
+          case 'target':
+            color = target.color || defaultNodeColor;
+            break;
+          default:
+            color = defaultEdgeColor;
+            break;
+        }
+
+      var line = document.createElementNS(settings('xmlns'), 'line');
+
+      // Attributes
+      line.setAttributeNS(null, 'data-edge-id', edge.id);
+      line.setAttributeNS(null, 'class', settings('classPrefix') + '-edge');
+      line.setAttributeNS(null, 'stroke', color);
+
+      return line;
+    },
+
+    /**
+     * SVG Element update.
+     *
+     * @param  {object}                   edge       The edge object.
+     * @param  {DOMElement}               line       The line DOM Element.
+     * @param  {object}                   source     The source node object.
+     * @param  {object}                   target     The target node object.
+     * @param  {configurable}             settings   The settings function.
+     */
+    update: function(edge, line, source, target, settings) {
+      var prefix = settings('prefix') || '';
+
+      line.setAttributeNS(null, 'stroke-width', edge[prefix + 'size'] || 1);
+      line.setAttributeNS(null, 'x1', source[prefix + 'x']);
+      line.setAttributeNS(null, 'y1', source[prefix + 'y']);
+      line.setAttributeNS(null, 'x2', target[prefix + 'x']);
+      line.setAttributeNS(null, 'y2', target[prefix + 'y']);
+
+      // Showing
+      line.style.display = '';
+
+      return this;
+    }
+  };
+})();

src/main/java/net/jrtechs/www/client/src/renderers/svg/sigma.svg.hovers.def.js

@@ -0,0 +1,113 @@
+;(function(undefined) {
+  'use strict';
+
+  if (typeof sigma === 'undefined')
+    throw 'sigma is not declared';
+
+  // Initialize packages:
+  sigma.utils.pkg('sigma.svg.hovers');
+
+  /**
+   * The default hover renderer.
+   */
+  sigma.svg.hovers.def = {
+
+    /**
+     * SVG Element creation.
+     *
+     * @param  {object}           node               The node object.
+     * @param  {CanvasElement}    measurementCanvas  A fake canvas handled by
+     *                            the svg to perform some measurements and
+     *                            passed by the renderer.
+     * @param  {DOMElement}       nodeCircle         The node DOM Element.
+     * @param  {configurable}     settings           The settings function.
+     */
+    create: function(node, nodeCircle, measurementCanvas, settings) {
+
+      // Defining visual properties
+      var x,
+          y,
+          w,
+          h,
+          e,
+          d,
+          fontStyle = settings('hoverFontStyle') || settings('fontStyle'),
+          prefix = settings('prefix') || '',
+          size = node[prefix + 'size'],
+          fontSize = (settings('labelSize') === 'fixed') ?
+            settings('defaultLabelSize') :
+            settings('labelSizeRatio') * size,
+          fontColor = (settings('labelHoverColor') === 'node') ?
+                        (node.color || settings('defaultNodeColor')) :
+                        settings('defaultLabelHoverColor');
+
+      // Creating elements
+      var group = document.createElementNS(settings('xmlns'), 'g'),
+          rectangle = document.createElementNS(settings('xmlns'), 'rect'),
+          circle = document.createElementNS(settings('xmlns'), 'circle'),
+          text = document.createElementNS(settings('xmlns'), 'text');
+
+      // Defining properties
+      group.setAttributeNS(null, 'class', settings('classPrefix') + '-hover');
+      group.setAttributeNS(null, 'data-node-id', node.id);
+
+      if (typeof node.label === 'string') {
+
+        // Text
+        text.innerHTML = node.label;
+        text.textContent = node.label;
+        text.setAttributeNS(
+            null,
+            'class',
+            settings('classPrefix') + '-hover-label');
+        text.setAttributeNS(null, 'font-size', fontSize);
+        text.setAttributeNS(null, 'font-family', settings('font'));
+        text.setAttributeNS(null, 'fill', fontColor);
+        text.setAttributeNS(null, 'x',
+          Math.round(node[prefix + 'x'] + size + 3));
+        text.setAttributeNS(null, 'y',
+          Math.round(node[prefix + 'y'] + fontSize / 3));
+
+        // Measures
+        // OPTIMIZE: Find a better way than a measurement canvas
+        x = Math.round(node[prefix + 'x'] - fontSize / 2 - 2);
+        y = Math.round(node[prefix + 'y'] - fontSize / 2 - 2);
+        w = Math.round(
+          measurementCanvas.measureText(node.label).width +
+            fontSize / 2 + size + 9
+        );
+        h = Math.round(fontSize + 4);
+        e = Math.round(fontSize / 2 + 2);
+
+        // Circle
+        circle.setAttributeNS(
+            null,
+            'class',
+            settings('classPrefix') + '-hover-area');
+        circle.setAttributeNS(null, 'fill', '#fff');
+        circle.setAttributeNS(null, 'cx', node[prefix + 'x']);
+        circle.setAttributeNS(null, 'cy', node[prefix + 'y']);
+        circle.setAttributeNS(null, 'r', e);
+
+        // Rectangle
+        rectangle.setAttributeNS(
+            null,
+            'class',
+            settings('classPrefix') + '-hover-area');
+        rectangle.setAttributeNS(null, 'fill', '#fff');
+        rectangle.setAttributeNS(null, 'x', node[prefix + 'x'] + e / 4);
+        rectangle.setAttributeNS(null, 'y', node[prefix + 'y'] - e);
+        rectangle.setAttributeNS(null, 'width', w);
+        rectangle.setAttributeNS(null, 'height', h);
+      }
+
+      // Appending childs
+      group.appendChild(circle);
+      group.appendChild(rectangle);
+      group.appendChild(text);
+      group.appendChild(nodeCircle);
+
+      return group;
+    }
+  };
+}).call(this);