/** * @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; } }; };