cytoscape-spread
Version:
The Spread physics simulation layout for Cytoscape.js
1,778 lines (1,538 loc) • 242 kB
JavaScript
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.cytoscapeSpread = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
window.foograph = {
/**
* Insert a vertex into this graph.
*
* @param vertex A valid Vertex instance
*/
insertVertex: function(vertex) {
this.vertices.push(vertex);
this.vertexCount++;
},
/**
* Insert an edge vertex1 --> vertex2.
*
* @param label Label for this edge
* @param weight Weight of this edge
* @param vertex1 Starting Vertex instance
* @param vertex2 Ending Vertex instance
* @return Newly created Edge instance
*/
insertEdge: function(label, weight, vertex1, vertex2, style) {
var e1 = new foograph.Edge(label, weight, vertex2, style);
var e2 = new foograph.Edge(null, weight, vertex1, null);
vertex1.edges.push(e1);
vertex2.reverseEdges.push(e2);
return e1;
},
/**
* Delete edge.
*
* @param vertex Starting vertex
* @param edge Edge to remove
*/
removeEdge: function(vertex1, vertex2) {
for (var i = vertex1.edges.length - 1; i >= 0; i--) {
if (vertex1.edges[i].endVertex == vertex2) {
vertex1.edges.splice(i,1);
break;
}
}
for (var i = vertex2.reverseEdges.length - 1; i >= 0; i--) {
if (vertex2.reverseEdges[i].endVertex == vertex1) {
vertex2.reverseEdges.splice(i,1);
break;
}
}
},
/**
* Delete vertex.
*
* @param vertex Vertex to remove from the graph
*/
removeVertex: function(vertex) {
for (var i = vertex.edges.length - 1; i >= 0; i-- ) {
this.removeEdge(vertex, vertex.edges[i].endVertex);
}
for (var i = vertex.reverseEdges.length - 1; i >= 0; i-- ) {
this.removeEdge(vertex.reverseEdges[i].endVertex, vertex);
}
for (var i = this.vertices.length - 1; i >= 0; i-- ) {
if (this.vertices[i] == vertex) {
this.vertices.splice(i,1);
break;
}
}
this.vertexCount--;
},
/**
* Plots this graph to a canvas.
*
* @param canvas A proper canvas instance
*/
plot: function(canvas) {
var i = 0;
/* Draw edges first */
for (i = 0; i < this.vertices.length; i++) {
var v = this.vertices[i];
if (!v.hidden) {
for (var j = 0; j < v.edges.length; j++) {
var e = v.edges[j];
/* Draw edge (if not hidden) */
if (!e.hidden)
e.draw(canvas, v);
}
}
}
/* Draw the vertices. */
for (i = 0; i < this.vertices.length; i++) {
v = this.vertices[i];
/* Draw vertex (if not hidden) */
if (!v.hidden)
v.draw(canvas);
}
},
/**
* Graph object constructor.
*
* @param label Label of this graph
* @param directed true or false
*/
Graph: function (label, directed) {
/* Fields. */
this.label = label;
this.vertices = new Array();
this.directed = directed;
this.vertexCount = 0;
/* Graph methods. */
this.insertVertex = foograph.insertVertex;
this.removeVertex = foograph.removeVertex;
this.insertEdge = foograph.insertEdge;
this.removeEdge = foograph.removeEdge;
this.plot = foograph.plot;
},
/**
* Vertex object constructor.
*
* @param label Label of this vertex
* @param next Reference to the next vertex of this graph
* @param firstEdge First edge of a linked list of edges
*/
Vertex: function(label, x, y, style) {
this.label = label;
this.edges = new Array();
this.reverseEdges = new Array();
this.x = x;
this.y = y;
this.dx = 0;
this.dy = 0;
this.level = -1;
this.numberOfParents = 0;
this.hidden = false;
this.fixed = false; // Fixed vertices are static (unmovable)
if(style != null) {
this.style = style;
}
else { // Default
this.style = new foograph.VertexStyle('ellipse', 80, 40, '#ffffff', '#000000', true);
}
},
/**
* VertexStyle object type for defining vertex style options.
*
* @param shape Shape of the vertex ('ellipse' or 'rect')
* @param width Width in px
* @param height Height in px
* @param fillColor The color with which the vertex is drawn (RGB HEX string)
* @param borderColor The color with which the border of the vertex is drawn (RGB HEX string)
* @param showLabel Show the vertex label or not
*/
VertexStyle: function(shape, width, height, fillColor, borderColor, showLabel) {
this.shape = shape;
this.width = width;
this.height = height;
this.fillColor = fillColor;
this.borderColor = borderColor;
this.showLabel = showLabel;
},
/**
* Edge object constructor.
*
* @param label Label of this edge
* @param next Next edge reference
* @param weight Edge weight
* @param endVertex Destination Vertex instance
*/
Edge: function (label, weight, endVertex, style) {
this.label = label;
this.weight = weight;
this.endVertex = endVertex;
this.style = null;
this.hidden = false;
// Curving information
this.curved = false;
this.controlX = -1; // Control coordinates for Bezier curve drawing
this.controlY = -1;
this.original = null; // If this is a temporary edge it holds the original edge
if(style != null) {
this.style = style;
}
else { // Set to default
this.style = new foograph.EdgeStyle(2, '#000000', true, false);
}
},
/**
* EdgeStyle object type for defining vertex style options.
*
* @param width Edge line width
* @param color The color with which the edge is drawn
* @param showArrow Draw the edge arrow (only if directed)
* @param showLabel Show the edge label or not
*/
EdgeStyle: function(width, color, showArrow, showLabel) {
this.width = width;
this.color = color;
this.showArrow = showArrow;
this.showLabel = showLabel;
},
/**
* This file is part of foograph Javascript graph library.
*
* Description: Random vertex layout manager
*/
/**
* Class constructor.
*
* @param width Layout width
* @param height Layout height
*/
RandomVertexLayout: function (width, height) {
this.width = width;
this.height = height;
},
/**
* This file is part of foograph Javascript graph library.
*
* Description: Fruchterman-Reingold force-directed vertex
* layout manager
*/
/**
* Class constructor.
*
* @param width Layout width
* @param height Layout height
* @param iterations Number of iterations -
* with more iterations it is more likely the layout has converged into a static equilibrium.
*/
ForceDirectedVertexLayout: function (width, height, iterations, randomize, eps) {
this.width = width;
this.height = height;
this.iterations = iterations;
this.randomize = randomize;
this.eps = eps;
this.callback = function() {};
},
A: 1.5, // Fine tune attraction
R: 0.5 // Fine tune repulsion
};
/**
* toString overload for easier debugging
*/
foograph.Vertex.prototype.toString = function() {
return "[v:" + this.label + "] ";
};
/**
* toString overload for easier debugging
*/
foograph.Edge.prototype.toString = function() {
return "[e:" + this.endVertex.label + "] ";
};
/**
* Draw vertex method.
*
* @param canvas jsGraphics instance
*/
foograph.Vertex.prototype.draw = function(canvas) {
var x = this.x;
var y = this.y;
var width = this.style.width;
var height = this.style.height;
var shape = this.style.shape;
canvas.setStroke(2);
canvas.setColor(this.style.fillColor);
if(shape == 'rect') {
canvas.fillRect(x, y, width, height);
canvas.setColor(this.style.borderColor);
canvas.drawRect(x, y, width, height);
}
else { // Default to ellipse
canvas.fillEllipse(x, y, width, height);
canvas.setColor(this.style.borderColor);
canvas.drawEllipse(x, y, width, height);
}
if(this.style.showLabel) {
canvas.drawStringRect(this.label, x, y + height/2 - 7, width, 'center');
}
};
/**
* Fits the graph into the bounding box
*
* @param width
* @param height
* @param preserveAspect
*/
foograph.Graph.prototype.normalize = function(width, height, preserveAspect) {
for (var i8 in this.vertices) {
var v = this.vertices[i8];
v.oldX = v.x;
v.oldY = v.y;
}
var mnx = width * 0.1;
var mxx = width * 0.9;
var mny = height * 0.1;
var mxy = height * 0.9;
if (preserveAspect == null)
preserveAspect = true;
var minx = Number.MAX_VALUE;
var miny = Number.MAX_VALUE;
var maxx = Number.MIN_VALUE;
var maxy = Number.MIN_VALUE;
for (var i7 in this.vertices) {
var v = this.vertices[i7];
if (v.x < minx) minx = v.x;
if (v.y < miny) miny = v.y;
if (v.x > maxx) maxx = v.x;
if (v.y > maxy) maxy = v.y;
}
var kx = (mxx-mnx) / (maxx - minx);
var ky = (mxy-mny) / (maxy - miny);
if (preserveAspect) {
kx = Math.min(kx, ky);
ky = Math.min(kx, ky);
}
var newMaxx = Number.MIN_VALUE;
var newMaxy = Number.MIN_VALUE;
for (var i8 in this.vertices) {
var v = this.vertices[i8];
v.x = (v.x - minx) * kx;
v.y = (v.y - miny) * ky;
if (v.x > newMaxx) newMaxx = v.x;
if (v.y > newMaxy) newMaxy = v.y;
}
var dx = ( width - newMaxx ) / 2.0;
var dy = ( height - newMaxy ) / 2.0;
for (var i8 in this.vertices) {
var v = this.vertices[i8];
v.x += dx;
v.y += dy;
}
};
/**
* Draw edge method. Draws edge "v" --> "this".
*
* @param canvas jsGraphics instance
* @param v Start vertex
*/
foograph.Edge.prototype.draw = function(canvas, v) {
var x1 = Math.round(v.x + v.style.width/2);
var y1 = Math.round(v.y + v.style.height/2);
var x2 = Math.round(this.endVertex.x + this.endVertex.style.width/2);
var y2 = Math.round(this.endVertex.y + this.endVertex.style.height/2);
// Control point (needed only for curved edges)
var x3 = this.controlX;
var y3 = this.controlY;
// Arrow tip and angle
var X_TIP, Y_TIP, ANGLE;
/* Quadric Bezier curve definition. */
function Bx(t) { return (1-t)*(1-t)*x1 + 2*(1-t)*t*x3 + t*t*x2; }
function By(t) { return (1-t)*(1-t)*y1 + 2*(1-t)*t*y3 + t*t*y2; }
canvas.setStroke(this.style.width);
canvas.setColor(this.style.color);
if(this.curved) { // Draw a quadric Bezier curve
this.curved = false; // Reset
var t = 0, dt = 1/10;
var xs = x1, ys = y1, xn, yn;
while (t < 1-dt) {
t += dt;
xn = Bx(t);
yn = By(t);
canvas.drawLine(xs, ys, xn, yn);
xs = xn;
ys = yn;
}
// Set the arrow tip coordinates
X_TIP = xs;
Y_TIP = ys;
// Move the tip to (0,0) and calculate the angle
// of the arrow head
ANGLE = angularCoord(Bx(1-2*dt) - X_TIP, By(1-2*dt) - Y_TIP);
} else {
canvas.drawLine(x1, y1, x2, y2);
// Set the arrow tip coordinates
X_TIP = x2;
Y_TIP = y2;
// Move the tip to (0,0) and calculate the angle
// of the arrow head
ANGLE = angularCoord(x1 - X_TIP, y1 - Y_TIP);
}
if(this.style.showArrow) {
drawArrow(ANGLE, X_TIP, Y_TIP);
}
// TODO
if(this.style.showLabel) {
}
/**
* Draws an edge arrow.
* @param phi The angle (in radians) of the arrow in polar coordinates.
* @param x X coordinate of the arrow tip.
* @param y Y coordinate of the arrow tip.
*/
function drawArrow(phi, x, y)
{
// Arrow bounding box (in px)
var H = 50;
var W = 10;
// Set cartesian coordinates of the arrow
var p11 = 0, p12 = 0;
var p21 = H, p22 = W/2;
var p31 = H, p32 = -W/2;
// Convert to polar coordinates
var r2 = radialCoord(p21, p22);
var r3 = radialCoord(p31, p32);
var phi2 = angularCoord(p21, p22);
var phi3 = angularCoord(p31, p32);
// Rotate the arrow
phi2 += phi;
phi3 += phi;
// Update cartesian coordinates
p21 = r2 * Math.cos(phi2);
p22 = r2 * Math.sin(phi2);
p31 = r3 * Math.cos(phi3);
p32 = r3 * Math.sin(phi3);
// Translate
p11 += x;
p12 += y;
p21 += x;
p22 += y;
p31 += x;
p32 += y;
// Draw
canvas.fillPolygon(new Array(p11, p21, p31), new Array(p12, p22, p32));
}
/**
* Get the angular coordinate.
* @param x X coordinate
* @param y Y coordinate
*/
function angularCoord(x, y)
{
var phi = 0.0;
if (x > 0 && y >= 0) {
phi = Math.atan(y/x);
}
if (x > 0 && y < 0) {
phi = Math.atan(y/x) + 2*Math.PI;
}
if (x < 0) {
phi = Math.atan(y/x) + Math.PI;
}
if (x = 0 && y > 0) {
phi = Math.PI/2;
}
if (x = 0 && y < 0) {
phi = 3*Math.PI/2;
}
return phi;
}
/**
* Get the radian coordiante.
* @param x1
* @param y1
* @param x2
* @param y2
*/
function radialCoord(x, y)
{
return Math.sqrt(x*x + y*y);
}
};
/**
* Calculates the coordinates based on pure chance.
*
* @param graph A valid graph instance
*/
foograph.RandomVertexLayout.prototype.layout = function(graph) {
for (var i = 0; i<graph.vertices.length; i++) {
var v = graph.vertices[i];
v.x = Math.round(Math.random() * this.width);
v.y = Math.round(Math.random() * this.height);
}
};
/**
* Identifies connected components of a graph and creates "central"
* vertices for each component. If there is more than one component,
* all central vertices of individual components are connected to
* each other to prevent component drift.
*
* @param graph A valid graph instance
* @return A list of component center vertices or null when there
* is only one component.
*/
foograph.ForceDirectedVertexLayout.prototype.__identifyComponents = function(graph) {
var componentCenters = new Array();
var components = new Array();
// Depth first search
function dfs(vertex)
{
var stack = new Array();
var component = new Array();
var centerVertex = new foograph.Vertex("component_center", -1, -1);
centerVertex.hidden = true;
componentCenters.push(centerVertex);
components.push(component);
function visitVertex(v)
{
component.push(v);
v.__dfsVisited = true;
for (var i in v.edges) {
var e = v.edges[i];
if (!e.hidden)
stack.push(e.endVertex);
}
for (var i in v.reverseEdges) {
if (!v.reverseEdges[i].hidden)
stack.push(v.reverseEdges[i].endVertex);
}
}
visitVertex(vertex);
while (stack.length > 0) {
var u = stack.pop();
if (!u.__dfsVisited && !u.hidden) {
visitVertex(u);
}
}
}
// Clear DFS visited flag
for (var i in graph.vertices) {
var v = graph.vertices[i];
v.__dfsVisited = false;
}
// Iterate through all vertices starting DFS from each vertex
// that hasn't been visited yet.
for (var k in graph.vertices) {
var v = graph.vertices[k];
if (!v.__dfsVisited && !v.hidden)
dfs(v);
}
// Interconnect all center vertices
if (componentCenters.length > 1) {
for (var i in componentCenters) {
graph.insertVertex(componentCenters[i]);
}
for (var i in components) {
for (var j in components[i]) {
// Connect visited vertex to "central" component vertex
edge = graph.insertEdge("", 1, components[i][j], componentCenters[i]);
edge.hidden = true;
}
}
for (var i in componentCenters) {
for (var j in componentCenters) {
if (i != j) {
e = graph.insertEdge("", 3, componentCenters[i], componentCenters[j]);
e.hidden = true;
}
}
}
return componentCenters;
}
return null;
};
/**
* Calculates the coordinates based on force-directed placement
* algorithm.
*
* @param graph A valid graph instance
*/
foograph.ForceDirectedVertexLayout.prototype.layout = function(graph) {
this.graph = graph;
var area = this.width * this.height;
var k = Math.sqrt(area / graph.vertexCount);
var t = this.width / 10; // Temperature.
var dt = t / (this.iterations + 1);
var eps = this.eps; // Minimum distance between the vertices
// Attractive and repulsive forces
function Fa(z) { return foograph.A*z*z/k; }
function Fr(z) { return foograph.R*k*k/z; }
function Fw(z) { return 1/z*z; } // Force emited by the walls
// Initiate component identification and virtual vertex creation
// to prevent disconnected graph components from drifting too far apart
centers = this.__identifyComponents(graph);
// Assign initial random positions
if(this.randomize) {
randomLayout = new foograph.RandomVertexLayout(this.width, this.height);
randomLayout.layout(graph);
}
// Run through some iterations
for (var q = 0; q < this.iterations; q++) {
/* Calculate repulsive forces. */
for (var i1 in graph.vertices) {
var v = graph.vertices[i1];
v.dx = 0;
v.dy = 0;
// Do not move fixed vertices
if(!v.fixed) {
for (var i2 in graph.vertices) {
var u = graph.vertices[i2];
if (v != u && !u.fixed) {
/* Difference vector between the two vertices. */
var difx = v.x - u.x;
var dify = v.y - u.y;
/* Length of the dif vector. */
var d = Math.max(eps, Math.sqrt(difx*difx + dify*dify));
var force = Fr(d);
v.dx = v.dx + (difx/d) * force;
v.dy = v.dy + (dify/d) * force;
}
}
/* Treat the walls as static objects emiting force Fw. */
// Calculate the sum of "wall" forces in (v.x, v.y)
/*
var x = Math.max(eps, v.x);
var y = Math.max(eps, v.y);
var wx = Math.max(eps, this.width - v.x);
var wy = Math.max(eps, this.height - v.y); // Gotta love all those NaN's :)
var Rx = Fw(x) - Fw(wx);
var Ry = Fw(y) - Fw(wy);
v.dx = v.dx + Rx;
v.dy = v.dy + Ry;
*/
}
}
/* Calculate attractive forces. */
for (var i3 in graph.vertices) {
var v = graph.vertices[i3];
// Do not move fixed vertices
if(!v.fixed) {
for (var i4 in v.edges) {
var e = v.edges[i4];
var u = e.endVertex;
var difx = v.x - u.x;
var dify = v.y - u.y;
var d = Math.max(eps, Math.sqrt(difx*difx + dify*dify));
var force = Fa(d);
/* Length of the dif vector. */
var d = Math.max(eps, Math.sqrt(difx*difx + dify*dify));
v.dx = v.dx - (difx/d) * force;
v.dy = v.dy - (dify/d) * force;
u.dx = u.dx + (difx/d) * force;
u.dy = u.dy + (dify/d) * force;
}
}
}
/* Limit the maximum displacement to the temperature t
and prevent from being displaced outside frame. */
for (var i5 in graph.vertices) {
var v = graph.vertices[i5];
if(!v.fixed) {
/* Length of the displacement vector. */
var d = Math.max(eps, Math.sqrt(v.dx*v.dx + v.dy*v.dy));
/* Limit to the temperature t. */
v.x = v.x + (v.dx/d) * Math.min(d, t);
v.y = v.y + (v.dy/d) * Math.min(d, t);
/* Stay inside the frame. */
/*
borderWidth = this.width / 50;
if (v.x < borderWidth) {
v.x = borderWidth;
} else if (v.x > this.width - borderWidth) {
v.x = this.width - borderWidth;
}
if (v.y < borderWidth) {
v.y = borderWidth;
} else if (v.y > this.height - borderWidth) {
v.y = this.height - borderWidth;
}
*/
v.x = Math.round(v.x);
v.y = Math.round(v.y);
}
}
/* Cool. */
t -= dt;
if (q % 10 == 0) {
this.callback();
}
}
// Remove virtual center vertices
if (centers) {
for (var i in centers) {
graph.removeVertex(centers[i]);
}
}
graph.normalize(this.width, this.height, true);
};
module.exports = foograph;
},{}],2:[function(_dereq_,module,exports){
'use strict';
// registers the extension on a cytoscape lib ref
var getLayout = _dereq_('./layout');
var register = function( cytoscape ){
var layout = getLayout( cytoscape );
cytoscape('layout', 'spread', layout);
};
if( typeof cytoscape !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
register( cytoscape );
}
module.exports = register;
},{"./layout":3}],3:[function(_dereq_,module,exports){
var Thread;
var foograph = _dereq_('./foograph');
var Voronoi = _dereq_('./rhill-voronoi-core');
/*
* This layout combines several algorithms:
*
* - It generates an initial position of the nodes by using the
* Fruchterman-Reingold algorithm (doi:10.1002/spe.4380211102)
*
* - Finally it eliminates overlaps by using the method described by
* Gansner and North (doi:10.1007/3-540-37623-2_28)
*/
var defaults = {
animate: true, // whether to show the layout as it's running
ready: undefined, // Callback on layoutready
stop: undefined, // Callback on layoutstop
fit: true, // Reset viewport to fit default simulationBounds
minDist: 20, // Minimum distance between nodes
padding: 20, // Padding
expandingFactor: -1.0, // If the network does not satisfy the minDist
// criterium then it expands the network of this amount
// If it is set to -1.0 the amount of expansion is automatically
// calculated based on the minDist, the aspect ratio and the
// number of nodes
maxFruchtermanReingoldIterations: 50, // Maximum number of initial force-directed iterations
maxExpandIterations: 4, // Maximum number of expanding iterations
boundingBox: undefined, // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
randomize: false // uses random initial node positions on true
};
function SpreadLayout( options ) {
var opts = this.options = {};
for( var i in defaults ){ opts[i] = defaults[i]; }
for( var i in options ){ opts[i] = options[i]; }
}
SpreadLayout.prototype.run = function() {
var layout = this;
var options = this.options;
var cy = options.cy;
var bb = options.boundingBox || { x1: 0, y1: 0, w: cy.width(), h: cy.height() };
if( bb.x2 === undefined ){ bb.x2 = bb.x1 + bb.w; }
if( bb.w === undefined ){ bb.w = bb.x2 - bb.x1; }
if( bb.y2 === undefined ){ bb.y2 = bb.y1 + bb.h; }
if( bb.h === undefined ){ bb.h = bb.y2 - bb.y1; }
var nodes = cy.nodes();
var edges = cy.edges();
var cWidth = cy.width();
var cHeight = cy.height();
var simulationBounds = bb;
var padding = options.padding;
var simBBFactor = Math.max( 1, Math.log(nodes.length) * 0.8 );
if( nodes.length < 100 ){
simBBFactor /= 2;
}
layout.trigger( {
type: 'layoutstart',
layout: layout
} );
var simBB = {
x1: 0,
y1: 0,
x2: cWidth * simBBFactor,
y2: cHeight * simBBFactor
};
if( simulationBounds ) {
simBB.x1 = simulationBounds.x1;
simBB.y1 = simulationBounds.y1;
simBB.x2 = simulationBounds.x2;
simBB.y2 = simulationBounds.y2;
}
simBB.x1 += padding;
simBB.y1 += padding;
simBB.x2 -= padding;
simBB.y2 -= padding;
var width = simBB.x2 - simBB.x1;
var height = simBB.y2 - simBB.y1;
// Get start time
var startTime = Date.now();
// layout doesn't work with just 1 node
if( nodes.size() <= 1 ) {
nodes.positions( {
x: Math.round( ( simBB.x1 + simBB.x2 ) / 2 ),
y: Math.round( ( simBB.y1 + simBB.y2 ) / 2 )
} );
if( options.fit ) {
cy.fit( options.padding );
}
// Get end time
var endTime = Date.now();
console.info( "Layout on " + nodes.size() + " nodes took " + ( endTime - startTime ) + " ms" );
layout.one( "layoutready", options.ready );
layout.trigger( "layoutready" );
layout.one( "layoutstop", options.stop );
layout.trigger( "layoutstop" );
return;
}
// First I need to create the data structure to pass to the worker
var pData = {
'width': width,
'height': height,
'minDist': options.minDist,
'expFact': options.expandingFactor,
'expIt': 0,
'maxExpIt': options.maxExpandIterations,
'vertices': [],
'edges': [],
'startTime': startTime,
'maxFruchtermanReingoldIterations': options.maxFruchtermanReingoldIterations
};
nodes.each(
function( i, node ) {
var nodeId = node.id();
var pos = node.position();
if( options.randomize ){
pos = {
x: Math.round( simBB.x1 + (simBB.x2 - simBB.x1) * Math.random() ),
y: Math.round( simBB.y1 + (simBB.y2 - simBB.y1) * Math.random() )
};
}
pData[ 'vertices' ].push( {
id: nodeId,
x: pos.x,
y: pos.y
} );
} );
edges.each(
function() {
var srcNodeId = this.source().id();
var tgtNodeId = this.target().id();
pData[ 'edges' ].push( {
src: srcNodeId,
tgt: tgtNodeId
} );
} );
//Decleration
var t1 = layout.thread;
// reuse old thread if possible
if( !t1 || t1.stopped() ){
t1 = layout.thread = Thread();
// And to add the required scripts
//EXTERNAL 1
t1.require( foograph, 'foograph' );
//EXTERNAL 2
t1.require( Voronoi, 'Voronoi' );
}
function setPositions( pData ){ //console.log('set posns')
// First we retrieve the important data
// var expandIteration = pData[ 'expIt' ];
var dataVertices = pData[ 'vertices' ];
var vertices = [];
for( var i = 0; i < dataVertices.length; ++i ) {
var dv = dataVertices[ i ];
vertices[ dv.id ] = {
x: dv.x,
y: dv.y
};
}
/*
* FINALLY:
*
* We position the nodes based on the calculation
*/
nodes.positions(
function( i, node ) {
var id = node.id()
var vertex = vertices[ id ];
return {
x: Math.round( simBB.x1 + vertex.x ),
y: Math.round( simBB.y1 + vertex.y )
};
} );
if( options.fit ) {
cy.fit( options.padding );
}
cy.nodes().rtrigger( "position" );
}
var didLayoutReady = false;
t1.on('message', function(e){
var pData = e.message; //console.log('message', e)
if( !options.animate ){
return;
}
setPositions( pData );
if( !didLayoutReady ){
layout.trigger( "layoutready" );
didLayoutReady = true;
}
});
layout.one( "layoutready", options.ready );
t1.pass( pData ).run( function( pData ) {
function cellCentroid( cell ) {
var hes = cell.halfedges;
var area = 0,
x = 0,
y = 0;
var p1, p2, f;
for( var i = 0; i < hes.length; ++i ) {
p1 = hes[ i ].getEndpoint();
p2 = hes[ i ].getStartpoint();
area += p1.x * p2.y;
area -= p1.y * p2.x;
f = p1.x * p2.y - p2.x * p1.y;
x += ( p1.x + p2.x ) * f;
y += ( p1.y + p2.y ) * f;
}
area /= 2;
f = area * 6;
return {
x: x / f,
y: y / f
};
}
function sitesDistance( ls, rs ) {
var dx = ls.x - rs.x;
var dy = ls.y - rs.y;
return Math.sqrt( dx * dx + dy * dy );
}
foograph = _ref_('foograph');
Voronoi = _ref_('Voronoi');
// I need to retrieve the important data
var lWidth = pData[ 'width' ];
var lHeight = pData[ 'height' ];
var lMinDist = pData[ 'minDist' ];
var lExpFact = pData[ 'expFact' ];
var lMaxExpIt = pData[ 'maxExpIt' ];
var lMaxFruchtermanReingoldIterations = pData[ 'maxFruchtermanReingoldIterations' ];
// Prepare the data to output
var savePositions = function(){
pData[ 'width' ] = lWidth;
pData[ 'height' ] = lHeight;
pData[ 'expIt' ] = expandIteration;
pData[ 'expFact' ] = lExpFact;
pData[ 'vertices' ] = [];
for( var i = 0; i < fv.length; ++i ) {
pData[ 'vertices' ].push( {
id: fv[ i ].label,
x: fv[ i ].x,
y: fv[ i ].y
} );
}
};
var messagePositions = function(){
broadcast( pData );
};
/*
* FIRST STEP: Application of the Fruchterman-Reingold algorithm
*
* We use the version implemented by the foograph library
*
* Ref.: https://code.google.com/p/foograph/
*/
// We need to create an instance of a graph compatible with the library
var frg = new foograph.Graph( "FRgraph", false );
var frgNodes = {};
// Then we have to add the vertices
var dataVertices = pData[ 'vertices' ];
for( var ni = 0; ni < dataVertices.length; ++ni ) {
var id = dataVertices[ ni ][ 'id' ];
var v = new foograph.Vertex( id, Math.round( Math.random() * lHeight ), Math.round( Math.random() * lHeight ) );
frgNodes[ id ] = v;
frg.insertVertex( v );
}
var dataEdges = pData[ 'edges' ];
for( var ei = 0; ei < dataEdges.length; ++ei ) {
var srcNodeId = dataEdges[ ei ][ 'src' ];
var tgtNodeId = dataEdges[ ei ][ 'tgt' ];
frg.insertEdge( "", 1, frgNodes[ srcNodeId ], frgNodes[ tgtNodeId ] );
}
var fv = frg.vertices;
// Then we apply the layout
var iterations = lMaxFruchtermanReingoldIterations;
var frLayoutManager = new foograph.ForceDirectedVertexLayout( lWidth, lHeight, iterations, false, lMinDist );
frLayoutManager.callback = function(){
savePositions();
messagePositions();
};
frLayoutManager.layout( frg );
savePositions();
messagePositions();
if( lMaxExpIt <= 0 ){
return pData;
}
/*
* SECOND STEP: Tiding up of the graph.
*
* We use the method described by Gansner and North, based on Voronoi
* diagrams.
*
* Ref: doi:10.1007/3-540-37623-2_28
*/
// We calculate the Voronoi diagram dor the position of the nodes
var voronoi = new Voronoi();
var bbox = {
xl: 0,
xr: lWidth,
yt: 0,
yb: lHeight
};
var vSites = [];
for( var i = 0; i < fv.length; ++i ) {
vSites[ fv[ i ].label ] = fv[ i ];
}
function checkMinDist( ee ) {
var infractions = 0;
// Then we check if the minimum distance is satisfied
for( var eei = 0; eei < ee.length; ++eei ) {
var e = ee[ eei ];
if( ( e.lSite != null ) && ( e.rSite != null ) && sitesDistance( e.lSite, e.rSite ) < lMinDist ) {
++infractions;
}
}
return infractions;
}
var diagram = voronoi.compute( fv, bbox );
// Then we reposition the nodes at the centroid of their Voronoi cells
var cells = diagram.cells;
for( var i = 0; i < cells.length; ++i ) {
var cell = cells[ i ];
var site = cell.site;
var centroid = cellCentroid( cell );
var currv = vSites[ site.label ];
currv.x = centroid.x;
currv.y = centroid.y;
}
if( lExpFact < 0.0 ) {
// Calculates the expanding factor
lExpFact = Math.max( 0.05, Math.min( 0.10, lMinDist / Math.sqrt( ( lWidth * lHeight ) / fv.length ) * 0.5 ) );
//console.info("Expanding factor is " + (options.expandingFactor * 100.0) + "%");
}
var prevInfractions = checkMinDist( diagram.edges );
//console.info("Initial infractions " + prevInfractions);
var bStop = ( prevInfractions <= 0 ) || lMaxExpIt <= 0;
var voronoiIteration = 0;
var expandIteration = 0;
// var initWidth = lWidth;
while( !bStop ) {
++voronoiIteration;
for( var it = 0; it <= 4; ++it ) {
voronoi.recycle( diagram );
diagram = voronoi.compute( fv, bbox );
// Then we reposition the nodes at the centroid of their Voronoi cells
// cells = diagram.cells;
for( var i = 0; i < cells.length; ++i ) {
var cell = cells[ i ];
var site = cell.site;
var centroid = cellCentroid( cell );
var currv = vSites[ site.label ];
currv.x = centroid.x;
currv.y = centroid.y;
}
}
var currInfractions = checkMinDist( diagram.edges );
//console.info("Current infractions " + currInfractions);
if( currInfractions <= 0 ) {
bStop = true;
} else {
if( currInfractions >= prevInfractions || voronoiIteration >= 4 ) {
if( expandIteration >= lMaxExpIt ) {
bStop = true;
} else {
lWidth += lWidth * lExpFact;
lHeight += lHeight * lExpFact;
bbox = {
xl: 0,
xr: lWidth,
yt: 0,
yb: lHeight
};
++expandIteration;
voronoiIteration = 0;
//console.info("Expanded to ("+width+","+height+")");
}
}
}
prevInfractions = currInfractions;
savePositions();
messagePositions();
}
savePositions();
return pData;
} ).then( function( pData ) {
// var expandIteration = pData[ 'expIt' ];
var dataVertices = pData[ 'vertices' ];
setPositions( pData );
// Get end time
var startTime = pData[ 'startTime' ];
var endTime = new Date();
console.info( "Layout on " + dataVertices.length + " nodes took " + ( endTime - startTime ) + " ms" );
layout.one( "layoutstop", options.stop );
if( !options.animate ){
layout.trigger( "layoutready" );
}
layout.trigger( "layoutstop" );
t1.stop();
} );
return this;
}; // run
SpreadLayout.prototype.stop = function(){
if( this.thread ){
this.thread.stop();
}
this.trigger('layoutstop');
};
SpreadLayout.prototype.destroy = function(){
if( this.thread ){
this.thread.stop();
}
};
module.exports = function get( cytoscape ){
Thread = cytoscape.Thread;
return SpreadLayout;
};
},{"./foograph":1,"./rhill-voronoi-core":4}],4:[function(_dereq_,module,exports){
/*!
Copyright (C) 2010-2013 Raymond Hill: https://github.com/gorhill/Javascript-Voronoi
MIT License: See https://github.com/gorhill/Javascript-Voronoi/LICENSE.md
*/
/*
Author: Raymond Hill (rhill@raymondhill.net)
Contributor: Jesse Morgan (morgajel@gmail.com)
File: rhill-voronoi-core.js
Version: 0.98
Date: January 21, 2013
Description: This is my personal Javascript implementation of
Steven Fortune's algorithm to compute Voronoi diagrams.
License: See https://github.com/gorhill/Javascript-Voronoi/LICENSE.md
Credits: See https://github.com/gorhill/Javascript-Voronoi/CREDITS.md
History: See https://github.com/gorhill/Javascript-Voronoi/CHANGELOG.md
## Usage:
var sites = [{x:300,y:300}, {x:100,y:100}, {x:200,y:500}, {x:250,y:450}, {x:600,y:150}];
// xl, xr means x left, x right
// yt, yb means y top, y bottom
var bbox = {xl:0, xr:800, yt:0, yb:600};
var voronoi = new Voronoi();
// pass an object which exhibits xl, xr, yt, yb properties. The bounding
// box will be used to connect unbound edges, and to close open cells
result = voronoi.compute(sites, bbox);
// render, further analyze, etc.
Return value:
An object with the following properties:
result.vertices = an array of unordered, unique Voronoi.Vertex objects making
up the Voronoi diagram.
result.edges = an array of unordered, unique Voronoi.Edge objects making up
the Voronoi diagram.
result.cells = an array of Voronoi.Cell object making up the Voronoi diagram.
A Cell object might have an empty array of halfedges, meaning no Voronoi
cell could be computed for a particular cell.
result.execTime = the time it took to compute the Voronoi diagram, in
milliseconds.
Voronoi.Vertex object:
x: The x position of the vertex.
y: The y position of the vertex.
Voronoi.Edge object:
lSite: the Voronoi site object at the left of this Voronoi.Edge object.
rSite: the Voronoi site object at the right of this Voronoi.Edge object (can
be null).
va: an object with an 'x' and a 'y' property defining the start point
(relative to the Voronoi site on the left) of this Voronoi.Edge object.
vb: an object with an 'x' and a 'y' property defining the end point
(relative to Voronoi site on the left) of this Voronoi.Edge object.
For edges which are used to close open cells (using the supplied bounding
box), the rSite property will be null.
Voronoi.Cell object:
site: the Voronoi site object associated with the Voronoi cell.
halfedges: an array of Voronoi.Halfedge objects, ordered counterclockwise,
defining the polygon for this Voronoi cell.
Voronoi.Halfedge object:
site: the Voronoi site object owning this Voronoi.Halfedge object.
edge: a reference to the unique Voronoi.Edge object underlying this
Voronoi.Halfedge object.
getStartpoint(): a method returning an object with an 'x' and a 'y' property
for the start point of this halfedge. Keep in mind halfedges are always
countercockwise.
getEndpoint(): a method returning an object with an 'x' and a 'y' property
for the end point of this halfedge. Keep in mind halfedges are always
countercockwise.
TODO: Identify opportunities for performance improvement.
TODO: Let the user close the Voronoi cells, do not do it automatically. Not only let
him close the cells, but also allow him to close more than once using a different
bounding box for the same Voronoi diagram.
*/
/*global Math */
// ---------------------------------------------------------------------------
function Voronoi() {
this.vertices = null;
this.edges = null;
this.cells = null;
this.toRecycle = null;
this.beachsectionJunkyard = [];
this.circleEventJunkyard = [];
this.vertexJunkyard = [];
this.edgeJunkyard = [];
this.cellJunkyard = [];
}
// ---------------------------------------------------------------------------
Voronoi.prototype.reset = function() {
if (!this.beachline) {
this.beachline = new this.RBTree();
}
// Move leftover beachsections to the beachsection junkyard.
if (this.beachline.root) {
var beachsection = this.beachline.getFirst(this.beachline.root);
while (beachsection) {
this.beachsectionJunkyard.push(beachsection); // mark for reuse
beachsection = beachsection.rbNext;
}
}
this.beachline.root = null;
if (!this.circleEvents) {
this.circleEvents = new this.RBTree();
}
this.circleEvents.root = this.firstCircleEvent = null;
this.vertices = [];
this.edges = [];
this.cells = [];
};
Voronoi.prototype.sqrt = function(n){ return Math.sqrt(n); };
Voronoi.prototype.abs = function(n){ return Math.abs(n); };
Voronoi.prototype.ε = Voronoi.ε = 1e-9;
Voronoi.prototype.invε = Voronoi.invε = 1.0 / Voronoi.ε;
Voronoi.prototype.equalWithEpsilon = function(a,b){return this.abs(a-b)<1e-9;};
Voronoi.prototype.greaterThanWithEpsilon = function(a,b){return a-b>1e-9;};
Voronoi.prototype.greaterThanOrEqualWithEpsilon = function(a,b){return b-a<1e-9;};
Voronoi.prototype.lessThanWithEpsilon = function(a,b){return b-a>1e-9;};
Voronoi.prototype.lessThanOrEqualWithEpsilon = function(a,b){return a-b<1e-9;};
// ---------------------------------------------------------------------------
// Red-Black tree code (based on C version of "rbtree" by Franck Bui-Huu
// https://github.com/fbuihuu/libtree/blob/master/rb.c
Voronoi.prototype.RBTree = function() {
this.root = null;
};
Voronoi.prototype.RBTree.prototype.rbInsertSuccessor = function(node, successor) {
var parent;
if (node) {
// >>> rhill 2011-05-27: Performance: cache previous/next nodes
successor.rbPrevious = node;
successor.rbNext = node.rbNext;
if (node.rbNext) {
node.rbNext.rbPrevious = successor;
}
node.rbNext = successor;
// <<<
if (node.rbRight) {
// in-place expansion of node.rbRight.getFirst();
node = node.rbRight;
while (node.rbLeft) {node = node.rbLeft;}
node.rbLeft = successor;
}
else {
node.rbRight = successor;
}
parent = node;
}
// rhill 2011-06-07: if node is null, successor must be inserted
// to the left-most part of the tree
else if (this.root) {
node = this.getFirst(this.root);
// >>> Performance: cache previous/next nodes
successor.rbPrevious = null;
successor.rbNext = node;
node.rbPrevious = successor;
// <<<
node.rbLeft = successor;
parent = node;
}
else {
// >>> Performance: cache previous/next nodes
successor.rbPrevious = successor.rbNext = null;
// <<<
this.root = successor;
parent = null;
}
successor.rbLeft = successor.rbRight = null;
successor.rbParent = parent;
successor.rbRed = true;
// Fixup the modified tree by recoloring nodes and performing
// rotations (2 at most) hence the red-black tree properties are
// preserved.
var grandpa, uncle;
node = successor;
while (parent && parent.rbRed) {
grandpa = parent.rbParent;
if (parent === grandpa.rbLeft) {
uncle = grandpa.rbRight;
if (uncle && uncle.rbRed) {
parent.rbRed = uncle.rbRed = false;
grandpa.rbRed = true;
node = grandpa;
}
else {
if (node === parent.rbRight) {
this.rbRotateLeft(parent);
node = parent;
parent = node.rbParent;
}
parent.rbRed = false;
grandpa.rbRed = true;
this.rbRotateRight(grandpa);
}
}
else {
uncle = grandpa.rbLeft;
if (uncle && uncle.rbRed) {
parent.rbRed = uncle.rbRed = false;
grandpa.rbRed = true;
node = grandpa;
}
else {
if (node === parent.rbLeft) {
this.rbRotateRight(parent);
node = parent;
parent = node.rbParent;
}
parent.rbRed = false;
grandpa.rbRed = true;
this.rbRotateLeft(grandpa);
}
}
parent = node.rbParent;
}
this.root.rbRed = false;
};
Voronoi.prototype.RBTree.prototype.rbRemoveNode = function(node) {
// >>> rhill 2011-05-27: Performance: cache previous/next nodes
if (node.rbNext) {
node.rbNext.rbPrevious = node.rbPrevious;
}
if (node.rbPrevious) {
node.rbPrevious.rbNext = node.rbNext;
}
node.rbNext = node.rbPrevious = null;
// <<<
var parent = node.rbParent,
left = node.rbLeft,
right = node.rbRight,
next;
if (!left) {
next = right;
}
else if (!right) {
next = left;
}
else {
next = this.getFirst(right);
}
if (parent) {
if (parent.rbLeft === node) {
parent.rbLeft = next;
}
else {
parent.rbRight = next;
}
}
else {
this.root = next;
}
// enforce red-black rules
var isRed;
if (left && right) {
isRed = next.rbRed;
next.rbRed = node.rbRed;
next.rbLeft = left;
left.rbParent = next;
if (next !== right) {
parent = next.rbParent;
next.rbParent = node.rbParent;
node = next.rbRight;
parent.rbLeft = node;
next.rbRight = right;
right.rbParent = next;
}
else {
next.rbParent = parent;
parent = next;
node = next.rbRight;
}
}
else {
isRed = node.rbRed;
node = next;
}
// 'node' is now the sole successor's child and 'parent' its
// new parent (since the successor can have been moved)
if (node) {
node.rbParent = parent;
}
// the 'easy' cases
if (isRed) {return;}
if (node && node.rbRed) {
node.rbRed = false;
return;
}
// the other cases
var sibling;
do {
if (node === this.root) {
break;
}
if (node === parent.rbLeft) {
sibling = parent.rbRight;
if (sibling.rbRed) {
sibling.rbRed = false;
parent.rbRed = true;
this.rbRotateLeft(parent);
sibling = parent.rbRight;
}
if ((sibling.rbLeft && sibling.rbLeft.rbRed) || (sibling.rbRight && sibling.rbRight.rbRed)) {
if (!sibling.rbRight || !sibling.rbRight.rbRed) {
sibling.rbLeft.rbRed = false;
sibling.rbRed = true;
this.rbRotateRight(sibling);
sibling = parent.rbRight;
}
sibling.rbRed = parent.rbRed;
parent.rbRed = sibling.rbRight.rbRed = false;
this.rbRotateLeft(parent);
node = this.root;
break;
}
}
else {
sibling = parent.rbLeft;
if (sibling.rbRed) {
sibling.rbRed = false;
parent.rbRed = true;
this.rbRotateRight(parent);
sibling = parent.rbLeft;
}
if ((sibling.rbLeft && sibling.rbLeft.rbRed) || (sibling.rbRight && sibling.rbRight.rbRed)) {
if (!sibling.rbLeft || !sibling.rbLeft.rbRed) {
sibling.rbRight.rbRed = false;
sibling.rbRed = true;
this.rbRotateLeft(sibling);
sibling = parent.rbLeft;
}
sibling.rbRed = parent.rbRed;
parent.rbRed = sibling.rbLeft.rbRed = false;
this.rbRotateRight(parent);
node = this.root;
break;
}
}
sibling.rbRed = true;
node = parent;
parent = parent.rbParent;
} while (!node.rbRed);
if (node) {node.rbRed = false;}
};
Voronoi.prototype.RBTree.prototype.rbRotateLeft = function(node) {
var p = node,
q = node.rbRight, // can't be null
parent = p.rbParent;
if (parent) {
if (parent.rbLeft === p) {
parent.rbLeft = q;
}
else {
parent.rbRight = q;
}
}
else {
this.root = q;
}
q.rbParent = parent;
p.rbParent = q;
p.rbRight = q.rbLeft;
if (p.rbRight) {
p.rbRight.rbParent = p;
}
q.rbLeft = p;
};
Voronoi.prototype.RBTree.prototype.rbRotateRight = function(node) {
var p = node,
q = node.rbLeft, // can't be null
parent = p.rbParent;
if (parent) {
if (parent.rbLeft === p) {
parent.rbLeft = q;
}
else {
parent.rbRight = q;
}
}
else {
this.root = q;
}
q.rbParent = parent;
p.rbParent = q;
p.rbLeft = q.rbRight;
if (p.rbLeft) {
p.rbLeft.rbParent = p;
}
q.rbRight = p;
};
Voronoi.prototype.RBTree.prototype.getFirst = function(node) {
while (node.rbLeft) {
node = node.rbLeft;
}
return node;
};
Voronoi.prototype.RBTree.prototype.getLast = function(node) {
while (node.rbRight) {
node = node.rbRight;
}
return node;
};
// ---------------------------------------------------------------------------
// Diagram methods
Voronoi.prototype.Diagram = function(site) {
this.site = site;
};
// ---------------------------------------------------------------------------
// Cell methods
Voronoi.prototype.Cell = function(site) {
this.site = site;
this.halfedges = [];
this.closeMe = false;
};
Voronoi.prototype.Cell.prototype.init = function(site) {
this.site = site;
this.halfedges = [];
this.closeMe = false;
return this;
};
Voronoi.prototype.createCell = function(site) {
var cell = this.cellJunkyard.pop();
if ( cell ) {
return cell.init(site);
}
return new this.Cell(site);
};
Voronoi.prototype.Cell.prototype.prepareHalfedges = function() {
var halfedges = this.halfedges,
iHalfedge = halfedges.length,
edge;
// get rid of unused halfedges
// rhill 2011-05-27: Keep it simple, no point here in trying
// to be fancy: dangling edges are a typically a minority.
while (iHalfedge--) {
edge = halfedges[iHalfedge].edge;
if (!edge.vb || !edge.va) {
halfedges.splice(iHalfedge,1);
}
}
// rhill 2011-05-26: I tried to use a binary search at insertion
// time to keep the array sorted on-the-fly (in Cell.addHalfedge()).
// There was no real benefits in doing so, performance on
// Firefox 3.6 was improved marginally, while performance on
// Opera 11 was penalized marginally.
halfedges.sort(function(a,b){return b.angle-a.angle;});
r