diff --git a/app/assets/images/.DS_Store b/app/assets/images/.DS_Store index a709ceac..c1d168d0 100644 Binary files a/app/assets/images/.DS_Store and b/app/assets/images/.DS_Store differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 6ebaedbd..956d2cb2 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -20,9 +20,6 @@ //= require ./src/Metamaps.Router //= require ./src/Metamaps.Backbone //= require ./src/Metamaps.Views -//= require ./src/JIT -//= require ./src/Metamaps -//= require ./src/Metamaps.JIT //= require_directory ./shims //= require_directory ./require //= require_directory ./famous \ No newline at end of file diff --git a/app/assets/javascripts/pages/Metamaps.Account.js b/app/assets/javascripts/pages/Metamaps.Account.js new file mode 100644 index 00000000..13e45a5a --- /dev/null +++ b/app/assets/javascripts/pages/Metamaps.Account.js @@ -0,0 +1,117 @@ +if (typeof Metamaps === 'undefined') Metamaps = {}; + +Metamaps.Account = { + listenersInitialized: false, + init: function () { + var self = Metamaps.Account; + + + }, + initListeners: function(){ + var self = Metamaps.Account; + + $('#user_image').change(self.showImagePreview); + self.listenersInitialized = true; + }, + toggleChangePicture: function(){ + var self = Metamaps.Account; + + $('.userImageMenu').toggle(); + if (!self.listenersInitialized) self.initListeners(); + }, + openChangePicture: function(){ + var self = Metamaps.Account; + + $('.userImageMenu').show(); + if (!self.listenersInitialized) self.initListeners(); + }, + closeChangePicture: function(){ + var self = Metamaps.Account; + + $('.userImageMenu').hide(); + }, + showLoading: function(){ + var self = Metamaps.Account; + + var loader = new CanvasLoader('accountPageLoading'); + loader.setColor('#4FC059'); // default is '#000000' + loader.setDiameter(28); // default is 40 + loader.setDensity(41); // default is 40 + loader.setRange(0.9); // default is 1.3 + loader.show(); // Hidden by default + $('#accountPageLoading').show(); + }, + showImagePreview: function(){ + var self = Metamaps.Account; + + var file = $('#user_image')[0].files[0]; + + var reader = new FileReader(); + + reader.onload = function(e) { + var $canvas = $('').attr({ + width: 84, + height: 84 + }); + var context = $canvas[0].getContext('2d'); + var imageObj = new Image(); + + imageObj.onload = function() { + $('.userImageDiv canvas').remove(); + $('.userImageDiv img').hide(); + + var imgWidth = imageObj.width; + var imgHeight = imageObj.height; + + var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth; + // draw cropped image + var nonZero = Math.abs(imgHeight - imgWidth) / 2; + var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero; + var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero; + var sourceWidth = dimensionToMatch; + var sourceHeight = dimensionToMatch; + var destX = 0; + var destY = 0; + var destWidth = 84; + var destHeight = 84; + + context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); + $('.userImageDiv').prepend($canvas); + }; + imageObj.src = reader.result; + }; + + if (file) { + reader.readAsDataURL(file); + $('.userImageMenu').hide(); + $('#remove_image').val('0'); + } + }, + removePicture: function(){ + var self = Metamaps.Account; + + $('.userImageDiv canvas').remove(); + $('.userImageDiv img').attr('src', '/assets/user.png').show(); + $('.userImageMenu').hide(); + + var input = $('#user_image'); + input.replaceWith(input.val('').clone(true)); + $('#remove_image').val('1'); + }, + changeName: function(){ + $('.accountName').hide(); + $('.changeName').show(); + }, + showPass: function(){ + $(".toHide").show(); + $(".changePass").hide(); + }, + hidePass: function(){ + $(".toHide").hide(); + $(".changePass").show(); + + $('#current_password').val(''); + $('#user_password').val(''); + $('#user_password_confirmation').val(''); + } +}; \ No newline at end of file diff --git a/app/assets/javascripts/pages/Metamaps.Admin.js b/app/assets/javascripts/pages/Metamaps.Admin.js new file mode 100644 index 00000000..6ddce710 --- /dev/null +++ b/app/assets/javascripts/pages/Metamaps.Admin.js @@ -0,0 +1,48 @@ +if (typeof Metamaps === 'undefined') Metamaps = {}; + +Metamaps.Admin = { + selectMetacodes: [], + allMetacodes: [], + init: function () { + var self = Metamaps.Admin; + + $('#metacodes_value').val(self.selectMetacodes.toString()); + }, + selectAll: function () { + var self = Metamaps.Admin; + + $('.editMetacodes li').removeClass('toggledOff'); + self.selectMetacodes = self.allMetacodes.slice(0); + $('#metacodes_value').val(self.selectMetacodes.toString()); + }, + deselectAll: function () { + var self = Metamaps.Admin; + + $('.editMetacodes li').addClass('toggledOff'); + self.selectMetacodes = []; + $('#metacodes_value').val(0); + }, + liClickHandler: function () { + var self = Metamaps.Admin; + + if ($(this).attr('class') != 'toggledOff') { + $(this).addClass('toggledOff'); + var value_to_remove = $(this).attr('id'); + self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1); + $('#metacodes_value').val(self.selectMetacodes.toString()); + } + else if ($(this).attr('class') == 'toggledOff') { + $(this).removeClass('toggledOff'); + self.selectMetacodes.push($(this).attr('id')); + $('#metacodes_value').val(self.selectMetacodes.toString()); + } + }, + validate: function () { + var self = Metamaps.Admin; + + if (self.selectMetacodes.length == 0) { + alert('Would you pretty please select at least one metacode for the set?'); + return false; + } + } +}; \ No newline at end of file diff --git a/app/assets/javascripts/src/JIT.js b/app/assets/javascripts/src/JIT.js deleted file mode 100644 index e1a461ec..00000000 --- a/app/assets/javascripts/src/JIT.js +++ /dev/null @@ -1,11212 +0,0 @@ -/* -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. - - */ - (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 - . Copyright (c) 2006-2010 Valerio Proietti, . - MIT license . - - 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> 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 . - 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 . - 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 . - 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 . - 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 . - 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 object. - - Used by: - - - - Based on: - - The Animation class is based in the MooTools Framework . Copyright (c) 2006-2009 Valerio Proietti, . MIT license . - -*/ - -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 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.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 . - 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 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 visualization, these parameters are used for aligning nodes when some of they dimensions vary. - angularWidth - (number) Default's *1*. Used in radial layouts (like or visualizations). The amount of relative 'space' set for a node. - span - (number) Default's *1*. Used in radial layouts (like or 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 . - 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 . 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 . Copyright (c) 2006-2010 Valerio Proietti, . MIT license . - - -*/ -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 . - 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 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 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 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 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 '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 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 for more details). The default 'auto' value will set NodeStyles to the same type defined for . - stylesHover - (boolean|object) Default's *false*. An object with node styles just like the ones defined for or *false* otherwise. - stylesClick - (boolean|object) Default's *false*. An object with node styles just like the ones defined for 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 *type* parameter decide this. - onClick(node, eventInfo, e) - Triggered when a user performs a click in the canvas. *node* is the 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 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 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 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 '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 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 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 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 that wasn't dragged (i.e. the user didn't perform any mouse movement after pressing the mouse button). *node* is the 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 (, and ). - - 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 *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 . - 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 (, and ). - - 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 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 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 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 . This method is useful for changing a node style right before plotting it. - onAfterPlotNode(node) - This method is triggered right after plotting each . - onBeforePlotLine(adj) - This method is triggered right before plotting a . 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 . - - *Used in , and 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 and 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, and 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 and 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 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) { - - // START METAMAPS CODE - var evt = $.event.get(e, win); - this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge()); - // END METAMAPS CODE - // ORIGINAL CODE - /*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; - } - } -}); - -/* - Class: Tips - - A class containing tip related functions. This class is used internally. - - Used by: - - , , , , , , - - See also: - - -*/ - -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); - this.config.onShow(this.tip, this.node, label); - } - }, - - onMouseMove: function(e, win, opt) { - if(this.dom && this.isLabel(e, win)) { - this.setTooltipPosition($.event.getPos(e, win)); - } - 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; - this.config.onShow(this.tip, node, opt.getContains()); - } - this.setTooltipPosition($.event.getPos(e, win)); - } - }, - - 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'; - style.left = ((pos.x + obj.width + x > win.width)? - (pos.x - obj.width - x) : pos.x + x) + '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: - - , , , , , , - - See also: - - -*/ -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; - - // START METAMAPS CODE - if (e.target.id != 'infovis-canvas') return; - if (Metamaps.Create.newTopic.beingCreated) return; - // END METAMAPS CODE - - //$.event.stop($.event.get(e, win)); - // END METAMAPS CODE - // ORIGINAL CODE $.event.stop($.event.get(e, win)); - - var val = this.config.zooming / 1000, - ans = 1 + scroll * val; - - // START METAMAPS CODE - if (ans > 1) { - if (5 >= this.canvas.scaleOffsetX) { - this.canvas.scale(ans, ans); - } - } - else if (ans < 1) { - if (this.canvas.scaleOffsetX >= 0.2) { - this.canvas.scale(ans, ans); - } - } - // END METAMAPS CODE - // ORIGINAL CODE this.canvas.scale(ans, ans); - - // START METAMAPS CODE - jQuery(document).trigger(Metamaps.JIT.events.zoom, [e]); - // END METAMAPS CODE - }, - - onMouseDown: function(e, win, eventInfo) { - ///console.log('mouse down!!!!'); - if(!this.config.panning) return; - - //START METAMAPS CODE - Metamaps.Mouse.changeInX = 0; - Metamaps.Mouse.changeInY = 0; - if((this.config.panning == 'avoid nodes' && eventInfo.getNode()) || eventInfo.getEdge()) return; - // END METAMAPS CODE - // ORIGINAl CODE if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return; - - this.pressed = true; - - //START METAMAPS CODE - var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); - // TODO make sure this works across browsers - if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || rightClick)) { - Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos(); - //console.log('mouse down'); - } - - Metamaps.Mouse.didPan = false; - - - - // END METAMAPS CODE - - 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; - - // START METAMAPS CODE - var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); - if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || rightClick)) { - Metamaps.Visualize.mGraph.busy = true; - Metamaps.boxStartCoordinates = eventInfo.getPos(); - //console.log('mouse move'); - return; - } - if (Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || rightClick)) { - Metamaps.Visualize.mGraph.busy = true; - Metamaps.JIT.drawSelectBox(eventInfo,e); - //console.log('mouse move'); - return; - } - if (rightClick){ - return; - } - if (e.target.id != 'infovis-canvas') { - this.pressed = false; - return; - } - Metamaps.Mouse.didPan = true; - // END METAMAPS CODE - - 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; - - // START METAMAPS CODE - Metamaps.Mouse.changeInX = x; - Metamaps.Mouse.changeInY = y; - // END METAMAPS CODE - - this.pos = currentPos; - this.canvas.translate(x * 1/sx, y * 1/sy); - - // START METAMAPS CODE - jQuery(document).trigger(Metamaps.JIT.events.pan); - // END METAMAPS CODE - }, - - onMouseUp: function(e, win, eventInfo, isRightClick) { - if(!this.config.panning) return; - this.pressed = false; - - // START METAMAPS CODE - if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning(); - - - // END METAMAPS CODE - - } -}); - - -/* - * 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 options take a look at . - - 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) -
- (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) -
-
- -
-
-
-
- (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", - // ORIGINAL CODE wrapper = $(id), - // START METAMAPS CODE - //wrapper = Metamaps.Famous.viz.surf, - // END METAMAPS CODE - 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); - - // START METAMAPS CODE - var m = Metamaps.Famous.viz.surf; - m.setContent(this.element); - m.deploy(m._currTarget); - - // END METAMAPS CODE - // ORIGINAL CODE 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
...
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 class. - * - * Description: - * - * The class, just like the class, is used by the , and as a 2D point representation. - * - * See also: - * - * - * -*/ - -/* - Class: Polar - - A multi purpose polar representation. - - Description: - - The class, just like the class, is used by the , and as a 2D point representation. - - See also: - - - - Parameters: - - theta - An angle. - rho - The norm. -*/ - -var Polar = function(theta, rho) { - this.theta = theta || 0; - this.rho = rho || 0; -}; - -$jit.Polar = Polar; - -Polar.prototype = { - /* - Method: getc - - Returns a complex number. - - Parameters: - - simple - _optional_ If *true*, this method will return only an object holding x and y properties and not a instance. Default's *false*. - - Returns: - - A complex number. - */ - getc: function(simple) { - return this.toComplex(simple); - }, - - /* - Method: getp - - Returns a representation. - - Returns: - - A variable in polar coordinates. - */ - getp: function() { - return this; - }, - - - /* - Method: set - - Sets a number. - - Parameters: - - v - A or instance. - - */ - set: function(v) { - v = v.getp(); - this.theta = v.theta; this.rho = v.rho; - }, - - /* - Method: setc - - Sets a number. - - Parameters: - - x - A number real part. - y - A number imaginary part. - - */ - setc: function(x, y) { - this.rho = Math.sqrt(x * x + y * y); - this.theta = Math.atan2(y, x); - if(this.theta < 0) this.theta += Math.PI * 2; - }, - - /* - Method: setp - - Sets a polar number. - - Parameters: - - theta - A number angle property. - rho - A number rho property. - - */ - setp: function(theta, rho) { - this.theta = theta; - this.rho = rho; - }, - - /* - Method: clone - - Returns a copy of the current object. - - Returns: - - A copy of the real object. - */ - clone: function() { - return new Polar(this.theta, this.rho); - }, - - /* - Method: toComplex - - Translates from polar to cartesian coordinates and returns a new instance. - - Parameters: - - simple - _optional_ If *true* this method will only return an object with x and y properties (and not the whole instance). Default's *false*. - - Returns: - - A new instance. - */ - toComplex: function(simple) { - var x = Math.cos(this.theta) * this.rho; - var y = Math.sin(this.theta) * this.rho; - if(simple) return { 'x': x, 'y': y}; - return new Complex(x, y); - }, - - /* - Method: add - - Adds two instances. - - Parameters: - - polar - A number. - - Returns: - - A new Polar instance. - */ - add: function(polar) { - return new Polar(this.theta + polar.theta, this.rho + polar.rho); - }, - - /* - Method: scale - - Scales a polar norm. - - Parameters: - - number - A scale factor. - - Returns: - - A new Polar instance. - */ - scale: function(number) { - return new Polar(this.theta, this.rho * number); - }, - - /* - Method: equals - - Comparison method. - - Returns *true* if the theta and rho properties are equal. - - Parameters: - - c - A number. - - Returns: - - *true* if the theta and rho parameters for these objects are equal. *false* otherwise. - */ - equals: function(c) { - return this.theta == c.theta && this.rho == c.rho; - }, - - /* - Method: $add - - Adds two instances affecting the current object. - - Paramters: - - polar - A instance. - - Returns: - - The changed object. - */ - $add: function(polar) { - this.theta = this.theta + polar.theta; this.rho += polar.rho; - return this; - }, - - /* - Method: $madd - - Adds two instances affecting the current object. The resulting theta angle is modulo 2pi. - - Parameters: - - polar - A instance. - - Returns: - - The changed object. - */ - $madd: function(polar) { - this.theta = (this.theta + polar.theta) % (Math.PI * 2); this.rho += polar.rho; - return this; - }, - - - /* - Method: $scale - - Scales a polar instance affecting the object. - - Parameters: - - number - A scaling factor. - - Returns: - - The changed object. - */ - $scale: function(number) { - this.rho *= number; - return this; - }, - - /* - Method: isZero - - Returns *true* if the number is zero. - - */ - isZero: function () { - var almostZero = 0.0001, abs = Math.abs; - return abs(this.theta) < almostZero && abs(this.rho) < almostZero; - }, - - /* - Method: interpolate - - Calculates a polar interpolation between two points at a given delta moment. - - Parameters: - - elem - A instance. - delta - A delta factor ranging [0, 1]. - - Returns: - - A new instance representing an interpolation between _this_ and _elem_ - */ - interpolate: function(elem, delta) { - var pi = Math.PI, pi2 = pi * 2; - var ch = function(t) { - var a = (t < 0)? (t % pi2) + pi2 : t % pi2; - return a; - }; - var tt = this.theta, et = elem.theta; - var sum, diff = Math.abs(tt - et); - if(diff == pi) { - if(tt > et) { - sum = ch((et + ((tt - pi2) - et) * delta)) ; - } else { - sum = ch((et - pi2 + (tt - (et)) * delta)); - } - } else if(diff >= pi) { - if(tt > et) { - sum = ch((et + ((tt - pi2) - et) * delta)) ; - } else { - sum = ch((et - pi2 + (tt - (et - pi2)) * delta)); - } - } else { - sum = ch((et + (tt - et) * delta)) ; - } - var r = (this.rho - elem.rho) * delta + elem.rho; - return { - 'theta': sum, - 'rho': r - }; - } -}; - - -var $P = function(a, b) { return new Polar(a, b); }; - -Polar.KER = $P(0, 0); - - - -/* - * File: Complex.js - * - * Defines the class. - * - * Description: - * - * The class, just like the class, is used by the , and as a 2D point representation. - * - * See also: - * - * - * -*/ - -/* - Class: Complex - - A multi-purpose Complex Class with common methods. - - Description: - - The class, just like the class, is used by the , and as a 2D point representation. - - See also: - - - - Parameters: - - x - _optional_ A Complex number real part. - y - _optional_ A Complex number imaginary part. - -*/ - -var Complex = function(x, y) { - this.x = x || 0; - this.y = y || 0; -}; - -$jit.Complex = Complex; - -Complex.prototype = { - /* - Method: getc - - Returns a complex number. - - Returns: - - A complex number. - */ - getc: function() { - return this; - }, - - /* - Method: getp - - Returns a representation of this number. - - Parameters: - - simple - _optional_ If *true*, this method will return only an object holding theta and rho properties and not a instance. Default's *false*. - - Returns: - - A variable in coordinates. - */ - getp: function(simple) { - return this.toPolar(simple); - }, - - - /* - Method: set - - Sets a number. - - Parameters: - - c - A or instance. - - */ - set: function(c) { - c = c.getc(true); - this.x = c.x; - this.y = c.y; - }, - - /* - Method: setc - - Sets a complex number. - - Parameters: - - x - A number Real part. - y - A number Imaginary part. - - */ - setc: function(x, y) { - this.x = x; - this.y = y; - }, - - /* - Method: setp - - Sets a polar number. - - Parameters: - - theta - A number theta property. - rho - A number rho property. - - */ - setp: function(theta, rho) { - this.x = Math.cos(theta) * rho; - this.y = Math.sin(theta) * rho; - }, - - /* - Method: clone - - Returns a copy of the current object. - - Returns: - - A copy of the real object. - */ - clone: function() { - return new Complex(this.x, this.y); - }, - - /* - Method: toPolar - - Transforms cartesian to polar coordinates. - - Parameters: - - simple - _optional_ If *true* this method will only return an object with theta and rho properties (and not the whole instance). Default's *false*. - - Returns: - - A new instance. - */ - - toPolar: function(simple) { - var rho = this.norm(); - var atan = Math.atan2(this.y, this.x); - if(atan < 0) atan += Math.PI * 2; - if(simple) return { 'theta': atan, 'rho': rho }; - return new Polar(atan, rho); - }, - /* - Method: norm - - Calculates a number norm. - - Returns: - - A real number representing the complex norm. - */ - norm: function () { - return Math.sqrt(this.squaredNorm()); - }, - - /* - Method: squaredNorm - - Calculates a number squared norm. - - Returns: - - A real number representing the complex squared norm. - */ - squaredNorm: function () { - return this.x*this.x + this.y*this.y; - }, - - /* - Method: add - - Returns the result of adding two complex numbers. - - Does not alter the original object. - - Parameters: - - pos - A instance. - - Returns: - - The result of adding two complex numbers. - */ - add: function(pos) { - return new Complex(this.x + pos.x, this.y + pos.y); - }, - - /* - Method: prod - - Returns the result of multiplying two numbers. - - Does not alter the original object. - - Parameters: - - pos - A instance. - - Returns: - - The result of multiplying two complex numbers. - */ - prod: function(pos) { - return new Complex(this.x*pos.x - this.y*pos.y, this.y*pos.x + this.x*pos.y); - }, - - /* - Method: conjugate - - Returns the conjugate of this number. - - Does not alter the original object. - - Returns: - - The conjugate of this number. - */ - conjugate: function() { - return new Complex(this.x, -this.y); - }, - - - /* - Method: scale - - Returns the result of scaling a instance. - - Does not alter the original object. - - Parameters: - - factor - A scale factor. - - Returns: - - The result of scaling this complex to a factor. - */ - scale: function(factor) { - return new Complex(this.x * factor, this.y * factor); - }, - - /* - Method: equals - - Comparison method. - - Returns *true* if both real and imaginary parts are equal. - - Parameters: - - c - A instance. - - Returns: - - A boolean instance indicating if both numbers are equal. - */ - equals: function(c) { - return this.x == c.x && this.y == c.y; - }, - - /* - Method: $add - - Returns the result of adding two numbers. - - Alters the original object. - - Parameters: - - pos - A instance. - - Returns: - - The result of adding two complex numbers. - */ - $add: function(pos) { - this.x += pos.x; this.y += pos.y; - return this; - }, - - /* - Method: $prod - - Returns the result of multiplying two numbers. - - Alters the original object. - - Parameters: - - pos - A instance. - - Returns: - - The result of multiplying two complex numbers. - */ - $prod:function(pos) { - var x = this.x, y = this.y; - this.x = x*pos.x - y*pos.y; - this.y = y*pos.x + x*pos.y; - return this; - }, - - /* - Method: $conjugate - - Returns the conjugate for this . - - Alters the original object. - - Returns: - - The conjugate for this complex. - */ - $conjugate: function() { - this.y = -this.y; - return this; - }, - - /* - Method: $scale - - Returns the result of scaling a instance. - - Alters the original object. - - Parameters: - - factor - A scale factor. - - Returns: - - The result of scaling this complex to a factor. - */ - $scale: function(factor) { - this.x *= factor; this.y *= factor; - return this; - }, - - /* - Method: $div - - Returns the division of two numbers. - - Alters the original object. - - Parameters: - - pos - A number. - - Returns: - - The result of scaling this complex to a factor. - */ - $div: function(pos) { - var x = this.x, y = this.y; - var sq = pos.squaredNorm(); - this.x = x * pos.x + y * pos.y; this.y = y * pos.x - x * pos.y; - return this.$scale(1 / sq); - }, - - /* - Method: isZero - - Returns *true* if the number is zero. - - */ - isZero: function () { - var almostZero = 0.0001, abs = Math.abs; - return abs(this.x) < almostZero && abs(this.y) < almostZero; - } -}; - -var $C = function(a, b) { return new Complex(a, b); }; - -Complex.KER = $C(0, 0); - - - -/* - * File: Graph.js - * -*/ - -/* - Class: Graph - - A Graph Class that provides useful manipulation functions. You can find more manipulation methods in the object. - - An instance of this class can be accessed by using the *graph* parameter of any tree or graph visualization. - - Example: - - (start code js) - //create new visualization - var viz = new $jit.Viz(options); - //load JSON data - viz.loadJSON(json); - //access model - viz.graph; // instance - (end code) - - Implements: - - The following methods are implemented in - - - - - - - - - - - - - - - - -*/ - -$jit.Graph = new Class({ - - initialize: function(opt, Node, Edge, Label) { - var innerOptions = { - 'klass': Complex, - 'Node': {} - }; - this.Node = Node; - this.Edge = Edge; - this.Label = Label; - this.opt = $.merge(innerOptions, opt || {}); - this.nodes = {}; - this.edges = {}; - - //add nodeList methods - var that = this; - this.nodeList = {}; - for(var p in Accessors) { - that.nodeList[p] = (function(p) { - return function() { - var args = Array.prototype.slice.call(arguments); - that.eachNode(function(n) { - n[p].apply(n, args); - }); - }; - })(p); - } - - }, - -/* - Method: getNode - - Returns a by *id*. - - Parameters: - - id - (string) A id. - - Example: - - (start code js) - var node = graph.getNode('nodeId'); - (end code) -*/ - getNode: function(id) { - if(this.hasNode(id)) return this.nodes[id]; - return false; - }, - - /* - Method: get - - An alias for . Returns a node by *id*. - - Parameters: - - id - (string) A id. - - Example: - - (start code js) - var node = graph.get('nodeId'); - (end code) -*/ - get: function(id) { - return this.getNode(id); - }, - - /* - Method: getByName - - Returns a by *name*. - - Parameters: - - name - (string) A name. - - Example: - - (start code js) - var node = graph.getByName('someName'); - (end code) - */ - getByName: function(name) { - for(var id in this.nodes) { - var n = this.nodes[id]; - if(n.name == name) return n; - } - return false; - }, - -/* - Method: getAdjacence - - Returns a object connecting nodes with ids *id* and *id2*. - - Parameters: - - id - (string) A id. - id2 - (string) A id. -*/ - getAdjacence: function (id, id2) { - if(id in this.edges) { - return this.edges[id][id2]; - } - return false; - }, - - /* - Method: addNode - - Adds a node. - - Parameters: - - obj - An object with the properties described below - - id - (string) A node id - name - (string) A node's name - data - (object) A node's data hash - - See also: - - - */ - addNode: function(obj) { - if(!this.nodes[obj.id]) { - var edges = this.edges[obj.id] = {}; - this.nodes[obj.id] = new Graph.Node($.extend({ - 'id': obj.id, - 'name': obj.name, - 'data': $.merge(obj.data || {}, {}), - 'adjacencies': edges - }, this.opt.Node), - this.opt.klass, - this.Node, - this.Edge, - this.Label); - } - return this.nodes[obj.id]; - }, - - /* - Method: addAdjacence - - Connects nodes specified by *obj* and *obj2*. If not found, nodes are created. - - Parameters: - - obj - (object) A object. - obj2 - (object) Another object. - data - (object) A data object. Used to store some extra information in the object created. - - See also: - - , - */ - addAdjacence: function (obj, obj2, data) { - if(!this.hasNode(obj.id)) { this.addNode(obj); } - if(!this.hasNode(obj2.id)) { this.addNode(obj2); } - obj = this.nodes[obj.id]; obj2 = this.nodes[obj2.id]; - if(!obj.adjacentTo(obj2)) { - var adjsObj = this.edges[obj.id] = this.edges[obj.id] || {}; - var adjsObj2 = this.edges[obj2.id] = this.edges[obj2.id] || {}; - adjsObj[obj2.id] = adjsObj2[obj.id] = new Graph.Adjacence(obj, obj2, data, this.Edge, this.Label); - return adjsObj[obj2.id]; - } - return this.edges[obj.id][obj2.id]; - }, - - /* - Method: removeNode - - Removes a matching the specified *id*. - - Parameters: - - id - (string) A node's id. - - */ - removeNode: function(id) { - if(this.hasNode(id)) { - delete this.nodes[id]; - var adjs = this.edges[id]; - for(var to in adjs) { - delete this.edges[to][id]; - } - delete this.edges[id]; - } - }, - -/* - Method: removeAdjacence - - Removes a matching *id1* and *id2*. - - Parameters: - - id1 - (string) A id. - id2 - (string) A id. -*/ - removeAdjacence: function(id1, id2) { - delete this.edges[id1][id2]; - delete this.edges[id2][id1]; - }, - - /* - Method: hasNode - - Returns a boolean indicating if the node belongs to the or not. - - Parameters: - - id - (string) Node id. - */ - hasNode: function(id) { - return id in this.nodes; - }, - - /* - Method: empty - - Empties the Graph - - */ - empty: function() { this.nodes = {}; this.edges = {};} - -}); - -var Graph = $jit.Graph; - -/* - Object: Accessors - - Defines a set of methods for data, canvas and label styles manipulation implemented by and instances. - - */ -var Accessors; - -(function () { - var getDataInternal = function(prefix, prop, type, force, prefixConfig) { - var data; - type = type || 'current'; - prefix = "$" + (prefix ? prefix + "-" : ""); - - if(type == 'current') { - data = this.data; - } else if(type == 'start') { - data = this.startData; - } else if(type == 'end') { - data = this.endData; - } - - var dollar = prefix + prop; - - if(force) { - return data[dollar]; - } - - if(!this.Config.overridable) - return prefixConfig[prop] || 0; - - return (dollar in data) ? - data[dollar] : ((dollar in this.data) ? this.data[dollar] : (prefixConfig[prop] || 0)); - } - - var setDataInternal = function(prefix, prop, value, type) { - type = type || 'current'; - prefix = '$' + (prefix ? prefix + '-' : ''); - - var data; - - if(type == 'current') { - data = this.data; - } else if(type == 'start') { - data = this.startData; - } else if(type == 'end') { - data = this.endData; - } - - data[prefix + prop] = value; - } - - var removeDataInternal = function(prefix, properties) { - prefix = '$' + (prefix ? prefix + '-' : ''); - var that = this; - $.each(properties, function(prop) { - var pref = prefix + prop; - delete that.data[pref]; - delete that.endData[pref]; - delete that.startData[pref]; - }); - } - - Accessors = { - /* - Method: getData - - Returns the specified data value property. - This is useful for querying special/reserved data properties - (i.e dollar prefixed properties). - - Parameters: - - prop - (string) The name of the property. The dollar sign is not needed. For - example *getData(width)* will return *data.$width*. - type - (string) The type of the data property queried. Default's "current". You can access *start* and *end* - data properties also. These properties are used when making animations. - force - (boolean) Whether to obtain the true value of the property (equivalent to - *data.$prop*) or to check for *node.overridable = true* first. - - Returns: - - The value of the dollar prefixed property or the global Node/Edge property - value if *overridable=false* - - Example: - (start code js) - node.getData('width'); //will return node.data.$width if Node.overridable=true; - (end code) - */ - getData: function(prop, type, force) { - return getDataInternal.call(this, "", prop, type, force, this.Config); - }, - - - /* - Method: setData - - Sets the current data property with some specific value. - This method is only useful for reserved (dollar prefixed) properties. - - Parameters: - - prop - (string) The name of the property. The dollar sign is not necessary. For - example *setData(width)* will set *data.$width*. - value - (mixed) The value to store. - type - (string) The type of the data property to store. Default's "current" but - can also be "start" or "end". - - Example: - - (start code js) - node.setData('width', 30); - (end code) - - If we were to make an animation of a node/edge width then we could do - - (start code js) - var node = viz.getNode('nodeId'); - //set start and end values - node.setData('width', 10, 'start'); - node.setData('width', 30, 'end'); - //will animate nodes width property - viz.fx.animate({ - modes: ['node-property:width'], - duration: 1000 - }); - (end code) - */ - setData: function(prop, value, type) { - setDataInternal.call(this, "", prop, value, type); - }, - - /* - Method: setDataset - - Convenience method to set multiple data values at once. - - Parameters: - - types - (array|string) A set of 'current', 'end' or 'start' values. - obj - (object) A hash containing the names and values of the properties to be altered. - - Example: - (start code js) - node.setDataset(['current', 'end'], { - 'width': [100, 5], - 'color': ['#fff', '#ccc'] - }); - //...or also - node.setDataset('end', { - 'width': 5, - 'color': '#ccc' - }); - (end code) - - See also: - - - - */ - setDataset: function(types, obj) { - types = $.splat(types); - for(var attr in obj) { - for(var i=0, val = $.splat(obj[attr]), l=types.length; i canvas style data properties (i.e. - dollar prefixed properties that match with $canvas-). - - Parameters: - - prop - (string) The name of the property. The dollar sign is not needed. For - example *getCanvasStyle(shadowBlur)* will return *data[$canvas-shadowBlur]*. - type - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* - data properties also. - - Example: - (start code js) - node.getCanvasStyle('shadowBlur'); - (end code) - - See also: - - - */ - getCanvasStyle: function(prop, type, force) { - return getDataInternal.call( - this, 'canvas', prop, type, force, this.Config.CanvasStyles); - }, - - /* - Method: setCanvasStyle - - Sets the canvas style data property with some specific value. - This method is only useful for reserved (dollar prefixed) properties. - - Parameters: - - prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc. - value - (mixed) The value to set to the property. - type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties. - - Example: - - (start code js) - node.setCanvasStyle('shadowBlur', 30); - (end code) - - If we were to make an animation of a node/edge shadowBlur canvas style then we could do - - (start code js) - var node = viz.getNode('nodeId'); - //set start and end values - node.setCanvasStyle('shadowBlur', 10, 'start'); - node.setCanvasStyle('shadowBlur', 30, 'end'); - //will animate nodes canvas style property for nodes - viz.fx.animate({ - modes: ['node-style:shadowBlur'], - duration: 1000 - }); - (end code) - - See also: - - . - */ - setCanvasStyle: function(prop, value, type) { - setDataInternal.call(this, 'canvas', prop, value, type); - }, - - /* - Method: setCanvasStyles - - Convenience method to set multiple styles at once. - - Parameters: - - types - (array|string) A set of 'current', 'end' or 'start' values. - obj - (object) A hash containing the names and values of the properties to be altered. - - See also: - - . - */ - setCanvasStyles: function(types, obj) { - types = $.splat(types); - for(var attr in obj) { - for(var i=0, val = $.splat(obj[attr]), l=types.length; i. - */ - removeCanvasStyle: function() { - removeDataInternal.call(this, 'canvas', Array.prototype.slice.call(arguments)); - }, - - /* - Method: getLabelData - - Returns the specified label data value property. This is useful for - querying special/reserved label options (i.e. - dollar prefixed properties that match with $label-). - - Parameters: - - prop - (string) The name of the property. The dollar sign prefix is not needed. For - example *getLabelData(size)* will return *data[$label-size]*. - type - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* - data properties also. - - See also: - - . - */ - getLabelData: function(prop, type, force) { - return getDataInternal.call( - this, 'label', prop, type, force, this.Label); - }, - - /* - Method: setLabelData - - Sets the current label data with some specific value. - This method is only useful for reserved (dollar prefixed) properties. - - Parameters: - - prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc. - value - (mixed) The value to set to the property. - type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties. - - Example: - - (start code js) - node.setLabelData('size', 30); - (end code) - - If we were to make an animation of a node label size then we could do - - (start code js) - var node = viz.getNode('nodeId'); - //set start and end values - node.setLabelData('size', 10, 'start'); - node.setLabelData('size', 30, 'end'); - //will animate nodes label size - viz.fx.animate({ - modes: ['label-property:size'], - duration: 1000 - }); - (end code) - - See also: - - . - */ - setLabelData: function(prop, value, type) { - setDataInternal.call(this, 'label', prop, value, type); - }, - - /* - Method: setLabelDataset - - Convenience function to set multiple label data at once. - - Parameters: - - types - (array|string) A set of 'current', 'end' or 'start' values. - obj - (object) A hash containing the names and values of the properties to be altered. - - See also: - - . - */ - setLabelDataset: function(types, obj) { - types = $.splat(types); - for(var attr in obj) { - for(var i=0, val = $.splat(obj[attr]), l=types.length; i. - */ - removeLabelData: function() { - removeDataInternal.call(this, 'label', Array.prototype.slice.call(arguments)); - } - }; -})(); - -/* - Class: Graph.Node - - A node. - - Implements: - - methods. - - The following methods are implemented by - - - - - - - - - - - - - - - - - -*/ -Graph.Node = new Class({ - - initialize: function(opt, klass, Node, Edge, Label) { - var innerOptions = { - 'id': '', - 'name': '', - 'data': {}, - 'startData': {}, - 'endData': {}, - 'adjacencies': {}, - - 'selected': false, - 'drawn': false, - 'exist': false, - - 'angleSpan': { - 'begin': 0, - 'end' : 0 - }, - - 'pos': new klass, - 'startPos': new klass, - 'endPos': new klass - }; - - $.extend(this, $.extend(innerOptions, opt)); - this.Config = this.Node = Node; - this.Edge = Edge; - this.Label = Label; - }, - - /* - Method: adjacentTo - - Indicates if the node is adjacent to the node specified by id - - Parameters: - - id - (string) A node id. - - Example: - (start code js) - node.adjacentTo('nodeId') == true; - (end code) - */ - adjacentTo: function(node) { - return node.id in this.adjacencies; - }, - - /* - Method: getAdjacency - - Returns a object connecting the current and the node having *id* as id. - - Parameters: - - id - (string) A node id. - */ - getAdjacency: function(id) { - return this.adjacencies[id]; - }, - - /* - Method: getPos - - Returns the position of the node. - - Parameters: - - type - (string) Default's *current*. Possible values are "start", "end" or "current". - - Returns: - - A or instance. - - Example: - (start code js) - var pos = node.getPos('end'); - (end code) - */ - getPos: function(type) { - type = type || "current"; - if(type == "current") { - return this.pos; - } else if(type == "end") { - return this.endPos; - } else if(type == "start") { - return this.startPos; - } - }, - /* - Method: setPos - - Sets the node's position. - - Parameters: - - value - (object) A or instance. - type - (string) Default's *current*. Possible values are "start", "end" or "current". - - Example: - (start code js) - node.setPos(new $jit.Complex(0, 0), 'end'); - (end code) - */ - setPos: function(value, type) { - type = type || "current"; - var pos; - if(type == "current") { - pos = this.pos; - } else if(type == "end") { - pos = this.endPos; - } else if(type == "start") { - pos = this.startPos; - } - pos.set(value); - } -}); - -Graph.Node.implement(Accessors); - -/* - Class: Graph.Adjacence - - A adjacence (or edge) connecting two . - - Implements: - - methods. - - See also: - - , - - Properties: - - nodeFrom - A connected by this edge. - nodeTo - Another connected by this edge. - data - Node data property containing a hash (i.e {}) with custom options. -*/ -Graph.Adjacence = new Class({ - - initialize: function(nodeFrom, nodeTo, data, Edge, Label) { - this.nodeFrom = nodeFrom; - this.nodeTo = nodeTo; - this.data = data || {}; - this.startData = {}; - this.endData = {}; - this.Config = this.Edge = Edge; - this.Label = Label; - } -}); - -Graph.Adjacence.implement(Accessors); - -/* - Object: Graph.Util - - traversal and processing utility object. - - Note: - - For your convenience some of these methods have also been appended to and classes. -*/ -Graph.Util = { - /* - filter - - For internal use only. Provides a filtering function based on flags. - */ - filter: function(param) { - if(!param || !($.type(param) == 'string')) return function() { return true; }; - var props = param.split(" "); - return function(elem) { - for(var i=0; i by *id*. - - Also implemented by: - - - - Parameters: - - graph - (object) A instance. - id - (string) A id. - - Example: - - (start code js) - $jit.Graph.Util.getNode(graph, 'nodeid'); - //or... - graph.getNode('nodeid'); - (end code) - */ - getNode: function(graph, id) { - return graph.nodes[id]; - }, - - /* - Method: eachNode - - Iterates over nodes performing an *action*. - - Also implemented by: - - . - - Parameters: - - graph - (object) A instance. - action - (function) A callback function having a as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.eachNode(graph, function(node) { - alert(node.name); - }); - //or... - graph.eachNode(function(node) { - alert(node.name); - }); - (end code) - */ - eachNode: function(graph, action, flags) { - var filter = this.filter(flags); - for(var i in graph.nodes) { - if(filter(graph.nodes[i])) action(graph.nodes[i]); - } - }, - - /* - Method: each - - Iterates over nodes performing an *action*. It's an alias for . - - Also implemented by: - - . - - Parameters: - - graph - (object) A instance. - action - (function) A callback function having a as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.each(graph, function(node) { - alert(node.name); - }); - //or... - graph.each(function(node) { - alert(node.name); - }); - (end code) - */ - each: function(graph, action, flags) { - this.eachNode(graph, action, flags); - }, - - /* - Method: eachAdjacency - - Iterates over adjacencies applying the *action* function. - - Also implemented by: - - . - - Parameters: - - node - (object) A . - action - (function) A callback function having as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.eachAdjacency(node, function(adj) { - alert(adj.nodeTo.name); - }); - //or... - node.eachAdjacency(function(adj) { - alert(adj.nodeTo.name); - }); - (end code) - */ - eachAdjacency: function(node, action, flags) { - var adj = node.adjacencies, filter = this.filter(flags); - for(var id in adj) { - var a = adj[id]; - if(filter(a)) { - if(a.nodeFrom != node) { - var tmp = a.nodeFrom; - a.nodeFrom = a.nodeTo; - a.nodeTo = tmp; - } - action(a, id); - } - } - }, - - /* - Method: computeLevels - - Performs a BFS traversal setting the correct depth for each node. - - Also implemented by: - - . - - Note: - - The depth of each node can then be accessed by - >node._depth - - Parameters: - - graph - (object) A . - id - (string) A starting node id for the BFS traversal. - startDepth - (optional|number) A minimum depth value. Default's 0. - - */ - computeLevels: function(graph, id, startDepth, flags) { - startDepth = startDepth || 0; - var filter = this.filter(flags); - this.eachNode(graph, function(elem) { - elem._flag = false; - elem._depth = -1; - }, flags); - var root = graph.getNode(id); - root._depth = startDepth; - var queue = [root]; - while(queue.length != 0) { - var node = queue.pop(); - node._flag = true; - this.eachAdjacency(node, function(adj) { - var n = adj.nodeTo; - if(n._flag == false && filter(n)) { - if(n._depth < 0) n._depth = node._depth + 1 + startDepth; - queue.unshift(n); - } - }, flags); - } - }, - - /* - Method: eachBFS - - Performs a BFS traversal applying *action* to each . - - Also implemented by: - - . - - Parameters: - - graph - (object) A . - id - (string) A starting node id for the BFS traversal. - action - (function) A callback function having a as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.eachBFS(graph, 'mynodeid', function(node) { - alert(node.name); - }); - //or... - graph.eachBFS('mynodeid', function(node) { - alert(node.name); - }); - (end code) - */ - eachBFS: function(graph, id, action, flags) { - var filter = this.filter(flags); - this.clean(graph); - var queue = [graph.getNode(id)]; - while(queue.length != 0) { - var node = queue.pop(); - node._flag = true; - action(node, node._depth); - this.eachAdjacency(node, function(adj) { - var n = adj.nodeTo; - if(n._flag == false && filter(n)) { - n._flag = true; - queue.unshift(n); - } - }, flags); - } - }, - - /* - Method: eachLevel - - Iterates over a node's subgraph applying *action* to the nodes of relative depth between *levelBegin* and *levelEnd*. - - Also implemented by: - - . - - Parameters: - - node - (object) A . - levelBegin - (number) A relative level value. - levelEnd - (number) A relative level value. - action - (function) A callback function having a as first formal parameter. - - */ - eachLevel: function(node, levelBegin, levelEnd, action, flags) { - var d = node._depth, filter = this.filter(flags), that = this; - levelEnd = levelEnd === false? Number.MAX_VALUE -d : levelEnd; - (function loopLevel(node, levelBegin, levelEnd) { - var d = node._depth; - if(d >= levelBegin && d <= levelEnd && filter(node)) action(node, d); - if(d < levelEnd) { - that.eachAdjacency(node, function(adj) { - var n = adj.nodeTo; - if(n._depth > d) loopLevel(n, levelBegin, levelEnd); - }); - } - })(node, levelBegin + d, levelEnd + d); - }, - - /* - Method: eachSubgraph - - Iterates over a node's children recursively. - - Also implemented by: - - . - - Parameters: - node - (object) A . - action - (function) A callback function having a as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.eachSubgraph(node, function(node) { - alert(node.name); - }); - //or... - node.eachSubgraph(function(node) { - alert(node.name); - }); - (end code) - */ - eachSubgraph: function(node, action, flags) { - this.eachLevel(node, 0, false, action, flags); - }, - - /* - Method: eachSubnode - - Iterates over a node's children (without deeper recursion). - - Also implemented by: - - . - - Parameters: - node - (object) A . - action - (function) A callback function having a as first formal parameter. - - Example: - (start code js) - $jit.Graph.Util.eachSubnode(node, function(node) { - alert(node.name); - }); - //or... - node.eachSubnode(function(node) { - alert(node.name); - }); - (end code) - */ - eachSubnode: function(node, action, flags) { - this.eachLevel(node, 1, 1, action, flags); - }, - - /* - Method: anySubnode - - Returns *true* if any subnode matches the given condition. - - Also implemented by: - - . - - Parameters: - node - (object) A . - cond - (function) A callback function returning a Boolean instance. This function has as first formal parameter a . - - Example: - (start code js) - $jit.Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; }); - //or... - node.anySubnode(function(node) { return node.name == 'mynodename'; }); - (end code) - */ - anySubnode: function(node, cond, flags) { - var flag = false; - cond = cond || $.lambda(true); - var c = $.type(cond) == 'string'? function(n) { return n[cond]; } : cond; - this.eachSubnode(node, function(elem) { - if(c(elem)) flag = true; - }, flags); - return flag; - }, - - /* - Method: getSubnodes - - Collects all subnodes for a specified node. - The *level* parameter filters nodes having relative depth of *level* from the root node. - - Also implemented by: - - . - - Parameters: - node - (object) A . - level - (optional|number) Default's *0*. A starting relative depth for collecting nodes. - - Returns: - An array of nodes. - - */ - getSubnodes: function(node, level, flags) { - var ans = [], that = this; - level = level || 0; - var levelStart, levelEnd; - if($.type(level) == 'array') { - levelStart = level[0]; - levelEnd = level[1]; - } else { - levelStart = level; - levelEnd = Number.MAX_VALUE - node._depth; - } - this.eachLevel(node, levelStart, levelEnd, function(n) { - ans.push(n); - }, flags); - return ans; - }, - - - /* - Method: getParents - - Returns an Array of which are parents of the given node. - - Also implemented by: - - . - - Parameters: - node - (object) A . - - Returns: - An Array of . - - Example: - (start code js) - var pars = $jit.Graph.Util.getParents(node); - //or... - var pars = node.getParents(); - - if(pars.length > 0) { - //do stuff with parents - } - (end code) - */ - getParents: function(node) { - var ans = []; - this.eachAdjacency(node, function(adj) { - var n = adj.nodeTo; - if(n._depth < node._depth) ans.push(n); - }); - return ans; - }, - - /* - Method: isDescendantOf - - Returns a boolean indicating if some node is descendant of the node with the given id. - - Also implemented by: - - . - - - Parameters: - node - (object) A . - id - (string) A id. - - Example: - (start code js) - $jit.Graph.Util.isDescendantOf(node, "nodeid"); //true|false - //or... - node.isDescendantOf('nodeid');//true|false - (end code) - */ - isDescendantOf: function(node, id) { - if(node.id == id) return true; - var pars = this.getParents(node), ans = false; - for ( var i = 0; !ans && i < pars.length; i++) { - ans = ans || this.isDescendantOf(pars[i], id); - } - return ans; - }, - - /* - Method: clean - - Cleans flags from nodes. - - Also implemented by: - - . - - Parameters: - graph - A instance. - */ - clean: function(graph) { this.eachNode(graph, function(elem) { elem._flag = false; }); }, - - /* - Method: getClosestNodeToOrigin - - Returns the closest node to the center of canvas. - - Also implemented by: - - . - - Parameters: - - graph - (object) A instance. - prop - (optional|string) Default's 'current'. A position property. Possible properties are 'start', 'current' or 'end'. - - */ - getClosestNodeToOrigin: function(graph, prop, flags) { - return this.getClosestNodeToPos(graph, Polar.KER, prop, flags); - }, - - /* - Method: getClosestNodeToPos - - Returns the closest node to the given position. - - Also implemented by: - - . - - Parameters: - - graph - (object) A instance. - pos - (object) A or instance. - prop - (optional|string) Default's *current*. A position property. Possible properties are 'start', 'current' or 'end'. - - */ - getClosestNodeToPos: function(graph, pos, prop, flags) { - var node = null; - prop = prop || 'current'; - pos = pos && pos.getc(true) || Complex.KER; - var distance = function(a, b) { - var d1 = a.x - b.x, d2 = a.y - b.y; - return d1 * d1 + d2 * d2; - }; - this.eachNode(graph, function(elem) { - node = (node == null || distance(elem.getPos(prop).getc(true), pos) < distance( - node.getPos(prop).getc(true), pos)) ? elem : node; - }, flags); - return node; - } -}; - -//Append graph methods to -$.each(['get', 'getNode', 'each', 'eachNode', 'computeLevels', 'eachBFS', 'clean', 'getClosestNodeToPos', 'getClosestNodeToOrigin'], function(m) { - Graph.prototype[m] = function() { - return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments))); - }; -}); - -//Append node methods to -$.each(['eachAdjacency', 'eachLevel', 'eachSubgraph', 'eachSubnode', 'anySubnode', 'getSubnodes', 'getParents', 'isDescendantOf'], function(m) { - Graph.Node.prototype[m] = function() { - return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments))); - }; -}); - -/* - * File: Graph.Op.js - * -*/ - -/* - Object: Graph.Op - - Perform operations like adding/removing or , - morphing a into another , contracting or expanding subtrees, etc. - -*/ -Graph.Op = { - - options: { - type: 'nothing', - duration: 2000, - hideLabels: true, - fps:30 - }, - - initialize: function(viz) { - this.viz = viz; - }, - - /* - Method: removeNode - - Removes one or more from the visualization. - It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting. - - Parameters: - - node - (string|array) The node's id. Can also be an array having many ids. - opt - (object) Animation options. It's an object with optional properties described below - type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq", "fade:con" or "iter". - duration - Described in . - fps - Described in . - transition - Described in . - hideLabels - (boolean) Default's *true*. Hide labels during the animation. - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.op.removeNode('nodeId', { - type: 'fade:seq', - duration: 1000, - hideLabels: false, - transition: $jit.Trans.Quart.easeOut - }); - //or also - viz.op.removeNode(['someId', 'otherId'], { - type: 'fade:con', - duration: 1500 - }); - (end code) - */ - - removeNode: function(node, opt) { - var viz = this.viz; - var options = $.merge(this.options, viz.controller, opt); - var n = $.splat(node); - var i, that, nodeObj; - switch(options.type) { - case 'nothing': - for(i=0; i from the visualization. - It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting. - - Parameters: - - vertex - (array) An array having two strings which are the ids of the nodes connected by this edge (i.e ['id1', 'id2']). Can also be a two dimensional array holding many edges (i.e [['id1', 'id2'], ['id3', 'id4'], ...]). - opt - (object) Animation options. It's an object with optional properties described below - type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq", "fade:con" or "iter". - duration - Described in . - fps - Described in . - transition - Described in . - hideLabels - (boolean) Default's *true*. Hide labels during the animation. - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.op.removeEdge(['nodeId', 'otherId'], { - type: 'fade:seq', - duration: 1000, - hideLabels: false, - transition: $jit.Trans.Quart.easeOut - }); - //or also - viz.op.removeEdge([['someId', 'otherId'], ['id3', 'id4']], { - type: 'fade:con', - duration: 1500 - }); - (end code) - - */ - removeEdge: function(vertex, opt) { - var viz = this.viz; - var options = $.merge(this.options, viz.controller, opt); - var v = ($.type(vertex[0]) == 'string')? [vertex] : vertex; - var i, that, adj; - switch(options.type) { - case 'nothing': - for(i=0; i - - Parameters: - - json - (object) A json tree or graph structure. See also . - opt - (object) Animation options. It's an object with optional properties described below - type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq", "fade:con". - duration - Described in . - fps - Described in . - transition - Described in . - hideLabels - (boolean) Default's *true*. Hide labels during the animation. - - Example: - (start code js) - //...json contains a tree or graph structure... - - var viz = new $jit.Viz(options); - viz.op.sum(json, { - type: 'fade:seq', - duration: 1000, - hideLabels: false, - transition: $jit.Trans.Quart.easeOut - }); - //or also - viz.op.sum(json, { - type: 'fade:con', - duration: 1500 - }); - (end code) - - */ - sum: function(json, opt) { - var viz = this.viz; - var options = $.merge(this.options, viz.controller, opt), root = viz.root; - var graph; - viz.root = opt.id || viz.root; - switch(options.type) { - case 'nothing': - graph = viz.construct(json); - graph.eachNode(function(elem) { - elem.eachAdjacency(function(adj) { - viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data); - }); - }); - break; - - case 'replot': - viz.refresh(true); - this.sum(json, { type: 'nothing' }); - viz.refresh(true); - break; - - case 'fade:seq': case 'fade': case 'fade:con': - that = this; - graph = viz.construct(json); - - //set alpha to 0 for nodes to add. - var fadeEdges = this.preprocessSum(graph); - var modes = !fadeEdges? ['node-property:alpha'] : ['node-property:alpha', 'edge-property:alpha']; - viz.reposition(); - if(options.type != 'fade:con') { - viz.fx.animate($.merge(options, { - modes: ['linear'], - onComplete: function() { - viz.fx.animate($.merge(options, { - modes: modes, - onComplete: function() { - options.onComplete(); - } - })); - } - })); - } else { - viz.graph.eachNode(function(elem) { - if (elem.id != root && elem.pos.isZero()) { - elem.pos.set(elem.endPos); - elem.startPos.set(elem.endPos); - } - }); - viz.fx.animate($.merge(options, { - modes: ['linear'].concat(modes) - })); - } - break; - - default: this.doError(); - } - }, - - /* - Method: morph - - This method will transform the current visualized graph into the new JSON representation passed in the method. - The JSON object must at least have the root node in common with the current visualized graph. - - Parameters: - - json - (object) A json tree or graph structure. See also . - opt - (object) Animation options. It's an object with optional properties described below - type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:con". - duration - Described in . - fps - Described in . - transition - Described in . - hideLabels - (boolean) Default's *true*. Hide labels during the animation. - id - (string) The shared id between both graphs. - - extraModes - (optional|object) When morphing with an animation, dollar prefixed data parameters are added to - *endData* and not *data* itself. This way you can animate dollar prefixed parameters during your morphing operation. - For animating these extra-parameters you have to specify an object that has animation groups as keys and animation - properties as values, just like specified in . - - Example: - (start code js) - //...json contains a tree or graph structure... - - var viz = new $jit.Viz(options); - viz.op.morph(json, { - type: 'fade', - duration: 1000, - hideLabels: false, - transition: $jit.Trans.Quart.easeOut - }); - //or also - viz.op.morph(json, { - type: 'fade', - duration: 1500 - }); - //if the json data contains dollar prefixed params - //like $width or $height these too can be animated - viz.op.morph(json, { - type: 'fade', - duration: 1500 - }, { - 'node-property': ['width', 'height'] - }); - (end code) - - */ - morph: function(json, opt, extraModes) { - extraModes = extraModes || {}; - var viz = this.viz; - var options = $.merge(this.options, viz.controller, opt), root = viz.root; - var graph; - //TODO(nico) this hack makes morphing work with the Hypertree. - //Need to check if it has been solved and this can be removed. - viz.root = opt.id || viz.root; - switch(options.type) { - case 'nothing': - graph = viz.construct(json); - graph.eachNode(function(elem) { - var nodeExists = viz.graph.hasNode(elem.id); - elem.eachAdjacency(function(adj) { - var adjExists = !!viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id); - viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data); - //Update data properties if the node existed - if(adjExists) { - var addedAdj = viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id); - for(var prop in (adj.data || {})) { - addedAdj.data[prop] = adj.data[prop]; - } - } - }); - //Update data properties if the node existed - if(nodeExists) { - var addedNode = viz.graph.getNode(elem.id); - for(var prop in (elem.data || {})) { - addedNode.data[prop] = elem.data[prop]; - } - } - }); - viz.graph.eachNode(function(elem) { - elem.eachAdjacency(function(adj) { - if(!graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id)) { - viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id); - } - }); - if(!graph.hasNode(elem.id)) viz.graph.removeNode(elem.id); - }); - - break; - - case 'replot': - viz.labels.clearLabels(true); - this.morph(json, { type: 'nothing' }); - viz.refresh(true); - viz.refresh(true); - break; - - case 'fade:seq': case 'fade': case 'fade:con': - that = this; - graph = viz.construct(json); - //preprocessing for nodes to delete. - //get node property modes to interpolate - var nodeModes = ('node-property' in extraModes) - && $.map($.splat(extraModes['node-property']), - function(n) { return '$' + n; }); - viz.graph.eachNode(function(elem) { - var graphNode = graph.getNode(elem.id); - if(!graphNode) { - elem.setData('alpha', 1); - elem.setData('alpha', 1, 'start'); - elem.setData('alpha', 0, 'end'); - elem.ignore = true; - } else { - //Update node data information - var graphNodeData = graphNode.data; - for(var prop in graphNodeData) { - if(nodeModes && ($.indexOf(nodeModes, prop) > -1)) { - elem.endData[prop] = graphNodeData[prop]; - } else { - elem.data[prop] = graphNodeData[prop]; - } - } - } - }); - viz.graph.eachNode(function(elem) { - if(elem.ignore) return; - elem.eachAdjacency(function(adj) { - if(adj.nodeFrom.ignore || adj.nodeTo.ignore) return; - var nodeFrom = graph.getNode(adj.nodeFrom.id); - var nodeTo = graph.getNode(adj.nodeTo.id); - if(!nodeFrom.adjacentTo(nodeTo)) { - var adj = viz.graph.getAdjacence(nodeFrom.id, nodeTo.id); - fadeEdges = true; - adj.setData('alpha', 1); - adj.setData('alpha', 1, 'start'); - adj.setData('alpha', 0, 'end'); - } - }); - }); - //preprocessing for adding nodes. - var fadeEdges = this.preprocessSum(graph); - - var modes = !fadeEdges? ['node-property:alpha'] : - ['node-property:alpha', - 'edge-property:alpha']; - //Append extra node-property animations (if any) - modes[0] = modes[0] + (('node-property' in extraModes)? - (':' + $.splat(extraModes['node-property']).join(':')) : ''); - //Append extra edge-property animations (if any) - modes[1] = (modes[1] || 'edge-property:alpha') + (('edge-property' in extraModes)? - (':' + $.splat(extraModes['edge-property']).join(':')) : ''); - //Add label-property animations (if any) - if('label-property' in extraModes) { - modes.push('label-property:' + $.splat(extraModes['label-property']).join(':')) - } - //only use reposition if its implemented. - if (viz.reposition) { - viz.reposition(); - } else { - viz.compute('end'); - } - viz.graph.eachNode(function(elem) { - if (elem.id != root && elem.pos.getp().equals(Polar.KER)) { - elem.pos.set(elem.endPos); elem.startPos.set(elem.endPos); - } - }); - viz.fx.animate($.merge(options, { - modes: [extraModes.position || 'polar'].concat(modes), - onComplete: function() { - viz.graph.eachNode(function(elem) { - if(elem.ignore) viz.graph.removeNode(elem.id); - }); - viz.graph.eachNode(function(elem) { - elem.eachAdjacency(function(adj) { - if(adj.ignore) viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id); - }); - }); - options.onComplete(); - } - })); - break; - - default:; - } - }, - - - /* - Method: contract - - Collapses the subtree of the given node. The node will have a _collapsed=true_ property. - - Parameters: - - node - (object) A . - opt - (object) An object containing options described below - type - (string) Whether to 'replot' or 'animate' the contraction. - - There are also a number of Animation options. For more information see . - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.op.contract(node, { - type: 'animate', - duration: 1000, - hideLabels: true, - transition: $jit.Trans.Quart.easeOut - }); - (end code) - - */ - contract: function(node, opt) { - var viz = this.viz; - if(node.collapsed || !node.anySubnode($.lambda(true))) return; - opt = $.merge(this.options, viz.config, opt || {}, { - 'modes': ['node-property:alpha:span', 'linear'] - }); - node.collapsed = true; - (function subn(n) { - n.eachSubnode(function(ch) { - ch.ignore = true; - ch.setData('alpha', 0, opt.type == 'animate'? 'end' : 'current'); - subn(ch); - }); - })(node); - if(opt.type == 'animate') { - viz.compute('end'); - if(viz.rotated) { - viz.rotate(viz.rotated, 'none', { - 'property':'end' - }); - } - (function subn(n) { - n.eachSubnode(function(ch) { - ch.setPos(node.getPos('end'), 'end'); - subn(ch); - }); - })(node); - viz.fx.animate(opt); - } else if(opt.type == 'replot'){ - viz.refresh(); - } - }, - - /* - Method: expand - - Expands the previously contracted subtree. The given node must have the _collapsed=true_ property. - - Parameters: - - node - (object) A . - opt - (object) An object containing options described below - type - (string) Whether to 'replot' or 'animate'. - - There are also a number of Animation options. For more information see . - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.op.expand(node, { - type: 'animate', - duration: 1000, - hideLabels: true, - transition: $jit.Trans.Quart.easeOut - }); - (end code) - - */ - expand: function(node, opt) { - if(!('collapsed' in node)) return; - var viz = this.viz; - opt = $.merge(this.options, viz.config, opt || {}, { - 'modes': ['node-property:alpha:span', 'linear'] - }); - delete node.collapsed; - (function subn(n) { - n.eachSubnode(function(ch) { - delete ch.ignore; - ch.setData('alpha', 1, opt.type == 'animate'? 'end' : 'current'); - subn(ch); - }); - })(node); - if(opt.type == 'animate') { - viz.compute('end'); - if(viz.rotated) { - viz.rotate(viz.rotated, 'none', { - 'property':'end' - }); - } - viz.fx.animate(opt); - } else if(opt.type == 'replot'){ - viz.refresh(); - } - }, - - preprocessSum: function(graph) { - var viz = this.viz; - graph.eachNode(function(elem) { - if(!viz.graph.hasNode(elem.id)) { - viz.graph.addNode(elem); - var n = viz.graph.getNode(elem.id); - n.setData('alpha', 0); - n.setData('alpha', 0, 'start'); - n.setData('alpha', 1, 'end'); - } - }); - var fadeEdges = false; - graph.eachNode(function(elem) { - elem.eachAdjacency(function(adj) { - var nodeFrom = viz.graph.getNode(adj.nodeFrom.id); - var nodeTo = viz.graph.getNode(adj.nodeTo.id); - if(!nodeFrom.adjacentTo(nodeTo)) { - var adj = viz.graph.addAdjacence(nodeFrom, nodeTo, adj.data); - if(nodeFrom.startAlpha == nodeFrom.endAlpha - && nodeTo.startAlpha == nodeTo.endAlpha) { - fadeEdges = true; - adj.setData('alpha', 0); - adj.setData('alpha', 0, 'start'); - adj.setData('alpha', 1, 'end'); - } - } - }); - }); - return fadeEdges; - } -}; - - - -/* - File: Helpers.js - - Helpers are objects that contain rendering primitives (like rectangles, ellipses, etc), for plotting nodes and edges. - Helpers also contain implementations of the *contains* method, a method returning a boolean indicating whether the mouse - position is over the rendered shape. - - Helpers are very useful when implementing new NodeTypes, since you can access them through *this.nodeHelper* and - *this.edgeHelper* properties, providing you with simple primitives and mouse-position check functions. - - Example: - (start code js) - //implement a new node type - $jit.Viz.Plot.NodeTypes.implement({ - 'customNodeType': { - 'render': function(node, canvas) { - this.nodeHelper.circle.render ... - }, - 'contains': function(node, pos) { - this.nodeHelper.circle.contains ... - } - } - }); - //implement an edge type - $jit.Viz.Plot.EdgeTypes.implement({ - 'customNodeType': { - 'render': function(node, canvas) { - this.edgeHelper.circle.render ... - }, - //optional - 'contains': function(node, pos) { - this.edgeHelper.circle.contains ... - } - } - }); - (end code) - -*/ - -/* - Object: NodeHelper - - Contains rendering and other type of primitives for simple shapes. - */ -var NodeHelper = { - 'none': { - 'render': $.empty, - 'contains': $.lambda(false) - }, - /* - Object: NodeHelper.circle - */ - 'circle': { - /* - Method: render - - Renders a circle into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the circle. - radius - (number) The radius of the circle to be rendered. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.circle.render('fill', { x: 10, y: 30 }, 30, viz.canvas); - (end code) - */ - 'render': function(type, pos, radius, canvas){ - var ctx = canvas.getCtx(); - ctx.beginPath(); - ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx[type](); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - radius - (number) The radius of the rendered circle. - - Example: - (start code js) - NodeHelper.circle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); //true - (end code) - */ - 'contains': function(npos, pos, radius){ - var diffx = npos.x - pos.x, - diffy = npos.y - pos.y, - diff = diffx * diffx + diffy * diffy; - return diff <= radius * radius; - } - }, - /* - Object: NodeHelper.ellipse - */ - 'ellipse': { - /* - Method: render - - Renders an ellipse into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the ellipse. - width - (number) The width of the ellipse. - height - (number) The height of the ellipse. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.ellipse.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas); - (end code) - */ - 'render': function(type, pos, width, height, canvas){ - var ctx = canvas.getCtx(), - scalex = 1, - scaley = 1, - scaleposx = 1, - scaleposy = 1, - radius = 0; - - if (width > height) { - radius = width / 2; - scaley = height / width; - scaleposy = width / height; - } else { - radius = height / 2; - scalex = width / height; - scaleposx = height / width; - } - - ctx.save(); - ctx.scale(scalex, scaley); - ctx.beginPath(); - ctx.arc(pos.x * scaleposx, pos.y * scaleposy, radius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx[type](); - ctx.restore(); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - width - (number) The width of the rendered ellipse. - height - (number) The height of the rendered ellipse. - - Example: - (start code js) - NodeHelper.ellipse.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40); - (end code) - */ - 'contains': function(npos, pos, width, height){ - var radius = 0, - scalex = 1, - scaley = 1, - diffx = 0, - diffy = 0, - diff = 0; - - if (width > height) { - radius = width / 2; - scaley = height / width; - } else { - radius = height / 2; - scalex = width / height; - } - - diffx = (npos.x - pos.x) * (1 / scalex); - diffy = (npos.y - pos.y) * (1 / scaley); - diff = diffx * diffx + diffy * diffy; - return diff <= radius * radius; - } - }, - /* - Object: NodeHelper.square - */ - 'square': { - /* - Method: render - - Renders a square into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the square. - dim - (number) The radius (or half-diameter) of the square. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.square.render('stroke', { x: 10, y: 30 }, 40, viz.canvas); - (end code) - */ - 'render': function(type, pos, dim, canvas){ - canvas.getCtx()[type + "Rect"](pos.x - dim, pos.y - dim, 2*dim, 2*dim); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - dim - (number) The radius (or half-diameter) of the square. - - Example: - (start code js) - NodeHelper.square.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': function(npos, pos, dim){ - return Math.abs(pos.x - npos.x) <= dim && Math.abs(pos.y - npos.y) <= dim; - } - }, - /* - Object: NodeHelper.rectangle - */ - 'rectangle': { - /* - Method: render - - Renders a rectangle into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the rectangle. - width - (number) The width of the rectangle. - height - (number) The height of the rectangle. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.rectangle.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas); - (end code) - */ - 'render': function(type, pos, width, height, canvas){ - canvas.getCtx()[type + "Rect"](pos.x - width / 2, pos.y - height / 2, - width, height); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - width - (number) The width of the rendered rectangle. - height - (number) The height of the rendered rectangle. - - Example: - (start code js) - NodeHelper.rectangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40); - (end code) - */ - 'contains': function(npos, pos, width, height){ - return Math.abs(pos.x - npos.x) <= width / 2 - && Math.abs(pos.y - npos.y) <= height / 2; - } - }, - /* - Object: NodeHelper.triangle - */ - 'triangle': { - /* - Method: render - - Renders a triangle into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the triangle. - dim - (number) Half the base and half the height of the triangle. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.triangle.render('stroke', { x: 10, y: 30 }, 40, viz.canvas); - (end code) - */ - 'render': function(type, pos, dim, canvas){ - var ctx = canvas.getCtx(), - c1x = pos.x, - c1y = pos.y - dim, - c2x = c1x - dim, - c2y = pos.y + dim, - c3x = c1x + dim, - c3y = c2y; - ctx.beginPath(); - ctx.moveTo(c1x, c1y); - ctx.lineTo(c2x, c2y); - ctx.lineTo(c3x, c3y); - ctx.closePath(); - ctx[type](); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - dim - (number) Half the base and half the height of the triangle. - - Example: - (start code js) - NodeHelper.triangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': function(npos, pos, dim) { - return NodeHelper.circle.contains(npos, pos, dim); - } - }, - /* - Object: NodeHelper.star - */ - 'star': { - /* - Method: render - - Renders a star (concave decagon) into the canvas. - - Parameters: - - type - (string) Possible options are 'fill' or 'stroke'. - pos - (object) An *x*, *y* object with the position of the center of the star. - dim - (number) The length of a side of a concave decagon. - canvas - (object) A instance. - - Example: - (start code js) - NodeHelper.star.render('stroke', { x: 10, y: 30 }, 40, viz.canvas); - (end code) - */ - 'render': function(type, pos, dim, canvas){ - var ctx = canvas.getCtx(), - pi5 = Math.PI / 5; - ctx.save(); - ctx.translate(pos.x, pos.y); - ctx.beginPath(); - ctx.moveTo(dim, 0); - for (var i = 0; i < 9; i++) { - ctx.rotate(pi5); - if (i % 2 == 0) { - ctx.lineTo((dim / 0.525731) * 0.200811, 0); - } else { - ctx.lineTo(dim, 0); - } - } - ctx.closePath(); - ctx[type](); - ctx.restore(); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - npos - (object) An *x*, *y* object with the position. - pos - (object) An *x*, *y* object with the position to check. - dim - (number) The length of a side of a concave decagon. - - Example: - (start code js) - NodeHelper.star.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': function(npos, pos, dim) { - return NodeHelper.circle.contains(npos, pos, dim); - } - } -}; - -/* - Object: EdgeHelper - - Contains rendering primitives for simple edge shapes. -*/ -var EdgeHelper = { - /* - Object: EdgeHelper.line - */ - 'line': { - /* - Method: render - - Renders a line into the canvas. - - Parameters: - - from - (object) An *x*, *y* object with the starting position of the line. - to - (object) An *x*, *y* object with the ending position of the line. - canvas - (object) A instance. - - Example: - (start code js) - EdgeHelper.line.render({ x: 10, y: 30 }, { x: 10, y: 50 }, viz.canvas); - (end code) - */ - 'render': function(from, to, canvas){ - var ctx = canvas.getCtx(); - ctx.beginPath(); - ctx.moveTo(from.x, from.y); - ctx.lineTo(to.x, to.y); - ctx.stroke(); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - posFrom - (object) An *x*, *y* object with a position. - posTo - (object) An *x*, *y* object with a position. - pos - (object) An *x*, *y* object with the position to check. - epsilon - (number) The dimension of the shape. - - Example: - (start code js) - EdgeHelper.line.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': function(posFrom, posTo, pos, epsilon) { - var min = Math.min, - max = Math.max, - minPosX = min(posFrom.x, posTo.x), - maxPosX = max(posFrom.x, posTo.x), - minPosY = min(posFrom.y, posTo.y), - maxPosY = max(posFrom.y, posTo.y); - - if(pos.x >= minPosX && pos.x <= maxPosX - && pos.y >= minPosY && pos.y <= maxPosY) { - if(Math.abs(posTo.x - posFrom.x) <= epsilon) { - - return true; - } - var dist = (posTo.y - posFrom.y) / (posTo.x - posFrom.x) * (pos.x - posFrom.x) + posFrom.y; - - return Math.abs(dist - pos.y) <= epsilon; - } - return false; - } - }, - /* - Object: EdgeHelper.arrow - */ - 'arrow': { - /* - Method: render - - Renders an arrow into the canvas. - - Parameters: - - from - (object) An *x*, *y* object with the starting position of the arrow. - to - (object) An *x*, *y* object with the ending position of the arrow. - dim - (number) The dimension of the arrow. - swap - (boolean) Whether to set the arrow pointing to the starting position or the ending position. - canvas - (object) A instance. - - Example: - (start code js) - EdgeHelper.arrow.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 13, false, viz.canvas); - (end code) - */ - 'render': function(from, to, dim, swap, canvas){ - var ctx = canvas.getCtx(); - // invert edge direction - if (swap) { - var tmp = from; - from = to; - to = tmp; - } - var vect = new Complex(to.x - from.x, to.y - from.y); - vect.$scale(dim / vect.norm()); - var intermediatePoint = new Complex(to.x - vect.x, to.y - vect.y), - normal = new Complex(-vect.y / 2, vect.x / 2), - v1 = intermediatePoint.add(normal), - v2 = intermediatePoint.$add(normal.$scale(-1)); - - ctx.beginPath(); - ctx.moveTo(from.x, from.y); - ctx.lineTo(to.x, to.y); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(v1.x, v1.y); - ctx.lineTo(v2.x, v2.y); - ctx.lineTo(to.x, to.y); - ctx.closePath(); - ctx.fill(); - }, - /* - Method: contains - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - posFrom - (object) An *x*, *y* object with a position. - posTo - (object) An *x*, *y* object with a position. - pos - (object) An *x*, *y* object with the position to check. - epsilon - (number) The dimension of the shape. - - Example: - (start code js) - EdgeHelper.arrow.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': function(posFrom, posTo, pos, epsilon) { - return EdgeHelper.line.contains(posFrom, posTo, pos, epsilon); - } - }, - /* - Object: EdgeHelper.hyperline - */ - 'hyperline': { - /* - Method: render - - Renders a hyperline into the canvas. A hyperline are the lines drawn for the visualization. - - Parameters: - - from - (object) An *x*, *y* object with the starting position of the hyperline. *x* and *y* must belong to [0, 1). - to - (object) An *x*, *y* object with the ending position of the hyperline. *x* and *y* must belong to [0, 1). - r - (number) The scaling factor. - canvas - (object) A instance. - - Example: - (start code js) - EdgeHelper.hyperline.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 100, viz.canvas); - (end code) - */ - 'render': function(from, to, r, canvas){ - var ctx = canvas.getCtx(); - var centerOfCircle = computeArcThroughTwoPoints(from, to); - if (centerOfCircle.a > 1000 || centerOfCircle.b > 1000 - || centerOfCircle.ratio < 0) { - ctx.beginPath(); - ctx.moveTo(from.x * r, from.y * r); - ctx.lineTo(to.x * r, to.y * r); - ctx.stroke(); - } else { - var angleBegin = Math.atan2(to.y - centerOfCircle.y, to.x - - centerOfCircle.x); - var angleEnd = Math.atan2(from.y - centerOfCircle.y, from.x - - centerOfCircle.x); - var sense = sense(angleBegin, angleEnd); - ctx.beginPath(); - ctx.arc(centerOfCircle.x * r, centerOfCircle.y * r, centerOfCircle.ratio - * r, angleBegin, angleEnd, sense); - ctx.stroke(); - } - /* - Calculates the arc parameters through two points. - - More information in - - Parameters: - - p1 - A instance. - p2 - A instance. - scale - The Disk's diameter. - - Returns: - - An object containing some arc properties. - */ - function computeArcThroughTwoPoints(p1, p2){ - var aDen = (p1.x * p2.y - p1.y * p2.x), bDen = aDen; - var sq1 = p1.squaredNorm(), sq2 = p2.squaredNorm(); - // Fall back to a straight line - if (aDen == 0) - return { - x: 0, - y: 0, - ratio: -1 - }; - - var a = (p1.y * sq2 - p2.y * sq1 + p1.y - p2.y) / aDen; - var b = (p2.x * sq1 - p1.x * sq2 + p2.x - p1.x) / bDen; - var x = -a / 2; - var y = -b / 2; - var squaredRatio = (a * a + b * b) / 4 - 1; - // Fall back to a straight line - if (squaredRatio < 0) - return { - x: 0, - y: 0, - ratio: -1 - }; - var ratio = Math.sqrt(squaredRatio); - var out = { - x: x, - y: y, - ratio: ratio > 1000? -1 : ratio, - a: a, - b: b - }; - - return out; - } - /* - Sets angle direction to clockwise (true) or counterclockwise (false). - - Parameters: - - angleBegin - Starting angle for drawing the arc. - angleEnd - The HyperLine will be drawn from angleBegin to angleEnd. - - Returns: - - A Boolean instance describing the sense for drawing the HyperLine. - */ - function sense(angleBegin, angleEnd){ - return (angleBegin < angleEnd)? ((angleBegin + Math.PI > angleEnd)? false - : true) : ((angleEnd + Math.PI > angleBegin)? true : false); - } - }, - /* - Method: contains - - Not Implemented - - Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise. - - Parameters: - - posFrom - (object) An *x*, *y* object with a position. - posTo - (object) An *x*, *y* object with a position. - pos - (object) An *x*, *y* object with the position to check. - epsilon - (number) The dimension of the shape. - - Example: - (start code js) - EdgeHelper.hyperline.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30); - (end code) - */ - 'contains': $.lambda(false) - } -}; - - -/* - * File: Graph.Plot.js - */ - -/* - Object: Graph.Plot - - rendering and animation methods. - - Properties: - - nodeHelper - object. - edgeHelper - object. -*/ -Graph.Plot = { - //Default initializer - initialize: function(viz, klass){ - this.viz = viz; - this.config = viz.config; - this.node = viz.config.Node; - this.edge = viz.config.Edge; - this.animation = new Animation; - this.nodeTypes = new klass.Plot.NodeTypes; - this.edgeTypes = new klass.Plot.EdgeTypes; - this.labels = viz.labels; - }, - - //Add helpers - nodeHelper: NodeHelper, - edgeHelper: EdgeHelper, - - Interpolator: { - //node/edge property parsers - 'map': { - 'border': 'color', - 'color': 'color', - 'width': 'number', - 'height': 'number', - 'dim': 'number', - 'alpha': 'number', - 'lineWidth': 'number', - 'angularWidth':'number', - 'span':'number', - 'valueArray':'array-number', - 'dimArray':'array-number' - //'colorArray':'array-color' - }, - - //canvas specific parsers - 'canvas': { - 'globalAlpha': 'number', - 'fillStyle': 'color', - 'strokeStyle': 'color', - 'lineWidth': 'number', - 'shadowBlur': 'number', - 'shadowColor': 'color', - 'shadowOffsetX': 'number', - 'shadowOffsetY': 'number', - 'miterLimit': 'number' - }, - - //label parsers - 'label': { - 'size': 'number', - 'color': 'color' - }, - - //Number interpolator - 'compute': function(from, to, delta) { - return from + (to - from) * delta; - }, - - //Position interpolators - 'moebius': function(elem, props, delta, vector) { - var v = vector.scale(-delta); - if(v.norm() < 1) { - var x = v.x, y = v.y; - var ans = elem.startPos - .getc().moebiusTransformation(v); - elem.pos.setc(ans.x, ans.y); - v.x = x; v.y = y; - } - }, - - 'linear': function(elem, props, delta) { - var from = elem.startPos.getc(true); - var to = elem.endPos.getc(true); - elem.pos.setc(this.compute(from.x, to.x, delta), - this.compute(from.y, to.y, delta)); - }, - - 'polar': function(elem, props, delta) { - var from = elem.startPos.getp(true); - var to = elem.endPos.getp(); - var ans = to.interpolate(from, delta); - elem.pos.setp(ans.theta, ans.rho); - }, - - //Graph's Node/Edge interpolators - 'number': function(elem, prop, delta, getter, setter) { - var from = elem[getter](prop, 'start'); - var to = elem[getter](prop, 'end'); - elem[setter](prop, this.compute(from, to, delta)); - }, - - 'color': function(elem, prop, delta, getter, setter) { - var from = $.hexToRgb(elem[getter](prop, 'start')); - var to = $.hexToRgb(elem[getter](prop, 'end')); - var comp = this.compute; - var val = $.rgbToHex([parseInt(comp(from[0], to[0], delta)), - parseInt(comp(from[1], to[1], delta)), - parseInt(comp(from[2], to[2], delta))]); - - elem[setter](prop, val); - }, - - 'array-number': function(elem, prop, delta, getter, setter) { - var from = elem[getter](prop, 'start'), - to = elem[getter](prop, 'end'), - cur = []; - for(var i=0, l=from.length; i, - - */ - prepare: function(modes) { - var graph = this.viz.graph, - accessors = { - 'node-property': { - 'getter': 'getData', - 'setter': 'setData' - }, - 'edge-property': { - 'getter': 'getData', - 'setter': 'setData' - }, - 'node-style': { - 'getter': 'getCanvasStyle', - 'setter': 'setCanvasStyle' - }, - 'edge-style': { - 'getter': 'getCanvasStyle', - 'setter': 'setCanvasStyle' - } - }; - - //parse modes - var m = {}; - if($.type(modes) == 'array') { - for(var i=0, len=modes.length; i < len; i++) { - var elems = modes[i].split(':'); - m[elems.shift()] = elems; - } - } else { - for(var p in modes) { - if(p == 'position') { - m[modes.position] = []; - } else { - m[p] = $.splat(modes[p]); - } - } - } - - graph.eachNode(function(node) { - node.startPos.set(node.pos); - $.each(['node-property', 'node-style'], function(p) { - if(p in m) { - var prop = m[p]; - for(var i=0, l=prop.length; i < l; i++) { - node[accessors[p].setter](prop[i], node[accessors[p].getter](prop[i]), 'start'); - } - } - }); - $.each(['edge-property', 'edge-style'], function(p) { - if(p in m) { - var prop = m[p]; - node.eachAdjacency(function(adj) { - for(var i=0, l=prop.length; i < l; i++) { - adj[accessors[p].setter](prop[i], adj[accessors[p].getter](prop[i]), 'start'); - } - }); - } - }); - }); - return m; - }, - - /* - Method: animate - - Animates a by interpolating some , or properties. - - Parameters: - - opt - (object) Animation options. The object properties are described below - duration - (optional) Described in . - fps - (optional) Described in . - hideLabels - (optional|boolean) Whether to hide labels during the animation. - modes - (required|object) An object with animation modes (described below). - - Animation modes: - - Animation modes are strings representing different node/edge and graph properties that you'd like to animate. - They are represented by an object that has as keys main categories of properties to animate and as values a list - of these specific properties. The properties are described below - - position - Describes the way nodes' positions must be interpolated. Possible values are 'linear', 'polar' or 'moebius'. - node-property - Describes which Node properties will be interpolated. These properties can be any of the ones defined in . - edge-property - Describes which Edge properties will be interpolated. These properties can be any the ones defined in . - label-property - Describes which Label properties will be interpolated. These properties can be any of the ones defined in like color or size. - node-style - Describes which Node Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc. - edge-style - Describes which Edge Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc. - - Example: - (start code js) - var viz = new $jit.Viz(options); - //...tweak some Data, CanvasStyles or LabelData properties... - viz.fx.animate({ - modes: { - 'position': 'linear', - 'node-property': ['width', 'height'], - 'node-style': 'shadowColor', - 'label-property': 'size' - }, - hideLabels: false - }); - //...can also be written like this... - viz.fx.animate({ - modes: ['linear', - 'node-property:width:height', - 'node-style:shadowColor', - 'label-property:size'], - hideLabels: false - }); - (end code) - */ - animate: function(opt, versor) { - opt = $.merge(this.viz.config, opt || {}); - var that = this, - viz = this.viz, - graph = viz.graph, - interp = this.Interpolator, - animation = opt.type === 'nodefx'? this.nodeFxAnimation : this.animation; - //prepare graph values - var m = this.prepare(opt.modes); - - //animate - if(opt.hideLabels) this.labels.hideLabels(true); - animation.setOptions($.extend(opt, { - $animating: false, - compute: function(delta) { - graph.eachNode(function(node) { - for(var p in m) { - interp[p](node, m[p], delta, versor); - } - }); - that.plot(opt, this.$animating, delta); - this.$animating = true; - }, - complete: function() { - if(opt.hideLabels) that.labels.hideLabels(false); - that.plot(opt); - opt.onComplete(); - //TODO(nico): This shouldn't be here! - //opt.onAfterCompute(); - } - })).start(); - }, - - /* - nodeFx - - Apply animation to node properties like color, width, height, dim, etc. - - Parameters: - - options - Animation options. This object properties is described below - elements - The Elements to be transformed. This is an object that has a properties - - (start code js) - 'elements': { - //can also be an array of ids - 'id': 'id-of-node-to-transform', - //properties to be modified. All properties are optional. - 'properties': { - 'color': '#ccc', //some color - 'width': 10, //some width - 'height': 10, //some height - 'dim': 20, //some dim - 'lineWidth': 10 //some line width - } - } - (end code) - - - _reposition_ Whether to recalculate positions and add a motion animation. - This might be used when changing _width_ or _height_ properties in a like layout. Default's *false*. - - - _onComplete_ A method that is called when the animation completes. - - ...and all other options like _duration_, _fps_, _transition_, etc. - - Example: - (start code js) - var rg = new RGraph(canvas, config); //can be also Hypertree or ST - rg.fx.nodeFx({ - 'elements': { - 'id':'mynodeid', - 'properties': { - 'color':'#ccf' - }, - 'transition': Trans.Quart.easeOut - } - }); - (end code) - */ - nodeFx: function(opt) { - var viz = this.viz, - graph = viz.graph, - animation = this.nodeFxAnimation, - options = $.merge(this.viz.config, { - 'elements': { - 'id': false, - 'properties': {} - }, - 'reposition': false - }); - opt = $.merge(options, opt || {}, { - onBeforeCompute: $.empty, - onAfterCompute: $.empty - }); - //check if an animation is running - animation.stopTimer(); - var props = opt.elements.properties; - //set end values for nodes - if(!opt.elements.id) { - graph.eachNode(function(n) { - for(var prop in props) { - n.setData(prop, props[prop], 'end'); - } - }); - } else { - var ids = $.splat(opt.elements.id); - $.each(ids, function(id) { - var n = graph.getNode(id); - if(n) { - for(var prop in props) { - n.setData(prop, props[prop], 'end'); - } - } - }); - } - //get keys - var propnames = []; - for(var prop in props) propnames.push(prop); - //add node properties modes - var modes = ['node-property:' + propnames.join(':')]; - //set new node positions - if(opt.reposition) { - modes.push('linear'); - viz.compute('end'); - } - //animate - this.animate($.merge(opt, { - modes: modes, - type: 'nodefx' - })); - }, - - - /* - Method: plot - - Plots a . - - Parameters: - - opt - (optional) Plotting options. Most of them are described in . - - Example: - - (start code js) - var viz = new $jit.Viz(options); - viz.fx.plot(); - (end code) - - */ - plot: function(opt, animating) { - var viz = this.viz, - aGraph = viz.graph, - canvas = viz.canvas, - id = viz.root, - that = this, - ctx = canvas.getCtx(), - min = Math.min, - opt = opt || this.viz.controller; - - opt.clearCanvas && canvas.clear(); - - var root = aGraph.getNode(id); - if(!root) return; - - var T = !!root.visited; - - //START METAMAPS CODE - if (Metamaps.Mouse.synapseStartCoordinates.length > 0) { - ctx.save(); - var start; - var end = Metamaps.Mouse.synapseEndCoordinates; - - var l = Metamaps.Mouse.synapseStartCoordinates.length; - for (var i = l - 1; i >= 0; i -= 1) { - start = Metamaps.Mouse.synapseStartCoordinates[i]; - Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.3, true); - Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.7, true); - } - ctx.restore(); - } - //END METAMAPS CODE - - aGraph.eachNode(function(node) { - var nodeAlpha = node.getData('alpha'); - node.eachAdjacency(function(adj) { - var nodeTo = adj.nodeTo; - if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) { - !animating && opt.onBeforePlotLine(adj); - that.plotLine(adj, canvas, animating); - !animating && opt.onAfterPlotLine(adj); - } - }); - if(node.drawn) { - !animating && opt.onBeforePlotNode(node); - that.plotNode(node, canvas, animating); - !animating && opt.onAfterPlotNode(node); - } - if(!that.labelsHidden && opt.withLabels) { - if(node.drawn && nodeAlpha >= 0.95) { - that.labels.plotLabel(canvas, node, opt); - } else { - that.labels.hideLabel(node, false); - } - } - node.visited = !T; - }); - }, - - /* - Plots a Subtree. - */ - plotTree: function(node, opt, animating) { - var that = this, - viz = this.viz, - canvas = viz.canvas, - config = this.config, - ctx = canvas.getCtx(); - var nodeAlpha = node.getData('alpha'); - node.eachSubnode(function(elem) { - if(opt.plotSubtree(node, elem) && elem.exist && elem.drawn) { - var adj = node.getAdjacency(elem.id); - !animating && opt.onBeforePlotLine(adj); - that.plotLine(adj, canvas, animating); - !animating && opt.onAfterPlotLine(adj); - that.plotTree(elem, opt, animating); - } - }); - if(node.drawn) { - !animating && opt.onBeforePlotNode(node); - this.plotNode(node, canvas, animating); - !animating && opt.onAfterPlotNode(node); - if(!opt.hideLabels && opt.withLabels && nodeAlpha >= 0.95) - this.labels.plotLabel(canvas, node, opt); - else - this.labels.hideLabel(node, false); - } else { - this.labels.hideLabel(node, true); - } - }, - - /* - Method: plotNode - - Plots a . - - Parameters: - - node - (object) A . - canvas - (object) A element. - - */ - plotNode: function(node, canvas, animating) { - var f = node.getData('type'), - ctxObj = this.node.CanvasStyles; - if(f != 'none') { - var width = node.getData('lineWidth'), - color = node.getData('color'), - alpha = node.getData('alpha'), - ctx = canvas.getCtx(); - ctx.save(); - ctx.lineWidth = width; - ctx.fillStyle = ctx.strokeStyle = color; - ctx.globalAlpha = alpha; - - for(var s in ctxObj) { - ctx[s] = node.getCanvasStyle(s); - } - - this.nodeTypes[f].render.call(this, node, canvas, animating); - ctx.restore(); - } - }, - - /* - Method: plotLine - - Plots a . - - Parameters: - - adj - (object) A . - canvas - (object) A instance. - - */ - plotLine: function(adj, canvas, animating) { - var f = adj.getData('type'), - ctxObj = this.edge.CanvasStyles; - if(f != 'none') { - var width = adj.getData('lineWidth'), - color = adj.getData('color'), - ctx = canvas.getCtx(), - nodeFrom = adj.nodeFrom, - nodeTo = adj.nodeTo; - - ctx.save(); - ctx.lineWidth = width; - ctx.fillStyle = ctx.strokeStyle = color; - ctx.globalAlpha = Math.min(nodeFrom.getData('alpha'), - nodeTo.getData('alpha'), - adj.getData('alpha')); - - for(var s in ctxObj) { - ctx[s] = adj.getCanvasStyle(s); - } - - this.edgeTypes[f].render.call(this, adj, canvas, animating); - ctx.restore(); - } - } - -}; - -/* - Object: Graph.Plot3D - - 3D rendering and animation methods. - - Properties: - - nodeHelper - object. - edgeHelper - object. - -*/ -Graph.Plot3D = $.merge(Graph.Plot, { - Interpolator: { - 'linear': function(elem, props, delta) { - var from = elem.startPos.getc(true); - var to = elem.endPos.getc(true); - elem.pos.setc(this.compute(from.x, to.x, delta), - this.compute(from.y, to.y, delta), - this.compute(from.z, to.z, delta)); - } - }, - - plotNode: function(node, canvas) { - if(node.getData('type') == 'none') return; - this.plotElement(node, canvas, { - getAlpha: function() { - return node.getData('alpha'); - } - }); - }, - - plotLine: function(adj, canvas) { - if(adj.getData('type') == 'none') return; - this.plotElement(adj, canvas, { - getAlpha: function() { - return Math.min(adj.nodeFrom.getData('alpha'), - adj.nodeTo.getData('alpha'), - adj.getData('alpha')); - } - }); - }, - - plotElement: function(elem, canvas, opt) { - var gl = canvas.getCtx(), - viewMatrix = new Matrix4, - lighting = canvas.config.Scene.Lighting, - wcanvas = canvas.canvases[0], - program = wcanvas.program, - camera = wcanvas.camera; - - if(!elem.geometry) { - elem.geometry = new O3D[elem.getData('type')]; - } - elem.geometry.update(elem); - if(!elem.webGLVertexBuffer) { - var vertices = [], - faces = [], - normals = [], - vertexIndex = 0, - geom = elem.geometry; - - for(var i=0, vs=geom.vertices, fs=geom.faces, fsl=fs.length; i interface is implemented in multiple ways to provide - different label types. - - For example, the Graph.Label interface is implemented as to provide - HTML label elements. Also we provide the interface for SVG type labels. - The interface implements these methods with the native Canvas text rendering functions. - - All subclasses (, and ) implement the method plotLabel. -*/ - -Graph.Label = {}; - -/* - Class: Graph.Label.Native - - Implements labels natively, using the Canvas text API. -*/ -Graph.Label.Native = new Class({ - initialize: function(viz) { - this.viz = viz; - }, - - /* - Method: plotLabel - - Plots a label for a given node. - - Parameters: - - canvas - (object) A instance. - node - (object) A . - controller - (object) A configuration object. - - Example: - - (start code js) - var viz = new $jit.Viz(options); - var node = viz.graph.getNode('nodeId'); - viz.labels.plotLabel(viz.canvas, node, viz.config); - (end code) - */ - plotLabel: function(canvas, node, controller) { - - var ctx = canvas.getCtx(); - var pos = node.pos.getc(true); - - ctx.font = node.getLabelData('style') + ' ' + node.getLabelData('size') + 'px ' + node.getLabelData('family'); - ctx.textAlign = node.getLabelData('textAlign'); - // ORIGINAL CODE ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color'); - ctx.textBaseline = node.getLabelData('textBaseline'); - - //START METAMAPS CODE - - var arrayOfLabelLines = Metamaps.Util.splitLine(node.name,30).split('\n'); - //render background - ctx.fillStyle = ctx.strokeStyle = Metamaps.Settings.colors.labels.background; - ctx.lineWidth = 2; - var height = 25 * arrayOfLabelLines.length; //font size + margin - - var index, lineWidths = []; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - lineWidths.push( ctx.measureText( arrayOfLabelLines[index] ).width ) - } - var width = Math.max.apply(null, lineWidths) + 8; - var x = pos.x - width/2; - var y = pos.y + node.getData("height") + 5; - var radius = 5; - - ctx.beginPath(); - ctx.moveTo(x + radius, y); - ctx.lineTo(x + width - radius, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + radius); - ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); - ctx.closePath(); - ctx.fill(); - //ctx.stroke(); - - ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color'); - - this.renderLabel(arrayOfLabelLines, canvas, node, controller); - // END METAMAPS CODE - // ORIGINAL CODE this.renderLabel(canvas, node, controller); - }, - - /* - renderLabel - - Does the actual rendering of the label in the canvas. The default - implementation renders the label close to the position of the node, this - method should be overriden to position the labels differently. - - Parameters: - - canvas - A instance. - node - A . - controller - A configuration object. See also , , . - */ - renderLabel: function(customLabel, canvas, node, controller) { - var ctx = canvas.getCtx(); - var pos = node.pos.getc(true); - //ctx.fillText(node.name, pos.x, pos.y + node.getData("height") / 2); - // START METAMAPS CODE - var index; - for (index = 0; index < customLabel.length; ++index) { - ctx.fillText(customLabel[index], pos.x, pos.y + node.getData("height") + 23 + (25*index)); - } - // END METAMAPS CODE - }, - - hideLabel: $.empty, - hideLabels: $.empty -}); - -/* - Class: Graph.Label.DOM - - Abstract Class implementing some DOM label methods. - - Implemented by: - - and . - -*/ -Graph.Label.DOM = new Class({ - //A flag value indicating if node labels are being displayed or not. - labelsHidden: false, - //Label container - labelContainer: false, - //Label elements hash. - labels: {}, - - /* - Method: getLabelContainer - - Lazy fetcher for the label container. - - Returns: - - The label container DOM element. - - Example: - - (start code js) - var viz = new $jit.Viz(options); - var labelContainer = viz.labels.getLabelContainer(); - alert(labelContainer.innerHTML); - (end code) - */ - getLabelContainer: function() { - return this.labelContainer ? - this.labelContainer : - this.labelContainer = document.getElementById(this.viz.config.labelContainer); - }, - - /* - Method: getLabel - - Lazy fetcher for the label element. - - Parameters: - - id - (string) The label id (which is also a id). - - Returns: - - The label element. - - Example: - - (start code js) - var viz = new $jit.Viz(options); - var label = viz.labels.getLabel('someid'); - alert(label.innerHTML); - (end code) - - */ - getLabel: function(id) { - return (id in this.labels && this.labels[id] != null) ? - this.labels[id] : - this.labels[id] = document.getElementById(id); - }, - - /* - Method: hideLabels - - Hides all labels (by hiding the label container). - - Parameters: - - hide - (boolean) A boolean value indicating if the label container must be hidden or not. - - Example: - (start code js) - var viz = new $jit.Viz(options); - rg.labels.hideLabels(true); - (end code) - - */ - hideLabels: function (hide) { - var container = this.getLabelContainer(); - if(hide) - container.style.display = 'none'; - else - container.style.display = ''; - this.labelsHidden = hide; - }, - - /* - Method: clearLabels - - Clears the label container. - - Useful when using a new visualization with the same canvas element/widget. - - Parameters: - - force - (boolean) Forces deletion of all labels. - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.labels.clearLabels(); - (end code) - */ - clearLabels: function(force) { - for(var id in this.labels) { - if (force || !this.viz.graph.hasNode(id)) { - this.disposeLabel(id); - delete this.labels[id]; - } - } - }, - - /* - Method: disposeLabel - - Removes a label. - - Parameters: - - id - (string) A label id (which generally is also a id). - - Example: - (start code js) - var viz = new $jit.Viz(options); - viz.labels.disposeLabel('labelid'); - (end code) - */ - disposeLabel: function(id) { - var elem = this.getLabel(id); - if(elem && elem.parentNode) { - elem.parentNode.removeChild(elem); - } - }, - - /* - Method: hideLabel - - Hides the corresponding label. - - Parameters: - - node - (object) A . Can also be an array of . - show - (boolean) If *true*, nodes will be shown. Otherwise nodes will be hidden. - - Example: - (start code js) - var rg = new $jit.Viz(options); - viz.labels.hideLabel(viz.graph.getNode('someid'), false); - (end code) - */ - hideLabel: function(node, show) { - node = $.splat(node); - var st = show ? "" : "none", lab, that = this; - $.each(node, function(n) { - var lab = that.getLabel(n.id); - if (lab) { - lab.style.display = st; - } - }); - }, - - /* - fitsInCanvas - - Returns _true_ or _false_ if the label for the node is contained in the canvas dom element or not. - - Parameters: - - pos - A instance (I'm doing duck typing here so any object with _x_ and _y_ parameters will do). - canvas - A instance. - - Returns: - - A boolean value specifying if the label is contained in the DOM element or not. - - */ - fitsInCanvas: function(pos, canvas) { - var size = canvas.getSize(); - if(pos.x >= size.width || pos.x < 0 - || pos.y >= size.height || pos.y < 0) return false; - return true; - } -}); - -/* - Class: Graph.Label.HTML - - Implements HTML labels. - - Extends: - - All methods. - -*/ -Graph.Label.HTML = new Class({ - Implements: Graph.Label.DOM, - - /* - Method: plotLabel - - Plots a label for a given node. - - Parameters: - - canvas - (object) A instance. - node - (object) A . - controller - (object) A configuration object. - - Example: - - (start code js) - var viz = new $jit.Viz(options); - var node = viz.graph.getNode('nodeId'); - viz.labels.plotLabel(viz.canvas, node, viz.config); - (end code) - - - */ - plotLabel: function(canvas, node, controller) { - var id = node.id, tag = this.getLabel(id); - - if(!tag && !(tag = document.getElementById(id))) { - tag = document.createElement('div'); - var container = this.getLabelContainer(); - tag.id = id; - tag.className = 'node'; - tag.style.position = 'absolute'; - controller.onCreateLabel(tag, node); - container.appendChild(tag); - this.labels[node.id] = tag; - } - - this.placeLabel(tag, node, controller); - } -}); - -/* - Class: Graph.Label.SVG - - Implements SVG labels. - - Extends: - - All methods. -*/ -Graph.Label.SVG = new Class({ - Implements: Graph.Label.DOM, - - /* - Method: plotLabel - - Plots a label for a given node. - - Parameters: - - canvas - (object) A instance. - node - (object) A . - controller - (object) A configuration object. - - Example: - - (start code js) - var viz = new $jit.Viz(options); - var node = viz.graph.getNode('nodeId'); - viz.labels.plotLabel(viz.canvas, node, viz.config); - (end code) - - - */ - plotLabel: function(canvas, node, controller) { - var id = node.id, tag = this.getLabel(id); - if(!tag && !(tag = document.getElementById(id))) { - var ns = 'http://www.w3.org/2000/svg'; - tag = document.createElementNS(ns, 'svg:text'); - var tspan = document.createElementNS(ns, 'svg:tspan'); - tag.appendChild(tspan); - var container = this.getLabelContainer(); - tag.setAttribute('id', id); - tag.setAttribute('class', 'node'); - container.appendChild(tag); - controller.onCreateLabel(tag, node); - this.labels[node.id] = tag; - } - this.placeLabel(tag, node, controller); - } -}); - - - -/* - * File: Loader.js - * - */ - -/* - Object: Loader - - Provides methods for loading and serving JSON data. -*/ -var Loader = { - construct: function(json) { - var isGraph = ($.type(json) == 'array'); - var ans = new Graph(this.graphOptions, this.config.Node, this.config.Edge, this.config.Label); - if(!isGraph) - //make tree - (function (ans, json) { - ans.addNode(json); - if(json.children) { - for(var i=0, ch = json.children; i will override the general value for that option with that particular value. For this to work - however, you do have to set *overridable = true* in . - - The same thing is true for JSON adjacencies. Dollar prefixed data properties will alter values set in - if has *overridable = true*. - - When loading JSON data into TreeMaps, the *data* property must contain a value for the *$area* key, - since this is the value which will be taken into account when creating the layout. - The same thing goes for the *$color* parameter. - - In JSON Nodes you can use also *$label-* prefixed properties to refer to properties. For example, - *$label-size* will refer to size property. Also, in JSON nodes and adjacencies you can set - canvas specific properties individually by using the *$canvas-* prefix. For example, *$canvas-shadowBlur* will refer - to the *shadowBlur* property. - - These properties can also be accessed after loading the JSON data from and - by using . For more information take a look at the and documentation. - - Finally, these properties can also be used to create advanced animations like with . For more - information about creating animations please take a look at the and documentation. - - loadJSON Parameters: - - json - A JSON Tree or Graph structure. - i - For Graph structures only. Sets the indexed node as root for the visualization. - - */ - loadJSON: function(json, i) { - this.json = json; - //if they're canvas labels erase them. - if(this.labels && this.labels.clearLabels) { - this.labels.clearLabels(true); - } - this.graph = this.construct(json); - if($.type(json) != 'array'){ - this.root = json.id; - } else { - this.root = json[i? i : 0].id; - } - }, - - /* - Method: toJSON - - Returns a JSON tree/graph structure from the visualization's . - See for the graph formats available. - - See also: - - - - Parameters: - - type - (string) Default's "tree". The type of the JSON structure to be returned. - Possible options are "tree" or "graph". - */ - toJSON: function(type) { - type = type || "tree"; - if(type == 'tree') { - var ans = {}; - var rootNode = this.graph.getNode(this.root); - var ans = (function recTree(node) { - var ans = {}; - ans.id = node.id; - ans.name = node.name; - ans.data = node.data; - var ch =[]; - node.eachSubnode(function(n) { - ch.push(recTree(n)); - }); - ans.children = ch; - return ans; - })(rootNode); - return ans; - } else { - var ans = []; - var T = !!this.graph.getNode(this.root).visited; - this.graph.eachNode(function(node) { - var ansNode = {}; - ansNode.id = node.id; - ansNode.name = node.name; - ansNode.data = node.data; - var adjs = []; - node.eachAdjacency(function(adj) { - var nodeTo = adj.nodeTo; - if(!!nodeTo.visited === T) { - var ansAdj = {}; - ansAdj.nodeTo = nodeTo.id; - ansAdj.data = adj.data; - adjs.push(ansAdj); - } - }); - ansNode.adjacencies = adjs; - ans.push(ansNode); - node.visited = !T; - }); - return ans; - } - } -}; - - - -/* - * File: Layouts.js - * - * Implements base Tree and Graph layouts. - * - * Description: - * - * Implements base Tree and Graph layouts like Radial, Tree, etc. - * - */ - -/* - * Object: Layouts - * - * Parent object for common layouts. - * - */ -var Layouts = $jit.Layouts = {}; - - -//Some util shared layout functions are defined here. -var NodeDim = { - label: null, - - compute: function(graph, prop, opt) { - this.initializeLabel(opt); - var label = this.label, style = label.style; - graph.eachNode(function(n) { - var autoWidth = n.getData('autoWidth'), - autoHeight = n.getData('autoHeight'); - if(autoWidth || autoHeight) { - //delete dimensions since these are - //going to be overridden now. - delete n.data.$width; - delete n.data.$height; - delete n.data.$dim; - - var width = n.getData('width'), - height = n.getData('height'); - //reset label dimensions - style.width = autoWidth? 'auto' : width + 'px'; - style.height = autoHeight? 'auto' : height + 'px'; - - //TODO(nico) should let the user choose what to insert here. - label.innerHTML = n.name; - - var offsetWidth = label.offsetWidth, - offsetHeight = label.offsetHeight; - var type = n.getData('type'); - if($.indexOf(['circle', 'square', 'triangle', 'star'], type) === -1) { - n.setData('width', offsetWidth); - n.setData('height', offsetHeight); - } else { - var dim = offsetWidth > offsetHeight? offsetWidth : offsetHeight; - n.setData('width', dim); - n.setData('height', dim); - n.setData('dim', dim); - } - } - }); - }, - - initializeLabel: function(opt) { - if(!this.label) { - this.label = document.createElement('div'); - document.body.appendChild(this.label); - } - this.setLabelStyles(opt); - }, - - setLabelStyles: function(opt) { - $.extend(this.label.style, { - 'visibility': 'hidden', - 'position': 'absolute', - 'width': 'auto', - 'height': 'auto' - }); - this.label.className = 'jit-autoadjust-label'; - } -}; - - -/* - * Class: Layouts.Radial - * - * Implements a Radial Layout. - * - * Implemented By: - * - * , - * - */ -Layouts.Radial = new Class({ - - /* - * Method: compute - * - * Computes nodes' positions. - * - * Parameters: - * - * property - _optional_ A position property to store the new - * positions. Possible values are 'pos', 'end' or 'start'. - * - */ - compute : function(property) { - var prop = $.splat(property || [ 'current', 'start', 'end' ]); - NodeDim.compute(this.graph, prop, this.config); - this.graph.computeLevels(this.root, 0, "ignore"); - var lengthFunc = this.createLevelDistanceFunc(); - this.computeAngularWidths(prop); - this.computePositions(prop, lengthFunc); - }, - - /* - * computePositions - * - * Performs the main algorithm for computing node positions. - */ - computePositions : function(property, getLength) { - var propArray = property; - var graph = this.graph; - var root = graph.getNode(this.root); - var parent = this.parent; - var config = this.config; - - for ( var i=0, l=propArray.length; i < l; i++) { - var pi = propArray[i]; - root.setPos($P(0, 0), pi); - root.setData('span', Math.PI * 2, pi); - } - - root.angleSpan = { - begin : 0, - end : 2 * Math.PI - }; - - graph.eachBFS(this.root, function(elem) { - var angleSpan = elem.angleSpan.end - elem.angleSpan.begin; - var angleInit = elem.angleSpan.begin; - var len = getLength(elem); - //Calculate the sum of all angular widths - var totalAngularWidths = 0, subnodes = [], maxDim = {}; - elem.eachSubnode(function(sib) { - totalAngularWidths += sib._treeAngularWidth; - //get max dim - for ( var i=0, l=propArray.length; i < l; i++) { - var pi = propArray[i], dim = sib.getData('dim', pi); - maxDim[pi] = (pi in maxDim)? (dim > maxDim[pi]? dim : maxDim[pi]) : dim; - } - subnodes.push(sib); - }, "ignore"); - //Maintain children order - //Second constraint for - if (parent && parent.id == elem.id && subnodes.length > 0 - && subnodes[0].dist) { - subnodes.sort(function(a, b) { - return (a.dist >= b.dist) - (a.dist <= b.dist); - }); - } - //Calculate nodes positions. - for (var k = 0, ls=subnodes.length; k < ls; k++) { - var child = subnodes[k]; - if (!child._flag) { - var angleProportion = child._treeAngularWidth / totalAngularWidths * angleSpan; - var theta = angleInit + angleProportion / 2; - - for ( var i=0, l=propArray.length; i < l; i++) { - var pi = propArray[i]; - child.setPos($P(theta, len), pi); - child.setData('span', angleProportion, pi); - child.setData('dim-quotient', child.getData('dim', pi) / maxDim[pi], pi); - } - - child.angleSpan = { - begin : angleInit, - end : angleInit + angleProportion - }; - angleInit += angleProportion; - } - } - }, "ignore"); - }, - - /* - * Method: setAngularWidthForNodes - * - * Sets nodes angular widths. - */ - setAngularWidthForNodes : function(prop) { - this.graph.eachBFS(this.root, function(elem, i) { - var diamValue = elem.getData('angularWidth', prop[0]) || 5; - elem._angularWidth = diamValue / i; - }, "ignore"); - }, - - /* - * Method: setSubtreesAngularWidth - * - * Sets subtrees angular widths. - */ - setSubtreesAngularWidth : function() { - var that = this; - this.graph.eachNode(function(elem) { - that.setSubtreeAngularWidth(elem); - }, "ignore"); - }, - - /* - * Method: setSubtreeAngularWidth - * - * Sets the angular width for a subtree. - */ - setSubtreeAngularWidth : function(elem) { - var that = this, nodeAW = elem._angularWidth, sumAW = 0; - elem.eachSubnode(function(child) { - that.setSubtreeAngularWidth(child); - sumAW += child._treeAngularWidth; - }, "ignore"); - elem._treeAngularWidth = Math.max(nodeAW, sumAW); - }, - - /* - * Method: computeAngularWidths - * - * Computes nodes and subtrees angular widths. - */ - computeAngularWidths : function(prop) { - this.setAngularWidthForNodes(prop); - this.setSubtreesAngularWidth(); - } - -}); - - -/* - * File: RGraph.js - * - */ - -/* - Class: RGraph - - A radial graph visualization with advanced animations. - - Inspired by: - - Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst) - - Note: - - This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper. - - Implements: - - All methods - - Constructor Options: - - Inherits options from - - - - - - - - - - - - - - - - - - - - - Additionally, there are other parameters and some default values changed - - interpolation - (string) Default's *linear*. Describes the way nodes are interpolated. Possible values are 'linear' and 'polar'. - levelDistance - (number) Default's *100*. The distance between levels of the tree. - - Instance Properties: - - canvas - Access a instance. - graph - Access a instance. - op - Access a instance. - fx - Access a instance. - labels - Access a interface implementation. -*/ - -$jit.RGraph = new Class( { - - Implements: [ - Loader, Extras, Layouts.Radial - ], - - initialize: function(controller){ - var $RGraph = $jit.RGraph; - - var config = { - interpolation: 'linear', - levelDistance: 100 - }; - - this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge", - "Fx", "Controller", "Tips", "NodeStyles", "Events", "Navigation", "Label"), config, controller); - - var canvasConfig = this.config; - if(canvasConfig.useCanvas) { - this.canvas = canvasConfig.useCanvas; - this.config.labelContainer = this.canvas.id + '-label'; - } else { - if(canvasConfig.background) { - canvasConfig.background = $.merge({ - type: 'Circles' - }, canvasConfig.background); - } - this.canvas = new Canvas(this, canvasConfig); - this.config.labelContainer = (typeof canvasConfig.injectInto == 'string'? canvasConfig.injectInto : canvasConfig.injectInto.id) + '-label'; - } - - this.graphOptions = { - 'klass': Polar, - 'Node': { - 'selected': false, - 'exist': true, - 'drawn': true - } - }; - this.graph = new Graph(this.graphOptions, this.config.Node, - this.config.Edge); - this.labels = new $RGraph.Label[canvasConfig.Label.type](this); - this.fx = new $RGraph.Plot(this, $RGraph); - this.op = new $RGraph.Op(this); - this.json = null; - this.root = null; - this.busy = false; - this.parent = false; - // initialize extras - this.initializeExtras(); - }, - - /* - - createLevelDistanceFunc - - Returns the levelDistance function used for calculating a node distance - to its origin. This function returns a function that is computed - per level and not per node, such that all nodes with the same depth will have the - same distance to the origin. The resulting function gets the - parent node as parameter and returns a float. - - */ - createLevelDistanceFunc: function(){ - var ld = this.config.levelDistance; - return function(elem){ - return (elem._depth + 1) * ld; - }; - }, - - /* - Method: refresh - - Computes positions and plots the tree. - - */ - refresh: function(){ - - // START METAMAPS CODE - // this.compute(); - // END METAMAPS CODE - // ORIGINAL CODE: this.compute(); - this.plot(); - }, - - reposition: function(){ - this.compute('end'); - }, - - /* - Method: plot - - Plots the RGraph. This is a shortcut to *fx.plot*. - */ - plot: function(){ - this.fx.plot(); - }, - /* - getNodeAndParentAngle - - Returns the _parent_ of the given node, also calculating its angle span. - */ - getNodeAndParentAngle: function(id){ - var theta = false; - var n = this.graph.getNode(id); - var ps = n.getParents(); - var p = (ps.length > 0)? ps[0] : false; - if (p) { - var posParent = p.pos.getc(), posChild = n.pos.getc(); - var newPos = posParent.add(posChild.scale(-1)); - theta = Math.atan2(newPos.y, newPos.x); - if (theta < 0) - theta += 2 * Math.PI; - } - return { - parent: p, - theta: theta - }; - }, - /* - tagChildren - - Enumerates the children in order to maintain child ordering (second constraint of the paper). - */ - tagChildren: function(par, id){ - if (par.angleSpan) { - var adjs = []; - par.eachAdjacency(function(elem){ - adjs.push(elem.nodeTo); - }, "ignore"); - var len = adjs.length; - for ( var i = 0; i < len && id != adjs[i].id; i++) - ; - for ( var j = (i + 1) % len, k = 0; id != adjs[j].id; j = (j + 1) % len) { - adjs[j].dist = k++; - } - } - }, - /* - Method: onClick - - Animates the to center the node specified by *id*. - - Parameters: - - id - A id. - opt - (optional|object) An object containing some extra properties described below - hideLabels - (boolean) Default's *true*. Hide labels when performing the animation. - - Example: - - (start code js) - rgraph.onClick('someid'); - //or also... - rgraph.onClick('someid', { - hideLabels: false - }); - (end code) - - */ - onClick: function(id, opt){ - if (this.root != id && !this.busy) { - this.busy = true; - this.root = id; - var that = this; - this.controller.onBeforeCompute(this.graph.getNode(id)); - var obj = this.getNodeAndParentAngle(id); - - // second constraint - this.tagChildren(obj.parent, id); - this.parent = obj.parent; - this.compute('end'); - - // first constraint - var thetaDiff = obj.theta - obj.parent.endPos.theta; - this.graph.eachNode(function(elem){ - elem.endPos.set(elem.endPos.getp().add($P(thetaDiff, 0))); - }); - - var mode = this.config.interpolation; - opt = $.merge( { - onComplete: $.empty - }, opt || {}); - - this.fx.animate($.merge( { - hideLabels: true, - modes: [ - mode - ] - }, opt, { - onComplete: function(){ - that.busy = false; - opt.onComplete(); - } - })); - } - } -}); - -$jit.RGraph.$extend = true; - -(function(RGraph){ - - /* - Class: RGraph.Op - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - RGraph.Op = new Class( { - - Implements: Graph.Op - - }); - - /* - Class: RGraph.Plot - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - RGraph.Plot = new Class( { - - Implements: Graph.Plot - - }); - - /* - Object: RGraph.Label - - Custom extension of . - Contains custom , and extensions. - - Extends: - - All methods and subclasses. - - See also: - - , , , . - - */ - RGraph.Label = {}; - - /* - RGraph.Label.Native - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - RGraph.Label.Native = new Class( { - Implements: Graph.Label.Native - }); - - /* - RGraph.Label.SVG - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - RGraph.Label.SVG = new Class( { - Implements: Graph.Label.SVG, - - initialize: function(viz){ - this.viz = viz; - }, - - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller){ - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - tag.setAttribute('x', labelPos.x); - tag.setAttribute('y', labelPos.y); - - controller.onPlaceLabel(tag, node); - } - }); - - /* - RGraph.Label.HTML - - Custom extension of . - - Extends: - - All methods. - - See also: - - - - */ - RGraph.Label.HTML = new Class( { - Implements: Graph.Label.HTML, - - initialize: function(viz){ - this.viz = viz; - }, - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller){ - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - - var style = tag.style; - style.left = labelPos.x + 'px'; - style.top = labelPos.y + 'px'; - style.display = this.fitsInCanvas(labelPos, canvas)? '' : 'none'; - - controller.onPlaceLabel(tag, node); - } - }); - - /* - Class: RGraph.Plot.NodeTypes - - This class contains a list of built-in types. - Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'. - - You can add your custom node types, customizing your visualization to the extreme. - - Example: - - (start code js) - RGraph.Plot.NodeTypes.implement({ - 'mySpecialType': { - 'render': function(node, canvas) { - //print your custom node to canvas - }, - //optional - 'contains': function(node, pos) { - //return true if pos is inside the node or false otherwise - } - } - }); - (end code) - - */ - RGraph.Plot.NodeTypes = new Class({ - 'none': { - 'render': $.empty, - 'contains': $.lambda(false) - }, - 'circle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.circle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.circle.contains(npos, pos, dim); - } - }, - 'ellipse': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.ellipse.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.ellipse.contains(npos, pos, width, height); - } - }, - 'square': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.square.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.square.contains(npos, pos, dim); - } - }, - 'rectangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.rectangle.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.rectangle.contains(npos, pos, width, height); - } - }, - 'triangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.triangle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.triangle.contains(npos, pos, dim); - } - }, - 'star': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.star.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.star.contains(npos, pos, dim); - } - } - }); - - /* - Class: RGraph.Plot.EdgeTypes - - This class contains a list of built-in types. - Edge types implemented are 'none', 'line' and 'arrow'. - - You can add your custom edge types, customizing your visualization to the extreme. - - Example: - - (start code js) - RGraph.Plot.EdgeTypes.implement({ - 'mySpecialType': { - 'render': function(adj, canvas) { - //print your custom edge to canvas - }, - //optional - 'contains': function(adj, pos) { - //return true if pos is inside the arc or false otherwise - } - } - }); - (end code) - - */ - RGraph.Plot.EdgeTypes = new Class({ - 'none': $.empty, - 'line': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - this.edgeHelper.line.render(from, to, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon); - } - }, - 'arrow': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true), - dim = adj.getData('dim'), - direction = adj.data.$direction, - inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id); - this.edgeHelper.arrow.render(from, to, dim, inv, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon); - } - } - }); - -})($jit.RGraph); - - -/* - * File: Layouts.ForceDirected.js - * -*/ - -/* - * Class: Layouts.ForceDirected - * - * Implements a Force Directed Layout. - * - * Implemented By: - * - * - * - * Credits: - * - * Marcus Cobden - * - */ -Layouts.ForceDirected = new Class({ - - getOptions: function(random) { - var s = this.canvas.getSize(); - var w = s.width, h = s.height; - //count nodes - var count = 0; - this.graph.eachNode(function(n) { - count++; - }); - var k2 = w * h / count, k = Math.sqrt(k2); - var l = this.config.levelDistance; - - return { - width: w, - height: h, - tstart: w * 0.1, - nodef: function(x) { return k2 / (x || 1); }, - edgef: function(x) { return /* x * x / k; */ k * (x - l); } - }; - }, - - compute: function(property, incremental) { - var prop = $.splat(property || ['current', 'start', 'end']); - var opt = this.getOptions(); - NodeDim.compute(this.graph, prop, this.config); - this.graph.computeLevels(this.root, 0, "ignore"); - this.graph.eachNode(function(n) { - $.each(prop, function(p) { - var pos = n.getPos(p); - if(pos.equals(Complex.KER)) { - pos.x = opt.width/5 * (Math.random() - 0.5); - pos.y = opt.height/5 * (Math.random() - 0.5); - } - //initialize disp vector - n.disp = {}; - $.each(prop, function(p) { - n.disp[p] = $C(0, 0); - }); - }); - }); - this.computePositions(prop, opt, incremental); - }, - - computePositions: function(property, opt, incremental) { - var times = this.config.iterations, i = 0, that = this; - if(incremental) { - (function iter() { - for(var total=incremental.iter, j=0; j= times) { - incremental.onComplete(); - return; - } - } - incremental.onStep(Math.round(i / (times -1) * 100)); - setTimeout(iter, 1); - })(); - } else { - for(; i < times; i++) { - opt.t = opt.tstart * (1 - i/(times -1)); - this.computePositionStep(property, opt); - } - } - }, - - computePositionStep: function(property, opt) { - var graph = this.graph; - var min = Math.min, max = Math.max; - var dpos = $C(0, 0); - //calculate repulsive forces - graph.eachNode(function(v) { - //initialize disp - $.each(property, function(p) { - v.disp[p].x = 0; v.disp[p].y = 0; - }); - graph.eachNode(function(u) { - if(u.id != v.id) { - $.each(property, function(p) { - var vp = v.getPos(p), up = u.getPos(p); - dpos.x = vp.x - up.x; - dpos.y = vp.y - up.y; - var norm = dpos.norm() || 1; - v.disp[p].$add(dpos - .$scale(opt.nodef(norm) / norm)); - }); - } - }); - }); - //calculate attractive forces - var T = !!graph.getNode(this.root).visited; - graph.eachNode(function(node) { - node.eachAdjacency(function(adj) { - var nodeTo = adj.nodeTo; - if(!!nodeTo.visited === T) { - $.each(property, function(p) { - var vp = node.getPos(p), up = nodeTo.getPos(p); - dpos.x = vp.x - up.x; - dpos.y = vp.y - up.y; - var norm = dpos.norm() || 1; - node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm)); - nodeTo.disp[p].$add(dpos.$scale(-1)); - }); - } - }); - node.visited = !T; - }); - //arrange positions to fit the canvas - var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2; - graph.eachNode(function(u) { - $.each(property, function(p) { - var disp = u.disp[p]; - var norm = disp.norm() || 1; - var p = u.getPos(p); - p.$add($C(disp.x * min(Math.abs(disp.x), t) / norm, - disp.y * min(Math.abs(disp.y), t) / norm)); - p.x = min(w2, max(-w2, p.x)); - p.y = min(h2, max(-h2, p.y)); - }); - }); - } -}); - -/* - * File: ForceDirected.js - */ - -/* - Class: ForceDirected - - A visualization that lays graphs using a Force-Directed layout algorithm. - - Inspired by: - - Force-Directed Drawing Algorithms (Stephen G. Kobourov) - - Implements: - - All methods - - Constructor Options: - - Inherits options from - - - - - - - - - - - - - - - - - - - - - Additionally, there are two parameters - - levelDistance - (number) Default's *50*. The natural length desired for the edges. - iterations - (number) Default's *50*. The number of iterations for the spring layout simulation. Depending on the browser's speed you could set this to a more 'interesting' number, like *200*. - - Instance Properties: - - canvas - Access a instance. - graph - Access a instance. - op - Access a instance. - fx - Access a instance. - labels - Access a interface implementation. - -*/ - -$jit.ForceDirected = new Class( { - - Implements: [ Loader, Extras, Layouts.ForceDirected ], - - initialize: function(controller) { - var $ForceDirected = $jit.ForceDirected; - - var config = { - iterations: 50, - levelDistance: 50 - }; - - this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge", - "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "Label"), config, controller); - - var canvasConfig = this.config; - if(canvasConfig.useCanvas) { - this.canvas = canvasConfig.useCanvas; - this.config.labelContainer = this.canvas.id + '-label'; - } else { - if(canvasConfig.background) { - canvasConfig.background = $.merge({ - type: 'Circles' - }, canvasConfig.background); - } - this.canvas = new Canvas(this, canvasConfig); - this.config.labelContainer = (typeof canvasConfig.injectInto == 'string'? canvasConfig.injectInto : canvasConfig.injectInto.id) + '-label'; - } - - this.graphOptions = { - 'klass': Complex, - 'Node': { - 'selected': false, - 'exist': true, - 'drawn': true - } - }; - this.graph = new Graph(this.graphOptions, this.config.Node, - this.config.Edge); - this.labels = new $ForceDirected.Label[canvasConfig.Label.type](this); - this.fx = new $ForceDirected.Plot(this, $ForceDirected); - this.op = new $ForceDirected.Op(this); - this.json = null; - this.busy = false; - // initialize extras - this.initializeExtras(); - }, - - /* - Method: refresh - - Computes positions and plots the tree. - */ - refresh: function() { - // START METAMAPS CODE - // this.compute(); - // END METAMAPS CODE - // ORIGINAL CODE: this.compute(); - this.plot(); - }, - - reposition: function() { - this.compute('end'); - }, - -/* - Method: computeIncremental - - Performs the Force Directed algorithm incrementally. - - Description: - - ForceDirected algorithms can perform many computations and lead to JavaScript taking too much time to complete. - This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and - avoiding browser messages such as "This script is taking too long to complete". - - Parameters: - - opt - (object) The object properties are described below - - iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property - of your class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces. - - property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. - You can also set an array of these properties. If you'd like to keep the current node positions but to perform these - computations for final animation positions then you can just choose 'end'. - - onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal - parameter a percentage value. - - onComplete - A callback function called when the algorithm completed. - - Example: - - In this example I calculate the end positions and then animate the graph to those positions - - (start code js) - var fd = new $jit.ForceDirected(...); - fd.computeIncremental({ - iter: 20, - property: 'end', - onStep: function(perc) { - Log.write("loading " + perc + "%"); - }, - onComplete: function() { - Log.write("done"); - fd.animate(); - } - }); - (end code) - - In this example I calculate all positions and (re)plot the graph - - (start code js) - var fd = new ForceDirected(...); - fd.computeIncremental({ - iter: 20, - property: ['end', 'start', 'current'], - onStep: function(perc) { - Log.write("loading " + perc + "%"); - }, - onComplete: function() { - Log.write("done"); - fd.plot(); - } - }); - (end code) - - */ - computeIncremental: function(opt) { - opt = $.merge( { - iter: 20, - property: 'end', - onStep: $.empty, - onComplete: $.empty - }, opt || {}); - - this.config.onBeforeCompute(this.graph.getNode(this.root)); - this.compute(opt.property, opt); - }, - - /* - Method: plot - - Plots the ForceDirected graph. This is a shortcut to *fx.plot*. - */ - plot: function() { - this.fx.plot(); - }, - - /* - Method: animate - - Animates the graph from the current positions to the 'end' node positions. - */ - animate: function(opt) { - this.fx.animate($.merge( { - modes: [ 'linear' ] - }, opt || {})); - } -}); - -$jit.ForceDirected.$extend = true; - -(function(ForceDirected) { - - /* - Class: ForceDirected.Op - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected.Op = new Class( { - - Implements: Graph.Op - - }); - - /* - Class: ForceDirected.Plot - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected.Plot = new Class( { - - Implements: Graph.Plot - - }); - - /* - Class: ForceDirected.Label - - Custom extension of . - Contains custom , and extensions. - - Extends: - - All methods and subclasses. - - See also: - - , , , . - - */ - ForceDirected.Label = {}; - - /* - ForceDirected.Label.Native - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected.Label.Native = new Class( { - Implements: Graph.Label.Native - }); - - /* - ForceDirected.Label.SVG - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected.Label.SVG = new Class( { - Implements: Graph.Label.SVG, - - initialize: function(viz) { - this.viz = viz; - }, - - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - tag.setAttribute('x', labelPos.x); - tag.setAttribute('y', labelPos.y); - - controller.onPlaceLabel(tag, node); - } - }); - - /* - ForceDirected.Label.HTML - - Custom extension of . - - Extends: - - All methods. - - See also: - - - - */ - ForceDirected.Label.HTML = new Class( { - Implements: Graph.Label.HTML, - - initialize: function(viz) { - this.viz = viz; - }, - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - var style = tag.style; - style.left = labelPos.x + 'px'; - style.top = labelPos.y + 'px'; - style.display = this.fitsInCanvas(labelPos, canvas) ? '' : 'none'; - - controller.onPlaceLabel(tag, node); - } - }); - - /* - Class: ForceDirected.Plot.NodeTypes - - This class contains a list of built-in types. - Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'. - - You can add your custom node types, customizing your visualization to the extreme. - - Example: - - (start code js) - ForceDirected.Plot.NodeTypes.implement({ - 'mySpecialType': { - 'render': function(node, canvas) { - //print your custom node to canvas - }, - //optional - 'contains': function(node, pos) { - //return true if pos is inside the node or false otherwise - } - } - }); - (end code) - - */ - ForceDirected.Plot.NodeTypes = new Class({ - 'none': { - 'render': $.empty, - 'contains': $.lambda(false) - }, - 'circle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.circle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.circle.contains(npos, pos, dim); - } - }, - 'ellipse': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.ellipse.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.ellipse.contains(npos, pos, width, height); - } - }, - 'square': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.square.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.square.contains(npos, pos, dim); - } - }, - 'rectangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.rectangle.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.rectangle.contains(npos, pos, width, height); - } - }, - 'triangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.triangle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.triangle.contains(npos, pos, dim); - } - }, - 'star': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.star.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.star.contains(npos, pos, dim); - } - } - }); - - /* - Class: ForceDirected.Plot.EdgeTypes - - This class contains a list of built-in types. - Edge types implemented are 'none', 'line' and 'arrow'. - - You can add your custom edge types, customizing your visualization to the extreme. - - Example: - - (start code js) - ForceDirected.Plot.EdgeTypes.implement({ - 'mySpecialType': { - 'render': function(adj, canvas) { - //print your custom edge to canvas - }, - //optional - 'contains': function(adj, pos) { - //return true if pos is inside the arc or false otherwise - } - } - }); - (end code) - - */ - ForceDirected.Plot.EdgeTypes = new Class({ - 'none': $.empty, - 'line': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - this.edgeHelper.line.render(from, to, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon); - } - }, - 'arrow': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true), - dim = adj.getData('dim'), - direction = adj.data.$direction, - inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id); - this.edgeHelper.arrow.render(from, to, dim, inv, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon); - } - } - }); - -})($jit.ForceDirected); - - -/* - * Vector3 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE - */ - -var Vector3 = function(x, y, z) { - this.x = x || 0; - this.y = y || 0; - this.z = z || 0; -}; - -$jit.Vector3 = Vector3; - -Vector3.prototype = { - set: function(v) { - this.x = v.x; - this.y = v.y; - this.z = v.z; - }, - - setc: function(x, y, z) { - this.x = x; - this.y = y; - this.z = z; - }, - - getc: function() { - return this; - }, - - //TODO(nico): getp - - add: function(v1, v2) { - this.x = v1.x + v2.x; - this.y = v1.y + v2.y; - this.z = v1.z + v2.z; - return this; - }, - - $add: function(v) { - this.x += v.x; - this.y += v.y; - this.z += v.z; - return this; - }, - - addScalar: function(s) { - this.x += s; - this.y += s; - this.z += s; - return this; - }, - - sub: function(v1, v2) { - this.x = v1.x - v2.x; - this.y = v1.y - v2.y; - this.z = v1.z - v2.z; - return this; - }, - - $sub: function(v) { - this.x -= v.x; - this.y -= v.y; - this.z -= v.z; - return this; - }, - - cross: function(v1, v2) { - this.x = v1.y * v2.z - v1.z * v2.y; - this.y = v1.z * v2.x - v1.x * v2.z; - this.z = v1.x * v2.y - v1.y * v2.x; - return this; - }, - - $cross: function(v) { - var tx = this.x, ty = this.y, tz = this.z; - - this.x = ty * v.z - tz * v.y; - this.y = tz * v.x - tx * v.z; - this.z = tx * v.y - ty * v.x; - return this; - }, - - $multiply: function(v) { - this.x *= v.x; - this.y *= v.y; - this.z *= v.z; - return this; - }, - - $scale: function(s) { - this.x *= s; - this.y *= s; - this.z *= s; - return this; - }, - - dot: function(v) { - return this.x * v.x + this.y * v.y + this.z * v.z; - }, - - distanceTo: function(v) { - return Math.sqrt(this.distanceToSquared(v)); - }, - - distanceToSquared: function(v) { - var dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z; - return dx * dx + dy * dy + dz * dz; - }, - - norm: function() { - return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z ); - }, - - normSquared: function() { - return this.x * this.x + this.y * this.y + this.z * this.z; - }, - - negate: function() { - this.x = - this.x; - this.y = - this.y; - this.z = - this.z; - return this; - }, - - normalize: function() { - var len = this.norm(); - if ( len > 0 ) { - this.$scale(1 / len); - } - return this; - }, - - isZero: function() { - var almostZero = 0.0001, - abs = Math.abs; - - return abs(this.x) < almostZero && abs(this.y) < almostZero && abs(this.z) < almostZero; - }, - - clone: function() { - return new Vector3(this.x, this.y, this.z); - } -}; - -var $V3 = function(a, b, c) { return new Vector3(a, b, c); }; - -/* - * Matrix4 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE - */ - -var Matrix4 = function() { - this._x = new Vector3(); - this._y = new Vector3(); - this._z = new Vector3(); -}; - -$jit.Matrix4 = Matrix4; - -Matrix4.prototype = { - - n11: 1, n12: 0, n13: 0, n14: 0, - n21: 0, n22: 1, n23: 0, n24: 0, - n31: 0, n32: 0, n33: 1, n34: 0, - n41: 0, n42: 0, n43: 0, n44: 1, - - identity: function() { - this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0; - this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0; - this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0; - this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1; - }, - - lookAt: function(eye, center, up) { - var x = this._x, y = this._y, z = this._z; - - z.sub(eye, center); - z.normalize(); - - x.cross(up, z); - x.normalize(); - - y.cross(z, x); - y.normalize(); - - this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye ); - this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye ); - this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye ); - }, - - transform: function(v) { - var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0; - - v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw; - v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw; - v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw; - - vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw; - - if(v.w) { - v.w = vw; - } else { - v.x = v.x / vw; - v.y = v.y / vw; - v.z = v.z / vw; - } - }, - - multiply: function(a, b) { - this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41; - this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42; - this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43; - this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44; - - this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41; - this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42; - this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n43; - this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44; - - this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41; - this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42; - this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43; - this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44; - - this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41; - this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42; - this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43; - this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44; - }, - - $multiply: function(m) { - var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14, - n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24, - n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34, - n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44; - - this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41; - this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42; - this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43; - this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44; - - this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41; - this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42; - this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43; - this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44; - - this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41; - this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42; - this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43; - this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44; - - this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41; - this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42; - this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43; - this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44; - }, - - $scale: function(s) { - this.n11 *= s; this.n12 *= s; this.n13 *= s; this.n14 *= s; - this.n21 *= s; this.n22 *= s; this.n23 *= s; this.n24 *= s; - this.n31 *= s; this.n32 *= s; this.n33 *= s; this.n34 *= s; - this.n41 *= s; this.n42 *= s; this.n43 *= s; this.n44 *= s; - return this; - }, - - $add: function(m) { - this.n11 += m.n11; - this.n12 += m.n12; - this.n13 += m.n13; - this.n14 += m.n14; - this.n21 += m.n21; - this.n22 += m.n22; - this.n23 += m.n23; - this.n24 += m.n24; - this.n31 += m.n31; - this.n32 += m.n32; - this.n33 += m.n33; - this.n34 += m.n34; - this.n41 += m.n41; - this.n42 += m.n42; - this.n43 += m.n43; - this.n44 += m.n44; - return this; - }, - - determinant: function() { - return ( - this.n14 * this.n23 * this.n32 * this.n41- - this.n13 * this.n24 * this.n32 * this.n41- - this.n14 * this.n22 * this.n33 * this.n41+ - this.n12 * this.n24 * this.n33 * this.n41+ - - this.n13 * this.n22 * this.n34 * this.n41- - this.n12 * this.n23 * this.n34 * this.n41- - this.n14 * this.n23 * this.n31 * this.n42+ - this.n13 * this.n24 * this.n31 * this.n42+ - - this.n14 * this.n21 * this.n33 * this.n42- - this.n11 * this.n24 * this.n33 * this.n42- - this.n13 * this.n21 * this.n34 * this.n42+ - this.n11 * this.n23 * this.n34 * this.n42+ - - this.n14 * this.n22 * this.n31 * this.n43- - this.n12 * this.n24 * this.n31 * this.n43- - this.n14 * this.n21 * this.n32 * this.n43+ - this.n11 * this.n24 * this.n32 * this.n43+ - - this.n12 * this.n21 * this.n34 * this.n43- - this.n11 * this.n22 * this.n34 * this.n43- - this.n13 * this.n22 * this.n31 * this.n44+ - this.n12 * this.n23 * this.n31 * this.n44+ - - this.n13 * this.n21 * this.n32 * this.n44- - this.n11 * this.n23 * this.n32 * this.n44- - this.n12 * this.n21 * this.n33 * this.n44+ - this.n11 * this.n22 * this.n33 * this.n44 ); - }, - - $transpose: function() { - function swap(obj, p1, p2) { - var aux = obj[p1]; - obj[p1] = obj[p2]; - obj[p2] = aux; - } - - swap(this, 'n21', 'n12'); - swap(this, 'n31', 'n13'); - swap(this, 'n32', 'n23'); - swap(this, 'n41', 'n14'); - swap(this, 'n42', 'n24'); - swap(this, 'n43', 'n34'); - return this; - }, - - clone: function() { - var m = new Matrix4(); - m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14; - m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24; - m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34; - m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44; - return m; - }, - - flatten: function() { - return [this.n11, this.n21, this.n31, this.n41, - this.n12, this.n22, this.n32, this.n42, - this.n13, this.n23, this.n33, this.n43, - this.n14, this.n24, this.n34, this.n44]; - } -}; - -Matrix4.translationMatrix = function(x, y, z) { - var m = new Matrix4(); - - m.n14 = x; - m.n24 = y; - m.n34 = z; - - return m; -}; - -Matrix4.scaleMatrix = function(x, y, z) { - var m = new Matrix4(); - - m.n11 = x; - m.n22 = y; - m.n33 = z; - - return m; -}; - -Matrix4.rotationXMatrix = function(theta) { - var rot = new Matrix4(); - - rot.n22 = rot.n33 = Math.cos( theta ); - rot.n32 = Math.sin( theta ); - rot.n23 = - rot.n32; - - return rot; -}; - -Matrix4.rotationYMatrix = function(theta) { - var rot = new Matrix4(); - - rot.n11 = rot.n33 = Math.cos( theta ); - rot.n13 = Math.sin( theta ); - rot.n31 = - rot.n13; - - return rot; -}; - -Matrix4.rotationZMatrix = function(theta) { - var rot = new Matrix4(); - - rot.n11 = rot.n22 = Math.cos( theta ); - rot.n21 = Math.sin( theta ); - rot.n12 = - rot.n21; - - return rot; -}; - -Matrix4.makeInvert = function(m1) { - var m2 = new Matrix4(); - - m2.n11 = m1.n23*m1.n34*m1.n42 - m1.n24*m1.n33*m1.n42 + m1.n24*m1.n32*m1.n43 - m1.n22*m1.n34*m1.n43 - m1.n23*m1.n32*m1.n44 + m1.n22*m1.n33*m1.n44; - m2.n12 = m1.n14*m1.n33*m1.n42 - m1.n13*m1.n34*m1.n42 - m1.n14*m1.n32*m1.n43 + m1.n12*m1.n34*m1.n43 + m1.n13*m1.n32*m1.n44 - m1.n12*m1.n33*m1.n44; - m2.n13 = m1.n13*m1.n24*m1.n42 - m1.n14*m1.n23*m1.n42 + m1.n14*m1.n22*m1.n43 - m1.n12*m1.n24*m1.n43 - m1.n13*m1.n22*m1.n44 + m1.n12*m1.n23*m1.n44; - m2.n14 = m1.n14*m1.n23*m1.n32 - m1.n13*m1.n24*m1.n32 - m1.n14*m1.n22*m1.n33 + m1.n12*m1.n24*m1.n33 + m1.n13*m1.n22*m1.n34 - m1.n12*m1.n23*m1.n34; - m2.n21 = m1.n24*m1.n33*m1.n41 - m1.n23*m1.n34*m1.n41 - m1.n24*m1.n31*m1.n43 + m1.n21*m1.n34*m1.n43 + m1.n23*m1.n31*m1.n44 - m1.n21*m1.n33*m1.n44; - m2.n22 = m1.n13*m1.n34*m1.n41 - m1.n14*m1.n33*m1.n41 + m1.n14*m1.n31*m1.n43 - m1.n11*m1.n34*m1.n43 - m1.n13*m1.n31*m1.n44 + m1.n11*m1.n33*m1.n44; - m2.n23 = m1.n14*m1.n23*m1.n41 - m1.n13*m1.n24*m1.n41 - m1.n14*m1.n21*m1.n43 + m1.n11*m1.n24*m1.n43 + m1.n13*m1.n21*m1.n44 - m1.n11*m1.n23*m1.n44; - m2.n24 = m1.n13*m1.n24*m1.n31 - m1.n14*m1.n23*m1.n31 + m1.n14*m1.n21*m1.n33 - m1.n11*m1.n24*m1.n33 - m1.n13*m1.n21*m1.n34 + m1.n11*m1.n23*m1.n34; - m2.n31 = m1.n22*m1.n34*m1.n41 - m1.n24*m1.n32*m1.n41 + m1.n24*m1.n31*m1.n42 - m1.n21*m1.n34*m1.n42 - m1.n22*m1.n31*m1.n44 + m1.n21*m1.n32*m1.n44; - m2.n32 = m1.n14*m1.n32*m1.n41 - m1.n12*m1.n34*m1.n41 - m1.n14*m1.n31*m1.n42 + m1.n11*m1.n34*m1.n42 + m1.n12*m1.n31*m1.n44 - m1.n11*m1.n32*m1.n44; - m2.n33 = m1.n13*m1.n24*m1.n41 - m1.n14*m1.n22*m1.n41 + m1.n14*m1.n21*m1.n42 - m1.n11*m1.n24*m1.n42 - m1.n12*m1.n21*m1.n44 + m1.n11*m1.n22*m1.n44; - m2.n34 = m1.n14*m1.n22*m1.n31 - m1.n12*m1.n24*m1.n31 - m1.n14*m1.n21*m1.n32 + m1.n11*m1.n24*m1.n32 + m1.n12*m1.n21*m1.n34 - m1.n11*m1.n22*m1.n34; - m2.n41 = m1.n23*m1.n32*m1.n41 - m1.n22*m1.n33*m1.n41 - m1.n23*m1.n31*m1.n42 + m1.n21*m1.n33*m1.n42 + m1.n22*m1.n31*m1.n43 - m1.n21*m1.n32*m1.n43; - m2.n42 = m1.n12*m1.n33*m1.n41 - m1.n13*m1.n32*m1.n41 + m1.n13*m1.n31*m1.n42 - m1.n11*m1.n33*m1.n42 - m1.n12*m1.n31*m1.n43 + m1.n11*m1.n32*m1.n43; - m2.n43 = m1.n13*m1.n22*m1.n41 - m1.n12*m1.n23*m1.n41 - m1.n13*m1.n21*m1.n42 + m1.n11*m1.n23*m1.n42 + m1.n12*m1.n21*m1.n43 - m1.n11*m1.n22*m1.n43; - m2.n44 = m1.n12*m1.n23*m1.n31 - m1.n13*m1.n22*m1.n31 + m1.n13*m1.n21*m1.n32 - m1.n11*m1.n23*m1.n32 - m1.n12*m1.n21*m1.n33 + m1.n11*m1.n22*m1.n33; - m2.$scale(1 / m1.determinant()); - - return m2; -}; - -Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) { - var m, x, y, a, b, c, d; - - m = new Matrix4(); - x = 2 * near / ( right - left ); - y = 2 * near / ( top - bottom ); - a = ( right + left ) / ( right - left ); - b = ( top + bottom ) / ( top - bottom ); - c = - ( far + near ) / ( far - near ); - d = - 2 * far * near / ( far - near ); - - m.n11 = x; m.n12 = 0; m.n13 = a; m.n14 = 0; - m.n21 = 0; m.n22 = y; m.n23 = b; m.n24 = 0; - m.n31 = 0; m.n32 = 0; m.n33 = c; m.n34 = d; - m.n41 = 0; m.n42 = 0; m.n43 = - 1; m.n44 = 0; - - return m; -}; - -Matrix4.makePerspective = function( fov, aspect, near, far ) { - var ymax, ymin, xmin, xmax; - - ymax = near * Math.tan( fov * Math.PI / 360 ); - ymin = - ymax; - xmin = ymin * aspect; - xmax = ymax * aspect; - - return Matrix4.makeFrustum( xmin, xmax, ymin, ymax, near, far ); -}; - -Matrix4.makeOrtho = function( left, right, top, bottom, near, far ) { - var m, x, y, z, w, h, p; - - m = new Matrix4(); - w = right - left; - h = bottom - top; - p = far - near; - x = ( right + left ) / w; - y = ( bottom + top ) / h; - z = ( far + near ) / p; - - m.n11 = 2 / w; m.n12 = 0; m.n13 = 0; m.n14 = -x; - m.n21 = 0; m.n22 = 2 / h; m.n23 = 0; m.n24 = -y; - m.n31 = 0; m.n32 = 0; m.n33 = -2 / p; m.n34 = -z; - m.n41 = 0; m.n42 = 0; m.n43 = 0; m.n44 = 1; - - return m; -}; - - -/* - * Camera class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE - */ - -var Camera = function (fov, aspect, near, far) { - this.projectionMatrix = Matrix4.makePerspective(fov, aspect, near, far); -}; - -Camera.prototype = { - position: new Vector3, - target: { - position: new Vector3 - }, - up: new Vector3(0, 1, 0), - matrix: new Matrix4, - - updateMatrix: function() { - this.matrix.lookAt(this.position, this.target.position, this.up); - } -}; - - -Canvas.Base['3D'] = new Class({ - Implements: Canvas.Base['2D'], - - program: null, - camera: null, - - initialize: function(viz) { - this.viz = viz; - this.opt = viz.config; - this.size = false; - this.createCanvas(); - this.initWebGL(); - this.initCamera(); - }, - - initWebGL: function() { - //initialize context - var gl = this.getCtx(); - //get viewport size - var size = this.getSize(); - //compile and get shaders - var fragmentShader = this.getShader(Canvas.Base['3D'].FragmentShader, gl.FRAGMENT_SHADER); - var vertexShader = this.getShader(Canvas.Base['3D'].VertexShader, gl.VERTEX_SHADER); - //create program and link shaders - var program = gl.createProgram(); - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - throw "Could not link shaders"; - } - gl.useProgram(program); - //bind name to variable location in shaders - $.extend(program, { - 'viewMatrix': gl.getUniformLocation(program, 'viewMatrix'), - 'projectionMatrix': gl.getUniformLocation(program, 'projectionMatrix'), - 'normalMatrix': gl.getUniformLocation(program, 'normalMatrix'), - 'color': gl.getUniformLocation(program, 'color'), - - 'enableLighting': gl.getUniformLocation(program, 'enableLighting'), - 'ambientColor': gl.getUniformLocation(program, 'ambientColor'), - 'directionalColor': gl.getUniformLocation(program, 'directionalColor'), - 'lightingDirection': gl.getUniformLocation(program, 'lightingDirection'), - - 'position': gl.getAttribLocation(program, 'position'), - 'normal': gl.getAttribLocation(program, 'normal'), - }); - gl.enableVertexAttribArray(program.position); - gl.enableVertexAttribArray(program.normal); - this.program = program; - //set general rendering options - gl.clearColor(0, 0, 0, 0); - gl.clearDepth(1); - - gl.enable(gl.DEPTH_TEST); - gl.depthFunc(gl.LEQUAL); - - gl.enable(gl.BLEND); - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); - - gl.viewport(0, 0, size.width, size.height); - }, - - initCamera: function() { - var size = this.getSize(); - var camera = new Camera(75, size.width / size.height, 1, 1000); - camera.position.z = 500; - this.camera = camera; - }, - - getShader: function(src, type) { - var gl = this.ctx; - var shader = gl.createShader(type); - gl.shaderSource(shader, src); - gl.compileShader(shader); - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - var info = gl.getShaderInfoLog(shader); - throw "Could not compile shader src: " + info; - } - return shader; - }, - - getCtx: function() { - if(!this.ctx) - return this.ctx = this.canvas.getContext('experimental-webgl'); - return this.ctx; - }, - - resize: function(width, height) { - var size = this.getSize(), - canvas = this.canvas, - styles = canvas.style, - gl = this.getCtx(); - this.size = false; - canvas.width = width; - canvas.height = height; - styles.width = width + "px"; - styles.height = height + "px"; - gl.viewport(0, 0, width, height); - - this.translateOffsetX = - this.translateOffsetY = 0; - this.scaleOffsetX = - this.scaleOffsetY = 1; - this.clear(); - this.viz.resize(width, height, this); - }, - - translateToCenter: $.empty, - scale: $.empty, - - translate: function(x, y, z, disablePlot) { - var sx = this.scaleOffsetX, - sy = this.scaleOffsetY; - this.translateOffsetX += x*sx; - this.translateOffsetY += y*sy; - var pos = this.camera.position; - pos.x += x; - pos.y += y; - pos.z += z; - !disablePlot && this.plot(); - }, - - clear: function(){ - var gl = this.getCtx(); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - //TODO(nico) is this OK? I mean, to put this line here. - this.camera.updateMatrix(); - }, - - plot: function() { - this.clear(); - this.viz.plot(this); - } -}); - -//Shaders code -Canvas.Base['3D'].FragmentShader = [ - "#ifdef GL_ES", - "precision highp float;", - "#endif", - - "varying vec4 vcolor;", - "varying vec3 lightWeighting;", - - "void main(){", - - "gl_FragColor = vec4(vcolor.rgb * lightWeighting, vcolor.a);", - - "}" -].join("\n"); - -Canvas.Base['3D'].VertexShader = [ - "attribute vec3 position;", - "attribute vec3 normal;", - "uniform vec4 color;", - - "uniform mat4 viewMatrix;", - "uniform mat4 projectionMatrix;", - "uniform mat4 normalMatrix;", - - "uniform bool enableLighting;", - "uniform vec3 ambientColor;", - "uniform vec3 directionalColor;", - "uniform vec3 lightingDirection;", - - "varying vec4 vcolor;", - "varying vec3 lightWeighting;", - - "void main(void) {", - - "if(!enableLighting) {", - "lightWeighting = vec3(1.0, 1.0, 1.0);", - "} else {", - "vec4 transformedNormal = normalMatrix * vec4(normal, 1.0);", - "float directionalLightWeighting = max(dot(transformedNormal.xyz, lightingDirection), 0.0);", - "lightWeighting = ambientColor + directionalColor * directionalLightWeighting;", - "}", - - "vcolor = color;", - "gl_Position = projectionMatrix * viewMatrix * vec4( position, 1.0 );", - - "}" -].join("\n"); - -/* - * Some of the geometries where inspired by three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE - */ - -var O3D = {}; - -$jit.O3D = O3D; - -O3D.base = new Class({ - //array of { x, y, z } of float - vertices: [], - //array of { a, b, c, d? } of int - faces: [], - //updated on plotNode/plotEdge - position: new Vector3, - rotation: new Vector3, - scale: new Vector3(1, 1, 1), - //intrinsic coordinates - matrix: new Matrix4, - - update: function(elem) { - if(elem.nodeFrom && elem.nodeTo) { - this.updateEdge(elem); - } else { - this.updateNode(elem); - } - }, - - updateNode: $.empty, - - updateEdge: function(elem) { - this.updateNode(elem); - }, - - updateMatrix: function() { - var pos = this.position, - rot = this.rotation, - scale = this.scale, - matrix = this.matrix; - - matrix.identity(); - - matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) ); - matrix.$multiply( Matrix4.rotationXMatrix( rot.x ) ); - matrix.$multiply( Matrix4.rotationYMatrix( rot.y ) ); - matrix.$multiply( Matrix4.rotationZMatrix( rot.z ) ); - matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) ); - }, - //compute faces normals - computeNormals: function () { - for (var f=0, vs=this.vertices, fs=this.faces, len=fs.length; f < len; f++) { - var va = vs[fs[f].a], - vb = vs[fs[f].b], - vc = vs[fs[f].c], - cb = new Vector3, - ab = new Vector3; - - cb.sub(vc, vb); - ab.sub(va, vb); - cb.$cross(ab); - - if (!cb.isZero()) cb.normalize(); - - fs[f].normal = cb; - } - } -}); - -//IsoCube -function IsoCube() { - var vs = this.vertices, - f4 = this.faces, - vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); }, - f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); }; - - vsp( 1, 1, -1); - vsp( 1, -1, -1); - vsp(-1, -1, -1); - vsp(-1, 1, -1); - vsp( 1, 1, 1); - vsp( 1, -1, 1); - vsp(-1, -1, 1); - vsp(-1, 1, 1); - - f4p(0, 1, 2, 3); - f4p(4, 7, 6, 5); - f4p(0, 4, 5, 1); - f4p(1, 5, 6, 2); - f4p(2, 6, 7, 3); - f4p(4, 0, 3, 7); -} - -//Cube -O3D.cube = new Class({ - Implements: O3D.base, - - initialize: function() { - IsoCube.call(this); - this.computeNormals(); - }, - - updateNode: function(obj) { - var dim = obj.getData('dim'), - pos = obj.pos; - - this.position.setc(pos.x, pos.y, pos.z); - this.scale.setc(dim, dim, dim); - this.updateMatrix(); - } -}); - -O3D.sphere = new Class({ - Implements: O3D.base, - - radius: 1, - segments_width: 10, - segments_height: 10, - - initialize: function() { - var radius = this.radius, - segments_width = this.segments_width, - segments_height = this.segments_height, - gridX = segments_width || 8, - gridY = segments_height || 6, - cos = Math.cos, - sin = Math.sin, - max = Math.max, - pi = Math.PI; - - var iHor = max(3, gridX), - iVer = max(2, gridY), - aVtc = []; - - for(var j=0; j < (iVer + 1) ; j++) { - var fRad1 = j / iVer, - fZ = radius * cos(fRad1 * pi), - fRds = radius * sin(fRad1 * pi), - aRow = [], - oVtx = 0; - - for(var i=0; i 0)) { - oVtx = this.vertices.push({ x: fY, y: fZ, z: fX}) - 1; - } - aRow.push(oVtx); - } - aVtc.push(aRow); - } - - var iVerNum = aVtc.length; - for (var j=0; j 0) { - for (var i = 0; i 1) { - this.faces.push({ a: aP1, b: aP3, c: aP4 }); - } - } - } - } - this.computeNormals(); - }, - - updateNode: function(obj) { - var dim = obj.getData('dim'), - pos = obj.pos; - - this.position.setc(pos.x, pos.y, pos.z); - this.scale.setc(dim, dim, dim); - this.updateMatrix(); - } - -}); - - -O3D.tube = new Class({ - Implements: O3D.base, - - numSegs: 10, - dim: 1, - initialize: function() { - var vs = this.vertices, - f4 = this.faces, - vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); }, - f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); }; - - var scope = this, - sin = Math.sin, - cos = Math.cos, - pi = Math.PI, - pi2 = pi * 2, - numSegs = this.numSegs, - topRad = this.dim, - botRad = this.dim; - - // Top circle vertices - for (var i = 0; i < numSegs; i++) { - vsp(sin(pi2 * i / numSegs) * topRad, cos(pi2 * i / numSegs) * topRad, -0.5); - } - // Bottom circle vertices - for (var i = 0; i < numSegs; i++) { - vsp(sin(pi2 * i / numSegs) * botRad, cos(pi2 * i / numSegs) * botRad, 0.5); - } - // Body - for (var i = 0; i < numSegs; i++) { - f4p(i, (i + 1) % numSegs, numSegs + (i + 1) % numSegs, i + numSegs); - } - this.computeNormals(); - }, - - updateEdge: function(obj) { - var lineWidth = obj.getData('lineWidth'), - nodeFrom = obj.nodeFrom, - nodeTo = obj.nodeTo, - nodeFromPos = nodeFrom.pos, - nodeToPos = nodeTo.pos, - dist = nodeFromPos.distanceTo(nodeToPos), - middle = new Vector3, - currentDir = new Vector3(0, 0, 1), - dvec = new Vector3; - - middle.add(nodeFromPos, nodeToPos).$scale(0.5); - dvec.sub(nodeToPos, nodeFromPos).normalize(); - - var c = dvec.dot(currentDir), - xc = dvec.dot(new Vector3(1, 0, 0)), - yc = dvec.dot(new Vector3(0, 1, 0)), - t = 1 - c, - rotAngle = Math.acos(c), - s = Math.sin(rotAngle), - rotAxis = currentDir.$cross(dvec).normalize(), - x = rotAxis.x, - y = rotAxis.y, - z = rotAxis.z; - - var rot = new Matrix4(); - rot.n11 = t * x * x + c; - rot.n12 = t * x * y - s * z; - rot.n13 = t * x * z + s * y; - rot.n21 = t * x * y + s * z; - rot.n22 = t * y * y + c; - rot.n23 = t * y * z - s * x; - rot.n31 = t * x * z - s * y; - rot.n32 = t * y * z + s * x; - rot.n33 = t * z * z + c; - this.rotationMatrix = rot; - this.scale.setc(lineWidth, lineWidth, dist); - this.position.setc(middle.x, middle.y, middle.z); - this.updateMatrix(); - }, - - updateMatrix: function() { - var pos = this.position, - scale = this.scale, - matrix = this.matrix; - - matrix.identity(); - - matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) ); - matrix.$multiply( this.rotationMatrix ); - matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) ); - } - -}); - - -/* - * File: Layouts.ForceDirected3D.js - * -*/ - -/* - * Class: Layouts.ForceDirected3D - * - * Implements a Force Directed Layout. - * - * Implemented By: - * - * - * - */ -Layouts.ForceDirected3D = new Class({ - - getOptions: function() { - var s = this.canvas.getSize(); - var w = s.width, h = s.height; - //count nodes - var count = 0; - this.graph.eachNode(function(n) { - count++; - }); - var k2 = w * h / count, k = Math.sqrt(k2); - var l = this.config.levelDistance; - - return { - width: w, - height: h, - tstart: w * 0.1, - nodef: function(x) { return k2 / (x || 1); }, - edgef: function(x) { return /* x * x / k; */ k * (x - l); } - }; - }, - - compute: function(property, incremental) { - var prop = $.splat(property || ['current', 'start', 'end']); - var opt = this.getOptions(); - NodeDim.compute(this.graph, prop, this.config); - this.graph.computeLevels(this.root, 0, "ignore"); - this.graph.eachNode(function(n) { - $.each(prop, function(p) { - var pos = n.getPos(p); - if(pos.isZero()) { - pos.x = opt.width/5 * (Math.random() - 0.5); - pos.y = opt.height/5 * (Math.random() - 0.5); - pos.z = 200 * (Math.random() - 0.5); - } - //initialize disp vector - n.disp = {}; - $.each(prop, function(p) { - n.disp[p] = $V3(0, 0, 0); - }); - }); - }); - this.computePositions(prop, opt, incremental); - }, - - computePositions: function(property, opt, incremental) { - var times = this.config.iterations, i = 0, that = this; - if(incremental) { - (function iter() { - for(var total=incremental.iter, j=0; j= times) { - incremental.onComplete(); - return; - } - } - incremental.onStep(Math.round(i / (times -1) * 100)); - setTimeout(iter, 1); - })(); - } else { - for(; i < times; i++) { - opt.t = opt.tstart * (1 - i/(times -1)); - this.computePositionStep(property, opt); - } - } - }, - - computePositionStep: function(property, opt) { - var graph = this.graph; - var min = Math.min, max = Math.max; - var dpos = $V3(0, 0, 0); - //calculate repulsive forces - graph.eachNode(function(v) { - //initialize disp - $.each(property, function(p) { - v.disp[p].x = 0; - v.disp[p].y = 0; - v.disp[p].z = 0; - }); - graph.eachNode(function(u) { - if(u.id != v.id) { - $.each(property, function(p) { - var vp = v.getPos(p), up = u.getPos(p); - dpos.x = vp.x - up.x; - dpos.y = vp.y - up.y; - dpos.z = vp.z - up.z; - var norm = dpos.norm() || 1; - v.disp[p].$add(dpos - .$scale(opt.nodef(norm) / norm)); - }); - } - }); - }); - //calculate attractive forces - var T = !!graph.getNode(this.root).visited; - graph.eachNode(function(node) { - node.eachAdjacency(function(adj) { - var nodeTo = adj.nodeTo; - if(!!nodeTo.visited === T) { - $.each(property, function(p) { - var vp = node.getPos(p), up = nodeTo.getPos(p); - dpos.x = vp.x - up.x; - dpos.y = vp.y - up.y; - dpos.z = vp.z - up.z; - var norm = dpos.norm() || 1; - node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm)); - nodeTo.disp[p].$add(dpos.$scale(-1)); - }); - } - }); - node.visited = !T; - }); - //arrange positions to fit the canvas - var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2; - graph.eachNode(function(u) { - $.each(property, function(p) { - var disp = u.disp[p]; - var norm = disp.norm() || 1; - var p = u.getPos(p); - p.$add($V3(disp.x * min(Math.abs(disp.x), t) / norm, - disp.y * min(Math.abs(disp.y), t) / norm, - disp.z * min(Math.abs(disp.z), t) / norm)); - p.x = min(w2, max(-w2, p.x)); - p.y = min(h2, max(-h2, p.y)); - p.z = min(h2, max(-h2, p.z)); - }); - }); - } -}); - -$jit.ForceDirected3D = new Class( { - - Implements: [ Loader, Extras, Layouts.ForceDirected3D ], - - initialize: function(controller) { - var $ForceDirected3D = $jit.ForceDirected3D; - - var config = { - iterations: 50, - levelDistance: 50 - }; - - this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge", - "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "Label"), config, controller); - - var canvasConfig = this.config; - if(canvasConfig.useCanvas) { - this.canvas = canvasConfig.useCanvas; - this.config.labelContainer = this.canvas.id + '-label'; - } else { - if(canvasConfig.background) { - canvasConfig.background = $.merge({ - type: 'Circles' - }, canvasConfig.background); - } - this.canvas = new Canvas(this, canvasConfig); - this.config.labelContainer = (typeof canvasConfig.injectInto == 'string'? canvasConfig.injectInto : canvasConfig.injectInto.id) + '-label'; - } - - this.graphOptions = { - 'klass': Vector3, - 'Node': { - 'selected': false, - 'exist': true, - 'drawn': true - } - }; - this.graph = new Graph(this.graphOptions, this.config.Node, - this.config.Edge); - this.labels = new $ForceDirected3D.Label[canvasConfig.Label.type](this); - this.fx = new $ForceDirected3D.Plot(this, $ForceDirected3D); - this.op = new $ForceDirected3D.Op(this); - this.json = null; - this.busy = false; - // initialize extras - this.initializeExtras(); - }, - - /* - refresh - - Computes positions and plots the tree. - */ - refresh: function() { - this.compute(); - this.plot(); - }, - - reposition: function() { - this.compute('end'); - }, - -/* - computeIncremental - - Performs the Force Directed algorithm incrementally. - - Description: - - ForceDirected3D algorithms can perform many computations and lead to JavaScript taking too much time to complete. - This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and - avoiding browser messages such as "This script is taking too long to complete". - - Parameters: - - opt - (object) The object properties are described below - - iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property - of your class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces. - - property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. - You can also set an array of these properties. If you'd like to keep the current node positions but to perform these - computations for final animation positions then you can just choose 'end'. - - onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal - parameter a percentage value. - - onComplete - A callback function called when the algorithm completed. - - Example: - - In this example I calculate the end positions and then animate the graph to those positions - - (start code js) - var fd = new $jit.ForceDirected3D(...); - fd.computeIncremental({ - iter: 20, - property: 'end', - onStep: function(perc) { - Log.write("loading " + perc + "%"); - }, - onComplete: function() { - Log.write("done"); - fd.animate(); - } - }); - (end code) - - In this example I calculate all positions and (re)plot the graph - - (start code js) - var fd = new ForceDirected3D(...); - fd.computeIncremental({ - iter: 20, - property: ['end', 'start', 'current'], - onStep: function(perc) { - Log.write("loading " + perc + "%"); - }, - onComplete: function() { - Log.write("done"); - fd.plot(); - } - }); - (end code) - - */ - computeIncremental: function(opt) { - opt = $.merge( { - iter: 20, - property: 'end', - onStep: $.empty, - onComplete: $.empty - }, opt || {}); - - this.config.onBeforeCompute(this.graph.getNode(this.root)); - this.compute(opt.property, opt); - }, - - /* - plot - - Plots the ForceDirected3D graph. This is a shortcut to *fx.plot*. - */ - plot: function() { - this.fx.plot(); - }, - - /* - animate - - Animates the graph from the current positions to the 'end' node positions. - */ - animate: function(opt) { - this.fx.animate($.merge( { - modes: [ 'linear' ] - }, opt || {})); - } -}); - -$jit.ForceDirected3D.$extend = true; - -(function(ForceDirected3D) { - - /* - ForceDirected3D.Op - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected3D.Op = new Class( { - - Implements: Graph.Op - - }); - - /* - ForceDirected3D.Plot - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected3D.Plot = new Class( { - - Implements: Graph.Plot3D - - }); - - /* - ForceDirected3D.Label - - Custom extension of . - Contains custom , and extensions. - - Extends: - - All methods and subclasses. - - See also: - - , , , . - - */ - ForceDirected3D.Label = {}; - - /* - ForceDirected3D.Label.Native - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected3D.Label.Native = new Class( { - Implements: Graph.Label.Native - }); - - /* - ForceDirected3D.Label.SVG - - Custom extension of . - - Extends: - - All methods - - See also: - - - - */ - ForceDirected3D.Label.SVG = new Class( { - Implements: Graph.Label.SVG, - - initialize: function(viz) { - this.viz = viz; - }, - - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - tag.setAttribute('x', labelPos.x); - tag.setAttribute('y', labelPos.y); - - controller.onPlaceLabel(tag, node); - } - }); - - /* - ForceDirected3D.Label.HTML - - Custom extension of . - - Extends: - - All methods. - - See also: - - - - */ - ForceDirected3D.Label.HTML = new Class( { - Implements: Graph.Label.HTML, - - initialize: function(viz) { - this.viz = viz; - }, - /* - placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), - canvas = this.viz.canvas, - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY, - radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x * sx + ox + radius.width / 2), - y: Math.round(pos.y * sy + oy + radius.height / 2) - }; - var style = tag.style; - style.left = labelPos.x + 'px'; - style.top = labelPos.y + 'px'; - style.display = this.fitsInCanvas(labelPos, canvas) ? '' : 'none'; - - controller.onPlaceLabel(tag, node); - } - }); - - /* - ForceDirected3D.Plot.NodeTypes - - This class contains a list of built-in types. - Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'. - - You can add your custom node types, customizing your visualization to the extreme. - - Example: - - (start code js) - ForceDirected3D.Plot.NodeTypes.implement({ - 'mySpecialType': { - 'render': function(node, canvas) { - //print your custom node to canvas - }, - //optional - 'contains': function(node, pos) { - //return true if pos is inside the node or false otherwise - } - } - }); - (end code) - - */ - ForceDirected3D.Plot.NodeTypes = new Class({ - 'none': { - 'render': $.empty, - 'contains': $.lambda(false) - }, - 'circle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.circle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.circle.contains(npos, pos, dim); - } - }, - 'ellipse': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.ellipse.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.ellipse.contains(npos, pos, width, height); - } - }, - 'square': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.square.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.square.contains(npos, pos, dim); - } - }, - 'rectangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - this.nodeHelper.rectangle.render('fill', pos, width, height, canvas); - }, - 'contains': function(node, pos){ - var npos = node.pos.getc(true), - width = node.getData('width'), - height = node.getData('height'); - return this.nodeHelper.rectangle.contains(npos, pos, width, height); - } - }, - 'triangle': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.triangle.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.triangle.contains(npos, pos, dim); - } - }, - 'star': { - 'render': function(node, canvas){ - var pos = node.pos.getc(true), - dim = node.getData('dim'); - this.nodeHelper.star.render('fill', pos, dim, canvas); - }, - 'contains': function(node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.star.contains(npos, pos, dim); - } - } - }); - - /* - ForceDirected3D.Plot.EdgeTypes - - This class contains a list of built-in types. - Edge types implemented are 'none', 'line' and 'arrow'. - - You can add your custom edge types, customizing your visualization to the extreme. - - Example: - - (start code js) - ForceDirected3D.Plot.EdgeTypes.implement({ - 'mySpecialType': { - 'render': function(adj, canvas) { - //print your custom edge to canvas - }, - //optional - 'contains': function(adj, pos) { - //return true if pos is inside the arc or false otherwise - } - } - }); - (end code) - - */ - ForceDirected3D.Plot.EdgeTypes = new Class({ - 'none': $.empty, - 'line': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - this.edgeHelper.line.render(from, to, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon); - } - }, - 'arrow': { - 'render': function(adj, canvas) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true), - dim = adj.getData('dim'), - direction = adj.data.$direction, - inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id); - this.edgeHelper.arrow.render(from, to, dim, inv, canvas); - }, - 'contains': function(adj, pos) { - var from = adj.nodeFrom.pos.getc(true), - to = adj.nodeTo.pos.getc(true); - return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon); - } - } - }); - -})($jit.ForceDirected3D); - - - - - })(); diff --git a/app/assets/javascripts/src/Metamaps.Backbone.js b/app/assets/javascripts/src/Metamaps.Backbone.js index 2909f5d8..698b08e3 100644 --- a/app/assets/javascripts/src/Metamaps.Backbone.js +++ b/app/assets/javascripts/src/Metamaps.Backbone.js @@ -1,3 +1,5 @@ +if (typeof Metamaps === 'undefined') Metamaps = {}; + Metamaps.Backbone = {}; Metamaps.Backbone.Map = Backbone.Model.extend({ urlRoot: '/maps', @@ -174,7 +176,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({ }, getMaps: function () { - var self = this; + var Metamaps.Backbone = this; if (this.page != "loadedAll") { var numBefore = this.length; @@ -183,18 +185,18 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({ data: { page: this.page }, success: function (collection, response, options) { // you can pass additional options to the event you trigger here as well - if (collection.length - numBefore < 20) self.page = "loadedAll"; - else self.page += 1; - self.trigger('successOnFetch'); + if (collection.length - numBefore < 20) Metamaps.Backbone.page = "loadedAll"; + else Metamaps.Backbone.page += 1; + Metamaps.Backbone.trigger('successOnFetch'); }, error: function (collection, response, options) { // you can pass additional options to the event you trigger here as well - self.trigger('errorOnFetch'); + Metamaps.Backbone.trigger('errorOnFetch'); } }); } else { - self.trigger('successOnFetch'); + Metamaps.Backbone.trigger('successOnFetch'); } } }); @@ -217,4 +219,445 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({ Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({ model: Metamaps.Backbone.Mapper, url: '/users' -}); \ No newline at end of file +}); + + + + +Metamaps.Backbone.Metacode = Backbone.Model.extend({ + initialize: function () { + var image = new Image(); + image.crossOrigin = "Anonymous"; + image.src = this.get('icon'); + this.set('image',image); + }, + prepareLiForFilter: function () { + var li = ''; + li += '
  • ';       + li += '';       + li += '

    ' + this.get('name').toLowerCase() + '

    • '; + return li; + } + +}); +Metamaps.Backbone.MetacodeCollection = Backbone.Collection.extend({ + model: this.Metacode, + url: '/metacodes', + comparator: function (a, b) { + a = a.get('name').toLowerCase(); + b = b.get('name').toLowerCase(); + return a > b ? 1 : a < b ? -1 : 0; + } +}); + +Metamaps.Backbone.Topic = Backbone.Model.extend({ + urlRoot: '/topics', + blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, + save: function (key, val, options) { + + var attrs; + + // Handle both `"key", value` and `{key: value}` -style arguments. + if (key == null || typeof key === 'object') { + attrs = key; + options = val; + } else { + (attrs = {})[key] = val; + } + + var newOptions = options || {}; + var s = newOptions.success; + + var permBefore = this.get('permission'); + + newOptions.success = function (model, response, opt) { + if (s) s(model, response, opt); + model.trigger('saved'); + + if (permBefore === 'private' && model.get('permission') !== 'private') { + model.trigger('noLongerPrivate'); + } + else if (permBefore !== 'private' && model.get('permission') === 'private') { + model.trigger('nowPrivate'); + } + }; + return Backbone.Model.prototype.save.call(this, attrs, newOptions); + }, + initialize: function () { + if (this.isNew()) { + this.set({ + "user_id": Metamaps.Active.Mapper.id, + "desc": '', + "link": '', + "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons' + }); + } + + this.on('changeByOther', this.updateCardView); + this.on('change', this.updateNodeView); + this.on('saved', this.savedEvent); + this.on('nowPrivate', function(){ + var removeTopicData = { + topicid: this.id + }; + + $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]); + }); + this.on('noLongerPrivate', function(){ + var newTopicData = { + mappingid: this.getMapping().id, + topicid: this.id + }; + + $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]); + }); + + this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this); + + }, + authorizeToEdit: function (mapper) { + if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; + else return false; + }, + authorizePermissionChange: function (mapper) { + if (mapper && this.get('user_id') === mapper.get('id')) return true; + else return false; + }, + getDate: function () { + + }, + getMetacode: function () { + return Metamaps.Metacodes.get(this.get('metacode_id')); + }, + getMapping: function () { + + if (!Metamaps.Active.Map) return false; + + return Metamaps.Mappings.findWhere({ + map_id: Metamaps.Active.Map.id, + topic_id: this.isNew() ? this.cid : this.id + }); + }, + createNode: function () { + var mapping; + var node = { + adjacencies: [], + id: this.isNew() ? this.cid : this.id, + name: this.get('name') + }; + + if (Metamaps.Active.Map) { + mapping = this.getMapping(); + node.data = { + $mapping: null, + $mappingID: mapping.id + }; + } + + return node; + }, + updateNode: function () { + var mapping; + var node = this.get('node'); + node.setData('topic', this); + + if (Metamaps.Active.Map) { + mapping = this.getMapping(); + node.setData('mapping', mapping); + } + + return node; + }, + savedEvent: function() { + Metamaps.Realtime.sendTopicChange(this); + }, + updateViews: function() { + var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; + var node = this.get('node'); + // update topic card, if this topic is the one open there + if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { + Metamaps.TopicCard.showCard(node); + } + + // update the node on the map + if (onPageWithTopicCard && node) { + node.name = this.get('name'); + Metamaps.Visualize.mGraph.plot(); + } + }, + updateCardView: function() { + var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; + var node = this.get('node'); + // update topic card, if this topic is the one open there + if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { + Metamaps.TopicCard.showCard(node); + } + }, + updateNodeView: function() { + var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; + var node = this.get('node'); + + // update the node on the map + if (onPageWithTopicCard && node) { + node.name = this.get('name'); + Metamaps.Visualize.mGraph.plot(); + } + } +}); + +Metamaps.Backbone.TopicCollection = Backbone.Collection.extend({ + model: Metamaps.Backbone.Topic, + url: '/topics' +}); + +Metamaps.Backbone.Synapse = Backbone.Model.extend({ + urlRoot: '/synapses', + blacklist: ['edge', 'created_at', 'updated_at'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, + save: function (key, val, options) { + + var attrs; + + // Handle both `"key", value` and `{key: value}` -style arguments. + if (key == null || typeof key === 'object') { + attrs = key; + options = val; + } else { + (attrs = {})[key] = val; + } + + var newOptions = options || {}; + var s = newOptions.success; + + var permBefore = this.get('permission'); + + newOptions.success = function (model, response, opt) { + if (s) s(model, response, opt); + model.trigger('saved'); + + if (permBefore === 'private' && model.get('permission') !== 'private') { + model.trigger('noLongerPrivate'); + } + else if (permBefore !== 'private' && model.get('permission') === 'private') { + model.trigger('nowPrivate'); + } + }; + return Backbone.Model.prototype.save.call(this, attrs, newOptions); + }, + initialize: function () { + if (this.isNew()) { + this.set({ + "user_id": Metamaps.Active.Mapper.id, + "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons', + "category": "from-to" + }); + } + + this.on('changeByOther', this.updateCardView); + this.on('change', this.updateEdgeView); + this.on('saved', this.savedEvent); + this.on('noLongerPrivate', function(){ + var newSynapseData = { + mappingid: this.getMapping().id, + synapseid: this.id + }; + + $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]); + }); + this.on('nowPrivate', function(){ + $(document).trigger(Metamaps.JIT.events.removeSynapse, [{ + synapseid: this.id + }]); + }); + + this.on('change:desc', Metamaps.Filter.checkSynapses, this); + }, + prepareLiForFilter: function () { + var li = ''; + li += '
  • ';       + li += '
    • '; + return li; + }, + authorizeToEdit: function (mapper) { + if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; + else return false; + }, + authorizePermissionChange: function (mapper) { + if (mapper && this.get('user_id') === mapper.get('id')) return true; + else return false; + }, + getTopic1: function () { + return Metamaps.Topics.get(this.get('node1_id')); + }, + getTopic2: function () { + return Metamaps.Topics.get(this.get('node2_id')); + }, + getDirection: function () { + return [ + this.getTopic1().get('node').id, + this.getTopic2().get('node').id + ]; + }, + getMapping: function () { + + if (!Metamaps.Active.Map) return false; + + return Metamaps.Mappings.findWhere({ + map_id: Metamaps.Active.Map.id, + synapse_id: this.isNew() ? this.cid : this.id + }); + }, + createEdge: function () { + var mapping, mappingID; + var synapseID = this.isNew() ? this.cid : this.id; + + var edge = { + nodeFrom: this.get('node1_id'), + nodeTo: this.get('node2_id'), + data: { + $synapses: [], + $synapseIDs: [synapseID], + } + }; + + if (Metamaps.Active.Map) { + mapping = this.getMapping(); + mappingID = mapping.isNew() ? mapping.cid : mapping.id; + edge.data.$mappings = []; + edge.data.$mappingIDs = [mappingID]; + } + + return edge; + }, + updateEdge: function () { + var mapping; + var edge = this.get('edge'); + edge.getData('synapses').push(this); + + if (Metamaps.Active.Map) { + mapping = this.getMapping(); + edge.getData('mappings').push(mapping); + } + + return edge; + }, + savedEvent: function() { + Metamaps.Realtime.sendSynapseChange(this); + }, + updateViews: function() { + this.updateCardView(); + this.updateEdgeView(); + }, + updateCardView: function() { + var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic; + var edge = this.get('edge'); + + // update synapse card, if this synapse is the one open there + if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) { + Metamaps.SynapseCard.showCard(edge); + } + }, + updateEdgeView: function() { + var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic; + var edge = this.get('edge'); + + // update the edge on the map + if (onPageWithSynapseCard && edge) { + Metamaps.Visualize.mGraph.plot(); + } + } +}); + +Metamaps.Backbone.SynapseCollection = Backbone.Collection.extend({ + model: Metamaps.Backbone.Synapse, + url: '/synapses' +}); + +Metamaps.Backbone.Mapping = Backbone.Model.extend({ + urlRoot: '/mappings', + blacklist: ['created_at', 'updated_at'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, + initialize: function () { + if (this.isNew()) { + this.set({ + "user_id": Metamaps.Active.Mapper.id, + "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null + }); + } + }, + getMap: function () { + return Metamaps.Map.get(this.get('map_id')); + }, + getTopic: function () { + if (this.get('category') === 'Topic') return Metamaps.Topic.get(this.get('topic_id')); + else return false; + }, + getSynapse: function () { + if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id')); + else return false; + } +}); + +Metamaps.Backbone.MappingCollection = Backbone.Collection.extend({ + model: Metamaps.Backbone.Mapping, + url: '/mappings' +}); + +//attach collection event listeners +Metamaps.Backbone.attachCollectionEvents = function () { + + Metamaps.Topics.on("add remove", function(topic){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkMetacodes(); + Metamaps.Filter.checkMappers(); + }); + + Metamaps.Synapses.on("add remove", function(synapse){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkSynapses(); + Metamaps.Filter.checkMappers(); + }); + + if (Metamaps.Active.Map) { + Metamaps.Mappings.on("add remove", function(mapping){ + Metamaps.Map.InfoBox.updateNumbers(); + Metamaps.Filter.checkSynapses(); + Metamaps.Filter.checkMetacodes(); + Metamaps.Filter.checkMappers(); + }); + } +} + +Metamaps.Backbone.init = function () { + + Metamaps.Metacodes = Metamaps.Metacodes ? new Metamaps.Backbone.MetacodeCollection(Metamaps.Metacodes) : new Metamaps.Backbone.MetacodeCollection(); + + Metamaps.Topics = Metamaps.Topics ? new Metamaps.Backbone.TopicCollection(Metamaps.Topics) : new Metamaps.Backbone.TopicCollection(); + + Metamaps.Synapses = Metamaps.Synapses ? new Metamaps.Backbone.SynapseCollection(Metamaps.Synapses) : new Metamaps.Backbone.SynapseCollection(); + + Metamaps.Mappers = Metamaps.Mappers ? new Metamaps.Backbone.MapperCollection(Metamaps.Mappers) : new Metamaps.Backbone.MapperCollection(); + + // this is for topic view + Metamaps.Creators = Metamaps.Creators ? new Metamaps.Backbone.MapperCollection(Metamaps.Creators) : new Metamaps.Backbone.MapperCollection(); + + if (Metamaps.Active.Map) { + Metamaps.Mappings = Metamaps.Mappings ? new Metamaps.Backbone.MappingCollection(Metamaps.Mappings) : new Metamaps.Backbone.MappingCollection(); + + Metamaps.Active.Map = new Metamaps.Backbone.Map(Metamaps.Active.Map); + } + + if (Metamaps.Active.Topic) Metamaps.Active.Topic = new Metamaps.Backbone.Topic(Metamaps.Active.Topic); + + Metamaps.Backbone.attachCollectionEvents(); +}; \ No newline at end of file diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js index 46a34b5c..ae256d7c 100644 --- a/app/assets/javascripts/src/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js @@ -1,39 +1,4 @@ -var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this -/* - -* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps -* object will be these -GlobalUI -Active -Maps -Mappers -Backbone - -* all these get added when you are on a page with the Javascript Infovis Toolkit -Settings -Touch -Mouse -Selected -Metacodes -Topics -Synapses -Mappings -Create -TopicCard -SynapseCard -Visualize -Util -Realtime -Control -Filter -Listeners -Organize -Map -Mapper -Topic -Synapse -JIT -*/ +if (typeof Metamaps === 'undefined') Metamaps = {}; Metamaps.Active = { Map: null, @@ -42,31 +7,6 @@ Metamaps.Active = { }; Metamaps.Maps = {}; -$(document).ready(function () { - - for (var prop in Metamaps) { - - // this runs the init function within each sub-object on the Metamaps one - if (Metamaps.hasOwnProperty(prop) && - Metamaps[prop].hasOwnProperty('init') && - typeof (Metamaps[prop].init) == 'function' - ) { - Metamaps[prop].init(); - } - } - - // initialize the famous ui - var callFamous = function(){ - if (Metamaps.Famous) { - Metamaps.Famous.build(); - } - else { - setTimeout(callFamous, 100); - } - } - callFamous(); -}); - Metamaps.GlobalUI = { notifyTimeout: null, lightbox: null, @@ -76,6 +16,7 @@ Metamaps.GlobalUI = { self.Search.init(); self.CreateMap.init(); self.Account.init(); + self.CheatSheet.init(); //bind lightbox clicks $('.openLightbox').click(function (event) { @@ -362,6 +303,31 @@ Metamaps.GlobalUI.Account = { } }; +Mapmaker.GlobalUI.CheatSheet = { + init: function () { + // tab the cheatsheet + $('#cheatSheet').tabs(); + $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); + $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); + + // id = the id of a vimeo video + var switchVideo = function (element, id) { + $('.tutorialItem').removeClass("active"); + $(element).addClass("active"); + $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id); + }; + + $('#gettingStarted').click(function() { + //switchVideo(this,'88334167'); + }); + $('#upYourSkillz').click(function() { + //switchVideo(this,'100118167'); + }); + $('#advancedMapping').click(function() { + //switchVideo(this,'88334167'); + }); + } +}; Metamaps.GlobalUI.Search = { diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js deleted file mode 100644 index 51240234..00000000 --- a/app/assets/javascripts/src/Metamaps.JIT.js +++ /dev/null @@ -1,1948 +0,0 @@ -Metamaps.JIT = { - events: { - topicDrag: 'Metamaps:JIT:events:topicDrag', - newTopic: 'Metamaps:JIT:events:newTopic', - deleteTopic: 'Metamaps:JIT:events:deleteTopic', - removeTopic: 'Metamaps:JIT:events:removeTopic', - newSynapse: 'Metamaps:JIT:events:newSynapse', - deleteSynapse: 'Metamaps:JIT:events:deleteSynapse', - removeSynapse: 'Metamaps:JIT:events:removeSynapse', - pan: 'Metamaps:JIT:events:pan', - zoom: 'Metamaps:JIT:events:zoom', - animationDone: 'Metamaps:JIT:events:animationDone', - }, - vizData: [], // contains the visualization-compatible graph - /** - * This method will bind the event handlers it is interested and initialize the class. - */ - init: function () { - var self = Metamaps.JIT; - - $(".zoomIn").click(self.zoomIn); - $(".zoomOut").click(self.zoomOut); - - var zoomExtents = function (event) { - self.zoomExtents(event, Metamaps.Visualize.mGraph.canvas); - }; - $(".zoomExtents").click(zoomExtents); - - $(".takeScreenshot").click(Metamaps.Map.exportImage); - - self.topicDescImage = new Image(); - self.topicDescImage.src = '/assets/topic_description_signifier.png'; - - self.topicLinkImage = new Image(); - self.topicLinkImage.src = '/assets/topic_link_signifier.png'; - }, - /** - * convert our topic JSON into something JIT can use - */ - convertModelsToJIT: function(topics, synapses) { - var jitReady = []; - - var synapsesToRemove = []; - var topic; - var mapping; - var node; - var nodes = {}; - var existingEdge; - var edge; - var edges = []; - - topics.each(function (t) { - node = t.createNode(); - nodes[node.id] = node; - }); - synapses.each(function (s) { - edge = s.createEdge(); - - if (topics.get(s.get('node1_id')) === undefined || topics.get(s.get('node2_id')) === undefined) { - // this means it's an invalid synapse - synapsesToRemove.push(s); - } - else if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) { - - existingEdge = _.findWhere(edges, { - nodeFrom: edge.nodeFrom, - nodeTo: edge.nodeTo - }) || - _.findWhere(edges, { - nodeFrom: edge.nodeTo, - nodeTo: edge.nodeFrom - }); - - if (existingEdge) { - // for when you're dealing with multiple relationships between the same two topics - if (Metamaps.Active.Map) { - mapping = s.getMapping(); - existingEdge.data['$mappingIDs'].push(mapping.id); - } - existingEdge.data['$synapseIDs'].push(s.id); - } else { - // for when you're dealing with a topic that has relationships to many different nodes - nodes[edge.nodeFrom].adjacencies.push(edge); - edges.push(edge); - } - } - }); - - _.each(nodes, function (node) { - jitReady.push(node); - }); - - return [jitReady, synapsesToRemove]; - }, - prepareVizData: function () { - var self = Metamaps.JIT; - var mapping; - - // reset/empty vizData - self.vizData = []; - Metamaps.Visualize.loadLater = false; - - var results = self.convertModelsToJIT(Metamaps.Topics, Metamaps.Synapses); - - self.vizData = results[0]; - - // clean up the synapses array in case of any faulty data - _.each(results[1], function (synapse) { - mapping = synapse.getMapping(); - Metamaps.Synapses.remove(synapse); - Metamaps.Mappings.remove(mapping); - }); - - if (self.vizData.length == 0) { - Metamaps.Famous.viz.showInstructions(); - Metamaps.Visualize.loadLater = true; - } - else Metamaps.Famous.viz.hideInstructions(); - - Metamaps.Visualize.render(); - }, // prepareVizData - edgeRender: function (adj, canvas) { - //get nodes cartesian coordinates - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); - - var synapse; - if(adj.getData("displayIndex")) { - synapse = adj.getData("synapses")[adj.getData("displayIndex")]; - if (!synapse) { - delete adj.data.$displayIndex; - synapse = adj.getData("synapses")[0]; - } - } - else { - synapse = adj.getData("synapses")[0]; - } - - if (!synapse) return; // this means there are no corresponding synapses for - // this edge, don't render it - - var directionCat = synapse.get("category"); - - //label placement on edges - if (canvas.denySelected) { - var color = Metamaps.Settings.colors.synapses.normal; - canvas.getCtx().fillStyle = canvas.getCtx().strokeStyle = color; - } - Metamaps.JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse, canvas); - - //check for edge label in data - var desc = synapse.get("desc"); - - var showDesc = adj.getData("showDesc"); - - var drawSynapseCount = function (context, x, y, count) { - /* - circle size: 16x16px - positioning: overlay and center on top right corner of synapse label - 8px left and 8px down - color: #dab539 - border color: #424242 - border size: 1.5px - font: DIN medium - font-size: 14pt - font-color: #424242 - */ - context.beginPath(); - context.arc(x, y, 8, 0, 2 * Math.PI, false); - context.fillStyle = '#DAB539'; - context.strokeStyle = '#424242'; - context.lineWidth = 1.5; - context.closePath(); - context.fill(); - context.stroke(); - - // add the synapse count - context.fillStyle = '#424242'; - context.textAlign = 'center'; - context.font = '14px din-medium'; - - context.fillText(count, x, y + 5); - }; - - if (!canvas.denySelected && desc != "" && showDesc) { - // '&' to '&' - desc = Metamaps.Util.decodeEntities(desc); - - //now adjust the label placement - var ctx = canvas.getCtx(); - ctx.font = 'bold 14px arial'; - ctx.fillStyle = '#FFF'; - ctx.textBaseline = 'alphabetic'; - - var arrayOfLabelLines = Metamaps.Util.splitLine(desc, 30).split('\n'); - var index, lineWidths = []; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width) - } - var width = Math.max.apply(null, lineWidths) + 16; - var height = (16 * arrayOfLabelLines.length) + 8; - - var x = (pos.x + posChild.x - width) / 2; - var y = ((pos.y + posChild.y) / 2) - height / 2; - - var radius = 5; - - //render background - ctx.beginPath(); - ctx.moveTo(x + radius, y); - ctx.lineTo(x + width - radius, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + radius); - ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); - ctx.closePath(); - ctx.fill(); - - // get number of synapses - var synapseNum = adj.getData("synapses").length; - - //render text - ctx.fillStyle = '#424242'; - ctx.textAlign = 'center'; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 18 + (16 * index)); - } - - if (synapseNum > 1) { - drawSynapseCount(ctx, x + width, y, synapseNum); - } - } - else if (!canvas.denySelected && showDesc) { - // get number of synapses - var synapseNum = adj.getData("synapses").length; - - if (synapseNum > 1) { - var ctx = canvas.getCtx(); - var x = (pos.x + posChild.x) / 2; - var y = (pos.y + posChild.y) / 2; - drawSynapseCount(ctx, x, y, synapseNum); - } - } - - }, // edgeRender - ForceDirected: { - animateSavedLayout: { - modes: ['linear'], - transition: $jit.Trans.Quad.easeInOut, - duration: 800, - onComplete: function () { - Metamaps.Visualize.mGraph.busy = false; - $(document).trigger(Metamaps.JIT.events.animationDone); - } - }, - animateFDLayout: { - modes: ['linear'], - transition: $jit.Trans.Elastic.easeOut, - duration: 800, - onComplete: function () { - Metamaps.Visualize.mGraph.busy = false; - } - }, - graphSettings: { - //id of the visualization container - injectInto: 'infovis', - //Enable zooming and panning - //by scrolling and DnD - Navigation: { - enable: true, - //Enable panning events only if we're dragging the empty - //canvas (and not a node). - panning: 'avoid nodes', - zooming: 28 //zoom speed. higher is more sensible - }, - //background: { - // type: 'Metamaps' - //}, - //NodeStyles: { - // enable: true, - // type: 'Native', - // stylesHover: { - // dim: 30 - // }, - // duration: 300 - //}, - // Change node and edge styles such as - // color and width. - // These properties are also set per node - // with dollar prefixed data-properties in the - // JSON structure. - Node: { - overridable: true, - color: '#2D6A5D', - type: 'customNode', - dim: 25 - }, - Edge: { - overridable: true, - color: Metamaps.Settings.colors.synapses.normal, - type: 'customEdge', - lineWidth: 2, - alpha: 1 - }, - //Native canvas text styling - Label: { - type: 'Native', //Native or HTML - size: 20, - family: 'arial', - textBaseline: 'alphabetic', - color: Metamaps.Settings.colors.labels.text - }, - //Add Tips - Tips: { - enable: false, - onShow: function (tip, node) {} - }, - // Add node events - Events: { - enable: true, - enableForEdges: true, - onMouseMove: function (node, eventInfo, e) { - Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e); - //console.log('called mouse move handler'); - }, - //Update node positions when dragged - onDragMove: function (node, eventInfo, e) { - Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); - //console.log('called drag move handler'); - }, - onDragEnd: function (node, eventInfo, e) { - Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); - //console.log('called drag end handler'); - }, - onDragCancel: function (node, eventInfo, e) { - Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false); - }, - //Implement the same handler for touchscreens - onTouchStart: function (node, eventInfo, e) { - //$jit.util.event.stop(e); //stop default touchmove event - //Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo); - Metamaps.Visualize.mGraph.events.touched = true; - Metamaps.Touch.touchPos = eventInfo.getPos(); - var canvas = Metamaps.Visualize.mGraph.canvas, - ox = canvas.translateOffsetX; - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY; - Metamaps.Touch.touchPos.x *= sx; - Metamaps.Touch.touchPos.y *= sy; - Metamaps.Touch.touchPos.x += ox; - Metamaps.Touch.touchPos.y += oy; - - touchDragNode = node; - }, - //Implement the same handler for touchscreens - onTouchMove: function (node, eventInfo, e) { - if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e); - else { - Metamaps.JIT.touchPanZoomHandler(eventInfo, e); - } - }, - //Implement the same handler for touchscreens - onTouchEnd: function (node, eventInfo, e) { - - }, - //Implement the same handler for touchscreens - onTouchCancel: function (node, eventInfo, e) { - - }, - //Add also a click handler to nodes - onClick: function (node, eventInfo, e) { - - // remove the rightclickmenu - $('.rightclickmenu').remove(); - - if (Metamaps.Mouse.boxStartCoordinates) { - if(e.ctrlKey){ - Metamaps.Visualize.mGraph.busy = false; - Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - - var bS = Metamaps.Mouse.boxStartCoordinates; - var bE = Metamaps.Mouse.boxEndCoordinates; - if (Math.abs(bS.x - bE.x) > 20 && Math.abs(bS.y - bE.y) > 20) { - Metamaps.JIT.zoomToBox(e); - return; - } - else { - Metamaps.Mouse.boxStartCoordinates = null; - Metamaps.Mouse.boxEndCoordinates = null; - } - //console.log('called zoom to box'); - } - - if (e.shiftKey) { - Metamaps.Visualize.mGraph.busy = false; - Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectWithBox(e); - //console.log('called select with box'); - return; - }; - } - - if (e.target.id != "infovis-canvas") return false; - - //clicking on a edge, node, or clicking on blank part of canvas? - if (node.nodeFrom) { - Metamaps.JIT.selectEdgeOnClickHandler(node, e); - //console.log('called selectEdgeOnClickHandler'); - } else if (node && !node.nodeFrom) { - Metamaps.JIT.selectNodeOnClickHandler(node, e); - //console.log('called selectNodeOnClickHandler'); - } else { - Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); - //console.log('called canvasClickHandler'); - } //if - }, - //Add also a click handler to nodes - onRightClick: function (node, eventInfo, e) { - - // remove the rightclickmenu - $('.rightclickmenu').remove(); - - if (Metamaps.Mouse.boxStartCoordinates) { - Metamaps.Visualize.mGraph.busy = false; - Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectWithBox(e); - return; - } - - if (e.target.id != "infovis-canvas") return false; - - //clicking on a edge, node, or clicking on blank part of canvas? - if (node.nodeFrom) { - Metamaps.JIT.selectEdgeOnRightClickHandler(node, e); - } else if (node && !node.nodeFrom) { - Metamaps.JIT.selectNodeOnRightClickHandler(node, e); - } else { - //console.log('right clicked on open space'); - } - } - }, - //Number of iterations for the FD algorithm - iterations: 200, - //Edge length - levelDistance: 200, - }, - nodeSettings: { - 'customNode': { - 'render': function (node, canvas) { - var pos = node.pos.getc(true), - dim = node.getData('dim'), - topic = node.getData('topic'), - metacode = topic ? topic.getMetacode() : false, - ctx = canvas.getCtx(); - - // if the topic is selected draw a circle around it - if (!canvas.denySelected && node.selected) { - ctx.beginPath(); - ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false); - ctx.strokeStyle = Metamaps.Settings.colors.topics.selected; - ctx.lineWidth = 2; - ctx.stroke(); - } - - if (!metacode || - !metacode.get('image') || - !metacode.get('image').complete || - (typeof metacode.get('image').naturalWidth !== "undefined" && - metacode.get('image').naturalWidth === 0)) { - ctx.beginPath(); - ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false); - ctx.fillStyle = '#B6B2FD'; - ctx.fill(); - } else { - ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2); - } - - // if the topic has a link, draw a small image to indicate that - var hasLink = topic && topic.get('link') !== "" && topic.get('link') !== null; - var linkImage = Metamaps.JIT.topicLinkImage; - var linkImageLoaded = linkImage.complete || - (typeof linkImage.naturalWidth !== "undefined" && - linkImage.naturalWidth !== 0) - if (hasLink && linkImageLoaded) { - ctx.drawImage(linkImage, pos.x - dim - 8, pos.y - dim - 8, 16, 16); - } - - // if the topic has a desc, draw a small image to indicate that - var hasDesc = topic && topic.get('desc') !== "" && topic.get('desc') !== null; - var descImage = Metamaps.JIT.topicDescImage; - var descImageLoaded = descImage.complete || - (typeof descImage.naturalWidth !== "undefined" && - descImage.naturalWidth !== 0) - if (hasDesc && descImageLoaded) { - ctx.drawImage(descImage, pos.x + dim - 8, pos.y - dim - 8, 16, 16); - } - }, - 'contains': function (node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'), - arrayOfLabelLines = Metamaps.Util.splitLine(node.name, 30).split('\n'), - ctx = Metamaps.Visualize.mGraph.canvas.getCtx(); - - var height = 25 * arrayOfLabelLines.length; - - var index, lineWidths = []; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width) - } - var width = Math.max.apply(null, lineWidths) + 8; - var labely = npos.y + node.getData("height") + 5 + height / 2; - - var overLabel = this.nodeHelper.rectangle.contains({ - x: npos.x, - y: labely - }, pos, width, height); - - return this.nodeHelper.circle.contains(npos, pos, dim) || overLabel; - } - } - }, - edgeSettings: { - 'customEdge': { - 'render': function (adj, canvas) { - Metamaps.JIT.edgeRender(adj, canvas) - }, - 'contains': function (adj, pos) { - var from = adj.nodeFrom.pos.getc(), - to = adj.nodeTo.pos.getc(); - - // this fixes an issue where when edges are perfectly horizontal or perfectly vertical - // it becomes incredibly difficult to hover over them - if (-1 < pos.x && pos.x < 1) pos.x = 0; - if (-1 < pos.y && pos.y < 1) pos.y = 0; - - return $jit.Graph.Plot.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon + 5); - } - } - } - }, // ForceDirected - ForceDirected3D: { - animate: { - modes: ['linear'], - transition: $jit.Trans.Elastic.easeOut, - duration: 2500, - onComplete: function () { - Metamaps.Visualize.mGraph.busy = false; - } - }, - graphSettings: { - //id of the visualization container - injectInto: 'infovis', - type: '3D', - Scene: { - Lighting: { - enable: false, - ambient: [0.5, 0.5, 0.5], - directional: { - direction: { - x: 1, - y: 0, - z: -1 - }, - color: [0.9, 0.9, 0.9] - } - } - }, - //Enable zooming and panning - //by scrolling and DnD - Navigation: { - enable: false, - //Enable panning events only if we're dragging the empty - //canvas (and not a node). - panning: 'avoid nodes', - zooming: 10 //zoom speed. higher is more sensible - }, - // Change node and edge styles such as - // color and width. - // These properties are also set per node - // with dollar prefixed data-properties in the - // JSON structure. - Node: { - overridable: true, - type: 'sphere', - dim: 15, - color: '#ffffff' - }, - Edge: { - overridable: false, - type: 'tube', - color: '#111', - lineWidth: 3 - }, - //Native canvas text styling - Label: { - type: 'HTML', //Native or HTML - size: 10, - style: 'bold' - }, - // Add node events - Events: { - enable: true, - type: 'Native', - i: 0, - onMouseMove: function (node, eventInfo, e) { - //if(this.i++ % 3) return; - var pos = eventInfo.getPos(); - Metamaps.Visualize.cameraPosition.x += (pos.x - Metamaps.Visualize.cameraPosition.x) * 0.5; - Metamaps.Visualize.cameraPosition.y += (-pos.y - Metamaps.Visualize.cameraPosition.y) * 0.5; - Metamaps.Visualize.mGraph.plot(); - }, - onMouseWheel: function (delta) { - Metamaps.Visualize.cameraPosition.z += -delta * 20; - Metamaps.Visualize.mGraph.plot(); - }, - onClick: function () {} - }, - //Number of iterations for the FD algorithm - iterations: 200, - //Edge length - levelDistance: 100 - }, - nodeSettings: { - - }, - edgeSettings: { - - } - }, // ForceDirected3D - RGraph: { - animate: { - modes: ['polar'], - duration: 800, - onComplete: function () { - Metamaps.Visualize.mGraph.busy = false; - } - }, - // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ - background: { - //type: 'Metamaps', - levelDistance: 200, - numberOfCircles: 4, - CanvasStyles: { - strokeStyle: '#333', - lineWidth: 1.5 - } - }, - levelDistance: 200 - }, - onMouseEnter: function (edge) { - var filtered = edge.getData('alpha') === 0; - - // don't do anything if the edge is filtered - // or if the canvas is animating - if (filtered || Metamaps.Visualize.mGraph.busy) return; - - $('canvas').css('cursor', 'pointer'); - var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge); - //following if statement only executes if the edge being hovered over is not selected - if (edgeIsSelected == -1) { - edge.setData('showDesc', true, 'current'); - } - - edge.setDataset('end', { - lineWidth: 4 - }); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth'], - duration: 100 - }); - Metamaps.Visualize.mGraph.plot(); - }, // onMouseEnter - onMouseLeave: function (edge) { - if (edge.getData('alpha') === 0) return; // don't do anything if the edge is filtered - $('canvas').css('cursor', 'default'); - var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge); - //following if statement only executes if the edge being hovered over is not selected - if (edgeIsSelected == -1) { - edge.setData('showDesc', false, 'current'); - } - - edge.setDataset('end', { - lineWidth: 2 - }); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth'], - duration: 100 - }); - Metamaps.Visualize.mGraph.plot(); - }, // onMouseLeave - onMouseMoveHandler: function (node, eventInfo, e) { - - var self = Metamaps.JIT; - - if (Metamaps.Visualize.mGraph.busy) return; - - var node = eventInfo.getNode(); - var edge = eventInfo.getEdge(); - - //if we're on top of a node object, act like there aren't edges under it - if (node != false) { - if (Metamaps.Mouse.edgeHoveringOver) { - self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver); - } - $('canvas').css('cursor', 'pointer'); - return; - } - - if (edge == false && Metamaps.Mouse.edgeHoveringOver != false) { - //mouse not on an edge, but we were on an edge previously - self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver); - } else if (edge != false && Metamaps.Mouse.edgeHoveringOver == false) { - //mouse is on an edge, but there isn't a stored edge - self.onMouseEnter(edge); - } else if (edge != false && Metamaps.Mouse.edgeHoveringOver != edge) { - //mouse is on an edge, but a different edge is stored - self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver) - self.onMouseEnter(edge); - } - - //could be false - Metamaps.Mouse.edgeHoveringOver = edge; - - if (!node && !edge) { - $('canvas').css('cursor', 'default'); - } - }, // onMouseMoveHandler - enterKeyHandler: function () { - var creatingMap = Metamaps.GlobalUI.lightbox; - if (creatingMap === "newmap" || creatingMap === "forkmap") { - Metamaps.GlobalUI.CreateMap.submit(); - } - // this is to submit new topic creation - else if (Metamaps.Create.newTopic.beingCreated) { - Metamaps.Topic.createTopicLocally(); - } - // to submit new synapse creation - else if (Metamaps.Create.newSynapse.beingCreated) { - Metamaps.Synapse.createSynapseLocally(); - } - }, //enterKeyHandler - escKeyHandler: function () { - Metamaps.Control.deselectAllEdges(); - Metamaps.Control.deselectAllNodes(); - }, //escKeyHandler - touchPanZoomHandler: function (eventInfo, e) { - if (e.touches.length == 1) { - var thispos = Metamaps.Touch.touchPos, - currentPos = eventInfo.getPos(), - canvas = Metamaps.Visualize.mGraph.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; - var x = currentPos.x - thispos.x, - y = currentPos.y - thispos.y; - Metamaps.Touch.touchPos = currentPos; - Metamaps.Visualize.mGraph.canvas.translate(x * 1 / sx, y * 1 / sy); - } else if (e.touches.length == 2) { - var touch1 = e.touches[0]; - var touch2 = e.touches[1]; - - var dist = Metamaps.Util.getDistance({ - x: touch1.clientX, - y: touch1.clientY - }, { - x: touch2.clientX, - y: touch2.clientY - }); - - if (!lastDist) { - lastDist = dist; - } - - var scale = dist / lastDist; - - if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) { - Metamaps.Visualize.mGraph.canvas.scale(scale, scale); - } - if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX < 0.5) { - Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(true); - } else if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX > 0.5) { - Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(false); - } - lastDist = dist; - } - - }, // touchPanZoomHandler - onDragMoveTopicHandler: function (node, eventInfo, e) { - - var self = Metamaps.JIT; - - // this is used to send nodes that are moving to - // other realtime collaborators on the same map - var positionsToSend = {}; - var topic; - - var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (node && !node.nodeFrom) { - var pos = eventInfo.getPos(); - // if it's a left click, or a touch, move the node - if (e.touches || (e.button == 0 && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) { - //if the node dragged isn't already selected, select it - var whatToDo = self.handleSelectionBeforeDragging(node, e); - if (node.pos.rho || node.pos.rho === 0) { - // this means we're in topic view - var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y); - var theta = Math.atan2(pos.y, pos.x); - node.pos.setp(theta, rho); - } else if (whatToDo == 'only-drag-this-one') { - node.pos.setc(pos.x, pos.y); - - if (Metamaps.Active.Map) { - topic = node.getData('topic'); - // we use the topic ID not the node id - // because we can't depend on the node id - // to be the same as on other collaborators - // maps - positionsToSend[topic.id] = pos; - $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]); - } - } else { - var len = Metamaps.Selected.Nodes.length; - - //first define offset for each node - var xOffset = new Array(); - var yOffset = new Array(); - for (var i = 0; i < len; i += 1) { - var n = Metamaps.Selected.Nodes[i]; - xOffset[i] = n.pos.x - node.pos.x; - yOffset[i] = n.pos.y - node.pos.y; - } //for - - for (var i = 0; i < len; i += 1) { - var n = Metamaps.Selected.Nodes[i]; - var x = pos.x + xOffset[i]; - var y = pos.y + yOffset[i]; - n.pos.setc(x, y); - - if (Metamaps.Active.Map) { - topic = n.getData('topic'); - // we use the topic ID not the node id - // because we can't depend on the node id - // to be the same as on other collaborators - // maps - positionsToSend[topic.id] = n.pos; - } - } //for - - if (Metamaps.Active.Map) { - $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]); - } - } //if - - if (whatToDo == 'deselect') { - Metamaps.Control.deselectNode(node); - } - Metamaps.Visualize.mGraph.plot(); - } - // if it's a right click or holding down alt, start synapse creation ->third option is for firefox - else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && authorized) { - if (tempInit == false) { - tempNode = node; - tempInit = true; - - Metamaps.Create.newTopic.hide(); - Metamaps.Create.newSynapse.hide(); - // set the draw synapse start positions - var l = Metamaps.Selected.Nodes.length; - if (l > 0) { - for (var i = l - 1; i >= 0; i -= 1) { - var n = Metamaps.Selected.Nodes[i]; - Metamaps.Mouse.synapseStartCoordinates.push({ - x: n.pos.getc().x, - y: n.pos.getc().y - }); - } - } else { - Metamaps.Mouse.synapseStartCoordinates = [{ - x: tempNode.pos.getc().x, - y: tempNode.pos.getc().y - }]; - } - Metamaps.Mouse.synapseEndCoordinates = { - x: pos.x, - y: pos.y - }; - } - // - temp = eventInfo.getNode(); - if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned - tempNode2 = temp; - - Metamaps.Mouse.synapseEndCoordinates = { - x: tempNode2.pos.getc().x, - y: tempNode2.pos.getc().y - }; - - // before making the highlighted one bigger, make sure all the others are regular size - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - n.setData('dim', 25, 'current'); - }); - temp.setData('dim', 35, 'current'); - Metamaps.Visualize.mGraph.plot(); - } else if (!temp) { - tempNode2 = null; - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - n.setData('dim', 25, 'current'); - }); - //pop up node creation :) - var myX = e.clientX - 110; - var myY = e.clientY - 30; - $('#new_topic').css('left', myX + "px"); - $('#new_topic').css('top', myY + "px"); - Metamaps.Create.newTopic.x = eventInfo.getPos().x; - Metamaps.Create.newTopic.y = eventInfo.getPos().y; - Metamaps.Visualize.mGraph.plot(); - - Metamaps.Mouse.synapseEndCoordinates = { - x: pos.x, - y: pos.y - }; - } - } - else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && Metamaps.Active.Topic) { - Metamaps.GlobalUI.notifyUser("Cannot create in Topic view."); - } - else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && !authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - } - } - }, // onDragMoveTopicHandler - onDragCancelHandler: function (node, eventInfo, e) { - tempNode = null; - if (tempNode2) tempNode2.setData('dim', 25, 'current'); - tempNode2 = null; - tempInit = false; - // reset the draw synapse positions to false - Metamaps.Mouse.synapseStartCoordinates = []; - Metamaps.Mouse.synapseEndCoordinates = null; - Metamaps.Visualize.mGraph.plot(); - }, // onDragCancelHandler - onDragEndTopicHandler: function (node, eventInfo, e) { - var midpoint = {}, pixelPos, mapping; - - if (tempInit && tempNode2 == null) { - // this means you want to add a new topic, and then a synapse - Metamaps.Create.newTopic.addSynapse = true; - Metamaps.Create.newTopic.open(); - } else if (tempInit && tempNode2 != null) { - // this means you want to create a synapse between two existing topics - Metamaps.Create.newTopic.addSynapse = false; - Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id; - Metamaps.Create.newSynapse.topic2id = tempNode2.getData('topic').id; - tempNode2.setData('dim', 25, 'current'); - Metamaps.Visualize.mGraph.plot(); - midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2; - midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2; - pixelPos = Metamaps.Util.coordsToPixels(midpoint); - $('#new_synapse').css('left', pixelPos.x + "px"); - $('#new_synapse').css('top', pixelPos.y + "px"); - Metamaps.Create.newSynapse.open(); - tempNode = null; - tempNode2 = null; - tempInit = false; - } else if (!tempInit && node && !node.nodeFrom) { - // this means you dragged an existing node, autosave that to the database - - // check whether to save mappings - var checkWhetherToSave = function() { - var map = Metamaps.Active.Map; - - if (!map) return false; - - var mapper = Metamaps.Active.Mapper; - // this case - // covers when it is a public map owned by you - // and also when it's a private map - var activeMappersMap = map.authorizePermissionChange(mapper); - var commonsMap = map.get('permission') === 'commons'; - var realtimeOn = Metamaps.Realtime.status; - - // don't save if commons map, and you have realtime off, - // even if you're map creator - return map && mapper && ((commonsMap && realtimeOn) || (activeMappersMap && !commonsMap)); - } - - if (checkWhetherToSave()) { - mapping = node.getData('mapping'); - mapping.save({ - xloc: node.getPos().x, - yloc: node.getPos().y - }); - // also save any other selected nodes that also got dragged along - var l = Metamaps.Selected.Nodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var n = Metamaps.Selected.Nodes[i]; - if (n !== node) { - mapping = n.getData('mapping'); - mapping.save({ - xloc: n.getPos().x, - yloc: n.getPos().y - }); - } - }; - } - } - }, //onDragEndTopicHandler - canvasClickHandler: function (canvasLoc, e) { - //grab the location and timestamp of the click - var storedTime = Metamaps.Mouse.lastCanvasClick; - var now = Date.now(); //not compatible with IE8 FYI - Metamaps.Mouse.lastCanvasClick = now; - - var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE && !Metamaps.Mouse.didPan) { - if (Metamaps.Active.Map && !authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - else if (Metamaps.Active.Topic) { - Metamaps.GlobalUI.notifyUser("Cannot create in Topic view."); - return; - } - // DOUBLE CLICK - //pop up node creation :) - Metamaps.Create.newTopic.addSynapse = false; - Metamaps.Create.newTopic.x = canvasLoc.x; - Metamaps.Create.newTopic.y = canvasLoc.y; - $('#new_topic').css('left', e.clientX + "px"); - $('#new_topic').css('top', e.clientY + "px"); - Metamaps.Create.newTopic.open(); - } else if (!Metamaps.Mouse.didPan) { - // SINGLE CLICK, no pan - Metamaps.Filter.close(); - Metamaps.TopicCard.hideCard(); - Metamaps.SynapseCard.hideCard(); - Metamaps.Create.newTopic.hide(); - Metamaps.Create.newSynapse.hide(); - $('.rightclickmenu').remove(); - // reset the draw synapse positions to false - Metamaps.Mouse.synapseStartCoordinates = []; - Metamaps.Mouse.synapseEndCoordinates = null; - tempInit = false; - tempNode = null; - tempNode2 = null; - if (!e.ctrlKey && !e.shiftKey) { - Metamaps.Control.deselectAllEdges(); - Metamaps.Control.deselectAllNodes(); - } - } - }, //canvasClickHandler - nodeDoubleClickHandler: function (node, e) { - - Metamaps.TopicCard.showCard(node); - - }, // nodeDoubleClickHandler - edgeDoubleClickHandler: function (adj, e) { - - Metamaps.SynapseCard.showCard(adj, e); - - }, // nodeDoubleClickHandler - nodeWasDoubleClicked: function () { - //grab the timestamp of the click - var storedTime = Metamaps.Mouse.lastNodeClick; - var now = Date.now(); //not compatible with IE8 FYI - Metamaps.Mouse.lastNodeClick = now; - - if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) { - return true; - } else { - return false; - } - }, //nodeWasDoubleClicked; - handleSelectionBeforeDragging: function (node, e) { - // four cases: - // 1 nothing is selected, so pretend you aren't selecting - // 2 others are selected only and shift, so additionally select this one - // 3 others are selected only, no shift: drag only this one - // 4 this node and others were selected, so drag them (just return false) - //return value: deselect node again after? - if (Metamaps.Selected.Nodes.length == 0) { - return 'only-drag-this-one'; - } - if (Metamaps.Selected.Nodes.indexOf(node) == -1) { - if (e.shiftKey) { - Metamaps.Control.selectNode(node,e); - return 'nothing'; - } else { - return 'only-drag-this-one'; - } - } - return 'nothing'; //case 4? - }, // handleSelectionBeforeDragging - selectWithBox: function (e) { - - var sX = Metamaps.Mouse.boxStartCoordinates.x, - sY = Metamaps.Mouse.boxStartCoordinates.y, - eX = Metamaps.Mouse.boxEndCoordinates.x, - eY = Metamaps.Mouse.boxEndCoordinates.y; - - if(!e.shiftKey){ - Metamaps.Control.deselectAllNodes(); - Metamaps.Control.deselectAllEdges(); - } - - //select all nodes that are within the box - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - var x = n.pos.x, - y = n.pos.y; - - if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) { - if(e.shiftKey){ - if(n.selected){ - Metamaps.Control.deselectNode(n); - } - else{ - Metamaps.Control.selectNode(n,e); - } - } - else{ - Metamaps.Control.selectNode(n,e); - } - } - }); - - //Convert selection box coordinates to traditional coordinates (+,+) in upper right - sY = -1 * sY; - eY = -1 * eY - - var edgesToToggle = []; - Metamaps.Synapses.each(function(synapse) { - var e = synapse.get('edge'); - if (edgesToToggle.indexOf(e) === -1) { - edgesToToggle.push(e); - } - }); - edgesToToggle.forEach(function(edge) { - var fromNodeX = edge.nodeFrom.pos.x; - var fromNodeY = -1 * edge.nodeFrom.pos.y; - var toNodeX = edge.nodeTo.pos.x; - var toNodeY = -1 * edge.nodeTo.pos.y; - - var maxX = fromNodeX; - var maxY = fromNodeY; - var minX = fromNodeX; - var minY = fromNodeY; - - //Correct maxX, MaxY values - (toNodeX > maxX) ? (maxX = toNodeX):(minX = toNodeX); - (toNodeY > maxY) ? (maxY = toNodeY):(minY = toNodeY); - - var maxBoxX = sX; - var maxBoxY = sY; - var minBoxX = sX; - var minBoxY = sY; - - //Correct maxBoxX, maxBoxY values - (eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX); - (eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY); - - //Find the slopes from the synapse fromNode to the 4 corners of the selection box - var slopes = []; - slopes.push( (sY - fromNodeY) / (sX - fromNodeX) ); - slopes.push( (sY - fromNodeY) / (eX - fromNodeX) ); - slopes.push( (eY - fromNodeY) / (eX - fromNodeX) ); - slopes.push( (eY - fromNodeY) / (sX - fromNodeX) ); - - var minSlope = slopes[0]; - var maxSlope = slopes[0]; - slopes.forEach(function(entry){ - if(entry > maxSlope) maxSlope = entry; - if(entry < minSlope) minSlope = entry; - }); - - //Find synapse-in-question's slope - var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX); - var b = fromNodeY - synSlope * fromNodeX; - - //Use the selection box edges as test cases for synapse intersection - var testX = sX; - var testY = synSlope * testX + b; - - var selectTest; - - if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){ - selectTest = true; - } - - testX = eX; - testY = synSlope * testX + b; - - if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){ - selectTest = true; - } - - testY = sY; - testX = (testY - b)/synSlope; - - if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){ - selectTest = true; - } - - testY = eY; - testX = (testY - b)/synSlope; - - if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){ - selectTest = true; - } - - //Case where the synapse is wholly enclosed in the seldction box - if(fromNodeX >= minBoxX && fromNodeX <= maxBoxX && fromNodeY >= minBoxY && fromNodeY <= maxBoxY && toNodeX >= minBoxX && toNodeX <= maxBoxX && toNodeY >= minBoxY && toNodeY <= maxBoxY){ - selectTest = true; - } - - //The test synapse was selected! - - if(selectTest){ - // shiftKey = toggleSelect, otherwise - if(e.shiftKey){ - if(Metamaps.Selected.Edges.indexOf(edge) != -1 ){ - Metamaps.Control.deselectEdge(edge); - } - else{ - Metamaps.Control.selectEdge(edge); - } - } - else{ - Metamaps.Control.selectEdge(edge); - } - } - }); - Metamaps.Mouse.boxStartCoordinates = false; - Metamaps.Mouse.boxEndCoordinates = false; - Metamaps.Visualize.mGraph.plot(); - }, // selectWithBox - drawSelectBox: function (eventInfo, e) { - var ctx = Metamaps.Visualize.mGraph.canvas.getCtx(); - - var startX = Metamaps.Mouse.boxStartCoordinates.x, - startY = Metamaps.Mouse.boxStartCoordinates.y, - currX = eventInfo.getPos().x, - currY = eventInfo.getPos().y; - - Metamaps.Visualize.mGraph.canvas.clear(); - Metamaps.Visualize.mGraph.plot(); - - ctx.beginPath(); - ctx.moveTo(startX, startY); - ctx.lineTo(startX, currY); - ctx.lineTo(currX, currY); - ctx.lineTo(currX, startY); - ctx.lineTo(startX, startY); - ctx.strokeStyle = "black"; - ctx.stroke(); - }, // drawSelectBox - selectNodeOnClickHandler: function (node, e) { - if (Metamaps.Visualize.mGraph.busy) return; - - var self = Metamaps.JIT; - - // catch right click on mac, which is often like ctrl+click - if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) { - self.selectNodeOnRightClickHandler(node, e) - return; - } - - // if on a topic page, let alt+click center you on a new topic - if (Metamaps.Active.Topic && e.altKey) { - Metamaps.RGraph.centerOn(node.id); - return; - } - - var check = self.nodeWasDoubleClicked(); - if (check) { - self.nodeDoubleClickHandler(node, e); - return; - } else { - // wait a certain length of time, then check again, then run this code - setTimeout(function () { - if (!Metamaps.JIT.nodeWasDoubleClicked()) { - - var nodeAlreadySelected = node.selected; - - if (!e.shiftKey) { - Metamaps.Control.deselectAllNodes(); - Metamaps.Control.deselectAllEdges(); - } - - if (nodeAlreadySelected) { - Metamaps.Control.deselectNode(node); - } else { - Metamaps.Control.selectNode(node,e); - } - - //trigger animation to final styles - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 500 - }); - Metamaps.Visualize.mGraph.plot(); - } - }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE); - } - }, //selectNodeOnClickHandler - selectNodeOnRightClickHandler: function (node, e) { - // the 'node' variable is a JIT node, the one that was clicked on - // the 'e' variable is the click event - - e.preventDefault(); - e.stopPropagation(); - - if (Metamaps.Visualize.mGraph.busy) return; - - // select the node - Metamaps.Control.selectNode(node, e); - - // delete old right click menu - $('.rightclickmenu').remove(); - // create new menu for clicked on node - var rightclickmenu = document.createElement("div"); - rightclickmenu.className = "rightclickmenu"; - // add the proper options to the menu - var menustring = '
      '; - - var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - var disabled = authorized ? "" : "disabled"; - - if (Metamaps.Active.Map) menustring += '
    • Hide until refresh
      Ctrl+H
      • '; - if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '
    • Remove from map
      Ctrl+M
      • '; - if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '
    • Delete
      Ctrl+D
      • '; - - - if (Metamaps.Active.Topic) { - menustring += '
    • Center this topic
      • '; - } - menustring += '
    • Open in new tab
      • '; - if (Metamaps.Active.Mapper) { - var options = '
      • commons
        • \ -
      • public
        • \ -
      • private
        • \ -
      '; - - menustring += '
    • '; - - menustring += '
    • Change permissions' + options + '
      • '; - - var metacodeOptions = $('#metacodeOptions').html(); - - menustring += '
    • Change metacode' + metacodeOptions + '
      • '; - } - if (Metamaps.Active.Topic) { - - if (!Metamaps.Active.Mapper) { - menustring += '
    • '; - } - - // set up the get sibling menu as a "lazy load" - // only fill in the submenu when they hover over the get siblings list item - var siblingMenu = '
        \ -
      • All
        • \ -
      • \ -
      '; - menustring += '
    • Get siblings' + siblingMenu + '
      • '; - } - - menustring += '
    '; - rightclickmenu.innerHTML = menustring; - - // position the menu where the click happened - var position = {}; - var RIGHTCLICK_WIDTH = 300; - var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static - var SUBMENUS_WIDTH = 256; - var MAX_SUBMENU_HEIGHT = 270; - var windowWidth = $(window).width(); - var windowHeight = $(window).height(); - - if (windowWidth - e.clientX < SUBMENUS_WIDTH) { - position.right = windowWidth - e.clientX; - $(rightclickmenu).addClass('moveMenusToLeft'); - } - else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) { - position.right = windowWidth - e.clientX; - } - else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH + SUBMENUS_WIDTH) { - position.left = e.clientX; - $(rightclickmenu).addClass('moveMenusToLeft'); - } - else position.left = e.clientX; - - if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) { - position.bottom = windowHeight - e.clientY; - $(rightclickmenu).addClass('moveMenusUp'); - } - else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) { - position.top = e.clientY; - $(rightclickmenu).addClass('moveMenusUp'); - } - else position.top = e.clientY; - - $(rightclickmenu).css(position); - //add the menu to the page - $('#wrapper').append(rightclickmenu); - - // attach events to clicks on the list items - - // delete the selected things from the database - if (authorized) { - $('.rc-delete').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.deleteSelected(); - }); - } - - // remove the selected things from the map - if (authorized) { - $('.rc-remove').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.removeSelectedEdges(); - Metamaps.Control.removeSelectedNodes(); - }); - } - - // hide selected nodes and synapses until refresh - $('.rc-hide').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.hideSelectedEdges(); - Metamaps.Control.hideSelectedNodes(); - }); - - // when in radial, center on the topic you picked - $('.rc-center').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Topic.centerOn(node.id); - }); - - // open the entity in a new tab - $('.rc-popout').click(function () { - $('.rightclickmenu').remove(); - var win = window.open('/topics/' + node.id, '_blank'); - win.focus(); - }); - - // change the permission of all the selected nodes and synapses that you were the originator of - $('.rc-permission li').click(function () { - $('.rightclickmenu').remove(); - // $(this).text() will be 'commons' 'public' or 'private' - Metamaps.Control.updateSelectedPermissions($(this).text()); - }); - - // change the metacode of all the selected nodes that you have edit permission for - $('.rc-metacode li li').click(function () { - $('.rightclickmenu').remove(); - // - Metamaps.Control.updateSelectedMetacodes($(this).attr('data-id')); - }); - - - // fetch relatives - var fetched = false; - $('.rc-siblings').hover(function () { - if (!fetched) { - Metamaps.JIT.populateRightClickSiblings(node); - fetched = true; - } - }); - $('.rc-siblings .fetchAll').click(function () { - $('.rightclickmenu').remove(); - // data-id is a metacode id - Metamaps.Topic.fetchRelatives(node); - }); - }, //selectNodeOnRightClickHandler, - populateRightClickSiblings: function(node) { - var self = Metamaps.JIT; - - // depending on how many topics are selected, do different things - /*if (Metamaps.Selected.Nodes.length > 1) { - // we don't bother filling the submenu with - // specific numbers, because there are too many topics - // selected to find those numbers - $('#loadingSiblings').remove(); - return; - }*/ - - var topic = node.getData('topic'); - - // add a loading icon for now - var loader = new CanvasLoader('loadingSiblings'); - loader.setColor('#4FC059'); // default is '#000000' - loader.setDiameter(15); // default is 40 - loader.setDensity(41); // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show(); // Hidden by default - - var topics = Metamaps.Topics.map(function(t){ return t.id }); - var topics_string = topics.join(); - - var successCallback = function(data) { - $('#loadingSiblings').remove(); - - for (var key in data) { - var string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')'; - $('#fetchSiblingList').append('
  • ' + string + '
    • '); - } - - $('.rc-siblings .getSiblings').click(function () { - $('.rightclickmenu').remove(); - // data-id is a metacode id - Metamaps.Topic.fetchRelatives(node, $(this).attr('data-id')); - }); - }; - - $.ajax({ - type: "Get", - url: "/topics/" + topic.id + "/relative_numbers.json?network=" + topics_string, - success: successCallback, - error: function () { - - } - }); - }, - selectEdgeOnClickHandler: function (adj, e) { - if (Metamaps.Visualize.mGraph.busy) return; - - var self = Metamaps.JIT; - - // catch right click on mac, which is often like ctrl+click - if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) { - self.selectEdgeOnRightClickHandler(adj, e) - return; - } - - var check = self.nodeWasDoubleClicked(); - if (check) { - self.edgeDoubleClickHandler(adj, e); - return; - } else { - // wait a certain length of time, then check again, then run this code - setTimeout(function () { - if (!Metamaps.JIT.nodeWasDoubleClicked()) { - - var edgeAlreadySelected = Metamaps.Selected.Edges.indexOf(adj) !== -1; - - if (!e.shiftKey) { - Metamaps.Control.deselectAllNodes(); - Metamaps.Control.deselectAllEdges(); - } - - if (edgeAlreadySelected) { - Metamaps.Control.deselectEdge(adj); - } else { - Metamaps.Control.selectEdge(adj); - } - - Metamaps.Visualize.mGraph.plot(); - } - }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE); - } - }, //selectEdgeOnClickHandler - selectEdgeOnRightClickHandler: function (adj, e) { - // the 'node' variable is a JIT node, the one that was clicked on - // the 'e' variable is the click event - - if (adj.getData('alpha') === 0) return; // don't do anything if the edge is filtered - - var authorized; - - e.preventDefault(); - e.stopPropagation(); - - if (Metamaps.Visualize.mGraph.busy) return; - - Metamaps.Control.selectEdge(adj); - - // delete old right click menu - $('.rightclickmenu').remove(); - // create new menu for clicked on node - var rightclickmenu = document.createElement("div"); - rightclickmenu.className = "rightclickmenu"; - - // add the proper options to the menu - var menustring = '
      '; - - var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - var disabled = authorized ? "" : "disabled"; - - if (Metamaps.Active.Map) menustring += '
    • Hide until refresh
      Ctrl+H
      • '; - if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '
    • Remove from map
      Ctrl+M
      • '; - if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '
    • Delete
      Ctrl+D
      • '; - - if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '
    • '; - - if (Metamaps.Active.Mapper) { - var permOptions = '
      • commons
        • \ -
      • public
        • \ -
      • private
        • \ -
      '; - - menustring += '
    • Change permissions' + permOptions + '
      • '; - } - - menustring += '
    '; - rightclickmenu.innerHTML = menustring; - - // position the menu where the click happened - var position = {}; - var RIGHTCLICK_WIDTH = 300; - var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static - var SUBMENUS_WIDTH = 256; - var MAX_SUBMENU_HEIGHT = 270; - var windowWidth = $(window).width(); - var windowHeight = $(window).height(); - - if (windowWidth - e.clientX < SUBMENUS_WIDTH) { - position.right = windowWidth - e.clientX; - $(rightclickmenu).addClass('moveMenusToLeft'); - } - else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) { - position.right = windowWidth - e.clientX; - } - else position.left = e.clientX; - - if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) { - position.bottom = windowHeight - e.clientY; - $(rightclickmenu).addClass('moveMenusUp'); - } - else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) { - position.top = e.clientY; - $(rightclickmenu).addClass('moveMenusUp'); - } - else position.top = e.clientY; - - $(rightclickmenu).css(position); - - //add the menu to the page - $('#wrapper').append(rightclickmenu); - - - // attach events to clicks on the list items - - // delete the selected things from the database - if (authorized) { - $('.rc-delete').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.deleteSelected(); - }); - } - - // remove the selected things from the map - if (authorized) { - $('.rc-remove').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.removeSelectedEdges(); - Metamaps.Control.removeSelectedNodes(); - }); - } - - // hide selected nodes and synapses until refresh - $('.rc-hide').click(function () { - $('.rightclickmenu').remove(); - Metamaps.Control.hideSelectedEdges(); - Metamaps.Control.hideSelectedNodes(); - }); - - // change the permission of all the selected nodes and synapses that you were the originator of - $('.rc-permission li').click(function () { - $('.rightclickmenu').remove(); - // $(this).text() will be 'commons' 'public' or 'private' - Metamaps.Control.updateSelectedPermissions($(this).text()); - }); - - }, //selectEdgeOnRightClickHandler - SmoothPanning: function () { - - var sx = Metamaps.Visualize.mGraph.canvas.scaleOffsetX, - sy = Metamaps.Visualize.mGraph.canvas.scaleOffsetY, - y_velocity = Metamaps.Mouse.changeInY, // initial y velocity - x_velocity = Metamaps.Mouse.changeInX, // initial x velocity - easing = 1; // frictional value - - easing = 1; - window.clearInterval(panningInt) - panningInt = setInterval(function () { - myTimer() - }, 1); - - function myTimer() { - Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy); - $(document).trigger(Metamaps.JIT.events.pan); - easing = easing * 0.75; - - if (easing < 0.1) window.clearInterval(panningInt); - } - }, // SmoothPanning - renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) { - var ctx = canvas.getCtx(); - // invert edge direction - if (swap) { - var tmp = from; - from = to; - to = tmp; - } - // vect represents a line from tip to tail of the arrow - var vect = new $jit.Complex(to.x - from.x, to.y - from.y); - // scale it - vect.$scale(dim / vect.norm()); - // compute the midpoint of the edge line - var newX = (to.x - from.x) * placement + from.x; - var newY = (to.y - from.y) * placement + from.y; - var midPoint = new $jit.Complex(newX, newY); - - // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint - var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y); - // compute the tail intersection point with the edge line - var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y); - // vector perpendicular to vect - var normal = new $jit.Complex(-vect.y / 2, vect.x / 2); - var v1 = intermediatePoint.add(normal); - var v2 = intermediatePoint.$add(normal.$scale(-1)); - - if (newSynapse) { - ctx.strokeStyle = "#4fc059"; - ctx.lineWidth = 2; - ctx.globalAlpha = 1; - } - ctx.beginPath(); - ctx.moveTo(from.x, from.y); - ctx.lineTo(to.x, to.y); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(v1.x, v1.y); - ctx.lineTo(arrowPoint.x, arrowPoint.y); - ctx.lineTo(v2.x, v2.y); - ctx.stroke(); - }, // renderMidArrow - renderEdgeArrows: function (edgeHelper, adj, synapse, canvas) { - - var self = Metamaps.JIT; - - var directionCat = synapse.get('category'); - var direction = synapse.getDirection(); - - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); - - //plot arrow edge - if (directionCat == "none") { - edgeHelper.line.render({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, canvas); - } else if (directionCat == "both") { - self.renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, true, canvas, 0.7); - self.renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, false, canvas, 0.7); - } else if (directionCat == "from-to") { - var inv = (direction[0] != adj.nodeFrom.id); - self.renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, inv, canvas, 0.7); - self.renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, inv, canvas, 0.3); - } - }, //renderEdgeArrows - zoomIn: function (event) { - Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25); - $(document).trigger(Metamaps.JIT.events.zoom, [event]); - }, - zoomOut: function (event) { - Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8); - $(document).trigger(Metamaps.JIT.events.zoom, [event]); - }, - centerMap: function (canvas) { - var offsetScale = canvas.scaleOffsetX; - - canvas.scale(1/offsetScale,1/offsetScale); - - var offsetX = canvas.translateOffsetX; - var offsetY = canvas.translateOffsetY; - - canvas.translate(-1*offsetX,-1*offsetY); - }, - zoomToBox: function (event) { - var sX = Metamaps.Mouse.boxStartCoordinates.x, - sY = Metamaps.Mouse.boxStartCoordinates.y, - eX = Metamaps.Mouse.boxEndCoordinates.x, - eY = Metamaps.Mouse.boxEndCoordinates.y; - - var canvas = Metamaps.Visualize.mGraph.canvas; - Metamaps.JIT.centerMap(canvas); - - var height = $(document).height(), - width = $(document).width(); - - var spanX = Math.abs(sX - eX); - var spanY = Math.abs(sY - eY); - var ratioX = width / spanX; - var ratioY = height / spanY; - - var newRatio = Math.min(ratioX,ratioY); - - if(canvas.scaleOffsetX *newRatio<= 5 && canvas.scaleOffsetX*newRatio >= 0.2){ - canvas.scale(newRatio,newRatio); - } - else if(canvas.scaleOffsetX * newRatio > 5){ - newRatio = 5/ canvas.scaleOffsetX; - canvas.scale(newRatio,newRatio); - } - else{ - newRatio = 0.2/ canvas.scaleOffsetX; - canvas.scale(newRatio,newRatio); - } - - var cogX = (sX + eX)/2; - var cogY = (sY + eY)/2; - - canvas.translate(-1* cogX, -1* cogY); - $(document).trigger(Metamaps.JIT.events.zoom, [event]); - - Metamaps.Mouse.boxStartCoordinates = false; - Metamaps.Mouse.boxEndCoordinates = false; - Metamaps.Visualize.mGraph.plot(); - - }, - zoomExtents: function (event, canvas, denySelected) { - Metamaps.JIT.centerMap(canvas); - var height = canvas.getSize().height, - width = canvas.getSize().width, - maxX, minX, maxY, minY, counter = 0; - - - if (!denySelected && Metamaps.Selected.Nodes.length > 0) { - var nodes = Metamaps.Selected.Nodes; - } - else { - var nodes = _.values(Metamaps.Visualize.mGraph.graph.nodes); - } - - if(nodes.length > 1){ - nodes.forEach(function (n) { - var x = n.pos.x, - y = n.pos.y; - - if (counter == 0 && n.getData('alpha') == 1){ - maxX = x; - minX = x; - maxY = y; - minY = y; - } - - var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'), - dim = n.getData('dim'), - ctx = canvas.getCtx(); - - var height = 25 * arrayOfLabelLines.length; - - var index, lineWidths = []; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width) - } - var width = Math.max.apply(null, lineWidths) + 8; - - // only adjust these values if the node is not filtered - if (n.getData('alpha') == 1) { - maxX = Math.max(x + width /2,maxX); - maxY = Math.max(y + n.getData("height") + 5 + height,maxY); - minX = Math.min(x - width /2,minX); - minY = Math.min(y - dim,minY); - - counter++; - } - }); - - var spanX = maxX - minX; - var spanY = maxY - minY; - var ratioX = spanX / width; - var ratioY = spanY / height; - - var cogX = (maxX + minX)/2; - var cogY = (maxY + minY)/2; - - canvas.translate(-1* cogX, -1* cogY); - - var newRatio = Math.max(ratioX,ratioY); - var scaleMultiplier = 1/newRatio*0.9; - - if(canvas.scaleOffsetX *scaleMultiplier<= 3 && canvas.scaleOffsetX*scaleMultiplier >= 0.2){ - canvas.scale(scaleMultiplier,scaleMultiplier); - } - else if(canvas.scaleOffsetX * scaleMultiplier > 3){ - scaleMultiplier = 3/ canvas.scaleOffsetX; - canvas.scale(scaleMultiplier,scaleMultiplier); - } - else{ - scaleMultiplier = 0.2/ canvas.scaleOffsetX; - canvas.scale(scaleMultiplier,scaleMultiplier); - } - - $(document).trigger(Metamaps.JIT.events.zoom, [event]); - } - else if(nodes.length == 1){ - nodes.forEach(function (n) { - var x = n.pos.x, - y = n.pos.y; - - canvas.translate(-1* x, -1* y); - $(document).trigger(Metamaps.JIT.events.zoom, [event]); - }); - } - } -}; diff --git a/app/assets/javascripts/src/Metamaps.Router.js b/app/assets/javascripts/src/Metamaps.Router.js index 6d9e2012..cb3ad28c 100644 --- a/app/assets/javascripts/src/Metamaps.Router.js +++ b/app/assets/javascripts/src/Metamaps.Router.js @@ -1,3 +1,5 @@ +if (typeof Metamaps === 'undefined') Metamaps = {}; + (function () { Metamaps.currentPage = ""; diff --git a/app/assets/javascripts/src/Metamaps.Views.js b/app/assets/javascripts/src/Metamaps.Views.js index 00f1b7f6..cd871313 100644 --- a/app/assets/javascripts/src/Metamaps.Views.js +++ b/app/assets/javascripts/src/Metamaps.Views.js @@ -1,3 +1,5 @@ +if (typeof Metamaps === 'undefined') Metamaps = {}; + (function () { Metamaps.Views = {}; diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js deleted file mode 100644 index 67629530..00000000 --- a/app/assets/javascripts/src/Metamaps.js +++ /dev/null @@ -1,5094 +0,0 @@ -var labelType, useGradients, nativeTextSupport, animate; - -(function () { - var ua = navigator.userAgent, - iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), - typeOfCanvas = typeof HTMLCanvasElement, - nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), - textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); - //I'm setting this based on the fact that ExCanvas provides text support for IE - //and that as of today iPhone/iPad current text support is lame - labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML'; - nativeTextSupport = labelType == 'Native'; - useGradients = nativeCanvasSupport; - animate = !(iStuff || !nativeCanvasSupport); -})(); - -// TODO eliminate these 4 global variables -var panningInt; // this variable is used to store a 'setInterval' for the Metamaps.JIT.SmoothPanning() function, so that it can be cleared with window.clearInterval -var tempNode = null, - tempInit = false, - tempNode2 = null; - -Metamaps.Settings = { - embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages - sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database - colors: { - background: '#344A58', - synapses: { - normal: '#888888', - hover: '#888888', - selected: '#FFFFFF' - }, - topics: { - selected: '#FFFFFF' - }, - labels: { - background: '#18202E', - text: '#DDD' - } - } -}; - -Metamaps.Touch = { - touchPos: null, // this stores the x and y values of a current touch event - touchDragNode: null // this stores a reference to a JIT node that is being dragged -}; - -Metamaps.Mouse = { - didPan: false, - didBoxZoom: false, - changeInX: 0, - changeInY: 0, - edgeHoveringOver: false, - boxStartCoordinates: false, - boxEndCoordinates: false, - synapseStartCoordinates: [], - synapseEndCoordinates: null, - lastNodeClick: 0, - lastCanvasClick: 0, - DOUBLE_CLICK_TOLERANCE: 300 -}; - -Metamaps.Selected = { - reset: function () { - var self = Metamaps.Selected; - - self.Nodes = []; - self.Edges = []; - }, - Nodes: [], - Edges: [] -}; - -/* - * - * BACKBONE - * - */ -Metamaps.Backbone.init = function () { - var self = Metamaps.Backbone; - - self.Metacode = Backbone.Model.extend({ - initialize: function () { - var image = new Image(); - image.crossOrigin = "Anonymous"; - image.src = this.get('icon'); - this.set('image',image); - }, - prepareLiForFilter: function () { - var li = ''; - li += '
  • ';       - li += '';       - li += '

    ' + this.get('name').toLowerCase() + '

    • '; - return li; - } - - }); - self.MetacodeCollection = Backbone.Collection.extend({ - model: this.Metacode, - url: '/metacodes', - comparator: function (a, b) { - a = a.get('name').toLowerCase(); - b = b.get('name').toLowerCase(); - return a > b ? 1 : a < b ? -1 : 0; - } - }); - - self.Topic = Backbone.Model.extend({ - urlRoot: '/topics', - blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'], - toJSON: function (options) { - return _.omit(this.attributes, this.blacklist); - }, - save: function (key, val, options) { - - var attrs; - - // Handle both `"key", value` and `{key: value}` -style arguments. - if (key == null || typeof key === 'object') { - attrs = key; - options = val; - } else { - (attrs = {})[key] = val; - } - - var newOptions = options || {}; - var s = newOptions.success; - - var permBefore = this.get('permission'); - - newOptions.success = function (model, response, opt) { - if (s) s(model, response, opt); - model.trigger('saved'); - - if (permBefore === 'private' && model.get('permission') !== 'private') { - model.trigger('noLongerPrivate'); - } - else if (permBefore !== 'private' && model.get('permission') === 'private') { - model.trigger('nowPrivate'); - } - }; - return Backbone.Model.prototype.save.call(this, attrs, newOptions); - }, - initialize: function () { - if (this.isNew()) { - this.set({ - "user_id": Metamaps.Active.Mapper.id, - "desc": '', - "link": '', - "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons' - }); - } - - this.on('changeByOther', this.updateCardView); - this.on('change', this.updateNodeView); - this.on('saved', this.savedEvent); - this.on('nowPrivate', function(){ - var removeTopicData = { - topicid: this.id - }; - - $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]); - }); - this.on('noLongerPrivate', function(){ - var newTopicData = { - mappingid: this.getMapping().id, - topicid: this.id - }; - - $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]); - }); - - this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this); - - }, - authorizeToEdit: function (mapper) { - if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; - else return false; - }, - authorizePermissionChange: function (mapper) { - if (mapper && this.get('user_id') === mapper.get('id')) return true; - else return false; - }, - getDate: function () { - - }, - getMetacode: function () { - return Metamaps.Metacodes.get(this.get('metacode_id')); - }, - getMapping: function () { - - if (!Metamaps.Active.Map) return false; - - return Metamaps.Mappings.findWhere({ - map_id: Metamaps.Active.Map.id, - topic_id: this.isNew() ? this.cid : this.id - }); - }, - createNode: function () { - var mapping; - var node = { - adjacencies: [], - id: this.isNew() ? this.cid : this.id, - name: this.get('name') - }; - - if (Metamaps.Active.Map) { - mapping = this.getMapping(); - node.data = { - $mapping: null, - $mappingID: mapping.id - }; - } - - return node; - }, - updateNode: function () { - var mapping; - var node = this.get('node'); - node.setData('topic', this); - - if (Metamaps.Active.Map) { - mapping = this.getMapping(); - node.setData('mapping', mapping); - } - - return node; - }, - savedEvent: function() { - Metamaps.Realtime.sendTopicChange(this); - }, - updateViews: function() { - var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; - var node = this.get('node'); - // update topic card, if this topic is the one open there - if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { - Metamaps.TopicCard.showCard(node); - } - - // update the node on the map - if (onPageWithTopicCard && node) { - node.name = this.get('name'); - Metamaps.Visualize.mGraph.plot(); - } - }, - updateCardView: function() { - var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; - var node = this.get('node'); - // update topic card, if this topic is the one open there - if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { - Metamaps.TopicCard.showCard(node); - } - }, - updateNodeView: function() { - var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic; - var node = this.get('node'); - - // update the node on the map - if (onPageWithTopicCard && node) { - node.name = this.get('name'); - Metamaps.Visualize.mGraph.plot(); - } - } - }); - - self.TopicCollection = Backbone.Collection.extend({ - model: self.Topic, - url: '/topics' - }); - - self.Synapse = Backbone.Model.extend({ - urlRoot: '/synapses', - blacklist: ['edge', 'created_at', 'updated_at'], - toJSON: function (options) { - return _.omit(this.attributes, this.blacklist); - }, - save: function (key, val, options) { - - var attrs; - - // Handle both `"key", value` and `{key: value}` -style arguments. - if (key == null || typeof key === 'object') { - attrs = key; - options = val; - } else { - (attrs = {})[key] = val; - } - - var newOptions = options || {}; - var s = newOptions.success; - - var permBefore = this.get('permission'); - - newOptions.success = function (model, response, opt) { - if (s) s(model, response, opt); - model.trigger('saved'); - - if (permBefore === 'private' && model.get('permission') !== 'private') { - model.trigger('noLongerPrivate'); - } - else if (permBefore !== 'private' && model.get('permission') === 'private') { - model.trigger('nowPrivate'); - } - }; - return Backbone.Model.prototype.save.call(this, attrs, newOptions); - }, - initialize: function () { - if (this.isNew()) { - this.set({ - "user_id": Metamaps.Active.Mapper.id, - "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons', - "category": "from-to" - }); - } - - this.on('changeByOther', this.updateCardView); - this.on('change', this.updateEdgeView); - this.on('saved', this.savedEvent); - this.on('noLongerPrivate', function(){ - var newSynapseData = { - mappingid: this.getMapping().id, - synapseid: this.id - }; - - $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]); - }); - this.on('nowPrivate', function(){ - $(document).trigger(Metamaps.JIT.events.removeSynapse, [{ - synapseid: this.id - }]); - }); - - this.on('change:desc', Metamaps.Filter.checkSynapses, this); - }, - prepareLiForFilter: function () { - var li = ''; - li += '
  • ';       - li += '
    • '; - return li; - }, - authorizeToEdit: function (mapper) { - if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; - else return false; - }, - authorizePermissionChange: function (mapper) { - if (mapper && this.get('user_id') === mapper.get('id')) return true; - else return false; - }, - getTopic1: function () { - return Metamaps.Topics.get(this.get('node1_id')); - }, - getTopic2: function () { - return Metamaps.Topics.get(this.get('node2_id')); - }, - getDirection: function () { - return [ - this.getTopic1().get('node').id, - this.getTopic2().get('node').id - ]; - }, - getMapping: function () { - - if (!Metamaps.Active.Map) return false; - - return Metamaps.Mappings.findWhere({ - map_id: Metamaps.Active.Map.id, - synapse_id: this.isNew() ? this.cid : this.id - }); - }, - createEdge: function () { - var mapping, mappingID; - var synapseID = this.isNew() ? this.cid : this.id; - - var edge = { - nodeFrom: this.get('node1_id'), - nodeTo: this.get('node2_id'), - data: { - $synapses: [], - $synapseIDs: [synapseID], - } - }; - - if (Metamaps.Active.Map) { - mapping = this.getMapping(); - mappingID = mapping.isNew() ? mapping.cid : mapping.id; - edge.data.$mappings = []; - edge.data.$mappingIDs = [mappingID]; - } - - return edge; - }, - updateEdge: function () { - var mapping; - var edge = this.get('edge'); - edge.getData('synapses').push(this); - - if (Metamaps.Active.Map) { - mapping = this.getMapping(); - edge.getData('mappings').push(mapping); - } - - return edge; - }, - savedEvent: function() { - Metamaps.Realtime.sendSynapseChange(this); - }, - updateViews: function() { - this.updateCardView(); - this.updateEdgeView(); - }, - updateCardView: function() { - var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic; - var edge = this.get('edge'); - - // update synapse card, if this synapse is the one open there - if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) { - Metamaps.SynapseCard.showCard(edge); - } - }, - updateEdgeView: function() { - var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic; - var edge = this.get('edge'); - - // update the edge on the map - if (onPageWithSynapseCard && edge) { - Metamaps.Visualize.mGraph.plot(); - } - } - }); - - self.SynapseCollection = Backbone.Collection.extend({ - model: self.Synapse, - url: '/synapses' - }); - - self.Mapping = Backbone.Model.extend({ - urlRoot: '/mappings', - blacklist: ['created_at', 'updated_at'], - toJSON: function (options) { - return _.omit(this.attributes, this.blacklist); - }, - initialize: function () { - if (this.isNew()) { - this.set({ - "user_id": Metamaps.Active.Mapper.id, - "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null - }); - } - }, - getMap: function () { - return Metamaps.Map.get(this.get('map_id')); - }, - getTopic: function () { - if (this.get('category') === 'Topic') return Metamaps.Topic.get(this.get('topic_id')); - else return false; - }, - getSynapse: function () { - if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id')); - else return false; - } - }); - - self.MappingCollection = Backbone.Collection.extend({ - model: self.Mapping, - url: '/mappings' - }); - - Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection(); - - Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection(); - - Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection(); - - Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection(); - - // this is for topic view - Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection(); - - if (Metamaps.Active.Map) { - Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection(); - - Metamaps.Active.Map = new self.Map(Metamaps.Active.Map); - } - - if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic); - - //attach collection event listeners - self.attachCollectionEvents = function () { - - Metamaps.Topics.on("add remove", function(topic){ - Metamaps.Map.InfoBox.updateNumbers(); - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkMappers(); - }); - - Metamaps.Synapses.on("add remove", function(synapse){ - Metamaps.Map.InfoBox.updateNumbers(); - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMappers(); - }); - - if (Metamaps.Active.Map) { - Metamaps.Mappings.on("add remove", function(mapping){ - Metamaps.Map.InfoBox.updateNumbers(); - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkMappers(); - }); - } - } - self.attachCollectionEvents(); -}; // end Metamaps.Backbone.init - - -/* - * - * CREATE - * - */ -Metamaps.Create = { - isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open - selectedMetacodeSet: null, - selectedMetacodeSetIndex: null, - selectedMetacodeNames: [], - newSelectedMetacodeNames: [], - selectedMetacodes: [], - newSelectedMetacodes: [], - init: function () { - var self = Metamaps.Create; - self.newTopic.init(); - self.newSynapse.init(); - - ////// - ////// - //// SWITCHING METACODE SETS - - $('#metacodeSwitchTabs').tabs({ - selected: self.selectedMetacodeSetIndex - }).addClass("ui-tabs-vertical ui-helper-clearfix"); - $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); - $('.customMetacodeList li').click(self.toggleMetacodeSelected); // within the custom metacode set tab - }, - toggleMetacodeSelected: function () { - var self = Metamaps.Create; - - if ($(this).attr('class') != 'toggledOff') { - $(this).addClass('toggledOff'); - var value_to_remove = $(this).attr('id'); - var name_to_remove = $(this).attr('data-name'); - self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1); - self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1); - } else if ($(this).attr('class') == 'toggledOff') { - $(this).removeClass('toggledOff'); - self.newSelectedMetacodes.push($(this).attr('id')); - self.newSelectedMetacodeNames.push($(this).attr('data-name')); - } - }, - updateMetacodeSet: function (set, index, custom) { - - if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) { - alert('Please select at least one metacode to use!'); - return false; - } - - var codesToSwitchToIds; - var metacodeModels = new Metamaps.Backbone.MetacodeCollection(); - Metamaps.Create.selectedMetacodeSetIndex = index; - Metamaps.Create.selectedMetacodeSet = "metacodeset-" + set; - - if (!custom) { - codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(','); - $('.customMetacodeList li').addClass('toggledOff'); - Metamaps.Create.selectedMetacodes = []; - Metamaps.Create.selectedMetacodeNames = []; - Metamaps.Create.newSelectedMetacodes = []; - Metamaps.Create.newSelectedMetacodeNames = []; - } - else if (custom) { - // uses .slice to avoid setting the two arrays to the same actual array - Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0); - Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0); - codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0); - } - - // sort by name - for (var i = 0; i < codesToSwitchToIds.length; i++) { - metacodeModels.add( Metamaps.Metacodes.get(codesToSwitchToIds[i]) ); - }; - metacodeModels.sort(); - - $('#metacodeImg, #metacodeImgTitle').empty(); - $('#metacodeImg').removeData('cloudcarousel'); - var newMetacodes = ""; - metacodeModels.each(function(metacode){ - newMetacodes += '' + metacode.get('name') + ''; - }); - - $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({ - titleBox: $('#metacodeImgTitle'), - yRadius: 40, - xRadius: 190, - xPos: 170, - yPos: 40, - speed: 0.3, - mouseWheel: true, - bringToFront: true - }); - - Metamaps.GlobalUI.closeLightbox(); - $('#topic_name').focus(); - - var mdata = { - "metacodes": { - "value": custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet - } - }; - $.ajax({ - type: "POST", - dataType: 'json', - url: "/user/updatemetacodes", - data: mdata, - success: function (data) { - console.log('selected metacodes saved'); - }, - error: function () { - console.log('failed to save selected metacodes'); - } - }); - }, - - cancelMetacodeSetSwitch: function () { - var self = Metamaps.Create; - self.isSwitchingSet = false; - - if (self.selectedMetacodeSet != "metacodeset-custom") { - $('.customMetacodeList li').addClass('toggledOff'); - self.selectedMetacodes = []; - self.selectedMetacodeNames = []; - self.newSelectedMetacodes = []; - self.newSelectedMetacodeNames = []; - } else { // custom set is selected - // reset it to the current actual selection - $('.customMetacodeList li').addClass('toggledOff'); - for (var i = 0; i < self.selectedMetacodes.length; i++) { - $('#' + self.selectedMetacodes[i]).removeClass('toggledOff'); - }; - // uses .slice to avoid setting the two arrays to the same actual array - self.newSelectedMetacodeNames = self.selectedMetacodeNames.slice(0); - self.newSelectedMetacodes = self.selectedMetacodes.slice(0); - } - $('#metacodeSwitchTabs').tabs("select", self.selectedMetacodeSetIndex); - $('#topic_name').focus(); - }, - newTopic: { - init: function () { - - $('#topic_name').keyup(function () { - Metamaps.Create.newTopic.name = $(this).val(); - }); - - // initialize the autocomplete results for the metacode spinner - $('#topic_name').typeahead([ - { - name: 'topic_autocomplete', - limit: 8, - template: $('#topicAutocompleteTemplate').html(), - remote: { - url: '/topics/autocomplete_topic?term=%QUERY' - }, - engine: Hogan - } - ]); - - // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete - $('#topic_name').bind('typeahead:selected', function (event, datum, dataset) { - Metamaps.Topic.getTopicFromAutocomplete(datum.id); - }); - - // initialize metacode spinner and then hide it - $("#metacodeImg").CloudCarousel({ - titleBox: $('#metacodeImgTitle'), - yRadius: 40, - xRadius: 190, - xPos: 170, - yPos: 40, - speed: 0.3, - mouseWheel: true, - bringToFront: true - }); - $('.new_topic').hide(); - }, - name: null, - newId: 1, - beingCreated: false, - metacode: null, - x: null, - y: null, - addSynapse: false, - open: function () { - $('#new_topic').fadeIn('fast', function () { - $('#topic_name').focus(); - }); - Metamaps.Create.newTopic.beingCreated = true; - Metamaps.Create.newTopic.name = ""; - }, - hide: function () { - $('#new_topic').fadeOut('fast'); - $("#topic_name").typeahead('setQuery', ''); - Metamaps.Create.newTopic.beingCreated = false; - } - }, - newSynapse: { - init: function () { - var self = Metamaps.Create.newSynapse; - - $('#synapse_desc').keyup(function () { - Metamaps.Create.newSynapse.description = $(this).val(); - }); - - // initialize the autocomplete results for synapse creation - $('#synapse_desc').typeahead([ - { - name: 'synapse_autocomplete', - template: "
    {{label}}
    ", - remote: { - url: '/search/synapses?term=%QUERY' - }, - engine: Hogan - }, - { - name: 'existing_synapses', - limit: 50, - template: $('#synapseAutocompleteTemplate').html(), - remote: { - url: '/search/synapses', - replace: function () { - return self.getSearchQuery(); - } - }, - engine: Hogan, - header: "

    Existing synapses

    " - } - ]); - - $('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) { - if (datum.id) { // if they clicked on an existing synapse get it - Metamaps.Synapse.getSynapseFromAutocomplete(datum.id); - } - else { - Metamaps.Create.newSynapse.description = datum.value; - Metamaps.Synapse.createSynapseLocally(); - } - }); - }, - beingCreated: false, - description: null, - topic1id: null, - topic2id: null, - newSynapseId: null, - open: function () { - $('#new_synapse').fadeIn('fast', function () { - $('#synapse_desc').focus(); - }); - Metamaps.Create.newSynapse.beingCreated = true; - }, - hide: function () { - $('#new_synapse').fadeOut('fast'); - $("#synapse_desc").typeahead('setQuery', ''); - Metamaps.Create.newSynapse.beingCreated = false; - Metamaps.Create.newTopic.addSynapse = false; - Metamaps.Create.newSynapse.topic1id = 0; - Metamaps.Create.newSynapse.topic2id = 0; - Metamaps.Mouse.synapseStartCoordinates = []; - Metamaps.Visualize.mGraph.plot(); - }, - getSearchQuery: function () { - var self = Metamaps.Create.newSynapse; - - if (Metamaps.Selected.Nodes.length < 2) { - return '/search/synapses?topic1id=' + self.topic1id + '&topic2id=' + self.topic2id; - } else return ''; - } - } -}; // end Metamaps.Create - - -////////////////// TOPIC AND SYNAPSE CARDS ////////////////////////// - - -/* - * - * TOPICCARD - * - */ -Metamaps.TopicCard = { - openTopicCard: null, //stores the topic that's currently open - authorizedToEdit: false, // stores boolean for edit permission for open topic card - init: function () { - var self = Metamaps.TopicCard; - - // initialize best_in_place editing - $('.authenticated div.permission.canEdit .best_in_place').best_in_place(); - - Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html()); - - // initialize topic card draggability and resizability - $('.showcard').draggable({ - handle: ".metacodeImage" - }); - - embedly('on', 'card.rendered', self.embedlyCardRendered); - }, - /** - * Will open the Topic Card for the node that it's passed - * @param {$jit.Graph.Node} node - */ - showCard: function (node) { - var self = Metamaps.TopicCard; - - var topic = node.getData('topic'); - - self.openTopicCard = topic; - self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper); - //populate the card that's about to show with the right topics data - self.populateShowCard(topic); - $('.showcard').fadeIn('fast'); - }, - hideCard: function () { - var self = Metamaps.TopicCard; - - $('.showcard').fadeOut('fast'); - self.openTopicCard = null; - self.authorizedToEdit = false; - }, - embedlyCardRendered: function (iframe) { - var self = Metamaps.TopicCard; - - $('#embedlyLinkLoader').hide(); - - // means that the embedly call returned 404 not found - if ($('#embedlyLink')[0]) { - $('#embedlyLink').css('display', 'block').fadeIn('fast'); - $('.embeds').addClass('nonEmbedlyLink'); - } - - $('.CardOnGraph').addClass('hasAttachment'); - if (self.authorizedToEdit) { - $('.embeds').append('
    '); - $('#linkremove').click(self.removeLink); - } - }, - removeLink: function () { - var self = Metamaps.TopicCard; - self.openTopicCard.save({ - link: null - }); - $('.embeds').empty().removeClass('nonEmbedlyLink'); - $('#addLinkInput input').val(""); - $('.attachments').removeClass('hidden'); - $('.CardOnGraph').removeClass('hasAttachment'); - }, - bindShowCardListeners: function (topic) { - var self = Metamaps.TopicCard; - var showCard = document.getElementById('showcard'); - - var authorized = self.authorizedToEdit; - - // get mapper image - var setMapperImage = function (mapper) { - $('.contributorIcon').attr('src', mapper.get('image')); - }; - Metamaps.Mapper.get(topic.get('user_id'), setMapperImage); - - // starting embed.ly - var resetFunc = function () { - $('#addLinkInput input').val(""); - $('#addLinkInput input').focus(); - }; - var inputEmbedFunc = function (event) { - - var element = this; - setTimeout(function () { - var text = $(element).val(); - if (event.type=="paste" || (event.type=="keyup" && event.which==13)){ - if (text.slice(0, 4) !== 'http') { - text='http://'+text; - } - topic.save({ - link: text - }); - var embedlyEl = $('', { - id: 'embedlyLink', - 'data-card-chrome': '0', - 'data-card-description': '0', - href: text - }).html(text); - $('.attachments').addClass('hidden'); - $('.embeds').append(embedlyEl); - $('.embeds').append('
    '); - var loader = new CanvasLoader('embedlyLinkLoader'); - loader.setColor('#4fb5c0'); // default is '#000000' - loader.setDiameter(28); // default is 40 - loader.setDensity(41); // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show(); // Hidden by default - var e = embedly('card', document.getElementById('embedlyLink')); - if (!e) { - self.handleInvalidLink(); - } - } - }, 100); - }; - $('#addLinkReset').click(resetFunc); - $('#addLinkInput input').bind("paste keyup",inputEmbedFunc); - - // initialize the link card, if there is a link - if (topic.get('link') && topic.get('link') !== '') { - var loader = new CanvasLoader('embedlyLinkLoader'); - loader.setColor('#4fb5c0'); // default is '#000000' - loader.setDiameter(28); // default is 40 - loader.setDensity(41); // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show(); // Hidden by default - var e = embedly('card', document.getElementById('embedlyLink')); - if (!e) { - self.handleInvalidLink(); - } - } - - - var selectingMetacode = false; - // attach the listener that shows the metacode title when you hover over the image - $('.showcard .metacodeImage').mouseenter(function () { - $('.showcard .icon').css('z-index', '4'); - $('.showcard .metacodeTitle').show(); - }); - $('.showcard .linkItem.icon').mouseleave(function () { - if (!selectingMetacode) { - $('.showcard .metacodeTitle').hide(); - $('.showcard .icon').css('z-index', '1'); - } - }); - - var metacodeLiClick = function () { - selectingMetacode = false; - var metacodeId = parseInt($(this).attr('data-id')); - var metacode = Metamaps.Metacodes.get(metacodeId); - $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name')) - .append('
    ') - .attr('class', 'metacodeTitle mbg' + metacode.id); - $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')'); - topic.save({ - metacode_id: metacode.id - }); - Metamaps.Visualize.mGraph.plot(); - $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge'); - $('.metacodeTitle').hide(); - $('.showcard .icon').css('z-index', '1'); - }; - - var openMetacodeSelect = function (event) { - var windowWidth; - var showcardLeft; - var TOPICCARD_WIDTH = 300; - var METACODESELECT_WIDTH = 404; - var distanceFromEdge; - - var MAX_METACODELIST_HEIGHT = 270; - var windowHeight; - var showcardTop; - var topicTitleHeight; - var distanceFromBottom; - - if (!selectingMetacode) { - selectingMetacode = true; - - // this is to make sure the metacode - // select is accessible onscreen, when opened - // while topic card is close to the right - // edge of the screen - windowWidth = $(window).width(); - showcardLeft = parseInt($('.showcard').css('left')); - distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH); - if (distanceFromEdge < METACODESELECT_WIDTH) { - $('.metacodeSelect').addClass('onRightEdge'); - } - - // this is to make sure the metacode - // select is accessible onscreen, when opened - // while topic card is close to the bottom - // edge of the screen - windowHeight = $(window).height(); - showcardTop = parseInt($('.showcard').css('top')); - topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom')); - heightOfSetList = $('.showcard .metacodeSelect').height(); - distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight); - if (distanceFromBottom < MAX_METACODELIST_HEIGHT) { - $('.metacodeSelect').addClass('onBottomEdge'); - } - - $('.metacodeSelect').show(); - event.stopPropagation(); - } - }; - - var hideMetacodeSelect = function () { - selectingMetacode = false; - $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge'); - $('.metacodeTitle').hide(); - $('.showcard .icon').css('z-index', '1'); - }; - - if (authorized) { - $('.showcard .metacodeTitle').click(openMetacodeSelect); - $('.showcard').click(hideMetacodeSelect); - $('.metacodeSelect > ul > li').click(function (event){ - event.stopPropagation(); - }); - $('.metacodeSelect li li').click(metacodeLiClick); - - var bipName = $(showCard).find('.best_in_place_name'); - bipName.bind("best_in_place:activate", function () { - var $el = bipName.find('textarea'); - var el = $el[0]; - - $el.attr('maxlength', '140'); - - $('.showcard .title').append('
    '); - - var callback = function (data) { - $('.nameCounter.forTopic').html(data.all + '/140'); - }; - Countable.live(el, callback); - }); - bipName.bind("best_in_place:deactivate", function () { - $('.nameCounter.forTopic').remove(); - }); - - //bind best_in_place ajax callbacks - bipName.bind("ajax:success", function () { - var name = Metamaps.Util.decodeEntities($(this).html()); - topic.set("name", name); - topic.trigger('saved'); - }); - - $(showCard).find('.best_in_place_desc').bind("ajax:success", function () { - this.innerHTML = this.innerHTML.replace(/\r/g, ''); - var desc = $(this).html() === $(this).data('nil') ? "" : $(this).html(); - topic.set("desc", desc); - topic.trigger('saved'); - }); - } - - - var permissionLiClick = function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - topic.save({ - permission: permission - }); - $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('.showcard .permissionSelect').remove(); - event.stopPropagation(); - }; - - var openPermissionSelect = function (event) { - if (!selectingPermission) { - selectingPermission = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - if ($(this).hasClass('co')) { - $(this).append('
    '); - } else if ($(this).hasClass('pu')) { - $(this).append('
    '); - } else if ($(this).hasClass('pr')) { - $(this).append('
    '); - } - $('.showcard .permissionSelect li').click(permissionLiClick); - event.stopPropagation(); - } - }; - - var hidePermissionSelect = function () { - selectingPermission = false; - $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.showcard .permissionSelect').remove(); - }; - // ability to change permission - var selectingPermission = false; - if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { - $('.showcard .yourTopic .mapPerm').click(openPermissionSelect); - $('.showcard').click(hidePermissionSelect); - } - - $('.links .mapCount').unbind().click(function(event){ - $('.mapCount .tip').toggle(); - $('.showcard .hoverTip').toggleClass('hide'); - event.stopPropagation(); - }); - $('.mapCount .tip').unbind().click(function(event){ - event.stopPropagation(); - }); - $('.showcard').unbind('.hideTip').bind('click.hideTip', function(){ - $('.mapCount .tip').hide(); - $('.showcard .hoverTip').removeClass('hide'); - }); - - $('.mapCount .tip li a').click(Metamaps.Router.intercept); - - var originalText = $('.showMore').html(); - $('.mapCount .tip .showMore').unbind().toggle( - function(event){ - $('.extraText').toggleClass("hideExtra"); - $('.showMore').html('Show less...'); - }, - function(event){ - $('.extraText').toggleClass("hideExtra"); - $('.showMore').html(originalText); - }); - - $('.mapCount .tip showMore').unbind().click(function(event){ - event.stopPropagation(); - }); - }, - handleInvalidLink: function() { - var self = Metamaps.TopicCard; - - self.removeLink(); - Metamaps.GlobalUI.notifyUser("Invalid link"); - }, - populateShowCard: function (topic) { - var self = Metamaps.TopicCard; - - var showCard = document.getElementById('showcard'); - - $(showCard).find('.permission').remove(); - - var topicForTemplate = self.buildObject(topic); - var html = self.generateShowcardHTML.render(topicForTemplate); - - if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { - var perm = document.createElement('div'); - - var string = 'permission canEdit'; - if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic'; - perm.className = string; - perm.innerHTML = html; - showCard.appendChild(perm); - } else { - var perm = document.createElement('div'); - perm.className = 'permission cannotEdit'; - perm.innerHTML = html; - showCard.appendChild(perm); - } - - Metamaps.TopicCard.bindShowCardListeners(topic); - }, - generateShowcardHTML: null, // will be initialized into a Hogan template within init function - //generateShowcardHTML - buildObject: function (topic) { - var self=Metamaps.TopicCard; - - var nodeValues = {}; - - var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - - } else { - - } - - var desc_nil = "Click to add description..."; - - nodeValues.attachmentsHidden = ''; - if (topic.get('link') && topic.get('link')!== '') { - nodeValues.embeds = '    '; - nodeValues.embeds += topic.get('link'); - nodeValues.embeds += '
    '; - nodeValues.attachmentsHidden = 'hidden'; - nodeValues.hasAttachment = "hasAttachment"; - } - else { - nodeValues.embeds = ''; - nodeValues.hasAttachment = ''; - } - - if (authorized) { - nodeValues.attachments = '
    '; - nodeValues.attachments += '
    '; - nodeValues.attachments += '
    '; - } else { - nodeValues.attachmentsHidden = 'hidden'; - nodeValues.attachments = ''; - } - - var inmapsAr = topic.get("inmaps"); - var inmapsLinks = topic.get("inmapsLinks"); - nodeValues.inmaps =''; - if (inmapsAr.length < 6) { - for (i = 0; i < inmapsAr.length; i++) { - var url = "/maps/" + inmapsLinks[i]; - nodeValues.inmaps += '
  • ' + inmapsAr[i]+ '
    • '; - } - } - else { - for (i = 0; i < 5; i++){ - var url = "/maps/" + inmapsLinks[i]; - nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • '; - } - extra = inmapsAr.length - 5; - nodeValues.inmaps += '
  • See ' + extra + ' more...
    • ' - for (i = 5; i < inmapsAr.length; i++){ - var url = "/maps/" + inmapsLinks[i]; - nodeValues.inmaps += '
  • ' + inmapsAr[i]+ '
    • '; - } - } - nodeValues.permission = topic.get("permission"); - nodeValues.mk_permission = topic.get("permission").substring(0, 2); - nodeValues.map_count = topic.get("map_count").toString(); - nodeValues.synapse_count = topic.get("synapse_count").toString(); - nodeValues.id = topic.isNew() ? topic.cid : topic.id; - nodeValues.metacode = topic.getMetacode().get("name"); - nodeValues.metacode_class = 'mbg' + topic.get('metacode_id'); - nodeValues.imgsrc = topic.getMetacode().get("icon"); - nodeValues.name = topic.get("name"); - nodeValues.userid = topic.get("user_id"); - nodeValues.username = topic.get("user_name"); - nodeValues.date = topic.getDate(); - // the code for this is stored in /views/main/_metacodeOptions.html.erb - nodeValues.metacode_select = $('#metacodeOptions').html(); - nodeValues.desc_nil = desc_nil; - nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc"); - return nodeValues; - } -}; // end Metamaps.TopicCard - - -/* - * - * SYNAPSECARD - * - */ -Metamaps.SynapseCard = { - openSynapseCard: null, - showCard: function (edge, e) { - var self = Metamaps.SynapseCard; - - //reset so we don't interfere with other edges, but first, save its x and y - var myX = $('#edit_synapse').css('left'); - var myY = $('#edit_synapse').css('top'); - $('#edit_synapse').remove(); - - //so label is missing while editing - Metamaps.Control.deselectEdge(edge); - - var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; - var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse - - //create the wrapper around the form elements, including permissions - //classes to make best_in_place happy - var edit_div = document.createElement('div'); - edit_div.innerHTML = '
    '; - edit_div.setAttribute('id', 'edit_synapse'); - if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { - edit_div.className = 'permission canEdit'; - edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : ''; - } else { - edit_div.className = 'permission cannotEdit'; - } - $('#wrapper').append(edit_div); - - self.populateShowCard(edge, synapse); - - //drop it in the right spot, activate it - $('#edit_synapse').css('position', 'absolute'); - if (e) { - $('#edit_synapse').css('left', e.clientX); - $('#edit_synapse').css('top', e.clientY); - } else { - $('#edit_synapse').css('left', myX); - $('#edit_synapse').css('top', myY); - } - //$('#edit_synapse_name').click(); //required in case name is empty - //$('#edit_synapse_name input').focus(); - $('#edit_synapse').show(); - - self.openSynapseCard = edge; - }, - - hideCard: function () { - $('#edit_synapse').remove(); - Metamaps.SynapseCard.openSynapseCard = null; - }, - - populateShowCard: function (edge, synapse) { - var self = Metamaps.SynapseCard; - - self.add_synapse_count(edge); - self.add_desc_form(synapse); - self.add_drop_down(edge, synapse); - self.add_user_info(synapse); - self.add_perms_form(synapse); - self.add_direction_form(synapse); - }, - add_synapse_count: function (edge) { - var count = edge.getData("synapses").length; - - $('#editSynUpperBar').append('
    ' + count + '
    ') - }, - add_desc_form: function (synapse) { - var data_nil = 'Click to add description.'; - - // TODO make it so that this would work even in sandbox mode, - // currently with Best_in_place it won't - - //desc editing form - $('#editSynUpperBar').append('
    '); - $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc'); - $('#edit_synapse_desc').attr('data-object', 'synapse'); - $('#edit_synapse_desc').attr('data-attribute', 'desc'); - $('#edit_synapse_desc').attr('data-type', 'textarea'); - $('#edit_synapse_desc').attr('data-nil', data_nil); - $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id); - $('#edit_synapse_desc').html(synapse.get("desc")); - - //if edge data is blank or just whitespace, populate it with data_nil - if ($('#edit_synapse_desc').html().trim() == '') { - if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { - $('#edit_synapse_desc').html(data_nil); - } - else { - $('#edit_synapse_desc').html("(no description)"); - } - } - - $('#edit_synapse_desc').bind("ajax:success", function () { - var desc = $(this).html(); - if (desc == data_nil) { - synapse.set("desc", ''); - } else { - synapse.set("desc", desc); - } - synapse.trigger('saved'); - Metamaps.Control.selectEdge(synapse.get('edge')); - Metamaps.Visualize.mGraph.plot(); - }); - }, - add_drop_down: function (edge, synapse) { - var list, i, synapses, l, desc; - - synapses = edge.getData("synapses"); - l = synapses.length; - - if (l > 1) { - // append the element that you click to show dropdown select - $('#editSynUpperBar').append(''); - $('#dropdownSynapses').click(function(e){ - e.preventDefault(); - e.stopPropagation(); // stop it from immediately closing it again - $('#switchSynapseList').toggle(); - }); - // hide the dropdown again if you click anywhere else on the synapse card - $('#edit_synapse').click(function(){ - $('#switchSynapseList').hide(); - }); - - // generate the list of other synapses - list = '
      '; - for (i = 0; i < l; i++) { - if (synapses[i] !== synapse) { // don't add the current one to the list - desc = synapses[i].get('desc'); - desc = desc === "" || desc === null ? "(no description)" : desc; - list += '
    • ' + desc + '
      • '; - } - } - list += '
    ' - // add the list of the other synapses - $('#editSynLowerBar').append(list); - - // attach click listeners to list items that - // will cause it to switch the displayed synapse - // when you click it - $('#switchSynapseList li').click(function(e){ - e.stopPropagation(); - var index = parseInt($(this).attr('data-synapse-index')); - edge.setData('displayIndex', index); - Metamaps.Visualize.mGraph.plot(); - Metamaps.SynapseCard.showCard(edge, false); - }); - } - }, - add_user_info: function (synapse) { - var u = '
    '; - u += ' ' - u += '
    ' + synapse.get("user_name") + '
    '; - $('#editSynLowerBar').append(u); - - // get mapper image - var setMapperImage = function (mapper) { - $('#edgeUser img').attr('src', mapper.get('image')); - }; - Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage); - }, - - add_perms_form: function (synapse) { - //permissions - if owner, also allow permission editing - $('#editSynLowerBar').append('
    '); - - // ability to change permission - var selectingPermission = false; - var permissionLiClick = function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - synapse.save({ - permission: permission - }); - $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('#edit_synapse .permissionSelect').remove(); - event.stopPropagation(); - }; - - var openPermissionSelect = function (event) { - if (!selectingPermission) { - selectingPermission = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - if ($(this).hasClass('co')) { - $(this).append('
    '); - } else if ($(this).hasClass('pu')) { - $(this).append('
    '); - } else if ($(this).hasClass('pr')) { - $(this).append('
    '); - } - $('#edit_synapse .permissionSelect li').click(permissionLiClick); - event.stopPropagation(); - } - }; - - var hidePermissionSelect = function () { - selectingPermission = false; - $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('#edit_synapse .permissionSelect').remove(); - }; - - if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { - $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect); - $('#edit_synapse').click(hidePermissionSelect); - } - }, //add_perms_form - - add_direction_form: function (synapse) { - //directionality checkboxes - $('#editSynLowerBar').append('
    '); - $('#editSynLowerBar').append('
    '); - - var edge = synapse.get('edge'); - - //determine which node is to the left and the right - //if directly in a line, top is left - if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x || - edge.nodeFrom.pos.x == edge.nodeTo.pos.x && - edge.nodeFrom.pos.y < edge.nodeTo.pos.y) { - var left = edge.nodeTo.getData("topic"); - var right = edge.nodeFrom.getData("topic"); - } else { - var left = edge.nodeFrom.getData("topic"); - var right = edge.nodeTo.getData("topic"); - } - - /* - * One node is actually on the left onscreen. Call it left, & the other right. - * If category is from-to, and that node is first, check the 'right' checkbox. - * Else check the 'left' checkbox since the arrow is incoming. - */ - - var directionCat = synapse.get('category'); //both, none, from-to - if (directionCat == 'from-to') { - var from_to = [synapse.get("node1_id"), synapse.get("node2_id")]; - if (from_to[0] == left.id) { - //check left checkbox - $('#edit_synapse_left').addClass('checked'); - } else { - //check right checkbox - $('#edit_synapse_right').addClass('checked'); - } - } else if (directionCat == 'both') { - //check both checkboxes - $('#edit_synapse_left').addClass('checked'); - $('#edit_synapse_right').addClass('checked'); - } - - if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { - $('#edit_synapse_left, #edit_synapse_right').click(function () { - - $(this).toggleClass('checked'); - - var leftChecked = $('#edit_synapse_left').is('.checked'); - var rightChecked = $('#edit_synapse_right').is('.checked'); - - var dir = synapse.getDirection(); - var dirCat = 'none'; - if (leftChecked && rightChecked) { - dirCat = 'both'; - } else if (!leftChecked && rightChecked) { - dirCat = 'from-to'; - dir = [right.id, left.id]; - } else if (leftChecked && !rightChecked) { - dirCat = 'from-to'; - dir = [left.id, right.id]; - } - - synapse.save({ - category: dirCat, - node1_id: dir[0], - node2_id: dir[1] - }); - Metamaps.Visualize.mGraph.plot(); - }); - } // if - } //add_direction_form -}; // end Metamaps.SynapseCard - - -////////////////////// END TOPIC AND SYNAPSE CARDS ////////////////////////////////// - - - - -/* - * - * VISUALIZE - * - */ -Metamaps.Visualize = { - mGraph: null, // a reference to the graph object. - cameraPosition: null, // stores the camera position when using a 3D visualization - type: "ForceDirected", // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D" - loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created - init: function () { - var self = Metamaps.Visualize; - // disable awkward dragging of the canvas element that would sometimes happen - $('#infovis-canvas').on('dragstart', function (event) { - event.preventDefault(); - }); - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchstart', function (event) { - event.preventDefault(); - self.mGraph.events.touched = true; - }); - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchmove', function (event) { - //Metamaps.JIT.touchPanZoomHandler(event); - }); - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchend touchcancel', function (event) { - lastDist = 0; - if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard(); - self.mGraph.events.touched = self.mGraph.events.touchMoved = false; - Metamaps.Touch.touchDragNode = false; - }); - }, - computePositions: function () { - var self = Metamaps.Visualize, - mapping; - - if (self.type == "RGraph") { - var i, l, startPos, endPos, topic, synapse; - - self.mGraph.graph.eachNode(function (n) { - topic = Metamaps.Topics.get(n.id); - topic.set({ node: n }, { silent: true }); - topic.updateNode(); - - n.eachAdjacency(function (edge) { - if(!edge.getData('init')) { - edge.setData('init', true); - - l = edge.getData('synapseIDs').length; - for (i = 0; i < l; i++) { - synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]); - synapse.set({ edge: edge }, { silent: true }); - synapse.updateEdge(); - } - } - }); - - var pos = n.getPos(); - pos.setc(-200, -200); - }); - self.mGraph.compute('end'); - } else if (self.type == "ForceDirected") { - var i, l, startPos, endPos, topic, synapse; - - self.mGraph.graph.eachNode(function (n) { - topic = Metamaps.Topics.get(n.id); - topic.set({ node: n }, { silent: true }); - topic.updateNode(); - mapping = topic.getMapping(); - - n.eachAdjacency(function (edge) { - if(!edge.getData('init')) { - edge.setData('init', true); - - l = edge.getData('synapseIDs').length; - for (i = 0; i < l; i++) { - synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]); - synapse.set({ edge: edge }, { silent: true }); - synapse.updateEdge(); - } - } - }); - - startPos = new $jit.Complex(0, 0); - endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')); - n.setPos(startPos, 'start'); - n.setPos(endPos, 'end'); - }); - } else if (self.type == "ForceDirected3D") { - self.mGraph.compute(); - } - }, - /** - * render does the heavy lifting of creating the engine that renders the graph with the properties we desire - * - */ - render: function () { - var self = Metamaps.Visualize, RGraphSettings, FDSettings; - - if (self.type == "RGraph" && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) { - - RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings); - - $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings); - $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings); - - RGraphSettings.width = $(document).width(); - RGraphSettings.height = $(document).height(); - RGraphSettings.background = Metamaps.JIT.RGraph.background; - RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance; - - self.mGraph = new $jit.RGraph(RGraphSettings); - - } else if (self.type == "ForceDirected" && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) { - - FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings); - - $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings); - $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings); - - FDSettings.width = $(document).width(); - FDSettings.height = $(document).height(); - - self.mGraph = new $jit.ForceDirected(FDSettings); - - } else if (self.type == "ForceDirected3D" && !self.mGraph) { - // init ForceDirected3D - self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings); - self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position; - } - else { - self.mGraph.graph.empty(); - } - - Metamaps.Loading.hide(); - // load JSON data, if it's not empty - if (!self.loadLater) { - //load JSON data. - var rootIndex = 0; - if (Metamaps.Active.Topic) { - var node = _.find(Metamaps.JIT.vizData, function(node){ - return node.id === Metamaps.Active.Topic.id; - }); - rootIndex = _.indexOf(Metamaps.JIT.vizData, node); - } - self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex); - //compute positions and plot. - self.computePositions(); - self.mGraph.busy = true; - if (self.type == "RGraph") { - self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate); - } else if (self.type == "ForceDirected") { - self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - } else if (self.type == "ForceDirected3D") { - self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout); - } - } - - // update the url now that the map is ready - setTimeout(function(){ - var m = Metamaps.Active.Map; - var t = Metamaps.Active.Topic; - - if (m && window.location.pathname !== "/maps/" + m.id) { - Metamaps.Router.navigate("/maps/" + m.id); - } - else if (t && window.location.pathname !== "/topics/" + t.id) { - Metamaps.Router.navigate("/topics/" + t.id); - } - }, 800); - - } -}; // end Metamaps.Visualize - - -/* - * - * UTIL - * - */ -Metamaps.Util = { - // helper function to determine how many lines are needed - // Line Splitter Function - // copyright Stephen Chapman, 19th April 2006 - // you may copy this code but please keep the copyright notice as well - splitLine: function (st, n) { - var b = ''; - var s = st ? st : ''; - while (s.length > n) { - var c = s.substring(0, n); - var d = c.lastIndexOf(' '); - var e = c.lastIndexOf('\n'); - if (e != -1) d = e; - if (d == -1) d = n; - b += c.substring(0, d) + '\n'; - s = s.substring(d + 1); - } - return b + s; - }, - nowDateFormatted: function () { - var date = new Date(Date.now()); - var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); - var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); - var year = date.getFullYear(); - - return month + '/' + day + '/' + year; - }, - decodeEntities: function (desc) { - var str, temp = document.createElement('p'); - temp.innerHTML = desc; //browser handles the topics - str = temp.textContent || temp.innerText; - temp = null; //delete the element; - return str; - }, //decodeEntities - getDistance: function (p1, p2) { - return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2)); - }, - coordsToPixels: function (coords) { - if (Metamaps.Visualize.mGraph) { - var canvas = Metamaps.Visualize.mGraph.canvas, - s = canvas.getSize(), - p = canvas.getPos(), - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY; - var pixels = { - x: (coords.x / (1/sx)) + p.x + s.width/2 + ox, - y: (coords.y / (1/sy)) + p.y + s.height/2 + oy - }; - return pixels; - } - else { - return { - x: 0, - y: 0 - }; - } - }, - pixelsToCoords: function (pixels) { - var coords; - if (Metamaps.Visualize.mGraph) { - var canvas = Metamaps.Visualize.mGraph.canvas, - s = canvas.getSize(), - p = canvas.getPos(), - ox = canvas.translateOffsetX, - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY; - coords = { - x: (pixels.x - p.x - s.width/2 - ox) * (1/sx), - y: (pixels.y - p.y - s.height/2 - oy) * (1/sy), - }; - } - else { - coords = { - x: 0, - y: 0 - }; - } - return coords; - }, - getPastelColor: function () { - var r = (Math.round(Math.random()* 127) + 127).toString(16); - var g = (Math.round(Math.random()* 127) + 127).toString(16); - var b = (Math.round(Math.random()* 127) + 127).toString(16); - return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4); - }, - // darkens a hex value by 'lum' percentage - colorLuminance: function (hex, lum) { - - // validate hex string - hex = String(hex).replace(/[^0-9a-f]/gi, ''); - if (hex.length < 6) { - hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; - } - lum = lum || 0; - - // convert to decimal and change luminosity - var rgb = "#", c, i; - for (i = 0; i < 3; i++) { - c = parseInt(hex.substr(i*2,2), 16); - c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); - rgb += ("00"+c).substr(c.length); - } - - return rgb; - }, - generateOptionsList: function (data) { - var newlist = ""; - for (var i = 0; i < data.length; i++) { - newlist = newlist + ''; - } - return newlist; - }, - checkURLisImage: function (url) { - // when the page reloads the following regular expression will be screwed up - // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/ - return (url.match(/\.(jpeg|jpg|gif|png)$/) != null); - }, - checkURLisYoutubeVideo: function (url) { - return (url.match(/^http:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null); - } -}; // end Metamaps.Util - -/* - * - * REALTIME - * - */ -Metamaps.Realtime = { - stringForLocalhost: 'http://localhost:5001', - stringForMetamaps: 'http://metamaps.cc:5001', - stringForHeroku: 'http://gentle-savannah-1303.herokuapp.com', - socket: null, - isOpen: false, - changing: false, - mappersOnMap: {}, - status: true, // stores whether realtime is True/On or False/Off - init: function () { - var self = Metamaps.Realtime; - - var reenableRealtime = function () { - self.reenableRealtime(); - }; - var turnOff = function () { - self.turnOff(); - }; - $(".rtOn").click(reenableRealtime); - $(".rtOff").click(turnOff); - - $('.sidebarCollaborateIcon').click(self.toggleBox); - $('.sidebarCollaborateBox').click(function(event){ - event.stopPropagation(); - }); - $('body').click(self.close); - - var railsEnv = $('body').data('env'); - var whichToConnect = railsEnv === 'development' ? self.stringForLocalhost : self.stringForHeroku; - self.socket = io.connect(whichToConnect); - self.socket.on('connect', function () { - self.startActiveMap(); - }); - }, - toggleBox: function (event) { - var self = Metamaps.Realtime; - - if (self.isOpen) self.close(); - else self.open(); - - event.stopPropagation(); - }, - open: function () { - var self = Metamaps.Realtime; - - Metamaps.GlobalUI.Account.close(); - Metamaps.Filter.close(); - $('.sidebarCollaborateIcon div').addClass('hide'); - - if (!self.isOpen && !self.changing) { - self.changing = true; - $('.sidebarCollaborateBox').fadeIn(200, function () { - self.changing = false; - self.isOpen = true; - }); - } - }, - close: function () { - var self = Metamaps.Realtime; - $(".sidebarCollaborateIcon div").removeClass('hide'); - if (!self.changing) { - self.changing = true; - $('.sidebarCollaborateBox').fadeOut(200, function () { - self.changing = false; - self.isOpen = false; - }); - } - }, - startActiveMap: function () { - var self = Metamaps.Realtime; - - if (Metamaps.Active.Map && Metamaps.Active.Mapper) { - var commonsMap = Metamaps.Active.Map.get('permission') === 'commons'; - var publicMap = Metamaps.Active.Map.get('permission') === 'public'; - - if (commonsMap) { - self.turnOn(); - self.setupSocket(); - } - else if (publicMap) { - self.attachMapListener(); - } - } - }, - endActiveMap: function () { - var self = Metamaps.Realtime; - - $(document).off('mousemove'); - self.socket.removeAllListeners(); - self.socket.emit('endMapperNotify'); - $(".collabCompass").remove(); - self.status = false; - }, - reenableRealtime: function() { - var confirmString = "The layout of your map has fallen out of sync with the saved copy. "; - confirmString += "To save your changes without overwriting the map, hit 'Cancel' and "; - confirmString += "then use 'Save to new map'. "; - confirmString += "Do you want to discard your changes and enable realtime?"; - var c = confirm(confirmString); - if (c) { - Metamaps.Router.maps(Metamaps.Active.Map.id); - } - }, - turnOn: function (notify) { - var self = Metamaps.Realtime; - - if (notify) self.sendRealtimeOn(); - $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); - $('.rtOn').addClass('active'); - $('.rtOff').removeClass('active'); - self.status = true; - $(".sidebarCollaborateIcon").addClass("blue"); - $(".collabCompass").show(); - }, - turnOff: function (silent) { - var self = Metamaps.Realtime; - - if (self.status) { - if (!silent) self.sendRealtimeOff(); - $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); - $('.rtOn').removeClass('active'); - $('.rtOff').addClass('active'); - self.status = false; - $(".sidebarCollaborateIcon").removeClass("blue"); - $(".collabCompass").hide(); - } - }, - setupSocket: function () { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - var myId = Metamaps.Active.Mapper.id; - - socket.emit('newMapperNotify', { - userid: myId, - username: Metamaps.Active.Mapper.get("name"), - userimage: Metamaps.Active.Mapper.get("image"), - mapid: Metamaps.Active.Map.id - }); - - // if you're the 'new guy' update your list with who's already online - socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList); - - // receive word that there's a new mapper on the map - socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap); - - // receive word that a mapper left the map - socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', self.lostPeerOnMap); - - // receive word that there's a mapper turned on realtime - socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', self.newCollaborator); - - // receive word that there's a mapper turned on realtime - socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator); - - // - socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag); - - // - socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic); - - // - socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic); - - // - socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse); - - // - socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse); - - // update mapper compass position - socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords); - - // deletions - socket.on('deleteTopicFromServer', self.removeTopic); - socket.on('deleteSynapseFromServer', self.removeSynapse); - - socket.on('topicChangeFromServer', self.topicChange); - socket.on('synapseChangeFromServer', self.synapseChange); - self.attachMapListener(); - - // local event listeners that trigger events - var sendCoords = function (event) { - var pixels = { - x: event.pageX, - y: event.pageY - }; - var coords = Metamaps.Util.pixelsToCoords(pixels); - self.sendCoords(coords); - }; - $(document).mousemove(sendCoords); - - var zoom = function (event, e) { - if (e) { - var pixels = { - x: e.pageX, - y: e.pageY - }; - var coords = Metamaps.Util.pixelsToCoords(pixels); - self.sendCoords(coords); - } - self.positionPeerIcons(); - }; - $(document).on(Metamaps.JIT.events.zoom, zoom); - - $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons); - - var sendTopicDrag = function (event, positions) { - self.sendTopicDrag(positions); - }; - $(document).on(Metamaps.JIT.events.topicDrag, sendTopicDrag); - - var sendNewTopic = function (event, data) { - self.sendNewTopic(data); - }; - $(document).on(Metamaps.JIT.events.newTopic, sendNewTopic); - - var sendDeleteTopic = function (event, data) { - self.sendDeleteTopic(data); - }; - $(document).on(Metamaps.JIT.events.deleteTopic, sendDeleteTopic); - - var sendRemoveTopic = function (event, data) { - self.sendRemoveTopic(data); - }; - $(document).on(Metamaps.JIT.events.removeTopic, sendRemoveTopic); - - var sendNewSynapse = function (event, data) { - self.sendNewSynapse(data); - }; - $(document).on(Metamaps.JIT.events.newSynapse, sendNewSynapse); - - var sendDeleteSynapse = function (event, data) { - self.sendDeleteSynapse(data); - }; - $(document).on(Metamaps.JIT.events.deleteSynapse, sendDeleteSynapse); - - var sendRemoveSynapse = function (event, data) { - self.sendRemoveSynapse(data); - }; - $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse); - - }, - attachMapListener: function(){ - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - socket.on('mapChangeFromServer', self.mapChange); - }, - sendRealtimeOn: function () { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // send this new mapper back your details, and the awareness that you're online - var update = { - username: Metamaps.Active.Mapper.get("name"), - userid: Metamaps.Active.Mapper.id, - mapid: Metamaps.Active.Map.id - }; - socket.emit('notifyStartRealtime', update); - }, - sendRealtimeOff: function () { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // send this new mapper back your details, and the awareness that you're online - var update = { - username: Metamaps.Active.Mapper.get("name"), - userid: Metamaps.Active.Mapper.id, - mapid: Metamaps.Active.Map.id - }; - socket.emit('notifyStopRealtime', update); - }, - updateMapperList: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // data.userid - // data.username - // data.userimage - // data.userrealtime - - self.mappersOnMap[data.userid] = { - name: data.username, - image: data.userimage, - color: Metamaps.Util.getPastelColor(), - realtime: data.userrealtime, - coords: { - x: 0, - y: 0 - }, - }; - - var onOff = data.userrealtime ? "On" : "Off"; - var mapperListItem = '
  • '; - mapperListItem += ''; - mapperListItem += data.username; - mapperListItem += '
    '; - mapperListItem += '
    • '; - - if (data.userid !== Metamaps.Active.Mapper.id) { - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - - // create a div for the collaborators compass - self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status); - } - }, - newPeerOnMap: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // data.userid - // data.username - // data.userimage - // data.coords - - self.mappersOnMap[data.userid] = { - name: data.username, - image: data.userimage, - color: Metamaps.Util.getPastelColor(), - realtime: true, - coords: { - x: 0, - y: 0 - }, - }; - - // create an item for them in the realtime box - if (data.userid !== Metamaps.Active.Mapper.id && self.status) { - var mapperListItem = '
  • '; - mapperListItem += ''; - mapperListItem += data.username; - mapperListItem += '
    '; - mapperListItem += '
    • '; - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - - // create a div for the collaborators compass - self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status); - - Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map'); - - // send this new mapper back your details, and the awareness that you've loaded the map - var update = { - userToNotify: data.userid, - username: Metamaps.Active.Mapper.get("name"), - userimage: Metamaps.Active.Mapper.get("image"), - userid: Metamaps.Active.Mapper.id, - userrealtime: self.status, - mapid: Metamaps.Active.Map.id - }; - socket.emit('updateNewMapperList', update); - } - }, - createCompass: function(name, id, image, color, hide) { - var str = '

    '+name+'

    '; - str += '
    '; - $('#compass' + id).remove(); - $('
    ', { - id: 'compass' + id, - class: 'collabCompass' - }).html(str).appendTo('#wrapper'); - if (hide) { - $('#compass' + id).hide(); - } - $('#compass' + id + ' img').css({ - 'border': '2px solid ' + color - }); - $('#compass' + id + ' p').css({ - 'background-color': color - }); - }, - lostPeerOnMap: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // data.userid - // data.username - - delete self.mappersOnMap[data.userid]; - - $('#mapper' + data.userid).remove(); - $('#compass' + data.userid).remove(); - - Metamaps.GlobalUI.notifyUser(data.username + ' just left the map'); - }, - newCollaborator: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // data.userid - // data.username - - self.mappersOnMap[data.userid].realtime = true; - - $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn'); - $('#compass' + data.userid).show(); - - Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime'); - }, - lostCollaborator: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - // data.userid - // data.username - - self.mappersOnMap[data.userid].realtime = false; - - $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff'); - $('#compass' + data.userid).hide(); - - Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime'); - }, - updatePeerCoords: function (data) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - self.mappersOnMap[data.userid].coords={x: data.usercoords.x,y:data.usercoords.y}; - self.positionPeerIcon(data.userid); - }, - positionPeerIcons: function () { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - if (self.status) { // if i have realtime turned on - for (var key in self.mappersOnMap) { - var mapper = self.mappersOnMap[key]; - if (mapper.realtime) { - self.positionPeerIcon(key); - } - } - } - }, - positionPeerIcon: function (id) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - var mapper = self.mappersOnMap[id]; - var xMax=$(document).width(); - var yMax=$(document).height(); - var compassDiameter=56; - var compassArrowSize=24; - - var origPixels = Metamaps.Util.coordsToPixels(mapper.coords); - var pixels = self.limitPixelsToScreen(origPixels); - $('#compass' + id).css({ - left: pixels.x + 'px', - top: pixels.y + 'px' - }); - /* showing the arrow if the collaborator is off of the viewport screen */ - if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) { - - var dy = origPixels.y - pixels.y; //opposite - var dx = origPixels.x - pixels.x; // adjacent - var ratio = dy / dx; - var angle = Math.atan2(dy, dx); - - $('#compassArrow' + id).show().css({ - transform: 'rotate(' + angle + 'rad)', - "-webkit-transform": 'rotate(' + angle + 'rad)', - }); - - if (dx > 0) { - $('#compass' + id).addClass('labelLeft'); - } - } else { - $('#compassArrow' + id).hide(); - $('#compass' + id).removeClass('labelLeft'); - } - }, - limitPixelsToScreen: function (pixels) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - var xLimit, yLimit; - var xMax=$(document).width(); - var yMax=$(document).height(); - var compassDiameter=56; - var compassArrowSize=24; - - xLimit = Math.max(0 + compassArrowSize, pixels.x); - xLimit = Math.min(xLimit, xMax - compassDiameter); - yLimit = Math.max(0 + compassArrowSize, pixels.y); - yLimit = Math.min(yLimit, yMax - compassDiameter); - - return {x:xLimit,y:yLimit}; - }, - sendCoords: function (coords) { - var self = Metamaps.Realtime; - var socket = Metamaps.Realtime.socket; - - var map = Metamaps.Active.Map; - var mapper = Metamaps.Active.Mapper; - - if (self.status && map.authorizeToEdit(mapper) && socket) { - var update = { - usercoords: coords, - userid: Metamaps.Active.Mapper.id, - mapid: Metamaps.Active.Map.id - }; - socket.emit('updateMapperCoords', update); - } - }, - sendTopicDrag: function (positions) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map && self.status) { - positions.mapid = Metamaps.Active.Map.id; - socket.emit('topicDrag', positions); - } - }, - topicDrag: function (positions) { - var self = Metamaps.Realtime; - var socket = self.socket; - - var topic; - var node; - - if (Metamaps.Active.Map && self.status) { - for (var key in positions) { - topic = Metamaps.Topics.get(key); - if (topic) node = topic.get('node'); - if (node) node.pos.setc(positions[key].x, positions[key].y); - } //for - Metamaps.Visualize.mGraph.plot(); - } - }, - sendTopicChange: function (topic) { - var self = Metamaps.Realtime; - var socket = self.socket; - - var data = { - topicId: topic.id - } - - socket.emit('topicChangeFromClient', data); - }, - topicChange: function (data) { - var topic = Metamaps.Topics.get(data.topicId); - if (topic) { - var node = topic.get('node'); - topic.fetch({ - success: function (model) { - model.set({ node: node }); - model.trigger('changeByOther'); - } - }); - } - }, - sendSynapseChange: function (synapse) { - var self = Metamaps.Realtime; - var socket = self.socket; - - var data = { - synapseId: synapse.id - } - - socket.emit('synapseChangeFromClient', data); - }, - synapseChange: function (data) { - var synapse = Metamaps.Synapses.get(data.synapseId); - if (synapse) { - // edge reset necessary because fetch causes model reset - var edge = synapse.get('edge'); - synapse.fetch({ - success: function (model) { - model.set({ edge: edge }); - model.trigger('changeByOther'); - } - }); - } - }, - sendMapChange: function (map) { - var self = Metamaps.Realtime; - var socket = self.socket; - - var data = { - mapId: map.id - } - - socket.emit('mapChangeFromClient', data); - }, - mapChange: function (data) { - var map = Metamaps.Active.Map; - var isActiveMap = map && data.mapId === map.id; - if (isActiveMap) { - var permBefore = map.get('permission'); - var idBefore = map.id; - map.fetch({ - success: function (model, response) { - - var idNow = model.id; - var permNow = model.get('permission'); - if (idNow !== idBefore) { - Metamaps.Map.leavePrivateMap(); // this means the map has been changed to private - } - else if (permNow === 'public' && permBefore === 'commons') { - Metamaps.Map.commonsToPublic(); - } - else if (permNow === 'commons' && permBefore === 'public') { - Metamaps.Map.publicToCommons(); - } - else { - model.fetchContained(); - model.trigger('changeByOther'); - } - } - }); - } - }, - // newTopic - sendNewTopic: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map && self.status) { - data.mapperid = Metamaps.Active.Mapper.id; - data.mapid = Metamaps.Active.Map.id; - socket.emit('newTopic', data); - } - }, - newTopic: function (data) { - var topic, mapping, mapper, mapperCallback, cancel; - - var self = Metamaps.Realtime; - var socket = self.socket; - - if (!self.status) return; - - function test() { - if (topic && mapping && mapper) { - Metamaps.Topic.renderTopic(mapping, topic, false, false); - } - else if (!cancel) { - setTimeout(test, 10); - } - } - - mapper = Metamaps.Mappers.get(data.mapperid); - if (mapper === undefined) { - mapperCallback = function (m) { - Metamaps.Mappers.add(m); - mapper = m; - }; - Metamaps.Mapper.get(data.mapperid, mapperCallback); - } - $.ajax({ - url: "/topics/" + data.topicid + ".json", - success: function (response) { - Metamaps.Topics.add(response); - topic = Metamaps.Topics.get(response.id); - }, - error: function () { - cancel = true; - } - }); - $.ajax({ - url: "/mappings/" + data.mappingid + ".json", - success: function (response) { - Metamaps.Mappings.add(response); - mapping = Metamaps.Mappings.get(response.id); - }, - error: function () { - cancel = true; - } - }); - - test(); - }, - // removeTopic - sendDeleteTopic: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map) { - socket.emit('deleteTopicFromClient', data); - } - }, - // removeTopic - sendRemoveTopic: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map) { - data.mapid = Metamaps.Active.Map.id; - socket.emit('removeTopic', data); - } - }, - removeTopic: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (!self.status) return; - - var topic = Metamaps.Topics.get(data.topicid); - if (topic) { - var node = topic.get('node'); - var mapping = topic.getMapping(); - Metamaps.Control.hideNode(node.id); - Metamaps.Topics.remove(topic); - Metamaps.Mappings.remove(mapping); - } - }, - // newSynapse - sendNewSynapse: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map) { - data.mapperid = Metamaps.Active.Mapper.id; - data.mapid = Metamaps.Active.Map.id; - socket.emit('newSynapse', data); - } - }, - newSynapse: function (data) { - var topic1, topic2, node1, node2, synapse, mapping, cancel; - - var self = Metamaps.Realtime; - var socket = self.socket; - - if (!self.status) return; - - function test() { - if (synapse && mapping && mapper) { - topic1 = synapse.getTopic1(); - node1 = topic1.get('node'); - topic2 = synapse.getTopic2(); - node2 = topic2.get('node'); - - Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false); - } - else if (!cancel) { - setTimeout(test, 10); - } - } - - mapper = Metamaps.Mappers.get(data.mapperid); - if (mapper === undefined) { - mapperCallback = function (m) { - Metamaps.Mappers.add(m); - mapper = m; - }; - Metamaps.Mapper.get(data.mapperid, mapperCallback); - } - $.ajax({ - url: "/synapses/" + data.synapseid + ".json", - success: function (response) { - Metamaps.Synapses.add(response); - synapse = Metamaps.Synapses.get(response.id); - }, - error: function () { - cancel = true; - } - }); - $.ajax({ - url: "/mappings/" + data.mappingid + ".json", - success: function (response) { - Metamaps.Mappings.add(response); - mapping = Metamaps.Mappings.get(response.id); - }, - error: function () { - cancel = true; - } - }); - test(); - }, - // deleteSynapse - sendDeleteSynapse: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map) { - data.mapid = Metamaps.Active.Map.id; - socket.emit('deleteSynapseFromClient', data); - } - }, - // removeSynapse - sendRemoveSynapse: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (Metamaps.Active.Map) { - data.mapid = Metamaps.Active.Map.id; - socket.emit('removeSynapse', data); - } - }, - removeSynapse: function (data) { - var self = Metamaps.Realtime; - var socket = self.socket; - - if (!self.status) return; - - var synapse = Metamaps.Synapses.get(data.synapseid); - if (synapse) { - var edge = synapse.get('edge'); - var mapping = synapse.getMapping(); - if (edge.getData("mappings").length - 1 === 0) { - Metamaps.Control.hideEdge(edge); - } - - var index = _.indexOf(edge.getData("synapses"), synapse); - edge.getData("mappings").splice(index, 1); - edge.getData("synapses").splice(index, 1); - if (edge.getData("displayIndex")) { - delete edge.data.$displayIndex; - } - Metamaps.Synapses.remove(synapse); - Metamaps.Mappings.remove(mapping); - } - }, -}; // end Metamaps.Realtime - - -/* - * - * CONTROL - * - */ -Metamaps.Control = { - init: function () { - - }, - selectNode: function (node,e) { - var filtered = node.getData('alpha') === 0; - - if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return; - node.selected = true; - node.setData('dim', 30, 'current'); - Metamaps.Selected.Nodes.push(node); - }, - deselectAllNodes: function () { - var l = Metamaps.Selected.Nodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = Metamaps.Selected.Nodes[i]; - Metamaps.Control.deselectNode(node); - } - Metamaps.Visualize.mGraph.plot(); - }, - deselectNode: function (node) { - delete node.selected; - node.setData('dim', 25, 'current'); - - //remove the node - Metamaps.Selected.Nodes.splice( - Metamaps.Selected.Nodes.indexOf(node), 1); - }, - deleteSelected: function () { - - if (!Metamaps.Active.Map) return; - - var n = Metamaps.Selected.Nodes.length; - var e = Metamaps.Selected.Edges.length; - var ntext = n == 1 ? "1 topic" : n + " topics"; - var etext = e == 1 ? "1 synapse" : e + " synapses"; - var text = "You have " + ntext + " and " + etext + " selected. "; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); - if (r == true) { - Metamaps.Control.deleteSelectedEdges(); - Metamaps.Control.deleteSelectedNodes(); - } - }, - deleteSelectedNodes: function () { // refers to deleting topics permanently - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - var l = Metamaps.Selected.Nodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = Metamaps.Selected.Nodes[i]; - Metamaps.Control.deleteNode(node.id); - } - }, - deleteNode: function (nodeid) { // refers to deleting topics permanently - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - var topic = node.getData('topic'); - var topicid = topic.id; - var mapping = node.getData('mapping'); - topic.destroy(); - Metamaps.Mappings.remove(mapping); - $(document).trigger(Metamaps.JIT.events.deleteTopic, [{ - topicid: topicid - }]); - Metamaps.Control.hideNode(nodeid); - }, - removeSelectedNodes: function () { // refers to removing topics permanently from a map - - if (!Metamaps.Active.Map) return; - - var l = Metamaps.Selected.Nodes.length, - i, - node, - authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - for (i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Nodes[i]; - Metamaps.Control.removeNode(node.id); - } - }, - removeNode: function (nodeid) { // refers to removing topics permanently from a map - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - var topic = node.getData('topic'); - var topicid = topic.id; - var mapping = node.getData('mapping'); - mapping.destroy(); - Metamaps.Topics.remove(topic); - $(document).trigger(Metamaps.JIT.events.removeTopic, [{ - topicid: topicid - }]); - Metamaps.Control.hideNode(nodeid); - }, - hideSelectedNodes: function () { - var l = Metamaps.Selected.Nodes.length, - i, - node; - - for (i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Nodes[i]; - Metamaps.Control.hideNode(node.id); - } - }, - hideNode: function (nodeid) { - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - var graph = Metamaps.Visualize.mGraph; - if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph" - var newroot = _.find(graph.graph.nodes, function(n){ return n.id !== nodeid; }); - graph.root = newroot ? newroot.id : null; - } - - Metamaps.Control.deselectNode(node); - - node.setData('alpha', 0, 'end'); - node.eachAdjacency(function (adj) { - adj.setData('alpha', 0, 'end'); - }); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['node-property:alpha', - 'edge-property:alpha' - ], - duration: 500 - }); - setTimeout(function () { - Metamaps.Visualize.mGraph.graph.removeNode(nodeid); - }, 500); - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkMappers(); - }, - selectEdge: function (edge) { - var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered - - if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return; - - var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2; - edge.setDataset('current', { - showDesc: true, - lineWidth: width, - color: Metamaps.Settings.colors.synapses.selected - }); - Metamaps.Visualize.mGraph.plot(); - - Metamaps.Selected.Edges.push(edge); - }, - deselectAllEdges: function () { - var l = Metamaps.Selected.Edges.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = Metamaps.Selected.Edges[i]; - Metamaps.Control.deselectEdge(edge); - } - Metamaps.Visualize.mGraph.plot(); - }, - deselectEdge: function (edge) { - edge.setData('showDesc', false, 'current'); - - edge.setDataset('current', { - lineWidth: 2, - color: Metamaps.Settings.colors.synapses.normal - }); - - if (Metamaps.Mouse.edgeHoveringOver == edge) { - edge.setDataset('current', { - showDesc: true, - lineWidth: 4 - }); - } - - Metamaps.Visualize.mGraph.plot(); - - //remove the edge - Metamaps.Selected.Edges.splice( - Metamaps.Selected.Edges.indexOf(edge), 1); - }, - deleteSelectedEdges: function () { // refers to deleting topics permanently - var edge, - l = Metamaps.Selected.Edges.length; - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - for (var i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Edges[i]; - Metamaps.Control.deleteEdge(edge); - } - }, - deleteEdge: function (edge) { - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - if (edge.getData("synapses").length - 1 === 0) { - Metamaps.Control.hideEdge(edge); - } - - var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; - - var synapse = edge.getData("synapses")[index]; - var mapping = edge.getData("mappings")[index]; - var synapseid = synapse.id; - synapse.destroy(); - - // the server will destroy the mapping, we just need to remove it here - Metamaps.Mappings.remove(mapping); - edge.getData("mappings").splice(index, 1); - edge.getData("synapses").splice(index, 1); - if (edge.getData("displayIndex")) { - delete edge.data.$displayIndex; - } - $(document).trigger(Metamaps.JIT.events.deleteSynapse, [{ - synapseid: synapseid - }]); - }, - removeSelectedEdges: function () { - var l = Metamaps.Selected.Edges.length, - i, - edge; - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - for (i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Edges[i]; - Metamaps.Control.removeEdge(edge); - } - Metamaps.Selected.Edges = new Array(); - }, - removeEdge: function (edge) { - - if (!Metamaps.Active.Map) return; - - var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (!authorized) { - Metamaps.GlobalUI.notifyUser("Cannot edit Public map."); - return; - } - - if (edge.getData("mappings").length - 1 === 0) { - Metamaps.Control.hideEdge(edge); - } - - var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; - - var synapse = edge.getData("synapses")[index]; - var mapping = edge.getData("mappings")[index]; - var synapseid = synapse.id; - mapping.destroy(); - - Metamaps.Synapses.remove(synapse); - - edge.getData("mappings").splice(index, 1); - edge.getData("synapses").splice(index, 1); - if (edge.getData("displayIndex")) { - delete edge.data.$displayIndex; - } - $(document).trigger(Metamaps.JIT.events.removeSynapse, [{ - synapseid: synapseid - }]); - }, - hideSelectedEdges: function () { - var edge, - l = Metamaps.Selected.Edges.length, - i; - for (i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Edges[i]; - Metamaps.Control.hideEdge(edge); - } - Metamaps.Selected.Edges = new Array(); - }, - hideEdge: function (edge) { - var from = edge.nodeFrom.id; - var to = edge.nodeTo.id; - edge.setData('alpha', 0, 'end'); - Metamaps.Control.deselectEdge(edge); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:alpha'], - duration: 500 - }); - setTimeout(function () { - Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to); - }, 500); - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMappers(); - }, - updateSelectedPermissions: function (permission) { - - var edge, synapse, node, topic; - - Metamaps.GlobalUI.notifyUser('Working...'); - - // variables to keep track of how many nodes and synapses you had the ability to change the permission of - var nCount = 0, - sCount = 0; - - // change the permission of the selected synapses, if logged in user is the original creator - var l = Metamaps.Selected.Edges.length; - for (var i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Edges[i]; - synapse = edge.getData('synapses')[0]; - - if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { - synapse.save({ - permission: permission - }); - sCount++; - } - } - - // change the permission of the selected topics, if logged in user is the original creator - var l = Metamaps.Selected.Nodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Nodes[i]; - topic = node.getData('topic'); - - if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { - topic.save({ - permission: permission - }); - nCount++; - } - } - - var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and '); - var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses'); - - var message = nString + sString + ' you created updated to ' + permission; - Metamaps.GlobalUI.notifyUser(message); - }, - updateSelectedMetacodes: function (metacode_id) { - - var node, topic; - - Metamaps.GlobalUI.notifyUser('Working...'); - - var metacode = Metamaps.Metacodes.get(metacode_id); - - // variables to keep track of how many nodes and synapses you had the ability to change the permission of - var nCount = 0; - - // change the permission of the selected topics, if logged in user is the original creator - var l = Metamaps.Selected.Nodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Nodes[i]; - topic = node.getData('topic'); - - if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { - topic.save({ - 'metacode_id': metacode_id - }); - nCount++; - } - } - - var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics'); - - var message = nString + ' you can edit updated to ' + metacode.get('name'); - Metamaps.GlobalUI.notifyUser(message); - Metamaps.Visualize.mGraph.plot(); - }, -}; // end Metamaps.Control - - -/* - * - * FILTER - * - */ -Metamaps.Filter = { - filters: { - name: "", - metacodes: [], - mappers: [], - synapses: [] - }, - visible: { - metacodes: [], - mappers: [], - synapses: [] - }, - isOpen: false, - changing: false, - init: function () { - var self = Metamaps.Filter; - - $('.sidebarFilterIcon').click(self.toggleBox); - - $('.sidebarFilterBox .showAllMetacodes').click(self.filterNoMetacodes); - $('.sidebarFilterBox .showAllSynapses').click(self.filterNoSynapses); - $('.sidebarFilterBox .showAllMappers').click(self.filterNoMappers); - $('.sidebarFilterBox .hideAllMetacodes').click(self.filterAllMetacodes); - $('.sidebarFilterBox .hideAllSynapses').click(self.filterAllSynapses); - $('.sidebarFilterBox .hideAllMappers').click(self.filterAllMappers); - - self.bindLiClicks(); - self.getFilterData(); - }, - toggleBox: function (event) { - var self = Metamaps.Filter; - - if (self.isOpen) self.close(); - else self.open(); - - event.stopPropagation(); - }, - open: function () { - var self = Metamaps.Filter; - - Metamaps.GlobalUI.Account.close(); - Metamaps.Realtime.close(); - $('.sidebarFilterIcon div').addClass('hide'); - - - if (!self.isOpen && !self.changing) { - self.changing = true; - - var height = $(document).height() - 108; - $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () { - self.changing = false; - self.isOpen = true; - }); - } - }, - close: function () { - var self = Metamaps.Filter; - $('.sidebarFilterIcon div').removeClass('hide'); - - - if (!self.changing) { - self.changing = true; - - $('.sidebarFilterBox').fadeOut(200, function () { - self.changing = false; - self.isOpen = false; - }); - } - }, - reset: function () { - var self = Metamaps.Filter; - - self.filters.metacodes = []; - self.filters.mappers = []; - self.filters.synapses = []; - self.visible.metacodes = []; - self.visible.mappers = []; - self.visible.synapses = []; - - $('#filter_by_metacode ul').empty(); - $('#filter_by_mapper ul').empty(); - $('#filter_by_synapse ul').empty(); - - $('.filterBox .showAll').addClass('active'); - }, - /* - Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox - But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses - */ - getFilterData: function () { - var self = Metamaps.Filter; - - var metacode, mapper, synapse; - - $('#filter_by_metacode li').each(function() { - metacode = $( this ).attr('data-id'); - self.filters.metacodes.push(metacode); - self.visible.metacodes.push(metacode); - }); - - $('#filter_by_mapper li').each(function() { - mapper = ($( this ).attr('data-id')); - self.filters.mappers.push(mapper); - self.visible.mappers.push(mapper); - }); - - $('#filter_by_synapse li').each(function() { - synapse = ($( this ).attr('data-id')); - self.filters.synapses.push(synapse); - self.visible.synapses.push(synapse); - }); - }, - bindLiClicks: function () { - var self = Metamaps.Filter; - $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode); - $('#filter_by_mapper ul li').unbind().click(self.toggleMapper); - $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse); - }, - // an abstraction function for checkMetacodes, checkMappers, checkSynapses to reduce - // code redundancy - /* - @param - */ - updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) { - var self = Metamaps.Filter; - - var newList = []; - var removed = []; - var added = []; - - // the first option enables us to accept - // ['Topics', 'Synapses'] as 'collection' - if (typeof collection === "object") { - Metamaps[collection[0]].each(function(model) { - var prop = model.get(propertyToCheck) ? model.get(propertyToCheck).toString() : false; - if (prop && newList.indexOf(prop) === -1) { - newList.push(prop); - } - }); - Metamaps[collection[1]].each(function(model) { - var prop = model.get(propertyToCheck) ? model.get(propertyToCheck).toString() : false; - if (prop && newList.indexOf(prop) === -1) { - newList.push(prop); - } - }); - } - else if (typeof collection === "string") { - Metamaps[collection].each(function(model) { - var prop = model.get(propertyToCheck) ? model.get(propertyToCheck).toString() : false; - if (prop && newList.indexOf(prop) === -1) { - newList.push(prop); - } - }); - } - - removed = _.difference(self.filters[filtersToUse], newList); - added = _.difference(newList, self.filters[filtersToUse]); - - // remove the list items for things no longer present on the map - _.each(removed, function(identifier) { - $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast',function(){ - $(this).remove(); - }); - index = self.visible[filtersToUse].indexOf(identifier); - self.visible[filtersToUse].splice(index, 1); - }); - - var model, li, jQueryLi; - function sortAlpha(a,b){ - return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1; - } - // for each new filter to be added, create a list item for it and fade it in - _.each(added, function (identifier) { - model = Metamaps[correlatedModel].get(identifier) || - Metamaps[correlatedModel].find(function (model) { - return model.get(propertyToCheck) === identifier; - }); - li = model.prepareLiForFilter(); - jQueryLi = $(li).hide(); - $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn("fast")) - .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul'); - self.visible[filtersToUse].push(identifier); - }); - - // update the list of filters with the new list we just generated - self.filters[filtersToUse] = newList; - - // make sure clicks on list items still trigger the right events - self.bindLiClicks(); - }, - checkMetacodes: function () { - var self = Metamaps.Filter; - self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode'); - }, - checkMappers: function () { - var self = Metamaps.Filter; - var onMap = Metamaps.Active.Map ? true : false; - if (onMap) { - self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper'); - } - else { - // on topic view - self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper'); - } - }, - checkSynapses: function () { - var self = Metamaps.Filter; - self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse'); - }, - filterAllMetacodes: function (e) { - var self = Metamaps.Filter; - $('#filter_by_metacode ul li').addClass('toggledOff'); - $('.showAllMetacodes').removeClass('active'); - $('.hideAllMetacodes').addClass('active'); - self.visible.metacodes = []; - self.passFilters(); - }, - filterNoMetacodes: function (e) { - var self = Metamaps.Filter; - $('#filter_by_metacode ul li').removeClass('toggledOff'); - $('.showAllMetacodes').addClass('active'); - $('.hideAllMetacodes').removeClass('active'); - self.visible.metacodes = self.filters.metacodes.slice(); - self.passFilters(); - }, - filterAllMappers: function (e) { - var self = Metamaps.Filter; - $('#filter_by_mapper ul li').addClass('toggledOff'); - $('.showAllMappers').removeClass('active'); - $('.hideAllMappers').addClass('active'); - self.visible.mappers = []; - self.passFilters(); - }, - filterNoMappers: function (e) { - var self = Metamaps.Filter; - $('#filter_by_mapper ul li').removeClass('toggledOff'); - $('.showAllMappers').addClass('active'); - $('.hideAllMappers').removeClass('active'); - self.visible.mappers = self.filters.mappers.slice(); - self.passFilters(); - }, - filterAllSynapses: function (e) { - var self = Metamaps.Filter; - $('#filter_by_synapse ul li').addClass('toggledOff'); - $('.showAllSynapses').removeClass('active'); - $('.hideAllSynapses').addClass('active'); - self.visible.synapses = []; - self.passFilters(); - }, - filterNoSynapses: function (e) { - var self = Metamaps.Filter; - $('#filter_by_synapse ul li').removeClass('toggledOff'); - $('.showAllSynapses').addClass('active'); - $('.hideAllSynapses').removeClass('active'); - self.visible.synapses = self.filters.synapses.slice(); - self.passFilters(); - }, - // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse - // to reduce code redundancy - // gets called in the context of a list item in a filter box - toggleLi: function (whichToFilter) { - var self = Metamaps.Filter, index; - var id = $(this).attr("data-id"); - if (self.visible[whichToFilter].indexOf(id) == -1) { - self.visible[whichToFilter].push(id); - $(this).removeClass('toggledOff'); - } - else { - index = self.visible[whichToFilter].indexOf(id); - self.visible[whichToFilter].splice(index, 1); - $(this).addClass('toggledOff'); - } - self.passFilters(); - }, - toggleMetacode: function () { - var self = Metamaps.Filter; - self.toggleLi.call(this, 'metacodes'); - - if (self.visible.metacodes.length === self.filters.metacodes.length) { - $('.showAllMetacodes').addClass('active'); - $('.hideAllMetacodes').removeClass('active'); - } - else if (self.visible.metacodes.length === 0) { - $('.showAllMetacodes').removeClass('active'); - $('.hideAllMetacodes').addClass('active'); - } - else { - $('.showAllMetacodes').removeClass('active'); - $('.hideAllMetacodes').removeClass('active'); - } - }, - toggleMapper: function () { - var self = Metamaps.Filter; - self.toggleLi.call(this, 'mappers'); - - if (self.visible.mappers.length === self.filters.mappers.length) { - $('.showAllMappers').addClass('active'); - $('.hideAllMappers').removeClass('active'); - } - else if (self.visible.mappers.length === 0) { - $('.showAllMappers').removeClass('active'); - $('.hideAllMappers').addClass('active'); - } - else { - $('.showAllMappers').removeClass('active'); - $('.hideAllMappers').removeClass('active'); - } - }, - toggleSynapse: function () { - var self = Metamaps.Filter; - self.toggleLi.call(this, 'synapses'); - - if (self.visible.synapses.length === self.filters.synapses.length) { - $('.showAllSynapses').addClass('active'); - $('.hideAllSynapses').removeClass('active'); - } - else if (self.visible.synapses.length === 0) { - $('.showAllSynapses').removeClass('active'); - $('.hideAllSynapses').addClass('active'); - } - else { - $('.showAllSynapses').removeClass('active'); - $('.hideAllSynapses').removeClass('active'); - } - }, - passFilters: function () { - var self = Metamaps.Filter; - var visible = self.visible; - - var passesMetacode, passesMapper, passesSynapse; - var onMap; - - if (Metamaps.Active.Map) { - onMap = true; - } - else if (Metamaps.Active.Topic) { - onMap = false; - } - - var opacityForFilter = onMap ? 0 : 0.4; - - Metamaps.Topics.each(function(topic) { - var n = topic.get('node'); - var metacode_id = topic.get("metacode_id").toString(); - - if (visible.metacodes.indexOf(metacode_id) == -1) passesMetacode = false; - else passesMetacode = true; - - if (onMap) { - // when on a map, - // we filter by mapper according to the person who added the - // topic or synapse to the map - var user_id = topic.getMapping().get("user_id").toString(); - if (visible.mappers.indexOf(user_id) == -1) passesMapper = false; - else passesMapper = true; - } - else { - // when on a topic view, - // we filter by mapper according to the person who created the - // topic or synapse - var user_id = topic.get("user_id").toString(); - if (visible.mappers.indexOf(user_id) == -1) passesMapper = false; - else passesMapper = true; - } - - if (passesMetacode && passesMapper) { - if (n) { - n.setData('alpha', 1, 'end'); - } - else console.log(topic); - } - else { - if (n) { - Metamaps.Control.deselectNode(n, true); - n.setData('alpha', opacityForFilter, 'end'); - n.eachAdjacency(function(e){ - Metamaps.Control.deselectEdge(e, true); - }); - } - else console.log(topic); - } - }); - - // flag all the edges back to 'untouched' - Metamaps.Synapses.each(function(synapse) { - var e = synapse.get('edge'); - e.setData('touched', false); - }); - Metamaps.Synapses.each(function(synapse) { - var e = synapse.get('edge'); - var desc; - var user_id = synapse.get("user_id").toString(); - - if (e && !e.getData('touched')) { - - var synapses = e.getData('synapses'); - - // if any of the synapses represent by the edge are still unfiltered - // leave the edge visible - passesSynapse = false; - for (var i = 0; i < synapses.length; i++) { - desc = synapses[i].get("desc"); - if (visible.synapses.indexOf(desc) > -1) passesSynapse = true; - } - - // if the synapse description being displayed is now being - // filtered, set the displayIndex to the first unfiltered synapse if there is one - var displayIndex = e.getData("displayIndex") ? e.getData("displayIndex") : 0; - var displayedSynapse = synapses[displayIndex]; - desc = displayedSynapse.get("desc"); - if (passesSynapse && visible.synapses.indexOf(desc) == -1) { - // iterate and find an unfiltered one - for (var i = 0; i < synapses.length; i++) { - desc = synapses[i].get("desc"); - if (visible.synapses.indexOf(desc) > -1) { - e.setData('displayIndex', i); - break; - } - } - } - - if (onMap) { - // when on a map, - // we filter by mapper according to the person who added the - // topic or synapse to the map - user_id = synapse.getMapping().get("user_id").toString(); - } - if (visible.mappers.indexOf(user_id) == -1) passesMapper = false; - else passesMapper = true; - - var color = Metamaps.Settings.colors.synapses.normal; - if (passesSynapse && passesMapper) { - e.setData('alpha', 1, 'end'); - e.setData('color', color, 'end'); - } - else { - Metamaps.Control.deselectEdge(e, true); - e.setData('alpha', opacityForFilter, 'end'); - } - - e.setData('touched', true); - } - else if (!e) console.log(synapse); - }); - - // run the animation - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['node-property:alpha', - 'edge-property:alpha'], - duration: 200 - }); - } -}; // end Metamaps.Filter - - -/* - * - * LISTENERS - * - */ -Metamaps.Listeners = { - - init: function () { - - $(document).on('keydown', function (e) { - if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return; - - switch (e.which) { - case 13: // if enter key is pressed - Metamaps.JIT.enterKeyHandler(); - e.preventDefault(); - break; - case 27: // if esc key is pressed - Metamaps.JIT.escKeyHandler(); - break; - case 65: //if a or A is pressed - if (e.ctrlKey){ - Metamaps.Control.deselectAllNodes(); - Metamaps.Control.deselectAllEdges(); - - e.preventDefault(); - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - Metamaps.Control.selectNode(n,e); - }); - - Metamaps.Visualize.mGraph.plot(); - } - - break; - case 69: //if e or E is pressed - if (e.ctrlKey){ - e.preventDefault(); - if (Metamaps.Active.Map) { - Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas); - } - } - break; - case 77: //if m or M is pressed - if (e.ctrlKey){ - e.preventDefault(); - Metamaps.Control.removeSelectedNodes(); - Metamaps.Control.removeSelectedEdges(); - } - break; - case 68: //if d or D is pressed - if (e.ctrlKey){ - e.preventDefault(); - Metamaps.Control.deleteSelected(); - } - break; - case 72: //if h or H is pressed - if (e.ctrlKey){ - e.preventDefault(); - Metamaps.Control.hideSelectedNodes(); - Metamaps.Control.hideSelectedEdges(); - } - break; - default: - break; //alert(e.which); - } - }); - - $(window).resize(function () { - if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()); - if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition(); - }); - } -}; // end Metamaps.Listeners - - -/* - * - * ORGANIZE - * - */ -Metamaps.Organize = { - init: function () { - - }, - arrange: function (layout, centerNode) { - - - // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin - if (layout == 'grid') { - var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization - var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid - var GRIDSPACE = 400; - var row = 0; - var column = 0; - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - if (column == numColumns) { - column = 0; - row += 1; - } - var newPos = new $jit.Complex(); - newPos.x = column * GRIDSPACE; - newPos.y = row * GRIDSPACE; - n.setPos(newPos, 'end'); - column += 1; - }); - Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - } else if (layout == 'grid_full') { - - // this will always be an integer, the # of nodes on your graph visualization - var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); - //var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid - //var GRIDSPACE = 400; - var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height; - var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width; - var totalArea = height * width; - var cellArea = totalArea / numNodes; - var ratio = height / width; - var cellWidth = sqrt(cellArea / ratio); - var cellHeight = cellArea / cellWidth; - var row = floor(height / cellHeight); - var column = floor(width / cellWidth); - var totalCells = row * column; - - if (totalCells) - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - if (column == numColumns) { - column = 0; - row += 1; - } - var newPos = new $jit.Complex(); - newPos.x = column * GRIDSPACE; - newPos.y = row * GRIDSPACE; - n.setPos(newPos, 'end'); - column += 1; - }); - Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - } else if (layout == 'radial') { - - var centerX = centerNode.getPos().x; - var centerY = centerNode.getPos().y; - centerNode.setPos(centerNode.getPos(), 'end'); - - console.log(centerNode.adjacencies); - var lineLength = 200; - var usedNodes = {}; - usedNodes[centerNode.id] = centerNode; - var radial = function (node, level, degree) { - if (level == 1) { - var numLinksTemp = _.size(node.adjacencies); - var angleTemp = 2 * Math.PI / numLinksTemp; - } else { - angleTemp = 2 * Math.PI / 20 - }; - node.eachAdjacency(function (a) { - var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1); - if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) { - var newPos = new $jit.Complex(); - newPos.x = level * lineLength * Math.sin(degree) + centerX; - newPos.y = level * lineLength * Math.cos(degree) + centerY; - a.nodeTo.setPos(newPos, 'end'); - usedNodes[a.nodeTo.id] = a.nodeTo; - - radial(a.nodeTo, level + 1, degree); - degree += angleTemp; - }; - }); - }; - radial(centerNode, 1, 0); - Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - - } else if (layout == 'center_viewport') { - - var lowX = 0, - lowY = 0, - highX = 0, - highY = 0; - var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX; - var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY; - - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - if (n.id === 1) { - lowX = n.getPos().x; - lowY = n.getPos().y; - highX = n.getPos().x; - highY = n.getPos().y; - }; - if (n.getPos().x < lowX) lowX = n.getPos().x; - if (n.getPos().y < lowY) lowY = n.getPos().y; - if (n.getPos().x > highX) highX = n.getPos().x; - if (n.getPos().y > highY) highY = n.getPos().y; - }); - console.log(lowX, lowY, highX, highY); - var newOriginX = (lowX + highX) / 2; - var newOriginY = (lowY + highY) / 2; - - } else alert('please call function with a valid layout dammit!'); - } -}; // end Metamaps.Organize - - -/* - * - * TOPIC - * - */ -Metamaps.Topic = { - // this function is to retrieve a topic JSON object from the database - // @param id = the id of the topic to retrieve - get: function (id, callback) { - // if the desired topic is not yet in the local topic repository, fetch it - if (Metamaps.Topics.get(id) == undefined) { - //console.log("Ajax call!"); - if (!callback) { - var e = $.ajax({ - url: "/topics/" + id + ".json", - async: false - }); - Metamaps.Topics.add($.parseJSON(e.responseText)); - return Metamaps.Topics.get(id); - } else { - return $.ajax({ - url: "/topics/" + id + ".json", - success: function (data) { - Metamaps.Topics.add(data); - callback(Metamaps.Topics.get(id)); - } - }); - } - } else { - if (!callback) { - return Metamaps.Topics.get(id); - } else { - return callback(Metamaps.Topics.get(id)); - } - } - }, - launch: function (id) { - var bb = Metamaps.Backbone; - var start = function (data) { - Metamaps.Active.Topic = new bb.Topic(data.topic); - Metamaps.Creators = new bb.MapperCollection(data.creators); - Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives)); - Metamaps.Synapses = new bb.SynapseCollection(data.synapses); - Metamaps.Backbone.attachCollectionEvents(); - - // set filter mapper H3 text - $('#filter_by_mapper h3').html('CREATORS'); - - // build and render the visualization - Metamaps.Visualize.type = "RGraph"; - Metamaps.JIT.prepareVizData(); - - // update filters - Metamaps.Filter.reset(); - - // reset selected arrays - Metamaps.Selected.reset(); - - // these three update the actual filter box with the right list items - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMappers(); - } - - $.ajax({ - url: "/topics/" + id + "/network.json", - success: start - }); - }, - end: function () { - if (Metamaps.Active.Topic) { - $('.rightclickmenu').remove(); - Metamaps.TopicCard.hideCard(); - Metamaps.SynapseCard.hideCard(); - Metamaps.Filter.close(); - } - }, - centerOn: function (nodeid) { - if (!Metamaps.Visualize.mGraph.busy) { - Metamaps.Visualize.mGraph.onClick(nodeid, { - hideLabels: false, - duration: 1000, - onComplete: function () { - - } - }); - } - }, - fetchRelatives: function(node, metacode_id) { - - var topics = Metamaps.Topics.map(function(t){ return t.id }); - var topics_string = topics.join(); - - var creators = Metamaps.Creators.map(function(t){ return t.id }); - var creators_string = creators.join(); - - var topic = node.getData('topic'); - - var successCallback = function(data) { - if (data.creators.length > 0) Metamaps.Creators.add(data.creators); - if (data.topics.length > 0) Metamaps.Topics.add(data.topics); - if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses); - - var topicColl = new Metamaps.Backbone.TopicCollection(data.topics); - topicColl.add(topic); - var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses); - - var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0]; - Metamaps.Visualize.mGraph.op.sum(graph, { - type: 'fade', - duration: 500, - hideLabels: false - }); - - var i, l, t, s; - - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - t = Metamaps.Topics.get(n.id); - t.set({ node: n }, { silent: true }); - t.updateNode(); - - n.eachAdjacency(function (edge) { - if(!edge.getData('init')) { - edge.setData('init', true); - - l = edge.getData('synapseIDs').length; - for (i = 0; i < l; i++) { - s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]); - s.set({ edge: edge }, { silent: true }); - s.updateEdge(); - } - } - }); - }); - }; - - var paramsString = metacode_id ? "metacode=" + metacode_id + "&" : ""; - paramsString += "network=" + topics_string + "&creators=" + creators_string; - - $.ajax({ - type: "Get", - url: "/topics/" + topic.id + "/relatives.json?" + paramsString, - success: successCallback, - error: function () { - - } - }); - }, - /* - * - * - */ - renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) { - var self = Metamaps.Topic; - - var nodeOnViz, tempPos; - - var newnode = topic.createNode(); - - var midpoint = {}, pixelPos; - - if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) { - Metamaps.Visualize.mGraph.graph.addNode(newnode); - nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id); - topic.set('node', nodeOnViz, {silent: true}); - topic.updateNode(); // links the topic and the mapping to the node - - nodeOnViz.setData("dim", 1, "start"); - nodeOnViz.setData("dim", 25, "end"); - if (Metamaps.Visualize.type === "RGraph") { - tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')); - tempPos = tempPos.toPolar(); - nodeOnViz.setPos(tempPos, "current"); - nodeOnViz.setPos(tempPos, "start"); - nodeOnViz.setPos(tempPos, "end"); - } else if (Metamaps.Visualize.type === "ForceDirected") { - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current"); - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start"); - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end"); - } - if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) { - Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id; - - // position the form - midpoint.x = tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - tempNode.pos.getc().x) / 2; - midpoint.y = tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - tempNode.pos.getc().y) / 2; - pixelPos = Metamaps.Util.coordsToPixels(midpoint); - $('#new_synapse').css('left', pixelPos.x + "px"); - $('#new_synapse').css('top', pixelPos.y + "px"); - // show the form - Metamaps.Create.newSynapse.open(); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ["node-property:dim"], - duration: 500, - onComplete: function () { - tempNode = null; - tempNode2 = null; - tempInit = false; - } - }); - } else { - Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ["node-property:dim"], - duration: 500, - onComplete: function () { - - } - }); - } - } else { - Metamaps.Visualize.mGraph.loadJSON(newnode); - nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id); - topic.set('node', nodeOnViz, {silent: true}); - topic.updateNode(); // links the topic and the mapping to the node - - nodeOnViz.setData("dim", 1, "start"); - nodeOnViz.setData("dim", 25, "end"); - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current"); - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start"); - nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end"); - Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ["node-property:dim"], - duration: 500, - onComplete: function () { - - } - }); - } - - var mappingSuccessCallback = function (mappingModel, response) { - var newTopicData = { - mappingid: mappingModel.id, - topicid: mappingModel.get('topic_id') - }; - - $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]); - }; - var topicSuccessCallback = function (topicModel, response) { - if (Metamaps.Active.Map) { - mapping.save({ topic_id: topicModel.id }, { - success: mappingSuccessCallback, - error: function (model, response) { - console.log('error saving mapping to database'); - } - }); - } - - if (Metamaps.Create.newTopic.addSynapse) { - Metamaps.Create.newSynapse.topic2id = topicModel.id; - } - }; - - if (!Metamaps.Settings.sandbox && createNewInDB) { - if (topic.isNew()) { - topic.save(null, { - success: topicSuccessCallback, - error: function (model, response) { - console.log('error saving topic to database'); - } - }); - } else if (!topic.isNew() && Metamaps.Active.Map) { - mapping.save(null, { - success: mappingSuccessCallback - }); - } - } - }, - createTopicLocally: function () { - var self = Metamaps.Topic; - - if (Metamaps.Create.newTopic.name === "") { - Metamaps.GlobalUI.notifyUser("Please enter a topic title..."); - return; - } - - // hide the 'double-click to add a topic' message - Metamaps.Famous.viz.hideInstructions(); - - $(document).trigger(Metamaps.Map.events.editedByActiveMapper); - - var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode); - - var topic = new Metamaps.Backbone.Topic({ - name: Metamaps.Create.newTopic.name, - metacode_id: metacode.id - }); - Metamaps.Topics.add(topic); - - var mapping = new Metamaps.Backbone.Mapping({ - category: "Topic", - xloc: Metamaps.Create.newTopic.x, - yloc: Metamaps.Create.newTopic.y, - topic_id: topic.cid - }); - Metamaps.Mappings.add(mapping); - - //these can't happen until the value is retrieved, which happens in the line above - Metamaps.Create.newTopic.hide(); - - self.renderTopic(mapping, topic, true, true); // this function also includes the creation of the topic in the database - }, - getTopicFromAutocomplete: function (id) { - var self = Metamaps.Topic; - - $(document).trigger(Metamaps.Map.events.editedByActiveMapper); - - Metamaps.Create.newTopic.hide(); - - var topic = self.get(id); - - var mapping = new Metamaps.Backbone.Mapping({ - category: "Topic", - xloc: Metamaps.Create.newTopic.x, - yloc: Metamaps.Create.newTopic.y, - topic_id: topic.id - }); - Metamaps.Mappings.add(mapping); - - self.renderTopic(mapping, topic, true, true); - }, - getTopicFromSearch: function (event, id) { - var self = Metamaps.Topic; - - $(document).trigger(Metamaps.Map.events.editedByActiveMapper); - - var topic = self.get(id); - - var nextCoords = Metamaps.Map.getNextCoord(); - var mapping = new Metamaps.Backbone.Mapping({ - category: "Topic", - xloc: nextCoords.x, - yloc: nextCoords.y, - topic_id: topic.id - }); - Metamaps.Mappings.add(mapping); - - self.renderTopic(mapping, topic, true, true); - - Metamaps.GlobalUI.notifyUser('Topic was added to your map!'); - - event.stopPropagation(); - event.preventDefault(); - return false; - } -}; // end Metamaps.Topic - - -/* - * - * SYNAPSE - * - */ -Metamaps.Synapse = { - // this function is to retrieve a synapse JSON object from the database - // @param id = the id of the synapse to retrieve - get: function (id, callback) { - // if the desired topic is not yet in the local topic repository, fetch it - if (Metamaps.Synapses.get(id) == undefined) { - if (!callback) { - var e = $.ajax({ - url: "/synapses/" + id + ".json", - async: false - }); - Metamaps.Synapses.add($.parseJSON(e.responseText)); - return Metamaps.Synapses.get(id); - } else { - return $.ajax({ - url: "/synapses/" + id + ".json", - success: function (data) { - Metamaps.Synapses.add(data); - callback(Metamaps.Synapses.get(id)); - } - }); - } - } else { - if (!callback) { - return Metamaps.Synapses.get(id); - } else { - return callback(Metamaps.Synapses.get(id)); - } - } - }, - /* - * - * - */ - renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) { - var self = Metamaps.Synapse; - - var edgeOnViz; - - var newedge = synapse.createEdge(); - - Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data); - edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id); - synapse.set('edge', edgeOnViz); - synapse.updateEdge(); // links the synapse and the mapping to the edge - - Metamaps.Control.selectEdge(edgeOnViz); - - var mappingSuccessCallback = function (mappingModel, response) { - var newSynapseData = { - mappingid: mappingModel.id, - synapseid: mappingModel.get('synapse_id') - }; - - $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]); - }; - var synapseSuccessCallback = function (synapseModel, response) { - if (Metamaps.Active.Map) { - mapping.save({ synapse_id: synapseModel.id }, { - success: mappingSuccessCallback - }); - } - }; - - if (!Metamaps.Settings.sandbox && createNewInDB) { - if (synapse.isNew()) { - synapse.save(null, { - success: synapseSuccessCallback, - error: function (model, response) { - console.log('error saving synapse to database'); - } - }); - } else if (!synapse.isNew() && Metamaps.Active.Map) { - mapping.save(null, { - success: mappingSuccessCallback - }); - } - } - }, - createSynapseLocally: function () { - var self = Metamaps.Synapse, - topic1, - topic2, - node1, - node2, - synapse, - mapping; - - $(document).trigger(Metamaps.Map.events.editedByActiveMapper); - - //for each node in this array we will create a synapse going to the position2 node. - var synapsesToCreate = []; - - topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id); - node2 = topic2.get('node'); - - var len = Metamaps.Selected.Nodes.length; - if (len == 0) { - topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id); - synapsesToCreate[0] = topic1.get('node'); - } else if (len > 0) { - synapsesToCreate = Metamaps.Selected.Nodes; - } - - for (var i = 0; i < synapsesToCreate.length; i++) { - node1 = synapsesToCreate[i]; - topic1 = node1.getData('topic'); - synapse = new Metamaps.Backbone.Synapse({ - desc: Metamaps.Create.newSynapse.description, - node1_id: topic1.isNew() ? topic1.cid : topic1.id, - node2_id: topic2.isNew() ? topic2.cid : topic2.id, - }); - Metamaps.Synapses.add(synapse); - - mapping = new Metamaps.Backbone.Mapping({ - category: "Synapse", - synapse_id: synapse.cid - }); - Metamaps.Mappings.add(mapping); - - // this function also includes the creation of the synapse in the database - self.renderSynapse(mapping, synapse, node1, node2, true); - } // for each in synapsesToCreate - - Metamaps.Create.newSynapse.hide(); - }, - getSynapseFromAutocomplete: function (id) { - var self = Metamaps.Synapse, - topic1, - topic2, - node1, - node2; - - var synapse = self.get(id); - - var mapping = new Metamaps.Backbone.Mapping({ - category: "Synapse", - synapse_id: synapse.id - }); - Metamaps.Mappings.add(mapping); - - topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id); - node1 = topic1.get('node'); - topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id); - node2 = topic2.get('node'); - Metamaps.Create.newSynapse.hide(); - - self.renderSynapse(mapping, synapse, node1, node2, true); - } -}; // end Metamaps.Synapse - - -/* - * - * MAP - * - */ -Metamaps.Map = { - events: { - editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper" - }, - nextX: 0, - nextY: 0, - sideLength: 1, - turnCount: 0, - nextXshift: 1, - nextYshift: 0, - timeToTurn: 0, - init: function () { - var self = Metamaps.Map; - - // prevent right clicks on the main canvas, so as to not get in the way of our right clicks - $('#center-container').bind('contextmenu', function (e) { - return false; - }); - - $('.sidebarFork').click(function () { - self.fork(); - }); - - Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html(); - - self.InfoBox.init(); - self.CheatSheet.init(); - - $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper); - }, - launch: function (id) { - var bb = Metamaps.Backbone; - var start = function (data) { - Metamaps.Active.Map = new bb.Map(data.map); - Metamaps.Mappers = new bb.MapperCollection(data.mappers); - Metamaps.Topics = new bb.TopicCollection(data.topics); - Metamaps.Synapses = new bb.SynapseCollection(data.synapses); - Metamaps.Mappings = new bb.MappingCollection(data.mappings); - Metamaps.Backbone.attachCollectionEvents(); - - var map = Metamaps.Active.Map; - var mapper = Metamaps.Active.Mapper; - - // add class to .wrapper for specifying whether you can edit the map - if (map.authorizeToEdit(mapper)) { - $('.wrapper').addClass('canEditMap'); - } - - // add class to .wrapper for specifying if the map can - // be collaborated on - if (map.get('permission') === 'commons') { - $('.wrapper').addClass('commonsMap'); - } - - // set filter mapper H3 text - $('#filter_by_mapper h3').html('MAPPERS'); - - // build and render the visualization - Metamaps.Visualize.type = "ForceDirected"; - Metamaps.JIT.prepareVizData(); - - // update filters - Metamaps.Filter.reset(); - - // reset selected arrays - Metamaps.Selected.reset(); - - // set the proper mapinfobox content - Metamaps.Map.InfoBox.load(); - - // these three update the actual filter box with the right list items - Metamaps.Filter.checkMetacodes(); - Metamaps.Filter.checkSynapses(); - Metamaps.Filter.checkMappers(); - - Metamaps.Realtime.startActiveMap(); - Metamaps.Loading.hide(); - } - - $.ajax({ - url: "/maps/" + id + "/contains.json", - success: start - }); - }, - end: function () { - if (Metamaps.Active.Map) { - - $('.wrapper').removeClass('canEditMap commonsMap'); - Metamaps.Map.resetSpiral(); - - $('.rightclickmenu').remove(); - Metamaps.TopicCard.hideCard(); - Metamaps.SynapseCard.hideCard(); - Metamaps.Create.newTopic.hide(); - Metamaps.Create.newSynapse.hide(); - Metamaps.Filter.close(); - Metamaps.Map.InfoBox.close(); - Metamaps.Realtime.endActiveMap(); - } - }, - fork: function () { - Metamaps.GlobalUI.openLightbox('forkmap'); - - var nodes_data = "", - synapses_data = ""; - var nodes_array = []; - var synapses_array = []; - // collect the unfiltered topics - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - // if the opacity is less than 1 then it's filtered - if (n.getData('alpha') === 1) { - var id = n.getData('topic').id; - nodes_array.push(id); - var x, y; - if (n.pos.x && n.pos.y) { - x = n.pos.x; - y = n.pos.y; - } else { - var x = Math.cos(n.pos.theta) * n.pos.rho; - var y = Math.sin(n.pos.theta) * n.pos.rho; - } - nodes_data += id + '/' + x + '/' + y + ','; - } - }); - // collect the unfiltered synapses - Metamaps.Synapses.each(function(synapse){ - var desc = synapse.get("desc"); - - var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1; - // make sure that both topics are being added, otherwise, it - // doesn't make sense to add the synapse - var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1; - topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1; - if (descNotFiltered && topicsNotFiltered) { - synapses_array.push(synapse.id); - } - }); - - synapses_data = synapses_array.join(); - nodes_data = nodes_data.slice(0, -1); - - Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data; - Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data; - - }, - leavePrivateMap: function(){ - var map = Metamaps.Active.Map; - Metamaps.Maps.Active.remove(map); - Metamaps.Maps.Featured.remove(map); - Metamaps.Router.home(); - Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.'); - }, - commonsToPublic: function(){ - Metamaps.Realtime.turnOff(true); // true is for 'silence' - Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.'); - Metamaps.Active.Map.trigger('changeByOther'); - }, - publicToCommons: function(){ - var confirmString = "This map permission has been changed to Commons! "; - confirmString += "Do you want to reload and enable realtime collaboration?"; - var c = confirm(confirmString); - if (c) { - Metamaps.Router.maps(Metamaps.Active.Map.id); - } - }, - editedByActiveMapper: function () { - if (Metamaps.Active.Mapper) { - Metamaps.Mappers.add(Metamaps.Active.Mapper); - } - }, - getNextCoord: function() { - var self = Metamaps.Map; - var nextX = self.nextX; - var nextY = self.nextY; - - var DISTANCE_BETWEEN = 120; - - self.nextX = self.nextX + DISTANCE_BETWEEN * self.nextXshift; - self.nextY = self.nextY + DISTANCE_BETWEEN * self.nextYshift; - - self.timeToTurn += 1; - // if true, it's time to turn - if (self.timeToTurn === self.sideLength) { - - self.turnCount += 1; - // if true, it's time to increase side length - if (self.turnCount % 2 === 0) { - self.sideLength += 1; - } - self.timeToTurn = 0; - - // going right? turn down - if (self.nextXshift == 1 && self.nextYshift == 0) { - self.nextXshift = 0; - self.nextYshift = 1; - } - // going down? turn left - else if (self.nextXshift == 0 && self.nextYshift == 1) { - self.nextXshift = -1; - self.nextYshift = 0; - } - // going left? turn up - else if (self.nextXshift == -1 && self.nextYshift == 0) { - self.nextXshift = 0; - self.nextYshift = -1; - } - // going up? turn right - else if (self.nextXshift == 0 && self.nextYshift == -1) { - self.nextXshift = 1; - self.nextYshift = 0; - } - } - - return { - x: nextX, - y: nextY - } - }, - resetSpiral: function() { - Metamaps.Map.nextX = 0; - Metamaps.Map.nextY = 0; - Metamaps.Map.nextXshift = 1; - Metamaps.Map.nextYshift = 0; - Metamaps.Map.sideLength = 1; - Metamaps.Map.timeToTurn = 0; - Metamaps.Map.turnCount = 0; - }, - exportImage: function() { - - var canvas = {}; - - canvas.canvas = document.createElement("canvas"); - canvas.canvas.width = 1880; // 960; - canvas.canvas.height = 1260; // 630 - - canvas.scaleOffsetX = 1; - canvas.scaleOffsetY = 1; - canvas.translateOffsetY = 0; - canvas.translateOffsetX = 0; - canvas.denySelected = true; - - canvas.getSize = function() { - if(this.size) return this.size; - var canvas = this.canvas; - return this.size = { - width: canvas.width, - height: canvas.height - }; - }; - canvas.scale = function(x, y) { - 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; - this.getCtx().scale(x, y); - this.translate(dx, dy); - }; - canvas.translate = function(x, y) { - var sx = this.scaleOffsetX, - sy = this.scaleOffsetY; - this.translateOffsetX += x*sx; - this.translateOffsetY += y*sy; - this.getCtx().translate(x, y); - }; - canvas.getCtx = function() { - return this.canvas.getContext("2d"); - }; - // center it - canvas.getCtx().translate(1880/2, 1260/2); - - var mGraph = Metamaps.Visualize.mGraph; - - var id = mGraph.root; - var root = mGraph.graph.getNode(id); - var T = !!root.visited; - - // pass true to avoid basing it on a selection - Metamaps.JIT.zoomExtents(null, canvas, true); - - var c = canvas.canvas, - ctx = canvas.getCtx(), - scale = canvas.scaleOffsetX; - - // draw a grey background - ctx.fillStyle = '#d8d9da'; - var xPoint = (-(c.width/scale)/2) - (canvas.translateOffsetX/scale), - yPoint = (-(c.height/scale)/2) - (canvas.translateOffsetY/scale); - ctx.fillRect(xPoint,yPoint,c.width/scale,c.height/scale); - - // draw the graph - mGraph.graph.eachNode(function(node) { - var nodeAlpha = node.getData('alpha'); - node.eachAdjacency(function(adj) { - var nodeTo = adj.nodeTo; - if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) { - mGraph.fx.plotLine(adj, canvas); - } - }); - if(node.drawn) { - mGraph.fx.plotNode(node, canvas); - } - if(!mGraph.labelsHidden) { - if(node.drawn && nodeAlpha >= 0.95) { - mGraph.labels.plotLabel(canvas, node); - } else { - mGraph.labels.hideLabel(node, false); - } - } - node.visited = !T; - }); - - var imageData = { - encoded_image: canvas.canvas.toDataURL() - }; - - var map = Metamaps.Active.Map; - - var today = new Date(); - var dd = today.getDate(); - var mm = today.getMonth()+1; //January is 0! - var yyyy = today.getFullYear(); - if(dd<10) { - dd='0'+dd - } - if(mm<10) { - mm='0'+mm - } - today = mm+'/'+dd+'/'+yyyy; - - var mapName = map.get("name").split(" ").join([separator = '-']); - var downloadMessage = ""; - downloadMessage += "Captured map screenshot! "; - downloadMessage += "DOWNLOAD"; - Metamaps.GlobalUI.notifyUser(downloadMessage); - - $.ajax({ - type: "POST", - dataType: 'json', - url: "/maps/" + Metamaps.Active.Map.id + "/upload_screenshot", - data: imageData, - success: function (data) { - console.log('successfully uploaded map screenshot'); - }, - error: function () { - console.log('failed to save map screenshot'); - } - }); - } -}; - - -/* - * - * CHEATSHEET - * - */ -Metamaps.Map.CheatSheet = { - init: function () { - // tab the cheatsheet - $('#cheatSheet').tabs(); - $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); - $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); - - // id = the id of a vimeo video - var switchVideo = function (element, id) { - $('.tutorialItem').removeClass("active"); - $(element).addClass("active"); - $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id); - }; - - $('#gettingStarted').click(function() { - //switchVideo(this,'88334167'); - }); - $('#upYourSkillz').click(function() { - //switchVideo(this,'100118167'); - }); - $('#advancedMapping').click(function() { - //switchVideo(this,'88334167'); - }); - } -}; // end Metamaps.Map.CheatSheet - - -/* - * - * INFOBOX - * - */ -Metamaps.Map.InfoBox = { - isOpen: false, - changing: false, - selectingPermission: false, - changePermissionText: "
    As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.
    ", - nameHTML: '{{name}}', - descHTML: '{{desc}}', - init: function () { - var self = Metamaps.Map.InfoBox; - - $('.mapInfoIcon').click(self.toggleBox); - $('.mapInfoBox').click(function(event){ - event.stopPropagation(); - }); - $('body').click(self.close); - - self.attachEventListeners(); - - self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html()); - }, - toggleBox: function (event) { - var self = Metamaps.Map.InfoBox; - - if (self.isOpen) self.close(); - else self.open(); - - event.stopPropagation(); - }, - open: function () { - var self = Metamaps.Map.InfoBox; - $('.mapInfoIcon div').addClass('hide'); - if (!self.isOpen && !self.changing) { - self.changing = true; - $('.mapInfoBox').fadeIn(200, function () { - self.changing = false; - self.isOpen = true; - }); - } - }, - close: function () { - var self = Metamaps.Map.InfoBox; - - $('.mapInfoIcon div').removeClass('hide'); - if (!self.changing) { - self.changing = true; - $('.mapInfoBox').fadeOut(200, function () { - self.changing = false; - self.isOpen = false; - self.hidePermissionSelect(); - $('.mapContributors .tip').hide(); - }); - } - }, - load: function () { - var self = Metamaps.Map.InfoBox; - - var map = Metamaps.Active.Map; - - var obj = map.pick("permission","contributor_count","topic_count","synapse_count","created_at","updated_at"); - - var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper); - var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper); - var shareable = map.get('permission') !== 'private'; - - obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name"); - obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc"); - obj["map_creator_tip"] = isCreator ? self.changePermissionText : ""; - obj["contributors_class"] = Metamaps.Mappers.length > 1 ? "multiple" : ""; - obj["contributors_class"] += Metamaps.Mappers.length === 2 ? " mTwo" : ""; - obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "/assets/user.png"; - obj["contributor_list"] = self.createContributorList(); - obj["user_name"] = isCreator ? "You" : map.get("user_name"); - - var classes = isCreator ? "yourMap" : ""; - classes += canEdit ? " canEdit" : ""; - classes += shareable ? " shareable" : ""; - $(".mapInfoBox").removeClass("shareable yourMap canEdit") - .addClass(classes) - .html(self.generateBoxHTML.render(obj)); - - self.attachEventListeners(); - }, - attachEventListeners: function () { - var self = Metamaps.Map.InfoBox; - - $('.mapInfoBox.canEdit .best_in_place').best_in_place(); - - // because anyone who can edit the map can change the map title - var bipName = $('.mapInfoBox .best_in_place_name'); - bipName.unbind("best_in_place:activate").bind("best_in_place:activate", function () { - var $el = bipName.find('textarea'); - var el = $el[0]; - - $el.attr('maxlength', '140'); - - $('.mapInfoName').append('
    '); - - var callback = function (data) { - $('.nameCounter.forMap').html(data.all + '/140'); - }; - Countable.live(el, callback); - }); - bipName.unbind("best_in_place:deactivate").bind("best_in_place:deactivate", function () { - $('.nameCounter.forMap').remove(); - }); - - $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () { - var name = $(this).html(); - Metamaps.Active.Map.set('name', name); - Metamaps.Active.Map.trigger('saved'); - }); - - $('.mapInfoDesc .best_in_place_desc').unbind("ajax:success").bind("ajax:success", function () { - var desc = $(this).html(); - Metamaps.Active.Map.set('desc', desc); - Metamaps.Active.Map.trigger('saved'); - }); - - $('.yourMap .mapPermission').unbind().click(self.onPermissionClick); - // .yourMap in the unbind/bind is just a namespace for the events - // not a reference to the class .yourMap on the .mapInfoBox - $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect); - - $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap); - - $('.mapContributors span, #mapContribs').unbind().click(function(event){ - $('.mapContributors .tip').toggle(); - event.stopPropagation(); - }); - $('.mapContributors .tip').unbind().click(function(event){ - event.stopPropagation(); - }); - $('.mapContributors .tip li a').click(Metamaps.Router.intercept); - - $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function(){ - $('.mapContributors .tip').hide(); - }); - }, - updateNameDescPerm: function(name, desc, perm) { - $('.mapInfoName .best_in_place_name').html(name); - $('.mapInfoDesc .best_in_place_desc').html(desc); - $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm); - }, - createContributorList: function () { - var self = Metamaps.Map.InfoBox; - - var string = ""; - console.log("hello!!") - string += ""; - console.log(string); - return string; - }, - updateNumbers: function () { - var self = Metamaps.Map.InfoBox; - var mapper = Metamaps.Active.Mapper; - - var contributors_class = ""; - if (Metamaps.Mappers.length === 2) contributors_class = "multiple mTwo"; - else if (Metamaps.Mappers.length > 2) contributors_class = "multiple"; - - var contributors_image = "/assets/user.png"; - if (Metamaps.Mappers.length > 0) { - // get the first contributor and use their image - contributors_image = Metamaps.Mappers.models[0].get("image"); - } - $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class); - $('.mapContributors span').text(Metamaps.Mappers.length) - $('.mapContributors .tip').html(self.createContributorList()); - $('.mapTopics').text(Metamaps.Topics.length); - $('.mapSynapses').text(Metamaps.Synapses.length); - - $('.mapEditedAt').html('Last edited: ' + Metamaps.Util.nowDateFormatted()); - }, - onPermissionClick: function (event) { - var self = Metamaps.Map.InfoBox; - - if (!self.selectingPermission) { - self.selectingPermission = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - if ($(this).hasClass('commons')) { - $(this).append('
    '); - } else if ($(this).hasClass('public')) { - $(this).append('
    '); - } else if ($(this).hasClass('private')) { - $(this).append('
    '); - } - $('.mapPermission .permissionSelect li').click(self.selectPermission); - event.stopPropagation(); - } - }, - hidePermissionSelect: function () { - var self = Metamaps.Map.InfoBox; - - self.selectingPermission = false; - $('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.mapPermission .permissionSelect').remove(); - }, - selectPermission: function (event) { - var self = Metamaps.Map.InfoBox; - - self.selectingPermission = false; - var permission = $(this).attr('class'); - var permBefore = Metamaps.Active.Map.get('permission'); - Metamaps.Active.Map.save({ - permission: permission - }); - Metamaps.Active.Map.updateMapWrapper(); - if (permBefore !== 'commons' && permission === 'commons') { - Metamaps.Realtime.setupSocket(); - Metamaps.Realtime.turnOn(); - } - else if (permBefore === 'commons' && permission === 'public') { - Metamaps.Realtime.turnOff(true); // true is to 'silence' - // the notification that would otherwise be sent - } - shareable = permission === 'private' ? '' : 'shareable'; - $('.mapPermission').removeClass('commons public private minimize').addClass(permission); - $('.mapPermission .permissionSelect').remove(); - $('.mapInfoBox').removeClass('shareable').addClass(shareable); - event.stopPropagation(); - }, - deleteActiveMap: function () { - var confirmString = 'Are you sure you want to delete this map? '; - confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'; - - var doIt = confirm(confirmString); - var map = Metamaps.Active.Map; - var mapper = Metamaps.Active.Mapper; - var authorized = map.authorizePermissionChange(mapper); - - if (doIt && authorized) { - Metamaps.Map.InfoBox.close(); - Metamaps.Maps.Active.remove(map); - Metamaps.Maps.Featured.remove(map); - Metamaps.Maps.Mine.remove(map); - map.destroy(); - Metamaps.Router.home(); - Metamaps.GlobalUI.notifyUser('Map eliminated!'); - } - else if (!authorized) { - alert('Hey now. We can\'t just go around willy nilly deleting other people\'s maps now can we? Run off and find something constructive to do, eh?'); - } - } -}; // end Metamaps.Map.InfoBox - -/* -* -* Account Settings -* -*/ -Metamaps.Account = { - listenersInitialized: false, - init: function () { - var self = Metamaps.Account; - - - }, - initListeners: function(){ - var self = Metamaps.Account; - - $('#user_image').change(self.showImagePreview); - self.listenersInitialized = true; - }, - toggleChangePicture: function(){ - var self = Metamaps.Account; - - $('.userImageMenu').toggle(); - if (!self.listenersInitialized) self.initListeners(); - }, - openChangePicture: function(){ - var self = Metamaps.Account; - - $('.userImageMenu').show(); - if (!self.listenersInitialized) self.initListeners(); - }, - closeChangePicture: function(){ - var self = Metamaps.Account; - - $('.userImageMenu').hide(); - }, - showLoading: function(){ - var self = Metamaps.Account; - - var loader = new CanvasLoader('accountPageLoading'); - loader.setColor('#4FC059'); // default is '#000000' - loader.setDiameter(28); // default is 40 - loader.setDensity(41); // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show(); // Hidden by default - $('#accountPageLoading').show(); - }, - showImagePreview: function(){ - var self = Metamaps.Account; - - var file = $('#user_image')[0].files[0]; - - var reader = new FileReader(); - - reader.onload = function(e) { - var $canvas = $('').attr({ - width: 84, - height: 84 - }); - var context = $canvas[0].getContext('2d'); - var imageObj = new Image(); - - imageObj.onload = function() { - $('.userImageDiv canvas').remove(); - $('.userImageDiv img').hide(); - - var imgWidth = imageObj.width; - var imgHeight = imageObj.height; - - var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth; - // draw cropped image - var nonZero = Math.abs(imgHeight - imgWidth) / 2; - var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero; - var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero; - var sourceWidth = dimensionToMatch; - var sourceHeight = dimensionToMatch; - var destX = 0; - var destY = 0; - var destWidth = 84; - var destHeight = 84; - - context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); - $('.userImageDiv').prepend($canvas); - }; - imageObj.src = reader.result; - }; - - if (file) { - reader.readAsDataURL(file); - $('.userImageMenu').hide(); - $('#remove_image').val('0'); - } - }, - removePicture: function(){ - var self = Metamaps.Account; - - $('.userImageDiv canvas').remove(); - $('.userImageDiv img').attr('src', '/assets/user.png').show(); - $('.userImageMenu').hide(); - - var input = $('#user_image'); - input.replaceWith(input.val('').clone(true)); - $('#remove_image').val('1'); - }, - changeName: function(){ - $('.accountName').hide(); - $('.changeName').show(); - }, - showPass: function(){ - $(".toHide").show(); - $(".changePass").hide(); - }, - hidePass: function(){ - $(".toHide").hide(); - $(".changePass").show(); - - $('#current_password').val(''); - $('#user_password').val(''); - $('#user_password_confirmation').val(''); - } -}; - -/* - * - * MAPPER - * - */ -Metamaps.Mapper = { - // this function is to retrieve a mapper JSON object from the database - // @param id = the id of the mapper to retrieve - get: function (id, callback) { - return $.ajax({ - url: "/users/" + id + ".json", - success: function (data) { - callback(new Metamaps.Backbone.Mapper(data)); - } - }); - } -}; // end Metamaps.Mapper - - -/* - * - * ADMIN - * - */ - -Metamaps.Admin = { - selectMetacodes: [], - allMetacodes: [], - init: function () { - var self = Metamaps.Admin; - - $('#metacodes_value').val(self.selectMetacodes.toString()); - }, - selectAll: function () { - var self = Metamaps.Admin; - - $('.editMetacodes li').removeClass('toggledOff'); - self.selectMetacodes = self.allMetacodes.slice(0); - $('#metacodes_value').val(self.selectMetacodes.toString()); - }, - deselectAll: function () { - var self = Metamaps.Admin; - - $('.editMetacodes li').addClass('toggledOff'); - self.selectMetacodes = []; - $('#metacodes_value').val(0); - }, - liClickHandler: function () { - var self = Metamaps.Admin; - - if ($(this).attr('class') != 'toggledOff') { - $(this).addClass('toggledOff'); - var value_to_remove = $(this).attr('id'); - self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1); - $('#metacodes_value').val(self.selectMetacodes.toString()); - } - else if ($(this).attr('class') == 'toggledOff') { - $(this).removeClass('toggledOff'); - self.selectMetacodes.push($(this).attr('id')); - $('#metacodes_value').val(self.selectMetacodes.toString()); - } - }, - validate: function () { - var self = Metamaps.Admin; - - if (self.selectMetacodes.length == 0) { - alert('Would you pretty please select at least one metacode for the set?'); - return false; - } - } -}; - diff --git a/app/views/admin/_adminpanel.html.erb b/app/views/admin/_adminpanel.html.erb index cbc9bb69..47eaa125 100644 --- a/app/views/admin/_adminpanel.html.erb +++ b/app/views/admin/_adminpanel.html.erb @@ -1,3 +1,4 @@ +<%= javascript_include_tag "pages/Metamaps.Admin" %> <%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button', 'data-bypass' => 'true' }%> <%= link_to 'New Set', new_metacode_set_path, { :class => 'button', 'data-bypass' => 'true' }%> <%= link_to 'Metacodes', metacodes_path, { :class => 'button', 'data-bypass' => 'true' }%> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 9911466a..8e12d049 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,6 +13,7 @@ <%= stylesheet_link_tag "application", :media => "all" %> + <%= javascript_include_tag "application" %> @@ -64,6 +65,34 @@ }); + + + "> diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 969961ea..be2abe40 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -5,6 +5,8 @@ #%> <% content_for :title, @user.name + "'s Settings | Metamaps" %> + +<%= javascript_include_tag "pages/Metamaps.Admin" %>
    <%= form_for @user, url: user_url, :html =>{ :multipart => true, :class => "edit_user centerGreyForm"} do |form| %>

    Edit Account