+
+ LEGEND:
+ Green = input, Red = output,
+ White = input that became output,Purple = output that became input, Blue = transaction
+
+ NAVIGATION: mouse + scroll = pan/zoom, SPACE = run/pause
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/liveblock.css b/js/liveblock.css
new file mode 100644
index 0000000..b255109
--- /dev/null
+++ b/js/liveblock.css
@@ -0,0 +1,28 @@
+body{
+ margin: 0;
+ padding: 0;
+ position: relative;
+}
+.input-node{color:green;}
+.output-node{color:red;}
+.input-output-node{color:black;}
+.output-input-node{color:purple;}
+
+.transaction-node{color:blue;}
+
+#output{display:none;}
+#output2{ position: absolute;
+ left:4px;
+ top:4px;
+ width:100px;
+ background-color: #ccc;
+ padding:4px;}
+
+#info{
+ position: absolute;
+ right:4px;
+ top:4px;
+ width:300px;
+ background-color: #ccc;
+ padding:4px;
+}
diff --git a/js/liveblock.js b/js/liveblock.js
new file mode 100644
index 0000000..df754f8
--- /dev/null
+++ b/js/liveblock.js
@@ -0,0 +1,341 @@
+var graphics = Viva.Graph.View.webglGraphics();
+
+var isWebgl = graphics.isSupported();
+if (!isWebgl) {
+ alert("Turn on webgl or use modern browser");
+}
+
+var graph = Viva.Graph.graph(),
+layout = Viva.Graph.Layout.forceDirected(graph, {
+ springLength : 80,
+ springCoeff : 0.0002,
+ dragCoeff : 0.009,
+ gravity : -30,
+ theta : 0.7
+}),
+
+minNodeSize = 0.1,
+maxNodeSize = 100,
+txCount1=0,
+txCount10=0,
+txCount50=0,
+txCount100=0,
+txCount1000=0,
+totalBTC=0;
+
+
+function log10(val) {
+ return Math.log(val) / Math.LN10;
+}
+
+function log2(val) {
+ return Math.log(val) / Math.LN2;
+}
+
+var scaleType = "LOG"; // LINEAR
+
+var getNodeColor = function(node) {
+ // here different colors for tx, input, output, mixed and txconfirmed
+ if(node.data && node.data.t && node.data.t == "i"){
+ return 0x00FF00;
+ }else if(node.data && node.data.t && node.data.t == "o"){
+ return 0xFF0000;
+ }
+ return 0x008ED2;
+},
+
+getNodeSize = function(node){
+ if(! node.data || !node.data.s){
+ return 25;
+ }
+ var rmin = 20;
+ var rmax = 96;
+
+
+ // linear normalization to a range rmin,rmax
+ if(scaleType == "LINEAR"){
+ return rmin + (rmax - rmin) * ( (node.data.s - minNodeSize)/(maxNodeSize - minNodeSize) ) ;
+ }else{
+ // log normalization to a range rmin,rmax
+ var min = log2(minNodeSize);
+ var max = log2(maxNodeSize);
+ var val = log2( node.data.s );
+
+ // linear scaling from min.max -> rmin rmax
+ return rmin + (rmax - rmin) * ( (val - min)/(max - min) ) ;
+ }
+},
+getNodeDetails = function(node){
+ //
+ // http://blockchain.info/rawtx/$tx_index?format=json
+ var label = "transaction";
+ var id = node.id;
+ if(node.data && node.data.t){
+ if(node.data.t == "i"){
+ // input node
+ label = "input";
+ }else if(node.data.t == "o"){
+ // output node
+ label = "output";
+ }else if(node.data.t == "io"){
+ // node which is both input and output
+ label = "input to output";
+ }
+ else if(node.data.t == "oi"){
+ // node which is both input and output
+ label = "output to input";
+ }
+
+ // for addresses infor cors not enabled :-(
+ // enabled for blocks
+
+ var balance = 0;
+ balance=node.data.s;
+ //lets get balance
+
+ document.getElementById("info").innerHTML = label+" "+id+" balance: "+balance +" BTC";
+
+ }else{
+ // transaction node
+ document.getElementById("info").innerHTML = label+" "+id;
+ }
+};
+
+// need to get these 2 from yavis.reddit.min.js
+graphics.setLinkProgram(Viva.Graph.View.webglDualColorLinkProgram());
+graphics.setNodeProgram(Viva.Graph.View.webglCustomNodeProgram());
+
+graphics
+.node(function(node){
+ var img = Viva.Graph.View.webglSquare(getNodeSize(node), getNodeColor(node));
+ return img;
+ })
+.link(function(link){
+ var fromColor, toColor;
+ fromColor = toColor = 0x808080;
+ var line = Viva.Graph.View.webglDualColorLine(fromColor, toColor);
+ line.oldStart = fromColor;
+ line.oldEnd = toColor;
+ return line;
+});
+
+var renderer = Viva.Graph.View.renderer(graph,{
+ layout : layout,
+ graphics : graphics,
+ container : document.getElementById('g')
+ //prerender : 10
+});
+
+
+
+var events = Viva.Graph.webglInputEvents(graphics, graph),
+lastHovered = null,
+
+colorLinks = function(node, color) {
+ if (node && node.id) {
+ graph.forEachLinkedNode(node.id, function(node, link){
+ if (color) {
+ link.ui.start = link.ui.end = color;
+ } else {
+ //link.ui.start = link.ui.oldStart;
+ //link.ui.end =link.ui.oldEnd;
+ link.ui.start = link.ui.end = 0x80808040;
+ }
+ });
+ }
+};
+
+events.mouseEnter(function(node){
+
+ getNodeDetails(node);
+
+ colorLinks(lastHovered);
+ lastHovered = node;
+
+ graph.forEachLinkedNode(node.id, function(node, link){
+ link.ui.start = link.ui.end = 0xffffffff;
+ graphics.bringLinkToFront(link.ui);
+ });
+
+ renderer.rerender();
+}).mouseLeave(function(node) {
+
+ colorLinks(lastHovered);
+ lastHovered = null;
+
+ colorLinks(node);
+ renderer.rerender();
+});
+
+
+// pause rendere on spacebar
+var paused = false;
+$(window).keydown(function(e) {
+ if (e.keyCode === 32) { // toggle on spacebar;
+ e.preventDefault();
+ paused = !paused;
+ if (paused) { renderer.pause(); }
+ else { renderer.resume(); }
+
+ }
+});
+
+var width = $("#g").width(),
+ height= $("#g").height();
+
+renderer.run();
+graphics.scale(0.15, {x : width/2, y : height/2});
+
+// websockets part
+
+
+var linksBuffer = [];
+var wsUri = "wss://ws.blockchain.info/inv";
+if (document.location.protocol.indexOf("https") === 0) {
+ wsUri = "wss://ws.blockchain.info/inv";
+}
+var output;
+
+ function init() {
+ output = document.getElementById("output");
+ testWebSocket();
+ }
+
+
+ var colorNodes = function(node, color) {
+ if (node && node.id) {
+ graph.forEachNode(function(node){
+ if (color) {
+ node.ui.color = color;
+ }
+ });
+ }
+ };
+
+ function addNodes(link){
+
+ if(link.t == "i"){
+ var node = graph.getNode(link.from);
+ if( !node ){
+ graph.addNode(link.from,{s:link.value,t:link.t});
+ } else {
+ // such a node already exists
+ if(node.data && node.data.t && node.data.t == "o" ){
+ node.data.t = "io";
+ node.ui.color = 0xFFFFFF;
+ renderer.rerender();
+ }
+ }
+ } else if(link.t == "o"){
+ var node = graph.getNode(link.to);
+ if( ! node){
+ graph.addNode(link.to,{s:link.value,t:link.t});
+ } else {
+ // such a node alredy exists.
+ if(node.data && node.data.t && node.data.t == "i"){
+ node.data.t = "oi";
+ node.ui.color = 0x9932CC;
+ renderer.rerender();
+ }
+ }
+ }
+ }
+
+ function testWebSocket() {
+ websocket = new WebSocket(wsUri);
+ websocket.onopen = function(evt) { onOpen(evt) };
+ websocket.onclose = function(evt) { onClose(evt) };
+ websocket.onmessage = function(evt) { onMessage(evt) };
+ websocket.onerror = function(evt) { onError(evt) }; }
+
+ function onOpen(evt) {
+ writeToScreen("CONNECTED");
+ doSend({"op":"unconfirmed_sub"});
+ }
+
+ function onClose(evt) { writeToScreen("DISCONNECTED"); }
+
+ function onMessage(evt) {
+ // parse message
+ var msg = JSON.parse(evt.data);
+ var txHash = msg.x.hash;
+ if(msg.op == "utx"){
+ // uncorfimed transactions
+ var inputs = msg.x.inputs;
+ var outputs = msg.x.out;
+ // generate from to
+ var links = [];
+ var txValue=0;
+ for(var i=0;i=1&&txValue<10){txCount10++; }
+ else if(txValue>=10&&txValue<50){txCount50++;}
+ else if(txValue50>=50&&txValue<100){txCount100++; }
+ else if(txValue>=100){txCount1000++; }
+ document.getElementById("output2").innerHTML = "Total:"+totalBTC+" BTC 0-1: "+txCount1+" BTC 1-10: "+txCount10+" BTC 10-50: "+txCount50+" BTC 50-100: "+txCount100+" BTC 100+: "+txCount1000;
+
+
+ }
+
+
+
+
+ for(var i=0;ifrom: ' + link.from+' to ' +link.to+' value: '+ (link.value/100000000)+'');
+ }
+ //websocket.close();
+ }
+
+ function onError(evt) {
+ writeToScreen('ERROR: ' + evt.data);
+ }
+
+ function doSend(message) {
+ //writeToScreen("SENT: " + JSON.stringify(message));
+ websocket.send(JSON.stringify(message));
+ }
+
+ function writeToScreen(message) {
+ var pre = document.createElement("p");
+ pre.style.wordWrap = "break-word";
+ pre.innerHTML = message;
+ output.appendChild(pre);
+ }
+
+ window.addEventListener("load", init, false);
+ window.l = layout;
+ window.g = graph;
+ window.r = renderer;
+
+ $("input[name='scaleType']").change(function(){
+ scaleType = this.value;
+ graph.forEachNode(function(node){
+ node.ui.size = getNodeSize(node);
+ })
+ });
diff --git a/js/vivagraph.js b/js/vivagraph.js
new file mode 100644
index 0000000..31e0293
--- /dev/null
+++ b/js/vivagraph.js
@@ -0,0 +1,6517 @@
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+var Viva = Viva || {};
+
+Viva.Graph = Viva.Graph || {};
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = Viva;
+}
+Viva.Graph.version = '0.4.1';
+/**
+ * Extends target object with given fields/values in the options object.
+ * Unlike jQuery's extend this method does not override target object
+ * properties if their type matches corresponding type in the options object
+ */
+Viva.lazyExtend = function (target, options) {
+ var key;
+ if (!target) { target = {}; }
+ if (options) {
+ for (key in options) {
+ if (options.hasOwnProperty(key)) {
+ var targetHasIt = target.hasOwnProperty(key),
+ optionsValueType = typeof options[key],
+ shouldReplace = !targetHasIt || (typeof target[key] !== optionsValueType);
+
+ if (shouldReplace) {
+ target[key] = options[key];
+ } else if (optionsValueType === 'object') {
+ // go deep, don't care about loops here, we are simple API!:
+ target[key] = Viva.lazyExtend(target[key], options[key]);
+ }
+ }
+ }
+ }
+
+ return target;
+};
+/**
+ * Implenetation of seeded pseudo random number generator, based on LFIB4 algorithm.
+ *
+ * Usage example:
+ * var random = Viva.random('random seed', 'can', 'be', 'multiple strings'),
+ * i = random.next(100); // returns random number from [0 .. 100) range.
+ */
+
+Viva.random = function () {
+ // From http://baagoe.com/en/RandomMusings/javascript/
+ function getMash() {
+ var n = 0xefc8249d;
+
+ var mash = function (data) {
+ var i;
+ data = data.toString();
+ for (i = 0; i < data.length; i++) {
+ n += data.charCodeAt(i);
+ var h = 0.02519603282416938 * n;
+ n = h >>> 0;
+ h -= n;
+ h *= n;
+ n = h >>> 0;
+ h -= n;
+ n += h * 0x100000000; // 2^32
+ }
+ return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
+ };
+
+ mash.version = 'Mash 0.9';
+ return mash;
+ }
+
+ function LFIB4(args) {
+ return (function (args) {
+ // George Marsaglia's LFIB4,
+ //http://groups.google.com/group/sci.crypt/msg/eb4ddde782b17051
+ var k0 = 0,
+ k1 = 58,
+ k2 = 119,
+ k3 = 178,
+ j,
+ i,
+ s = [],
+ mash = getMash();
+
+ if (args.length === 0) {
+ args = [+new Date()];
+ }
+
+ for (j = 0; j < 256; j++) {
+ s[j] = mash(' ');
+ s[j] -= mash(' ') * 4.76837158203125e-7; // 2^-21
+ if (s[j] < 0) {
+ s[j] += 1;
+ }
+ }
+
+ for (i = 0; i < args.length; i++) {
+ for (j = 0; j < 256; j++) {
+ s[j] -= mash(args[i]);
+ s[j] -= mash(args[i]) * 4.76837158203125e-7; // 2^-21
+ if (s[j] < 0) {
+ s[j] += 1;
+ }
+ }
+ }
+
+ mash = null;
+
+ var random = function () {
+ var x;
+
+ k0 = (k0 + 1) & 255;
+ k1 = (k1 + 1) & 255;
+ k2 = (k2 + 1) & 255;
+ k3 = (k3 + 1) & 255;
+
+ x = s[k0] - s[k1];
+ if (x < 0) {
+ x += 1;
+ }
+ x -= s[k2];
+ if (x < 0) {
+ x += 1;
+ }
+ x -= s[k3];
+ if (x < 0) {
+ x += 1;
+ }
+
+ s[k0] = x;
+ return x;
+ };
+
+ random.uint32 = function () {
+ return random() * 0x100000000 >>> 0; // 2^32
+ };
+ random.fract53 = random;
+ random.version = 'LFIB4 0.9';
+ random.args = args;
+
+ return random;
+ }(args));
+ }
+
+ var randomFunc = new LFIB4(Array.prototype.slice.call(arguments));
+
+ return {
+ /**
+ * Generates random integer number in the range from 0 (inclusive) to maxValue (exclusive)
+ *
+ * @param maxValue is REQUIRED. Ommitit this numbe will result in NaN values from PRNG.
+ */
+ next : function (maxValue) {
+ return Math.floor(randomFunc() * maxValue);
+ },
+
+ /**
+ * Generates random double number in the range from 0 (inclusive) to 1 (exclusive)
+ * This function is the same as Math.random() (except that it could be seeded)
+ */
+ nextDouble : function () {
+ return randomFunc();
+ }
+ };
+};
+
+/**
+ * Iterates over array in arbitrary order. The iterator modifies actual array content.
+ * It's based on modern version of Fisher–Yates shuffle algorithm.
+ *
+ * @see http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
+ *
+ * @param array to be shuffled
+ * @param random - a [seeded] random number generator to produce same sequences. This parameter
+ * is optional. If you don't need determenistic randomness keep it blank.
+ */
+Viva.randomIterator = function (array, random) {
+ random = random || Viva.random();
+
+ return {
+ forEach : function (callback) {
+ var i, j, t;
+ for (i = array.length - 1; i > 0; --i) {
+ j = random.next(i + 1); // i inclusive
+ t = array[j];
+ array[j] = array[i];
+ array[i] = t;
+
+ callback(t);
+ }
+
+ if (array.length) {
+ callback(array[0]);
+ }
+ },
+
+ /**
+ * Shuffles array randomly.
+ */
+ shuffle : function () {
+ var i, j, t;
+ for (i = array.length - 1; i > 0; --i) {
+ j = random.next(i + 1); // i inclusive
+ t = array[j];
+ array[j] = array[i];
+ array[i] = t;
+ }
+
+ return array;
+ }
+ };
+};
+Viva.BrowserInfo = (function () {
+ if (typeof window === "undefined" || !window.hasOwnProperty("navigator")) {
+ return {
+ browser : "",
+ version : "0"
+ };
+ }
+
+ var ua = window.navigator.userAgent.toLowerCase(),
+ // Useragent RegExp
+ rwebkit = /(webkit)[ \/]([\w.]+)/,
+ ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
+ rmsie = /(msie) ([\w.]+)/,
+ rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
+ match = rwebkit.exec(ua) ||
+ ropera.exec(ua) ||
+ rmsie.exec(ua) ||
+ (ua.indexOf("compatible") < 0 && rmozilla.exec(ua)) ||
+ [];
+
+ return {
+ browser: match[1] || "",
+ version: match[2] || "0"
+ };
+}());
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.Utils = Viva.Graph.Utils || {};
+
+Viva.Graph.Utils.indexOfElementInArray = function (element, array) {
+ if (array.indexOf) {
+ return array.indexOf(element);
+ }
+
+ var len = array.length,
+ i;
+
+ for (i = 0; i < len; i += 1) {
+ if (array.hasOwnProperty(i) && (array[i] === element)) {
+ return i;
+ }
+ }
+
+ return -1;
+};
+Viva.Graph.Utils = Viva.Graph.Utils || {};
+
+Viva.Graph.Utils.getDimension = function (container) {
+ if (!container) {
+ throw {
+ message : 'Cannot get dimensions of undefined container'
+ };
+ }
+
+ // TODO: Potential cross browser bug.
+ var width = container.clientWidth;
+ var height = container.clientHeight;
+
+ return {
+ left : 0,
+ top : 0,
+ width : width,
+ height : height
+ };
+};
+
+/**
+ * Finds the absolute position of an element on a page
+ */
+Viva.Graph.Utils.findElementPosition = function (obj) {
+ var curleft = 0,
+ curtop = 0;
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while ((obj = obj.offsetParent) !== null);
+ }
+
+ return [curleft, curtop];
+};/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.Utils = Viva.Graph.Utils || {};
+
+// TODO: I don't really like the way I implemented events. It looks clumsy and
+// hard to understand. Refactor it.
+
+// TODO: This is really painful. Please don't use this class anymore, I will
+// definitely depricate it or update its interface.
+
+/**
+ * Allows to start/stop listen to element's events. An element can be arbitrary
+ * DOM element, or object with eventuality behavior.
+ *
+ * To add eventuality behavior to arbitrary object 'obj' call
+ * Viva.Graph.Utils.event(obj).extend() method.
+ * After this call is made the object can use obj.fire(eventName, params) method, and listeners
+ * can listen to event by Viva.Graph.Utils.events(obj).on(eventName, callback) method.
+ */
+Viva.Graph.Utils.events = function (element) {
+
+ /**
+ * Extends arbitrary object with fire method and allows it to be used with on/stop methods.
+ *
+ * This behavior is based on Crockford's eventuality example, but with a minor changes:
+ * - fire() method accepts parameters to pass to callbacks (instead of setting them in 'on' method)
+ * - on() method is replaced with addEventListener(), to let objects be used as a DOM objects.
+ * - behavoir contract is simplified to "string as event name"/"function as callback" convention.
+ * - removeEventListener() method added to let unsubscribe from events.
+ */
+ var eventuality = function (that) {
+ var registry = {};
+
+ /**
+ * Fire an event on an object. The event is a string containing the name of the event
+ * Handlers registered by the 'addEventListener' method that match the event name
+ * will be invoked.
+ */
+ that.fire = function (eventName, parameters) {
+ var registeredHandlers,
+ callback,
+ handler,
+ i;
+
+ if (typeof eventName !== "string") {
+ throw "Only strings can be used as even type";
+ }
+
+ // If an array of handlers exist for this event, then
+ // loop through it and execute the handlers in order.
+ if (registry.hasOwnProperty(eventName)) {
+ registeredHandlers = registry[eventName];
+ for (i = 0; i < registeredHandlers.length; ++i) {
+ handler = registeredHandlers[i];
+ callback = handler.method;
+ callback(parameters);
+ }
+ }
+
+ return this;
+ };
+
+ that.addEventListener = function (eventName, callback) {
+ if (typeof callback !== "function") {
+ throw "Only functions allowed to be callbacks";
+ }
+
+ var handler = {
+ method: callback
+ };
+ if (registry.hasOwnProperty(eventName)) {
+ registry[eventName].push(handler);
+ } else {
+ registry[eventName] = [handler];
+ }
+
+ return this;
+ };
+
+ that.removeEventListener = function (eventName, callback) {
+ if (typeof callback !== "function") {
+ throw "Only functions allowed to be callbacks";
+ }
+
+ if (registry.hasOwnProperty(eventName)) {
+ var handlers = registry[eventName],
+ i;
+
+ for (i = 0; i < handlers.length; ++i) {
+ if (handlers[i].callback === callback) {
+ handlers.splice(i);
+ break;
+ }
+ }
+ }
+
+ return this;
+ };
+
+ that.removeAllListeners = function () {
+ var eventName;
+ for (eventName in registry) {
+ if (registry.hasOwnProperty(eventName)) {
+ delete registry[eventName];
+ }
+ }
+ };
+
+ return that;
+ };
+
+ return {
+ /**
+ * Registes callback to be called when element fires event with given event name.
+ */
+ on : function (eventName, callback) {
+ if (element.addEventListener) {// W3C DOM and eventuality objecets.
+ element.addEventListener(eventName, callback, false);
+ } else if (element.attachEvent) { // IE DOM
+ element.attachEvent("on" + eventName, callback);
+ }
+
+ return this;
+ },
+
+ /**
+ * Unsubcribes from object's events.
+ */
+ stop : function (eventName, callback) {
+ if (element.removeEventListener) {
+ element.removeEventListener(eventName, callback, false);
+ } else if (element.detachEvent) {
+ element.detachEvent("on" + eventName, callback);
+ }
+ },
+
+ /**
+ * Adds eventuality to arbitrary JavaScript object. Eventuality adds
+ * fire(), addEventListner() and removeEventListners() to the target object.
+ *
+ * This is required if you want to use object with on(), stop() methods.
+ */
+ extend : function () {
+ return eventuality(element);
+ }
+ };
+};/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.Utils = Viva.Graph.Utils || {};
+
+// TODO: Move to input namespace
+// TODO: Methods should be extracted into the prototype. This class
+// does not need to consume so much memory for every tracked element
+Viva.Graph.Utils.dragndrop = function (element) {
+ var start,
+ drag,
+ end,
+ scroll,
+ prevSelectStart,
+ prevDragStart,
+ documentEvents = Viva.Graph.Utils.events(window.document),
+ elementEvents = Viva.Graph.Utils.events(element),
+ findElementPosition = Viva.Graph.Utils.findElementPosition,
+
+ startX = 0,
+ startY = 0,
+ dragObject,
+ touchInProgress = false,
+ pinchZoomLength = 0,
+
+ getMousePos = function (e) {
+ var posx = 0,
+ posy = 0;
+
+ e = e || window.event;
+
+ if (e.pageX || e.pageY) {
+ posx = e.pageX;
+ posy = e.pageY;
+ } else if (e.clientX || e.clientY) {
+ posx = e.clientX + window.document.body.scrollLeft + window.document.documentElement.scrollLeft;
+ posy = e.clientY + window.document.body.scrollTop + window.document.documentElement.scrollTop;
+ }
+
+ return [posx, posy];
+ },
+
+ move = function (e, clientX, clientY) {
+ if (drag) {
+ drag(e, {x : clientX - startX, y : clientY - startY });
+ }
+
+ startX = clientX;
+ startY = clientY;
+ },
+
+ stopPropagation = function (e) {
+ if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }
+ },
+ preventDefault = function (e) {
+ if (e.preventDefault) { e.preventDefault(); }
+ },
+
+ handleDisabledEvent = function (e) {
+ stopPropagation(e);
+ return false;
+ },
+
+ handleMouseMove = function (e) {
+ e = e || window.event;
+
+ move(e, e.clientX, e.clientY);
+ },
+
+ handleMouseDown = function (e) {
+ e = e || window.event;
+ if (touchInProgress) {
+ // modern browsers will fire mousedown for touch events too
+ // we do not want this, since touch is handled separately.
+ stopPropagation(e);
+ return false;
+ }
+ // for IE, left click == 1
+ // for Firefox, left click == 0
+ var isLeftButton = ((e.button === 1 && window.event !== null) || e.button === 0);
+
+ if (isLeftButton) {
+ startX = e.clientX;
+ startY = e.clientY;
+
+ // TODO: bump zIndex?
+ dragObject = e.target || e.srcElement;
+
+ if (start) { start(e, {x: startX, y : startY}); }
+
+ documentEvents.on('mousemove', handleMouseMove);
+ documentEvents.on('mouseup', handleMouseUp);
+
+
+ stopPropagation(e);
+ // TODO: What if event already there? Not bullet proof:
+ prevSelectStart = window.document.onselectstart;
+ prevDragStart = window.document.ondragstart;
+
+ window.document.onselectstart = handleDisabledEvent;
+ dragObject.ondragstart = handleDisabledEvent;
+
+ // prevent text selection (except IE)
+ return false;
+ }
+ },
+
+ handleMouseUp = function (e) {
+ e = e || window.event;
+
+ documentEvents.stop('mousemove', handleMouseMove);
+ documentEvents.stop('mouseup', handleMouseUp);
+
+ window.document.onselectstart = prevSelectStart;
+ dragObject.ondragstart = prevDragStart;
+ dragObject = null;
+ if (end) { end(e); }
+ },
+
+ handleMouseWheel = function (e) {
+ if (typeof scroll !== 'function') {
+ return;
+ }
+
+ e = e || window.event;
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+
+ e.returnValue = false;
+ var delta,
+ mousePos = getMousePos(e),
+ elementOffset = findElementPosition(element),
+ relMousePos = {
+ x: mousePos[0] - elementOffset[0],
+ y: mousePos[1] - elementOffset[1]
+ };
+
+ if (e.wheelDelta) {
+ delta = e.wheelDelta / 360; // Chrome/Safari
+ } else {
+ delta = e.detail / -9; // Mozilla
+ }
+
+ scroll(e, delta, relMousePos);
+ },
+
+ updateScrollEvents = function (scrollCallback) {
+ if (!scroll && scrollCallback) {
+ // client is interested in scrolling. Start listening to events:
+ if (Viva.BrowserInfo.browser === 'webkit') {
+ element.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
+ } else {
+ element.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
+ }
+ } else if (scroll && !scrollCallback) {
+ if (Viva.BrowserInfo.browser === 'webkit') {
+ element.removeEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
+ } else {
+ element.removeEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
+ }
+ }
+
+ scroll = scrollCallback;
+ },
+
+ getPinchZoomLength = function(finger1, finger2) {
+ return (finger1.clientX - finger2.clientX) * (finger1.clientX - finger2.clientX) +
+ (finger1.clientY - finger2.clientY) * (finger1.clientY - finger2.clientY);
+ },
+
+ handleTouchMove = function (e) {
+ if (e.touches.length === 1) {
+ stopPropagation(e);
+
+ var touch = e.touches[0];
+ move(e, touch.clientX, touch.clientY);
+ } else if (e.touches.length === 2) {
+ // it's a zoom:
+ var currentPinchLength = getPinchZoomLength(e.touches[0], e.touches[1]);
+ var delta = 0;
+ if (currentPinchLength < pinchZoomLength) {
+ delta = -1;
+ } else if (currentPinchLength > pinchZoomLength) {
+ delta = 1;
+ }
+ scroll(e, delta, {x: e.touches[0].clientX, y: e.touches[0].clientY});
+ pinchZoomLength = currentPinchLength;
+ stopPropagation(e);
+ preventDefault(e);
+ }
+ },
+
+ handleTouchEnd = function (e) {
+ touchInProgress = false;
+ documentEvents.stop('touchmove', handleTouchMove);
+ documentEvents.stop('touchend', handleTouchEnd);
+ documentEvents.stop('touchcancel', handleTouchEnd);
+ dragObject = null;
+ if (end) { end(e); }
+ },
+
+ handleSignleFingerTouch = function (e, touch) {
+ stopPropagation(e);
+ preventDefault(e);
+
+ startX = touch.clientX;
+ startY = touch.clientY;
+
+ dragObject = e.target || e.srcElement;
+
+ if (start) { start(e, {x: startX, y : startY}); }
+ // TODO: can I enter into the state when touch is in progress
+ // but it's still a single finger touch?
+ if (!touchInProgress) {
+ touchInProgress = true;
+ documentEvents.on('touchmove', handleTouchMove);
+ documentEvents.on('touchend', handleTouchEnd);
+ documentEvents.on('touchcancel', handleTouchEnd);
+ }
+ },
+
+ handleTouchStart = function (e) {
+ console.log('Touch start for ', element);
+ if (e.touches.length === 1) {
+ return handleSignleFingerTouch(e, e.touches[0]);
+ } else if (e.touches.length === 2) {
+ // handleTouchMove() will care about pinch zoom.
+ stopPropagation(e);
+ preventDefault(e);
+
+ pinchZoomLength = getPinchZoomLength(e.touches[0], e.touches[1]);
+
+ }
+ // don't care about the rest.
+ };
+
+
+ elementEvents.on('mousedown', handleMouseDown);
+ elementEvents.on('touchstart', handleTouchStart);
+
+ return {
+ onStart : function (callback) {
+ start = callback;
+ return this;
+ },
+
+ onDrag : function (callback) {
+ drag = callback;
+ return this;
+ },
+
+ onStop : function (callback) {
+ end = callback;
+ return this;
+ },
+
+ /**
+ * Occurs when mouse wheel event happens. callback = function(e, scrollDelta, scrollPoint);
+ */
+ onScroll : function (callback) {
+ updateScrollEvents(callback);
+ return this;
+ },
+
+ release : function () {
+ // TODO: could be unsafe. We might wanna release dragObject, etc.
+ documentEvents.stop('mousemove', handleMouseMove);
+ documentEvents.stop('mousedown', handleMouseDown);
+ documentEvents.stop('mouseup', handleMouseUp);
+ documentEvents.stop('touchmove', handleTouchMove);
+ documentEvents.stop('touchend', handleTouchEnd);
+ documentEvents.stop('touchcancel', handleTouchEnd);
+
+ updateScrollEvents(null);
+ }
+ };
+};
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Input = Viva.Input || {};
+Viva.Input.domInputManager = function () {
+ return {
+ /**
+ * Called by renderer to listen to drag-n-drop events from node. E.g. for CSS/SVG
+ * graphics we may listen to DOM events, whereas for WebGL the graphics
+ * should provide custom eventing mechanism.
+ *
+ * @param node - to be monitored.
+ * @param handlers - object with set of three callbacks:
+ * onStart: function(),
+ * onDrag: function(e, offset),
+ * onStop: function()
+ */
+ bindDragNDrop : function (node, handlers) {
+ if (handlers) {
+ var events = Viva.Graph.Utils.dragndrop(node.ui);
+ if (typeof handlers.onStart === 'function') {
+ events.onStart(handlers.onStart);
+ }
+ if (typeof handlers.onDrag === 'function') {
+ events.onDrag(handlers.onDrag);
+ }
+ if (typeof handlers.onStop === 'function') {
+ events.onStop(handlers.onStop);
+ }
+
+ node.events = events;
+ } else if (node.events) {
+ // TODO: i'm not sure if this is required in JS world...
+ node.events.release();
+ node.events = null;
+ delete node.events;
+ }
+ }
+ };
+};
+/**
+ * Allows querying graph nodes position at given point.
+ *
+ * @param graph - graph to be queried.
+ * @param toleranceOrCheckCallback - if it's a number then it represents offest
+ * in pixels from any node position to be considered a part of the node.
+ * if it's a function then it's called for every node to check intersection
+ *
+ * TODO: currently it performes linear search. Use real spatial index to improve performance.
+ */
+Viva.Graph.spatialIndex = function (graph, toleranceOrCheckCallback) {
+ var getNodeFunction,
+ preciseCheckCallback,
+ tolerance = 16;
+
+ if (typeof toleranceOrCheckCallback === 'function') {
+ preciseCheckCallback = toleranceOrCheckCallback;
+ getNodeFunction = function (x, y) {
+ var foundNode = null;
+ graph.forEachNode(function (node) {
+ if (preciseCheckCallback(node, x, y)) {
+ foundNode = node;
+ return true;
+ }
+ });
+
+ return foundNode;
+ };
+ } else if (typeof toleranceOrCheckCallback === 'number') {
+ tolerance = toleranceOrCheckCallback;
+ getNodeFunction = function (x, y) {
+ var foundNode = null;
+
+ graph.forEachNode(function (node) {
+ var pos = node.position;
+
+ if (pos.x - tolerance < x && x < pos.x + tolerance &&
+ pos.y - tolerance < y && y < pos.y + tolerance) {
+
+ foundNode = node;
+ return true;
+ }
+ });
+
+ return foundNode;
+ };
+ }
+
+
+ return {
+ getNodeAt : getNodeFunction
+ };
+};
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.Utils = Viva.Graph.Utils || {};
+
+(function () {
+ var lastTime = 0,
+ vendors = ['ms', 'moz', 'webkit', 'o'],
+ i,
+ scope;
+
+ if (typeof window !== 'undefined') {
+ scope = window;
+ } else if (typeof global !== 'undefined') {
+ scope = global;
+ } else {
+ scope = {
+ setTimeout: function () {},
+ clearTimeout: function () {}
+ };
+ }
+ for (i = 0; i < vendors.length && !scope.requestAnimationFrame; ++i) {
+ var vendorPrefix = vendors[i];
+ scope.requestAnimationFrame = scope[vendorPrefix + 'RequestAnimationFrame'];
+ scope.cancelAnimationFrame =
+ scope[vendorPrefix + 'CancelAnimationFrame'] || scope[vendorPrefix + 'CancelRequestAnimationFrame'];
+ }
+
+ if (!scope.requestAnimationFrame) {
+ scope.requestAnimationFrame = function (callback) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = scope.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ }
+
+ if (!scope.cancelAnimationFrame) {
+ scope.cancelAnimationFrame = function (id) {
+ scope.clearTimeout(id);
+ };
+ }
+
+ /**
+ * Timer that fires callback with given interval (in ms) until
+ * callback returns true;
+ */
+ Viva.Graph.Utils.timer = function (callback) {
+ var intervalId,
+ stopTimer = function () {
+ scope.cancelAnimationFrame(intervalId);
+ intervalId = 0;
+ },
+
+ startTimer = function () {
+ intervalId = scope.requestAnimationFrame(startTimer);
+ if (!callback()) {
+ stopTimer();
+ }
+ };
+
+ startTimer(); // start it right away.
+
+ return {
+ /**
+ * Stops execution of the callback
+ */
+ stop: stopTimer,
+
+ restart : function () {
+ if (!intervalId) {
+ startTimer();
+ }
+ }
+ };
+ };
+}());Viva.Graph.geom = function () {
+
+ return {
+ // function from Graphics GEM to determine lines intersection:
+ // http://www.opensource.apple.com/source/graphviz/graphviz-498/graphviz/dynagraph/common/xlines.c
+ intersect : function (x1, y1, x2, y2, // first line segment
+ x3, y3, x4, y4) { // second line segment
+ var a1, a2, b1, b2, c1, c2, /* Coefficients of line eqns. */
+ r1, r2, r3, r4, /* 'Sign' values */
+ denom, offset, num, /* Intermediate values */
+ result = { x: 0, y : 0};
+
+ /* Compute a1, b1, c1, where line joining points 1 and 2
+ * is "a1 x + b1 y + c1 = 0".
+ */
+ a1 = y2 - y1;
+ b1 = x1 - x2;
+ c1 = x2 * y1 - x1 * y2;
+
+ /* Compute r3 and r4.
+ */
+ r3 = a1 * x3 + b1 * y3 + c1;
+ r4 = a1 * x4 + b1 * y4 + c1;
+
+ /* Check signs of r3 and r4. If both point 3 and point 4 lie on
+ * same side of line 1, the line segments do not intersect.
+ */
+
+ if (r3 !== 0 && r4 !== 0 && ((r3 >= 0) === (r4 >= 4))) {
+ return null; //no itersection.
+ }
+
+ /* Compute a2, b2, c2 */
+ a2 = y4 - y3;
+ b2 = x3 - x4;
+ c2 = x4 * y3 - x3 * y4;
+
+ /* Compute r1 and r2 */
+
+ r1 = a2 * x1 + b2 * y1 + c2;
+ r2 = a2 * x2 + b2 * y2 + c2;
+
+ /* Check signs of r1 and r2. If both point 1 and point 2 lie
+ * on same side of second line segment, the line segments do
+ * not intersect.
+ */
+ if (r1 !== 0 && r2 !== 0 && ((r1 >= 0) === (r2 >= 0))) {
+ return null; // no intersection;
+ }
+ /* Line segments intersect: compute intersection point.
+ */
+
+ denom = a1 * b2 - a2 * b1;
+ if (denom === 0) {
+ return null; // Actually collinear..
+ }
+
+ offset = denom < 0 ? -denom / 2 : denom / 2;
+ offset = 0.0;
+
+ /* The denom/2 is to get rounding instead of truncating. It
+ * is added or subtracted to the numerator, depending upon the
+ * sign of the numerator.
+ */
+
+
+ num = b1 * c2 - b2 * c1;
+ result.x = (num < 0 ? num - offset : num + offset) / denom;
+
+ num = a2 * c1 - a1 * c2;
+ result.y = (num < 0 ? num - offset : num + offset) / denom;
+
+ return result;
+ },
+
+ /**
+ * Returns intersection point of the rectangle defined by
+ * left, top, right, bottom and a line starting in x1, y1
+ * and ending in x2, y2;
+ */
+ intersectRect : function (left, top, right, bottom, x1, y1, x2, y2) {
+ return this.intersect(left, top, left, bottom, x1, y1, x2, y2) ||
+ this.intersect(left, bottom, right, bottom, x1, y1, x2, y2) ||
+ this.intersect(right, bottom, right, top, x1, y1, x2, y2) ||
+ this.intersect(right, top, left, top, x1, y1, x2, y2);
+ },
+
+ convexHull : function (points) {
+ var polarAngleSort = function (basePoint, points) {
+ var cosAngle = function (p) {
+ var dx = p.x - basePoint.x,
+ dy = p.y - basePoint.y,
+ sign = dx > 0 ? 1 : -1;
+
+ // We use squared dx, to avoid Sqrt opertion and improve performance.
+ // To avoid sign loss during dx * dx operation we precompute its sign:
+ return sign * dx * dx / (dx * dx + dy * dy);
+ },
+
+ sortedPoints = points.sort(function (p1, p2) {
+ return cosAngle(p2) - cosAngle(p1);
+ }),
+
+ // If more than one point has the same angle, remove all but the one that is farthest from basePoint:
+ lastPoint = sortedPoints[0],
+ lastAngle = cosAngle(lastPoint),
+ dx = lastPoint.x - basePoint.x,
+ dy = lastPoint.y - basePoint.y,
+ lastDistance = dx * dx + dy * dy,
+ curDistance,
+ i;
+
+ for (i = 1; i < sortedPoints.length; ++i) {
+ lastPoint = sortedPoints[i];
+ var angle = cosAngle(lastPoint);
+ if (angle === lastAngle) {
+ dx = lastPoint.x - basePoint.x;
+ dy = lastPoint.y - basePoint.y;
+ curDistance = dx * dx + dy * dy;
+
+ if (curDistance < lastDistance) {
+ sortedPoints.splice(i, 1);
+ } else {
+ sortedPoints.splice(i - 1, 1);
+ }
+ } else {
+ lastAngle = angle;
+ }
+ }
+
+ return sortedPoints;
+ },
+
+ /**
+ * Returns true if angle formed by points p0, p1, p2 makes left turn.
+ * (counterclockwise)
+ */
+ ccw = function (p0, p1, p2) {
+ return ((p2.x - p0.x) * (p1.y - p0.y) - (p2.y - p0.y) * (p1.x - p0.x)) < 0;
+ };
+
+ if (points.length < 3) {
+ return points; // This one is easy... Not precise, but should be enough for now.
+ }
+
+ // let p0 be the point in Q with the minimum y-coordinate, or the leftmost
+ // such point in case of a tie
+ var p0Idx = 0,
+ i;
+ for (i = 0; i < points.length; ++i) {
+ if (points[i].y < points[p0Idx].y) {
+ p0Idx = i;
+ } else if (points[i].y === points[p0Idx].y && points[i].x < points[p0Idx].x) {
+ p0Idx = i;
+ }
+ }
+
+ var p0 = points[p0Idx];
+ // let be the remaining points
+ points.splice(p0Idx, 1);
+ // sorted by polar angle in counterclockwise order around p0
+ var sortedPoints = polarAngleSort(p0, points);
+ if (sortedPoints.length < 2) {
+ return sortedPoints;
+ }
+
+ // let S be empty stack
+ var s = [];
+ s.push(p0);
+ s.push(sortedPoints[0]);
+ s.push(sortedPoints[1]);
+ var sLength = s.length;
+ for (i = 2; i < sortedPoints.length; ++i) {
+ while (!ccw(s[sLength - 2], s[sLength - 1], sortedPoints[i])) {
+ s.pop();
+ sLength -= 1;
+ }
+
+ s.push(sortedPoints[i]);
+ sLength += 1;
+ }
+
+ return s;
+ }
+ };
+};/**
+ * Very generic rectangle.
+ */
+Viva.Graph.Rect = function (x1, y1, x2, y2) {
+ this.x1 = x1 || 0;
+ this.y1 = y1 || 0;
+ this.x2 = x2 || 0;
+ this.y2 = y2 || 0;
+};
+
+/**
+ * Very generic two-dimensional point.
+ */
+Viva.Graph.Point2d = function (x, y) {
+ this.x = x || 0;
+ this.y = y || 0;
+};
+
+/**
+ * Internal structure to represent node;
+ */
+Viva.Graph.Node = function (id) {
+ this.id = id;
+ this.links = [];
+ this.data = null;
+};
+
+/**
+ * Internal structure to represent links;
+ */
+Viva.Graph.Link = function (fromId, toId, data) {
+ this.fromId = fromId;
+ this.toId = toId;
+ this.data = data;
+};/**
+ * @fileOverview Contains definition of the core graph object.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+/**
+ * @namespace Represents a graph data structure.
+ *
+ * @example
+ * var g = Viva.Graph.graph();
+ * g.addNode(1); // g has one node.
+ * g.addLink(2, 3); // now g contains three nodes and one link.
+ *
+ */
+Viva.Graph.graph = function () {
+
+ // Graph structure is maintained as dictionary of nodes
+ // and array of links. Each node has 'links' property which
+ // hold all links related to that node. And general links
+ // array is used to speed up all links enumeration. This is inefficient
+ // in terms of memory, but simplifies coding. Furthermore, the graph structure
+ // is isolated from outter world, and can be changed to adjacency matrix later.
+
+ var nodes = {},
+ links = [],
+ nodesCount = 0,
+ suspendEvents = 0,
+
+ // Accumlates all changes made during graph updates.
+ // Each change element contains:
+ // changeType - one of the strings: 'add', 'remove' or 'update';
+ // node - if change is related to node this property is set to changed graph's node;
+ // link - if change is related to link this property is set to changed graph's link;
+ changes = [],
+
+ fireGraphChanged = function (graph) {
+ // TODO: maybe we shall copy changes?
+ graph.fire('changed', changes);
+ },
+
+ // Enter, Exit Mofidication allows bulk graph updates without firing events.
+ enterModification = function () {
+ suspendEvents += 1;
+ },
+
+ exitModification = function (graph) {
+ suspendEvents -= 1;
+ if (suspendEvents === 0 && changes.length > 0) {
+ fireGraphChanged(graph);
+ changes.length = 0;
+ }
+ },
+
+ recordNodeChange = function (node, changeType) {
+ // TODO: Could add changeType verification.
+ changes.push({node : node, changeType : changeType});
+ },
+
+ recordLinkChange = function (link, changeType) {
+ // TODO: Could add change type verification;
+ changes.push({link : link, changeType : changeType});
+ },
+
+ isArray = function (value) {
+ return value &&
+ typeof value === 'object' &&
+ typeof value.length === 'number' &&
+ typeof value.splice === 'function' &&
+ !(value.propertyIsEnumerable('length'));
+ };
+
+ /** @scope Viva.Graph.graph */
+ var graphPart = {
+
+ /**
+ * Adds node to the graph. If node with given id already exists in the graph
+ * its data is extended with whatever comes in 'data' argument.
+ *
+ * @param nodeId the node's identifier. A string is preferred.
+ * @param [data] additional data for the node being added. If node already
+ * exists its data object is augmented with the new one.
+ *
+ * @return {node} The newly added node or node with given id if it already exists.
+ */
+ addNode : function (nodeId, data) {
+ if (typeof nodeId === 'undefined') {
+ throw {
+ message: 'Invalid node identifier'
+ };
+ }
+
+ enterModification();
+
+ var node = this.getNode(nodeId);
+ if (!node) {
+ node = new Viva.Graph.Node(nodeId);
+ nodesCount++;
+
+ recordNodeChange(node, 'add');
+ } else {
+ recordNodeChange(node, 'update');
+ }
+
+ if (data) {
+ var augmentedData = node.data || {},
+ dataType = typeof data,
+ name;
+
+ if (dataType === 'string' || isArray(data) ||
+ dataType === 'number' || dataType === 'boolean') {
+ augmentedData = data;
+ } else if (dataType === 'undefined') {
+ augmentedData = null;
+ } else {
+ for (name in data) {
+ if (data.hasOwnProperty(name)) {
+ augmentedData[name] = data[name];
+ }
+ }
+ }
+
+ node.data = augmentedData;
+ }
+
+ nodes[nodeId] = node;
+
+ exitModification(this);
+ return node;
+ },
+
+ /**
+ * Adds a link to the graph. The function always create a new
+ * link between two nodes. If one of the nodes does not exists
+ * a new node is created.
+ *
+ * @param fromId link start node id;
+ * @param toId link end node id;
+ * @param [data] additional data to be set on the new link;
+ *
+ * @return {link} The newly created link
+ */
+ addLink : function (fromId, toId, data) {
+ enterModification();
+
+ var fromNode = this.getNode(fromId) || this.addNode(fromId);
+ var toNode = this.getNode(toId) || this.addNode(toId);
+
+ var link = new Viva.Graph.Link(fromId, toId, data);
+
+ links.push(link);
+
+ // TODO: this is not cool. On large graphs potentially would consume more memory.
+ fromNode.links.push(link);
+ toNode.links.push(link);
+
+ recordLinkChange(link, 'add');
+
+ exitModification(this);
+
+ return link;
+ },
+
+ /**
+ * Removes link from the graph. If link does not exist does nothing.
+ *
+ * @param link - object returned by addLink() or getLinks() methods.
+ *
+ * @returns true if link was removed; false otherwise.
+ */
+ removeLink : function (link) {
+ if (!link) { return false; }
+ var idx = Viva.Graph.Utils.indexOfElementInArray(link, links);
+ if (idx < 0) { return false; }
+
+ enterModification();
+
+ links.splice(idx, 1);
+
+ var fromNode = this.getNode(link.fromId);
+ var toNode = this.getNode(link.toId);
+
+ if (fromNode) {
+ idx = Viva.Graph.Utils.indexOfElementInArray(link, fromNode.links);
+ if (idx >= 0) {
+ fromNode.links.splice(idx, 1);
+ }
+ }
+
+ if (toNode) {
+ idx = Viva.Graph.Utils.indexOfElementInArray(link, toNode.links);
+ if (idx >= 0) {
+ toNode.links.splice(idx, 1);
+ }
+ }
+
+ recordLinkChange(link, 'remove');
+
+ exitModification(this);
+
+ return true;
+ },
+
+ /**
+ * Removes node with given id from the graph. If node does not exist in the graph
+ * does nothing.
+ *
+ * @param nodeId node's identifier passed to addNode() function.
+ *
+ * @returns true if node was removed; false otherwise.
+ */
+ removeNode: function (nodeId) {
+ var node = this.getNode(nodeId);
+ if (!node) { return false; }
+
+ enterModification();
+
+ while (node.links.length) {
+ var link = node.links[0];
+ this.removeLink(link);
+ }
+
+ nodes[nodeId] = null;
+ delete nodes[nodeId];
+ nodesCount--;
+
+ recordNodeChange(node, 'remove');
+
+ exitModification(this);
+ },
+
+ /**
+ * Gets node with given identifier. If node does not exist undefined value is returned.
+ *
+ * @param nodeId requested node identifier;
+ *
+ * @return {node} in with requested identifier or undefined if no such node exists.
+ */
+ getNode : function (nodeId) {
+ return nodes[nodeId];
+ },
+
+ /**
+ * Gets number of nodes in this graph.
+ *
+ * @return number of nodes in the graph.
+ */
+ getNodesCount : function () {
+ return nodesCount;
+ },
+
+ /**
+ * Gets total number of links in the graph.
+ */
+ getLinksCount : function () {
+ return links.length;
+ },
+
+ /**
+ * Gets all links (inbound and outbound) from the node with given id.
+ * If node with given id is not found null is returned.
+ *
+ * @param nodeId requested node identifier.
+ *
+ * @return Array of links from and to requested node if such node exists;
+ * otherwise null is returned.
+ */
+ getLinks : function (nodeId) {
+ var node = this.getNode(nodeId);
+ return node ? node.links : null;
+ },
+
+ /**
+ * Invokes callback on each node of the graph.
+ *
+ * @param {Function(node)} callback Function to be invoked. The function
+ * is passed one argument: visited node.
+ */
+ forEachNode : function (callback) {
+ if (typeof callback !== 'function') {
+ return;
+ }
+ var node;
+
+ // TODO: could it be faster for nodes iteration if we had indexed access?
+ // I.e. use array + 'for' iterator instead of dictionary + 'for .. in'?
+ for (node in nodes) {
+ // For performance reasons you might want to sacrifice this sanity check:
+ if (nodes.hasOwnProperty(node)) {
+ if (callback(nodes[node])) {
+ return; // client doesn't want to proceed. return.
+ }
+ }
+ }
+ },
+
+ /**
+ * Invokes callback on every linked (adjacent) node to the given one.
+ *
+ * @param nodeId Identifier of the requested node.
+ * @param {Function(node, link)} callback Function to be called on all linked nodes.
+ * The function is passed two parameters: adjacent node and link object itself.
+ * @param oriented if true graph treated as oriented.
+ */
+ forEachLinkedNode : function (nodeId, callback, oriented) {
+ var node = this.getNode(nodeId),
+ i,
+ link,
+ linkedNodeId;
+
+ if (node && node.links && typeof callback === 'function') {
+ // Extraced orientation check out of the loop to increase performance
+ if (oriented) {
+ for (i = 0; i < node.links.length; ++i) {
+ link = node.links[i];
+ if (link.fromId === nodeId) {
+ callback(nodes[link.toId], link);
+ }
+ }
+ } else {
+ for (i = 0; i < node.links.length; ++i) {
+ link = node.links[i];
+ linkedNodeId = link.fromId === nodeId ? link.toId : link.fromId;
+
+ callback(nodes[linkedNodeId], link);
+ }
+ }
+ }
+ },
+
+ /**
+ * Enumerates all links in the graph
+ *
+ * @param {Function(link)} callback Function to be called on all links in the graph.
+ * The function is passed one parameter: graph's link object.
+ *
+ * Link object contains at least the following fields:
+ * fromId - node id where link starts;
+ * toId - node id where link ends,
+ * data - additional data passed to graph.addLink() method.
+ */
+ forEachLink : function (callback) {
+ var i;
+ if (typeof callback === 'function') {
+ for (i = 0; i < links.length; ++i) {
+ callback(links[i]);
+ }
+ }
+ },
+
+ /**
+ * Suspend all notifications about graph changes until
+ * endUpdate is called.
+ */
+ beginUpdate : function () {
+ enterModification();
+ },
+
+ /**
+ * Resumes all notifications about graph changes and fires
+ * graph 'changed' event in case there are any pending changes.
+ */
+ endUpdate : function () {
+ exitModification(this);
+ },
+
+ /**
+ * Removes all nodes and links from the graph.
+ */
+ clear : function () {
+ var that = this;
+ that.beginUpdate();
+ that.forEachNode(function (node) { that.removeNode(node.id); });
+ that.endUpdate();
+ },
+
+ /**
+ * Detects whether there is a link between two nodes.
+ * Operation complexity is O(n) where n - number of links of a node.
+ *
+ * @returns link if there is one. null otherwise.
+ */
+ hasLink : function (fromNodeId, toNodeId) {
+ // TODO: Use adjacency matrix to speed up this operation.
+ var node = this.getNode(fromNodeId),
+ i;
+ if (!node) {
+ return null;
+ }
+
+ for (i = 0; i < node.links.length; ++i) {
+ var link = node.links[i];
+ if (link.fromId === fromNodeId && link.toId === toNodeId) {
+ return link;
+ }
+ }
+
+ return null; // no link.
+ }
+ };
+
+ // Let graph fire events before we return it to the caller.
+ Viva.Graph.Utils.events(graphPart).extend();
+
+ return graphPart;
+};/**
+ * @fileOverview Contains collection of primitve operations under graph.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.operations = function () {
+
+ return {
+ /**
+ * Gets graph density, which is a ratio of actual number of edges to maximum
+ * number of edges. I.e. graph density 1 means all nodes are connected with each other with an edge.
+ * Density 0 - graph has no edges. Runtime: O(1)
+ *
+ * @param graph represents oriented graph structure.
+ *
+ * @returns density of the graph if graph has nodes. NaN otherwise
+ */
+ density : function (graph) {
+ var nodes = graph.getNodesCount();
+ if (nodes === 0) {
+ return NaN;
+ }
+
+ return 2 * graph.getLinksCount() / (nodes * (nodes - 1));
+ }
+ };
+};
+Viva.Graph.Physics = Viva.Graph.Physics || {};
+
+Viva.Graph.Physics.Vector = function (x, y) {
+ this.x = x || 0;
+ this.y = y || 0;
+};
+
+Viva.Graph.Physics.Vector.prototype = {
+ multiply : function (scalar) {
+ return new Viva.Graph.Physics.Vector(this.x * scalar, this.y * scalar);
+ }
+};
+
+Viva.Graph.Physics.Point = function (x, y) {
+ this.x = x || 0;
+ this.y = y || 0;
+};
+
+Viva.Graph.Physics.Point.prototype = {
+ add : function (point) {
+ return new Viva.Graph.Physics.Point(this.x + point.x, this.y + point.y);
+ }
+};
+
+Viva.Graph.Physics.Body = function () {
+ this.mass = 1;
+ this.force = new Viva.Graph.Physics.Vector();
+ this.velocity = new Viva.Graph.Physics.Vector(); // For chained call use vel() method.
+ this.location = new Viva.Graph.Physics.Point(); // For chained calls use loc() method instead.
+ this.prevLocation = new Viva.Graph.Physics.Point(); // TODO: might be not always needed
+};
+
+Viva.Graph.Physics.Body.prototype = {
+ loc : function (location) {
+ if (location) {
+ this.location.x = location.x;
+ this.location.y = location.y;
+
+ return this;
+ }
+
+ return this.location;
+ },
+ vel : function (velocity) {
+ if (velocity) {
+ this.velocity.x = velocity.x;
+ this.velocity.y = velocity.y;
+
+ return this;
+ }
+
+ return this.velocity;
+ }
+};
+
+Viva.Graph.Physics.Spring = function (body1, body2, length, coeff, weight) {
+ this.body1 = body1;
+ this.body2 = body2;
+ this.length = length;
+ this.coeff = coeff;
+ this.weight = weight;
+};
+
+Viva.Graph.Physics.QuadTreeNode = function () {
+ this.centerOfMass = new Viva.Graph.Physics.Point();
+ this.children = [];
+ this.body = null;
+ this.hasChildren = false;
+ this.x1 = 0;
+ this.y1 = 0;
+ this.x2 = 0;
+ this.y2 = 0;
+};
+Viva.Graph.Physics = Viva.Graph.Physics || {};
+
+/**
+ * Updates velocity and position data using the Euler's method.
+ * It is faster than RK4 but may produce less accurate results.
+ *
+ * http://en.wikipedia.org/wiki/Euler_method
+ */
+Viva.Graph.Physics.eulerIntegrator = function () {
+ return {
+ /**
+ * Performs forces integration, using given timestep and force simulator.
+ *
+ * @returns squared distance of total position updates.
+ */
+ integrate : function (simulator, timeStep) {
+ var speedLimit = simulator.speedLimit,
+ tx = 0,
+ ty = 0,
+ i,
+ max = simulator.bodies.length;
+
+ for (i = 0; i < max; ++i) {
+ var body = simulator.bodies[i],
+ coeff = timeStep / body.mass;
+
+ body.velocity.x += coeff * body.force.x;
+ body.velocity.y += coeff * body.force.y;
+ var vx = body.velocity.x,
+ vy = body.velocity.y,
+ v = Math.sqrt(vx * vx + vy * vy);
+
+ if (v > speedLimit) {
+ body.velocity.x = speedLimit * vx / v;
+ body.velocity.y = speedLimit * vy / v;
+ }
+
+ tx = timeStep * body.velocity.x;
+ ty = timeStep * body.velocity.y;
+ body.location.x += tx;
+ body.location.y += ty;
+ }
+
+ return tx * tx + ty * ty;
+ }
+ };
+};
+/**
+ * This is Barnes Hut simulation algorithm. Implementation
+ * is adopted to non-recursive solution, since certain browsers
+ * handle recursion extremly bad.
+ *
+ * http://www.cs.princeton.edu/courses/archive/fall03/cs126/assignments/barnes-hut.html
+ */
+Viva.Graph.Physics.nbodyForce = function (options) {
+ options = Viva.lazyExtend(options || {
+ gravity : -1,
+ theta : 0.8
+ });
+
+ // the following structures are here to reduce memory pressure
+ // when constructing BH-tree.
+ function InsertStackElement(node, body) {
+ this.node = node;
+ this.body = body;
+ }
+
+ function InsertStack () {
+ this.stack = [];
+ this.popIdx = 0;
+ }
+
+ InsertStack.prototype = {
+ isEmpty: function() {
+ return this.popIdx === 0;
+ },
+ push: function (node, body) {
+ var item = this.stack[this.popIdx];
+ if (!item) {
+ this.stack[this.popIdx] = new InsertStackElement(node, body);
+ } else {
+ item.node = node;
+ item.body = body;
+ }
+ ++this.popIdx;
+ },
+ pop: function () {
+ if (this.popIdx > 0) {
+ return this.stack[--this.popIdx];
+ }
+ },
+ reset: function () {
+ this.popIdx = 0;
+ }
+ };
+
+
+ var gravity = options.gravity,
+ updateQueue = [],
+ insertStack = new InsertStack(),
+ theta = options.theta,
+ random = Viva.random('5f4dcc3b5aa765d61d8327deb882cf99', 75, 20, 63, 0x6c, 65, 76, 65, 72),
+
+ Node = function () {
+ this.body = null;
+ this.quads = [];
+ this.mass = 0;
+ this.massX = 0;
+ this.massY = 0;
+ this.left = 0;
+ this.top = 0;
+ this.bottom = 0;
+ this.right = 0;
+ this.isInternal = false;
+ },
+
+ nodesCache = [],
+ currentInCache = 0,
+ newNode = function () {
+ // To avoid pressure on GC we reuse nodes.
+ var node;
+ if (nodesCache[currentInCache]) {
+ node = nodesCache[currentInCache];
+ node.quads[0] = null;
+ node.quads[1] = null;
+ node.quads[2] = null;
+ node.quads[3] = null;
+ node.body = null;
+ node.mass = node.massX = node.massY = 0;
+ node.left = node.right = node.top = node.bottom = 0;
+ node.isInternal = false;
+ } else {
+ node = new Node();
+ nodesCache[currentInCache] = node;
+ }
+
+ ++currentInCache;
+ return node;
+ },
+
+ root = newNode(),
+
+ isSamePosition = function (point1, point2) {
+ // TODO: inline it?
+ var dx = Math.abs(point1.x - point2.x);
+ var dy = Math.abs(point1.y - point2.y);
+
+ return (dx < 0.01 && dy < 0.01);
+ },
+
+ // Inserts body to the tree
+ insert = function (newBody) {
+ insertStack.reset();
+ insertStack.push(root, newBody);
+
+ while (!insertStack.isEmpty()) {
+ var stackItem = insertStack.pop(),
+ node = stackItem.node,
+ body = stackItem.body;
+
+ if (node.isInternal) {
+ // This is internal node. Update the total mass of the node and center-of-mass.
+ var x = body.location.x;
+ var y = body.location.y;
+ node.mass = node.mass + body.mass;
+ node.massX = node.massX + body.mass * x;
+ node.massY = node.massY + body.mass * y;
+
+ // Recursively insert the body in the appropriate quadrant.
+ // But first find the appropriate quadrant.
+ var quadIdx = 0, // Assume we are in the 0's quad.
+ left = node.left,
+ right = (node.right + left) / 2,
+ top = node.top,
+ bottom = (node.bottom + top) / 2;
+
+ if (x > right) {// somewhere in the eastern part.
+ quadIdx = quadIdx + 1;
+ var oldLeft = left;
+ left = right;
+ right = right + (right - oldLeft);
+ }
+ if (y > bottom) {// and in south.
+ quadIdx = quadIdx + 2;
+ var oldTop = top;
+ top = bottom;
+ bottom = bottom + (bottom - oldTop);
+ }
+
+ var child = node.quads[quadIdx];
+ if (!child) {
+ // The node is internal but this quadrant is not taken. Add
+ // subnode to it.
+ child = newNode();
+ child.left = left;
+ child.top = top;
+ child.right = right;
+ child.bottom = bottom;
+
+ node.quads[quadIdx] = child;
+ }
+
+ // continue searching in this quadrant.
+ insertStack.push(child, body);
+ } else if (node.body) {
+ // We are trying to add to the leaf node.
+ // To achieve this we have to convert current leaf into internal node
+ // and continue adding two nodes.
+ var oldBody = node.body;
+ node.body = null; // internal nodes do not cary bodies
+ node.isInternal = true;
+
+ if (isSamePosition(oldBody.location, body.location)) {
+ // Prevent infinite subdivision by bumping one node
+ // slightly. I assume this operation should be quite
+ // rare, that's why usage of cos()/sin() shouldn't hit performance.
+ var newX, newY;
+ do {
+ var angle = random.nextDouble() * 2 * Math.PI;
+ var dx = (node.right - node.left) * 0.006 * Math.cos(angle);
+ var dy = (node.bottom - node.top) * 0.006 * Math.sin(angle);
+
+ newX = oldBody.location.x + dx;
+ newY = oldBody.location.y + dy;
+ // Make sure we don't bump it out of the box. If we do, next iteration should fix it
+ } while (newX < node.left || newX > node.right ||
+ newY < node.top || newY > node.bottom);
+
+ oldBody.location.x = newX;
+ oldBody.location.y = newY;
+ }
+ // Next iteration should subdivide node further.
+ insertStack.push(node, oldBody);
+ insertStack.push(node, body);
+ } else {
+ // Node has no body. Put it in here.
+ node.body = body;
+ }
+ }
+ },
+
+ update = function (sourceBody) {
+ var queue = updateQueue,
+ v,
+ dx,
+ dy,
+ r,
+ queueLength = 1,
+ shiftIdx = 0,
+ pushIdx = 1;
+
+ queue[0] = root;
+
+ // TODO: looks like in rare cases this guy has infinite loop bug. To reproduce
+ // render K1000 (complete(1000)) with the settings: {springLength : 3, springCoeff : 0.0005,
+ // dragCoeff : 0.02, gravity : -1.2 }
+ while (queueLength) {
+ var node = queue[shiftIdx],
+ body = node.body;
+
+ queueLength -= 1;
+ shiftIdx += 1;
+
+ if (body && body !== sourceBody) {
+ // If the current node is an external node (and it is not source body),
+ // calculate the force exerted by the current node on body, and add this
+ // amount to body's net force.
+ dx = body.location.x - sourceBody.location.x;
+ dy = body.location.y - sourceBody.location.y;
+ r = Math.sqrt(dx * dx + dy * dy);
+
+ if (r === 0) {
+ // Poor man's protection agains zero distance.
+ dx = (random.nextDouble() - 0.5) / 50;
+ dy = (random.nextDouble() - 0.5) / 50;
+ r = Math.sqrt(dx * dx + dy * dy);
+ }
+
+ // This is standard gravition force calculation but we divide
+ // by r^3 to save two operations when normalizing force vector.
+ v = gravity * body.mass * sourceBody.mass / (r * r * r);
+ sourceBody.force.x = sourceBody.force.x + v * dx;
+ sourceBody.force.y = sourceBody.force.y + v * dy;
+ } else {
+ // Otherwise, calculate the ratio s / r, where s is the width of the region
+ // represented by the internal node, and r is the distance between the body
+ // and the node's center-of-mass
+ dx = node.massX / node.mass - sourceBody.location.x;
+ dy = node.massY / node.mass - sourceBody.location.y;
+ r = Math.sqrt(dx * dx + dy * dy);
+
+ if (r === 0) {
+ // Sorry about code duplucation. I don't want to create many functions
+ // right away. Just want to see performance first.
+ dx = (random.nextDouble() - 0.5) / 50;
+ dy = (random.nextDouble() - 0.5) / 50;
+ r = Math.sqrt(dx * dx + dy * dy);
+ }
+ // If s / r < θ, treat this internal node as a single body, and calculate the
+ // force it exerts on body b, and add this amount to b's net force.
+ if ((node.right - node.left) / r < theta) {
+ // in the if statement above we consider node's width only
+ // because the region was sqaurified during tree creation.
+ // Thus there is no difference between using width or height.
+ v = gravity * node.mass * sourceBody.mass / (r * r * r);
+ sourceBody.force.x = sourceBody.force.x + v * dx;
+ sourceBody.force.y = sourceBody.force.y + v * dy;
+ } else {
+ // Otherwise, run the procedure recursively on each of the current node's children.
+
+ // I intentionally unfolded this loop, to save several CPU cycles.
+ if (node.quads[0]) { queue[pushIdx] = node.quads[0]; queueLength += 1; pushIdx += 1; }
+ if (node.quads[1]) { queue[pushIdx] = node.quads[1]; queueLength += 1; pushIdx += 1; }
+ if (node.quads[2]) { queue[pushIdx] = node.quads[2]; queueLength += 1; pushIdx += 1; }
+ if (node.quads[3]) { queue[pushIdx] = node.quads[3]; queueLength += 1; pushIdx += 1; }
+ }
+ }
+ }
+ },
+
+ init = function (forceSimulator) {
+ var x1 = Number.MAX_VALUE,
+ y1 = Number.MAX_VALUE,
+ x2 = Number.MIN_VALUE,
+ y2 = Number.MIN_VALUE,
+ i,
+ bodies = forceSimulator.bodies,
+ max = bodies.length;
+
+ // To reduce quad tree depth we are looking for exact bounding box of all particles.
+ i = max;
+ while (i--) {
+ var x = bodies[i].location.x;
+ var y = bodies[i].location.y;
+ if (x < x1) { x1 = x; }
+ if (x > x2) { x2 = x; }
+ if (y < y1) { y1 = y; }
+ if (y > y2) { y2 = y; }
+ }
+
+ // Squarify the bounds.
+ var dx = x2 - x1,
+ dy = y2 - y1;
+ if (dx > dy) { y2 = y1 + dx; } else { x2 = x1 + dy; }
+
+ currentInCache = 0;
+ root = newNode();
+ root.left = x1;
+ root.right = x2;
+ root.top = y1;
+ root.bottom = y2;
+
+ i = max;
+ while (i--) {
+ insert(bodies[i], root);
+ }
+ };
+
+ return {
+ insert : insert,
+ init : init,
+ update : update,
+ options : function (newOptions) {
+ if (newOptions) {
+ if (typeof newOptions.gravity === 'number') { gravity = newOptions.gravity; }
+ if (typeof newOptions.theta === 'number') { theta = newOptions.theta; }
+
+ return this;
+ }
+
+ return {gravity : gravity, theta : theta};
+ }
+ };
+};Viva.Graph.Physics.dragForce = function (options) {
+ if (!options) {
+ options = {};
+ }
+
+ var currentOptions = {
+ coeff : options.coeff || 0.01
+ };
+
+ return {
+ init : function (forceSimulator) {},
+ update : function (body) {
+ body.force.x -= currentOptions.coeff * body.velocity.x;
+ body.force.y -= currentOptions.coeff * body.velocity.y;
+ },
+ options : function (newOptions) {
+ if (newOptions) {
+ if (typeof newOptions.coeff === 'number') { currentOptions.coeff = newOptions.coeff; }
+
+ return this;
+ }
+
+ return currentOptions;
+ }
+ };
+};
+Viva.Graph.Physics.springForce = function (currentOptions) {
+ currentOptions = Viva.lazyExtend(currentOptions, {
+ length : 50,
+ coeff : 0.00022
+ });
+
+ var random = Viva.random('Random number 4.', 'Chosen by fair dice roll');
+
+ return {
+ init : function (forceSimulator) {},
+
+ update : function (spring) {
+ var body1 = spring.body1,
+ body2 = spring.body2,
+ length = spring.length < 0 ? currentOptions.length : spring.length,
+ dx = body2.location.x - body1.location.x,
+ dy = body2.location.y - body1.location.y,
+ r = Math.sqrt(dx * dx + dy * dy);
+
+ if (r === 0) {
+ dx = (random.nextDouble() - 0.5) / 50;
+ dy = (random.nextDouble() - 0.5) / 50;
+ r = Math.sqrt(dx * dx + dy * dy);
+ }
+
+ var d = r - length;
+ var coeff = ((!spring.coeff || spring.coeff < 0) ? currentOptions.coeff : spring.coeff) * d / r * spring.weight;
+
+ body1.force.x += coeff * dx;
+ body1.force.y += coeff * dy;
+
+ body2.force.x += -coeff * dx;
+ body2.force.y += -coeff * dy;
+ },
+
+ options : function (newOptions) {
+ if (newOptions) {
+ if (typeof newOptions.length === 'number') { currentOptions.length = newOptions.length; }
+ if (typeof newOptions.coeff === 'number') { currentOptions.coeff = newOptions.coeff; }
+
+ return this;
+ }
+ return currentOptions;
+ }
+ };
+};
+Viva.Graph.Physics = Viva.Graph.Physics || {};
+
+/**
+ * Manages a simulation of physical forces acting on bodies.
+ * To create a custom force simulator register forces of the system
+ * via addForce() method, choos appropriate integrator and register
+ * bodies.
+ *
+ * // TODO: Show example.
+ */
+Viva.Graph.Physics.forceSimulator = function (forceIntegrator) {
+ var integrator = forceIntegrator,
+ bodies = [], // Bodies in this simulation.
+ springs = [], // Springs in this simulation.
+ bodyForces = [], // Forces acting on bodies.
+ springForces = []; // Forces acting on springs.
+
+ return {
+
+ /**
+ * The speed limit allowed by this simulator.
+ */
+ speedLimit : 1.0,
+
+ /**
+ * Bodies in this simulation
+ */
+ bodies : bodies,
+
+ /**
+ * Accumulates all forces acting on the bodies and springs.
+ */
+ accumulate : function () {
+ var i, j, body;
+
+ // Reinitialize all forces
+ i = bodyForces.length;
+ while (i--) {
+ bodyForces[i].init(this);
+ }
+
+ i = springForces.length;
+ while (i--) {
+ springForces[i].init(this);
+ }
+
+ // Accumulate forces acting on bodies.
+ i = bodies.length;
+ while (i--) {
+ body = bodies[i];
+ body.force.x = 0;
+ body.force.y = 0;
+
+ for (j = 0; j < bodyForces.length; j++) {
+ bodyForces[j].update(body);
+ }
+ }
+
+ // Accumulate forces acting on springs.
+ for (i = 0; i < springs.length; ++i) {
+ for (j = 0; j < springForces.length; j++) {
+ springForces[j].update(springs[i]);
+ }
+ }
+ },
+
+ /**
+ * Runs simulation for one time step.
+ */
+ run : function (timeStep) {
+ this.accumulate();
+ return integrator.integrate(this, timeStep);
+ },
+
+ /**
+ * Adds body to this simulation
+ *
+ * @param body - a new body. Bodies expected to have
+ * mass, force, velocity, location and prevLocation properties.
+ * the method does not check all this properties, for the sake of performance.
+ * // TODO: maybe it should check it?
+ */
+ addBody : function (body) {
+ if (!body) {
+ throw {
+ message : 'Cannot add null body to force simulator'
+ };
+ }
+
+ bodies.push(body); // TODO: could mark simulator as dirty...
+
+ return body;
+ },
+
+ removeBody : function (body) {
+ if (!body) { return false; }
+
+ var idx = Viva.Graph.Utils.indexOfElementInArray(body, bodies);
+ if (idx < 0) { return false; }
+
+ return bodies.splice(idx, 1);
+ },
+
+ /**
+ * Adds a spring to this simulation.
+ */
+ addSpring: function (body1, body2, springLength, springCoefficient, springWeight) {
+ if (!body1 || !body2) {
+ throw {
+ message : 'Cannot add null spring to force simulator'
+ };
+ }
+
+ if (typeof springLength !== 'number') {
+ throw {
+ message : 'Spring length should be a number'
+ };
+ }
+ springWeight = typeof springWeight === 'number' ? springWeight : 1;
+
+ var spring = new Viva.Graph.Physics.Spring(body1, body2, springLength, springCoefficient >= 0 ? springCoefficient : -1, springWeight);
+ springs.push(spring);
+
+ // TODO: could mark simulator as dirty.
+ return spring;
+ },
+
+ removeSpring : function (spring) {
+ if (!spring) { return false; }
+
+ var idx = Viva.Graph.Utils.indexOfElementInArray(spring, springs);
+ if (idx < 0) { return false; }
+
+ return springs.splice(idx, 1);
+ },
+
+ /**
+ * Adds a force acting on all bodies in this simulation
+ */
+ addBodyForce: function (force) {
+ if (!force) {
+ throw {
+ message : 'Cannot add mighty (unknown) force to the simulator'
+ };
+ }
+
+ bodyForces.push(force);
+ },
+
+ /**
+ * Adds a spring force acting on all springs in this simulation.
+ */
+ addSpringForce : function (force) {
+ if (!force) {
+ throw {
+ message : 'Cannot add unknown force to the simulator'
+ };
+ }
+
+ springForces.push(force);
+ }
+ };
+};// I don't like to suppress this, but I'm afraid 'force_directed_body'
+// could already be used by someone. Don't want to break it now.
+/* jshint camelcase:false */
+
+Viva.Graph.Layout = Viva.Graph.Layout || {};
+Viva.Graph.Layout.forceDirected = function(graph, settings) {
+ var STABLE_THRESHOLD = 0.001; // Maximum movement of the system which can be considered as stabilized
+
+ if (!graph) {
+ throw {
+ message: 'Graph structure cannot be undefined'
+ };
+ }
+
+ settings = Viva.lazyExtend(settings, {
+ /**
+ * Ideal length for links (springs in physical model).
+ */
+ springLength: 80,
+
+ /**
+ * Hook's law coefficient. 1 - solid spring.
+ */
+ springCoeff: 0.0002,
+
+ /**
+ * Coulomb's law coefficient. It's used to repel nodes thus should be negative
+ * if you make it positive nodes start attract each other :).
+ */
+ gravity: -1.2,
+
+ /**
+ * Theta coeffiecient from Barnes Hut simulation. Ranged between (0, 1).
+ * The closer it's to 1 the more nodes algorithm will have to go through.
+ * Setting it to one makes Barnes Hut simulation no different from
+ * brute-force forces calculation (each node is considered).
+ */
+ theta: 0.8,
+
+ /**
+ * Drag force coefficient. Used to slow down system, thus should be less than 1.
+ * The closer it is to 0 the less tight system will be.
+ */
+ dragCoeff: 0.02
+ });
+
+ var forceSimulator = Viva.Graph.Physics.forceSimulator(Viva.Graph.Physics.eulerIntegrator()),
+ nbodyForce = Viva.Graph.Physics.nbodyForce({
+ gravity: settings.gravity,
+ theta: settings.theta
+ }),
+ springForce = Viva.Graph.Physics.springForce({
+ length: settings.springLength,
+ coeff: settings.springCoeff
+ }),
+ dragForce = Viva.Graph.Physics.dragForce({
+ coeff: settings.dragCoeff
+ }),
+ graphRect = new Viva.Graph.Rect(),
+ random = Viva.random('ted.com', 103, 114, 101, 97, 116),
+
+ getBestNodePosition = function(node) {
+ // TODO: Initial position could be picked better, e.g. take into
+ // account all neighbouring nodes/links, not only one.
+ // TODO: this is the same as in gem layout. consider refactoring.
+ var baseX = (graphRect.x1 + graphRect.x2) / 2,
+ baseY = (graphRect.y1 + graphRect.y2) / 2,
+ springLength = settings.springLength;
+
+ if (node.links && node.links.length > 0) {
+ var firstLink = node.links[0],
+ otherNode = firstLink.fromId !== node.id ? graph.getNode(firstLink.fromId) : graph.getNode(firstLink.toId);
+ if (otherNode.position) {
+ baseX = otherNode.position.x;
+ baseY = otherNode.position.y;
+ }
+ }
+
+ return {
+ x: baseX + random.next(springLength) - springLength / 2,
+ y: baseY + random.next(springLength) - springLength / 2
+ };
+ },
+
+ updateNodeMass = function(node) {
+ var body = node.force_directed_body;
+ body.mass = 1 + graph.getLinks(node.id).length / 3.0;
+ },
+
+ initNode = function(node) {
+ var body = node.force_directed_body;
+ if (!body) {
+ // TODO: rename position to location or location to position to be consistent with
+ // other places.
+ node.position = node.position || getBestNodePosition(node);
+
+ body = new Viva.Graph.Physics.Body();
+ node.force_directed_body = body;
+ updateNodeMass(node);
+
+ body.loc(node.position);
+ forceSimulator.addBody(body);
+ }
+ },
+
+ releaseNode = function(node) {
+ var body = node.force_directed_body;
+ if (body) {
+ node.force_directed_body = null;
+ delete node.force_directed_body;
+
+ forceSimulator.removeBody(body);
+ }
+ },
+
+ initLink = function(link) {
+ // TODO: what if bodies are not initialized?
+ var from = graph.getNode(link.fromId),
+ to = graph.getNode(link.toId);
+
+ updateNodeMass(from);
+ updateNodeMass(to);
+ link.force_directed_spring = forceSimulator.addSpring(from.force_directed_body, to.force_directed_body, -1.0, link.weight);
+ },
+
+ releaseLink = function(link) {
+ var spring = link.force_directed_spring;
+ if (spring) {
+ var from = graph.getNode(link.fromId),
+ to = graph.getNode(link.toId);
+ if (from) {
+ updateNodeMass(from);
+ }
+ if (to) {
+ updateNodeMass(to);
+ }
+
+ link.force_directed_spring = null;
+ delete link.force_directed_spring;
+
+ forceSimulator.removeSpring(spring);
+ }
+ },
+
+ onGraphChanged = function(changes) {
+ for (var i = 0; i < changes.length; ++i) {
+ var change = changes[i];
+ if (change.changeType === 'add') {
+ if (change.node) {
+ initNode(change.node);
+ }
+ if (change.link) {
+ initLink(change.link);
+ }
+ } else if (change.changeType === 'remove') {
+ if (change.node) {
+ releaseNode(change.node);
+ }
+ if (change.link) {
+ releaseLink(change.link);
+ }
+ }
+ // Probably we don't need to care about 'update' event here;
+ }
+ },
+
+ initSimulator = function() {
+ graph.forEachNode(initNode);
+ graph.forEachLink(initLink);
+ graph.addEventListener('changed', onGraphChanged);
+ },
+
+ isNodePinned = function(node) {
+ if (!node) {
+ return true;
+ }
+
+ return node.isPinned || (node.data && node.data.isPinned);
+ },
+
+ updateNodePositions = function() {
+ var x1 = Number.MAX_VALUE,
+ y1 = Number.MAX_VALUE,
+ x2 = Number.MIN_VALUE,
+ y2 = Number.MIN_VALUE;
+ if (graph.getNodesCount() === 0) {
+ return;
+ }
+
+ graph.forEachNode(function(node) {
+ var body = node.force_directed_body;
+ if (!body) {
+ // This could be a sign someone removed the propery.
+ // I should really decouple force related stuff from node
+ return;
+ }
+
+ if (isNodePinned(node)) {
+ body.loc(node.position);
+ }
+
+ // TODO: once again: use one name to be consistent (position vs location)
+ node.position.x = body.location.x;
+ node.position.y = body.location.y;
+
+ // szydan
+ /*
+ if(node.data.t && node.data.t.length){
+ node.position.x = 1000 * ( node.data.t.length -1);
+ node.position.y = body.location.y;
+ }else{
+ node.position.x = body.location.x;
+ node.position.y = body.location.y;
+ }
+ */
+ // szydan end
+
+ if (node.position.x < x1) {
+ x1 = node.position.x;
+ }
+ if (node.position.x > x2) {
+ x2 = node.position.x;
+ }
+ if (node.position.y < y1) {
+ y1 = node.position.y;
+ }
+ if (node.position.y > y2) {
+ y2 = node.position.y;
+ }
+ });
+
+ graphRect.x1 = x1;
+ graphRect.x2 = x2;
+ graphRect.y1 = y1;
+ graphRect.y2 = y2;
+ };
+
+ forceSimulator.addSpringForce(springForce);
+ forceSimulator.addBodyForce(nbodyForce);
+ forceSimulator.addBodyForce(dragForce);
+
+ initSimulator();
+
+ return {
+ /**
+ * Attempts to layout graph within given number of iterations.
+ *
+ * @param {integer} [iterationsCount] number of algorithm's iterations.
+ */
+ run: function(iterationsCount) {
+ var i;
+ iterationsCount = iterationsCount || 50;
+
+ for (i = 0; i < iterationsCount; ++i) {
+ this.step();
+ }
+ },
+
+ step: function() {
+ var energy = forceSimulator.run(20);
+ updateNodePositions();
+
+ return energy < STABLE_THRESHOLD;
+ },
+
+ /**
+ * Returns rectangle structure {x1, y1, x2, y2}, which represents
+ * current space occupied by graph.
+ */
+ getGraphRect: function() {
+ return graphRect;
+ },
+
+ /**
+ * Request to release all resources
+ */
+ dispose: function() {
+ graph.removeEventListener('change', onGraphChanged);
+ },
+
+ // Layout specific methods
+ /**
+ * Gets or sets current desired length of the edge.
+ *
+ * @param length new desired length of the springs (aka edge, aka link).
+ * if this parameter is empty then old spring length is returned.
+ */
+ springLength: function(length) {
+ if (arguments.length === 1) {
+ springForce.options({
+ length: length
+ });
+ return this;
+ }
+
+ return springForce.options().length;
+ },
+
+ /**
+ * Gets or sets current spring coeffiсient.
+ *
+ * @param coeff new spring coeffiсient.
+ * if this parameter is empty then its old value returned.
+ */
+ springCoeff: function(coeff) {
+ if (arguments.length === 1) {
+ springForce.options({
+ coeff: coeff
+ });
+ return this;
+ }
+
+ return springForce.options().coeff;
+ },
+
+ /**
+ * Gets or sets current gravity in the nbody simulation.
+ *
+ * @param g new gravity constant.
+ * if this parameter is empty then its old value returned.
+ */
+ gravity: function(g) {
+ if (arguments.length === 1) {
+ nbodyForce.options({
+ gravity: g
+ });
+ return this;
+ }
+
+ return nbodyForce.options().gravity;
+ },
+
+ /**
+ * Gets or sets current theta value in the nbody simulation.
+ *
+ * @param t new theta coeffiсient.
+ * if this parameter is empty then its old value returned.
+ */
+ theta: function(t) {
+ if (arguments.length === 1) {
+ nbodyForce.options({
+ theta: t
+ });
+ return this;
+ }
+
+ return nbodyForce.options().theta;
+ },
+
+ /**
+ * Gets or sets current theta value in the nbody simulation.
+ *
+ * @param dragCoeff new drag coeffiсient.
+ * if this parameter is empty then its old value returned.
+ */
+ drag: function(dragCoeff) {
+ if (arguments.length === 1) {
+ dragForce.options({
+ coeff: dragCoeff
+ });
+ return this;
+ }
+
+ return dragForce.options().coeff;
+ }
+ };
+};
+Viva.Graph.Layout = Viva.Graph.Layout || {};
+
+/**
+ * Does not really perform any layouting algorithm but is compliant
+ * with renderer interface. Allowing clients to provide specific positioning
+ * callback and get static layout of the graph
+ *
+ * @param {Viva.Graph.graph} graph to layout
+ * @param {Object} userSettings
+ */
+Viva.Graph.Layout.constant = function (graph, userSettings) {
+ userSettings = Viva.lazyExtend(userSettings, {
+ maxX : 1024,
+ maxY : 1024,
+ seed : 'Deterministic randomness made me do this'
+ });
+ // This class simply follows API, it does not use some of the arguments:
+ /*jshint unused: false */
+ var rand = Viva.random(userSettings.seed),
+ graphRect = new Viva.Graph.Rect(Number.MAX_VALUE, Number.MAX_VALUE, Number.MIN_VALUE, Number.MIN_VALUE),
+
+ placeNodeCallback = function (node) {
+ return new Viva.Graph.Point2d(rand.next(userSettings.maxX), rand.next(userSettings.maxY));
+ },
+
+ updateGraphRect = function (node, graphRect) {
+ if (node.position.x < graphRect.x1) { graphRect.x1 = node.position.x; }
+ if (node.position.x > graphRect.x2) { graphRect.x2 = node.position.x; }
+ if (node.position.y < graphRect.y1) { graphRect.y1 = node.position.y; }
+ if (node.position.y > graphRect.y2) { graphRect.y2 = node.position.y; }
+ },
+
+ ensureNodeInitialized = function (node) {
+ if (!node.hasOwnProperty('position')) {
+ node.position = placeNodeCallback(node);
+ }
+ updateGraphRect(node, graphRect);
+ },
+
+ updateNodePositions = function () {
+ if (graph.getNodesCount() === 0) { return; }
+
+ graphRect.x1 = Number.MAX_VALUE;
+ graphRect.y1 = Number.MAX_VALUE;
+ graphRect.x2 = Number.MIN_VALUE;
+ graphRect.y2 = Number.MIN_VALUE;
+
+ graph.forEachNode(ensureNodeInitialized);
+ },
+
+ onGraphChanged = function(changes) {
+ for (var i = 0; i < changes.length; ++i) {
+ var change = changes[i];
+ if (change.changeType === 'add' && change.node) {
+ ensureNodeInitialized(change.node);
+ }
+ }
+ },
+
+ initLayout = function () {
+ updateNodePositions();
+ graph.addEventListener('changed', onGraphChanged);
+ };
+
+ return {
+ /**
+ * Attempts to layout graph within given number of iterations.
+ *
+ * @param {integer} [iterationsCount] number of algorithm's iterations.
+ * The constant layout ignores this parameter.
+ */
+ run : function (iterationsCount) {
+ this.step();
+ },
+
+ /**
+ * One step of layout algorithm.
+ */
+ step : function () {
+ updateNodePositions();
+
+ return false; // no need to continue.
+ },
+
+ /**
+ * Returns rectangle structure {x1, y1, x2, y2}, which represents
+ * current space occupied by graph.
+ */
+ getGraphRect : function () {
+ return graphRect;
+ },
+
+ /**
+ * Request to release all resources
+ */
+ dispose : function () {
+ graph.removeEventListener('change', onGraphChanged);
+ },
+
+ // Layout specific methods:
+
+ /**
+ * Based on argument either update default node placement callback or
+ * attempts to place given node using current placement callback.
+ * Setting new node callback triggers position update for all nodes.
+ *
+ * @param {Object} newPlaceNodeCallbackOrNode - if it is a function then
+ * default node placement callback is replaced with new one. Node placement
+ * callback has a form of function (node) {}, and is expected to return an
+ * object with x and y properties set to numbers.
+ *
+ * Otherwise if it's not a function the argument is treated as graph node
+ * and current node placement callback will be used to place it.
+ */
+ placeNode : function (newPlaceNodeCallbackOrNode) {
+ if (typeof newPlaceNodeCallbackOrNode === 'function') {
+ placeNodeCallback = newPlaceNodeCallbackOrNode;
+ updateNodePositions();
+ return this;
+ }
+
+ // it is not a request to update placeNodeCallback, trying to place
+ // a node using current callback:
+ return placeNodeCallback(newPlaceNodeCallbackOrNode);
+ }
+
+ };
+};
+/**
+ * @fileOverview Defines a graph renderer that uses CSS based drawings.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.View = Viva.Graph.View || {};
+
+/**
+ * This is heart of the rendering. Class accepts graph to be rendered and rendering settings.
+ * It monitors graph changes and depicts them accordingly.
+ *
+ * @param graph - Viva.Graph.graph() object to be rendered.
+ * @param settings - rendering settings, composed from the following parts (with their defaults shown):
+ * settings = {
+ * // Represents a module that is capable of displaying graph nodes and links.
+ * // all graphics has to correspond to defined interface and can be later easily
+ * // replaced for specific needs (e.g. adding WebGL should be piece of cake as long
+ * // as WebGL has implemented required interface). See svgGraphics for example.
+ * // NOTE: current version supports Viva.Graph.View.cssGraphics() as well.
+ * graphics : Viva.Graph.View.svgGraphics(),
+ *
+ * // Where the renderer should draw graph. Container size matters, because
+ * // renderer will attempt center graph to that size. Also graphics modules
+ * // might depend on it.
+ * container : document.body,
+ *
+ * // Layout algorithm to be used. The algorithm is expected to comply with defined
+ * // interface and is expected to be iterative. Renderer will use it then to calculate
+ * // grpaph's layout. For examples of the interface refer to Viva.Graph.Layout.forceDirected()
+ * layout : Viva.Graph.Layout.forceDirected(),
+ *
+ * // Directs renderer to display links. Usually rendering links is the slowest part of this
+ * // library. So if you don't need to display links, consider settings this property to false.
+ * renderLinks : true,
+ *
+ * // Number of layout iterations to run before displaying the graph. The bigger you set this number
+ * // the closer to ideal position graph will apper first time. But be careful: for large graphs
+ * // it can freeze the browser.
+ * prerender : 0
+ * }
+ */
+Viva.Graph.View.renderer = function (graph, settings) {
+ // TODO: This class is getting hard to understand. Consider refactoring.
+ // TODO: I have a technical debt here: fix scaling/recentring! Currently it's total mess.
+ var FRAME_INTERVAL = 30;
+
+ settings = settings || {};
+
+ var layout = settings.layout,
+ graphics = settings.graphics,
+ container = settings.container,
+ inputManager,
+ animationTimer,
+ rendererInitialized = false,
+ updateCenterRequired = true,
+
+ currentStep = 0,
+ totalIterationsCount = 0,
+ isStable = false,
+ userInteraction = false,
+
+ viewPortOffset = {
+ x : 0,
+ y : 0
+ },
+
+ transform = {
+ offsetX : 0,
+ offsetY : 0,
+ scale : 1
+ };
+
+ var prepareSettings = function () {
+ container = container || window.document.body;
+ layout = layout || Viva.Graph.Layout.forceDirected(graph);
+ graphics = graphics || Viva.Graph.View.svgGraphics(graph, {container : container});
+
+ if (!settings.hasOwnProperty('renderLinks')) {
+ settings.renderLinks = true;
+ }
+
+ settings.prerender = settings.prerender || 0;
+ inputManager = (graphics.inputManager || Viva.Input.domInputManager)(graph, graphics);
+ },
+ // Cache positions object to prevent GC pressure
+ cachedFromPos = {x : 0, y : 0, node: null},
+ cachedToPos = {x : 0, y : 0, node: null},
+ cachedNodePos = { x: 0, y: 0},
+ windowEvents = Viva.Graph.Utils.events(window),
+ publicEvents = Viva.Graph.Utils.events({}).extend(),
+ graphEvents,
+ containerDrag,
+
+
+ renderLink = function (link) {
+ var fromNode = graph.getNode(link.fromId),
+ toNode = graph.getNode(link.toId);
+
+ if (!fromNode || !toNode) {
+ return;
+ }
+
+ cachedFromPos.x = fromNode.position.x;
+ cachedFromPos.y = fromNode.position.y;
+ cachedFromPos.node = fromNode;
+
+ cachedToPos.x = toNode.position.x;
+ cachedToPos.y = toNode.position.y;
+ cachedToPos.node = toNode;
+
+ graphics.updateLinkPosition(link.ui, cachedFromPos, cachedToPos);
+ },
+
+ renderNode = function (node) {
+ cachedNodePos.x = node.position.x;
+ cachedNodePos.y = node.position.y;
+
+ graphics.updateNodePosition(node.ui, cachedNodePos);
+ },
+
+ renderGraph = function () {
+ graphics.beginRender();
+ if (settings.renderLinks && !graphics.omitLinksRendering) {
+ graph.forEachLink(renderLink);
+ }
+
+ graph.forEachNode(renderNode);
+ graphics.endRender();
+ },
+
+ onRenderFrame = function () {
+ isStable = layout.step() && !userInteraction;
+ renderGraph();
+
+ return !isStable;
+ },
+
+ renderIterations = function (iterationsCount) {
+ if (animationTimer) {
+ totalIterationsCount += iterationsCount;
+ return;
+ }
+
+ if (iterationsCount) {
+ totalIterationsCount += iterationsCount;
+
+ animationTimer = Viva.Graph.Utils.timer(function () {
+ return onRenderFrame();
+ }, FRAME_INTERVAL);
+ } else {
+ currentStep = 0;
+ totalIterationsCount = 0;
+ animationTimer = Viva.Graph.Utils.timer(onRenderFrame, FRAME_INTERVAL);
+ }
+ },
+
+ resetStable = function () {
+ isStable = false;
+ animationTimer.restart();
+ },
+
+ prerender = function () {
+ // To get good initial positions for the graph
+ // perform several prerender steps in background.
+ var i;
+ if (typeof settings.prerender === 'number' && settings.prerender > 0) {
+ for (i = 0; i < settings.prerender; i += 1) {
+ layout.step();
+ }
+ }
+ },
+
+ updateCenter = function () {
+ var graphRect = layout.getGraphRect(),
+ containerSize = Viva.Graph.Utils.getDimension(container);
+
+ viewPortOffset.x = viewPortOffset.y = 0;
+ transform.offsetX = containerSize.width / 2 - (graphRect.x2 + graphRect.x1) / 2;
+ transform.offsetY = containerSize.height / 2 - (graphRect.y2 + graphRect.y1) / 2;
+ graphics.graphCenterChanged(transform.offsetX + viewPortOffset.x, transform.offsetY + viewPortOffset.y);
+
+ updateCenterRequired = false;
+ },
+
+ createNodeUi = function (node) {
+ var nodeUI = graphics.node(node);
+ node.ui = nodeUI;
+ graphics.initNode(nodeUI);
+
+ renderNode(node);
+ },
+
+ removeNodeUi = function (node) {
+ if (node.hasOwnProperty('ui')) {
+ graphics.releaseNode(node.ui);
+
+ node.ui = null;
+ delete node.ui;
+ }
+ },
+
+ createLinkUi = function (link) {
+ var linkUI = graphics.link(link);
+ link.ui = linkUI;
+ graphics.initLink(linkUI);
+
+ if (!graphics.omitLinksRendering) {
+ renderLink(link);
+ }
+ },
+
+ removeLinkUi = function (link) {
+ if (link.hasOwnProperty('ui')) {
+ graphics.releaseLink(link.ui);
+ link.ui = null;
+ delete link.ui;
+ }
+ },
+
+ listenNodeEvents = function (node) {
+ var wasPinned = false;
+
+ // TODO: This may not be memory efficient. Consider reusing handlers object.
+ inputManager.bindDragNDrop(node, {
+ onStart : function () {
+ wasPinned = node.isPinned;
+ node.isPinned = true;
+ userInteraction = true;
+ resetStable();
+ },
+ onDrag : function (e, offset) {
+ node.position.x += offset.x / transform.scale;
+ node.position.y += offset.y / transform.scale;
+ userInteraction = true;
+
+ renderGraph();
+ },
+ onStop : function () {
+ node.isPinned = wasPinned;
+ userInteraction = false;
+ }
+ });
+ },
+
+ releaseNodeEvents = function (node) {
+ inputManager.bindDragNDrop(node, null);
+ },
+
+ initDom = function () {
+ graphics.init(container);
+
+ graph.forEachNode(createNodeUi);
+
+ if (settings.renderLinks) {
+ graph.forEachLink(createLinkUi);
+ }
+ },
+
+ releaseDom = function () {
+ graphics.release(container);
+ },
+
+ processNodeChange = function (change) {
+ var node = change.node;
+
+ if (change.changeType === 'add') {
+ createNodeUi(node);
+ listenNodeEvents(node);
+ if (updateCenterRequired) {
+ updateCenter();
+ }
+ } else if (change.changeType === 'remove') {
+ releaseNodeEvents(node);
+ removeNodeUi(node);
+ if (graph.getNodesCount() === 0) {
+ updateCenterRequired = true; // Next time when node is added - center the graph.
+ }
+ } else if (change.changeType === 'update') {
+ releaseNodeEvents(node);
+ removeNodeUi(node);
+
+ createNodeUi(node);
+ listenNodeEvents(node);
+ }
+ },
+
+ processLinkChange = function (change) {
+ var link = change.link;
+ if (change.changeType === 'add') {
+ if (settings.renderLinks) { createLinkUi(link); }
+ } else if (change.changeType === 'remove') {
+ if (settings.renderLinks) { removeLinkUi(link); }
+ } else if (change.changeType === 'update') {
+ throw 'Update type is not implemented. TODO: Implement me!';
+ }
+ },
+
+ onGraphChanged = function (changes) {
+ var i, change;
+ for (i = 0; i < changes.length; i += 1) {
+ change = changes[i];
+ if (change.node) {
+ processNodeChange(change);
+ } else if (change.link) {
+ processLinkChange(change);
+ }
+ }
+
+ resetStable();
+ },
+
+ onWindowResized = function () {
+ updateCenter();
+ onRenderFrame();
+ },
+
+ releaseContainerDragManager = function () {
+ if (containerDrag) {
+ containerDrag.release();
+ containerDrag = null;
+ }
+ },
+
+ releaseGraphEvents = function () {
+ if (graphEvents) {
+ // Interesting.. why is it not null? Anyway:
+ graphEvents.stop('changed', onGraphChanged);
+ graphEvents = null;
+ }
+ },
+
+ listenToEvents = function () {
+ windowEvents.on('resize', onWindowResized);
+
+ releaseContainerDragManager();
+ containerDrag = Viva.Graph.Utils.dragndrop(container);
+ containerDrag.onDrag(function (e, offset) {
+ viewPortOffset.x += offset.x;
+ viewPortOffset.y += offset.y;
+ graphics.translateRel(offset.x, offset.y);
+
+ renderGraph();
+ });
+
+ containerDrag.onScroll(function (e, scaleOffset, scrollPoint) {
+ var scaleFactor = Math.pow(1 + 0.4, scaleOffset < 0 ? -0.2 : 0.2);
+ transform.scale = graphics.scale(scaleFactor, scrollPoint);
+
+ renderGraph();
+ publicEvents.fire('scale', transform.scale);
+ });
+
+ graph.forEachNode(listenNodeEvents);
+
+ releaseGraphEvents();
+ graphEvents = Viva.Graph.Utils.events(graph);
+ graphEvents.on('changed', onGraphChanged);
+ },
+
+ stopListenToEvents = function () {
+ rendererInitialized = false;
+ releaseGraphEvents();
+ releaseContainerDragManager();
+ windowEvents.stop('resize', onWindowResized);
+ publicEvents.removeAllListeners();
+ animationTimer.stop();
+
+ graph.forEachLink(function (link) {
+ if (settings.renderLinks) { removeLinkUi(link); }
+ });
+
+ graph.forEachNode(function (node) {
+ releaseNodeEvents(node);
+ removeNodeUi(node);
+ });
+
+ layout.dispose();
+ releaseDom();
+ };
+
+ return {
+ /**
+ * Performs rendering of the graph.
+ *
+ * @param iterationsCount if specified renderer will run only given number of iterations
+ * and then stop. Otherwise graph rendering is performed infinitely.
+ *
+ * Note: if rendering stopped by used started dragging nodes or new nodes were added to the
+ * graph renderer will give run more iterations to reflect changes.
+ */
+ run : function (iterationsCount) {
+
+ if (!rendererInitialized) {
+ prepareSettings();
+ prerender();
+
+ updateCenter();
+ initDom();
+ listenToEvents();
+
+ rendererInitialized = true;
+ }
+
+ renderIterations(iterationsCount);
+
+ return this;
+ },
+
+ reset : function () {
+ graphics.resetScale();
+ updateCenter();
+ transform.scale = 1;
+ },
+
+ pause : function () {
+ animationTimer.stop();
+ },
+
+ resume : function () {
+ animationTimer.restart();
+ },
+
+ rerender : function () {
+ renderGraph();
+ return this;
+ },
+
+ /**
+ * Removes this renderer and deallocates all resources/timers
+ */
+ dispose : function () {
+ stopListenToEvents(); // I quit!
+ },
+
+ on : function (eventName, callback) {
+ publicEvents.addEventListener(eventName, callback);
+ return this;
+ },
+
+ off : function (eventName, callback) {
+ publicEvents.removeEventListener(eventName, callback);
+ return this;
+ }
+ };
+};
+Viva.Graph.serializer = function () {
+ var checkJSON = function () {
+ if (typeof JSON === 'undefined' || !JSON.stringify || !JSON.parse) {
+ throw 'JSON serializer is not defined.';
+ }
+ },
+
+ nodeTransformStore = function (node) {
+ return { id : node.id, data: node.data };
+ },
+
+ linkTransformStore = function (link) {
+ return {
+ fromId : link.fromId,
+ toId: link.toId,
+ data : link.data
+ };
+ },
+
+ nodeTransformLoad = function (node) {
+ return node;
+ },
+
+ linkTransformLoad = function (link) {
+ return link;
+ };
+
+ return {
+ /**
+ * Saves graph to JSON format.
+ *
+ * NOTE: ECMAScript 5 (or alike) JSON object is required to be defined
+ * to get proper output.
+ *
+ * @param graph to be saved in JSON format.
+ * @param nodeTransform optional callback function(node) which returns what should be passed into nodes collection
+ * @param linkTransform optional callback functions(link) which returns what should be passed into the links collection
+ */
+ storeToJSON : function (graph, nodeTransform, linkTransform) {
+ if (!graph) { throw 'Graph is not defined'; }
+ checkJSON();
+
+ nodeTransform = nodeTransform || nodeTransformStore;
+ linkTransform = linkTransform || linkTransformStore;
+
+ var store = {
+ nodes : [],
+ links : []
+ };
+
+ graph.forEachNode(function (node) { store.nodes.push(nodeTransform(node)); });
+ graph.forEachLink(function (link) { store.links.push(linkTransform(link)); });
+
+ return JSON.stringify(store);
+ },
+
+ /**
+ * Restores graph from JSON string created by storeToJSON() method.
+ *
+ * NOTE: ECMAScript 5 (or alike) JSON object is required to be defined
+ * to get proper output.
+ *
+ * @param jsonString is a string produced by storeToJSON() method.
+ * @param nodeTransform optional callback function(node) which accepts deserialized node and returns object with
+ * 'id' and 'data' properties.
+ * @param linkTransform optional callback functions(link) which accepts deserialized link and returns link object with
+ * 'fromId', 'toId' and 'data' properties.
+ */
+ loadFromJSON : function (jsonString, nodeTransform, linkTransform) {
+ if (typeof jsonString !== 'string') { throw 'String expected in loadFromJSON() method'; }
+ checkJSON();
+
+ nodeTransform = nodeTransform || nodeTransformLoad;
+ linkTransform = linkTransform || linkTransformLoad;
+
+ var store = JSON.parse(jsonString),
+ graph = Viva.Graph.graph(),
+ i;
+
+ if (!store || !store.nodes || !store.links) { throw 'Passed json string does not represent valid graph'; }
+
+ for (i = 0; i < store.nodes.length; ++i) {
+ var parsedNode = nodeTransform(store.nodes[i]);
+ if (!parsedNode.hasOwnProperty('id')) { throw 'Graph node format is invalid. Node.id is missing'; }
+
+ graph.addNode(parsedNode.id, parsedNode.data);
+ }
+
+ for (i = 0; i < store.links.length; ++i) {
+ var link = linkTransform(store.links[i]);
+ if (!link.hasOwnProperty('fromId') || !link.hasOwnProperty('toId')) { throw 'Graph link format is invalid. Both fromId and toId are required'; }
+
+ graph.addLink(link.fromId, link.toId, link.data);
+ }
+
+ return graph;
+ }
+ };
+};
+/**
+ * @fileOverview Centrality calcuation algorithms.
+ *
+ * @see http://en.wikipedia.org/wiki/Centrality
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.centrality = function () {
+ var singleSourceShortestPath = function (graph, node, oriented) {
+ // I'm using the same naming convention used in http://www.inf.uni-konstanz.de/algo/publications/b-fabc-01.pdf
+ // sorry about cryptic names.
+ var P = {}, // predcessors lists.
+ S = [],
+ sigma = {},
+ d = {},
+ Q = [node.id],
+ v,
+ dV,
+ sigmaV,
+ processNode = function (w) {
+ // w found for the first time?
+ if (!d.hasOwnProperty(w.id)) {
+ Q.push(w.id);
+ d[w.id] = dV + 1;
+ }
+ // Shortest path to w via v?
+ if (d[w.id] === dV + 1) {
+ sigma[w.id] += sigmaV;
+ P[w.id].push(v);
+ }
+ };
+
+ graph.forEachNode(function (t) {
+ P[t.id] = [];
+ sigma[t.id] = 0;
+ });
+
+ d[node.id] = 0;
+ sigma[node.id] = 1;
+
+ while (Q.length) { // Using BFS to find shortest paths
+ v = Q.shift();
+ dV = d[v];
+ sigmaV = sigma[v];
+
+ S.push(v);
+ graph.forEachLinkedNode(v, processNode, oriented);
+ }
+
+ return {
+ S : S,
+ P : P,
+ sigma : sigma
+ };
+ },
+
+ accumulate = function (betweenness, shortestPath, s) {
+ var delta = {},
+ S = shortestPath.S,
+ i,
+ w,
+ coeff,
+ pW,
+ v;
+
+ for (i = 0; i < S.length; i += 1) {
+ delta[S[i]] = 0;
+ }
+
+ // S returns vertices in order of non-increasing distance from s
+ while (S.length) {
+ w = S.pop();
+ coeff = (1 + delta[w]) / shortestPath.sigma[w];
+ pW = shortestPath.P[w];
+
+ for (i = 0; i < pW.length; i += 1) {
+ v = pW[i];
+ delta[v] += shortestPath.sigma[v] * coeff;
+ }
+
+ if (w !== s) {
+ betweenness[w] += delta[w];
+ }
+ }
+ },
+
+ sortBetweennes = function (b) {
+ var sorted = [],
+ key;
+ for (key in b) {
+ if (b.hasOwnProperty(key)) {
+ sorted.push({ key : key, value : b[key]});
+ }
+ }
+
+ return sorted.sort(function (x, y) { return y.value - x.value; });
+ };
+
+ return {
+
+ /**
+ * Compute the shortest-path betweenness centrality for all nodes in a graph.
+ *
+ * Betweenness centrality of a node `n` is the sum of the fraction of all-pairs
+ * shortest paths that pass through `n`. Runtime O(n * v) for non-weighted graphs.
+ *
+ * @see http://en.wikipedia.org/wiki/Centrality#Betweenness_centrality
+ *
+ * @see A Faster Algorithm for Betweenness Centrality.
+ * Ulrik Brandes, Journal of Mathematical Sociology 25(2):163-177, 2001.
+ * http://www.inf.uni-konstanz.de/algo/publications/b-fabc-01.pdf
+ *
+ * @see Ulrik Brandes: On Variants of Shortest-Path Betweenness
+ * Centrality and their Generic Computation.
+ * Social Networks 30(2):136-145, 2008.
+ * http://www.inf.uni-konstanz.de/algo/publications/b-vspbc-08.pdf
+ *
+ * @see Ulrik Brandes and Christian Pich: Centrality Estimation in Large Networks.
+ * International Journal of Bifurcation and Chaos 17(7):2303-2318, 2007.
+ * http://www.inf.uni-konstanz.de/algo/publications/bp-celn-06.pdf
+ *
+ * @param graph for which we are calculating betweenness centrality. Non-weighted graphs are only supported
+ */
+ betweennessCentrality : function (graph) {
+ var betweennes = {},
+ shortestPath;
+ graph.forEachNode(function (node) {
+ betweennes[node.id] = 0;
+ });
+
+ graph.forEachNode(function (node) {
+ shortestPath = singleSourceShortestPath(graph, node);
+ accumulate(betweennes, shortestPath, node);
+ });
+
+ return sortBetweennes(betweennes);
+ },
+
+ /**
+ * Calculates graph nodes degree centrality (in/out or both).
+ *
+ * @see http://en.wikipedia.org/wiki/Centrality#Degree_centrality
+ *
+ * @param graph for which we are calculating centrality.
+ * @param kind optional parameter. Valid values are
+ * 'in' - calculate in-degree centrality
+ * 'out' - calculate out-degree centrality
+ * - if it's not set generic degree centrality is calculated
+ */
+ degreeCentrality : function (graph, kind) {
+ var calcDegFunction,
+ sortedDegrees = [],
+ result = [],
+ degree;
+
+ kind = (kind || 'both').toLowerCase();
+ if (kind === 'in') {
+ calcDegFunction = function (links, nodeId) {
+ var total = 0,
+ i;
+ for (i = 0; i < links.length; i += 1) {
+ total += (links[i].toId === nodeId) ? 1 : 0;
+ }
+ return total;
+ };
+ } else if (kind === 'out') {
+ calcDegFunction = function (links, nodeId) {
+ var total = 0,
+ i;
+ for (i = 0; i < links.length; i += 1) {
+ total += (links[i].fromId === nodeId) ? 1 : 0;
+ }
+ return total;
+ };
+ } else if (kind === 'both') {
+ calcDegFunction = function (links) {
+ return links.length;
+ };
+ } else {
+ throw 'Expected centrality degree kind is: in, out or both';
+ }
+
+ graph.forEachNode(function (node) {
+ var links = graph.getLinks(node.id),
+ nodeDeg = calcDegFunction(links, node.id);
+
+ if (!sortedDegrees.hasOwnProperty(nodeDeg)) {
+ sortedDegrees[nodeDeg] = [node.id];
+ } else {
+ sortedDegrees[nodeDeg].push(node.id);
+ }
+ });
+
+ for (degree in sortedDegrees) {
+ if (sortedDegrees.hasOwnProperty(degree)) {
+ var nodes = sortedDegrees[degree],
+ j;
+ if (nodes) {
+ for (j = 0; j < nodes.length; ++j) {
+ result.unshift({key : nodes[j], value : parseInt(degree, 10)});
+ }
+ }
+ }
+ }
+
+ return result;
+ }
+ };
+};/**
+ * @fileOverview Community structure detection algorithms
+ *
+ * @see http://en.wikipedia.org/wiki/Community_structure
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.community = function () {
+ return {
+ /**
+ * Implementation of Speaker-listener Label Propagation Algorithm (SLPA) of
+ * Jierui Xie and Boleslaw K. Szymanski.
+ *
+ * @see http://arxiv.org/pdf/1109.5720v3.pdf
+ * @see https://sites.google.com/site/communitydetectionslpa/
+ */
+ slpa : function (graph, T, r) {
+ var algorithm = Viva.Graph._community.slpaAlgorithm(graph, T, r);
+ return algorithm.run();
+ }
+ };
+};Viva.Graph._community = {};
+
+/**
+ * Implementation of Speaker-listener Label Propagation Algorithm (SLPA) of
+ * Jierui Xie and Boleslaw K. Szymanski.
+ *
+ * @see http://arxiv.org/pdf/1109.5720v3.pdf
+ * @see https://sites.google.com/site/communitydetectionslpa/
+ */
+Viva.Graph._community.slpaAlgorithm = function (graph, T, r) {
+ T = T || 100; // number of evaluation iterations. Should be at least 20. Influence memory consumption by O(n * T);
+ r = r || 0.3; // community threshold on scale from 0 to 1. Value greater than 0.5 result in disjoint communities.
+
+ var random = Viva.random(1331782216905),
+ shuffleRandom = Viva.random('Greeting goes to you, ', 'dear reader'),
+
+ calculateCommunities = function (nodeMemory, threshold) {
+ var communities = [];
+ nodeMemory.forEachUniqueWord(function (word, count) {
+ if (count > threshold) {
+ communities.push({name : word, probability : count / T });
+ } else {
+ return true; // stop enumeration, nothing more popular after this word.
+ }
+ });
+
+ return communities;
+ },
+
+ init = function (graph) {
+ var algoNodes = [];
+ graph.forEachNode(function (node) {
+ var memory = Viva.Graph._community.occuranceMap(random);
+ memory.add(node.id);
+
+ node.slpa = { memory : memory };
+ algoNodes.push(node.id);
+ });
+
+ return algoNodes;
+ },
+
+ evaluate = function (graph, nodes) {
+ var shuffle = Viva.randomIterator(nodes, shuffleRandom),
+ t,
+
+ /**
+ * One iteration of SLPA.
+ */
+ processNode = function (nodeId) {
+ var listner = graph.getNode(nodeId),
+ saidWords = Viva.Graph._community.occuranceMap(random);
+
+ graph.forEachLinkedNode(nodeId, function (speakerNode) {
+ var word = speakerNode.slpa.memory.getRandomWord();
+ saidWords.add(word);
+ });
+
+ // selecting the most popular label from what it observed in the current step
+ var heard = saidWords.getMostPopularFair();
+ listner.slpa.memory.add(heard);
+ };
+
+ for (t = 0; t < T - 1; ++t) { // -1 is because one 'step' was during init phase
+ shuffle.forEach(processNode);
+ }
+ },
+
+ postProcess = function (graph) {
+ var communities = {};
+
+ graph.forEachNode(function (node) {
+ var nodeCommunities = calculateCommunities(node.slpa.memory, r * T),
+ i;
+
+ for (i = 0; i < nodeCommunities.length; ++i) {
+ var communityName = nodeCommunities[i].name;
+ if (communities.hasOwnProperty(communityName)) {
+ communities[communityName].push(node.id);
+ } else {
+ communities[communityName] = [node.id];
+ }
+ }
+
+ node.communities = nodeCommunities; // TODO: I doesn't look right to augment node's properties. No?
+
+ // Speaking of memory. Node memory created by slpa is really expensive. Release it:
+ node.slpa = null;
+ delete node.slpa;
+ });
+
+ return communities;
+ };
+
+ return {
+
+ /**
+ * Executes SLPA algorithm. The function returns dictionary of discovered communities:
+ * {
+ * 'communityName1' : [nodeId1, nodeId2, .., nodeIdN],
+ * 'communityName2' : [nodeIdK1, nodeIdK2, .., nodeIdKN],
+ * ...
+ * };
+ *
+ * After algorithm is done each node is also augmented with new property 'communities':
+ *
+ * node.communities = [
+ * {name: 'communityName1', probability: 0.78},
+ * {name: 'communityName2', probability: 0.63},
+ * ...
+ * ];
+ *
+ * 'probability' is always higher than 'r' parameter and denotes level of confidence
+ * with which we think node belongs to community.
+ *
+ * Runtime is O(T * m), where m is total number of edges, and T - number of algorithm iterations.
+ *
+ */
+ run : function () {
+ var nodes = init(graph);
+
+ evaluate(graph, nodes);
+
+ return postProcess(graph);
+ }
+ };
+};
+
+/**
+ * A data structure which serves as node memory during SLPA execution. The main idea is to
+ * simplify operations on memory such as
+ * - add word to memory,
+ * - get random word from memory, with probablity proportional to word occurrence in the memory
+ * - get the most popular word in memory
+ *
+ * TODO: currently this structure is extremely inefficient in terms of memory. I think it could be
+ * optimized.
+ */
+Viva.Graph._community.occuranceMap = function (random) {
+ random = random || Viva.random();
+
+ var wordsCount = {},
+ allWords = [],
+ dirtyPopularity = false,
+ uniqueWords = [],
+
+ rebuildPopularityArray = function () {
+ var key;
+
+ uniqueWords.length = 0;
+ for (key in wordsCount) {
+ if (wordsCount.hasOwnProperty(key)) {
+ uniqueWords.push(key);
+ }
+ }
+
+ uniqueWords.sort(function (x, y) {
+ var result = wordsCount[y] - wordsCount[x];
+ if (result) {
+ return result;
+ }
+
+ // Not only number of occurances matters but order of keys also does.
+ // for ... in implementation in different browsers results in different
+ // order, and if we want to have same categories accross all browsers
+ // we should order words by key names too:
+ if (x < y) { return -1; }
+ if (x > y) { return 1; }
+
+ return 0;
+ });
+ },
+
+ ensureUniqueWordsUpdated = function () {
+ if (dirtyPopularity) {
+ rebuildPopularityArray();
+ dirtyPopularity = false;
+ }
+ };
+
+ return {
+
+ /**
+ * Adds a new word to the collection of words.
+ */
+ add : function (word) {
+ word = String(word);
+ if (wordsCount.hasOwnProperty(word)) {
+ wordsCount[word] += 1;
+ } else {
+ wordsCount[word] = 1;
+ }
+
+ allWords.push(word);
+ dirtyPopularity = true;
+ },
+
+ /**
+ * Gets number of occurances for a given word. If word is not present in the dictionary
+ * zero is returned.
+ */
+ getWordCount : function (word) {
+ return wordsCount[word] || 0;
+ },
+
+ /**
+ * Gets the most popular word in the map. If multiple words are at the same position
+ * random word among them is choosen.
+ *
+ */
+ getMostPopularFair : function () {
+ if (allWords.length === 1) {
+ return allWords[0]; // optimizes speed for simple case.
+ }
+
+ ensureUniqueWordsUpdated();
+
+ var maxCount = 0,
+ i;
+
+ for (i = 1; i < uniqueWords.length; ++i) {
+ if (wordsCount[uniqueWords[i - 1]] !== wordsCount[uniqueWords[i]]) {
+ break; // other words are less popular... not interested.
+ } else {
+ maxCount += 1;
+ }
+ }
+
+ maxCount += 1; // to include upper bound. i.e. random words between [0, maxCount] (not [0, maxCount) ).
+ return uniqueWords[random.next(maxCount)];
+ },
+
+ /**
+ * Selects a random word from map with probability proportional
+ * to the occurrence frequency of words.
+ */
+ getRandomWord : function () {
+ if (allWords.length === 0) {
+ throw 'The occurance map is empty. Cannot get empty word';
+ }
+
+ return allWords[random.next(allWords.length)];
+ },
+
+ /**
+ * Enumerates all unique words in the map, and calls
+ * callback(word, occuranceCount) function on each word. Callback
+ * can return true value to stop enumeration.
+ *
+ * Note: enumeration is guaranteed in to run in decreasing order.
+ */
+ forEachUniqueWord : function (callback) {
+ if (typeof callback !== 'function') {
+ throw 'Function callback is expected to enumerate all words';
+ }
+ var i;
+
+ ensureUniqueWordsUpdated();
+
+ for (i = 0; i < uniqueWords.length; ++i) {
+ var word = uniqueWords[i],
+ count = wordsCount[word];
+
+ var stop = callback(word, count);
+ if (stop) {
+ break;
+ }
+ }
+ }
+ };
+};/**
+ * @fileOverview Contains collection of graph generators.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.generator = function () {
+
+ return {
+ /**
+ * Generates complete graph Kn.
+ *
+ * @param n represents number of nodes in the complete graph.
+ */
+ complete : function (n) {
+ if (!n || n < 1) {
+ throw { message: "At least two nodes expected for complete graph" };
+ }
+
+ var g = Viva.Graph.graph(),
+ i,
+ j;
+
+ g.Name = "Complete K" + n;
+
+ for (i = 0; i < n; ++i) {
+ for (j = i + 1; j < n; ++j) {
+ if (i !== j) {
+ g.addLink(i, j);
+ }
+ }
+ }
+
+ return g;
+ },
+
+ /**
+ * Generates complete bipartite graph K n,m. Each node in the
+ * first partition is connected to all nodes in the second partition.
+ *
+ * @param n represents number of nodes in the first graph partition
+ * @param m represents number of nodes in the second graph partition
+ */
+ completeBipartite : function (n, m) {
+ if (!n || !m || n < 0 || m < 0) {
+ throw { message: "Graph dimensions are invalid. Number of nodes in each partition should be greate than 0" };
+ }
+
+ var g = Viva.Graph.graph(),
+ i,
+ j;
+
+ g.Name = "Complete K " + n + "," + m;
+ for (i = 0; i < n; ++i) {
+ for (j = n; j < n + m; ++j) {
+ g.addLink(i, j);
+ }
+ }
+
+ return g;
+ },
+ /**
+ * Generates a graph in a form of a ladder with n steps.
+ *
+ * @param n number of steps in the ladder.
+ */
+ ladder : function (n) {
+ if (!n || n < 0) {
+ throw { message: "Invalid number of nodes" };
+ }
+
+ var g = Viva.Graph.graph(),
+ i;
+ g.Name = "Ladder graph " + n;
+
+ for (i = 0; i < n - 1; ++i) {
+ g.addLink(i, i + 1);
+ // first row
+ g.addLink(n + i, n + i + 1);
+ // second row
+ g.addLink(i, n + i);
+ // ladder"s step
+ }
+
+ g.addLink(n - 1, 2 * n - 1);
+ // last step in the ladder;
+
+ return g;
+ },
+
+ /**
+ * Generates a graph in a form of a circular ladder with n steps.
+ *
+ * @param n number of steps in the ladder.
+ */
+ circularLadder : function (n) {
+ if (!n || n < 0) {
+ throw { message: "Invalid number of nodes" };
+ }
+
+ var g = this.ladder(n);
+ g.Name = "Circular ladder graph " + n;
+
+ g.addLink(0, n - 1);
+ g.addLink(n, 2 * n - 1);
+ return g;
+ },
+ /**
+ * Generates a graph in a form of a grid with n rows and m columns.
+ *
+ * @param n number of rows in the graph.
+ * @param m number of columns in the graph.
+ */
+ grid: function (n, m) {
+ var g = Viva.Graph.graph(),
+ i,
+ j;
+ g.Name = "Grid graph " + n + "x" + m;
+ for (i = 0; i < n; ++i) {
+ for (j = 0; j < m; ++j) {
+ var node = i + j * n;
+ if (i > 0) { g.addLink(node, i - 1 + j * n); }
+ if (j > 0) { g.addLink(node, i + (j - 1) * n); }
+ }
+ }
+
+ return g;
+ },
+
+ path: function (n) {
+ if (!n || n < 0) {
+ throw { message: "Invalid number of nodes" };
+ }
+
+ var g = Viva.Graph.graph(),
+ i;
+ g.Name = "Path graph " + n;
+ g.addNode(0);
+
+ for (i = 1; i < n; ++i) {
+ g.addLink(i - 1, i);
+ }
+
+ return g;
+ },
+
+ lollipop: function (m, n) {
+ if (!n || n < 0 || !m || m < 0) {
+ throw { message: "Invalid number of nodes" };
+ }
+
+ var g = this.complete(m),
+ i;
+ g.Name = "Lollipop graph. Head x Path " + m + "x" + n;
+
+ for (i = 0; i < n; ++i) {
+ g.addLink(m + i - 1, m + i);
+ }
+
+ return g;
+ },
+
+ /**
+ * Creates balanced binary tree with n levels.
+ */
+ balancedBinTree: function (n) {
+ var g = Viva.Graph.graph(),
+ count = Math.pow(2, n),
+ level;
+ g.Name = "Balanced bin tree graph " + n;
+
+ for (level = 1; level < count; ++level) {
+ var root = level,
+ left = root * 2,
+ right = root * 2 + 1;
+
+ g.addLink(root, left);
+ g.addLink(root, right);
+ }
+
+ return g;
+ },
+ /**
+ * Generates a graph with n nodes and 0 links.
+ *
+ * @param n number of nodes in the graph.
+ */
+ randomNoLinks : function (n) {
+ if (!n || n < 0) {
+ throw { message: "Invalid number of nodes" };
+ }
+
+ var g = Viva.Graph.graph(),
+ i;
+ g.Name = "Random graph, no Links: " + n;
+ for (i = 0; i < n; ++i) {
+ g.addNode(i);
+ }
+
+ return g;
+ }
+ };
+};
+/**
+ * @fileOverview Defines a graph renderer that uses CSS based drawings.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+// The file tries to conform generic interface:
+/*jshint unused: false */
+
+Viva.Graph.View = Viva.Graph.View || {};
+
+/**
+ * Performs css-based graph rendering. This module does not perform
+ * layout, but only visualizes nodes and edeges of the graph.
+ *
+ * NOTE: Most likely I will remove this graphics engine due to superior svg support.
+ * In certain cases it doesn't work and require further imporvments:
+ * * does not properly work for dragging.
+ * * does not support scaling.
+ * * does not support IE versions prior to IE9.
+ *
+ */
+Viva.Graph.View.cssGraphics = function () {
+ var container, // Where graph will be rendered
+ OLD_IE = "OLD_IE",
+ offsetX,
+ offsetY,
+ scaleX = 1,
+ scaleY = 1,
+
+ transformName = (function () {
+ var browserName = Viva.BrowserInfo.browser,
+ prefix,
+ version;
+
+ switch (browserName) {
+ case "mozilla":
+ prefix = "Moz";
+ break;
+ case "webkit":
+ prefix = "webkit";
+ break;
+ case "opera":
+ prefix = "O";
+ break;
+ case "msie":
+ version = Viva.BrowserInfo.version.split(".")[0];
+ if (version > 8) {
+ prefix = "ms";
+ } else {
+ return OLD_IE;
+ }
+ break;
+ }
+
+ if (prefix) { // CSS3
+ return prefix + "Transform";
+ }
+ // Unknown browser
+ return null;
+ }()),
+
+ /**
+ * Returns a function (ui, x, y, angleRad).
+ *
+ * The function attempts to rotate "ui" dom element on "angleRad" radians
+ * and position it to "x" "y" coordinates.
+ *
+ * Operation works in most modern browsers that support transform css style
+ * and IE.
+ * */
+ positionLink = (function () {
+ if (transformName === OLD_IE) { // This is old IE, use filters
+ return function (ui, x, y, angleRad) {
+ var cos = Math.cos(angleRad),
+ sin = Math.sin(angleRad);
+
+ // IE 6, 7 and 8 are screwed up when it comes to transforms;
+ // I could not find justification for their choice of "floating"
+ // matrix transform origin. The following ugly code was written
+ // out of complete dispair.
+ if (angleRad < 0) {
+ angleRad = 2 * Math.PI + angleRad;
+ }
+
+ if (angleRad < Math.PI / 2) {
+ ui.style.left = x + "px";
+ ui.style.top = y + "px";
+ } else if (angleRad < Math.PI) {
+ ui.style.left = x - (ui.clientWidth) * Math.cos(Math.PI - angleRad);
+ ui.style.top = y;
+ } else if (angleRad < (Math.PI + Math.PI / 2)) {
+ ui.style.left = x - (ui.clientWidth) * Math.cos(Math.PI - angleRad);
+ ui.style.top = y + (ui.clientWidth) * Math.sin(Math.PI - angleRad);
+ } else {
+ ui.style.left = x;
+ ui.style.top = y + ui.clientWidth * Math.sin(Math.PI - angleRad);
+ }
+ ui.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\"auto expand\"," + "M11=" + cos + ", M12=" + (-sin) + "," + "M21=" + sin + ", M22=" + cos + ");";
+ };
+ }
+
+ if (transformName) { // Modern CSS3 browser
+ return function (ui, x, y, angleRad) {
+ ui.style.left = x + "px";
+ ui.style.top = y + "px";
+
+ ui.style[transformName] = "rotate(" + angleRad + "rad)";
+ ui.style[transformName + "Origin"] = "left";
+ };
+ }
+
+ return function (ui, x, y, angleRad) {
+ // Don't know how to rotate links in other browsers.
+ };
+ }()),
+
+ nodeBuilder = function (node) {
+ var nodeUI = window.document.createElement("div");
+ nodeUI.setAttribute("class", "node");
+ return nodeUI;
+ },
+
+ nodePositionCallback = function (nodeUI, pos) {
+ // TODO: Remove magic 5. It should be half of the width or height of the node.
+ nodeUI.style.left = pos.x - 5 + "px";
+ nodeUI.style.top = pos.y - 5 + "px";
+ },
+
+ linkPositionCallback = function (linkUI, fromPos, toPos) {
+ var dx = fromPos.x - toPos.x,
+ dy = fromPos.y - toPos.y,
+ length = Math.sqrt(dx * dx + dy * dy);
+
+ linkUI.style.height = "1px";
+ linkUI.style.width = length + "px";
+
+ positionLink(linkUI, toPos.x, toPos.y, Math.atan2(dy, dx));
+ },
+
+ linkBuilder = function (link) {
+ var linkUI = window.document.createElement("div");
+ linkUI.setAttribute("class", "link");
+
+ return linkUI;
+ },
+
+ updateTransform = function () {
+ if (container) {
+ if (transformName && transformName !== OLD_IE) {
+ var transform = "matrix(" + scaleX + ", 0, 0," + scaleY + "," + offsetX + "," + offsetY + ")";
+ container.style[transformName] = transform;
+ } else {
+ throw "Not implemented. TODO: Implement OLD_IE Filter based transform";
+ }
+ }
+ };
+
+ return {
+ /**
+ * Sets the collback that creates node representation or creates a new node
+ * presentation if builderCallbackOrNode is not a function.
+ *
+ * @param builderCallbackOrNode a callback function that accepts graph node
+ * as a parameter and must return an element representing this node. OR
+ * if it's not a function it's treated as a node to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
+ * Otherwise a node representation is returned for the passed parameter.
+ */
+ node : function (builderCallbackOrNode) {
+ if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
+ return nodeBuilder(builderCallbackOrNode);
+ }
+
+ nodeBuilder = builderCallbackOrNode;
+
+ return this;
+ },
+
+ /**
+ * Sets the collback that creates link representation or creates a new link
+ * presentation if builderCallbackOrLink is not a function.
+ *
+ * @param builderCallbackOrLink a callback function that accepts graph link
+ * as a parameter and must return an element representing this link. OR
+ * if it's not a function it's treated as a link to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
+ * Otherwise a link representation is returned for the passed parameter.
+ */
+ link : function (builderCallbackOrLink) {
+ if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
+ return linkBuilder(builderCallbackOrLink);
+ }
+
+ linkBuilder = builderCallbackOrLink;
+ return this;
+ },
+
+ /**
+ * Default input manager listens to DOM events to process nodes drag-n-drop
+ */
+ inputManager : Viva.Input.domInputManager,
+
+ /**
+ * Sets translate operation that should be applied to all nodes and links.
+ */
+ graphCenterChanged : function (x, y) {
+ offsetX = x;
+ offsetY = y;
+ updateTransform();
+ },
+
+ translateRel : function (dx, dy) {
+ offsetX += dx;
+ offsetY += dy;
+ updateTransform();
+ },
+
+ scale : function (x, y) {
+ // TODO: implement me
+ return 1;
+ },
+
+ resetScale : function () {
+ // TODO: implement me
+ return this;
+ },
+
+ /**
+ * Called every before renderer starts rendering.
+ */
+ beginRender : function () {},
+
+ /**
+ * Called every time when renderer finishes one step of rendering.
+ */
+ endRender : function () {},
+ /**
+ * Allows to override default position setter for the node with a new
+ * function. newPlaceCallback(node, position) is function which
+ * is used by updateNode().
+ */
+ placeNode : function (newPlaceCallback) {
+ nodePositionCallback = newPlaceCallback;
+ return this;
+ },
+
+ placeLink : function (newPlaceLinkCallback) {
+ linkPositionCallback = newPlaceLinkCallback;
+ return this;
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * providers prepare to render.
+ */
+ init : function (parentContainer) {
+ container = parentContainer;
+ updateTransform();
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given link of the graph
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ */
+ initLink : function (linkUI) {
+ if (container.childElementCount > 0) {
+ container.insertBefore(linkUI, container.firstChild);
+ } else {
+ container.appendChild(linkUI);
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove link from rendering surface.
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ **/
+ releaseLink : function (linkUI) {
+ container.removeChild(linkUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given node of the graph.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ initNode : function (nodeUI) {
+ container.appendChild(nodeUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove node from rendering surface.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ releaseNode : function (nodeUI) {
+ container.removeChild(nodeUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given node to recommended position pos {x, y};
+ */
+ updateNodePosition : function (node, pos) {
+ nodePositionCallback(node, pos);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given link of the graph
+ */
+ updateLinkPosition : function (link, fromPos, toPos) {
+ linkPositionCallback(link, fromPos, toPos);
+ }
+ };
+};
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+/**
+ * Simple wrapper over svg object model API, to shorten the usage syntax.
+ */
+Viva.Graph.svg = function (element) {
+ var svgns = "http://www.w3.org/2000/svg",
+ xlinkns = "http://www.w3.org/1999/xlink",
+ svgElement = element;
+
+ if (typeof element === "string") {
+ svgElement = window.document.createElementNS(svgns, element);
+ }
+
+ if (svgElement.vivagraphAugmented) {
+ return svgElement;
+ }
+
+ svgElement.vivagraphAugmented = true;
+
+ // Augment svg element (TODO: it's not safe - what if some function already exists on the prototype?):
+
+ /**
+ * Gets an svg attribute from an element if value is not specified.
+ * OR sets a new value to the given attribute.
+ *
+ * @param name - svg attribute name;
+ * @param value - value to be set;
+ *
+ * @returns svg element if both name and value are specified; or value of the given attribute
+ * if value parameter is missing.
+ */
+ svgElement.attr = function (name, value) {
+ if (arguments.length === 2) {
+ if (value !== null) {
+ svgElement.setAttributeNS(null, name, value);
+ } else {
+ svgElement.removeAttributeNS(null, name);
+ }
+
+ return svgElement;
+ }
+
+ return svgElement.getAttributeNS(null, name);
+ };
+
+ svgElement.append = function (element) {
+ var child = Viva.Graph.svg(element);
+ svgElement.appendChild(child);
+ return child;
+ };
+
+ svgElement.text = function (textContent) {
+ if (typeof textContent !== "undefined") {
+ svgElement.textContent = textContent;
+ return svgElement;
+ }
+ return svgElement.textContent;
+ };
+
+ svgElement.link = function (target) {
+ if (arguments.length) {
+ svgElement.setAttributeNS(xlinkns, "xlink:href", target);
+ return svgElement;
+ }
+
+ return svgElement.getAttributeNS(xlinkns, "xlink:href");
+ };
+
+ svgElement.children = function (selector) {
+ var wrappedChildren = [],
+ childrenCount = svgElement.childNodes.length,
+ i,
+ j;
+
+ if (selector === undefined && svgElement.hasChildNodes()) {
+ for (i = 0; i < childrenCount; i++) {
+ wrappedChildren.push(Viva.Graph.svg(svgElement.childNodes[i]));
+ }
+ } else if (typeof selector === "string") {
+ var classSelector = (selector[0] === "."),
+ idSelector = (selector[0] === "#"),
+ tagSelector = !classSelector && !idSelector;
+
+ for (i = 0; i < childrenCount; i++) {
+ var el = svgElement.childNodes[i];
+
+ // pass comments, text nodes etc.
+ if (el.nodeType === 1) {
+ var classes = el.attr("class"),
+ id = el.attr("id"),
+ tagName = el.nodeName;
+
+ if (classSelector && classes) {
+ classes = classes.replace(/\s+/g, " ").split(" ");
+ for (j = 0; j < classes.length; j++) {
+ if (classSelector && classes[j] === selector.substr(1)) {
+ wrappedChildren.push(Viva.Graph.svg(el));
+ break;
+ }
+ }
+ } else if (idSelector && id === selector.substr(1)) {
+ wrappedChildren.push(Viva.Graph.svg(el));
+ break;
+ } else if (tagSelector && tagName === selector) {
+ wrappedChildren.push(Viva.Graph.svg(el));
+ }
+
+ wrappedChildren = wrappedChildren.concat(Viva.Graph.svg(el).children(selector));
+ }
+ }
+
+ if (idSelector && wrappedChildren.length === 1) {
+ return wrappedChildren[0];
+ }
+ }
+
+ return wrappedChildren;
+ };
+
+ return svgElement;
+};
+/**
+ * @fileOverview Defines a graph renderer that uses SVG based drawings.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.View = Viva.Graph.View || {};
+
+/**
+ * Performs svg-based graph rendering. This module does not perform
+ * layout, but only visualizes nodes and edeges of the graph.
+ */
+Viva.Graph.View.svgGraphics = function () {
+ var svgContainer,
+ svgRoot,
+ offsetX,
+ offsetY,
+ actualScale = 1,
+/*jshint unused: false */
+ nodeBuilder = function (node) {
+ return Viva.Graph.svg("rect")
+ .attr("width", 10)
+ .attr("height", 10)
+ .attr("fill", "#00a2e8");
+ },
+
+ nodePositionCallback = function (nodeUI, pos) {
+ // TODO: Remove magic 5. It should be halfo of the width or height of the node.
+ nodeUI.attr("x", pos.x - 5)
+ .attr("y", pos.y - 5);
+ },
+
+ linkBuilder = function (link) {
+ return Viva.Graph.svg("line")
+ .attr("stroke", "#999");
+ },
+
+ linkPositionCallback = function (linkUI, fromPos, toPos) {
+ linkUI.attr("x1", fromPos.x)
+ .attr("y1", fromPos.y)
+ .attr("x2", toPos.x)
+ .attr("y2", toPos.y);
+ },
+
+ fireRescaled = function (graphics) {
+ // TODO: maybe we shall copy changes?
+ graphics.fire("rescaled");
+ },
+
+ updateTransform = function () {
+ if (svgContainer) {
+ var transform = "matrix(" + actualScale + ", 0, 0," + actualScale + "," + offsetX + "," + offsetY + ")";
+ svgContainer.attr("transform", transform);
+ }
+ };
+
+ var graphics = {
+ /**
+ * Sets the collback that creates node representation or creates a new node
+ * presentation if builderCallbackOrNode is not a function.
+ *
+ * @param builderCallbackOrNode a callback function that accepts graph node
+ * as a parameter and must return an element representing this node. OR
+ * if it's not a function it's treated as a node to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
+ * Otherwise a node representation is returned for the passed parameter.
+ */
+ node : function (builderCallbackOrNode) {
+
+ if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
+ return nodeBuilder(builderCallbackOrNode);
+ }
+
+ nodeBuilder = builderCallbackOrNode;
+
+ return this;
+ },
+
+ /**
+ * Sets the collback that creates link representation or creates a new link
+ * presentation if builderCallbackOrLink is not a function.
+ *
+ * @param builderCallbackOrLink a callback function that accepts graph link
+ * as a parameter and must return an element representing this link. OR
+ * if it's not a function it's treated as a link to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
+ * Otherwise a link representation is returned for the passed parameter.
+ */
+ link : function (builderCallbackOrLink) {
+ if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
+ return linkBuilder(builderCallbackOrLink);
+ }
+
+ linkBuilder = builderCallbackOrLink;
+ return this;
+ },
+
+ /**
+ * Allows to override default position setter for the node with a new
+ * function. newPlaceCallback(nodeUI, position) is function which
+ * is used by updateNodePosition().
+ */
+ placeNode : function (newPlaceCallback) {
+ nodePositionCallback = newPlaceCallback;
+ return this;
+ },
+
+ placeLink : function (newPlaceLinkCallback) {
+ linkPositionCallback = newPlaceLinkCallback;
+ return this;
+ },
+
+ /**
+ * Called every before renderer starts rendering.
+ */
+ beginRender : function () {},
+
+ /**
+ * Called every time when renderer finishes one step of rendering.
+ */
+ endRender : function () {},
+
+ /**
+ * Sets translate operation that should be applied to all nodes and links.
+ */
+ graphCenterChanged : function (x, y) {
+ offsetX = x;
+ offsetY = y;
+ updateTransform();
+ },
+
+ /**
+ * Default input manager listens to DOM events to process nodes drag-n-drop
+ */
+ inputManager : Viva.Input.domInputManager,
+
+ translateRel : function (dx, dy) {
+ var p = svgRoot.createSVGPoint(),
+ t = svgContainer.getCTM(),
+ origin = svgRoot.createSVGPoint().matrixTransform(t.inverse());
+
+ p.x = dx;
+ p.y = dy;
+
+ p = p.matrixTransform(t.inverse());
+ p.x = (p.x - origin.x) * t.a;
+ p.y = (p.y - origin.y) * t.d;
+
+ t.e += p.x;
+ t.f += p.y;
+
+ var transform = "matrix(" + t.a + ", 0, 0," + t.d + "," + t.e + "," + t.f + ")";
+ svgContainer.attr("transform", transform);
+ },
+
+ scale : function (scaleFactor, scrollPoint) {
+ var p = svgRoot.createSVGPoint();
+ p.x = scrollPoint.x;
+ p.y = scrollPoint.y;
+
+ p = p.matrixTransform(svgContainer.getCTM().inverse()); // translate to svg coordinates
+
+ // Compute new scale matrix in current mouse position
+ var k = svgRoot.createSVGMatrix().translate(p.x, p.y).scale(scaleFactor).translate(-p.x, -p.y),
+ t = svgContainer.getCTM().multiply(k);
+
+ actualScale = t.a;
+ offsetX = t.e;
+ offsetY = t.f;
+ var transform = "matrix(" + t.a + ", 0, 0," + t.d + "," + t.e + "," + t.f + ")";
+ svgContainer.attr("transform", transform);
+
+ fireRescaled(this);
+ return actualScale;
+ },
+
+ resetScale : function () {
+ actualScale = 1;
+ var transform = "matrix(1, 0, 0, 1, 0, 0)";
+ svgContainer.attr("transform", transform);
+ fireRescaled(this);
+ return this;
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render.
+ */
+ init : function (container) {
+ svgRoot = Viva.Graph.svg("svg");
+
+ svgContainer = Viva.Graph.svg("g")
+ .attr("buffered-rendering", "dynamic");
+
+ svgRoot.appendChild(svgContainer);
+ container.appendChild(svgRoot);
+ updateTransform();
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider release occupied resources.
+ */
+ release : function (container) {
+ if (svgRoot && container) {
+ container.removeChild(svgRoot);
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given link of the graph
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ */
+ initLink : function (linkUI) {
+ if (!linkUI) { return; }
+ if (svgContainer.childElementCount > 0) {
+ svgContainer.insertBefore(linkUI, svgContainer.firstChild);
+ } else {
+ svgContainer.appendChild(linkUI);
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove link from rendering surface.
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ **/
+ releaseLink : function (linkUI) {
+ svgContainer.removeChild(linkUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given node of the graph.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ initNode : function (nodeUI) {
+ svgContainer.appendChild(nodeUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove node from rendering surface.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ releaseNode : function (nodeUI) {
+ svgContainer.removeChild(nodeUI);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given node UI to recommended position pos {x, y};
+ */
+ updateNodePosition : function (nodeUI, pos) {
+ nodePositionCallback(nodeUI, pos);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given link of the graph. Pos objects are {x, y};
+ */
+ updateLinkPosition : function (link, fromPos, toPos) {
+ linkPositionCallback(link, fromPos, toPos);
+ },
+
+ /**
+ * Returns root svg element.
+ *
+ * Note: This is internal method specific to this renderer
+ * TODO: Rename this to getGraphicsRoot() to be uniform accross graphics classes
+ */
+ getSvgRoot : function () {
+ return svgRoot;
+ }
+ };
+
+ // Let graphics fire events before we return it to the caller.
+ Viva.Graph.Utils.events(graphics).extend();
+
+ return graphics;
+};
+/**
+ * @fileOverview I used this class to render links UI within
+ * node. Lesser SVG elements is proven to improve performance
+ * but I'm not happy with the code result here. Probably this class
+ * will be removed from future versions.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.View.svgNodeFactory = function (graph) {
+ var defaultColor = "#999",
+ geom = Viva.Graph.geom(),
+
+ attachCustomContent = function (nodeUI) {
+ nodeUI.size = {w: 10, h: 10};
+ nodeUI.append("rect")
+ .attr("width", nodeUI.size.w)
+ .attr("height", nodeUI.size.h)
+ .attr("stroke", "orange")
+ .attr("fill", "orange");
+ },
+
+ nodeSize = function (nodeUI) {
+ return nodeUI.size;
+ };
+
+
+ return {
+ node : function (node) {
+ var nodeUI = Viva.Graph.svg("g");
+
+ attachCustomContent(nodeUI, node);
+ nodeUI.nodeId = node.id;
+ return nodeUI;
+ },
+
+ link : function (link) {
+ var fromNode = graph.getNode(link.fromId),
+ nodeUI = fromNode && fromNode.ui;
+
+ if (nodeUI && !nodeUI.linksContainer) {
+ var nodeLinks = Viva.Graph.svg("path")
+ .attr("stroke", defaultColor);
+ nodeUI.linksContainer = nodeLinks;
+ return nodeLinks;
+ }
+
+ return null;
+ },
+
+ /**
+ * Sets a callback function for custom nodes contnet.
+ * @param conentCreator(nodeUI, node) - callback function which returns a node content UI.
+ * Image, for example.
+ * @param sizeProvider(nodeUI) - a callback function which accepts nodeUI returned by
+ * contentCreator and returns it"s custom rectangular size.
+ *
+ */
+ customContent : function (contentCreator, sizeProvider) {
+ if (typeof contentCreator !== "function" ||
+ typeof sizeProvider !== "function") {
+ throw "Two functions expected: contentCreator(nodeUI, node) and size(nodeUI)";
+ }
+
+ attachCustomContent = contentCreator;
+ nodeSize = sizeProvider;
+ },
+
+ placeNode : function (nodeUI, fromNodePos) {
+ var linksPath = "",
+ fromNodeSize = nodeSize(nodeUI);
+
+ graph.forEachLinkedNode(nodeUI.nodeId, function (linkedNode, link) {
+ if (!linkedNode.position || !linkedNode.ui) {
+ return; // not yet defined - ignore.
+ }
+
+ if (linkedNode.ui === nodeUI) {
+ return; // incoming link - ignore;
+ }
+ if (link.fromId !== nodeUI.nodeId) {
+ return; // we process only outgoing links.
+ }
+
+ var toNodeSize = nodeSize(linkedNode.ui),
+ toNodePos = linkedNode.position;
+
+ var from = geom.intersectRect(
+ fromNodePos.x - fromNodeSize.w / 2, // left
+ fromNodePos.y - fromNodeSize.h / 2, // top
+ fromNodePos.x + fromNodeSize.w / 2, // right
+ fromNodePos.y + fromNodeSize.h / 2, // bottom
+ fromNodePos.x,
+ fromNodePos.y,
+ toNodePos.x,
+ toNodePos.y
+ ) || fromNodePos;
+
+ var to = geom.intersectRect(
+ toNodePos.x - toNodeSize.w / 2, // left
+ toNodePos.y - toNodeSize.h / 2, // top
+ toNodePos.x + toNodeSize.w / 2, // right
+ toNodePos.y + toNodeSize.h / 2, // bottom
+ toNodePos.x,
+ toNodePos.y,
+ fromNodePos.x,
+ fromNodePos.y
+ ) || toNodePos;
+
+ linksPath += "M" + Math.round(from.x) + " " + Math.round(from.y) +
+ "L" + Math.round(to.x) + " " + Math.round(to.y);
+ });
+
+ nodeUI.attr("transform",
+ "translate(" + (fromNodePos.x - fromNodeSize.w / 2) + ", " +
+ (fromNodePos.y - fromNodeSize.h / 2) + ")");
+ if (linksPath !== "" && nodeUI.linksContainer) {
+ nodeUI.linksContainer.attr("d", linksPath);
+ }
+ }
+
+ };
+};
+/**
+ * @fileOverview Utility functions for webgl rendering.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.webgl = function (gl) {
+ var createShader = function (shaderText, type) {
+ var shader = gl.createShader(type);
+ gl.shaderSource(shader, shaderText);
+ gl.compileShader(shader);
+
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ var msg = gl.getShaderInfoLog(shader);
+ window.alert(msg);
+ throw msg;
+ }
+
+ return shader;
+ };
+
+ return {
+ createProgram : function (vertexShaderSrc, fragmentShaderSrc) {
+ var program = gl.createProgram(),
+ vs = createShader(vertexShaderSrc, gl.VERTEX_SHADER),
+ fs = createShader(fragmentShaderSrc, gl.FRAGMENT_SHADER);
+
+ gl.attachShader(program, vs);
+ gl.attachShader(program, fs);
+ gl.linkProgram(program);
+
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+ var msg = gl.getShaderInfoLog(program);
+ window.alert(msg);
+ throw msg;
+ }
+
+ return program;
+ },
+
+ extendArray : function (buffer, itemsInBuffer, elementsPerItem) {
+ if ((itemsInBuffer + 1) * elementsPerItem > buffer.length) {
+ // Every time we run out of space create new array twice bigger.
+ // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
+ var extendedArray = new Float32Array(buffer.length * elementsPerItem * 2);
+ extendedArray.set(buffer);
+
+ return extendedArray;
+ }
+
+ return buffer;
+ },
+
+ copyArrayPart : function (array, to, from, elementsCount) {
+ var i;
+ for (i = 0; i < elementsCount; ++i) {
+ array[to + i] = array[from + i];
+ }
+ },
+
+ swapArrayPart : function (array, from, to, elementsCount) {
+ var i;
+ for (i = 0; i < elementsCount; ++i) {
+ var tmp = array[from + i];
+ array[from + i] = array[to + i];
+ array[to + i] = tmp;
+ }
+ },
+
+ getLocations : function (program, uniformOrAttributeNames) {
+ var foundLocations = {},
+ i;
+ for (i = 0; i < uniformOrAttributeNames.length; ++i) {
+ var name = uniformOrAttributeNames[i],
+ location = -1;
+ if (name.indexOf("a_") === 0) {
+ location = gl.getAttribLocation(program, name);
+ if (location === -1) {
+ throw "Program doesn't have required attribute: " + name;
+ }
+
+ foundLocations[name.slice(2)] = location;
+ } else if (name.indexOf("u_") === 0) {
+ location = gl.getUniformLocation(program, name);
+ if (location === null) {
+ throw "Program doesn't have required uniform: " + name;
+ }
+
+ foundLocations[name.slice(2)] = location;
+ } else {
+ throw "Couldn't figure out your intent. All uniforms should start with 'u_' prefix, and attributes with 'a_'";
+ }
+ }
+
+ return foundLocations;
+ },
+
+ context : gl
+ };
+};
+/**
+ * @fileOverview Defines a model objects to represents graph rendering
+ * primitives in webglGraphics.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.View.WebglUtils = function () { };
+
+/**
+ * Parses various color strings and returns color value used in webgl shaders.
+ */
+Viva.Graph.View.WebglUtils.prototype.parseColor = function (color) {
+ var parsedColor = 0x009ee8ff;
+
+ if (typeof color === 'string' && color) {
+ if (color.length === 4) { // #rgb
+ color = color.replace(/([^#])/g, '$1$1'); // duplicate each letter except first #.
+ }
+ if (color.length === 9) { // #rrggbbaa
+ parsedColor = parseInt(color.substr(1), 16);
+ } else if (color.length === 7) { // or #rrggbb.
+ parsedColor = (parseInt(color.substr(1), 16) << 8) | 0xff;
+ } else {
+ throw 'Color expected in hex format with preceding "#". E.g. #00ff00. Got value: ' + color;
+ }
+ } else if (typeof color === 'number') {
+ parsedColor = color;
+ }
+
+ return parsedColor;
+};
+
+Viva.Graph.View._webglUtil = new Viva.Graph.View.WebglUtils(); // reuse this instance internally.
+
+/**
+ * Defines a webgl line. This class has no rendering logic at all,
+ * it's just passed to corresponding shader and the shader should
+ * figure out how to render it.
+ *
+ * @see Viva.Graph.View.webglLinkShader.position
+ */
+Viva.Graph.View.webglLine = function (color) {
+ return {
+ /**
+ * Gets or sets color of the line. If you set this property externally
+ * make sure it always come as integer of 0xRRGGBBAA format
+ */
+ color : Viva.Graph.View._webglUtil.parseColor(color)
+ };
+};
+
+/**
+ * Can be used as a callback in the webglGraphics.node() function, to
+ * create a custom looking node.
+ *
+ * @param size - size of the node in pixels.
+ * @param color - color of the node in '#rrggbbaa' or '#rgb' format.
+ */
+Viva.Graph.View.webglSquare = function (size, color) {
+ return {
+ /**
+ * Gets or sets size of the sqare side.
+ */
+ size : typeof size === 'number' ? size : 10,
+
+ /**
+ * Gets or sets color of the square.
+ */
+ color : Viva.Graph.View._webglUtil.parseColor(color)
+ };
+};
+
+/**
+ * Represents a model for image.
+ */
+Viva.Graph.View.webglImage = function (size, src) {
+ return {
+ /**
+ * Gets texture index where current image is placed.s
+ */
+ _texture : 0,
+
+ /**
+ * Gets offset in the texture where current image is placed.
+ */
+ _offset : 0,
+
+ /**
+ * Gets size of the square with the image.
+ */
+ size : typeof size === 'number' ? size : 32,
+
+ /**
+ * Source of the image. If image is comming not from your domain
+ * certain origin restrictions applies.
+ * See http://www.khronos.org/registry/webgl/specs/latest/#4.2 for more details.
+ */
+ src : src
+ };
+};/**
+ * @fileOverview Defines a naive form of nodes for webglGraphics class.
+ * This form allows to change color of node. Shape of nodes is rectangular.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+/**
+ * Defines simple UI for nodes in webgl renderer. Each node is rendered as square. Color and size can be changed.
+ */
+Viva.Graph.View.webglNodeProgram = function () {
+ var ATTRIBUTES_PER_PRIMITIVE = 4, // Primitive is point, x, y, size, color
+ // x, y, z - floats, color = uint.
+ BYTES_PER_NODE = 3 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT,
+ nodesFS = [
+ 'precision mediump float;',
+ 'varying vec4 color;',
+
+ 'void main(void) {',
+ ' gl_FragColor = color;',
+ '}'
+ ].join('\n'),
+ nodesVS = [
+ 'attribute vec3 a_vertexPos;',
+ 'attribute vec4 a_color;',
+ 'uniform vec2 u_screenSize;',
+ 'uniform mat4 u_transform;',
+ 'varying vec4 color;',
+
+ 'void main(void) {',
+ ' gl_Position = u_transform * vec4(a_vertexPos.xy/u_screenSize, 0, 1);',
+ ' gl_PointSize = a_vertexPos.z * u_transform[0][0];',
+ ' color = a_color.abgr;',
+ '}'
+ ].join('\n'),
+
+ program,
+ gl,
+ buffer,
+ locations,
+ utils,
+ storage = new ArrayBuffer(16 * BYTES_PER_NODE),
+ positions = new Float32Array(storage),
+ colors = new Uint32Array(storage),
+ nodesCount = 0,
+ width,
+ height,
+ transform,
+ sizeDirty,
+
+ ensureEnoughStorage = function () {
+ if ((nodesCount + 1) * BYTES_PER_NODE >= storage.byteLength) {
+ // Every time we run out of space create new array twice bigger.
+ // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
+ var extendedStorage = new ArrayBuffer(storage.byteLength * 2),
+ extendedPositions = new Float32Array(extendedStorage),
+ extendedColors = new Uint32Array(extendedStorage);
+
+ extendedColors.set(colors); // should be enough to copy just one view.
+ positions = extendedPositions;
+ colors = extendedColors;
+ storage = extendedStorage;
+ }
+ };
+
+ return {
+ load : function (glContext) {
+ gl = glContext;
+ utils = Viva.Graph.webgl(glContext);
+
+ program = utils.createProgram(nodesVS, nodesFS);
+ gl.useProgram(program);
+ locations = utils.getLocations(program, ['a_vertexPos', 'a_color', 'u_screenSize', 'u_transform']);
+
+ gl.enableVertexAttribArray(locations.vertexPos);
+ gl.enableVertexAttribArray(locations.color);
+
+ buffer = gl.createBuffer();
+ },
+
+ /**
+ * Updates position of node in the buffer of nodes.
+ *
+ * @param idx - index of current node.
+ * @param pos - new position of the node.
+ */
+ position : function (nodeUI, pos) {
+ var idx = nodeUI.id;
+
+ positions[idx * ATTRIBUTES_PER_PRIMITIVE] = pos.x;
+ positions[idx * ATTRIBUTES_PER_PRIMITIVE + 1] = pos.y;
+ positions[idx * ATTRIBUTES_PER_PRIMITIVE + 2] = nodeUI.size;
+
+ colors[idx * ATTRIBUTES_PER_PRIMITIVE + 3] = nodeUI.color;
+ },
+
+ updateTransform : function (newTransform) {
+ sizeDirty = true;
+ transform = newTransform;
+ },
+
+ updateSize : function (w, h) {
+ width = w;
+ height = h;
+ sizeDirty = true;
+ },
+
+ removeNode : function (node) {
+ if (nodesCount > 0) { nodesCount -= 1; }
+
+ if (node.id < nodesCount && nodesCount > 0) {
+ // we can use colors as a 'view' into array array buffer.
+ utils.copyArrayPart(colors, node.id * ATTRIBUTES_PER_PRIMITIVE, nodesCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
+ }
+ },
+/*jshint unused:false */
+ createNode : function (node) {
+ ensureEnoughStorage();
+ nodesCount += 1;
+ },
+
+ replaceProperties : function (replacedNode, newNode) {},
+/*jshint unused:true */
+
+ render : function () {
+ gl.useProgram(program);
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);
+
+ if (sizeDirty) {
+ sizeDirty = false;
+ gl.uniformMatrix4fv(locations.transform, false, transform);
+ gl.uniform2f(locations.screenSize, width, height);
+ }
+
+ gl.vertexAttribPointer(locations.vertexPos, 3, gl.FLOAT, false, ATTRIBUTES_PER_PRIMITIVE * Float32Array.BYTES_PER_ELEMENT, 0);
+ gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES_PER_PRIMITIVE * Float32Array.BYTES_PER_ELEMENT, 3 * 4);
+
+ gl.drawArrays(gl.POINTS, 0, nodesCount);
+ }
+ };
+};/**
+ * @fileOverview Defines a naive form of links for webglGraphics class.
+ * This form allows to change color of links.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+/**
+ * Defines UI for links in webgl renderer.
+ */
+Viva.Graph.View.webglLinkProgram = function () {
+ var ATTRIBUTES_PER_PRIMITIVE = 6, // primitive is Line with two points. Each has x,y and color = 3 * 2 attributes.
+ BYTES_PER_LINK = 2 * (2 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT), // two nodes * (x, y + color)
+ linksFS = [
+ 'precision mediump float;',
+ 'varying vec4 color;',
+ 'void main(void) {',
+ ' gl_FragColor = color;',
+ '}'
+ ].join('\n'),
+
+ linksVS = [
+ 'attribute vec2 a_vertexPos;',
+ 'attribute vec4 a_color;',
+
+ 'uniform vec2 u_screenSize;',
+ 'uniform mat4 u_transform;',
+
+ 'varying vec4 color;',
+
+ 'void main(void) {',
+ ' gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);',
+ ' color = a_color.abgr;',
+ '}'
+ ].join('\n'),
+
+ program,
+ gl,
+ buffer,
+ utils,
+ locations,
+ linksCount = 0,
+ frontLinkId, // used to track z-index of links.
+ storage = new ArrayBuffer(16 * BYTES_PER_LINK),
+ positions = new Float32Array(storage),
+ colors = new Uint32Array(storage),
+ width,
+ height,
+ transform,
+ sizeDirty,
+
+ ensureEnoughStorage = function () {
+ // TODO: this is a duplicate of webglNodeProgram code. Extract it to webgl.js
+ if ((linksCount+1)*BYTES_PER_LINK > storage.byteLength) {
+ // Every time we run out of space create new array twice bigger.
+ // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
+ var extendedStorage = new ArrayBuffer(storage.byteLength * 2),
+ extendedPositions = new Float32Array(extendedStorage),
+ extendedColors = new Uint32Array(extendedStorage);
+
+ extendedColors.set(colors); // should be enough to copy just one view.
+ positions = extendedPositions;
+ colors = extendedColors;
+ storage = extendedStorage;
+ }
+ };
+
+ return {
+ load : function (glContext) {
+ gl = glContext;
+ utils = Viva.Graph.webgl(glContext);
+
+ program = utils.createProgram(linksVS, linksFS);
+ gl.useProgram(program);
+ locations = utils.getLocations(program, ['a_vertexPos', 'a_color', 'u_screenSize', 'u_transform']);
+
+ gl.enableVertexAttribArray(locations.vertexPos);
+ gl.enableVertexAttribArray(locations.color);
+
+ buffer = gl.createBuffer();
+ },
+
+ position: function (linkUi, fromPos, toPos) {
+ var linkIdx = linkUi.id,
+ offset = linkIdx * ATTRIBUTES_PER_PRIMITIVE;
+ positions[offset] = fromPos.x;
+ positions[offset + 1] = fromPos.y;
+ colors[offset + 2] = linkUi.color;
+
+ positions[offset + 3] = toPos.x;
+ positions[offset + 4] = toPos.y;
+ colors[offset + 5] = linkUi.color;
+ },
+
+ createLink : function (ui) {
+ ensureEnoughStorage();
+
+ linksCount += 1;
+ frontLinkId = ui.id;
+ },
+
+ removeLink : function (ui) {
+ if (linksCount > 0) { linksCount -= 1; }
+ // swap removed link with the last link. This will give us O(1) performance for links removal:
+ if (ui.id < linksCount && linksCount > 0) {
+ // using colors as a view to array buffer is okay here.
+ utils.copyArrayPart(colors, ui.id * ATTRIBUTES_PER_PRIMITIVE, linksCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
+ }
+ },
+
+ updateTransform : function (newTransform) {
+ sizeDirty = true;
+ transform = newTransform;
+ },
+
+ updateSize : function (w, h) {
+ width = w;
+ height = h;
+ sizeDirty = true;
+ },
+
+ render : function () {
+ gl.useProgram(program);
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);
+
+ if (sizeDirty) {
+ sizeDirty = false;
+ gl.uniformMatrix4fv(locations.transform, false, transform);
+ gl.uniform2f(locations.screenSize, width, height);
+ }
+
+ gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
+ gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);
+
+ gl.drawArrays(gl.LINES, 0, linksCount * 2);
+
+ frontLinkId = linksCount - 1;
+ },
+
+ bringToFront : function (link) {
+ if (frontLinkId > link.id) {
+ utils.swapArrayPart(positions, link.id * ATTRIBUTES_PER_PRIMITIVE, frontLinkId * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
+ }
+ if (frontLinkId > 0) {
+ frontLinkId -= 1;
+ }
+ },
+
+ getFrontLinkId : function () {
+ return frontLinkId;
+ }
+ };
+};
+/**
+ * @fileOverview Defines an image nodes for webglGraphics class.
+ * Shape of nodes is sqare.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+/**
+ * Single texture in the webglAtlas.
+ */
+Viva.Graph.View.Texture = function (size) {
+ this.canvas = window.document.createElement("canvas");
+ this.ctx = this.canvas.getContext("2d");
+ this.isDirty = false;
+ this.canvas.width = this.canvas.height = size;
+};
+
+/**
+ * My naive implementation of textures atlas. It allows clients to load
+ * multimple images into atlas and get canvas representing all of them.
+ *
+ * @param tilesPerTexture - indicates how many images can be loaded to one
+ * texture of the atlas. If number of loaded images exceeds this
+ * parameter a new canvas will be created.
+ */
+Viva.Graph.View.webglAtlas = function (tilesPerTexture) {
+ var tilesPerRow = Math.sqrt(tilesPerTexture || 1024) << 0,
+ tileSize = tilesPerRow,
+ lastLoadedIdx = 1,
+ loadedImages = {},
+ dirtyTimeoutId,
+ skipedDirty = 0,
+ textures = [],
+ trackedUrls = [],
+ that,
+
+ isPowerOf2 = function (n) {
+ return (n & (n - 1)) === 0;
+ },
+ createTexture = function () {
+ var texture = new Viva.Graph.View.Texture(tilesPerRow * tileSize);
+ textures.push(texture);
+ },
+ getTileCoordinates = function (absolutePosition) {
+ var textureNumber = (absolutePosition / tilesPerTexture) << 0,
+ localTileNumber = (absolutePosition % tilesPerTexture),
+ row = (localTileNumber / tilesPerRow) << 0,
+ col = (localTileNumber % tilesPerRow);
+
+ return {textureNumber : textureNumber, row : row, col: col};
+ },
+ markDirtyNow = function () {
+ that.isDirty = true;
+ skipedDirty = 0;
+ dirtyTimeoutId = null;
+ },
+ markDirty = function () {
+ // delay this call, since it results in texture reload
+ if (dirtyTimeoutId) {
+ window.clearTimeout(dirtyTimeoutId);
+ skipedDirty += 1;
+ dirtyTimeoutId = null;
+ }
+
+ if (skipedDirty > 10) {
+ markDirtyNow();
+ } else {
+ dirtyTimeoutId = window.setTimeout(markDirtyNow, 400);
+ }
+ },
+
+ copy = function (from, to) {
+ var fromCanvas = textures[from.textureNumber].canvas,
+ toCtx = textures[to.textureNumber].ctx,
+ x = to.col * tileSize,
+ y = to.row * tileSize;
+
+ toCtx.drawImage(fromCanvas, from.col * tileSize, from.row * tileSize, tileSize, tileSize, x, y, tileSize, tileSize);
+ textures[from.textureNumber].isDirty = true;
+ textures[to.textureNumber].isDirty = true;
+ },
+
+ drawAt = function (tileNumber, img, callback) {
+ var tilePosition = getTileCoordinates(tileNumber),
+ coordinates = { offset : tileNumber };
+
+ if (tilePosition.textureNumber >= textures.length) {
+ createTexture();
+ }
+ var currentTexture = textures[tilePosition.textureNumber];
+
+ currentTexture.ctx.drawImage(img, tilePosition.col * tileSize, tilePosition.row * tileSize, tileSize, tileSize);
+ trackedUrls[tileNumber] = img.src;
+
+ loadedImages[img.src] = coordinates;
+ currentTexture.isDirty = true;
+
+ callback(coordinates);
+ };
+
+ if (!isPowerOf2(tilesPerTexture)) {
+ throw "Tiles per texture should be power of two.";
+ }
+
+ // this is the return object
+ that = {
+ /**
+ * indicates whether atlas has changed texture in it. If true then
+ * some of the textures has isDirty flag set as well.
+ */
+ isDirty : false,
+
+ /**
+ * Clears any signs of atlas changes.
+ */
+ clearDirty : function () {
+ var i;
+ this.isDirty = false;
+ for (i = 0; i < textures.length; ++i) {
+ textures[i].isDirty = false;
+ }
+ },
+
+ /**
+ * Removes given url from colleciton of tiles in the atlas.
+ */
+ remove : function (imgUrl) {
+ var coordinates = loadedImages[imgUrl];
+ if (!coordinates) { return false; }
+ delete loadedImages[imgUrl];
+ lastLoadedIdx -= 1;
+
+
+ if (lastLoadedIdx === coordinates.offset) {
+ return true; // Ignore if it's last image in the whole set.
+ }
+
+ var tileToRemove = getTileCoordinates(coordinates.offset),
+ lastTileInSet = getTileCoordinates(lastLoadedIdx);
+
+ copy(lastTileInSet, tileToRemove);
+
+ var replacedOffset = loadedImages[trackedUrls[lastLoadedIdx]];
+ replacedOffset.offset = coordinates.offset;
+ trackedUrls[coordinates.offset] = trackedUrls[lastLoadedIdx];
+
+ markDirty();
+ return true;
+ },
+
+ /**
+ * Gets all textures in the atlas.
+ */
+ getTextures : function () {
+ return textures; // I trust you...
+ },
+
+ /**
+ * Gets coordinates of the given image in the atlas. Coordinates is an object:
+ * {offset : int } - where offset is an absolute position of the image in the
+ * atlas.
+ *
+ * Absolute means it can be larger than tilesPerTexture parameter, and in that
+ * case clients should get next texture in getTextures() collection.
+ */
+ getCoordinates : function (imgUrl) {
+ return loadedImages[imgUrl];
+ },
+
+ /**
+ * Asynchronously Loads the image to the atlas. Cross-domain security
+ * limitation applies.
+ */
+ load : function (imgUrl, callback) {
+ if (loadedImages.hasOwnProperty(imgUrl)) {
+ callback(loadedImages[imgUrl]);
+ } else {
+ var img = new window.Image(),
+ imgId = lastLoadedIdx;
+
+ lastLoadedIdx += 1;
+ img.crossOrigin = "anonymous";
+ img.onload = function () {
+ markDirty();
+ drawAt(imgId, img, callback);
+ };
+
+ img.src = imgUrl;
+ }
+ }
+ };
+
+ return that;
+};
+
+/**
+ * Defines simple UI for nodes in webgl renderer. Each node is rendered as an image.
+ */
+Viva.Graph.View.webglImageNodeProgram = function () {
+ var ATTRIBUTES_PER_PRIMITIVE = 18,
+ nodesFS = [
+ "precision mediump float;",
+ "varying vec4 color;",
+ "varying vec3 vTextureCoord;",
+ "uniform sampler2D u_sampler0;",
+ "uniform sampler2D u_sampler1;",
+ "uniform sampler2D u_sampler2;",
+ "uniform sampler2D u_sampler3;",
+
+ "void main(void) {",
+ " if (vTextureCoord.z == 0.) {",
+ " gl_FragColor = texture2D(u_sampler0, vTextureCoord.xy);",
+ " } else if (vTextureCoord.z == 1.) {",
+ " gl_FragColor = texture2D(u_sampler1, vTextureCoord.xy);",
+ " } else if (vTextureCoord.z == 2.) {",
+ " gl_FragColor = texture2D(u_sampler2, vTextureCoord.xy);",
+ " } else if (vTextureCoord.z == 3.) {",
+ " gl_FragColor = texture2D(u_sampler3, vTextureCoord.xy);",
+ " } else { gl_FragColor = vec4(0, 1, 0, 1); }",
+ "}"
+ ].join("\n"),
+
+ nodesVS = [
+ "attribute vec2 a_vertexPos;",
+
+ "attribute float a_customAttributes;",
+ "uniform vec2 u_screenSize;",
+ "uniform mat4 u_transform;",
+ "uniform float u_tilesPerTexture;",
+ "varying vec3 vTextureCoord;",
+
+ "void main(void) {",
+ " gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0, 1);",
+ "float corner = mod(a_customAttributes, 4.);",
+ "float tileIndex = mod(floor(a_customAttributes / 4.), u_tilesPerTexture);",
+ "float tilesPerRow = sqrt(u_tilesPerTexture);",
+ "float tileSize = 1./tilesPerRow;",
+ "float tileColumn = mod(tileIndex, tilesPerRow);",
+ "float tileRow = floor(tileIndex/tilesPerRow);",
+
+ "if(corner == 0.0) {",
+ " vTextureCoord.xy = vec2(0, 1);",
+ "} else if(corner == 1.0) {",
+ " vTextureCoord.xy = vec2(1, 1);",
+ "} else if(corner == 2.0) {",
+ " vTextureCoord.xy = vec2(0, 0);",
+ "} else {",
+ " vTextureCoord.xy = vec2(1, 0);",
+ "}",
+
+ "vTextureCoord *= tileSize;",
+ "vTextureCoord.x += tileColumn * tileSize;",
+ "vTextureCoord.y += tileRow * tileSize;",
+ "vTextureCoord.z = floor(floor(a_customAttributes / 4.)/u_tilesPerTexture);",
+ "}"
+ ].join("\n"),
+
+ tilesPerTexture = 1024, // TODO: Get based on max texture size
+ atlas;
+
+ var program,
+ gl,
+ buffer,
+ utils,
+ locations,
+ nodesCount = 0,
+ nodes = new Float32Array(64),
+ width,
+ height,
+ transform,
+ sizeDirty,
+
+ refreshTexture = function (texture, idx) {
+ if (texture.nativeObject) {
+ gl.deleteTexture(texture.nativeObject);
+ }
+
+ var nativeObject = gl.createTexture();
+ gl.activeTexture(gl["TEXTURE" + idx]);
+ gl.bindTexture(gl.TEXTURE_2D, nativeObject);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.canvas);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+
+ gl.generateMipmap(gl.TEXTURE_2D);
+ gl.uniform1i(locations["sampler" + idx], idx);
+
+ texture.nativeObject = nativeObject;
+ },
+
+ ensureAtlasTextureUpdated = function () {
+ if (atlas.isDirty) {
+ var textures = atlas.getTextures(),
+ i;
+ for (i = 0; i < textures.length; ++i) {
+ if (textures[i].isDirty || !textures[i].nativeObject) {
+ refreshTexture(textures[i], i);
+ }
+ }
+
+ atlas.clearDirty();
+ }
+ };
+
+ return {
+ load : function (glContext) {
+ gl = glContext;
+ utils = Viva.Graph.webgl(glContext);
+
+ atlas = new Viva.Graph.View.webglAtlas(tilesPerTexture);
+
+ program = utils.createProgram(nodesVS, nodesFS);
+ gl.useProgram(program);
+ locations = utils.getLocations(program, ["a_vertexPos", "a_customAttributes", "u_screenSize", "u_transform", "u_sampler0", "u_sampler1", "u_sampler2", "u_sampler3", "u_tilesPerTexture"]);
+
+ gl.uniform1f(locations.tilesPerTexture, tilesPerTexture);
+
+ gl.enableVertexAttribArray(locations.vertexPos);
+ gl.enableVertexAttribArray(locations.customAttributes);
+
+ buffer = gl.createBuffer();
+ },
+
+ /**
+ * Updates position of current node in the buffer of nodes.
+ *
+ * @param idx - index of current node.
+ * @param pos - new position of the node.
+ */
+ position : function (nodeUI, pos) {
+ var idx = nodeUI.id * ATTRIBUTES_PER_PRIMITIVE;
+ nodes[idx] = pos.x - nodeUI.size;
+ nodes[idx + 1] = pos.y - nodeUI.size;
+ nodes[idx + 2] = nodeUI._offset * 4;
+
+ nodes[idx + 3] = pos.x + nodeUI.size;
+ nodes[idx + 4] = pos.y - nodeUI.size;
+ nodes[idx + 5] = nodeUI._offset * 4 + 1;
+
+ nodes[idx + 6] = pos.x - nodeUI.size;
+ nodes[idx + 7] = pos.y + nodeUI.size;
+ nodes[idx + 8] = nodeUI._offset * 4 + 2;
+
+ nodes[idx + 9] = pos.x - nodeUI.size;
+ nodes[idx + 10] = pos.y + nodeUI.size;
+ nodes[idx + 11] = nodeUI._offset * 4 + 2;
+
+ nodes[idx + 12] = pos.x + nodeUI.size;
+ nodes[idx + 13] = pos.y - nodeUI.size;
+ nodes[idx + 14] = nodeUI._offset * 4 + 1;
+
+ nodes[idx + 15] = pos.x + nodeUI.size;
+ nodes[idx + 16] = pos.y + nodeUI.size;
+ nodes[idx + 17] = nodeUI._offset * 4 + 3;
+ },
+
+ createNode : function (ui) {
+ nodes = utils.extendArray(nodes, nodesCount, ATTRIBUTES_PER_PRIMITIVE);
+ nodesCount += 1;
+
+ var coordinates = atlas.getCoordinates(ui.src);
+ if (coordinates) {
+ ui._offset = coordinates.offset;
+ } else {
+ ui._offset = 0;
+ // Image is not yet loaded into the atlas. Reload it:
+ atlas.load(ui.src, function (coordinates) {
+ ui._offset = coordinates.offset;
+ });
+ }
+ },
+
+ removeNode : function (nodeUI) {
+ if (nodesCount > 0) { nodesCount -= 1; }
+
+ if (nodeUI.id < nodesCount && nodesCount > 0) {
+ if (nodeUI.src) {
+ atlas.remove(nodeUI.src);
+ }
+
+ utils.copyArrayPart(nodes, nodeUI.id * ATTRIBUTES_PER_PRIMITIVE, nodesCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
+ }
+ },
+
+ replaceProperties : function (replacedNode, newNode) {
+ newNode._offset = replacedNode._offset;
+ },
+
+ updateTransform : function (newTransform) {
+ sizeDirty = true;
+ transform = newTransform;
+ },
+
+ updateSize : function (w, h) {
+ width = w;
+ height = h;
+ sizeDirty = true;
+ },
+
+ render : function () {
+ gl.useProgram(program);
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ gl.bufferData(gl.ARRAY_BUFFER, nodes, gl.DYNAMIC_DRAW);
+
+ if (sizeDirty) {
+ sizeDirty = false;
+ gl.uniformMatrix4fv(locations.transform, false, transform);
+ gl.uniform2f(locations.screenSize, width, height);
+ }
+
+ gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
+ gl.vertexAttribPointer(locations.customAttributes, 1, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);
+
+ ensureAtlasTextureUpdated();
+
+ gl.drawArrays(gl.TRIANGLES, 0, nodesCount * 6);
+ }
+ };
+};/**
+ * @fileOverview Defines a graph renderer that uses WebGL based drawings.
+ *
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Graph.View = Viva.Graph.View || {};
+
+/**
+ * Performs webgl-based graph rendering. This module does not perform
+ * layout, but only visualizes nodes and edeges of the graph.
+ *
+ * @param options - to customize graphics behavior. Currently supported parameter
+ * enableBlending - true by default, allows to use transparency in node/links colors.
+ * preserveDrawingBuffer - false by default, tells webgl to preserve drawing buffer.
+ * See https://www.khronos.org/registry/webgl/specs/1.0/#5.2
+ */
+
+Viva.Graph.View.webglGraphics = function (options) {
+ options = Viva.lazyExtend(options, {
+ enableBlending : true,
+ preserveDrawingBuffer : false,
+ clearColor: false,
+ clearColorValue : {
+ r : 1,
+ g : 1,
+ b : 1,
+ a : 1
+ }
+ });
+
+ var container,
+ graphicsRoot,
+ gl,
+ width,
+ height,
+ nodesCount = 0,
+ linksCount = 0,
+ transform,
+ userPlaceNodeCallback,
+ userPlaceLinkCallback,
+ nodes = [],
+ links = [],
+ initCallback,
+
+ linkProgram = Viva.Graph.View.webglLinkProgram(),
+ nodeProgram = Viva.Graph.View.webglNodeProgram(),
+/*jshint unused: false */
+ nodeUIBuilder = function (node) {
+ return Viva.Graph.View.webglSquare(); // Just make a square, using provided gl context (a nodeProgram);
+ },
+
+ linkUIBuilder = function (link) {
+ return Viva.Graph.View.webglLine(0xb3b3b3ff);
+ },
+/*jshint unused: true */
+ updateTransformUniform = function () {
+ linkProgram.updateTransform(transform);
+ nodeProgram.updateTransform(transform);
+ },
+
+ resetScaleInternal = function () {
+ transform = [1, 0, 0, 0,
+ 0, 1, 0, 0,
+ 0, 0, 1, 0,
+ 0, 0, 0, 1];
+ },
+
+ updateSize = function () {
+ if (container && graphicsRoot) {
+ width = graphicsRoot.width = Math.max(container.offsetWidth, 1);
+ height = graphicsRoot.height = Math.max(container.offsetHeight, 1);
+ if (gl) { gl.viewport(0, 0, width, height); }
+ if (linkProgram) { linkProgram.updateSize(width / 2, height / 2); }
+ if (nodeProgram) { nodeProgram.updateSize(width / 2, height / 2); }
+ }
+ },
+
+ nodeBuilderInternal = function (node) {
+ var nodeId = nodesCount++,
+ ui = nodeUIBuilder(node);
+ ui.id = nodeId;
+
+ nodeProgram.createNode(ui);
+
+ nodes[nodeId] = node;
+ return ui;
+ },
+
+ linkBuilderInternal = function (link) {
+ var linkId = linksCount++,
+ ui = linkUIBuilder(link);
+ ui.id = linkId;
+
+ linkProgram.createLink(ui);
+
+ links[linkId] = link;
+ return ui;
+ },
+
+ fireRescaled = function (graphics) {
+ graphics.fire("rescaled");
+ };
+
+ var graphics = {
+ /**
+ * Sets the collback that creates node representation or creates a new node
+ * presentation if builderCallbackOrNode is not a function.
+ *
+ * @param builderCallbackOrNode a callback function that accepts graph node
+ * as a parameter and must return an element representing this node. OR
+ * if it's not a function it's treated as a node to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
+ * Otherwise a node representation is returned for the passed parameter.
+ */
+ node : function (builderCallbackOrNode) {
+ if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
+ return nodeBuilderInternal(builderCallbackOrNode); // create ui for node using current nodeUIBuilder
+ }
+
+ nodeUIBuilder = builderCallbackOrNode; // else replace ui builder with provided function.
+
+ return this;
+ },
+
+ /**
+ * Sets the collback that creates link representation or creates a new link
+ * presentation if builderCallbackOrLink is not a function.
+ *
+ * @param builderCallbackOrLink a callback function that accepts graph link
+ * as a parameter and must return an element representing this link. OR
+ * if it's not a function it's treated as a link to which DOM element should be created.
+ *
+ * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
+ * Otherwise a link representation is returned for the passed parameter.
+ */
+ link : function (builderCallbackOrLink) {
+
+ if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
+ return linkBuilderInternal(builderCallbackOrLink);
+ }
+
+ linkUIBuilder = builderCallbackOrLink;
+ return this;
+ },
+
+ /**
+ * Allows to override default position setter for the node with a new
+ * function. newPlaceCallback(nodeUI, position) is function which
+ * is used by updateNodePosition().
+ */
+ placeNode : function (newPlaceCallback) {
+ userPlaceNodeCallback = newPlaceCallback;
+ return this;
+ },
+
+ placeLink : function (newPlaceLinkCallback) {
+ userPlaceLinkCallback = newPlaceLinkCallback;
+ return this;
+ },
+
+ /**
+ * Custom input manager listens to mouse events to process nodes drag-n-drop inside WebGL canvas
+ */
+ inputManager : Viva.Input.webglInputManager,
+
+ /**
+ * Called every time before renderer starts rendering.
+ */
+ beginRender : function () {
+ // this function could be replaced by this.init,
+ // based on user options.
+ },
+
+ /**
+ * Called every time when renderer finishes one step of rendering.
+ */
+ endRender : function () {
+ if (linksCount > 0) {
+ linkProgram.render();
+ }
+ if (nodesCount > 0) {
+ nodeProgram.render();
+ }
+ },
+
+ bringLinkToFront : function (linkUI) {
+ var frontLinkId = linkProgram.getFrontLinkId(),
+ srcLinkId,
+ temp;
+
+ linkProgram.bringToFront(linkUI);
+
+ if (frontLinkId > linkUI.id) {
+ srcLinkId = linkUI.id;
+
+ temp = links[frontLinkId];
+ links[frontLinkId] = links[srcLinkId];
+ links[frontLinkId].ui.id = frontLinkId;
+ links[srcLinkId] = temp;
+ links[srcLinkId].ui.id = srcLinkId;
+ }
+ },
+/*jshint unused: false */
+ /**
+ * Sets translate operation that should be applied to all nodes and links.
+ */
+ graphCenterChanged : function (x, y) {
+ updateSize();
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given link of the graph
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ */
+ initLink : function (linkUI) {
+ },
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render given node of the graph.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ initNode : function (nodeUI) {
+ },
+/*jshint unused: true */
+
+ translateRel : function (dx, dy) {
+ transform[12] += (2 * transform[0] * dx / width) / transform[0];
+ transform[13] -= (2 * transform[5] * dy / height) / transform[5];
+ updateTransformUniform();
+ },
+
+ scale : function (scaleFactor, scrollPoint) {
+ // Transform scroll point to clip-space coordinates:
+ var cx = 2 * scrollPoint.x / width - 1,
+ cy = 1 - (2 * scrollPoint.y) / height;
+
+ cx -= transform[12];
+ cy -= transform[13];
+
+ transform[12] += cx * (1 - scaleFactor);
+ transform[13] += cy * (1 - scaleFactor);
+
+ transform[0] *= scaleFactor;
+ transform[5] *= scaleFactor;
+
+ updateTransformUniform();
+ fireRescaled(this);
+
+ return transform[0];
+ },
+
+ resetScale : function () {
+ resetScaleInternal();
+
+ if (gl) {
+ updateSize();
+ // TODO: what is this?
+ // gl.useProgram(linksProgram);
+ // gl.uniform2f(linksProgram.screenSize, width, height);
+ updateTransformUniform();
+ }
+ return this;
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider prepare to render.
+ */
+ init : function (c) {
+ var contextParameters = {};
+
+ if (options.preserveDrawingBuffer) {
+ contextParameters.preserveDrawingBuffer = true;
+ }
+
+ container = c;
+
+ graphicsRoot = window.document.createElement("canvas");
+ updateSize();
+ resetScaleInternal();
+ container.appendChild(graphicsRoot);
+
+
+ gl = graphicsRoot.getContext("experimental-webgl", contextParameters);
+ if (!gl) {
+ var msg = "Could not initialize WebGL. Seems like the browser doesn't support it.";
+ window.alert(msg);
+ throw msg;
+ }
+ if (options.enableBlending) {
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+ gl.enable(gl.BLEND);
+ }
+ if (options.clearColor) {
+ var color = options.clearColorValue;
+ gl.clearColor(color.r, color.g, color.b, color.a);
+ // TODO: not the best way, really. Should come up with something better
+ // what if we need more updates inisde beginRender, like depth buffer?
+ this.beginRender = function () {
+ gl.clear(gl.COLOR_BUFFER_BIT);
+ };
+ }
+
+ linkProgram.load(gl);
+ linkProgram.updateSize(width / 2, height / 2);
+
+ nodeProgram.load(gl);
+ nodeProgram.updateSize(width / 2, height / 2);
+
+ updateTransformUniform();
+
+ // Notify the world if someoen waited for update. TODO: should send an event
+ if (typeof initCallback === "function") {
+ initCallback(graphicsRoot);
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider release occupied resources.
+ */
+ release : function (container) {
+ if (graphicsRoot && container) {
+ container.removeChild(graphicsRoot);
+ // TODO: anything else?
+ }
+ },
+
+ /**
+ * Checks whether webgl is supported by this browser.
+ */
+ isSupported : function () {
+ var c = window.document.createElement("canvas"),
+ gl = c && c.getContext && c.getContext("experimental-webgl");
+ return gl;
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove link from rendering surface.
+ *
+ * @param linkUI visual representation of the link created by link() execution.
+ **/
+ releaseLink : function (linkToRemove) {
+ if (linksCount > 0) { linksCount -= 1; }
+
+ linkProgram.removeLink(linkToRemove);
+
+ var linkIdToRemove = linkToRemove.id;
+ if (linkIdToRemove < linksCount) {
+ if (linksCount === 0 || linksCount === linkIdToRemove) {
+ return; // no more links or removed link is the last one.
+ }
+
+ // TODO: consider getting rid of this. The only reason why it's here is to update 'ui' property
+ // so that renderer will pass proper id in updateLinkPosition.
+ links[linkIdToRemove] = links[linksCount];
+ links[linkIdToRemove].ui.id = linkIdToRemove;
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider remove node from rendering surface.
+ *
+ * @param nodeUI visual representation of the node created by node() execution.
+ **/
+ releaseNode : function (nodeUI) {
+ if (nodesCount > 0) { nodesCount -= 1; }
+
+ nodeProgram.removeNode(nodeUI);
+
+ if (nodeUI.id < nodesCount) {
+ var nodeIdToRemove = nodeUI.id;
+ if (nodesCount === 0 || nodesCount === nodeIdToRemove) {
+ return; // no more nodes or removed node is the last in the list.
+ }
+
+ var lastNode = nodes[nodesCount],
+ replacedNode = nodes[nodeIdToRemove];
+
+ nodes[nodeIdToRemove] = lastNode;
+ nodes[nodeIdToRemove].ui.id = nodeIdToRemove;
+
+ // Since concrete shaders may cache properties in the ui element
+ // we are letting them to make this swap (e.g. image node shader
+ // uses this approach to update node's offset in the atlas)
+ nodeProgram.replaceProperties(replacedNode.ui, lastNode.ui);
+ }
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given node UI to recommended position pos {x, y};
+ */
+ updateNodePosition : function (nodeUI, pos) {
+ // WebGL coordinate system is different. Would be better
+ // to have this transform in the shader code, but it would
+ // require every shader to be updated..
+ pos.y = -pos.y;
+ if (userPlaceNodeCallback) {
+ userPlaceNodeCallback(nodeUI, pos);
+ }
+
+ nodeProgram.position(nodeUI, pos);
+ },
+
+ /**
+ * Called by Viva.Graph.View.renderer to let concrete graphic output
+ * provider place given link of the graph. Pos objects are {x, y};
+ */
+ updateLinkPosition : function (link, fromPos, toPos) {
+ // WebGL coordinate system is different. Would be better
+ // to have this transform in the shader code, but it would
+ // require every shader to be updated..
+ fromPos.y = -fromPos.y;
+ toPos.y = -toPos.y;
+ if (userPlaceLinkCallback) {
+ userPlaceLinkCallback(link, fromPos, toPos);
+ }
+
+ linkProgram.position(link, fromPos, toPos);
+ },
+
+ /**
+ * Returns root element which hosts graphics.
+ */
+ getGraphicsRoot : function (callbackWhenReady) {
+ // todo: should fire an event, instead of having this context.
+ if (typeof callbackWhenReady === "function") {
+ if (graphicsRoot) {
+ callbackWhenReady(graphicsRoot);
+ } else {
+ initCallback = callbackWhenReady;
+ }
+ }
+ return graphicsRoot;
+ },
+
+ /**
+ * Updates default shader which renders nodes
+ *
+ * @param newProgram to use for nodes.
+ */
+ setNodeProgram : function (newProgram) {
+ if (!gl && newProgram) {
+ // Nothing created yet. Just set shader to the new one
+ // and let initialization logic take care about the rest.
+ nodeProgram = newProgram;
+ } else if (newProgram) {
+ throw "Not implemented. Cannot swap shader on the fly... yet.";
+ // TODO: unload old shader and reinit.
+ }
+ },
+
+ /**
+ * Updates default shader which renders links
+ *
+ * @param newProgram to use for links.
+ */
+ setLinkProgram : function (newProgram) {
+ if (!gl && newProgram) {
+ // Nothing created yet. Just set shader to the new one
+ // and let initialization logic take care about the rest.
+ linkProgram = newProgram;
+ } else if (newProgram) {
+ throw "Not implemented. Cannot swap shader on the fly... yet.";
+ // TODO: unload old shader and reinit.
+ }
+ },
+ getGraphCoordinates : function (graphicsRootPos) {
+ // TODO: could be a problem when container has margins?
+ // to save memory we modify incoming parameter:
+ // point in clipspace coordinates:
+ graphicsRootPos.x = 2 * graphicsRootPos.x / width - 1;
+ graphicsRootPos.y = 1 - (2 * graphicsRootPos.y) / height;
+ // apply transform:
+ graphicsRootPos.x = (graphicsRootPos.x - transform[12]) / transform[0];
+ graphicsRootPos.y = (graphicsRootPos.y - transform[13]) / transform[5];
+ // now transform to graph coordinates:
+ graphicsRootPos.x *= width / 2;
+ graphicsRootPos.y *= -height / 2;
+
+ return graphicsRootPos;
+ }
+ };
+
+ // Let graphics fire events before we return it to the caller.
+ Viva.Graph.Utils.events(graphics).extend();
+
+ return graphics;
+};/**
+ * Monitors graph-related mouse input in webgl graphics and notifies subscribers.
+ *
+ * @param {Viva.Graph.View.webglGraphics} webglGraphics
+ * @param {Viva.Graph.graph} graph
+ */
+Viva.Graph.webglInputEvents = function (webglGraphics, graph) {
+ if (webglGraphics.webglInputEvents) {
+ // Don't listen twice, if we are already attached to this graphics:
+ return webglGraphics.webglInputEvents;
+ }
+
+ var preciseCheck = function (node, x, y) {
+ if (node.ui && node.ui.size) {
+ var pos = node.position,
+ half = node.ui.size;
+
+ return pos.x - half < x && x < pos.x + half &&
+ pos.y - half < y && y < pos.y + half;
+ }
+
+ return true;
+ },
+ mouseCapturedNode = null,
+
+ spatialIndex = Viva.Graph.spatialIndex(graph, preciseCheck),
+ mouseEnterCallback = [],
+ mouseLeaveCallback = [],
+ mouseDownCallback = [],
+ mouseUpCallback = [],
+ mouseMoveCallback = [],
+ clickCallback = [],
+ dblClickCallback = [],
+ documentEvents = Viva.Graph.Utils.events(window.document),
+ prevSelectStart,
+ boundRect,
+
+ stopPropagation = function (e) {
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ } else {
+ e.cancelBubble = true;
+ }
+ },
+
+ handleDisabledEvent = function (e) {
+ stopPropagation(e);
+ return false;
+ },
+
+ invoke = function (callbacksChain, args) {
+ var i, stopPropagation;
+ for (i = 0; i < callbacksChain.length; i += 1) {
+ stopPropagation = callbacksChain[i].apply(undefined, args);
+ if (stopPropagation) { return true; }
+ }
+ },
+
+ startListen = function (root) {
+ var pos = {x : 0, y : 0},
+ lastFound = null,
+ lastClickTime = +new Date(),
+
+ handleMouseMove = function (e) {
+ invoke(mouseMoveCallback, [lastFound, e]);
+ pos.x = e.clientX;
+ pos.y = e.clientY;
+ },
+
+ handleMouseUp = function () {
+ documentEvents.stop('mousemove', handleMouseMove);
+ documentEvents.stop('mouseup', handleMouseUp);
+ },
+
+ updateBoundRect = function () {
+ boundRect = root.getBoundingClientRect();
+ };
+
+ window.addEventListener('resize', updateBoundRect);
+ updateBoundRect();
+
+ // mouse move inside container serves only to track mouse enter/leave events.
+ root.addEventListener('mousemove',
+ function (e) {
+ if (mouseCapturedNode) {
+ return;
+ }
+
+ var cancelBubble = false,
+ node;
+
+ pos.x = e.clientX - boundRect.left;
+ pos.y = e.clientY - boundRect.top;
+
+ webglGraphics.getGraphCoordinates(pos);
+ node = spatialIndex.getNodeAt(pos.x, pos.y);
+
+ if (node && lastFound !== node) {
+ lastFound = node;
+ cancelBubble = cancelBubble || invoke(mouseEnterCallback, [lastFound]);
+ } else if (node === null && lastFound !== node) {
+ cancelBubble = cancelBubble || invoke(mouseLeaveCallback, [lastFound]);
+ lastFound = null;
+ }
+
+ if (cancelBubble) { stopPropagation(e); }
+ });
+
+ root.addEventListener('mousedown',
+ function (e) {
+ var cancelBubble = false,
+ args;
+
+ pos.x = e.clientX - boundRect.left;
+ pos.y = e.clientY - boundRect.top;
+ webglGraphics.getGraphCoordinates(pos);
+
+ args = [spatialIndex.getNodeAt(pos.x, pos.y), e];
+ if (args[0]) {
+ cancelBubble = invoke(mouseDownCallback, args);
+ // we clicked on a node. Following drag should be handled on document events:
+ documentEvents.on('mousemove', handleMouseMove);
+ documentEvents.on('mouseup', handleMouseUp);
+
+ prevSelectStart = window.document.onselectstart;
+
+ window.document.onselectstart = handleDisabledEvent;
+
+ lastFound = args[0];
+ } else {
+ lastFound = null;
+ }
+ if (cancelBubble) { stopPropagation(e); }
+ });
+
+ root.addEventListener('mouseup',
+ function (e) {
+ var clickTime = +new Date(),
+ args;
+
+ pos.x = e.clientX - boundRect.left;
+ pos.y = e.clientY - boundRect.top;
+ webglGraphics.getGraphCoordinates(pos);
+
+ args = [spatialIndex.getNodeAt(pos.x, pos.y), e];
+ if (args[0]) {
+ window.document.onselectstart = prevSelectStart;
+
+ if (clickTime - lastClickTime < 400 && args[0] === lastFound) {
+ invoke(dblClickCallback, args);
+ } else {
+ invoke(clickCallback, args);
+ }
+ lastClickTime = clickTime;
+
+ if (invoke(mouseUpCallback, args)) {
+ stopPropagation(e);
+ }
+ }
+ });
+ };
+
+ // webgl may not be initialized at this point. Pass callback
+ // to start listen after graphics root is ready.
+ webglGraphics.getGraphicsRoot(startListen);
+
+ webglGraphics.webglInputEvents = {
+ mouseEnter : function (callback) {
+ if (typeof callback === 'function') {
+ mouseEnterCallback.push(callback);
+ }
+ return this;
+ },
+ mouseLeave : function (callback) {
+ if (typeof callback === 'function') {
+ mouseLeaveCallback.push(callback);
+ }
+ return this;
+ },
+ mouseDown : function (callback) {
+ if (typeof callback === 'function') {
+ mouseDownCallback.push(callback);
+ }
+ return this;
+ },
+ mouseUp : function (callback) {
+ if (typeof callback === 'function') {
+ mouseUpCallback.push(callback);
+ }
+ return this;
+ },
+ mouseMove : function (callback) {
+ if (typeof callback === 'function') {
+ mouseMoveCallback.push(callback);
+ }
+ return this;
+ },
+ click : function (callback) {
+ if (typeof callback === 'function') {
+ clickCallback.push(callback);
+ }
+ return this;
+ },
+ dblClick : function (callback) {
+ if (typeof callback === 'function') {
+ dblClickCallback.push(callback);
+ }
+ return this;
+ },
+ mouseCapture : function (node) {
+ mouseCapturedNode = node;
+ },
+ releaseMouseCapture : function () {
+ mouseCapturedNode = null;
+ }
+ };
+
+ return webglGraphics.webglInputEvents;
+};
+/**
+ * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
+ */
+
+Viva.Input = Viva.Input || {};
+Viva.Input.webglInputManager = function (graph, graphics) {
+ var inputEvents = Viva.Graph.webglInputEvents(graphics, graph),
+ draggedNode = null,
+ internalHandlers = {},
+ pos = {x : 0, y : 0};
+
+ inputEvents.mouseDown(function (node, e) {
+ draggedNode = node;
+ pos.x = e.clientX;
+ pos.y = e.clientY;
+
+ inputEvents.mouseCapture(draggedNode);
+
+ var handlers = internalHandlers[node.ui.id];
+ if (handlers && handlers.onStart) {
+ handlers.onStart(e, pos);
+ }
+
+ return true;
+ }).mouseUp(function (node) {
+ inputEvents.releaseMouseCapture(draggedNode);
+
+ draggedNode = null;
+ var handlers = internalHandlers[node.ui.id];
+ if (handlers && handlers.onStop) {
+ handlers.onStop();
+ }
+ return true;
+ }).mouseMove(function (node, e) {
+ if (draggedNode) {
+ var handlers = internalHandlers[draggedNode.ui.id];
+ if (handlers && handlers.onDrag) {
+ handlers.onDrag(e, {x : e.clientX - pos.x, y : e.clientY - pos.y });
+ }
+
+ pos.x = e.clientX;
+ pos.y = e.clientY;
+ return true;
+ }
+ });
+
+ return {
+ /**
+ * Called by renderer to listen to drag-n-drop events from node. E.g. for CSS/SVG
+ * graphics we may listen to DOM events, whereas for WebGL we graphics
+ * should provide custom eventing mechanism.
+ *
+ * @param node - to be monitored.
+ * @param handlers - object with set of three callbacks:
+ * onStart: function(),
+ * onDrag: function(e, offset),
+ * onStop: function()
+ */
+ bindDragNDrop : function (node, handlers) {
+ internalHandlers[node.ui.id] = handlers;
+ }
+ };
+};
diff --git a/js/webgl-programs.js b/js/webgl-programs.js
new file mode 100644
index 0000000..dcd8c29
--- /dev/null
+++ b/js/webgl-programs.js
@@ -0,0 +1,90 @@
+// here define functions to draw points and lines
+
+Viva.Graph.View.webglDualColorLine = function (t, e) {
+ return {
+ start: Viva.Graph.View._webglUtil.parseColor(t),
+ end: Viva.Graph.View._webglUtil.parseColor(e)
+ }
+}
+Viva.Graph.View.webglDualColorLinkProgram = function () {
+ var t, e, r, i, n, a, o, s, u, c, d = 6,
+ l = 2 * (2 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT),
+ f = ["precision mediump float;", "varying vec4 color;", "void main(void) {", " gl_FragColor = color;", "}"].join("\n"),
+ p = ["attribute vec2 a_vertexPos;", "attribute vec4 a_color;", "uniform vec2 u_screenSize;", "uniform mat4 u_transform;", "varying vec4 color;", "void main(void) {", " gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);", " color = a_color.abgr;", "}"].join("\n"),
+ h = 0,
+ g = new ArrayBuffer(1024 * l),
+ v = new Float32Array(g),
+ m = new Uint32Array(g),
+ w = function () {
+ if ((h + 1) * l > g.byteLength) {
+ var t = new ArrayBuffer(2 * g.byteLength),
+ e = new Float32Array(t),
+ r = new Uint32Array(t);
+ r.set(m), v = e, m = r, g = t
+ }
+ };
+ return {
+ load: function (a) {
+ e = a, e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA), e.enable(e.BLEND), i = Viva.Graph.webgl(a), t = i.createProgram(p, f), e.useProgram(t), n = i.getLocations(t, ["a_vertexPos", "a_color", "u_screenSize", "u_transform"]), e.enableVertexAttribArray(n.vertexPos), e.enableVertexAttribArray(n.color), r = e.createBuffer()
+ },
+ position: function (t, e, r) {
+ var i = t.id,
+ n = i * d;
+ v[n] = e.x, v[n + 1] = e.y, m[n + 2] = t.start, v[n + 3] = r.x, v[n + 4] = r.y, m[n + 5] = t.end
+ },
+ createLink: function (t) {
+ w(), h += 1, a = t.id
+ },
+ removeLink: function (t) {
+ h > 0 && (h -= 1), h > t.id && h > 0 && i.copyArrayPart(m, t.id * d, h * d, d)
+ },
+ updateTransform: function (t) {
+ c = !0, u = t
+ },
+ updateSize: function (t, e) {
+ o = t, s = e, c = !0
+ },
+ render: function () {
+ e.useProgram(t), e.bindBuffer(e.ARRAY_BUFFER, r), e.bufferData(e.ARRAY_BUFFER, g, e.DYNAMIC_DRAW), c && (c = !1, e.uniformMatrix4fv(n.transform, !1, u), e.uniform2f(n.screenSize, o, s)), e.vertexAttribPointer(n.vertexPos, 2, e.FLOAT, !1, 3 * Float32Array.BYTES_PER_ELEMENT, 0), e.vertexAttribPointer(n.color, 4, e.UNSIGNED_BYTE, !0, 3 * Float32Array.BYTES_PER_ELEMENT, 8), e.drawArrays(e.LINES, 0, 2 * h), a = h - 1
+ },
+ bringToFront: function (t) {
+ a > t.id && i.swapArrayPart(m, t.id * d, a * d, d), a > 0 && (a -= 1)
+ },
+ getFrontLinkId: function () {
+ return a
+ }
+ }
+}
+Viva.Graph.View.webglCustomNodeProgram = function () {
+ var t, e, r, i, n, a, o, s, u, c = 4,
+ d = ["precision mediump float;", "varying vec4 color;", "varying float pixelSize;", "void main(void) {", " if (gl_PointCoord.x <= pixelSize || gl_PointCoord.x >= 1.0-pixelSize || gl_PointCoord.y <= pixelSize || gl_PointCoord.y >= 1. - pixelSize) {", " gl_FragColor = vec4(color.xyz * 0.3, 1);", " } else {", " gl_FragColor = color;", " }", "}"].join("\n"),
+ l = ["attribute vec2 a_vertexPos;", "attribute vec2 a_customAttributes;", "uniform vec2 u_screenSize;", "uniform mat4 u_transform;", "varying vec4 color;", "varying float pixelSize;", "void main(void) {", " gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0, 1);", " gl_PointSize = a_customAttributes[1] * u_transform[0][0];", " float c = a_customAttributes[0];", " color.b = mod(c, 256.0); c = floor(c/256.0);", " color.g = mod(c, 256.0); c = floor(c/256.0);", " color.r = mod(c, 256.0); c = floor(c/256.0); color /= 255.0;", " color.a = 1.0;", " pixelSize = 1.0/gl_PointSize;", "}"].join("\n"),
+ f = new Float32Array(64),
+ p = 0;
+ return {
+ load: function (a) {
+ e = a, n = Viva.Graph.webgl(a), t = n.createProgram(l, d), e.useProgram(t), i = n.getLocations(t, ["a_vertexPos", "a_customAttributes", "u_screenSize", "u_transform"]), e.enableVertexAttribArray(i.vertexPos), e.enableVertexAttribArray(i.customAttributes), r = e.createBuffer()
+ },
+ position: function (t, e) {
+ var r = t.id;
+ f[r * c] = e.x, f[r * c + 1] = e.y, f[r * c + 2] = t.color, f[r * c + 3] = t.size
+ },
+ updateTransform: function (t) {
+ u = !0, s = t
+ },
+ updateSize: function (t, e) {
+ a = t, o = e, u = !0
+ },
+ createNode: function () {
+ f = n.extendArray(f, p, c), p += 1
+ },
+ removeNode: function (t) {
+ p > 0 && (p -= 1), p > t.id && p > 0 && n.copyArrayPart(f, t.id * c, p * c, c)
+ },
+ replaceProperties: function () {},
+ render: function () {
+ e.useProgram(t), e.bindBuffer(e.ARRAY_BUFFER, r), e.bufferData(e.ARRAY_BUFFER, f, e.DYNAMIC_DRAW), u && (u = !1, e.uniformMatrix4fv(i.transform, !1, s), e.uniform2f(i.screenSize, a, o)), e.vertexAttribPointer(i.vertexPos, 2, e.FLOAT, !1, c * Float32Array.BYTES_PER_ELEMENT, 0), e.vertexAttribPointer(i.customAttributes, 2, e.FLOAT, !1, c * Float32Array.BYTES_PER_ELEMENT, 8), e.drawArrays(e.POINTS, 0, p)
+ }
+ }
+
+}