sigma-rails 1.0.2

data/vendor/assets/javascripts/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();
+});
+````

data/vendor/assets/javascripts/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);

data/vendor/assets/javascripts/sigma.renderers.customShapes/README.md

@@ -0,0 +1,55 @@
+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 */
+  }
+````
+  * `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();
+````

data/vendor/assets/javascripts/sigma.renderers.customShapes/shape-library.js

@@ -0,0 +1,145 @@
+;(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 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);

data/vendor/assets/javascripts/sigma.renderers.customShapes/sigma.renderers.customShapes.js

@@ -0,0 +1,112 @@
+;(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');
+
+  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.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");
+          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();
+
+      // 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 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();
+    };
+  }
+
+  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);