From 346a66d704d17a55e3a166364579e43446760581 Mon Sep 17 00:00:00 2001 From: Haris Rafiq Date: Fri, 5 Jan 2018 02:24:35 +0500 Subject: [PATCH] Add files via upload --- index.html | 34 + js/liveblock.css | 28 + js/liveblock.js | 341 +++ js/vivagraph.js | 6517 ++++++++++++++++++++++++++++++++++++++++++ js/webgl-programs.js | 90 + 5 files changed, 7010 insertions(+) create mode 100644 index.html create mode 100644 js/liveblock.css create mode 100644 js/liveblock.js create mode 100644 js/vivagraph.js create mode 100644 js/webgl-programs.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..0e864c2 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + LiveBlock + + + + + + + + +
+
Hover over nodes to view transaction details
+ + 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) + } + } + +}