You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@geode.apache.org by tu...@apache.org on 2015/11/03 12:25:42 UTC
[20/79] [partial] incubator-geode git commit: GEODE-12: Imported
pulse from geode-1.0.0-SNAPSHOT-2.src.tar
http://git-wip-us.apache.org/repos/asf/incubator-geode/blob/1922937f/pulse/src/main/webapp/scripts/lib/jit.js
----------------------------------------------------------------------
diff --git a/pulse/src/main/webapp/scripts/lib/jit.js b/pulse/src/main/webapp/scripts/lib/jit.js
new file mode 100644
index 0000000..5911d61
--- /dev/null
+++ b/pulse/src/main/webapp/scripts/lib/jit.js
@@ -0,0 +1,17208 @@
+/*
+Copyright (c) 2011 Sencha Inc. - Author: Nicolas Garcia Belmonte (http://philogb.github.com/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+ */
+/*
+ [
+ NOTE: CODE IS CUSTOMIZED TO WORK AS PER REQUIREMENTS IN PULSE WEB APPLICATION
+ MODIFICATIONS ARE MADE FOR TREEMAP
+ MODIFIED BY: SACHIN K
+ ]
+*/
+ (function () {
+
+/*
+ File: Core.js
+
+ */
+
+/*
+ Object: $jit
+
+ Defines the namespace for all library Classes and Objects.
+ This variable is the *only* global variable defined in the Toolkit.
+ There are also other interesting properties attached to this variable described below.
+ */
+window.$jit = function(w) {
+ w = w || window;
+ for(var k in $jit) {
+ if($jit[k].$extend) {
+ w[k] = $jit[k];
+ }
+ }
+};
+
+$jit.version = '2.0.1';
+/*
+ Object: $jit.id
+
+ Works just like *document.getElementById*
+
+ Example:
+ (start code js)
+ var element = $jit.id('elementId');
+ (end code)
+
+*/
+
+/*
+ Object: $jit.util
+
+ Contains utility functions.
+
+ Some of the utility functions and the Class system were based in the MooTools Framework
+ <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>.
+ MIT license <http://mootools.net/license.txt>.
+
+ These methods are generally also implemented in DOM manipulation frameworks like JQuery, MooTools and Prototype.
+ I'd suggest you to use the functions from those libraries instead of using these, since their functions
+ are widely used and tested in many different platforms/browsers. Use these functions only if you have to.
+
+ */
+var $ = function(d) {
+ return document.getElementById(d);
+};
+
+$.empty = function() {
+};
+
+/*
+ Method: extend
+
+ Augment an object by appending another object's properties.
+
+ Parameters:
+
+ original - (object) The object to be extended.
+ extended - (object) An object which properties are going to be appended to the original object.
+
+ Example:
+ (start code js)
+ $jit.util.extend({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
+ (end code)
+*/
+$.extend = function(original, extended) {
+ for ( var key in (extended || {}))
+ original[key] = extended[key];
+ return original;
+};
+
+$.lambda = function(value) {
+ return (typeof value == 'function') ? value : function() {
+ return value;
+ };
+};
+
+$.time = Date.now || function() {
+ return +new Date;
+};
+
+/*
+ Method: splat
+
+ Returns an array wrapping *obj* if *obj* is not an array. Returns *obj* otherwise.
+
+ Parameters:
+
+ obj - (mixed) The object to be wrapped in an array.
+
+ Example:
+ (start code js)
+ $jit.util.splat(3); //[3]
+ $jit.util.splat([3]); //[3]
+ (end code)
+*/
+$.splat = function(obj) {
+ var type = $.type(obj);
+ return type ? ((type != 'array') ? [ obj ] : obj) : [];
+};
+
+$.type = function(elem) {
+ var type = $.type.s.call(elem).match(/^\[object\s(.*)\]$/)[1].toLowerCase();
+ if(type != 'object') return type;
+ if(elem && elem.$$family) return elem.$$family;
+ return (elem && elem.nodeName && elem.nodeType == 1)? 'element' : type;
+};
+$.type.s = Object.prototype.toString;
+
+/*
+ Method: each
+
+ Iterates through an iterable applying *f*.
+
+ Parameters:
+
+ iterable - (array) The original array.
+ fn - (function) The function to apply to the array elements.
+
+ Example:
+ (start code js)
+ $jit.util.each([3, 4, 5], function(n) { alert('number ' + n); });
+ (end code)
+*/
+$.each = function(iterable, fn) {
+ var type = $.type(iterable);
+ if (type == 'object') {
+ for ( var key in iterable)
+ fn(iterable[key], key);
+ } else {
+ for ( var i = 0, l = iterable.length; i < l; i++)
+ fn(iterable[i], i);
+ }
+};
+
+$.indexOf = function(array, item) {
+ if(Array.indexOf) return array.indexOf(item);
+ for(var i=0,l=array.length; i<l; i++) {
+ if(array[i] === item) return i;
+ }
+ return -1;
+};
+
+/*
+ Method: map
+
+ Maps or collects an array by applying *f*.
+
+ Parameters:
+
+ array - (array) The original array.
+ f - (function) The function to apply to the array elements.
+
+ Example:
+ (start code js)
+ $jit.util.map([3, 4, 5], function(n) { return n*n; }); //[9, 16, 25]
+ (end code)
+*/
+$.map = function(array, f) {
+ var ans = [];
+ $.each(array, function(elem, i) {
+ ans.push(f(elem, i));
+ });
+ return ans;
+};
+
+/*
+ Method: reduce
+
+ Iteratively applies the binary function *f* storing the result in an accumulator.
+
+ Parameters:
+
+ array - (array) The original array.
+ f - (function) The function to apply to the array elements.
+ opt - (optional|mixed) The starting value for the acumulator.
+
+ Example:
+ (start code js)
+ $jit.util.reduce([3, 4, 5], function(x, y) { return x + y; }, 0); //12
+ (end code)
+*/
+$.reduce = function(array, f, opt) {
+ var l = array.length;
+ if(l==0) return opt;
+ var acum = arguments.length == 3? opt : array[--l];
+ while(l--) {
+ acum = f(acum, array[l]);
+ }
+ return acum;
+};
+
+/*
+ Method: merge
+
+ Merges n-objects and their sub-objects creating a new, fresh object.
+
+ Parameters:
+
+ An arbitrary number of objects.
+
+ Example:
+ (start code js)
+ $jit.util.merge({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
+ (end code)
+*/
+$.merge = function() {
+ var mix = {};
+ for ( var i = 0, l = arguments.length; i < l; i++) {
+ var object = arguments[i];
+ if ($.type(object) != 'object')
+ continue;
+ for ( var key in object) {
+ var op = object[key], mp = mix[key];
+ mix[key] = (mp && $.type(op) == 'object' && $.type(mp) == 'object') ? $
+ .merge(mp, op) : $.unlink(op);
+ }
+ }
+ return mix;
+};
+
+$.unlink = function(object) {
+ var unlinked;
+ switch ($.type(object)) {
+ case 'object':
+ unlinked = {};
+ for ( var p in object)
+ unlinked[p] = $.unlink(object[p]);
+ break;
+ case 'array':
+ unlinked = [];
+ for ( var i = 0, l = object.length; i < l; i++)
+ unlinked[i] = $.unlink(object[i]);
+ break;
+ default:
+ return object;
+ }
+ return unlinked;
+};
+
+$.zip = function() {
+ if(arguments.length === 0) return [];
+ for(var j=0, ans=[], l=arguments.length, ml=arguments[0].length; j<ml; j++) {
+ for(var i=0, row=[]; i<l; i++) {
+ row.push(arguments[i][j]);
+ }
+ ans.push(row);
+ }
+ return ans;
+};
+
+/*
+ Method: rgbToHex
+
+ Converts an RGB array into a Hex string.
+
+ Parameters:
+
+ srcArray - (array) An array with R, G and B values
+
+ Example:
+ (start code js)
+ $jit.util.rgbToHex([255, 255, 255]); //'#ffffff'
+ (end code)
+*/
+$.rgbToHex = function(srcArray, array) {
+ if (srcArray.length < 3)
+ return null;
+ if (srcArray.length == 4 && srcArray[3] == 0 && !array)
+ return 'transparent';
+ var hex = [];
+ for ( var i = 0; i < 3; i++) {
+ var bit = (srcArray[i] - 0).toString(16);
+ hex.push(bit.length == 1 ? '0' + bit : bit);
+ }
+ return array ? hex : '#' + hex.join('');
+};
+
+/*
+ Method: hexToRgb
+
+ Converts an Hex color string into an RGB array.
+
+ Parameters:
+
+ hex - (string) A color hex string.
+
+ Example:
+ (start code js)
+ $jit.util.hexToRgb('#fff'); //[255, 255, 255]
+ (end code)
+*/
+$.hexToRgb = function(hex) {
+ if (hex.length != 7) {
+ hex = hex.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
+ hex.shift();
+ if (hex.length != 3)
+ return null;
+ var rgb = [];
+ for ( var i = 0; i < 3; i++) {
+ var value = hex[i];
+ if (value.length == 1)
+ value += value;
+ rgb.push(parseInt(value, 16));
+ }
+ return rgb;
+ } else {
+ hex = parseInt(hex.slice(1), 16);
+ return [ hex >> 16, hex >> 8 & 0xff, hex & 0xff ];
+ }
+};
+
+$.destroy = function(elem) {
+ $.clean(elem);
+ if (elem.parentNode)
+ elem.parentNode.removeChild(elem);
+ if (elem.clearAttributes)
+ elem.clearAttributes();
+};
+
+$.clean = function(elem) {
+ for (var ch = elem.childNodes, i = 0, l = ch.length; i < l; i++) {
+ $.destroy(ch[i]);
+ }
+};
+
+/*
+ Method: addEvent
+
+ Cross-browser add event listener.
+
+ Parameters:
+
+ obj - (obj) The Element to attach the listener to.
+ type - (string) The listener type. For example 'click', or 'mousemove'.
+ fn - (function) The callback function to be used when the event is fired.
+
+ Example:
+ (start code js)
+ $jit.util.addEvent(elem, 'click', function(){ alert('hello'); });
+ (end code)
+*/
+$.addEvent = function(obj, type, fn) {
+ if (obj.addEventListener)
+ obj.addEventListener(type, fn, false);
+ else
+ obj.attachEvent('on' + type, fn);
+};
+
+$.addEvents = function(obj, typeObj) {
+ for(var type in typeObj) {
+ $.addEvent(obj, type, typeObj[type]);
+ }
+};
+
+$.hasClass = function(obj, klass) {
+ return (' ' + obj.className + ' ').indexOf(' ' + klass + ' ') > -1;
+};
+
+$.addClass = function(obj, klass) {
+ if (!$.hasClass(obj, klass))
+ obj.className = (obj.className + " " + klass);
+};
+
+$.removeClass = function(obj, klass) {
+ obj.className = obj.className.replace(new RegExp(
+ '(^|\\s)' + klass + '(?:\\s|$)'), '$1');
+};
+
+$.getPos = function(elem) {
+ var offset = getOffsets(elem);
+ var scroll = getScrolls(elem);
+
+ return {
+ x: offset.x - scroll.x,
+ y: offset.y - scroll.y
+ };
+
+ function getOffsets(elem) {
+ var position = {
+ x: 0,
+ y: 0
+ };
+ while (elem && !isBody(elem)) {
+ position.x += elem.offsetLeft;
+ position.y += elem.offsetTop;
+ elem = elem.offsetParent;
+ }
+ return position;
+ }
+
+ function getScrolls(elem) {
+ var position = {
+ x: 0,
+ y: 0
+ };
+ while (elem && !isBody(elem)) {
+ position.x += elem.scrollLeft;
+ position.y += elem.scrollTop;
+ elem = elem.parentNode;
+ }
+ return position;
+ }
+
+ function isBody(element) {
+ return (/^(?:body|html)$/i).test(element.tagName);
+ }
+};
+
+$.event = {
+ get: function(e, win) {
+ win = win || window;
+ return e || win.event;
+ },
+ getWheel: function(e) {
+ return e.wheelDelta? e.wheelDelta / 120 : -(e.detail || 0) / 3;
+ },
+ isRightClick: function(e) {
+ return (e.which == 3 || e.button == 2);
+ },
+ getPos: function(e, win) {
+ // get mouse position
+ win = win || window;
+ e = e || win.event;
+ var doc = win.document;
+ doc = doc.documentElement || doc.body;
+ //TODO(nico): make touch event handling better
+ if(e.touches && e.touches.length) {
+ e = e.touches[0];
+ }
+ var page = {
+ x: e.pageX || (e.clientX + doc.scrollLeft),
+ y: e.pageY || (e.clientY + doc.scrollTop)
+ };
+ return page;
+ },
+ stop: function(e) {
+ if (e.stopPropagation) e.stopPropagation();
+ e.cancelBubble = true;
+ if (e.preventDefault) e.preventDefault();
+ else e.returnValue = false;
+ }
+};
+
+$jit.util = $jit.id = $;
+
+var Class = function(properties) {
+ properties = properties || {};
+ var klass = function() {
+ for ( var key in this) {
+ if (typeof this[key] != 'function')
+ this[key] = $.unlink(this[key]);
+ }
+ this.constructor = klass;
+ if (Class.prototyping)
+ return this;
+ var instance = this.initialize ? this.initialize.apply(this, arguments)
+ : this;
+ //typize
+ this.$$family = 'class';
+ return instance;
+ };
+
+ for ( var mutator in Class.Mutators) {
+ if (!properties[mutator])
+ continue;
+ properties = Class.Mutators[mutator](properties, properties[mutator]);
+ delete properties[mutator];
+ }
+
+ $.extend(klass, this);
+ klass.constructor = Class;
+ klass.prototype = properties;
+ return klass;
+};
+
+Class.Mutators = {
+
+ Implements: function(self, klasses) {
+ $.each($.splat(klasses), function(klass) {
+ Class.prototyping = klass;
+ var instance = (typeof klass == 'function') ? new klass : klass;
+ for ( var prop in instance) {
+ if (!(prop in self)) {
+ self[prop] = instance[prop];
+ }
+ }
+ delete Class.prototyping;
+ });
+ return self;
+ }
+
+};
+
+$.extend(Class, {
+
+ inherit: function(object, properties) {
+ for ( var key in properties) {
+ var override = properties[key];
+ var previous = object[key];
+ var type = $.type(override);
+ if (previous && type == 'function') {
+ if (override != previous) {
+ Class.override(object, key, override);
+ }
+ } else if (type == 'object') {
+ object[key] = $.merge(previous, override);
+ } else {
+ object[key] = override;
+ }
+ }
+ return object;
+ },
+
+ override: function(object, name, method) {
+ var parent = Class.prototyping;
+ if (parent && object[name] != parent[name])
+ parent = null;
+ var override = function() {
+ var previous = this.parent;
+ this.parent = parent ? parent[name] : object[name];
+ var value = method.apply(this, arguments);
+ this.parent = previous;
+ return value;
+ };
+ object[name] = override;
+ }
+
+});
+
+Class.prototype.implement = function() {
+ var proto = this.prototype;
+ $.each(Array.prototype.slice.call(arguments || []), function(properties) {
+ Class.inherit(proto, properties);
+ });
+ return this;
+};
+
+$jit.Class = Class;
+
+/*
+ Object: $jit.json
+
+ Provides JSON utility functions.
+
+ Most of these functions are JSON-tree traversal and manipulation functions.
+*/
+$jit.json = {
+ /*
+ Method: prune
+
+ Clears all tree nodes having depth greater than maxLevel.
+
+ Parameters:
+
+ tree - (object) A JSON tree object. For more information please see <Loader.loadJSON>.
+ maxLevel - (number) An integer specifying the maximum level allowed for this tree. All nodes having depth greater than max level will be deleted.
+
+ */
+ prune: function(tree, maxLevel) {
+ this.each(tree, function(elem, i) {
+ if (i == maxLevel && elem.children) {
+ delete elem.children;
+ elem.children = [];
+ }
+ });
+ },
+ /*
+ Method: getParent
+
+ Returns the parent node of the node having _id_ as id.
+
+ Parameters:
+
+ tree - (object) A JSON tree object. See also <Loader.loadJSON>.
+ id - (string) The _id_ of the child node whose parent will be returned.
+
+ Returns:
+
+ A tree JSON node if any, or false otherwise.
+
+ */
+ getParent: function(tree, id) {
+ if (tree.id == id)
+ return false;
+ var ch = tree.children;
+ if (ch && ch.length > 0) {
+ for ( var i = 0; i < ch.length; i++) {
+ if (ch[i].id == id)
+ return tree;
+ else {
+ var ans = this.getParent(ch[i], id);
+ if (ans)
+ return ans;
+ }
+ }
+ }
+ return false;
+ },
+ /*
+ Method: getSubtree
+
+ Returns the subtree that matches the given id.
+
+ Parameters:
+
+ tree - (object) A JSON tree object. See also <Loader.loadJSON>.
+ id - (string) A node *unique* identifier.
+
+ Returns:
+
+ A subtree having a root node matching the given id. Returns null if no subtree matching the id is found.
+
+ */
+ getSubtree: function(tree, id) {
+ if (tree.id == id)
+ return tree;
+ for ( var i = 0, ch = tree.children; ch && i < ch.length; i++) {
+ var t = this.getSubtree(ch[i], id);
+ if (t != null)
+ return t;
+ }
+ return null;
+ },
+ /*
+ Method: eachLevel
+
+ Iterates on tree nodes with relative depth less or equal than a specified level.
+
+ Parameters:
+
+ tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
+ initLevel - (number) An integer specifying the initial relative level. Usually zero.
+ toLevel - (number) An integer specifying a top level. This method will iterate only through nodes with depth less than or equal this number.
+ action - (function) A function that receives a node and an integer specifying the actual level of the node.
+
+ Example:
+ (start code js)
+ $jit.json.eachLevel(tree, 0, 3, function(node, depth) {
+ alert(node.name + ' ' + depth);
+ });
+ (end code)
+ */
+ eachLevel: function(tree, initLevel, toLevel, action) {
+ if (initLevel <= toLevel) {
+ action(tree, initLevel);
+ if(!tree.children) return;
+ for ( var i = 0, ch = tree.children; i < ch.length; i++) {
+ this.eachLevel(ch[i], initLevel + 1, toLevel, action);
+ }
+ }
+ },
+ /*
+ Method: each
+
+ A JSON tree iterator.
+
+ Parameters:
+
+ tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
+ action - (function) A function that receives a node.
+
+ Example:
+ (start code js)
+ $jit.json.each(tree, function(node) {
+ alert(node.name);
+ });
+ (end code)
+
+ */
+ each: function(tree, action) {
+ this.eachLevel(tree, 0, Number.MAX_VALUE, action);
+ }
+};
+
+
+/*
+ An object containing multiple type of transformations.
+*/
+
+$jit.Trans = {
+ $extend: true,
+
+ linear: function(p){
+ return p;
+ }
+};
+
+var Trans = $jit.Trans;
+
+(function(){
+
+ var makeTrans = function(transition, params){
+ params = $.splat(params);
+ return $.extend(transition, {
+ easeIn: function(pos){
+ return transition(pos, params);
+ },
+ easeOut: function(pos){
+ return 1 - transition(1 - pos, params);
+ },
+ easeInOut: function(pos){
+ return (pos <= 0.5)? transition(2 * pos, params) / 2 : (2 - transition(
+ 2 * (1 - pos), params)) / 2;
+ }
+ });
+ };
+
+ var transitions = {
+
+ Pow: function(p, x){
+ return Math.pow(p, x[0] || 6);
+ },
+
+ Expo: function(p){
+ return Math.pow(2, 8 * (p - 1));
+ },
+
+ Circ: function(p){
+ return 1 - Math.sin(Math.acos(p));
+ },
+
+ Sine: function(p){
+ return 1 - Math.sin((1 - p) * Math.PI / 2);
+ },
+
+ Back: function(p, x){
+ x = x[0] || 1.618;
+ return Math.pow(p, 2) * ((x + 1) * p - x);
+ },
+
+ Bounce: function(p){
+ var value;
+ for ( var a = 0, b = 1; 1; a += b, b /= 2) {
+ if (p >= (7 - 4 * a) / 11) {
+ value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
+ break;
+ }
+ }
+ return value;
+ },
+
+ Elastic: function(p, x){
+ return Math.pow(2, 10 * --p)
+ * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
+ }
+
+ };
+
+ $.each(transitions, function(val, key){
+ Trans[key] = makeTrans(val);
+ });
+
+ $.each( [
+ 'Quad', 'Cubic', 'Quart', 'Quint'
+ ], function(elem, i){
+ Trans[elem] = makeTrans(function(p){
+ return Math.pow(p, [
+ i + 2
+ ]);
+ });
+ });
+
+})();
+
+/*
+ A Class that can perform animations for generic objects.
+
+ If you are looking for animation transitions please take a look at the <Trans> object.
+
+ Used by:
+
+ <Graph.Plot>
+
+ Based on:
+
+ The Animation class is based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2009 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
+
+*/
+
+var Animation = new Class( {
+
+ initialize: function(options){
+ this.setOptions(options);
+ },
+
+ setOptions: function(options){
+ var opt = {
+ duration: 2500,
+ fps: 40,
+ transition: Trans.Quart.easeInOut,
+ compute: $.empty,
+ complete: $.empty,
+ link: 'ignore'
+ };
+ this.opt = $.merge(opt, options || {});
+ return this;
+ },
+
+ step: function(){
+ var time = $.time(), opt = this.opt;
+ if (time < this.time + opt.duration) {
+ var delta = opt.transition((time - this.time) / opt.duration);
+ opt.compute(delta);
+ } else {
+ this.timer = clearInterval(this.timer);
+ opt.compute(1);
+ opt.complete();
+ }
+ },
+
+ start: function(){
+ if (!this.check())
+ return this;
+ this.time = 0;
+ this.startTimer();
+ return this;
+ },
+
+ startTimer: function(){
+ var that = this, fps = this.opt.fps;
+ if (this.timer)
+ return false;
+ this.time = $.time() - this.time;
+ this.timer = setInterval((function(){
+ that.step();
+ }), Math.round(1000 / fps));
+ return true;
+ },
+
+ pause: function(){
+ this.stopTimer();
+ return this;
+ },
+
+ resume: function(){
+ this.startTimer();
+ return this;
+ },
+
+ stopTimer: function(){
+ if (!this.timer)
+ return false;
+ this.time = $.time() - this.time;
+ this.timer = clearInterval(this.timer);
+ return true;
+ },
+
+ check: function(){
+ if (!this.timer)
+ return true;
+ if (this.opt.link == 'cancel') {
+ this.stopTimer();
+ return true;
+ }
+ return false;
+ }
+});
+
+
+var Options = function() {
+ var args = arguments;
+ for(var i=0, l=args.length, ans={}; i<l; i++) {
+ var opt = Options[args[i]];
+ if(opt.$extend) {
+ $.extend(ans, opt);
+ } else {
+ ans[args[i]] = opt;
+ }
+ }
+ return ans;
+};
+
+/*
+ * File: Options.AreaChart.js
+ *
+*/
+
+/*
+ Object: Options.AreaChart
+
+ <AreaChart> options.
+ Other options included in the AreaChart are <Options.Canvas>, <Options.Label>, <Options.Margin>, <Options.Tips> and <Options.Events>.
+
+ Syntax:
+
+ (start code js)
+
+ Options.AreaChart = {
+ animate: true,
+ labelOffset: 3,
+ type: 'stacked',
+ selectOnHover: true,
+ showAggregates: true,
+ showLabels: true,
+ filterOnClick: false,
+ restoreOnRightClick: false
+ };
+
+ (end code)
+
+ Example:
+
+ (start code js)
+
+ var areaChart = new $jit.AreaChart({
+ animate: true,
+ type: 'stacked:gradient',
+ selectOnHover: true,
+ filterOnClick: true,
+ restoreOnRightClick: true
+ });
+
+ (end code)
+
+ Parameters:
+
+ animate - (boolean) Default's *true*. Whether to add animated transitions when filtering/restoring stacks.
+ labelOffset - (number) Default's *3*. Adds margin between the label and the default place where it should be drawn.
+ type - (string) Default's *'stacked'*. Stack style. Posible values are 'stacked', 'stacked:gradient' to add gradients.
+ selectOnHover - (boolean) Default's *true*. If true, it will add a mark to the hovered stack.
+ showAggregates - (boolean, function) Default's *true*. Display the values of the stacks. Can also be a function that returns *true* or *false* to display or filter some values. That same function can also return a string with the formatted value.
+ showLabels - (boolean, function) Default's *true*. Display the name of the slots. Can also be a function that returns *true* or *false* to display or not each label.
+ filterOnClick - (boolean) Default's *true*. Select the clicked stack by hiding all other stacks.
+ restoreOnRightClick - (boolean) Default's *true*. Show all stacks by right clicking.
+
+*/
+
+Options.AreaChart = {
+ $extend: true,
+
+ animate: true,
+ labelOffset: 3, // label offset
+ type: 'stacked', // gradient
+ Tips: {
+ enable: false,
+ onShow: $.empty,
+ onHide: $.empty
+ },
+ Events: {
+ enable: false,
+ onClick: $.empty
+ },
+ selectOnHover: true,
+ showAggregates: true,
+ showLabels: true,
+ filterOnClick: false,
+ restoreOnRightClick: false
+};
+
+/*
+ * File: Options.Margin.js
+ *
+*/
+
+/*
+ Object: Options.Margin
+
+ Canvas drawing margins.
+
+ Syntax:
+
+ (start code js)
+
+ Options.Margin = {
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0
+ };
+
+ (end code)
+
+ Example:
+
+ (start code js)
+
+ var viz = new $jit.Viz({
+ Margin: {
+ right: 10,
+ bottom: 20
+ }
+ });
+
+ (end code)
+
+ Parameters:
+
+ top - (number) Default's *0*. Top margin.
+ left - (number) Default's *0*. Left margin.
+ right - (number) Default's *0*. Right margin.
+ bottom - (number) Default's *0*. Bottom margin.
+
+*/
+
+Options.Margin = {
+ $extend: false,
+
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0
+};
+
+/*
+ * File: Options.Canvas.js
+ *
+*/
+
+/*
+ Object: Options.Canvas
+
+ These are Canvas general options, like where to append it in the DOM, its dimensions, background,
+ and other more advanced options.
+
+ Syntax:
+
+ (start code js)
+
+ Options.Canvas = {
+ injectInto: 'id',
+ type: '2D', //'3D'
+ width: false,
+ height: false,
+ useCanvas: false,
+ withLabels: true,
+ background: false
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ injectInto: 'someContainerId',
+ width: 500,
+ height: 700
+ });
+ (end code)
+
+ Parameters:
+
+ injectInto - *required* (string|element) The id of the DOM container for the visualization. It can also be an Element provided that it has an id.
+ type - (string) Context type. Default's 2D but can be 3D for webGL enabled browsers.
+ width - (number) Default's to the *container's offsetWidth*. The width of the canvas.
+ height - (number) Default's to the *container's offsetHeight*. The height of the canvas.
+ useCanvas - (boolean|object) Default's *false*. You can pass another <Canvas> instance to be used by the visualization.
+ withLabels - (boolean) Default's *true*. Whether to use a label container for the visualization.
+ background - (boolean|object) Default's *false*. An object containing information about the rendering of a background canvas.
+*/
+
+Options.Canvas = {
+ $extend: true,
+
+ injectInto: 'id',
+ type: '2D',
+ width: false,
+ height: false,
+ useCanvas: false,
+ withLabels: true,
+ background: false,
+
+ Scene: {
+ Lighting: {
+ enable: false,
+ ambient: [1, 1, 1],
+ directional: {
+ direction: { x: -100, y: -100, z: -100 },
+ color: [0.5, 0.3, 0.1]
+ }
+ }
+ }
+};
+
+/*
+ * File: Options.Tree.js
+ *
+*/
+
+/*
+ Object: Options.Tree
+
+ Options related to (strict) Tree layout algorithms. These options are used by the <ST> visualization.
+
+ Syntax:
+
+ (start code js)
+ Options.Tree = {
+ orientation: "left",
+ subtreeOffset: 8,
+ siblingOffset: 5,
+ indent:10,
+ multitree: false,
+ align:"center"
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var st = new $jit.ST({
+ orientation: 'left',
+ subtreeOffset: 1,
+ siblingOFfset: 5,
+ multitree: true
+ });
+ (end code)
+
+ Parameters:
+
+ subtreeOffset - (number) Default's 8. Separation offset between subtrees.
+ siblingOffset - (number) Default's 5. Separation offset between siblings.
+ orientation - (string) Default's 'left'. Tree orientation layout. Possible values are 'left', 'top', 'right', 'bottom'.
+ align - (string) Default's *center*. Whether the tree alignment is 'left', 'center' or 'right'.
+ indent - (number) Default's 10. Used when *align* is left or right and shows an indentation between parent and children.
+ multitree - (boolean) Default's *false*. Used with the node $orn data property for creating multitrees.
+
+*/
+Options.Tree = {
+ $extend: true,
+
+ orientation: "left",
+ subtreeOffset: 8,
+ siblingOffset: 5,
+ indent:10,
+ multitree: false,
+ align:"center"
+};
+
+
+/*
+ * File: Options.Node.js
+ *
+*/
+
+/*
+ Object: Options.Node
+
+ Provides Node rendering options for Tree and Graph based visualizations.
+
+ Syntax:
+
+ (start code js)
+ Options.Node = {
+ overridable: false,
+ type: 'circle',
+ color: '#ccb',
+ alpha: 1,
+ dim: 3,
+ height: 20,
+ width: 90,
+ autoHeight: false,
+ autoWidth: false,
+ lineWidth: 1,
+ transform: true,
+ align: "center",
+ angularWidth:1,
+ span:1,
+ CanvasStyles: {}
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Node: {
+ overridable: true,
+ width: 30,
+ autoHeight: true,
+ type: 'rectangle'
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ overridable - (boolean) Default's *false*. Determine whether or not general node properties can be overridden by a particular <Graph.Node>.
+ type - (string) Default's *circle*. Node's shape. Node built-in types include 'circle', 'rectangle', 'square', 'ellipse', 'triangle', 'star'. The default Node type might vary in each visualization. You can also implement (non built-in) custom Node types into your visualizations.
+ color - (string) Default's *#ccb*. Node color.
+ alpha - (number) Default's *1*. The Node's alpha value. *1* is for full opacity.
+ dim - (number) Default's *3*. An extra parameter used by 'circle', 'square', 'triangle' and 'star' node types. Depending on each shape, this parameter can set the radius of a circle, half the length of the side of a square, half the base and half the height of a triangle or the length of a side of a star (concave decagon).
+ height - (number) Default's *20*. Used by 'rectangle' and 'ellipse' node types. The height of the node shape.
+ width - (number) Default's *90*. Used by 'rectangle' and 'ellipse' node types. The width of the node shape.
+ autoHeight - (boolean) Default's *false*. Whether to set an auto height for the node depending on the content of the Node's label.
+ autoWidth - (boolean) Default's *false*. Whether to set an auto width for the node depending on the content of the Node's label.
+ lineWidth - (number) Default's *1*. Used only by some Node shapes. The line width of the strokes of a node.
+ transform - (boolean) Default's *true*. Only used by the <Hypertree> visualization. Whether to scale the nodes according to the moebius transformation.
+ align - (string) Default's *center*. Possible values are 'center', 'left' or 'right'. Used only by the <ST> visualization, these parameters are used for aligning nodes when some of they dimensions vary.
+ angularWidth - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The amount of relative 'space' set for a node.
+ span - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The angle span amount set for a node.
+ CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting a Node.
+
+*/
+Options.Node = {
+ $extend: false,
+
+ overridable: false,
+ type: 'circle',
+ color: '#ccb',
+ alpha: 1,
+ dim: 3,
+ height: 20,
+ width: 90,
+ autoHeight: false,
+ autoWidth: false,
+ lineWidth: 1,
+ transform: true,
+ align: "center",
+ angularWidth:1,
+ span:1,
+ //Raw canvas styles to be
+ //applied to the context instance
+ //before plotting a node
+ CanvasStyles: {}
+};
+
+
+/*
+ * File: Options.Edge.js
+ *
+*/
+
+/*
+ Object: Options.Edge
+
+ Provides Edge rendering options for Tree and Graph based visualizations.
+
+ Syntax:
+
+ (start code js)
+ Options.Edge = {
+ overridable: false,
+ type: 'line',
+ color: '#ccb',
+ lineWidth: 1,
+ dim:15,
+ alpha: 1,
+ CanvasStyles: {}
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Edge: {
+ overridable: true,
+ type: 'line',
+ color: '#fff',
+ CanvasStyles: {
+ shadowColor: '#ccc',
+ shadowBlur: 10
+ }
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ overridable - (boolean) Default's *false*. Determine whether or not general edges properties can be overridden by a particular <Graph.Adjacence>.
+ type - (string) Default's 'line'. Edge styles include 'line', 'hyperline', 'arrow'. The default Edge type might vary in each visualization. You can also implement custom Edge types.
+ color - (string) Default's '#ccb'. Edge color.
+ lineWidth - (number) Default's *1*. Line/Edge width.
+ alpha - (number) Default's *1*. The Edge's alpha value. *1* is for full opacity.
+ dim - (number) Default's *15*. An extra parameter used by other complex shapes such as quadratic, bezier or arrow, to determine the shape's diameter.
+ epsilon - (number) Default's *7*. Only used when using *enableForEdges* in <Options.Events>. This dimension is used to create an area for the line where the contains method for the edge returns *true*.
+ CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting an Edge.
+
+ See also:
+
+ If you want to know more about how to customize Node/Edge data per element, in the JSON or programmatically, take a look at this article.
+*/
+Options.Edge = {
+ $extend: false,
+
+ overridable: false,
+ type: 'line',
+ color: '#ccb',
+ lineWidth: 1,
+ dim:15,
+ alpha: 1,
+ epsilon: 7,
+
+ //Raw canvas styles to be
+ //applied to the context instance
+ //before plotting an edge
+ CanvasStyles: {}
+};
+
+
+/*
+ * File: Options.Fx.js
+ *
+*/
+
+/*
+ Object: Options.Fx
+
+ Provides animation options like duration of the animations, frames per second and animation transitions.
+
+ Syntax:
+
+ (start code js)
+ Options.Fx = {
+ fps:40,
+ duration: 2500,
+ transition: $jit.Trans.Quart.easeInOut,
+ clearCanvas: true
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ duration: 1000,
+ fps: 35,
+ transition: $jit.Trans.linear
+ });
+ (end code)
+
+ Parameters:
+
+ clearCanvas - (boolean) Default's *true*. Whether to clear the frame/canvas when the viz is plotted or animated.
+ duration - (number) Default's *2500*. Duration of the animation in milliseconds.
+ fps - (number) Default's *40*. Frames per second.
+ transition - (object) Default's *$jit.Trans.Quart.easeInOut*. The transition used for the animations. See below for a more detailed explanation.
+
+ Object: $jit.Trans
+
+ This object is used for specifying different animation transitions in all visualizations.
+
+ There are many different type of animation transitions.
+
+ linear:
+
+ Displays a linear transition
+
+ >Trans.linear
+
+ (see Linear.png)
+
+ Quad:
+
+ Displays a Quadratic transition.
+
+ >Trans.Quad.easeIn
+ >Trans.Quad.easeOut
+ >Trans.Quad.easeInOut
+
+ (see Quad.png)
+
+ Cubic:
+
+ Displays a Cubic transition.
+
+ >Trans.Cubic.easeIn
+ >Trans.Cubic.easeOut
+ >Trans.Cubic.easeInOut
+
+ (see Cubic.png)
+
+ Quart:
+
+ Displays a Quartetic transition.
+
+ >Trans.Quart.easeIn
+ >Trans.Quart.easeOut
+ >Trans.Quart.easeInOut
+
+ (see Quart.png)
+
+ Quint:
+
+ Displays a Quintic transition.
+
+ >Trans.Quint.easeIn
+ >Trans.Quint.easeOut
+ >Trans.Quint.easeInOut
+
+ (see Quint.png)
+
+ Expo:
+
+ Displays an Exponential transition.
+
+ >Trans.Expo.easeIn
+ >Trans.Expo.easeOut
+ >Trans.Expo.easeInOut
+
+ (see Expo.png)
+
+ Circ:
+
+ Displays a Circular transition.
+
+ >Trans.Circ.easeIn
+ >Trans.Circ.easeOut
+ >Trans.Circ.easeInOut
+
+ (see Circ.png)
+
+ Sine:
+
+ Displays a Sineousidal transition.
+
+ >Trans.Sine.easeIn
+ >Trans.Sine.easeOut
+ >Trans.Sine.easeInOut
+
+ (see Sine.png)
+
+ Back:
+
+ >Trans.Back.easeIn
+ >Trans.Back.easeOut
+ >Trans.Back.easeInOut
+
+ (see Back.png)
+
+ Bounce:
+
+ Bouncy transition.
+
+ >Trans.Bounce.easeIn
+ >Trans.Bounce.easeOut
+ >Trans.Bounce.easeInOut
+
+ (see Bounce.png)
+
+ Elastic:
+
+ Elastic curve.
+
+ >Trans.Elastic.easeIn
+ >Trans.Elastic.easeOut
+ >Trans.Elastic.easeInOut
+
+ (see Elastic.png)
+
+ Based on:
+
+ Easing and Transition animation methods are based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
+
+
+*/
+Options.Fx = {
+ $extend: true,
+
+ fps:40,
+ duration: 2500,
+ transition: $jit.Trans.Quart.easeInOut,
+ clearCanvas: true
+};
+
+/*
+ * File: Options.Label.js
+ *
+*/
+/*
+ Object: Options.Label
+
+ Provides styling for Labels such as font size, family, etc. Also sets Node labels as HTML, SVG or Native canvas elements.
+
+ Syntax:
+
+ (start code js)
+ Options.Label = {
+ overridable: false,
+ type: 'HTML', //'SVG', 'Native'
+ style: ' ',
+ size: 10,
+ family: 'sans-serif',
+ textAlign: 'center',
+ textBaseline: 'alphabetic',
+ color: '#fff'
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Label: {
+ type: 'Native',
+ size: 11,
+ color: '#ccc'
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ overridable - (boolean) Default's *false*. Determine whether or not general label properties can be overridden by a particular <Graph.Node>.
+ type - (string) Default's *HTML*. The type for the labels. Can be 'HTML', 'SVG' or 'Native' canvas labels.
+ style - (string) Default's *empty string*. Can be 'italic' or 'bold'. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+ size - (number) Default's *10*. The font's size. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+ family - (string) Default's *sans-serif*. The font's family. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+ color - (string) Default's *#fff*. The font's color. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+*/
+Options.Label = {
+ $extend: false,
+
+ overridable: false,
+ type: 'HTML', //'SVG', 'Native'
+ style: ' ',
+ size: 10,
+ family: 'sans-serif',
+ textAlign: 'center',
+ textBaseline: 'alphabetic',
+ color: '#fff'
+};
+
+
+/*
+ * File: Options.Tips.js
+ *
+ */
+
+/*
+ Object: Options.Tips
+
+ Tips options
+
+ Syntax:
+
+ (start code js)
+ Options.Tips = {
+ enable: false,
+ type: 'auto',
+ offsetX: 20,
+ offsetY: 20,
+ onShow: $.empty,
+ onHide: $.empty
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Tips: {
+ enable: true,
+ type: 'Native',
+ offsetX: 10,
+ offsetY: 10,
+ onShow: function(tip, node) {
+ tip.innerHTML = node.name;
+ }
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ enable - (boolean) Default's *false*. If *true*, a tooltip will be shown when a node is hovered. The tooltip is a div DOM element having "tip" as CSS class.
+ type - (string) Default's *auto*. Defines where to attach the MouseEnter/Leave tooltip events. Possible values are 'Native' to attach them to the canvas or 'HTML' to attach them to DOM label elements (if defined). 'auto' sets this property to the value of <Options.Label>'s *type* property.
+ offsetX - (number) Default's *20*. An offset added to the current tooltip x-position (which is the same as the current mouse position). Default's 20.
+ offsetY - (number) Default's *20*. An offset added to the current tooltip y-position (which is the same as the current mouse position). Default's 20.
+ onShow(tip, node) - This callack is used right before displaying a tooltip. The first formal parameter is the tip itself (which is a DivElement). The second parameter may be a <Graph.Node> for graph based visualizations or an object with label, value properties for charts.
+ onHide() - This callack is used when hiding a tooltip.
+
+*/
+Options.Tips = {
+ $extend: false,
+
+ enable: false,
+ type: 'auto',
+ offsetX: 20,
+ offsetY: 20,
+ force: false,
+ onShow: $.empty,
+ onHide: $.empty
+};
+
+
+/*
+ * File: Options.NodeStyles.js
+ *
+ */
+
+/*
+ Object: Options.NodeStyles
+
+ Apply different styles when a node is hovered or selected.
+
+ Syntax:
+
+ (start code js)
+ Options.NodeStyles = {
+ enable: false,
+ type: 'auto',
+ stylesHover: false,
+ stylesClick: false
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ NodeStyles: {
+ enable: true,
+ type: 'Native',
+ stylesHover: {
+ dim: 30,
+ color: '#fcc'
+ },
+ duration: 600
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ enable - (boolean) Default's *false*. Whether to enable this option.
+ type - (string) Default's *auto*. Use this to attach the hover/click events in the nodes or the nodes labels (if they have been defined as DOM elements: 'HTML' or 'SVG', see <Options.Label> for more details). The default 'auto' value will set NodeStyles to the same type defined for <Options.Label>.
+ stylesHover - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
+ stylesClick - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
+*/
+
+Options.NodeStyles = {
+ $extend: false,
+
+ enable: false,
+ type: 'auto',
+ stylesHover: false,
+ stylesClick: false
+};
+
+
+/*
+ * File: Options.Events.js
+ *
+*/
+
+/*
+ Object: Options.Events
+
+ Configuration for adding mouse/touch event handlers to Nodes.
+
+ Syntax:
+
+ (start code js)
+ Options.Events = {
+ enable: false,
+ enableForEdges: false,
+ type: 'auto',
+ onClick: $.empty,
+ onRightClick: $.empty,
+ onMouseMove: $.empty,
+ onMouseEnter: $.empty,
+ onMouseLeave: $.empty,
+ onDragStart: $.empty,
+ onDragMove: $.empty,
+ onDragCancel: $.empty,
+ onDragEnd: $.empty,
+ onTouchStart: $.empty,
+ onTouchMove: $.empty,
+ onTouchEnd: $.empty,
+ onTouchCancel: $.empty,
+ onMouseWheel: $.empty
+ };
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Events: {
+ enable: true,
+ onClick: function(node, eventInfo, e) {
+ viz.doSomething();
+ },
+ onMouseEnter: function(node, eventInfo, e) {
+ viz.canvas.getElement().style.cursor = 'pointer';
+ },
+ onMouseLeave: function(node, eventInfo, e) {
+ viz.canvas.getElement().style.cursor = '';
+ }
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ enable - (boolean) Default's *false*. Whether to enable the Event system.
+ enableForEdges - (boolean) Default's *false*. Whether to track events also in arcs. If *true* the same callbacks -described below- are used for nodes *and* edges. A simple duck type check for edges is to check for *node.nodeFrom*.
+ type - (string) Default's 'auto'. Whether to attach the events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. 'auto' is set when you let the <Options.Label> *type* parameter decide this.
+ onClick(node, eventInfo, e) - Triggered when a user performs a click in the canvas. *node* is the <Graph.Node> clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onRightClick(node, eventInfo, e) - Triggered when a user performs a right click in the canvas. *node* is the <Graph.Node> right clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onMouseMove(node, eventInfo, e) - Triggered when the user moves the mouse. *node* is the <Graph.Node> under the cursor as it's moving over the canvas or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onMouseEnter(node, eventInfo, e) - Triggered when a user moves the mouse over a node. *node* is the <Graph.Node> that the mouse just entered. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onMouseLeave(node, eventInfo, e) - Triggered when the user mouse-outs a node. *node* is the <Graph.Node> 'mouse-outed'. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onDragStart(node, eventInfo, e) - Triggered when the user mouse-downs over a node. *node* is the <Graph.Node> being pressed. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onDragMove(node, eventInfo, e) - Triggered when a user, after pressing the mouse button over a node, moves the mouse around. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onDragEnd(node, eventInfo, e) - Triggered when a user finished dragging a node. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onDragCancel(node, eventInfo, e) - Triggered when the user releases the mouse button over a <Graph.Node> that wasn't dragged (i.e. the user didn't perform any mouse movement after pressing the mouse button). *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+ onTouchStart(node, eventInfo, e) - Behaves just like onDragStart.
+ onTouchMove(node, eventInfo, e) - Behaves just like onDragMove.
+ onTouchEnd(node, eventInfo, e) - Behaves just like onDragEnd.
+ onTouchCancel(node, eventInfo, e) - Behaves just like onDragCancel.
+ onMouseWheel(delta, e) - Triggered when the user uses the mouse scroll over the canvas. *delta* is 1 or -1 depending on the sense of the mouse scroll.
+*/
+
+Options.Events = {
+ $extend: false,
+
+ enable: false,
+ enableForEdges: false,
+ type: 'auto',
+ onClick: $.empty,
+ onRightClick: $.empty,
+ onMouseMove: $.empty,
+ onMouseEnter: $.empty,
+ onMouseLeave: $.empty,
+ onDragStart: $.empty,
+ onDragMove: $.empty,
+ onDragCancel: $.empty,
+ onDragEnd: $.empty,
+ onTouchStart: $.empty,
+ onTouchMove: $.empty,
+ onTouchEnd: $.empty,
+ onMouseWheel: $.empty
+};
+
+/*
+ * File: Options.Navigation.js
+ *
+*/
+
+/*
+ Object: Options.Navigation
+
+ Panning and zooming options for Graph/Tree based visualizations. These options are implemented
+ by all visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
+
+ Syntax:
+
+ (start code js)
+
+ Options.Navigation = {
+ enable: false,
+ type: 'auto',
+ panning: false, //true, 'avoid nodes'
+ zooming: false
+ };
+
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ Navigation: {
+ enable: true,
+ panning: 'avoid nodes',
+ zooming: 20
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ enable - (boolean) Default's *false*. Whether to enable Navigation capabilities.
+ type - (string) Default's 'auto'. Whether to attach the navigation events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. When 'auto' set when you let the <Options.Label> *type* parameter decide this.
+ panning - (boolean|string) Default's *false*. Set this property to *true* if you want to add Drag and Drop panning support to the visualization. You can also set this parameter to 'avoid nodes' to enable DnD panning but disable it if the DnD is taking place over a node. This is useful when some other events like Drag & Drop for nodes are added to <Graph.Nodes>.
+ zooming - (boolean|number) Default's *false*. Set this property to a numeric value to turn mouse-scroll zooming on. The number will be proportional to the mouse-scroll sensitivity.
+
+*/
+
+Options.Navigation = {
+ $extend: false,
+
+ enable: false,
+ type: 'auto',
+ panning: false, //true | 'avoid nodes'
+ zooming: false
+};
+
+/*
+ * File: Options.Controller.js
+ *
+*/
+
+/*
+ Object: Options.Controller
+
+ Provides controller methods. Controller methods are callback functions that get called at different stages
+ of the animation, computing or plotting of the visualization.
+
+ Implemented by:
+
+ All visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
+
+ Syntax:
+
+ (start code js)
+
+ Options.Controller = {
+ onBeforeCompute: $.empty,
+ onAfterCompute: $.empty,
+ onCreateLabel: $.empty,
+ onPlaceLabel: $.empty,
+ onComplete: $.empty,
+ onBeforePlotLine:$.empty,
+ onAfterPlotLine: $.empty,
+ onBeforePlotNode:$.empty,
+ onAfterPlotNode: $.empty,
+ request: false
+ };
+
+ (end code)
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz({
+ onBeforePlotNode: function(node) {
+ if(node.selected) {
+ node.setData('color', '#ffc');
+ } else {
+ node.removeData('color');
+ }
+ },
+ onBeforePlotLine: function(adj) {
+ if(adj.nodeFrom.selected && adj.nodeTo.selected) {
+ adj.setData('color', '#ffc');
+ } else {
+ adj.removeData('color');
+ }
+ },
+ onAfterCompute: function() {
+ alert("computed!");
+ }
+ });
+ (end code)
+
+ Parameters:
+
+ onBeforeCompute(node) - This method is called right before performing all computations and animations. The selected <Graph.Node> is passed as parameter.
+ onAfterCompute() - This method is triggered after all animations or computations ended.
+ onCreateLabel(domElement, node) - This method receives a new label DIV element as first parameter, and the corresponding <Graph.Node> as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
+ onPlaceLabel(domElement, node) - This method receives a label DIV element as first parameter and the corresponding <Graph.Node> as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
+ onBeforePlotNode(node) - This method is triggered right before plotting each <Graph.Node>. This method is useful for changing a node style right before plotting it.
+ onAfterPlotNode(node) - This method is triggered right after plotting each <Graph.Node>.
+ onBeforePlotLine(adj) - This method is triggered right before plotting a <Graph.Adjacence>. This method is useful for adding some styles to a particular edge before being plotted.
+ onAfterPlotLine(adj) - This method is triggered right after plotting a <Graph.Adjacence>.
+
+ *Used in <ST>, <TM.Base> and <Icicle> visualizations*
+
+ request(nodeId, level, onComplete) - This method is used for buffering information into the visualization. When clicking on an empty node, the visualization will make a request for this node's subtrees, specifying a given level for this subtree (defined by _levelsToShow_). Once the request is completed, the onComplete callback should be called with the given result. This is useful to provide on-demand information into the visualizations withought having to load the entire information from start. The parameters used by this method are _nodeId_, which is the id of the root of the subtree to request, _level_ which is the depth of the subtree to be requested (0 would mean just the root node). _onComplete_ is an object having the callback method _onComplete.onComplete(json)_ that should be called once the json has been retrieved.
+
+ */
+Options.Controller = {
+ $extend: true,
+
+ onBeforeCompute: $.empty,
+ onAfterCompute: $.empty,
+ onCreateLabel: $.empty,
+ onPlaceLabel: $.empty,
+ onComplete: $.empty,
+ onBeforePlotLine:$.empty,
+ onAfterPlotLine: $.empty,
+ onBeforePlotNode:$.empty,
+ onAfterPlotNode: $.empty,
+ request: false
+};
+
+
+/*
+ * File: Extras.js
+ *
+ * Provides Extras such as Tips and Style Effects.
+ *
+ * Description:
+ *
+ * Provides the <Tips> and <NodeStyles> classes and functions.
+ *
+ */
+
+/*
+ * Manager for mouse events (clicking and mouse moving).
+ *
+ * This class is used for registering objects implementing onClick
+ * and onMousemove methods. These methods are called when clicking or
+ * moving the mouse around the Canvas.
+ * For now, <Tips> and <NodeStyles> are classes implementing these methods.
+ *
+ */
+var ExtrasInitializer = {
+ initialize: function(className, viz) {
+ this.viz = viz;
+ this.canvas = viz.canvas;
+ this.config = viz.config[className];
+ this.nodeTypes = viz.fx.nodeTypes;
+ var type = this.config.type;
+ this.dom = type == 'auto'? (viz.config.Label.type != 'Native') : (type != 'Native');
+ this.labelContainer = this.dom && viz.labels.getLabelContainer();
+ this.isEnabled() && this.initializePost();
+ },
+ initializePost: $.empty,
+ setAsProperty: $.lambda(false),
+ isEnabled: function() {
+ return this.config.enable;
+ },
+ isLabel: function(e, win, group) {
+ e = $.event.get(e, win);
+ var labelContainer = this.labelContainer,
+ target = e.target || e.srcElement,
+ related = e.relatedTarget;
+ if(group) {
+ return related && related == this.viz.canvas.getCtx().canvas
+ && !!target && this.isDescendantOf(target, labelContainer);
+ } else {
+ return this.isDescendantOf(target, labelContainer);
+ }
+ },
+ isDescendantOf: function(elem, par) {
+ while(elem && elem.parentNode) {
+ if(elem.parentNode == par)
+ return elem;
+ elem = elem.parentNode;
+ }
+ return false;
+ }
+};
+
+var EventsInterface = {
+ onMouseUp: $.empty,
+ onMouseDown: $.empty,
+ onMouseMove: $.empty,
+ onMouseOver: $.empty,
+ onMouseOut: $.empty,
+ onMouseWheel: $.empty,
+ onTouchStart: $.empty,
+ onTouchMove: $.empty,
+ onTouchEnd: $.empty,
+ onTouchCancel: $.empty
+};
+
+var MouseEventsManager = new Class({
+ initialize: function(viz) {
+ this.viz = viz;
+ this.canvas = viz.canvas;
+ this.node = false;
+ this.edge = false;
+ this.registeredObjects = [];
+ this.attachEvents();
+ },
+
+ attachEvents: function() {
+ var htmlCanvas = this.canvas.getElement(),
+ that = this;
+ htmlCanvas.oncontextmenu = $.lambda(false);
+ $.addEvents(htmlCanvas, {
+ 'mouseup': function(e, win) {
+ var event = $.event.get(e, win);
+ that.handleEvent('MouseUp', e, win,
+ that.makeEventObject(e, win),
+ $.event.isRightClick(event));
+ },
+ 'mousedown': function(e, win) {
+ var event = $.event.get(e, win);
+ that.handleEvent('MouseDown', e, win, that.makeEventObject(e, win),
+ $.event.isRightClick(event));
+ },
+ 'mousemove': function(e, win) {
+ that.handleEvent('MouseMove', e, win, that.makeEventObject(e, win));
+ },
+ 'mouseover': function(e, win) {
+ that.handleEvent('MouseOver', e, win, that.makeEventObject(e, win));
+ },
+ 'mouseout': function(e, win) {
+ that.handleEvent('MouseOut', e, win, that.makeEventObject(e, win));
+ },
+ 'touchstart': function(e, win) {
+ that.handleEvent('TouchStart', e, win, that.makeEventObject(e, win));
+ },
+ 'touchmove': function(e, win) {
+ that.handleEvent('TouchMove', e, win, that.makeEventObject(e, win));
+ },
+ 'touchend': function(e, win) {
+ that.handleEvent('TouchEnd', e, win, that.makeEventObject(e, win));
+ }
+ });
+ //attach mousewheel event
+ var handleMouseWheel = function(e, win) {
+ var event = $.event.get(e, win);
+ var wheel = $.event.getWheel(event);
+ that.handleEvent('MouseWheel', e, win, wheel);
+ };
+ //TODO(nico): this is a horrible check for non-gecko browsers!
+ if(!document.getBoxObjectFor && window.mozInnerScreenX == null) {
+ $.addEvent(htmlCanvas, 'mousewheel', handleMouseWheel);
+ } else {
+ htmlCanvas.addEventListener('DOMMouseScroll', handleMouseWheel, false);
+ }
+ },
+
+ register: function(obj) {
+ this.registeredObjects.push(obj);
+ },
+
+ handleEvent: function() {
+ var args = Array.prototype.slice.call(arguments),
+ type = args.shift();
+ for(var i=0, regs=this.registeredObjects, l=regs.length; i<l; i++) {
+ regs[i]['on' + type].apply(regs[i], args);
+ }
+ },
+
+ makeEventObject: function(e, win) {
+ var that = this,
+ graph = this.viz.graph,
+ fx = this.viz.fx,
+ ntypes = fx.nodeTypes,
+ etypes = fx.edgeTypes;
+ return {
+ pos: false,
+ node: false,
+ edge: false,
+ contains: false,
+ getNodeCalled: false,
+ getEdgeCalled: false,
+ getPos: function() {
+ //TODO(nico): check why this can't be cache anymore when using edge detection
+ //if(this.pos) return this.pos;
+ var canvas = that.viz.canvas,
+ s = canvas.getSize(),
+ p = canvas.getPos(),
+ ox = canvas.translateOffsetX,
+ oy = canvas.translateOffsetY,
+ sx = canvas.scaleOffsetX,
+ sy = canvas.scaleOffsetY,
+ pos = $.event.getPos(e, win);
+ this.pos = {
+ x: (pos.x - p.x - s.width/2 - ox) * 1/sx,
+ y: (pos.y - p.y - s.height/2 - oy) * 1/sy
+ };
+ return this.pos;
+ },
+ getNode: function() {
+ if(this.getNodeCalled) return this.node;
+ this.getNodeCalled = true;
+ for(var id in graph.nodes) {
+ var n = graph.nodes[id],
+ geom = n && ntypes[n.getData('type')],
+ contains = geom && geom.contains && geom.contains.call(fx, n, this.getPos());
+ if(contains) {
+ this.contains = contains;
+ return that.node = this.node = n;
+ }
+ }
+ return that.node = this.node = false;
+ },
+ getEdge: function() {
+ if(this.getEdgeCalled) return this.edge;
+ this.getEdgeCalled = true;
+ var hashset = {};
+ for(var id in graph.edges) {
+ var edgeFrom = graph.edges[id];
+ hashset[id] = true;
+ for(var edgeId in edgeFrom) {
+ if(edgeId in hashset) continue;
+ var e = edgeFrom[edgeId],
+ geom = e && etypes[e.getData('type')],
+ contains = geom && geom.contains && geom.contains.call(fx, e, this.getPos());
+ if(contains) {
+ this.contains = contains;
+ return that.edge = this.edge = e;
+ }
+ }
+ }
+ return that.edge = this.edge = false;
+ },
+ getContains: function() {
+ if(this.getNodeCalled) return this.contains;
+ this.getNode();
+ return this.contains;
+ }
+ };
+ }
+});
+
+/*
+ * Provides the initialization function for <NodeStyles> and <Tips> implemented
+ * by all main visualizations.
+ *
+ */
+var Extras = {
+ initializeExtras: function() {
+ var mem = new MouseEventsManager(this), that = this;
+ $.each(['NodeStyles', 'Tips', 'Navigation', 'Events'], function(k) {
+ var obj = new Extras.Classes[k](k, that);
+ if(obj.isEnabled()) {
+ mem.register(obj);
+ }
+ if(obj.setAsProperty()) {
+ that[k.toLowerCase()] = obj;
+ }
+ });
+ }
+};
+
+Extras.Classes = {};
+/*
+ Class: Events
+
+ This class defines an Event API to be accessed by the user.
+ The methods implemented are the ones defined in the <Options.Events> object.
+*/
+
+Extras.Classes.Events = new Class({
+ Implements: [ExtrasInitializer, EventsInterface],
+
+ initializePost: function() {
+ this.fx = this.viz.fx;
+ this.ntypes = this.viz.fx.nodeTypes;
+ this.etypes = this.viz.fx.edgeTypes;
+
+ this.hovered = false;
+ this.pressed = false;
+ this.touched = false;
+
+ this.touchMoved = false;
+ this.moved = false;
+
+ },
+
+ setAsProperty: $.lambda(true),
+
+ onMouseUp: function(e, win, event, isRightClick) {
+ var evt = $.event.get(e, win);
+ if(!this.moved) {
+ if(isRightClick) {
+ this.config.onRightClick(this.hovered, event, evt);
+ } else {
+ this.config.onClick(this.pressed, event, evt);
+ }
+ }
+ if(this.pressed) {
+ if(this.moved) {
+ this.config.onDragEnd(this.pressed, event, evt);
+ } else {
+ this.config.onDragCancel(this.pressed, event, evt);
+ }
+ this.pressed = this.moved = false;
+ }
+ },
+
+ onMouseOut: function(e, win, event) {
+ //mouseout a label
+ var evt = $.event.get(e, win), label;
+ if(this.dom && (label = this.isLabel(e, win, true))) {
+ this.config.onMouseLeave(this.viz.graph.getNode(label.id),
+ event, evt);
+ this.hovered = false;
+ return;
+ }
+ //mouseout canvas
+ var rt = evt.relatedTarget,
+ canvasWidget = this.canvas.getElement();
+ while(rt && rt.parentNode) {
+ if(canvasWidget == rt.parentNode) return;
+ rt = rt.parentNode;
+ }
+ if(this.hovered) {
+ this.config.onMouseLeave(this.hovered,
+ event, evt);
+ this.hovered = false;
+ }
+ },
+
+ onMouseOver: function(e, win, event) {
+ //mouseover a label
+ var evt = $.event.get(e, win), label;
+ if(this.dom && (label = this.isLabel(e, win, true))) {
+ this.hovered = this.viz.graph.getNode(label.id);
+ this.config.onMouseEnter(this.hovered,
+ event, evt);
+ }
+ },
+
+ onMouseMove: function(e, win, event) {
+ var label, evt = $.event.get(e, win);
+ if(this.pressed) {
+ this.moved = true;
+ this.config.onDragMove(this.pressed, event, evt);
+ return;
+ }
+ if(this.dom) {
+ this.config.onMouseMove(this.hovered,
+ event, evt);
+ } else {
+ if(this.hovered) {
+ var hn = this.hovered;
+ var geom = hn.nodeFrom? this.etypes[hn.getData('type')] : this.ntypes[hn.getData('type')];
+ var contains = geom && geom.contains
+ && geom.contains.call(this.fx, hn, event.getPos());
+ if(contains) {
+ this.config.onMouseMove(hn, event, evt);
+ return;
+ } else {
+ this.config.onMouseLeave(hn, event, evt);
+ this.hovered = false;
+ }
+ }
+ if(this.hovered = (event.getNode() || (this.config.enableForEdges && event.getEdge()))) {
+ this.config.onMouseEnter(this.hovered, event, evt);
+ } else {
+ this.config.onMouseMove(false, event, evt);
+ }
+ }
+ },
+
+ onMouseWheel: function(e, win, delta) {
+ this.config.onMouseWheel(delta, $.event.get(e, win));
+ },
+
+ onMouseDown: function(e, win, event) {
+ var evt = $.event.get(e, win), label;
+ if(this.dom) {
+ if(label = this.isLabel(e, win)) {
+ this.pressed = this.viz.graph.getNode(label.id);
+ }
+ } else {
+ this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge());
+ }
+ this.pressed && this.config.onDragStart(this.pressed, event, evt);
+ },
+
+ onTouchStart: function(e, win, event) {
+ var evt = $.event.get(e, win), label;
+ if(this.dom && (label = this.isLabel(e, win))) {
+ this.touched = this.viz.graph.getNode(label.id);
+ } else {
+ this.touched = event.getNode() || (this.config.enableForEdges && event.getEdge());
+ }
+ this.touched && this.config.onTouchStart(this.touched, event, evt);
+ },
+
+ onTouchMove: function(e, win, event) {
+ var evt = $.event.get(e, win);
+ if(this.touched) {
+ this.touchMoved = true;
+ this.config.onTouchMove(this.touched, event, evt);
+ }
+ },
+
+ onTouchEnd: function(e, win, event) {
+ var evt = $.event.get(e, win);
+ if(this.touched) {
+ if(this.touchMoved) {
+ this.config.onTouchEnd(this.touched, event, evt);
+ } else {
+ this.config.onTouchCancel(this.touched, event, evt);
+ }
+ this.touched = this.touchMoved = false;
+ }
+ }
+});
+
+/*
+ [CODE CUSTOMIZED BY : SACHIN K.]
+
+ [
+ CUSTOMIZATIONS:
+ Method: onMouseOver, onMouseMove
+ In Treemap, display tooltip only if node is not top most parent node
+ i.e. root node of treemap.
+ ]
+
+ Class: Tips
+
+ A class containing tip related functions. This class is used internally.
+
+ Used by:
+
+ <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
+
+ See also:
+
+ <Options.Tips>
+*/
+
+Extras.Classes.Tips = new Class({
+ Implements: [ExtrasInitializer, EventsInterface],
+
+ initializePost: function() {
+ //add DOM tooltip
+ if(document.body) {
+ var tip = $('_tooltip') || document.createElement('div');
+ tip.id = '_tooltip';
+ tip.className = 'tip';
+ $.extend(tip.style, {
+ position: 'absolute',
+ display: 'none',
+ zIndex: 13000
+ });
+ document.body.appendChild(tip);
+ this.tip = tip;
+ this.node = false;
+ }
+ },
+
+ setAsProperty: $.lambda(true),
+
+ onMouseOut: function(e, win) {
+ //mouseout a label
+ var evt = $.event.get(e, win);
+ if(this.dom && this.isLabel(e, win, true)) {
+ this.hide(true);
+ return;
+ }
+ //mouseout canvas
+ var rt = e.relatedTarget,
+ canvasWidget = this.canvas.getElement();
+ while(rt && rt.parentNode) {
+ if(canvasWidget == rt.parentNode) return;
+ rt = rt.parentNode;
+ }
+ this.hide(false);
+ },
+
+ onMouseOver: function(e, win) {
+ //mouseover a label
+ var label;
+ if(this.dom && (label = this.isLabel(e, win, false))) {
+ this.node = this.viz.graph.getNode(label.id);
+ if(this.node._depth != 0){
+ this.config.onShow(this.tip, this.node, label);
+ }else{
+ this.hide(true);
+ }
+ }
+ },
+
+ onMouseMove: function(e, win, opt) {
+ if(this.dom && this.isLabel(e, win)) {
+ if(opt.getNode()._depth != 0){
+ this.setTooltipPosition($.event.getPos(e, win));
+ }else{
+ this.hide(true);
+ }
+ }
+ if(!this.dom) {
+ var node = opt.getNode();
+ if(!node) {
+ this.hide(true);
+ return;
+ }
+ if(this.config.force || !this.node || this.node.id != node.id) {
+ this.node = node;
+ if(opt.getNode()._depth != 0){
+ this.config.onShow(this.tip, node, opt.getContains());
+ }
+ }
+ if(opt.getNode()._depth != 0){
+ this.setTooltipPosition($.event.getPos(e, win));
+ }else{
+ this.hide(true);
+ }
+ }
+ },
+
+ setTooltipPosition: function(pos) {
+ var tip = this.tip,
+ style = tip.style,
+ cont = this.config;
+
+ style.display = '';
+ //get window dimensions
+ var win = {
+ 'height': document.body.clientHeight,
+ 'width': document.body.clientWidth
+ };
+ //get tooltip dimensions
+ var obj = {
+ 'width': tip.offsetWidth,
+ 'height': tip.offsetHeight
+ };
+ //set tooltip position
+ var x = cont.offsetX, y = cont.offsetY;
+ style.top = ((pos.y + y + obj.height > win.height)?
+ (pos.y - obj.height - y) : pos.y + y) + 'px';
+ if(pos.x + obj.width + x > win.width)
+ style.left = pos.x - obj.width - x + 'px';
+ else if(pos.x < obj.width)
+ style.left = pos.x - x + 'px';
+ else
+ style.left = pos.x - obj.width + 'px';
+
+ },
+
+ hide: function(triggerCallback) {
+ this.tip.style.display = 'none';
+ triggerCallback && this.config.onHide();
+ }
+});
+
+/*
+ Class: NodeStyles
+
+ Change node styles when clicking or hovering a node. This class is used internally.
+
+ Used by:
+
+ <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
+
+ See also:
+
+ <Options.NodeStyles>
+*/
+Extras.Classes.NodeStyles = new Class({
+ Implements: [ExtrasInitializer, EventsInterface],
+
+ initializePost: function() {
+ this.fx = this.viz.fx;
+ this.types = this.viz.fx.nodeTypes;
+ this.nStyles = this.config;
+ this.nodeStylesOnHover = this.nStyles.stylesHover;
+ this.nodeStylesOnClick = this.nStyles.stylesClick;
+ this.hoveredNode = false;
+ this.fx.nodeFxAnimation = new Animation();
+
+ this.down = false;
+ this.move = false;
+ },
+
+ onMouseOut: function(e, win) {
+ this.down = this.move = false;
+ if(!this.hoveredNode) return;
+ //mouseout a label
+ if(this.dom && this.isLabel(e, win, true)) {
+ this.toggleStylesOnHover(this.hoveredNode, false);
+ }
+ //mouseout canvas
+ var rt = e.relatedTarget,
+ canvasWidget = this.canvas.getElement();
+ while(rt && rt.parentNode) {
+ if(canvasWidget == rt.parentNode) return;
+ rt = rt.parentNode;
+ }
+ this.toggleStylesOnHover(this.hoveredNode, false);
+ this.hoveredNode = false;
+ },
+
+ onMouseOver: function(e, win) {
+ //mouseover a label
+ var label;
+ if(this.dom && (label = this.isLabel(e, win, true))) {
+ var node = this.viz.graph.getNode(label.id);
+ if(node.selected) return;
+ this.hoveredNode = node;
+ this.toggleStylesOnHover(this.hoveredNode, true);
+ }
+ },
+
+ onMouseDown: function(e, win, event, isRightClick) {
+ if(isRightClick) return;
+ var label;
+ if(this.dom && (label = this.isLabel(e, win))) {
+ this.down = this.viz.graph.getNode(label.id);
+ } else if(!this.dom) {
+ this.down = event.getNode();
+ }
+ this.move = false;
+ },
+
+ onMouseUp: function(e, win, event, isRightClick) {
+ if(isRightClick) return;
+ if(!this.move) {
+ this.onClick(event.getNode());
+ }
+ this.down = this.move = false;
+ },
+
+ getRestoredStyles: function(node, type) {
+ var restoredStyles = {},
+ nStyles = this['nodeStylesOn' + type];
+ for(var prop in nStyles) {
+ restoredStyles[prop] = node.styles['$' + prop];
+ }
+ return restoredStyles;
+ },
+
+ toggleStylesOnHover: function(node, set) {
+ if(this.nodeStylesOnHover) {
+ this.toggleStylesOn('Hover', node, set);
+ }
+ },
+
+ toggleStylesOnClick: function(node, set) {
+ if(this.nodeStylesOnClick) {
+ this.toggleStylesOn('Click', node, set);
+ }
+ },
+
+ toggleStylesOn: function(type, node, set) {
+ var viz = this.viz;
+ var nStyles = this.nStyles;
+ if(set) {
+ var that = this;
+ if(!node.styles) {
+ node.styles = $.merge(node.data, {});
+ }
+ for(var s in this['nodeStylesOn' + type]) {
+ var $s = '$' + s;
+ if(!($s in node.styles)) {
+ node.styles[$s] = node.getData(s);
+ }
+ }
+ viz.fx.nodeFx($.extend({
+ 'elements': {
+ 'id': node.id,
+ 'properties': that['nodeStylesOn' + type]
+ },
+ transition: Trans.Quart.easeOut,
+ duration:300,
+ fps:40
+ }, this.config));
+ } else {
+ var restoredStyles = this.getRestoredStyles(node, type);
+ viz.fx.nodeFx($.extend({
+ 'elements': {
+ 'id': node.id,
+ 'properties': restoredStyles
+ },
+ transition: Trans.Quart.easeOut,
+ duration:300,
+ fps:40
+ }, this.config));
+ }
+ },
+
+ onClick: function(node) {
+ if(!node) return;
+ var nStyles = this.nodeStylesOnClick;
+ if(!nStyles) return;
+ //if the node is selected then unselect it
+ if(node.selected) {
+ this.toggleStylesOnClick(node, false);
+ delete node.selected;
+ } else {
+ //unselect all selected nodes...
+ this.viz.graph.eachNode(function(n) {
+ if(n.selected) {
+ for(var s in nStyles) {
+ n.setData(s, n.styles['$' + s], 'end');
+ }
+ delete n.selected;
+ }
+ });
+ //select clicked node
+ this.toggleStylesOnClick(node, true);
+ node.selected = true;
+ delete node.hovered;
+ this.hoveredNode = false;
+ }
+ },
+
+ onMouseMove: function(e, win, event) {
+ //if mouse button is down and moving set move=true
+ if(this.down) this.move = true;
+ //already handled by mouseover/out
+ if(this.dom && this.isLabel(e, win)) return;
+ var nStyles = this.nodeStylesOnHover;
+ if(!nStyles) return;
+
+ if(!this.dom) {
+ if(this.hoveredNode) {
+ var geom = this.types[this.hoveredNode.getData('type')];
+ var contains = geom && geom.contains && geom.contains.call(this.fx,
+ this.hoveredNode, event.getPos());
+ if(contains) return;
+ }
+ var node = event.getNode();
+ //if no node is being hovered then just exit
+ if(!this.hoveredNode && !node) return;
+ //if the node is hovered then exit
+ if(node.hovered) return;
+ //select hovered node
+ if(node && !node.selected) {
+ //check if an animation is running and exit it
+ this.fx.nodeFxAnimation.stopTimer();
+ //unselect all hovered nodes...
+ this.viz.graph.eachNode(function(n) {
+ if(n.hovered && !n.selected) {
+ for(var s in nStyles) {
+ n.setData(s, n.styles['$' + s], 'end');
+ }
+ delete n.hovered;
+ }
+ });
+ //select hovered node
+ node.hovered = true;
+ this.hoveredNode = node;
+ this.toggleStylesOnHover(node, true);
+ } else if(this.hoveredNode && !this.hoveredNode.selected) {
+ //check if an animation is running and exit it
+ this.fx.nodeFxAnimation.stopTimer();
+ //unselect hovered node
+ this.toggleStylesOnHover(this.hoveredNode, false);
+ delete this.hoveredNode.hovered;
+ this.hoveredNode = false;
+ }
+ }
+ }
+});
+
+Extras.Classes.Navigation = new Class({
+ Implements: [ExtrasInitializer, EventsInterface],
+
+ initializePost: function() {
+ this.pos = false;
+ this.pressed = false;
+ },
+
+ onMouseWheel: function(e, win, scroll) {
+ if(!this.config.zooming) return;
+ $.event.stop($.event.get(e, win));
+ var val = this.config.zooming / 1000,
+ ans = 1 + scroll * val;
+ this.canvas.scale(ans, ans);
+ },
+
+ onMouseDown: function(e, win, eventInfo) {
+ if(!this.config.panning) return;
+ if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
+ this.pressed = true;
+ this.pos = eventInfo.getPos();
+ var canvas = this.canvas,
+ ox = canvas.translateOffsetX,
+ oy = canvas.translateOffsetY,
+ sx = canvas.scaleOffsetX,
+ sy = canvas.scaleOffsetY;
+ this.pos.x *= sx;
+ this.pos.x += ox;
+ this.pos.y *= sy;
+ this.pos.y += oy;
+ },
+
+ onMouseMove: function(e, win, eventInfo) {
+ if(!this.config.panning) return;
+ if(!this.pressed) return;
+ if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
+ var thispos = this.pos,
+ currentPos = eventInfo.getPos(),
+ canvas = this.canvas,
+ ox = canvas.translateOffsetX,
+ oy = canvas.translateOffsetY,
+ sx = canvas.scaleOffsetX,
+ sy = canvas.scaleOffsetY;
+ currentPos.x *= sx;
+ currentPos.y *= sy;
+ currentPos.x += ox;
+ currentPos.y += oy;
+ var x = currentPos.x - thispos.x,
+ y = currentPos.y - thispos.y;
+ this.pos = currentPos;
+ this.canvas.translate(x * 1/sx, y * 1/sy);
+ },
+
+ onMouseUp: function(e, win, eventInfo, isRightClick) {
+ if(!this.config.panning) return;
+ this.pressed = false;
+ }
+});
+
+
+/*
+ * File: Canvas.js
+ *
+ */
+
+/*
+ Class: Canvas
+
+ A canvas widget used by all visualizations. The canvas object can be accessed by doing *viz.canvas*. If you want to
+ know more about <Canvas> options take a look at <Options.Canvas>.
+
+ A canvas widget is a set of DOM elements that wrap the native canvas DOM Element providing a consistent API and behavior
+ across all browsers. It can also include Elements to add DOM (SVG or HTML) label support to all visualizations.
+
+ Example:
+
+ Suppose we have this HTML
+
+ (start code xml)
+ <div id="infovis"></div>
+ (end code)
+
+ Now we create a new Visualization
+
+ (start code js)
+ var viz = new $jit.Viz({
+ //Where to inject the canvas. Any div container will do.
+ 'injectInto':'infovis',
+ //width and height for canvas.
+ //Default's to the container offsetWidth and Height.
+ 'width': 900,
+ 'height':500
+ });
+ (end code)
+
+ The generated HTML will look like this
+
+ (start code xml)
+ <div id="infovis">
+ <div id="infovis-canvaswidget" style="position:relative;">
+ <canvas id="infovis-canvas" width=900 height=500
+ style="position:absolute; top:0; left:0; width:900px; height:500px;" />
+ <div id="infovis-label"
+ style="overflow:visible; position:absolute; top:0; left:0; width:900px; height:0px">
+ </div>
+ </div>
+ </div>
+ (end code)
+
+ As you can see, the generated HTML consists of a canvas DOM Element of id *infovis-canvas* and a div label container
+ of id *infovis-label*, wrapped in a main div container of id *infovis-canvaswidget*.
+ */
+
+var Canvas;
+(function() {
+ //check for native canvas support
+ var canvasType = typeof HTMLCanvasElement,
+ supportsCanvas = (canvasType == 'object' || canvasType == 'function');
+ //create element function
+ function $E(tag, props) {
+ var elem = document.createElement(tag);
+ for(var p in props) {
+ if(typeof props[p] == "object") {
+ $.extend(elem[p], props[p]);
+ } else {
+ elem[p] = props[p];
+ }
+ }
+ if (tag == "canvas" && !supportsCanvas && G_vmlCanvasManager) {
+ elem = G_vmlCanvasManager.initElement(document.body.appendChild(elem));
+ }
+ return elem;
+ }
+ //canvas widget which we will call just Canvas
+ $jit.Canvas = Canvas = new Class({
+ canvases: [],
+ pos: false,
+ element: false,
+ labelContainer: false,
+ translateOffsetX: 0,
+ translateOffsetY: 0,
+ scaleOffsetX: 1,
+ scaleOffsetY: 1,
+
+ initialize: function(viz, opt) {
+ this.viz = viz;
+ this.opt = this.config = opt;
+ var id = $.type(opt.injectInto) == 'string'?
+ opt.injectInto:opt.injectInto.id,
+ type = opt.type,
+ idLabel = id + "-label",
+ wrapper = $(id),
+ width = opt.width || wrapper.offsetWidth,
+ height = opt.height || wrapper.offsetHeight;
+ this.id = id;
+ //canvas options
+ var canvasOptions = {
+ injectInto: id,
+ width: width,
+ height: height
+ };
+ //create main wrapper
+ this.element = $E('div', {
+ 'id': id + '-canvaswidget',
+ 'style': {
+ 'position': 'relative',
+ 'width': width + 'px',
+ 'height': height + 'px'
+ }
+ });
+ //create label container
+ this.labelContainer = this.createLabelContainer(opt.Label.type,
+ idLabel, canvasOptions);
+ //create primary canvas
+ this.canvases.push(new Canvas.Base[type]({
+ config: $.extend({idSuffix: '-canvas'}, canvasOptions),
+ plot: function(base) {
+ viz.fx.plot();
+ },
+ resize: function() {
+ viz.refresh();
+ }
+ }));
+ //create secondary canvas
+ var back = opt.background;
+ if(back) {
+ var backCanvas = new Canvas.Background[back.type](viz, $.extend(back, canvasOptions));
+ this.canvases.push(new Canvas.Base[type](backCanvas));
+ }
+ //insert canvases
+ var len = this.canvases.length;
+ while(len--) {
+ this.element.appendChild(this.canvases[len].canvas);
+ if(len > 0) {
+ this.canvases[len].plot();
+ }
+ }
+ this.element.appendChild(this.labelContainer);
+ wrapper.appendChild(this.element);
+ //Update canvas position when the page is scrolled.
+ var timer = null, that = this;
+ $.addEvent(window, 'scroll', function() {
+ clearTimeout(timer);
+ timer = setTimeout(function() {
+ that.getPos(true); //update canvas position
+ }, 500);
+ });
+ },
+ /*
+ Method: getCtx
+
+ Returns the main canvas context object
+
+ Example:
+
+ (start code js)
+ var ctx = canvas.getCtx();
+ //Now I can use the native canvas context
+ //and for example change some canvas styles
+ ctx.globalAlpha = 1;
+ (end code)
+ */
+ getCtx: function(i) {
+ return this.canvases[i || 0].getCtx();
+ },
+ /*
+ Method: getConfig
+
+ Returns the current Configuration for this Canvas Widget.
+
+ Example:
+
+ (start code js)
+ var config = canvas.getConfig();
+ (end code)
+ */
+ getConfig: function() {
+ return this.opt;
+ },
+ /*
+ Method: getElement
+
+ Returns the main Canvas DOM wrapper
+
+ Example:
+
+ (start code js)
+ var wrapper = canvas.getElement();
+ //Returns <div id="infovis-canvaswidget" ... >...</div> as element
+ (end code)
+ */
+ getElement: function() {
+ return this.element;
+ },
+ /*
+ Method: getSize
+
+ Returns canvas dimensions.
+
+ Returns:
+
+ An object with *width* and *height* properties.
+
+ Example:
+ (start code js)
+ canvas.getSize(); //returns { width: 900, height: 500 }
+ (end code)
+ */
+ getSize: function(i) {
+ return this.canvases[i || 0].getSize();
+ },
+ /*
+ Method: resize
+
+ Resizes the canvas.
+
+ Parameters:
+
+ width - New canvas width.
+ height - New canvas height.
+
+ Example:
+
+ (start code js)
+ canvas.resize(width, height);
+ (end code)
+
+ */
+ resize: function(width, height) {
+ this.getPos(true);
+ this.translateOffsetX = this.translateOffsetY = 0;
+ this.scaleOffsetX = this.scaleOffsetY = 1;
+ for(var i=0, l=this.canvases.length; i<l; i++) {
+ this.canvases[i].resize(width, height);
+ }
+ var style = this.element.style;
+ style.width = width + 'px';
+ style.height = height + 'px';
+ if(this.labelContainer)
+ this.labelContainer.style.width = width + 'px';
+ },
+ /*
+ Method: translate
+
+ Applies a translation to the canvas.
+
+ Parameters:
+
+ x - (number) x offset.
+ y - (number) y offset.
+ disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
+
+ Example:
+
+ (start code js)
+ canvas.translate(30, 30);
+ (end code)
+
+ */
+ translate: function(x, y, disablePlot) {
+ this.translateOffsetX += x*this.scaleOffsetX;
+ this.translateOffsetY += y*this.scaleOffsetY;
+ for(var i=0, l=this.canvases.length; i<l; i++) {
+ this.canvases[i].translate(x, y, disablePlot);
+ }
+ },
+ /*
+ Method: scale
+
+ Scales the canvas.
+
+ Parameters:
+
+ x - (number) scale value.
+ y - (number) scale value.
+ disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
+
+ Example:
+
+ (start code js)
+ canvas.scale(0.5, 0.5);
+ (end code)
+
+ */
+ scale: function(x, y, disablePlot) {
+ var px = this.scaleOffsetX * x,
+ py = this.scaleOffsetY * y;
+ var dx = this.translateOffsetX * (x -1) / px,
+ dy = this.translateOffsetY * (y -1) / py;
+ this.scaleOffsetX = px;
+ this.scaleOffsetY = py;
+ for(var i=0, l=this.canvases.length; i<l; i++) {
+ this.canvases[i].scale(x, y, true);
+ }
+ this.translate(dx, dy, false);
+ },
+ /*
+ Method: getPos
+
+ Returns the canvas position as an *x, y* object.
+
+ Parameters:
+
+ force - (boolean) Default's *false*. Set this to *true* if you want to recalculate the position without using any cache information.
+
+ Returns:
+
+ An object with *x* and *y* properties.
+
+ Example:
+ (start code js)
+ canvas.getPos(true); //returns { x: 900, y: 500 }
+ (end code)
+ */
+ getPos: function(force){
+ if(force || !this.pos) {
+ return this.pos = $.getPos(this.getElement());
+ }
+ return this.pos;
+ },
+ /*
+ Method: clear
+
+ Clears the canvas.
+ */
+ clear: function(i){
+ this.canvases[i||0].clear();
+ },
+
+ path: function(type, action){
+ var ctx = this.canvases[0].getCtx();
+ ctx.beginPath();
+ action(ctx);
+ ctx[type]();
+ ctx.closePath();
+ },
+
+ createLabelContainer: function(type, idLabel, dim) {
+ var NS = 'http://www.w3.org/2000/svg';
+ if(type == 'HTML' || type == 'Native') {
+ return $E('div', {
+ 'id': idLabel,
+ 'style': {
+ 'overflow': 'visible',
+ 'position': 'absolute',
+ 'top': 0,
+ 'left': 0,
+ 'width': dim.width + 'px',
+ 'height': 0
+ }
+ });
+ } else if(type == 'SVG') {
+ var svgContainer = document.createElementNS(NS, 'svg:svg');
+ svgContainer.setAttribute("width", dim.width);
+ svgContainer.setAttribute('height', dim.height);
+ var style = svgContainer.style;
+ style.position = 'absolute';
+ style.left = style.top = '0px';
+ var labelContainer = document.createElementNS(NS, 'svg:g');
+ labelContainer.setAttribute('width', dim.width);
+ labelContainer.setAttribute('height', dim.height);
+ labelContainer.setAttribute('x', 0);
+ labelContainer.setAttribute('y', 0);
+ labelContainer.setAttribute('id', idLabel);
+ svgContainer.appendChild(labelContainer);
+ return svgContainer;
+ }
+ }
+ });
+ //base canvas wrapper
+ Canvas.Base = {};
+ Canvas.Base['2D'] = new Class({
+ translateOffsetX: 0,
+ translateOffsetY: 0,
+ scaleOffsetX: 1,
+ scaleOffsetY: 1,
+
+ initialize: function(viz) {
+ this.viz = viz;
+ this.opt = viz.config;
+ this.size = false;
+ this.createCanvas();
+ this.translateToCenter();
+ },
+ createCanvas: function() {
+ var opt =
<TRUNCATED>