From ae8c711d2788be0d5058f6007ccb809895cca8e8 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Tue, 29 Jul 2014 13:34:10 -0400 Subject: [PATCH] major code refactor --- app/assets/javascripts/Jit/excanvas.js | 1416 --- .../Jit/graphsettings-event-handlers.js | 588 - .../javascripts/Jit/graphsettings-model.js | 66 - app/assets/javascripts/Jit/graphsettings.js | 606 - app/assets/javascripts/Jit/jit2.0.0.js | 9761 ----------------- app/assets/javascripts/Jit/loadgraphs.js | 143 - app/assets/javascripts/Jit/permissions.js | 11 - .../Jit/select-edit-delete-nodes-and-edges.js | 439 - app/assets/javascripts/Jit/topicCard.js | 213 - app/assets/javascripts/application.js | 303 +- .../{map.js => compileMapPages.js} | 9 +- .../javascripts/jquery/AllMappingPages.js | 98 - .../javascripts/jquery/AuthAllMappingPages.js | 19 - .../javascripts/jquery/AuthCanEditMapPage.js | 97 - .../jquery/AuthCanEditMappingPages.js | 52 - .../javascripts/jquery/AuthEveryPage.js | 16 - .../jquery/AuthMapCreatorMapPage.js | 36 - app/assets/javascripts/jquery/EveryPage.js | 412 - app/assets/javascripts/jquery/MapPage.js | 48 - .../metamaps/{metamapsJIT.js => JIT.js} | 9 +- .../javascripts/metamaps/Metamaps.GlobalUI.js | 526 + .../javascripts/metamaps/Metamaps.JIT.js | 1533 +++ .../{Jit/filter.js => metamaps/codeleft.js} | 128 +- app/assets/javascripts/metamaps/metamaps.js | 4711 ++++---- app/assets/javascripts/realtime/realtime.js | 235 - app/assets/stylesheets/application.css | 21 +- app/controllers/maps_controller.rb | 92 +- app/controllers/synapses_controller.rb | 25 +- app/controllers/topics_controller.rb | 15 - app/models/map.rb | 71 - app/views/layouts/_lightboxes.html.erb | 6 +- app/views/layouts/_switchmetacodes.html.erb | 12 +- app/views/layouts/application.html.erb | 4 +- app/views/maps/_fork.html.erb | 2 +- app/views/maps/_new.html.erb | 2 +- app/views/maps/_newsynapse.html.erb | 6 - app/views/maps/_newtopic.html.erb | 16 +- app/views/maps/show.html.erb | 23 +- config/environments/production.rb | 2 +- config/routes.rb | 11 +- 40 files changed, 4118 insertions(+), 17665 deletions(-) delete mode 100644 app/assets/javascripts/Jit/excanvas.js delete mode 100644 app/assets/javascripts/Jit/graphsettings-event-handlers.js delete mode 100644 app/assets/javascripts/Jit/graphsettings-model.js delete mode 100644 app/assets/javascripts/Jit/graphsettings.js delete mode 100644 app/assets/javascripts/Jit/jit2.0.0.js delete mode 100644 app/assets/javascripts/Jit/loadgraphs.js delete mode 100644 app/assets/javascripts/Jit/permissions.js delete mode 100644 app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js delete mode 100644 app/assets/javascripts/Jit/topicCard.js rename app/assets/javascripts/{map.js => compileMapPages.js} (73%) delete mode 100644 app/assets/javascripts/jquery/AllMappingPages.js delete mode 100644 app/assets/javascripts/jquery/AuthAllMappingPages.js delete mode 100644 app/assets/javascripts/jquery/AuthCanEditMapPage.js delete mode 100644 app/assets/javascripts/jquery/AuthCanEditMappingPages.js delete mode 100644 app/assets/javascripts/jquery/AuthEveryPage.js delete mode 100644 app/assets/javascripts/jquery/AuthMapCreatorMapPage.js delete mode 100644 app/assets/javascripts/jquery/EveryPage.js delete mode 100644 app/assets/javascripts/jquery/MapPage.js rename app/assets/javascripts/metamaps/{metamapsJIT.js => JIT.js} (96%) create mode 100644 app/assets/javascripts/metamaps/Metamaps.GlobalUI.js create mode 100644 app/assets/javascripts/metamaps/Metamaps.JIT.js rename app/assets/javascripts/{Jit/filter.js => metamaps/codeleft.js} (58%) delete mode 100644 app/assets/javascripts/realtime/realtime.js diff --git a/app/assets/javascripts/Jit/excanvas.js b/app/assets/javascripts/Jit/excanvas.js deleted file mode 100644 index 00b316ca..00000000 --- a/app/assets/javascripts/Jit/excanvas.js +++ /dev/null @@ -1,1416 +0,0 @@ -// Copyright 2006 Google Inc. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// Known Issues: -// -// * Patterns only support repeat. -// * Radial gradient are not implemented. The VML version of these look very -// different from the canvas one. -// * Clipping paths are not implemented. -// * Coordsize. The width and height attribute have higher priority than the -// width and height style values which isn't correct. -// * Painting mode isn't implemented. -// * Canvas width/height should is using content-box by default. IE in -// Quirks mode will draw the canvas using border-box. Either change your -// doctype to HTML5 -// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) -// or use Box Sizing Behavior from WebFX -// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) -// * Non uniform scaling does not correctly scale strokes. -// * Optimize. There is always room for speed improvements. - -// Only add this code if we do not already have a canvas implementation -if (!document.createElement('canvas').getContext) { - -(function() { - - // alias some functions to make (compiled) code shorter - var m = Math; - var mr = m.round; - var ms = m.sin; - var mc = m.cos; - var abs = m.abs; - var sqrt = m.sqrt; - - // this is used for sub pixel precision - var Z = 10; - var Z2 = Z / 2; - - var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1]; - - /** - * This funtion is assigned to the elements as element.getContext(). - * @this {HTMLElement} - * @return {CanvasRenderingContext2D_} - */ - function getContext() { - return this.context_ || - (this.context_ = new CanvasRenderingContext2D_(this)); - } - - var slice = Array.prototype.slice; - - /** - * Binds a function to an object. The returned function will always use the - * passed in {@code obj} as {@code this}. - * - * Example: - * - * g = bind(f, obj, a, b) - * g(c, d) // will do f.call(obj, a, b, c, d) - * - * @param {Function} f The function to bind the object to - * @param {Object} obj The object that should act as this when the function - * is called - * @param {*} var_args Rest arguments that will be used as the initial - * arguments when the function is called - * @return {Function} A new function that has bound this - */ - function bind(f, obj, var_args) { - var a = slice.call(arguments, 2); - return function() { - return f.apply(obj, a.concat(slice.call(arguments))); - }; - } - - function encodeHtmlAttribute(s) { - return String(s).replace(/&/g, '&').replace(/"/g, '"'); - } - - function addNamespace(doc, prefix, urn) { - if (!doc.namespaces[prefix]) { - doc.namespaces.add(prefix, urn, '#default#VML'); - } - } - - function addNamespacesAndStylesheet(doc) { - addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml'); - addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office'); - - // Setup default CSS. Only add one style sheet per document - if (!doc.styleSheets['ex_canvas_']) { - var ss = doc.createStyleSheet(); - ss.owningElement.id = 'ex_canvas_'; - ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + - // default size is 300x150 in Gecko and Opera - 'text-align:left;width:300px;height:150px}'; - } - } - - // Add namespaces and stylesheet at startup. - addNamespacesAndStylesheet(document); - - var G_vmlCanvasManager_ = { - init: function(opt_doc) { - var doc = opt_doc || document; - // Create a dummy element so that IE will allow canvas elements to be - // recognized. - doc.createElement('canvas'); - doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); - }, - - init_: function(doc) { - // find all canvas elements - var els = doc.getElementsByTagName('canvas'); - for (var i = 0; i < els.length; i++) { - this.initElement(els[i]); - } - }, - - /** - * Public initializes a canvas element so that it can be used as canvas - * element from now on. This is called automatically before the page is - * loaded but if you are creating elements using createElement you need to - * make sure this is called on the element. - * @param {HTMLElement} el The canvas element to initialize. - * @return {HTMLElement} the element that was created. - */ - initElement: function(el) { - if (!el.getContext) { - el.getContext = getContext; - - // Add namespaces and stylesheet to document of the element. - addNamespacesAndStylesheet(el.ownerDocument); - - // Remove fallback content. There is no way to hide text nodes so we - // just remove all childNodes. We could hide all elements and remove - // text nodes but who really cares about the fallback content. - el.innerHTML = ''; - - // do not use inline function because that will leak memory - el.attachEvent('onpropertychange', onPropertyChange); - el.attachEvent('onresize', onResize); - - var attrs = el.attributes; - if (attrs.width && attrs.width.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setWidth_(attrs.width.nodeValue); - el.style.width = attrs.width.nodeValue + 'px'; - } else { - el.width = el.clientWidth; - } - if (attrs.height && attrs.height.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setHeight_(attrs.height.nodeValue); - el.style.height = attrs.height.nodeValue + 'px'; - } else { - el.height = el.clientHeight; - } - //el.getContext().setCoordsize_() - } - return el; - } - }; - - function onPropertyChange(e) { - var el = e.srcElement; - - switch (e.propertyName) { - case 'width': - el.getContext().clearRect(); - el.style.width = el.attributes.width.nodeValue + 'px'; - // In IE8 this does not trigger onresize. - el.firstChild.style.width = el.clientWidth + 'px'; - break; - case 'height': - el.getContext().clearRect(); - el.style.height = el.attributes.height.nodeValue + 'px'; - el.firstChild.style.height = el.clientHeight + 'px'; - break; - } - } - - function onResize(e) { - var el = e.srcElement; - if (el.firstChild) { - el.firstChild.style.width = el.clientWidth + 'px'; - el.firstChild.style.height = el.clientHeight + 'px'; - } - } - - G_vmlCanvasManager_.init(); - - // precompute "00" to "FF" - var decToHex = []; - for (var i = 0; i < 16; i++) { - for (var j = 0; j < 16; j++) { - decToHex[i * 16 + j] = i.toString(16) + j.toString(16); - } - } - - function createMatrixIdentity() { - return [ - [1, 0, 0], - [0, 1, 0], - [0, 0, 1] - ]; - } - - function matrixMultiply(m1, m2) { - var result = createMatrixIdentity(); - - for (var x = 0; x < 3; x++) { - for (var y = 0; y < 3; y++) { - var sum = 0; - - for (var z = 0; z < 3; z++) { - sum += m1[x][z] * m2[z][y]; - } - - result[x][y] = sum; - } - } - return result; - } - - function copyState(o1, o2) { - o2.fillStyle = o1.fillStyle; - o2.lineCap = o1.lineCap; - o2.lineJoin = o1.lineJoin; - o2.lineWidth = o1.lineWidth; - o2.miterLimit = o1.miterLimit; - o2.shadowBlur = o1.shadowBlur; - o2.shadowColor = o1.shadowColor; - o2.shadowOffsetX = o1.shadowOffsetX; - o2.shadowOffsetY = o1.shadowOffsetY; - o2.strokeStyle = o1.strokeStyle; - o2.globalAlpha = o1.globalAlpha; - o2.font = o1.font; - o2.textAlign = o1.textAlign; - o2.textBaseline = o1.textBaseline; - o2.arcScaleX_ = o1.arcScaleX_; - o2.arcScaleY_ = o1.arcScaleY_; - o2.lineScale_ = o1.lineScale_; - } - - var colorData = { - aliceblue: '#F0F8FF', - antiquewhite: '#FAEBD7', - aquamarine: '#7FFFD4', - azure: '#F0FFFF', - beige: '#F5F5DC', - bisque: '#FFE4C4', - black: '#000000', - blanchedalmond: '#FFEBCD', - blueviolet: '#8A2BE2', - brown: '#A52A2A', - burlywood: '#DEB887', - cadetblue: '#5F9EA0', - chartreuse: '#7FFF00', - chocolate: '#D2691E', - coral: '#FF7F50', - cornflowerblue: '#6495ED', - cornsilk: '#FFF8DC', - crimson: '#DC143C', - cyan: '#00FFFF', - darkblue: '#00008B', - darkcyan: '#008B8B', - darkgoldenrod: '#B8860B', - darkgray: '#A9A9A9', - darkgreen: '#006400', - darkgrey: '#A9A9A9', - darkkhaki: '#BDB76B', - darkmagenta: '#8B008B', - darkolivegreen: '#556B2F', - darkorange: '#FF8C00', - darkorchid: '#9932CC', - darkred: '#8B0000', - darksalmon: '#E9967A', - darkseagreen: '#8FBC8F', - darkslateblue: '#483D8B', - darkslategray: '#2F4F4F', - darkslategrey: '#2F4F4F', - darkturquoise: '#00CED1', - darkviolet: '#9400D3', - deeppink: '#FF1493', - deepskyblue: '#00BFFF', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1E90FF', - firebrick: '#B22222', - floralwhite: '#FFFAF0', - forestgreen: '#228B22', - gainsboro: '#DCDCDC', - ghostwhite: '#F8F8FF', - gold: '#FFD700', - goldenrod: '#DAA520', - grey: '#808080', - greenyellow: '#ADFF2F', - honeydew: '#F0FFF0', - hotpink: '#FF69B4', - indianred: '#CD5C5C', - indigo: '#4B0082', - ivory: '#FFFFF0', - khaki: '#F0E68C', - lavender: '#E6E6FA', - lavenderblush: '#FFF0F5', - lawngreen: '#7CFC00', - lemonchiffon: '#FFFACD', - lightblue: '#ADD8E6', - lightcoral: '#F08080', - lightcyan: '#E0FFFF', - lightgoldenrodyellow: '#FAFAD2', - lightgreen: '#90EE90', - lightgrey: '#D3D3D3', - lightpink: '#FFB6C1', - lightsalmon: '#FFA07A', - lightseagreen: '#20B2AA', - lightskyblue: '#87CEFA', - lightslategray: '#778899', - lightslategrey: '#778899', - lightsteelblue: '#B0C4DE', - lightyellow: '#FFFFE0', - limegreen: '#32CD32', - linen: '#FAF0E6', - magenta: '#FF00FF', - mediumaquamarine: '#66CDAA', - mediumblue: '#0000CD', - mediumorchid: '#BA55D3', - mediumpurple: '#9370DB', - mediumseagreen: '#3CB371', - mediumslateblue: '#7B68EE', - mediumspringgreen: '#00FA9A', - mediumturquoise: '#48D1CC', - mediumvioletred: '#C71585', - midnightblue: '#191970', - mintcream: '#F5FFFA', - mistyrose: '#FFE4E1', - moccasin: '#FFE4B5', - navajowhite: '#FFDEAD', - oldlace: '#FDF5E6', - olivedrab: '#6B8E23', - orange: '#FFA500', - orangered: '#FF4500', - orchid: '#DA70D6', - palegoldenrod: '#EEE8AA', - palegreen: '#98FB98', - paleturquoise: '#AFEEEE', - palevioletred: '#DB7093', - papayawhip: '#FFEFD5', - peachpuff: '#FFDAB9', - peru: '#CD853F', - pink: '#FFC0CB', - plum: '#DDA0DD', - powderblue: '#B0E0E6', - rosybrown: '#BC8F8F', - royalblue: '#4169E1', - saddlebrown: '#8B4513', - salmon: '#FA8072', - sandybrown: '#F4A460', - seagreen: '#2E8B57', - seashell: '#FFF5EE', - sienna: '#A0522D', - skyblue: '#87CEEB', - slateblue: '#6A5ACD', - slategray: '#708090', - slategrey: '#708090', - snow: '#FFFAFA', - springgreen: '#00FF7F', - steelblue: '#4682B4', - tan: '#D2B48C', - thistle: '#D8BFD8', - tomato: '#FF6347', - turquoise: '#40E0D0', - violet: '#EE82EE', - wheat: '#F5DEB3', - whitesmoke: '#F5F5F5', - yellowgreen: '#9ACD32' - }; - - - function getRgbHslContent(styleString) { - var start = styleString.indexOf('(', 3); - var end = styleString.indexOf(')', start + 1); - var parts = styleString.substring(start + 1, end).split(','); - // add alpha if needed - if (parts.length != 4 || styleString.charAt(3) != 'a') { - parts[3] = 1; - } - return parts; - } - - function percent(s) { - return parseFloat(s) / 100; - } - - function clamp(v, min, max) { - return Math.min(max, Math.max(min, v)); - } - - function hslToRgb(parts){ - var r, g, b, h, s, l; - h = parseFloat(parts[0]) / 360 % 360; - if (h < 0) - h++; - s = clamp(percent(parts[1]), 0, 1); - l = clamp(percent(parts[2]), 0, 1); - if (s == 0) { - r = g = b = l; // achromatic - } else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hueToRgb(p, q, h + 1 / 3); - g = hueToRgb(p, q, h); - b = hueToRgb(p, q, h - 1 / 3); - } - - return '#' + decToHex[Math.floor(r * 255)] + - decToHex[Math.floor(g * 255)] + - decToHex[Math.floor(b * 255)]; - } - - function hueToRgb(m1, m2, h) { - if (h < 0) - h++; - if (h > 1) - h--; - - if (6 * h < 1) - return m1 + (m2 - m1) * 6 * h; - else if (2 * h < 1) - return m2; - else if (3 * h < 2) - return m1 + (m2 - m1) * (2 / 3 - h) * 6; - else - return m1; - } - - var processStyleCache = {}; - - function processStyle(styleString) { - if (styleString in processStyleCache) { - return processStyleCache[styleString]; - } - - var str, alpha = 1; - - styleString = String(styleString); - if (styleString.charAt(0) == '#') { - str = styleString; - } else if (/^rgb/.test(styleString)) { - var parts = getRgbHslContent(styleString); - var str = '#', n; - for (var i = 0; i < 3; i++) { - if (parts[i].indexOf('%') != -1) { - n = Math.floor(percent(parts[i]) * 255); - } else { - n = +parts[i]; - } - str += decToHex[clamp(n, 0, 255)]; - } - alpha = +parts[3]; - } else if (/^hsl/.test(styleString)) { - var parts = getRgbHslContent(styleString); - str = hslToRgb(parts); - alpha = parts[3]; - } else { - str = colorData[styleString] || styleString; - } - return processStyleCache[styleString] = {color: str, alpha: alpha}; - } - - var DEFAULT_STYLE = { - style: 'normal', - variant: 'normal', - weight: 'normal', - size: 10, - family: 'sans-serif' - }; - - // Internal text style cache - var fontStyleCache = {}; - - function processFontStyle(styleString) { - if (fontStyleCache[styleString]) { - return fontStyleCache[styleString]; - } - - var el = document.createElement('div'); - var style = el.style; - try { - style.font = styleString; - } catch (ex) { - // Ignore failures to set to invalid font. - } - - return fontStyleCache[styleString] = { - style: style.fontStyle || DEFAULT_STYLE.style, - variant: style.fontVariant || DEFAULT_STYLE.variant, - weight: style.fontWeight || DEFAULT_STYLE.weight, - size: style.fontSize || DEFAULT_STYLE.size, - family: style.fontFamily || DEFAULT_STYLE.family - }; - } - - function getComputedStyle(style, element) { - var computedStyle = {}; - - for (var p in style) { - computedStyle[p] = style[p]; - } - - // Compute the size - var canvasFontSize = parseFloat(element.currentStyle.fontSize), - fontSize = parseFloat(style.size); - - if (typeof style.size == 'number') { - computedStyle.size = style.size; - } else if (style.size.indexOf('px') != -1) { - computedStyle.size = fontSize; - } else if (style.size.indexOf('em') != -1) { - computedStyle.size = canvasFontSize * fontSize; - } else if(style.size.indexOf('%') != -1) { - computedStyle.size = (canvasFontSize / 100) * fontSize; - } else if (style.size.indexOf('pt') != -1) { - computedStyle.size = fontSize / .75; - } else { - computedStyle.size = canvasFontSize; - } - - // Different scaling between normal text and VML text. This was found using - // trial and error to get the same size as non VML text. - computedStyle.size *= 0.981; - - return computedStyle; - } - - function buildStyle(style) { - return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + - style.size + 'px ' + style.family; - } - - var lineCapMap = { - 'butt': 'flat', - 'round': 'round' - }; - - function processLineCap(lineCap) { - return lineCapMap[lineCap] || 'square'; - } - - /** - * This class implements CanvasRenderingContext2D interface as described by - * the WHATWG. - * @param {HTMLElement} canvasElement The element that the 2D context should - * be associated with - */ - function CanvasRenderingContext2D_(canvasElement) { - this.m_ = createMatrixIdentity(); - - this.mStack_ = []; - this.aStack_ = []; - this.currentPath_ = []; - - // Canvas context properties - this.strokeStyle = '#000'; - this.fillStyle = '#000'; - - this.lineWidth = 1; - this.lineJoin = 'miter'; - this.lineCap = 'butt'; - this.miterLimit = Z * 1; - this.globalAlpha = 1; - this.font = '10px sans-serif'; - this.textAlign = 'left'; - this.textBaseline = 'alphabetic'; - this.canvas = canvasElement; - - var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' + - canvasElement.clientHeight + 'px;overflow:hidden;position:absolute'; - var el = canvasElement.ownerDocument.createElement('div'); - el.style.cssText = cssText; - canvasElement.appendChild(el); - - var overlayEl = el.cloneNode(false); - // Use a non transparent background. - overlayEl.style.backgroundColor = 'red'; - overlayEl.style.filter = 'alpha(opacity=0)'; - canvasElement.appendChild(overlayEl); - - this.element_ = el; - this.arcScaleX_ = 1; - this.arcScaleY_ = 1; - this.lineScale_ = 1; - } - - var contextPrototype = CanvasRenderingContext2D_.prototype; - contextPrototype.clearRect = function() { - if (this.textMeasureEl_) { - this.textMeasureEl_.removeNode(true); - this.textMeasureEl_ = null; - } - this.element_.innerHTML = ''; - }; - - contextPrototype.beginPath = function() { - // TODO: Branch current matrix so that save/restore has no effect - // as per safari docs. - this.currentPath_ = []; - }; - - contextPrototype.moveTo = function(aX, aY) { - var p = getCoords(this, aX, aY); - this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); - this.currentX_ = p.x; - this.currentY_ = p.y; - }; - - contextPrototype.lineTo = function(aX, aY) { - var p = getCoords(this, aX, aY); - this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); - - this.currentX_ = p.x; - this.currentY_ = p.y; - }; - - contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, - aCP2x, aCP2y, - aX, aY) { - var p = getCoords(this, aX, aY); - var cp1 = getCoords(this, aCP1x, aCP1y); - var cp2 = getCoords(this, aCP2x, aCP2y); - bezierCurveTo(this, cp1, cp2, p); - }; - - // Helper function that takes the already fixed cordinates. - function bezierCurveTo(self, cp1, cp2, p) { - self.currentPath_.push({ - type: 'bezierCurveTo', - cp1x: cp1.x, - cp1y: cp1.y, - cp2x: cp2.x, - cp2y: cp2.y, - x: p.x, - y: p.y - }); - self.currentX_ = p.x; - self.currentY_ = p.y; - } - - contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { - // the following is lifted almost directly from - // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes - - var cp = getCoords(this, aCPx, aCPy); - var p = getCoords(this, aX, aY); - - var cp1 = { - x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), - y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) - }; - var cp2 = { - x: cp1.x + (p.x - this.currentX_) / 3.0, - y: cp1.y + (p.y - this.currentY_) / 3.0 - }; - - bezierCurveTo(this, cp1, cp2, p); - }; - - contextPrototype.arc = function(aX, aY, aRadius, - aStartAngle, aEndAngle, aClockwise) { - aRadius *= Z; - var arcType = aClockwise ? 'at' : 'wa'; - - var xStart = aX + mc(aStartAngle) * aRadius - Z2; - var yStart = aY + ms(aStartAngle) * aRadius - Z2; - - var xEnd = aX + mc(aEndAngle) * aRadius - Z2; - var yEnd = aY + ms(aEndAngle) * aRadius - Z2; - - // IE won't render arches drawn counter clockwise if xStart == xEnd. - if (xStart == xEnd && !aClockwise) { - xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something - // that can be represented in binary - } - - var p = getCoords(this, aX, aY); - var pStart = getCoords(this, xStart, yStart); - var pEnd = getCoords(this, xEnd, yEnd); - - this.currentPath_.push({type: arcType, - x: p.x, - y: p.y, - radius: aRadius, - xStart: pStart.x, - yStart: pStart.y, - xEnd: pEnd.x, - yEnd: pEnd.y}); - - }; - - contextPrototype.rect = function(aX, aY, aWidth, aHeight) { - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - }; - - contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { - var oldPath = this.currentPath_; - this.beginPath(); - - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - this.stroke(); - - this.currentPath_ = oldPath; - }; - - contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { - var oldPath = this.currentPath_; - this.beginPath(); - - this.moveTo(aX, aY); - this.lineTo(aX + aWidth, aY); - this.lineTo(aX + aWidth, aY + aHeight); - this.lineTo(aX, aY + aHeight); - this.closePath(); - this.fill(); - - this.currentPath_ = oldPath; - }; - - contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { - var gradient = new CanvasGradient_('gradient'); - gradient.x0_ = aX0; - gradient.y0_ = aY0; - gradient.x1_ = aX1; - gradient.y1_ = aY1; - return gradient; - }; - - contextPrototype.createRadialGradient = function(aX0, aY0, aR0, - aX1, aY1, aR1) { - var gradient = new CanvasGradient_('gradientradial'); - gradient.x0_ = aX0; - gradient.y0_ = aY0; - gradient.r0_ = aR0; - gradient.x1_ = aX1; - gradient.y1_ = aY1; - gradient.r1_ = aR1; - return gradient; - }; - - contextPrototype.drawImage = function(image, var_args) { - var dx, dy, dw, dh, sx, sy, sw, sh; - - // to find the original width we overide the width and height - var oldRuntimeWidth = image.runtimeStyle.width; - var oldRuntimeHeight = image.runtimeStyle.height; - image.runtimeStyle.width = 'auto'; - image.runtimeStyle.height = 'auto'; - - // get the original size - var w = image.width; - var h = image.height; - - // and remove overides - image.runtimeStyle.width = oldRuntimeWidth; - image.runtimeStyle.height = oldRuntimeHeight; - - if (arguments.length == 3) { - dx = arguments[1]; - dy = arguments[2]; - sx = sy = 0; - sw = dw = w; - sh = dh = h; - } else if (arguments.length == 5) { - dx = arguments[1]; - dy = arguments[2]; - dw = arguments[3]; - dh = arguments[4]; - sx = sy = 0; - sw = w; - sh = h; - } else if (arguments.length == 9) { - sx = arguments[1]; - sy = arguments[2]; - sw = arguments[3]; - sh = arguments[4]; - dx = arguments[5]; - dy = arguments[6]; - dw = arguments[7]; - dh = arguments[8]; - } else { - throw Error('Invalid number of arguments'); - } - - var d = getCoords(this, dx, dy); - - var w2 = sw / 2; - var h2 = sh / 2; - - var vmlStr = []; - - var W = 10; - var H = 10; - - // For some reason that I've now forgotten, using divs didn't work - vmlStr.push(' ' , - '', - ''); - - this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); - }; - - contextPrototype.stroke = function(aFill) { - var lineStr = []; - var lineOpen = false; - - var W = 10; - var H = 10; - - lineStr.push(''); - - if (!aFill) { - appendStroke(this, lineStr); - } else { - appendFill(this, lineStr, min, max); - } - - lineStr.push(''); - - this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); - }; - - function appendStroke(ctx, lineStr) { - var a = processStyle(ctx.strokeStyle); - var color = a.color; - var opacity = a.alpha * ctx.globalAlpha; - var lineWidth = ctx.lineScale_ * ctx.lineWidth; - - // VML cannot correctly render a line if the width is less than 1px. - // In that case, we dilute the color to make the line look thinner. - if (lineWidth < 1) { - opacity *= lineWidth; - } - - lineStr.push( - '' - ); - } - - function appendFill(ctx, lineStr, min, max) { - var fillStyle = ctx.fillStyle; - var arcScaleX = ctx.arcScaleX_; - var arcScaleY = ctx.arcScaleY_; - var width = max.x - min.x; - var height = max.y - min.y; - if (fillStyle instanceof CanvasGradient_) { - // TODO: Gradients transformed with the transformation matrix. - var angle = 0; - var focus = {x: 0, y: 0}; - - // additional offset - var shift = 0; - // scale factor for offset - var expansion = 1; - - if (fillStyle.type_ == 'gradient') { - var x0 = fillStyle.x0_ / arcScaleX; - var y0 = fillStyle.y0_ / arcScaleY; - var x1 = fillStyle.x1_ / arcScaleX; - var y1 = fillStyle.y1_ / arcScaleY; - var p0 = getCoords(ctx, x0, y0); - var p1 = getCoords(ctx, x1, y1); - var dx = p1.x - p0.x; - var dy = p1.y - p0.y; - angle = Math.atan2(dx, dy) * 180 / Math.PI; - - // The angle should be a non-negative number. - if (angle < 0) { - angle += 360; - } - - // Very small angles produce an unexpected result because they are - // converted to a scientific notation string. - if (angle < 1e-6) { - angle = 0; - } - } else { - var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_); - focus = { - x: (p0.x - min.x) / width, - y: (p0.y - min.y) / height - }; - - width /= arcScaleX * Z; - height /= arcScaleY * Z; - var dimension = m.max(width, height); - shift = 2 * fillStyle.r0_ / dimension; - expansion = 2 * fillStyle.r1_ / dimension - shift; - } - - // We need to sort the color stops in ascending order by offset, - // otherwise IE won't interpret it correctly. - var stops = fillStyle.colors_; - stops.sort(function(cs1, cs2) { - return cs1.offset - cs2.offset; - }); - - var length = stops.length; - var color1 = stops[0].color; - var color2 = stops[length - 1].color; - var opacity1 = stops[0].alpha * ctx.globalAlpha; - var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; - - var colors = []; - for (var i = 0; i < length; i++) { - var stop = stops[i]; - colors.push(stop.offset * expansion + shift + ' ' + stop.color); - } - - // When colors attribute is used, the meanings of opacity and o:opacity2 - // are reversed. - lineStr.push(''); - } else if (fillStyle instanceof CanvasPattern_) { - if (width && height) { - var deltaLeft = -min.x; - var deltaTop = -min.y; - lineStr.push(''); - } - } else { - var a = processStyle(ctx.fillStyle); - var color = a.color; - var opacity = a.alpha * ctx.globalAlpha; - lineStr.push(''); - } - } - - contextPrototype.fill = function() { - this.stroke(true); - }; - - contextPrototype.closePath = function() { - this.currentPath_.push({type: 'close'}); - }; - - function getCoords(ctx, aX, aY) { - var m = ctx.m_; - return { - x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, - y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 - }; - }; - - contextPrototype.save = function() { - var o = {}; - copyState(this, o); - this.aStack_.push(o); - this.mStack_.push(this.m_); - this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); - }; - - contextPrototype.restore = function() { - if (this.aStack_.length) { - copyState(this.aStack_.pop(), this); - this.m_ = this.mStack_.pop(); - } - }; - - function matrixIsFinite(m) { - return isFinite(m[0][0]) && isFinite(m[0][1]) && - isFinite(m[1][0]) && isFinite(m[1][1]) && - isFinite(m[2][0]) && isFinite(m[2][1]); - } - - function setM(ctx, m, updateLineScale) { - if (!matrixIsFinite(m)) { - return; - } - ctx.m_ = m; - - if (updateLineScale) { - // Get the line scale. - // Determinant of this.m_ means how much the area is enlarged by the - // transformation. So its square root can be used as a scale factor - // for width. - var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; - ctx.lineScale_ = sqrt(abs(det)); - } - } - - contextPrototype.translate = function(aX, aY) { - var m1 = [ - [1, 0, 0], - [0, 1, 0], - [aX, aY, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), false); - }; - - contextPrototype.rotate = function(aRot) { - var c = mc(aRot); - var s = ms(aRot); - - var m1 = [ - [c, s, 0], - [-s, c, 0], - [0, 0, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), false); - }; - - contextPrototype.scale = function(aX, aY) { - this.arcScaleX_ *= aX; - this.arcScaleY_ *= aY; - var m1 = [ - [aX, 0, 0], - [0, aY, 0], - [0, 0, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), true); - }; - - contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { - var m1 = [ - [m11, m12, 0], - [m21, m22, 0], - [dx, dy, 1] - ]; - - setM(this, matrixMultiply(m1, this.m_), true); - }; - - contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { - var m = [ - [m11, m12, 0], - [m21, m22, 0], - [dx, dy, 1] - ]; - - setM(this, m, true); - }; - - /** - * The text drawing function. - * The maxWidth argument isn't taken in account, since no browser supports - * it yet. - */ - contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { - var m = this.m_, - delta = 1000, - left = 0, - right = delta, - offset = {x: 0, y: 0}, - lineStr = []; - - var fontStyle = getComputedStyle(processFontStyle(this.font), - this.element_); - - var fontStyleString = buildStyle(fontStyle); - - var elementStyle = this.element_.currentStyle; - var textAlign = this.textAlign.toLowerCase(); - switch (textAlign) { - case 'left': - case 'center': - case 'right': - break; - case 'end': - textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; - break; - case 'start': - textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; - break; - default: - textAlign = 'left'; - } - - // 1.75 is an arbitrary number, as there is no info about the text baseline - switch (this.textBaseline) { - case 'hanging': - case 'top': - offset.y = fontStyle.size / 1.75; - break; - case 'middle': - break; - default: - case null: - case 'alphabetic': - case 'ideographic': - case 'bottom': - offset.y = -fontStyle.size / 2.25; - break; - } - - switch(textAlign) { - case 'right': - left = delta; - right = 0.05; - break; - case 'center': - left = right = delta / 2; - break; - } - - var d = getCoords(this, x + offset.x, y + offset.y); - - lineStr.push(''); - - if (stroke) { - appendStroke(this, lineStr); - } else { - // TODO: Fix the min and max params. - appendFill(this, lineStr, {x: -left, y: 0}, - {x: right, y: fontStyle.size}); - } - - var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + - m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; - - var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); - - lineStr.push('', - '', - ''); - - this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); - }; - - contextPrototype.fillText = function(text, x, y, maxWidth) { - this.drawText_(text, x, y, maxWidth, false); - }; - - contextPrototype.strokeText = function(text, x, y, maxWidth) { - this.drawText_(text, x, y, maxWidth, true); - }; - - contextPrototype.measureText = function(text) { - if (!this.textMeasureEl_) { - var s = ''; - this.element_.insertAdjacentHTML('beforeEnd', s); - this.textMeasureEl_ = this.element_.lastChild; - } - var doc = this.element_.ownerDocument; - this.textMeasureEl_.innerHTML = ''; - this.textMeasureEl_.style.font = this.font; - // Don't use innerHTML or innerText because they allow markup/whitespace. - this.textMeasureEl_.appendChild(doc.createTextNode(text)); - return {width: this.textMeasureEl_.offsetWidth}; - }; - - /******** STUBS ********/ - contextPrototype.clip = function() { - // TODO: Implement - }; - - contextPrototype.arcTo = function() { - // TODO: Implement - }; - - contextPrototype.createPattern = function(image, repetition) { - return new CanvasPattern_(image, repetition); - }; - - // Gradient / Pattern Stubs - function CanvasGradient_(aType) { - this.type_ = aType; - this.x0_ = 0; - this.y0_ = 0; - this.r0_ = 0; - this.x1_ = 0; - this.y1_ = 0; - this.r1_ = 0; - this.colors_ = []; - } - - CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { - aColor = processStyle(aColor); - this.colors_.push({offset: aOffset, - color: aColor.color, - alpha: aColor.alpha}); - }; - - function CanvasPattern_(image, repetition) { - assertImageIsValid(image); - switch (repetition) { - case 'repeat': - case null: - case '': - this.repetition_ = 'repeat'; - break - case 'repeat-x': - case 'repeat-y': - case 'no-repeat': - this.repetition_ = repetition; - break; - default: - throwException('SYNTAX_ERR'); - } - - this.src_ = image.src; - this.width_ = image.width; - this.height_ = image.height; - } - - function throwException(s) { - throw new DOMException_(s); - } - - function assertImageIsValid(img) { - if (!img || img.nodeType != 1 || img.tagName != 'IMG') { - throwException('TYPE_MISMATCH_ERR'); - } - if (img.readyState != 'complete') { - throwException('INVALID_STATE_ERR'); - } - } - - function DOMException_(s) { - this.code = this[s]; - this.message = s +': DOM Exception ' + this.code; - } - var p = DOMException_.prototype = new Error; - p.INDEX_SIZE_ERR = 1; - p.DOMSTRING_SIZE_ERR = 2; - p.HIERARCHY_REQUEST_ERR = 3; - p.WRONG_DOCUMENT_ERR = 4; - p.INVALID_CHARACTER_ERR = 5; - p.NO_DATA_ALLOWED_ERR = 6; - p.NO_MODIFICATION_ALLOWED_ERR = 7; - p.NOT_FOUND_ERR = 8; - p.NOT_SUPPORTED_ERR = 9; - p.INUSE_ATTRIBUTE_ERR = 10; - p.INVALID_STATE_ERR = 11; - p.SYNTAX_ERR = 12; - p.INVALID_MODIFICATION_ERR = 13; - p.NAMESPACE_ERR = 14; - p.INVALID_ACCESS_ERR = 15; - p.VALIDATION_ERR = 16; - p.TYPE_MISMATCH_ERR = 17; - - // set up externs - G_vmlCanvasManager = G_vmlCanvasManager_; - CanvasRenderingContext2D = CanvasRenderingContext2D_; - CanvasGradient = CanvasGradient_; - CanvasPattern = CanvasPattern_; - DOMException = DOMException_; -})(); - -} // if \ No newline at end of file diff --git a/app/assets/javascripts/Jit/graphsettings-event-handlers.js b/app/assets/javascripts/Jit/graphsettings-event-handlers.js deleted file mode 100644 index ba18d621..00000000 --- a/app/assets/javascripts/Jit/graphsettings-event-handlers.js +++ /dev/null @@ -1,588 +0,0 @@ -function selectEdgeOnClickHandler(adj, e) { - if (Mconsole.busy) return; - - // catch right click on mac, which is often like ctrl+click - if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) { - selectEdgeOnRightClickHandler(adj, e) - return; - } - - if (synapseWasDoubleClicked()) { - synapseDoubleClickHandler(adj, e); - return; - } - - var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(adj); - if (edgeIsSelected == -1) edgeIsSelected = false; - else if (edgeIsSelected != -1) edgeIsSelected = true; - - if (edgeIsSelected && e.shiftKey) { - //deselecting an edge with shift - deselectEdge(adj); - } else if (!edgeIsSelected && e.shiftKey) { - //selecting an edge with shift - selectEdge(adj); - } else if (edgeIsSelected && !e.shiftKey) { - //deselecting an edge without shift - unselect all - deselectAllEdges(); - } else if (!edgeIsSelected && !e.shiftKey) { - //selecting an edge without shift - unselect all but new one - deselectAllEdges(); - selectEdge(adj); - } - - Mconsole.plot(); -} //selectEdgeOnClickHandler - -function selectEdgeOnRightClickHandler(adj, 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 (Mconsole.busy) return; - - 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 = '
    '; - - if (userid != null) menustring += '
  • Delete
    • '; - if (mapid && userid != null) menustring += '
  • Remove from map
    • '; - menustring += '
  • Hide until refresh
    • '; - if (userid) { - var options = '
    • commons
      • \ -
    • public
      • \ -
    • private
      • \ -
    '; - - menustring += '
  • Change permissions' + options + '
    • '; - } - - menustring += '
'; - rightclickmenu.innerHTML = menustring; - - // position the menu where the click happened - $(rightclickmenu).css({ - left: e.clientX, - top: e.clientY - }); - //add the menu to the page - $('#center-container').append(rightclickmenu); - - - // attach events to clicks on the list items - - // delete the selected things from the database - $('.rc-delete').click(function () { - $('.rightclickmenu').remove(); - var n = MetamapsModel.selectedNodes.length; - var e = MetamapsModel.selectedEdges.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 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) { - deleteSelectedEdges(); - deleteSelectedNodes(); - } - }); - - // remove the selected things from the map - $('.rc-remove').click(function () { - $('.rightclickmenu').remove(); - removeSelectedEdges(); - removeSelectedNodes(); - }); - - // hide selected nodes and synapses until refresh - $('.rc-hide').click(function () { - $('.rightclickmenu').remove(); - hideSelectedEdges(); - 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' - updateSelectedPermissions($(this).text()); - }); - -} //selectEdgeOnRightClickHandler - - -function synapseDoubleClickHandler(adj, e) { - editEdge(adj, e); -} - -/* - * Returns a boolean saying if the synapse was double clicked in our understanding of the word - */ -function synapseWasDoubleClicked() { - //grab the timestamp of the click - var storedTime = MetamapsModel.lastSynapseClick; - var now = Date.now(); //not compatible with IE8 FYI - MetamapsModel.lastSynapseClick = now; - - if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) { - return true; - } else { - return false; - } -} //synapseWasDoubleClicked; - -function nodeDoubleClickHandler(node, e) { - openNodeShowcard(node); -} - -function enterKeyHandler(event) { - - //var selectedNodesCopy = MetamapsModel.selectedNodes.slice(0); - //var len = selectedNodesCopy.length; - //for (var i = 0; i < len; i += 1) { - // n = selectedNodesCopy[i]; - // keepFromCommons(n); - //}//for - //Mconsole.plot(); -} //enterKeyHandler - -function escKeyHandler() { - deselectAllEdges(); - deselectAllNodes(); -} //escKeyHandler - -/* - * Make a node "in the commons" (with a green circle) lose its - * green circle so it stays on the console/map/... - */ -function keepFromCommons(event, id) { - if (userid == null) { - return; - } - - $('#topic_addSynapse').val("false"); - $('#topic_x').val(0); - $('#topic_y').val(0); - $('#topic_grabTopic').val(id); - $('.new_topic').submit(); - - event.preventDefault(); - event.stopPropagation(); - return false; -} //doubleClickNodeHandler - -/* - * Returns a boolean saying if the node was double clicked in our understanding of the word - */ -function nodeWasDoubleClicked() { - //grab the timestamp of the click - var storedTime = MetamapsModel.lastNodeClick; - var now = Date.now(); //not compatible with IE8 FYI - MetamapsModel.lastNodeClick = now; - - if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) { - return true; - } else { - return false; - } -} //nodeWasDoubleClicked; - -function selectNodeOnClickHandler(node, e) { - if (Mconsole.busy) return; - - // catch right click on mac, which is often like ctrl+click - if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) { - selectNodeOnRightClickHandler(node, e) - return; - } - - // if on a topic page, let alt+click center you on a new topic - if (!mapid && e.altKey) { - centerOn(node.id); - return; - } - - var check = nodeWasDoubleClicked(); - if (check) { - nodeDoubleClickHandler(node, e); - return; - } else { - // wait a certain length of time, then check again, then run this code - setTimeout(function () { - if (!nodeWasDoubleClicked()) { - if (!e.shiftKey) { - Mconsole.graph.eachNode(function (n) { - if (n.id != node.id) { - deselectNode(n); - } - }); - } - if (node.selected) { - deselectNode(node); - } else { - selectNode(node); - } - //trigger animation to final styles - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 500 - }); - Mconsole.plot(); - } - }, MetamapsModel.DOUBLE_CLICK_TOLERANCE); - } -} //selectNodeOnClickHandler - -function selectNodeOnRightClickHandler(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 (Mconsole.busy) return; - - selectNode(node); - - // 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 = '
    '; - - if (userid != null) menustring += '
  • Delete
    • '; - if (mapid && userid != null) menustring += '
  • Remove from map
    • '; - menustring += '
  • Hide until refresh
    • '; - - if (!mapid) menustring += '
  • Center this topic
    • '; - menustring += '
  • Open in new tab
    • '; - if (userid) { - var options = '
    • commons
      • \ -
    • public
      • \ -
    • private
      • \ -
    '; - - menustring += '
  • Change permissions' + options + '
    • '; - } - - menustring += '
'; - rightclickmenu.innerHTML = menustring; - - // position the menu where the click happened - $(rightclickmenu).css({ - left: e.clientX, - top: e.clientY - }); - //add the menu to the page - $('#center-container').append(rightclickmenu); - - - // attach events to clicks on the list items - - // delete the selected things from the database - $('.rc-delete').click(function () { - $('.rightclickmenu').remove(); - var n = MetamapsModel.selectedNodes.length; - var e = MetamapsModel.selectedEdges.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 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) { - deleteSelectedEdges(); - deleteSelectedNodes(); - } - }); - - // remove the selected things from the map - $('.rc-remove').click(function () { - $('.rightclickmenu').remove(); - removeSelectedEdges(); - removeSelectedNodes(); - }); - - // hide selected nodes and synapses until refresh - $('.rc-hide').click(function () { - $('.rightclickmenu').remove(); - hideSelectedEdges(); - hideSelectedNodes(); - }); - - // when in radial, center on the topic you picked - $('.rc-center').click(function () { - $('.rightclickmenu').remove(); - 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' - updateSelectedPermissions($(this).text()); - }); - -} //selectNodeOnRightClickHandler - -function canvasDoubleClickHandler(canvasLoc, e) { - - //grab the location and timestamp of the click - var storedTime = MetamapsModel.lastCanvasClick; - var now = Date.now(); //not compatible with IE8 FYI - MetamapsModel.lastCanvasClick = now; - - // if on a public map, disable topic creation - if (userid && (mapperm || !mapid)) { - if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) { - //pop up node creation :) - $('#topic_grabTopic').val("null"); - $('#topic_addSynapse').val("false"); - $('#new_topic').css('left', e.clientX + "px"); - $('#new_topic').css('top', e.clientY + "px"); - $('#topic_x').val(canvasLoc.x); - $('#topic_y').val(canvasLoc.y); - $('#new_topic').fadeIn('fast'); - $('#topic_name').typeahead('setQuery', '').focus(); - return; - } - } - - if (!MetamapsModel.didPan) { - $('#new_topic').fadeOut('fast'); - $('#new_synapse').fadeOut('fast'); - $('.rightclickmenu').remove(); - // reset the draw synapse positions to false - MetamapsModel.synapseStartCoord = false; - MetamapsModel.synapseEndCoord = false; - deselectAllNodes(); - tempInit = false; - tempNode = null; - tempNode2 = null; - Mconsole.plot(); - } -} //canvasDoubleClickHandler - -function handleSelectionBeforeDragging(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 (MetamapsModel.selectedNodes.length == 0) { - selectNode(node); - return 'deselect'; - } - if (MetamapsModel.selectedNodes.indexOf(node) == -1) { - if (e.shiftKey) { - selectNode(node); - return 'nothing'; - } else { - return 'only-drag-this-one'; - } - } - return 'nothing'; //case 4? -} - -function onDragMoveTopicHandler(node, eventInfo, e) { - if (node && !node.nodeFrom) { - $('#new_synapse').fadeOut('fast'); - $('#new_topic').fadeOut('fast'); - var pos = eventInfo.getPos(); - var newPosComplex = new $jit.Complex(pos.x, pos.y); - // if it's a left click, or a touch, move the node - if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) { - //if the node dragged isn't already selected, select it - var whatToDo = handleSelectionBeforeDragging(node, e); - if (whatToDo == 'only-drag-this-one' || whatToDo == 'deselect') { - if (gType == "centered") { - 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 { - node.setPos(newPosComplex, 'start'); - node.setPos(newPosComplex, 'current'); - node.setPos(newPosComplex, 'end'); - node.setData('xloc', pos.x); - node.setData('yloc', pos.y); - } - } else { - var len = MetamapsModel.selectedNodes.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 = MetamapsModel.selectedNodes[i]; - if (gType == "centered") { - xOffset[i] = n.pos.toComplex().x - node.pos.toComplex().x; - yOffset[i] = n.pos.toComplex().y - node.pos.toComplex().y; - } else { - 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 = MetamapsModel.selectedNodes[i]; - if (gType == "centered") { - var x = pos.x + xOffset[i]; - var y = pos.y + yOffset[i]; - var rho = Math.sqrt(x * x + y * y); - var theta = Math.atan2(y, x); - n.pos.setp(theta, rho); - } else { - newPosComplex = new $jit.Complex(pos.x + xOffset[i], pos.y + yOffset[i]); - n.setPos(newPosComplex, 'start'); - n.setPos(newPosComplex, 'current'); - n.setPos(newPosComplex, 'end'); - n.setData('xloc', pos.x + xOffset[i]); - n.setData('yloc', pos.y + yOffset[i]); - } - } //for - } //if - - if (whatToDo == 'deselect') { - deselectNode(node); - } - dragged = node.id; - Mconsole.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) && userid != null) { - - // if on a public map, disable synapse creation - if (mapid && !mapperm) return; - - if (tempInit == false) { - tempNode = node; - tempInit = true; - // set the draw synapse start position - MetamapsModel.synapseStartCoord = { - x: node.pos.getc().x, - y: node.pos.getc().y - }; - } - // - temp = eventInfo.getNode(); - if (temp != false && temp.id != node.id) { // this means a Node has been returned - tempNode2 = temp; - - // set the draw synapse end position - MetamapsModel.synapseEndCoord = { - x: temp.pos.getc().x, - y: temp.pos.getc().y - }; - - Mconsole.plot(); - - // before making the highlighted one bigger, make sure all the others are regular size - Mconsole.graph.eachNode(function (n) { - n.setData('dim', 25, 'current'); - }); - temp.setData('dim', 35, 'current'); - Mconsole.fx.plotNode(tempNode, Mconsole.canvas); - Mconsole.fx.plotNode(temp, Mconsole.canvas); - } else if (!temp) { - tempNode2 = null; - Mconsole.graph.eachNode(function (n) { - n.setData('dim', 25, 'current'); - }); - //pop up node creation :) - $('#topic_grabTopic').val("null"); - var myX = e.clientX - 110; - var myY = e.clientY - 30; - $('#new_topic').css('left', myX + "px"); - $('#new_topic').css('top', myY + "px"); - $('#new_synapse').css('left', myX + "px"); - $('#new_synapse').css('top', myY + "px"); - $('#topic_x').val(eventInfo.getPos().x); - $('#topic_y').val(eventInfo.getPos().y); - // set the draw synapse end position - MetamapsModel.synapseEndCoord = { - x: eventInfo.getPos().x, - y: eventInfo.getPos().y - }; - Mconsole.plot(); - Mconsole.fx.plotNode(tempNode, Mconsole.canvas); - } - } - } -} - -var lastDist = 0; - -function getDistance(p1, p2) { - return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2)); -} - -function touchPanZoomHandler(eventInfo, e) { - if (e.touches.length == 1) { - var thispos = touchPos, - currentPos = eventInfo.getPos(), - canvas = Mconsole.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; - touchPos = currentPos; - Mconsole.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 = getDistance({ - x: touch1.clientX, - y: touch1.clientY - }, { - x: touch2.clientX, - y: touch2.clientY - }); - - if (!lastDist) { - lastDist = dist; - } - - var scale = dist / lastDist; - - console.log(scale); - - if (8 >= Mconsole.canvas.scaleOffsetX * scale && Mconsole.canvas.scaleOffsetX * scale >= 1) { - Mconsole.canvas.scale(scale, scale); - } - if (Mconsole.canvas.scaleOffsetX < 0.5) { - Mconsole.canvas.viz.labels.hideLabels(true); - } else if (Mconsole.canvas.scaleOffsetX > 0.5) { - Mconsole.canvas.viz.labels.hideLabels(false); - } - lastDist = dist; - } - -} \ No newline at end of file diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js deleted file mode 100644 index 5877e47b..00000000 --- a/app/assets/javascripts/Jit/graphsettings-model.js +++ /dev/null @@ -1,66 +0,0 @@ -/* - * @file - * This file holds the Model object that is referenced in other graphsettings - * files. It lists selected nodes, selected edges, and stores data about - * double clicks on the canvas - */ - -var MetamapsModel = new Object(); - -MetamapsModel.embed = false; - -// if you're on a map, this will be an object that has a reference to each user that has loaded the map, and whether they are -// in realtime or not -MetamapsModel.mappersOnMap = {}; - - -MetamapsModel.metacodeScrollerInit = false; // indicates whether the scrollbar in the custom metacode set space has been init - -MetamapsModel.selectedMetacodeSet = null; -MetamapsModel.selectedMetacodeSetIndex = null; - -MetamapsModel.selectedMetacodeNames = new Array(); -MetamapsModel.newSelectedMetacodeNames = new Array(); - -MetamapsModel.selectedMetacodes = new Array(); -MetamapsModel.newSelectedMetacodes = new Array(); - -//array of all selected edges, same for nodes -MetamapsModel.selectedEdges = new Array(); -MetamapsModel.selectedNodes = new Array(); - -//this stores a value that indicates whether the user panned or simply clicked without panning -// used for purposes of knowing whether to close the open card or not (don't if panned) -MetamapsModel.didPan = false; - -//is any showcard open right now? which one? -MetamapsModel.showcardInUse = null; -MetamapsModel.widthOfLabel = null; - -//is an edge card open right now? which one (the id)? -MetamapsModel.edgecardInUse = null; - -//is the mouse hovering over an edge? which one? -MetamapsModel.edgeHoveringOver = false; - -//coordinates of shift click for using box select -MetamapsModel.boxStartCoordinates = false; -MetamapsModel.boxEndCoordinates = false; - -//coordinates for drawing edge that's not created yet -MetamapsModel.synapseStartCoord = false; -MetamapsModel.synapseEndCoord = false; - -//double clicking of nodes or canvas -MetamapsModel.lastSynapseClick = 0; -MetamapsModel.lastNodeClick = 0; -MetamapsModel.lastCanvasClick = 0; -MetamapsModel.DOUBLE_CLICK_TOLERANCE = 300; - -//pop-up permission editors timers -MetamapsModel.edgePermTimer1 = null; -MetamapsModel.edgePermTimer2 = null; -MetamapsModel.edgePermSliding = false; -MetamapsModel.topicPermTimer1 = null; -MetamapsModel.topicPermTimer2 = null; -MetamapsModel.topicPermSliding = false; diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js deleted file mode 100644 index 2593586c..00000000 --- a/app/assets/javascripts/Jit/graphsettings.js +++ /dev/null @@ -1,606 +0,0 @@ -/* - * @file - * This function defines all settings and event callbacks for the JIT graph. Some are found in other files - * First is the common settings (the same as arranged or chaotic) - * Then if it's a centred graph additional settings are added. - */ - -function graphSettings(type, embed) { - var t = { - //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 - }, - // 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: '#222222', - type: 'customEdge', - lineWidth: 2, - alpha: 0.4 - }, - //Native canvas text styling - Label: { - type: 'Native', //Native or HTML - size: 20, - family: 'arial', - textBaseline: 'hanging', - color: '#DDD' - //style: 'bold' - }, - //Add Tips - Tips: { - enable: false, - onShow: function (tip, node) {} - }, - // Add node events - Events: { - enable: true, - enableForEdges: true, - onMouseMove: function (node, eventInfo, e) { - onMouseMoveHandler(node, eventInfo, e); - }, - //Update node positions when dragged - onDragMove: function (node, eventInfo, e) { - onDragMoveTopicHandler(node, eventInfo, e); - }, - onDragEnd: function (node, eventInfo, e) { - onDragEndTopicHandler(node, eventInfo, e, false); - }, - onDragCancel: function (node, eventInfo, e) { - 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 - //Mconsole.events.onMouseDown(e, null, eventInfo); - Mconsole.events.touched = true; - touchPos = eventInfo.getPos(); - var canvas = Mconsole.canvas, - ox = canvas.translateOffsetX; - oy = canvas.translateOffsetY, - sx = canvas.scaleOffsetX, - sy = canvas.scaleOffsetY; - touchPos.x *= sx; - touchPos.y *= sy; - touchPos.x += ox; - touchPos.y += oy; - - touchDragNode = node; - }, - //Implement the same handler for touchscreens - onTouchMove: function (node, eventInfo, e) { - if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e); - else { - touchPanZoomHandler(eventInfo, e); - Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse)); - } - }, - //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) { - if (MetamapsModel.boxStartCoordinates) { - Mconsole.busy = false; - MetamapsModel.boxEndCoordinates = eventInfo.getPos(); - selectNodesWithBox(); - return; - } - - if (e.target.id != "infovis-canvas") return false; - - //clicking on a edge, node, or clicking on blank part of canvas? - if (node.nodeFrom) { - selectEdgeOnClickHandler(node, e); - } else if (node && !node.nodeFrom) { - selectNodeOnClickHandler(node, e); - } else { - //topic and synapse editing cards - if (!MetamapsModel.didPan) { - hideCards(); - } - canvasDoubleClickHandler(eventInfo.getPos(), e); - } //if - }, - onRightClick: function (node, eventInfo, e) { - e.preventDefault(); - e.stopPropagation(); - - if (node && !node.nodeFrom) { - selectNodeOnRightClickHandler(node, e); - } else if (node && node.nodeFrom) { // the variable 'node' is actually an edge/adjacency - // open right click menu - selectEdgeOnRightClickHandler(node, e); - } else { - // right click on open canvas, options here? - } - } - }, - //Number of iterations for the FD algorithm - iterations: 200, - //Edge length - levelDistance: 200 - }; - - if (embed) { - t.Edge.type = 'customEdgeEmbed'; - } - - if (type == "centered") { - t.background = { - CanvasStyles: { - strokeStyle: '#333', - lineWidth: 1.5 - } - }; - t.levelDistance = 280; - t.Events.enableForEdges = true; - t.Events.onDragEnd = function (node, eventInfo, e) { - //different because we can't go realtime - onDragEndTopicHandler(node, eventInfo, e, false); - }; - t.Events.onDragCancel = function (node, eventInfo, e) { - //different because we're centred - onDragCancelHandler(node, eventInfo, e, true); - }; - } //if - - return t; -} //graphSettings - -function hideCards() { - $('#edit_synapse').hide(); - MetamapsModel.edgecardInUse = null; - hideCurrentCard(); - // delete right click menu - $('.rightclickmenu').remove(); -} - -// defining code to draw edges with arrows pointing in one direction -var 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 = "#222222"; - ctx.lineWidth = 2; - ctx.globalAlpha = 0.4; - } - 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(); -}; - -// defining custom node type -var nodeSettings = { - 'customNode': { - 'render': function (node, canvas) { - var pos = node.pos.getc(true), - dim = node.getData('dim'), - cat = node.getData('metacode'), - whiteCircle = node.getData('whiteCircle'), - ctx = canvas.getCtx(); - - // if the topic is on the Canvas draw a white circle around it - if (whiteCircle) { - ctx.beginPath(); - ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false); - if (!MetamapsModel.embed) ctx.strokeStyle = 'white'; - if (MetamapsModel.embed) ctx.strokeStyle = '#999'; - ctx.lineWidth = 2; - ctx.stroke(); - } - ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2); - - }, - 'contains': function (node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.circle.contains(npos, pos, dim); - } - } -} - -var renderEdgeArrows = function (edgeHelper, adj) { - var canvas = Mconsole.canvas; - var directionCat = adj.getData('category'); - var direction = adj.getData('direction'); - 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") { - renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, true, canvas, 0.7); - renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, false, canvas, 0.7); - } else if (directionCat == "from-to") { - var direction = adj.data.$direction; - var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id); - renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, inv, canvas, 0.7); - renderMidArrow({ - x: pos.x, - y: pos.y - }, { - x: posChild.x, - y: posChild.y - }, 13, inv, canvas, 0.3); - } - } //renderEdgeArrow - -// defining custom edges -var edgeSettings = { - 'customEdge': { - 'render': function (adj, canvas) { - //get nodes cartesian coordinates - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); - - var directionCat = adj.getData("category"); - //label placement on edges - renderEdgeArrows(this.edgeHelper, adj); - - //check for edge label in data - var desc = adj.getData("desc"); - var showDesc = adj.getData("showDesc"); - if (desc != "" && showDesc) { - // '&' to '&' - desc = decodeEntities(desc); - - //now adjust the label placement - var ctx = canvas.getCtx(); - ctx.font = 'bold 14px arial'; - ctx.fillStyle = '#FFF'; - ctx.textBaseline = 'hanging'; - - // 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 - function splitLine(st, n) { - var b = ''; - var s = 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; - } - var arrayOfLabelLines = 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) + 8; - 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(); - - //render text - ctx.fillStyle = '#222222'; - ctx.textAlign = 'center'; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index)); - } - } - }, - '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, adj.Edge.epsilon); - } - } -} - -var edgeSettingsEmbed = { - 'customEdgeEmbed': { - 'render': function (adj, canvas) { - //get nodes cartesian coordinates - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); - - var directionCat = adj.getData("category"); - //label placement on edges - renderEdgeArrows(this.edgeHelper, adj); - - //check for edge label in data - var desc = adj.getData("desc"); - var showDesc = adj.getData("showDesc"); - if (desc != "" && showDesc) { - // '&' to '&' - desc = decodeEntities(desc); - - //now adjust the label placement - var ctx = canvas.getCtx(); - var radius = canvas.getSize(); - var x = parseInt((pos.x + posChild.x - (desc.length * 5)) / 2); - var y = parseInt((pos.y + posChild.y) / 2); - ctx.font = 'bold 14px arial'; - - //render background - ctx.fillStyle = '#999'; - var margin = 5; - var height = 14 + margin; //font size + margin - var CURVE = height / 2; //offset for curvy corners - var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE - var labelX = x - margin + CURVE; - var labelY = y - height + margin; - ctx.fillRect(labelX, labelY, width, height); - - //curvy corners woo - circles in place of last CURVE pixels of rect - ctx.beginPath(); - ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false); - ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false); - ctx.fill(); - - //render text - ctx.fillStyle = '#000'; - ctx.fillText(desc, x, y); - } - }, - '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, adj.Edge.epsilon); - } - } -} - -function drawSelectBox(eventInfo, e) { - Mconsole.plot(); - var ctx = Mconsole.canvas.getCtx(); - - var startX = MetamapsModel.boxStartCoordinates.x, - startY = MetamapsModel.boxStartCoordinates.y, - currX = eventInfo.getPos().x, - currY = eventInfo.getPos().y; - - Mconsole.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(); -} - -function selectNodesWithBox() { - - var sX = MetamapsModel.boxStartCoordinates.x, - sY = MetamapsModel.boxStartCoordinates.y, - eX = MetamapsModel.boxEndCoordinates.x, - eY = MetamapsModel.boxEndCoordinates.y; - - - Mconsole.graph.eachNode(function (n) { - var x = gType == "centered" ? n.pos.toComplex().x : n.pos.x, - y = gType == "centered" ? n.pos.toComplex().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)) { - var nodeIsSelected = MetamapsModel.selectedNodes.indexOf(n); - if (nodeIsSelected == -1) selectNode(n); // the node is not selected, so select it - else if (nodeIsSelected != -1) deselectNode(n); // the node is selected, so deselect it - - } - }); - - MetamapsModel.boxStartCoordinates = false; - MetamapsModel.boxEndCoordinates = false; - Mconsole.plot(); -} - -function onMouseMoveHandler(node, eventInfo, e) { - - if (Mconsole.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 (MetamapsModel.edgeHoveringOver) { - onMouseLeave(MetamapsModel.edgeHoveringOver); - } - $('canvas').css('cursor', 'pointer'); - return; - } - - if (edge == false && MetamapsModel.edgeHoveringOver != false) { - //mouse not on an edge, but we were on an edge previously - onMouseLeave(MetamapsModel.edgeHoveringOver); - } else if (edge != false && MetamapsModel.edgeHoveringOver == false) { - //mouse is on an edge, but there isn't a stored edge - onMouseEnter(edge); - } else if (edge != false && MetamapsModel.edgeHoveringOver != edge) { - //mouse is on an edge, but a different edge is stored - onMouseLeave(MetamapsModel.edgeHoveringOver) - onMouseEnter(edge); - } - - //could be false - MetamapsModel.edgeHoveringOver = edge; - - if (!node && !edge) { - $('canvas').css('cursor', 'default'); - } -} - -function onMouseEnter(edge) { - $('canvas').css('cursor', 'pointer'); - var edgeIsSelected = MetamapsModel.selectedEdges.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, - alpha: 1 - }); - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - Mconsole.plot(); - } -} - -function onMouseLeave(edge) { - $('canvas').css('cursor', 'default'); - var edgeIsSelected = MetamapsModel.selectedEdges.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, - alpha: 0.4 - }); - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - } - Mconsole.plot(); -} - -function onDragEndTopicHandler(node, eventInfo, e, allowRealtime) { - if (tempInit && tempNode2 == null) { - $('#topic_addSynapse').val("true"); - $('#new_topic').fadeIn('fast'); - $('#topic_name').focus(); - } else if (tempInit && tempNode2 != null) { - $('#topic_addSynapse').val("false"); - $('#synapse_topic1id').val(tempNode.id); - $('#synapse_topic2id').val(tempNode2.id); - $('#new_synapse').fadeIn('fast'); - $('#synapse_desc').typeahead('setQuery', '').focus(); - tempNode = null; - tempNode2 = null; - tempInit = false; - } else if (dragged && dragged != 0 && goRealtime) { - saveLayout(dragged); - for (var i = 0; i < MetamapsModel.selectedNodes.length; i++) { - saveLayout(MetamapsModel.selectedNodes[i].id); - } - } -} //onDragEndTopicHandler - -function onDragCancelHandler(node, eventInfo, e, centred) { - tempNode = null; - tempNode2 = null; - tempInit = false; - - //not sure why this doesn't happen for centred graphs - if (!centred) { - $('#topic_addSynapse').val("false"); - $('#topic_topic1id').val(0); - $('#topic_topic2id').val(0); - } - Mconsole.plot(); -} - -// thanks to http://stackoverflow.com/questions/4338963/ -// convert-html-character-entities-back-to-regular-text-using-javascript -function decodeEntities(desc) { - var str, temp = document.createElement('p'); - temp.innerHTML = desc; //browser handles the entities - str = temp.textContent || temp.innerText; - temp = null; //delete the element; - return str; -} //decodeEntities \ No newline at end of file diff --git a/app/assets/javascripts/Jit/jit2.0.0.js b/app/assets/javascripts/Jit/jit2.0.0.js deleted file mode 100644 index b8fc1bbe..00000000 --- a/app/assets/javascripts/Jit/jit2.0.0.js +++ /dev/null @@ -1,9761 +0,0 @@ -/* - Copyright (c) 2010, Nicolas Garcia Belmonte - All rights reserved - - > Redistribution and use in source and binary forms, with or without - > modification, are permitted provided that the following conditions are met: - > * Redistributions of source code must retain the above copyright - > notice, this list of conditions and the following disclaimer. - > * Redistributions in binary form must reproduce the above copyright - > notice, this list of conditions and the following disclaimer in the - > documentation and/or other materials provided with the distribution. - > * Neither the name of the organization nor the - > names of its contributors may be used to endorse or promote products - > derived from this software without specific prior written permission. - > - > THIS SOFTWARE IS PROVIDED BY NICOLAS GARCIA BELMONTE ``AS IS'' AND ANY - > EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - > WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - > DISCLAIMED. IN NO EVENT SHALL NICOLAS GARCIA BELMONTE BE LIABLE FOR ANY - > DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - > (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - > LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - > ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - > (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS - > SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - */ - (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.0b'; -/* - 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; 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 options. - Other options included in the AreaChart are , , , and . - - Syntax: - - (start code js) - - Options.AreaChart = { - animate: true, - labelOffset: 3, - type: 'stacked', - selectOnHover: true, - showAggregates: true, - showLabels: true, - filterOnClick: false, - restoreOnRightClick: false - }; - - (end code) - - Example: - - (start code js) - - var areaChart = new $jit.AreaChart({ - animate: true, - type: 'stacked:gradient', - selectOnHover: true, - filterOnClick: true, - restoreOnRightClick: true - }); - - (end code) - - Parameters: - - animate - (boolean) Default's *true*. Whether to add animated transitions when filtering/restoring stacks. - labelOffset - (number) Default's *3*. Adds margin between the label and the default place where it should be drawn. - type - (string) Default's *'stacked'*. Stack style. Posible values are 'stacked', 'stacked:gradient' to add gradients. - selectOnHover - (boolean) Default's *true*. If true, it will add a mark to the hovered stack. - showAggregates - (boolean) Default's *true*. Display the sum of the values of the different stacks. - showLabels - (boolean) Default's *true*. Display the name of the slots. - filterOnClick - (boolean) Default's *true*. Select the clicked stack by hiding all other stacks. - restoreOnRightClick - (boolean) Default's *true*. Show all stacks by right clicking. - -*/ - -Options.AreaChart = { - $extend: true, - - animate: true, - labelOffset: 3, // label offset - type: 'stacked', // gradient - Tips: { - enable: false, - onShow: $.empty, - onHide: $.empty - }, - Events: { - enable: false, - onClick: $.empty - }, - selectOnHover: true, - showAggregates: true, - showLabels: true, - filterOnClick: false, - restoreOnRightClick: false -}; - -/* - * File: Options.Margin.js - * -*/ - -/* - Object: Options.Margin - - Canvas drawing margins. - - Syntax: - - (start code js) - - Options.Margin = { - top: 0, - left: 0, - right: 0, - bottom: 0 - }; - - (end code) - - Example: - - (start code js) - - var viz = new $jit.Viz({ - Margin: { - right: 10, - bottom: 20 - } - }); - - (end code) - - Parameters: - - top - (number) Default's *0*. Top margin. - left - (number) Default's *0*. Left margin. - right - (number) Default's *0*. Right margin. - bottom - (number) Default's *0*. Bottom margin. - -*/ - -Options.Margin = { - $extend: false, - - top: 0, - left: 0, - right: 0, - bottom: 0 -}; - -/* - * File: Options.Canvas.js - * -*/ - -/* - Object: Options.Canvas - - These are Canvas general options, like where to append it in the DOM, its dimensions, background, - and other more advanced options. - - Syntax: - - (start code js) - - Options.Canvas = { - injectInto: 'id', - width: false, - height: false, - useCanvas: false, - withLabels: true, - background: false - }; - (end code) - - Example: - - (start code js) - var viz = new $jit.Viz({ - injectInto: 'someContainerId', - width: 500, - height: 700 - }); - (end code) - - Parameters: - - injectInto - *required* (string|element) The id of the DOM container for the visualization. It can also be an Element provided that it has an id. - width - (number) Default's to the *container's offsetWidth*. The width of the canvas. - height - (number) Default's to the *container's offsetHeight*. The height of the canvas. - useCanvas - (boolean|object) Default's *false*. You can pass another 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', - width: false, - height: false, - useCanvas: false, - withLabels: true, - background: false -}; - -/* - * File: Options.Tree.js - * -*/ - -/* - Object: Options.Tree - - Options related to (strict) Tree layout algorithms. These options are used by the visualization. - - Syntax: - - (start code js) - Options.Tree = { - orientation: "left", - subtreeOffset: 8, - siblingOffset: 5, - indent:10, - multitree: false, - align:"center" - }; - (end code) - - Example: - - (start code js) - var st = new $jit.ST({ - orientation: 'left', - subtreeOffset: 1, - siblingOFfset: 5, - multitree: true - }); - (end code) - - Parameters: - - subtreeOffset - (number) Default's 8. Separation offset between subtrees. - siblingOffset - (number) Default's 5. Separation offset between siblings. - orientation - (string) Default's 'left'. Tree orientation layout. Possible values are 'left', 'top', 'right', 'bottom'. - align - (string) Default's *center*. Whether the tree alignment is 'left', 'center' or 'right'. - indent - (number) Default's 10. Used when *align* is left or right and shows an indentation between parent and children. - multitree - (boolean) Default's *false*. Used with the node $orn data property for creating multitrees. - -*/ -Options.Tree = { - $extend: true, - - orientation: "left", - subtreeOffset: 8, - siblingOffset: 5, - indent:10, - multitree: false, - align:"center" -}; - - -/* - * File: Options.Node.js - * -*/ - -/* - Object: Options.Node - - Provides Node rendering options for Tree and Graph based visualizations. - - Syntax: - - (start code js) - Options.Node = { - overridable: false, - type: 'circle', - color: '#ccb', - alpha: 1, - dim: 3, - height: 20, - width: 90, - autoHeight: false, - autoWidth: false, - lineWidth: 1, - transform: true, - align: "center", - angularWidth:1, - span:1, - CanvasStyles: {} - }; - (end code) - - Example: - - (start code js) - var viz = new $jit.Viz({ - Node: { - overridable: true, - width: 30, - autoHeight: true, - type: 'rectangle' - } - }); - (end code) - - Parameters: - - overridable - (boolean) Default's *false*. Determine whether or not general node properties can be overridden by a particular . - 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 other node shapes such as circle or square, to determine the shape's diameter. - 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. - 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) { - e = $.event.get(e, win); - var labelContainer = this.labelContainer, - target = e.target || e.srcElement; - if(target && target.parentNode == labelContainer) - return target; - 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))) { - 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))) { - this.hovered = this.viz.graph.getNode(label.id); - this.config.onMouseEnter(this.hovered, - event, evt); - } - }, - - onMouseMove: function(e, win, event) { - var label, evt = $.event.get(e, win); - if(this.pressed) { - this.moved = true; - this.config.onDragMove(this.pressed, event, evt); - return; - } - if(this.dom) { - this.config.onMouseMove(this.hovered, - event, evt); - } else { - if(this.hovered) { - var hn = this.hovered; - var geom = hn.nodeFrom? this.etypes[hn.getData('type')] : this.ntypes[hn.getData('type')]; - var contains = geom && geom.contains - && geom.contains.call(this.fx, hn, event.getPos()); - if(contains) { - this.config.onMouseMove(hn, event, evt); - return; - } else { - this.config.onMouseLeave(hn, event, evt); - this.hovered = false; - } - } - if(this.hovered = (event.getNode() || (this.config.enableForEdges && event.getEdge()))) { - this.config.onMouseEnter(this.hovered, event, evt); - } else { - this.config.onMouseMove(false, event, evt); - } - } - }, - - onMouseWheel: function(e, win, delta) { - this.config.onMouseWheel(delta, $.event.get(e, win)); - }, - - onMouseDown: function(e, win, event) { - var evt = $.event.get(e, win); - this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge()); - this.config.onDragStart(this.pressed, event, evt); - }, - - onTouchStart: function(e, win, event) { - var evt = $.event.get(e, win); - this.touched = event.getNode() || (this.config.enableForEdges && event.getEdge()); - 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 - if(this.dom && this.isLabel(e, win)) { - 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))) { - 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)) { - 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))) { - 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; - // END METAMAPS 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); - }, - - onMouseDown: function(e, win, eventInfo) { - if(!this.config.panning) return; - - //START METAMAPS CODE - if((this.config.panning == 'avoid nodes' && eventInfo.getNode()) || eventInfo.getEdge()) return; - // END METAMAPS CODE - // ORIGINAl CODE if(this.config.panning == 'avoid nodes' && eventInfo.getNode()) return; - this.pressed = true; - //START METAMAPS CODE - if (!MetamapsModel.boxStartCoordinates && e.shiftKey) { - MetamapsModel.boxStartCoordinates = eventInfo.getPos(); - } - MetamapsModel.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' && eventInfo.getNode()) return; - // START METAMAPS CODE - if (!MetamapsModel.boxStartCoordinates && e.shiftKey) { - Mconsole.busy = true; - MetamapsModel.boxStartCoordinates = eventInfo.getPos(); - return; - } - if (MetamapsModel.boxStartCoordinates && e.shiftKey) { - Mconsole.busy = true; - drawSelectBox(eventInfo,e); - return; - } - if (e.target.id != 'infovis-canvas') { - this.pressed = false; - return; - } - MetamapsModel.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; - this.pos = currentPos; - this.canvas.translate(x * 1/sx, y * 1/sy); - }, - - onMouseUp: function(e, win, eventInfo, isRightClick) { - if(!this.config.panning) return; - this.pressed = false; - } -}); - - -/* - * File: Canvas.js - * - */ - -/* - Class: Canvas - - A canvas widget used by all visualizations. The canvas object can be accessed by doing *viz.canvas*. If you want to - know more about 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 = opt; - var id = $.type(opt.injectInto) == 'string'? - opt.injectInto:opt.injectInto.id, - idLabel = id + "-label", - wrapper = $(id), - width = opt.width || wrapper.offsetWidth, - height = opt.height || wrapper.offsetHeight; - this.id = id; - //canvas options - var canvasOptions = { - injectInto: id, - width: width, - height: height - }; - //create main wrapper - this.element = $E('div', { - 'id': id + '-canvaswidget', - 'style': { - 'position': 'relative', - 'width': width + 'px', - 'height': height + 'px' - } - }); - //create label container - this.labelContainer = this.createLabelContainer(opt.Label.type, - idLabel, canvasOptions); - //create primary canvas - this.canvases.push(new Canvas.Base({ - 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(backCanvas)); - } - //insert canvases - var len = this.canvases.length; - while(len--) { - this.element.appendChild(this.canvases[len].canvas); - if(len > 0) { - this.canvases[len].plot(); - } - } - this.element.appendChild(this.labelContainer); - wrapper.appendChild(this.element); - //Update canvas position when the page is scrolled. - var timer = null, that = this; - $.addEvent(window, 'scroll', function() { - clearTimeout(timer); - timer = setTimeout(function() { - that.getPos(true); //update canvas position - }, 500); - }); - }, - /* - Method: getCtx - - Returns the main canvas context object - - Example: - - (start code js) - var ctx = canvas.getCtx(); - //Now I can use the native canvas context - //and for example change some canvas styles - ctx.globalAlpha = 1; - (end code) - */ - getCtx: function(i) { - return this.canvases[i || 0].getCtx(); - }, - /* - Method: getConfig - - Returns the current Configuration for this Canvas Widget. - - Example: - - (start code js) - var config = canvas.getConfig(); - (end code) - */ - getConfig: function() { - return this.opt; - }, - /* - Method: getElement - - Returns the main Canvas DOM wrapper - - Example: - - (start code js) - var wrapper = canvas.getElement(); - //Returns
...
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; - this.rho = rho; -}; - -$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: 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; - this.y = y; -}; - -$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); - } -}; - -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 = { - 'complex': false, - '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: 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.complex, - 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, complex, Node, Edge, Label) { - var innerOptions = { - 'id': '', - 'name': '', - 'data': {}, - 'startData': {}, - 'endData': {}, - 'adjacencies': {}, - - 'selected': false, - 'drawn': false, - 'exist': false, - - 'angleSpan': { - 'begin': 0, - 'end' : 0 - }, - - 'pos': (complex && $C(0, 0)) || $P(0, 0), - 'startPos': (complex && $C(0, 0)) || $P(0, 0), - 'endPos': (complex && $C(0, 0)) || $P(0, 0) - }; - - $.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: 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(['getNode', '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.getp().equals(Polar.KER)) { - 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) { - 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 = extraModes && ('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] + ((extraModes && ('node-property' in extraModes))? - (':' + $.splat(extraModes['node-property']).join(':')) : ''); - //Append extra edge-property animations (if any) - modes[1] = (modes[1] || 'edge-property:alpha') + ((extraModes && ('edge-property' in extraModes))? - (':' + $.splat(extraModes['edge-property']).join(':')) : ''); - //Add label-property animations (if any) - if(extraModes && ('label-property' in extraModes)) { - modes.push('label-property:' + $.splat(extraModes['label-property']).join(':')) - } - viz.reposition(); - 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: ['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(); - height /= 2; - width /= 2; - ctx.save(); - ctx.scale(width / height, height / width); - ctx.beginPath(); - ctx.arc(pos.x * (height / width), pos.y * (width / height), height, 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){ - // TODO(nico): be more precise... - width /= 2; - height /= 2; - var dist = (width + height) / 2, - diffx = npos.x - pos.x, - diffy = npos.y - pos.y, - diff = diffx * diffx + diffy * diffy; - return diff <= dist * dist; - } - }, - /* - 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) The dimension 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) The dimension of the shape. - - 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 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 dimension of the star. - 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 dimension of the shape. - - 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.5, vect.x / 2.5), - v1 = intermediatePoint.add(normal), - v2 = intermediatePoint.$add(normal.$scale(-1)); - - var vect1 = new Complex(to.x - from.x, to.y - from.y); - vect1.$scale(15 / vect1.norm()); - var toPoint = new Complex(to.x - vect1.x, to.y - vect1.y); - to.x = toPoint.x; - to.y = toPoint.y; - - 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 intializer - 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($.merge(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(); - 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; - 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); - ctx.save(); - ctx.globalAlpha = min(nodeAlpha, - nodeTo.getData('alpha'), - adj.getData('alpha')); - that.plotLine(adj, canvas, animating); - ctx.restore(); - !animating && opt.onAfterPlotLine(adj); - } - }); - - //START METAMAPS CODE - if (MetamapsModel.synapseStartCoord) { - ctx.save(); - var X = MetamapsModel.synapseStartCoord.x; - var Y = MetamapsModel.synapseStartCoord.y; - var X2 = MetamapsModel.synapseEndCoord.x; - var Y2 = MetamapsModel.synapseEndCoord.y; - renderMidArrow({ x: X, y: Y }, { x: X2, y: Y2 }, 13, false, canvas, 0.5, true); - ctx.restore(); - } - //END METAMAPS CODE - - ctx.save(); - 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); - } - } - ctx.restore(); - 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); - ctx.globalAlpha = Math.min(nodeAlpha, elem.getData('alpha')); - 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.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); - } - }, - - /* - 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(); - - ctx.lineWidth = width; - ctx.fillStyle = ctx.strokeStyle = color; - - for(var s in ctxObj) { - ctx[s] = adj.getCanvasStyle(s); - } - - this.edgeTypes[f].render.call(this, adj, canvas, animating); - } - } - -}; - - - -/* - * File: Graph.Label.js - * -*/ - -/* - Object: Graph.Label - - An interface for plotting/hiding/showing labels. - - Description: - - This is a generic interface for plotting/hiding/showing labels. - The 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({ - /* - 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 - - // 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 - function splitLine(st,n) {var b = ''; var s = 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;} - var arrayOfLabelLines = splitLine(node.name,30).split('\n'); - //render background - ctx.fillStyle = 'rgba(24, 32, 46, 1)'; - ctx.strokeStyle = node.getData('whiteCircle') ? '#FFF' : 'rgba(24,32,46, 1)'; - 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") + 8 + (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); - } -}); - - - -Graph.Geom = new Class({ - - initialize: function(viz) { - this.viz = viz; - this.config = viz.config; - this.node = viz.config.Node; - this.edge = viz.config.Edge; - }, - /* - Applies a translation to the tree. - - Parameters: - - pos - A number specifying translation vector. - prop - A position property ('pos', 'start' or 'end'). - - Example: - - (start code js) - st.geom.translate(new Complex(300, 100), 'end'); - (end code) - */ - translate: function(pos, prop) { - prop = $.splat(prop); - this.viz.graph.eachNode(function(elem) { - $.each(prop, function(p) { elem.getPos(p).$add(pos); }); - }); - }, - /* - Hides levels of the tree until it properly fits in canvas. - */ - setRightLevelToShow: function(node, canvas, callback) { - var level = this.getRightLevelToShow(node, canvas), - fx = this.viz.labels, - opt = $.merge({ - execShow:true, - execHide:true, - onHide: $.empty, - onShow: $.empty - }, callback || {}); - node.eachLevel(0, this.config.levelsToShow, function(n) { - var d = n._depth - node._depth; - if(d > level) { - opt.onHide(n); - if(opt.execHide) { - n.drawn = false; - n.exist = false; - fx.hideLabel(n, false); - } - } else { - opt.onShow(n); - if(opt.execShow) { - n.exist = true; - } - } - }); - node.drawn= true; - }, - /* - Returns the right level to show for the current tree in order to fit in canvas. - */ - getRightLevelToShow: function(node, canvas) { - var config = this.config; - var level = config.levelsToShow; - var constrained = config.constrained; - if(!constrained) return level; - while(!this.treeFitsInCanvas(node, canvas, level) && level > 1) { level-- ; } - return level; - } -}); - -/* - * 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.Tree - * - * Implements a Tree Layout. - * - * Implemented By: - * - * - * - * Inspired by: - * - * Drawing Trees (Andrew J. Kennedy) - * - */ -Layouts.Tree = (function() { - //Layout functions - var slice = Array.prototype.slice; - - /* - Calculates the max width and height nodes for a tree level - */ - function getBoundaries(graph, config, level, orn, prop) { - var dim = config.Node; - var multitree = config.multitree; - if (dim.overridable) { - var w = -1, h = -1; - graph.eachNode(function(n) { - if (n._depth == level - && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) { - var dw = n.getData('width', prop); - var dh = n.getData('height', prop); - w = (w < dw) ? dw : w; - h = (h < dh) ? dh : h; - } - }); - return { - 'width' : w < 0 ? dim.width : w, - 'height' : h < 0 ? dim.height : h - }; - } else { - return dim; - } - } - - - function movetree(node, prop, val, orn) { - var p = (orn == "left" || orn == "right") ? "y" : "x"; - node.getPos(prop)[p] += val; - } - - - function moveextent(extent, val) { - var ans = []; - $.each(extent, function(elem) { - elem = slice.call(elem); - elem[0] += val; - elem[1] += val; - ans.push(elem); - }); - return ans; - } - - - function merge(ps, qs) { - if (ps.length == 0) - return qs; - if (qs.length == 0) - return ps; - var p = ps.shift(), q = qs.shift(); - return [ [ p[0], q[1] ] ].concat(merge(ps, qs)); - } - - - function mergelist(ls, def) { - def = def || []; - if (ls.length == 0) - return def; - var ps = ls.pop(); - return mergelist(ls, merge(ps, def)); - } - - - function fit(ext1, ext2, subtreeOffset, siblingOffset, i) { - if (ext1.length <= i || ext2.length <= i) - return 0; - - var p = ext1[i][1], q = ext2[i][0]; - return Math.max(fit(ext1, ext2, subtreeOffset, siblingOffset, ++i) - + subtreeOffset, p - q + siblingOffset); - } - - - function fitlistl(es, subtreeOffset, siblingOffset) { - function $fitlistl(acc, es, i) { - if (es.length <= i) - return []; - var e = es[i], ans = fit(acc, e, subtreeOffset, siblingOffset, 0); - return [ ans ].concat($fitlistl(merge(acc, moveextent(e, ans)), es, ++i)); - } - ; - return $fitlistl( [], es, 0); - } - - - function fitlistr(es, subtreeOffset, siblingOffset) { - function $fitlistr(acc, es, i) { - if (es.length <= i) - return []; - var e = es[i], ans = -fit(e, acc, subtreeOffset, siblingOffset, 0); - return [ ans ].concat($fitlistr(merge(moveextent(e, ans), acc), es, ++i)); - } - ; - es = slice.call(es); - var ans = $fitlistr( [], es.reverse(), 0); - return ans.reverse(); - } - - - function fitlist(es, subtreeOffset, siblingOffset, align) { - var esl = fitlistl(es, subtreeOffset, siblingOffset), esr = fitlistr(es, - subtreeOffset, siblingOffset); - - if (align == "left") - esr = esl; - else if (align == "right") - esl = esr; - - for ( var i = 0, ans = []; i < esl.length; i++) { - ans[i] = (esl[i] + esr[i]) / 2; - } - return ans; - } - - - function design(graph, node, prop, config, orn) { - var multitree = config.multitree; - var auxp = [ 'x', 'y' ], auxs = [ 'width', 'height' ]; - var ind = +(orn == "left" || orn == "right"); - var p = auxp[ind], notp = auxp[1 - ind]; - - var cnode = config.Node; - var s = auxs[ind], nots = auxs[1 - ind]; - - var siblingOffset = config.siblingOffset; - var subtreeOffset = config.subtreeOffset; - var align = config.align; - - function $design(node, maxsize, acum) { - var sval = node.getData(s, prop); - var notsval = maxsize - || (node.getData(nots, prop)); - - var trees = [], extents = [], chmaxsize = false; - var chacum = notsval + config.levelDistance; - node.eachSubnode(function(n) { - if (n.exist - && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) { - - if (!chmaxsize) - chmaxsize = getBoundaries(graph, config, n._depth, orn, prop); - - var s = $design(n, chmaxsize[nots], acum + chacum); - trees.push(s.tree); - extents.push(s.extent); - } - }); - var positions = fitlist(extents, subtreeOffset, siblingOffset, align); - for ( var i = 0, ptrees = [], pextents = []; i < trees.length; i++) { - movetree(trees[i], prop, positions[i], orn); - pextents.push(moveextent(extents[i], positions[i])); - } - var resultextent = [ [ -sval / 2, sval / 2 ] ] - .concat(mergelist(pextents)); - node.getPos(prop)[p] = 0; - - if (orn == "top" || orn == "left") { - node.getPos(prop)[notp] = acum; - } else { - node.getPos(prop)[notp] = -acum; - } - - return { - tree : node, - extent : resultextent - }; - } - - $design(node, false, 0); - } - - - return new Class({ - /* - Method: compute - - Computes nodes' positions. - - */ - compute : function(property, computeLevels) { - var prop = property || 'start'; - var node = this.graph.getNode(this.root); - $.extend(node, { - 'drawn' : true, - 'exist' : true, - 'selected' : true - }); - NodeDim.compute(this.graph, prop, this.config); - if (!!computeLevels || !("_depth" in node)) { - this.graph.computeLevels(this.root, 0, "ignore"); - } - - this.computePositions(node, prop); - }, - - computePositions : function(node, prop) { - var config = this.config; - var multitree = config.multitree; - var align = config.align; - var indent = align !== 'center' && config.indent; - var orn = config.orientation; - var orns = multitree ? [ 'top', 'right', 'bottom', 'left' ] : [ orn ]; - var that = this; - $.each(orns, function(orn) { - //calculate layout - design(that.graph, node, prop, that.config, orn, prop); - var i = [ 'x', 'y' ][+(orn == "left" || orn == "right")]; - //absolutize - (function red(node) { - node.eachSubnode(function(n) { - if (n.exist - && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) { - - n.getPos(prop)[i] += node.getPos(prop)[i]; - if (indent) { - n.getPos(prop)[i] += align == 'left' ? indent : -indent; - } - red(n); - } - }); - })(node); - }); - } - }); - -})(); - - -/* - * 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)); - }); - }); - } -}); - -/* - * 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: 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 = { - 'complex': true, - '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() { - 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); - }, - // TODO(nico): be more precise... - '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); - - -/* - * 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 = { - 'complex': false, - '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(){ - 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; - 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); - }, - // TODO(nico): be more precise... - '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: Hypertree.js - * -*/ - -/* - Complex - - A multi-purpose Complex Class with common methods. Extended for the Hypertree. - -*/ -/* - moebiusTransformation - - Calculates a moebius transformation for this point / complex. - For more information go to: - http://en.wikipedia.org/wiki/Moebius_transformation. - - Parameters: - - c - An initialized Complex instance representing a translation Vector. -*/ - -Complex.prototype.moebiusTransformation = function(c) { - var num = this.add(c); - var den = c.$conjugate().$prod(this); - den.x++; - return num.$div(den); -}; - -/* - moebiusTransformation - - Calculates a moebius transformation for the hyperbolic tree. - - - - Parameters: - - graph - A instance. - pos - A . - prop - A property array. - theta - Rotation angle. - startPos - _optional_ start position. -*/ -Graph.Util.moebiusTransformation = function(graph, pos, prop, startPos, flags) { - this.eachNode(graph, function(elem) { - for ( var i = 0; i < prop.length; i++) { - var p = pos[i].scale(-1), property = startPos ? startPos : prop[i]; - elem.getPos(prop[i]).set(elem.getPos(property).getc().moebiusTransformation(p)); - } - }, flags); -}; - - })(); \ No newline at end of file diff --git a/app/assets/javascripts/Jit/loadgraphs.js b/app/assets/javascripts/Jit/loadgraphs.js deleted file mode 100644 index 8a1c585b..00000000 --- a/app/assets/javascripts/Jit/loadgraphs.js +++ /dev/null @@ -1,143 +0,0 @@ -(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); -})(); - -// init custom node type -$jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings); -//implement an edge type -$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings); -$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettingsEmbed); -// end - -// init custom node type -$jit.RGraph.Plot.NodeTypes.implement(nodeSettings); -//implement an edge type -$jit.RGraph.Plot.EdgeTypes.implement(edgeSettings); -// end - -function initialize(type, loadLater, embed){ - - if (loadLater == null) { - loadlater = false; - } - if (embed == null) { - embed = false; - } - - viewMode = "graph"; - gType = type; - - if ( type == "centered") { - // init Rgraph - Mconsole = new $jit.RGraph(graphSettings(type)); - } - else if ( type == "arranged" || type == "chaotic" ) { - // init ForceDirected - Mconsole = new $jit.ForceDirected(graphSettings(type, embed)); - } - else { - alert("You didn't specify a type!"); - return false; - } - - // load JSON data. - if (!loadLater) { - Mconsole.busy = true; - Mconsole.loadJSON(json); - - // choose how to plot and animate the data onto the screen - var chooseAnimate; - - if ( type == "centered") { - // compute positions incrementally and animate. - //trigger small animation - Mconsole.graph.eachNode(function(n) { - var pos = n.getPos(); - pos.setc(-200, -200); - }); - Mconsole.compute('end'); - - chooseAnimate = { - modes:['polar'], - duration: 2000, - onComplete: function() { - Mconsole.busy = false; - } - }; - } - else if ( type == "arranged" ) { - // compute positions incrementally and animate. - Mconsole.graph.eachNode(function(n) { - var pos = n.getPos(); - pos.setc(0, 0); - var newPos = new $jit.Complex(); - newPos.x = n.data.$xloc; - newPos.y = n.data.$yloc; - n.setPos(newPos, 'end'); - }); - - chooseAnimate = { - modes: ['linear'], - transition: $jit.Trans.Quad.easeInOut, - duration: 2500, - onComplete: function() { - Mconsole.busy = false; - } - }; - } - else if ( type == "chaotic" ) { - // compute positions incrementally and animate. - Mconsole.compute(); - - chooseAnimate = { - modes: ['linear'], - transition: $jit.Trans.Elastic.easeOut, - duration: 2500, - onComplete: function() { - Mconsole.busy = false; - } - }; - } - - - $(document).ready(function() { - if ( type == "centered") { - Mconsole.fx.animate(chooseAnimate); - } - else if ( type == "arranged" || type == "chaotic") { - Mconsole.animate(chooseAnimate); - } - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchstart', function(event) { - event.preventDefault(); - Mconsole.events.touched = true; - }); - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchmove', function(event) { - //touchPanZoomHandler(event); - }); - - // prevent touch events on the canvas from default behaviour - $("#infovis-canvas").bind('touchend touchcancel', function(event) { - lastDist = 0; - if (!Mconsole.events.touchMoved && !touchDragNode) hideCurrentCard(); - Mconsole.events.touched = Mconsole.events.touchMoved = false; - touchDragNode = false; - }); - }); - // end - }// if not loadLater -} diff --git a/app/assets/javascripts/Jit/permissions.js b/app/assets/javascripts/Jit/permissions.js deleted file mode 100644 index 3c372dd3..00000000 --- a/app/assets/javascripts/Jit/permissions.js +++ /dev/null @@ -1,11 +0,0 @@ - -function authorizeToEdit(obj) { - if (userid && (obj.data.$permission == "commons" || obj.data.$userid == userid)) return true; - else return false; -} - -function mk_permission(obj) { - if (obj.getData("permission") == "commons") return "co"; - else if (obj.getData("permission") == "public") return "pu"; - else if (obj.getData("permission") == "private") return "pr"; -} \ No newline at end of file diff --git a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js deleted file mode 100644 index 125c4020..00000000 --- a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js +++ /dev/null @@ -1,439 +0,0 @@ -function centerOn(nodeid) { - if (!Mconsole.busy) { - var node = Mconsole.graph.getNode(nodeid); - $('div.index img').attr('src', imgArray[node.getData('metacode')].src); - $('div.index .mapName').html(node.name); - $(document).attr('title', node.name + ' | Metamaps'); - window.history.pushState(node.name, "Metamaps", "/topics/" + node.id); - Mconsole.onClick(node.id, { - hideLabels: false, - duration: 1000, - onComplete: function () { - fetchRelatives(node); - } - }); - } -} - -function editEdge(edge, e) { - //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 - deselectEdge(edge); - - //create the wrapper around the form elements, including permissions - //classes to make best_in_place happy - var edit_div = document.createElement('div'); - edit_div.setAttribute('id', 'edit_synapse'); - if (authorizeToEdit(edge)) { - edit_div.className = 'permission canEdit'; - edit_div.className += edge.getData('userid') === userid ? ' yourEdge' : ''; - } else { - edit_div.className = 'permission cannotEdit'; - } - $('.main .wrapper').append(edit_div); - - populateEditEdgeForm(edge); - - //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(); - - MetamapsModel.edgecardInUse = edge.data.$id; -} - -function populateEditEdgeForm(edge) { - add_name_form(edge); - add_user_info(edge); - add_perms_form(edge); - if (authorizeToEdit(edge)) { - add_direction_form(edge); - } -} - -function add_name_form(edge) { - var data_nil = 'Click to add description.'; - //name editing form - $('#edit_synapse').append('
'); - $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc'); - $('#edit_synapse_name').attr('data-object', 'synapse'); - $('#edit_synapse_name').attr('data-attribute', 'desc'); - $('#edit_synapse_name').attr('data-type', 'textarea'); - $('#edit_synapse_name').attr('data-nil', data_nil); - $('#edit_synapse_name').attr('data-url', '/synapses/' + edge.getData("id")); - $('#edit_synapse_name').html(edge.getData("desc")); - - //if edge data is blank or just whitespace, populate it with data_nil - if ($('#edit_synapse_name').html().trim() == '') { - $('#edit_synapse_name').html(data_nil); - } - - $('#edit_synapse_name').bind("ajax:success", function () { - var desc = $(this).html(); - if (desc == data_nil) { - edge.setData("desc", ''); - } else { - edge.setData("desc", desc); - } - selectEdge(edge); - Mconsole.plot(); - }); -} - -function add_user_info(edge) { - $('#edit_synapse').append('
Created by ' + edge.getData("username") + '
'); -} - -function add_perms_form(edge) { - //permissions - if owner, also allow permission editing - $('#edit_synapse').append('
'); - - // ability to change permission - var selectingPermission = false; - if (userid == edge.getData('userid')) { - $('#edit_synapse.yourEdge .mapPerm').click(function () { - 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(function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - updateSynapsePermission(edge, permission); - event.stopPropagation(); - }); - } else { - selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('#edit_synapse .permissionSelect').remove(); - } - }); - } -} //add_perms_form - -function add_direction_form(edge) { - //directionality checkboxes - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); - - //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; - var right = edge.nodeFrom; - } else { - var left = edge.nodeFrom; - var right = edge.nodeTo; - } - - /* - * 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 = edge.getData('category'); //both, none, from-to - if (directionCat == 'from-to') { - var from_to = edge.getData('direction'); - if (from_to[0] == left.id) { - //check left checkbox - $('#edit_synapse_left').prop('checked', true); - } else { - //check right checkbox - $('#edit_synapse_right').prop('checked', true); - } - } else if (directionCat == 'both') { - //check both checkboxes - $('#edit_synapse_left').prop('checked', true); - $('#edit_synapse_right').prop('checked', true); - } - $('#edit_synapse_left, #edit_synapse_right').click(function () { - var leftChecked = $('#edit_synapse_left').is(':checked'); - var rightChecked = $('#edit_synapse_right').is(':checked'); - - var dir = edge.getData('direction'); - 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]; - } - $.ajax({ - 'type': 'PUT', - 'url': '/synapses/' + edge.getData('id'), - 'data': { - synapse: { - category: dirCat - }, - node1_id: { - node1: dir[0] - }, - node2_id: { - node2: dir[1] - } - }, - 'success': function (data) { - updateEdgeDisplay(edge, dir, dirCat); - } - }); - }); -} //add_direction_form - -function updateEdgeDisplay(edge, dir, dirCat) { - edge.setData('category', dirCat); - edge.setData('direction', dir); - - //render mid arrow - //renderEdgeArrows(Mconsole.fx.edgeHelper, edge); - Mconsole.plot(); -} - -function deselectAllEdges() { - var l = MetamapsModel.selectedEdges.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = MetamapsModel.selectedEdges[i]; - deselectEdge(edge); - } -} - -function deselectAllNodes() { - var l = MetamapsModel.selectedNodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = MetamapsModel.selectedNodes[i]; - deselectNode(node); - } -} - -// this is for hiding one topic from your canvas -function removeEdge(edge) { - var id = edge.getData("id"); - $.ajax({ - type: "DELETE", - url: "/synapses/" + id, - success: function () { - hideEdge(edge); - }, - }); -} - -function hideEdge(edge) { - var from = edge.nodeFrom.id; - var to = edge.nodeTo.id; - edge.setData('alpha', 0, 'end'); - Mconsole.fx.animate({ - modes: ['edge-property:alpha'], - duration: 1000 - }); - Mconsole.graph.removeAdjacence(from, to); - Mconsole.plot(); -} - -function hideSelectedEdges() { - var l = MetamapsModel.selectedEdges.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = MetamapsModel.selectedEdges[i]; - hideEdge(edge); - } - MetamapsModel.selectedEdges = new Array(); -} - -function removeSelectedEdges() { - var l = MetamapsModel.selectedEdges.length; - for (var i = l - 1; i >= 0; i -= 1) { - if (mapid != null) { - var edge = MetamapsModel.selectedEdges[i]; - var id = edge.getData("id"); - //delete mapping of id mapid - $.ajax({ - type: "POST", - url: "/synapses/" + mapid + "/" + id + "/removefrommap", - }); - } - hideEdge(edge); - } - MetamapsModel.selectedEdges = new Array(); -} - -function deleteSelectedEdges() { - var l = MetamapsModel.selectedEdges.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = MetamapsModel.selectedEdges[i]; - var id = edge.getData("id"); - $.ajax({ - type: "DELETE", - url: "/synapses/" + id, - }); - hideEdge(edge); - } - MetamapsModel.selectedEdges = new Array(); -} - -function selectNode(node) { - if (MetamapsModel.selectedNodes.indexOf(node) != -1) return; - node.selected = true; - node.setData('dim', 30, 'current'); - node.setData('whiteCircle', true); - node.eachAdjacency(function (adj) { - selectEdge(adj); - }); - MetamapsModel.selectedNodes.push(node); -} - -function deselectNode(node) { - delete node.selected; - node.setData('whiteCircle', false); - node.eachAdjacency(function (adj) { - deselectEdge(adj); - }); - node.setData('dim', 25, 'current'); - - //remove the node - MetamapsModel.selectedNodes.splice( - MetamapsModel.selectedNodes.indexOf(node), 1); -} - -function selectEdge(edge) { - if (MetamapsModel.selectedEdges.indexOf(edge) != -1) return; - edge.setData('showDesc', true, 'current'); - if (!MetamapsModel.embed) { - edge.setDataset('end', { - lineWidth: 4, - color: '#FFFFFF', - alpha: 1 - }); - } else if (MetamapsModel.embed) { - edge.setDataset('end', { - lineWidth: 4, - color: '#999', - alpha: 1 - }); - } - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - MetamapsModel.selectedEdges.push(edge); -} - -function deselectEdge(edge) { - edge.setData('showDesc', false, 'current'); - edge.setDataset('end', { - lineWidth: 2, - color: '#222222', - alpha: 0.4 - }); - - if (MetamapsModel.edgeHoveringOver == edge) { - edge.setData('showDesc', true, 'current'); - edge.setDataset('end', { - lineWidth: 4, - color: '#222222', - alpha: 1 - }); - } - - Mconsole.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - - //remove the edge - MetamapsModel.selectedEdges.splice( - MetamapsModel.selectedEdges.indexOf(edge), 1); -} - -// this is for hiding one topic from your canvas -function hideNode(nodeid) { - var node = Mconsole.graph.getNode(nodeid); - if (nodeid == Mconsole.root && gType == "centered") { - alert("You can't hide this topic, it is the root of your graph."); - return; - } - - deselectNode(node); - - node.setData('alpha', 0, 'end'); - node.eachAdjacency(function (adj) { - adj.setData('alpha', 0, 'end'); - }); - Mconsole.fx.animate({ - modes: ['node-property:alpha', - 'edge-property:alpha'], - duration: 1000 - }); - Mconsole.graph.removeNode(nodeid); -} - -function hideSelectedNodes() { - var l = MetamapsModel.selectedNodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = MetamapsModel.selectedNodes[i]; - hideNode(node.id); - } -} - -function removeNode(nodeid) { - var node = Mconsole.graph.getNode(nodeid); - deselectNode(node); - if (mapperm) { - $.ajax({ - type: "POST", - url: "/topics/" + mapid + "/" + nodeid + "/removefrommap", - }); - } -} - -function removeSelectedNodes() { - if (mapperm) { - var l = MetamapsModel.selectedNodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = MetamapsModel.selectedNodes[i]; - removeNode(node.id); - } - } -} - -function deleteNode(nodeid) { - if (nodeid == Mconsole.root && gType == "centered") { - alert("You can't delete this topic, it is the root of your graph."); - return; - } - $.ajax({ - type: "DELETE", - url: "/topics/" + nodeid, - }); -} - -function deleteSelectedNodes() { - var l = MetamapsModel.selectedNodes.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = MetamapsModel.selectedNodes[i]; - deleteNode(node.id); - } -} \ No newline at end of file diff --git a/app/assets/javascripts/Jit/topicCard.js b/app/assets/javascripts/Jit/topicCard.js deleted file mode 100644 index 577c73fa..00000000 --- a/app/assets/javascripts/Jit/topicCard.js +++ /dev/null @@ -1,213 +0,0 @@ -/* - * @file - * There is a lot of code that goes into creating the "label" of a node - * This includes editable cards with all node details, and some controls - * onCreateLabelHandler is the main function of this file, and the file - * also contains a bunch of helper functions - * - * html and littleHTML are potentially confusing variables - * html is the contents of the card shown when you click on a node's label. - * littleHTML creates little controls for removing/hiding nodes from the canvas - * - * This function features PHP-style variable substitution because the strings - * are so damn long. Values are identified by $_id_$, and then a regular - * expression is substituted in later (for html, in a separate function). - */ - -function buildCardWithHogan(node) { - var nodeValues = {}; - var authorized = authorizeToEdit(node); - - //link is rendered differently if user is logged out or in - var go_link, a_tag, close_a_tag; - if (!authorized) { - go_link = ''; - if (node.getData("link") != "") { - a_tag = ''; - close_a_tag = ''; - } else { - a_tag = ''; - close_a_tag = ''; - } - } else { - go_link = ''; - a_tag = ''; - close_a_tag = ''; - } - - var desc_nil = "Click to add description..."; - var link_nil = "Click to add link..."; - - nodeValues.permission = node.getData("permission"); - nodeValues.mk_permission = mk_permission(node); - nodeValues.map_count = node.getData("inmaps").length; - nodeValues.synapse_count = node.getData("synapseCount"); - nodeValues.id = node.id; - nodeValues.metacode = node.getData("metacode"); - nodeValues.metacode_class = 'mbg' + node.getData("metacode").replace(/\s/g, ''); - nodeValues.imgsrc = imgArray[node.getData("metacode")].src; - nodeValues.name = node.name; - nodeValues.userid = node.getData("userid"); - nodeValues.username = node.getData("username"); - nodeValues.date = node.getData("date"); - - // the code for this is stored in /views/main/_metacodeOptions.html.erb - nodeValues.metacode_select = $('#metacodeOptions').html(); - nodeValues.go_link = go_link; - nodeValues.a_tag = a_tag; - nodeValues.close_a_tag = close_a_tag; - nodeValues.link_nil = link_nil; - nodeValues.link = (node.getData("link") == "" && authorized) ? link_nil : node.getData("link"); - nodeValues.desc_nil = desc_nil; - nodeValues.desc = (node.getData("desc") == "" && authorized) ? desc_nil : node.getData("desc"); - - // the code for the template is stored in /views/layouts/_templates.html.erb - var hoganTemplate = Hogan.compile($('#topicCardTemplate').html()); - return hoganTemplate.render(nodeValues); -} - -function hideCurrentCard() { - if (MetamapsModel.showcardInUse) { - var node = Mconsole.graph.getNode(MetamapsModel.showcardInUse); - hideCard(node); - } -} - -function hideCard(node) { - var card = '.showcard'; - - $(card).fadeOut('fast', function () { - //node.setData('dim', 25, 'current'); - Mconsole.plot(); - }); - - MetamapsModel.showcardInUse = null; -} - -function populateShowCard(node) { - var showCard = document.getElementById('showcard'); - - $(showCard).find('.permission').remove(); - - var html = buildCardWithHogan(node); - - if (authorizeToEdit(node)) { - var perm = document.createElement('div'); - - var string = 'permission canEdit'; - if (userid == node.data.$userid) 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); - } - - 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'); - } - }); - - $('.showcard .metacodeTitle').click(function () { - if (!selectingMetacode) { - selectingMetacode = true; - $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow - $('.metacodeSelect').show(); - // add the scroll bar to the list of metacode select options if it isn't already there - if (!$('.metacodeSelect ul').hasClass('mCustomScrollbar')) { - $('.metacodeSelect ul').mCustomScrollbar({ - mouseWheelPixels: 200, - advanced: { - updateOnContentResize: true - } - }); - - $('.metacodeSelect li').click(function () { - selectingMetacode = false; - var metacodeName = $(this).find('.mSelectName').text(); - updateMetacode(node, metacodeName); - }); - } - } else { - selectingMetacode = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.metacodeSelect').hide(); - } - }); - - - // ability to change permission - var selectingPermission = false; - if (userid == node.data.$userid) { - $('.showcard .yourTopic .mapPerm').click(function () { - 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('
'); - } - $('.permissionSelect li').click(function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - updateTopicPermission(node, permission); - event.stopPropagation(); - }); - } else { - selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.permissionSelect').remove(); - } - }); - } - - // when you're typing a description, resize the scroll box to have space - $('.best_in_place_desc textarea').bind('keyup', function () { - var s = $('.showcard').find('.scroll'); - s.height(s.height()).mCustomScrollbar('update'); - console.log('working'); - }); - - //bind best_in_place ajax callbacks - $(showCard).find('.best_in_place_name').bind("ajax:success", function () { - - var s = $('.showcard').find('.scroll'); - s.height(s.height()).mCustomScrollbar('update'); - - var name = $(this).html(); - node.name = decodeEntities(name); - Mconsole.plot(); - }); - - $(showCard).find('.best_in_place_desc').bind("ajax:success", function () { - this.innerHTML = this.innerHTML.replace(/\r/g, '') - - var s = $('.showcard').find('.scroll'); - s.height(s.height()).mCustomScrollbar('update'); - - var desc = $(this).html(); - node.setData("desc", desc); - }); - - $(showCard).find('.best_in_place_link').bind("ajax:success", function () { - var link = $(this).html(); - $(showCard).find('.go-link').attr('href', link); - node.setData("link", link); - }); - -} \ No newline at end of file diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index c47c793f..521bc782 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -20,307 +20,8 @@ //= require jquery.roundabout.min //= require bip //= require jquery_ujs -//= require hogan-2.0.0 -//= require socket.io //= require typeahead -//= require underscore -//= require backbone -//= require_directory ./carousel -// require_directory ./Jit -//= require_directory ./jquery -//= require_directory ./realtime +//= require hogan-2.0.0 //= require_directory ./scroll //= require_directory ./typing - -// other options are 'graph' -var viewMode = "list"; - -var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, - gType, tempNode = null, - tempInit = false, - tempNode2 = null, - metacodeIMGinit = false, - goRealtime = false, - mapid = null, - mapperm = false, - touchPos, touchDragNode, mouseIsDown = false; - - -// this is to save the layout of a map -function saveLayoutAll() { - $('.sidebarSave .tip').html('Saving...'); - var coor = ""; - if (gType == "arranged" || gType == "chaotic") { - Mconsole.graph.eachNode(function (n) { - coor = coor + n.getData("mappingid") + '/' + n.pos.x + '/' + n.pos.y + ','; - }); - coor = coor.slice(0, -1); - $('#map_coordinates').val(coor); - $('#saveMapLayout').submit(); - } -} - -// this is to update the location coordinate of a single node on a map -function saveLayout(id) { - var n = Mconsole.graph.getNode(id); - $('#map_coordinates').val(n.getData("mappingid") + '/' + n.pos.x + '/' + n.pos.y); - $('#saveMapLayout').submit(); - dragged = 0; - //$('.wandSaveLayout').html('Saved!'); - //setTimeout(function(){$('.wandSaveLayout').html('Save Layout')},1500); -} - -// this is to save your console to a map -function saveToMap() { - var nodes_data = "", - synapses_data = ""; - var synapses_array = new Array(); - Mconsole.graph.eachNode(function (n) { - //don't add to the map if it was filtered out - if (categoryVisible[n.getData('metacode')] == false) { - return; - } - - 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 += n.id + '/' + x + '/' + y + ','; - n.eachAdjacency(function (adj) { - synapses_array.push(adj.getData("id")); - }); - }); - - //get unique values only - synapses_array = $.grep(synapses_array, function (value, key) { - return $.inArray(value, synapses_array) === key; - }); - - synapses_data = synapses_array.join(); - nodes_data = nodes_data.slice(0, -1); - - $('#map_topicsToMap').val(nodes_data); - $('#map_synapsesToMap').val(synapses_data); - openLightbox('forkmap'); -} - -function fetchRelatives(node) { - var myA = $.ajax({ - type: "Get", - url: "/topics/" + node.id + "?format=json", - success: function (data) { - if (gType == "centered") { - Mconsole.busy = true; - Mconsole.op.sum(data, { - type: 'fade', - duration: 500, - hideLabels: false - }); - Mconsole.graph.eachNode(function (n) { - n.eachAdjacency(function (a) { - if (!a.getData('showDesc')) { - a.setData('alpha', 0.4, 'start'); - a.setData('alpha', 0.4, 'current'); - a.setData('alpha', 0.4, 'end'); - } - }); - }); - Mconsole.busy = false; - } else { - Mconsole.op.sum(data, { - type: 'nothing', - }); - Mconsole.plot(); - } - }, - error: function () { - alert('failure'); - } - }); -} - -// @param node = JIT node object -// @param metacode = STRING like "Idea", "Action", etc. -function updateMetacode(node, metacode) { - var mdata = { - "topic": { - "metacode": metacode - } - }; - $.ajax({ - type: "PUT", - dataType: 'json', - url: "/topics/" + node.id, - data: mdata, - success: function (data) { - $('.CardOnGraph').find('.metacodeTitle').text(metacode) - .attr('class', 'metacodeTitle mbg' + metacode.replace(/\s/g, '')); - $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacode].src + ')'); - node.setData("metacode", metacode); - Mconsole.plot(); - $('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.metacodeSelect').hide(); - setTimeout(function () { - $('.metacodeTitle').hide(); - $('.showcard .icon').css('z-index', '1'); - }, 500); - }, - error: function () { - alert('failed to update metacode'); - } - }); -} - - -function updateMetacodeSet(set, index, custom) { - - if (custom && MetamapsModel.newSelectedMetacodes.length == 0) { - alert('Please select at least one metacode to use!'); - return false; - } - - var codesToSwitchTo; - MetamapsModel.selectedMetacodeSetIndex = index; - MetamapsModel.selectedMetacodeSet = "metacodeset-" + set; - - if (!custom) { - codesToSwitchTo = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(','); - $('.customMetacodeList li').addClass('toggledOff'); - MetamapsModel.selectedMetacodes = []; - MetamapsModel.selectedMetacodeNames = []; - MetamapsModel.newSelectedMetacodes = []; - MetamapsModel.newSelectedMetacodeNames = []; - } - if (custom) { - // uses .slice to avoid setting the two arrays to the same actual array - MetamapsModel.selectedMetacodes = MetamapsModel.newSelectedMetacodes.slice(0); - MetamapsModel.selectedMetacodeNames = MetamapsModel.newSelectedMetacodeNames.slice(0); - codesToSwitchTo = MetamapsModel.selectedMetacodeNames.slice(0); - } - - // sort by name - codesToSwitchTo.sort(); - codesToSwitchTo.reverse(); - - $('#metacodeImg, #metacodeImgTitle').empty(); - $('#metacodeImg').removeData('cloudcarousel'); - var newMetacodes = ""; - for (var i = 0; i < codesToSwitchTo.length; i++) { - newMetacodes += '' + codesToSwitchTo[i] + ''; - }; - $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({ - titleBox: $('#metacodeImgTitle'), - yRadius: 40, - xPos: 150, - yPos: 40, - speed: 0.3, - mouseWheel: true, - bringToFront: true - }); - - $('#lightbox_overlay').hide(); - $('#topic_name').focus(); - - var mdata = { - "metacodes": { - "value": custom ? MetamapsModel.selectedMetacodes.toString() : MetamapsModel.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'); - } - }); -} - -function cancelMetacodeSetSwitch() { - if (MetamapsModel.selectedMetacodeSet != "metacodeset-custom") { - $('.customMetacodeList li').addClass('toggledOff'); - MetamapsModel.selectedMetacodes = []; - MetamapsModel.selectedMetacodeNames = []; - MetamapsModel.newSelectedMetacodes = []; - MetamapsModel.newSelectedMetacodeNames = []; - } else { // custom set is selected - // reset it to the current actual selection - $('.customMetacodeList li').addClass('toggledOff'); - for (var i = 0; i < MetamapsModel.selectedMetacodes.length; i++) { - $('#' + MetamapsModel.selectedMetacodes[i]).removeClass('toggledOff'); - }; - // uses .slice to avoid setting the two arrays to the same actual array - MetamapsModel.newSelectedMetacodeNames = MetamapsModel.selectedMetacodeNames.slice(0); - MetamapsModel.newSelectedMetacodes = MetamapsModel.selectedMetacodes.slice(0); - } - $('#metacodeSwitchTabs').tabs("select", MetamapsModel.selectedMetacodeSetIndex); - $('#topic_name').focus(); -} - -function MconsoleReset() { - - var tX = Mconsole.canvas.translateOffsetX; - var tY = Mconsole.canvas.translateOffsetY; - Mconsole.canvas.translate(-tX, -tY); - - var mX = Mconsole.canvas.scaleOffsetX; - var mY = Mconsole.canvas.scaleOffsetY; - Mconsole.canvas.scale((1 / mX), (1 / mY)); -} - -function openLightbox(which) { - $('.lightboxContent').hide(); - $('#' + which).show(); - - $('#lightbox_overlay').show(); - $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px'); - - if (!MetamapsModel.metacodeScrollerInit) { - $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({ - mouseWheelPixels: 200, - advanced: { - updateOnContentResize: true - } - }); - MetamapsModel.metacodeScrollerInit = true; - } - if (which == "switchMetacodes") { - MetamapsModel.isSwitchingSet = true; - } -} - -function closeLightbox() { - $('#lightbox_overlay').hide(); - cancelMapCreate('fork_map'); - cancelMapCreate('new_map'); - if (MetamapsModel.isSwitchingSet) { - cancelMetacodeSetSwitch(); - MetamapsModel.isSwitchingSet = false; - } -} - -function cancelMapCreate(id) { - - var form = $('#' + id); - - form.find('#map_name').val(''); - form.find('#map_desc').val(''); - form.find('#map_permission').val('commons'); - - if (id == "fork_map") { - form.find('#map_topicsToMap').val('0'); - form.find('#map_synapsesToMap').val('0'); - } - form.find('.mapPermIcon').removeClass('selected'); - form.find('.mapCommonsIcon').addClass('selected'); - - return false; -} \ No newline at end of file +//= require ./metamaps/Metamaps.GlobalUI \ No newline at end of file diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/compileMapPages.js similarity index 73% rename from app/assets/javascripts/map.js rename to app/assets/javascripts/compileMapPages.js index 5cd532ed..0d793858 100644 --- a/app/assets/javascripts/map.js +++ b/app/assets/javascripts/compileMapPages.js @@ -10,5 +10,10 @@ // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD // GO AFTER THE REQUIRES BELOW. // -//= require ./metamaps/metamapsJIT -//= require ./metamaps/metamaps \ No newline at end of file +//= require socket.io +//= require underscore +//= require backbone +//= require_directory ./carousel +//= require ./metamaps/JIT +//= require ./metamaps/Metamaps +//= require ./metamaps/Metamaps.JIT \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AllMappingPages.js b/app/assets/javascripts/jquery/AllMappingPages.js deleted file mode 100644 index 9fa44041..00000000 --- a/app/assets/javascripts/jquery/AllMappingPages.js +++ /dev/null @@ -1,98 +0,0 @@ -/* AllMappingPages means: -1. being logged in or logged out and, -2. either - a. being on a Map page, or - b. being on a Topic page - - -*/ - -$(document).ready(function () { - - // initialize topic card draggability and resizability - $('.showcard').draggable({ - handle: ".metacodeImage" - }); - $('#showcard').resizable({ - maxHeight: 500, - maxWidth: 500, - minHeight: 320, - minWidth: 226, - resize: function (event, ui) { - var p = $('#showcard').find('.scroll'); - p.height(p.height()).mCustomScrollbar('update'); - } - }).css({ - display: 'none', - top: '300px', - left: '100px' - }); - - function bindFilterHover() { - - var filterIsOpen = false; - - // controls the sliding hover of the bottom left menu - var sliding1 = false; - var lT; - - var closeFilter = function () { - lT = setTimeout(function () { - if (!sliding1) { - sliding1 = true; - $('.sidebarFilterIcon').css('background-color', '#0F1519'); - $('.sidebarFilterBox').fadeOut(200, function () { - sliding1 = false; - filterIsOpen = false; - }); - } - }, 300); - } - - var openFilter = function () { - clearTimeout(lT); - if (!sliding1) { - sliding1 = true; - - // hide the other two - $('.sidebarAccountBox').hide(); - $('.sidebarCollaborateBox').hide(); - //$('.sidebarAccountIcon').css('background-color', '#0F1519'); - $('.sidebarCollaborateIcon').css('background-color', '#0F1519'); - - $('.sidebarFilterIcon').css('background-color', '#000'); - $('.sidebarFilterBox').fadeIn(200, function () { - sliding1 = false; - filterIsOpen = true; - }); - } - } - // bind the hover events - $(".sidebarFilter").hover(openFilter, closeFilter); - - } // end bindFilterHover - - bindFilterHover(); - - // initialize scroll bar for filter by metacode, then hide it and position it correctly again - $("#filter_by_metacode").mCustomScrollbar({ - mouseWheelPixels: 200, - advanced: { - updateOnContentResize: true - } - }); - $('.sidebarFilterBox').hide().css({ - position: 'absolute', - top: '35px', - right: '-36px' - }); - - // 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; - }); - - // tab the cheatsheet - $('#cheatSheet').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); - $("#cheatSheet .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AuthAllMappingPages.js b/app/assets/javascripts/jquery/AuthAllMappingPages.js deleted file mode 100644 index a3e23df2..00000000 --- a/app/assets/javascripts/jquery/AuthAllMappingPages.js +++ /dev/null @@ -1,19 +0,0 @@ -/* AuthAllMappingPages means: -1. being logged in and, -2. either - a. being on a Map page, or - b. being on a Topic page - - -*/ - -$(document).ready(function () { - - $('.sidebarFork').click(function () { - saveToMap(); - }); - - // initialize best_in_place editing - $('.authenticated div.permission.canEdit .best_in_place').best_in_place(); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AuthCanEditMapPage.js b/app/assets/javascripts/jquery/AuthCanEditMapPage.js deleted file mode 100644 index cdb5c3c5..00000000 --- a/app/assets/javascripts/jquery/AuthCanEditMapPage.js +++ /dev/null @@ -1,97 +0,0 @@ -/* authCanEditMapPage means: -1. being logged in and, -2. being on a Map page and having edit permissions (your map, or commons map) - - -*/ - -$(document).ready(function () { - - function bindRealtimeHover() { - - var realtimeIsOpen = false - - // controls the sliding hover of the bottom left menu - var sliding1 = false; - var lT; - - var closeRealtime = function () { - lT = setTimeout(function () { - if (!sliding1) { - sliding1 = true; - $('.sidebarCollaborateIcon').css('background-color', '#0F1519'); - $('.sidebarCollaborateBox').fadeOut(200, function () { - sliding1 = false; - realtimeIsOpen = false; - }); - } - }, 300); - } - - var openRealtime = function () { - clearTimeout(lT); - if (!sliding1) { - sliding1 = true; - - // hide the other two - $('.sidebarFilterBox').hide(); - $('.sidebarAccountBox').hide(); - $('.sidebarFilterIcon').css('background-color', '#0F1519'); - //$('.sidebarAccountIcon').css('background-color', '#0F1519'); - - $('.sidebarCollaborateIcon').css('background-color', '#000'); - $('.sidebarCollaborateBox').fadeIn(200, function () { - sliding1 = false; - realtimeIsOpen = true; - }); - } - } - // bind the hover events - $(".sidebarCollaborate").hover(openRealtime, closeRealtime); - } // end bindRealtimeHover - - function bindSaveHover() { - var closeSave = function () { - - } - - var openSave = function () { - // hide the other three - $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide(); - $('.sidebarFilterIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519'); - } - // bind the hover events - $(".sidebarSave").hover(openSave, closeSave); - } // end bindSaveHover - - // bind hover events - bindRealtimeHover(); - bindSaveHover(); - - // because anyone who can edit the map can collaborate on it in realtime - $(".realtimeOnOff").click(function (event) { - if (!goRealtime) { - window.realtime.sendRealtimeOn(); - $(this).html('ON').removeClass('rtOff').addClass('rtOn'); - $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); - } else { - window.realtime.sendRealtimeOff(); - $(this).html('OFF').removeClass('rtOn').addClass('rtOff'); - $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); - } - goRealtime = !goRealtime; - $(".sidebarCollaborateIcon").toggleClass("blue"); - }); - - // because anyone who can edit the map can save a new map layout - $('.sidebarSave').click(function () { - saveLayoutAll(); - }); - - // because anyone who can edit the map can change the map title - $('.mapInfoName .best_in_place_name').bind("ajax:success", function () { - var name = $(this).html(); - $('.mapName').html(name); - }); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AuthCanEditMappingPages.js b/app/assets/javascripts/jquery/AuthCanEditMappingPages.js deleted file mode 100644 index c46ac6a5..00000000 --- a/app/assets/javascripts/jquery/AuthCanEditMappingPages.js +++ /dev/null @@ -1,52 +0,0 @@ -/* authCanEditMappingPages means: -1. being logged in and, -2. either - a. being on a Map page and having edit permissions (your map, or commons map) or, - b. being on a Topic page - -this code adds required jQuery for creating, or pulling in, topics and synapses -*/ - -$(document).ready(function () { - - function bindForkHover() { - var closeFork = function () { - - } - - var openFork = function () { - // hide the other three - $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide(); - $('.sidebarFilterIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519'); - } - // bind the hover events - $(".sidebarFork").hover(openFork, closeFork); - } // end bindForkHover - - // bind hover events - bindForkHover(); - - ////// - ////// - //// SWITCHING METACODE SETS - - $('#metacodeSwitchTabs').tabs({ - selected: Metamaps.Settings.selectedMetacodeSetIndex - }).addClass("ui-tabs-vertical ui-helper-clearfix"); - $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); - $('.customMetacodeList li').click(function () { - if ($(this).attr('class') != 'toggledOff') { - $(this).addClass('toggledOff'); - var value_to_remove = $(this).attr('id'); - var name_to_remove = $(this).attr('data-name'); - MetamapsModel.newSelectedMetacodes.splice(MetamapsModel.newSelectedMetacodes.indexOf(value_to_remove), 1); - MetamapsModel.newSelectedMetacodeNames.splice(MetamapsModel.newSelectedMetacodeNames.indexOf(name_to_remove), 1); - } else if ($(this).attr('class') == 'toggledOff') { - $(this).removeClass('toggledOff'); - MetamapsModel.newSelectedMetacodes.push($(this).attr('id')); - MetamapsModel.newSelectedMetacodeNames.push($(this).attr('data-name')); - } - }); - - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AuthEveryPage.js b/app/assets/javascripts/jquery/AuthEveryPage.js deleted file mode 100644 index ef08d5d5..00000000 --- a/app/assets/javascripts/jquery/AuthEveryPage.js +++ /dev/null @@ -1,16 +0,0 @@ -/* authEveryPage means: -1. being logged in and on any page on metamaps - -this code adds required jQuery for the create map lightBox that can be used from any page on metamaps -*/ - -$(document).ready(function () { - - // bind permission changer events on the createMap form - $('.permIcon').click(function () { - $(this).siblings('#map_permission').val($(this).attr('data-permission')); - $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); - $(this).find('.mapPermIcon').addClass('selected'); - }); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js b/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js deleted file mode 100644 index e9db036d..00000000 --- a/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js +++ /dev/null @@ -1,36 +0,0 @@ -/* AuthMapCreatorMapPage means: -1. being on a Map page -2. being the original creator of that map - - -*/ - -$(document).ready(function () { - - // ability to change permission of the map - var selectingPermission = false; - $('.yourMap .mapPermission').click(function () { - if (!selectingPermission) { - 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(function (event) { - selectingPermission = false; - var permission = $(this).attr('class'); - updateMapPermission(mapid, permission); - event.stopPropagation(); - }); - } else { - selectingPermission = false; - $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow - $('.mapPermission .permissionSelect').remove(); - } - }); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/EveryPage.js b/app/assets/javascripts/jquery/EveryPage.js deleted file mode 100644 index ab880924..00000000 --- a/app/assets/javascripts/jquery/EveryPage.js +++ /dev/null @@ -1,412 +0,0 @@ -// everything in this document.ready function is here because it is needed on every single page on metamaps -$(document).ready(function () { - - function bindMainMenuHover() { - - var menuIsOpen = false - - // controls the sliding hover of the bottom left menu - var sliding1 = false; - var lT; - - var closeMenu = function () { - lT = setTimeout(function () { - if (!sliding1) { - sliding1 = true; - // $('.footer .menu').animate({ - // height: '0px' - // }, 300, function() { - // sliding1 = false; - // menuIsOpen = false; - // }); - $('.footer').css('border-top-right-radius', '5px'); - $('.logo').animate({ - 'background-position-x': '-10px' - }, 200); - $('.footer .menu').fadeOut(200, function () { - sliding1 = false; - menuIsOpen = false; - }); - } - }, 500); - } - - var openMenu = function () { - clearTimeout(lT); - if (!sliding1) { - sliding1 = true; - - // $('.footer .menu').animate({ - // height: listLength + 'px' - // }, 300, function() { - // sliding1 = false; - // }); - $('.footer').css('border-top-right-radius', '0'); - $('.logo').animate({ - 'background-position-x': '-7px' - }, 200); - $('.footer .menu').fadeIn(200, function () { - sliding1 = false; - }); - } - } - // bind the hover events - $(".logo").hover(openMenu, closeMenu); - - // when on touch screen, make touching on the logo do what hovering does on desktop - $("#mainTitle a").bind('touchend', function (evt) { - if (!menuIsOpen) { - openMenu(); - evt.preventDefault(); - evt.stopPropagation(); - } - }); - } - - function bindSearchHover() { - - var searchIsOpen = false - - // controls the sliding hover of the search - var sliding1 = false; - var lT; - - var openSearch = function () { - clearTimeout(lT); - if (!sliding1 && !searchIsOpen) { - hideCards(); - sliding1 = true; - $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ - width: '200px' - }, 200, function () { - $('.sidebarSearchField, .sidebarSearch .tt-hint').css({ - padding: '5px 10px', - width: '180px' - }); - $('.sidebarSearchField').focus(); - sliding1 = false - searchIsOpen = true; - }); - } - } - var closeSearch = function (closeAfter, bypass) { - lT = setTimeout(function () { - if (!sliding1 && searchIsOpen && (bypass || $('.sidebarSearchField').val() == '')) { - sliding1 = true; - $('.sidebarSearchField, .sidebarSearch .tt-hint').css({ - padding: '5px 0', - width: '200px' - }); - $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ - width: '0' - }, 200, function () { - $('.sidebarSearchField').typeahead('setQuery', ''); - $('.sidebarSearchField').blur(); - sliding1 = false; - searchIsOpen = false; - }); - } - }, closeAfter); - } - - // bind the hover events - $(".sidebarSearch").hover(function () { - openSearch() - }, function () { - closeSearch(800, false) - }); - - $('.sidebarSearchIcon').click(function (e) { - $('.sidebarSearchField').focus(); - }); - $('.sidebarSearch').click(function (e) { - e.stopPropagation(); - }); - $('body').click(function (e) { - closeSearch(0, false); - }); - - // if the search is closed and user hits ctrl+/ - // close if they hit ESC - $('body').bind('keydown', function (e) { - switch (e.which) { - case 191: - if (e.ctrlKey && !searchIsOpen) { - openSearch(); - } - break; - case 27: - if (searchIsOpen) { - closeSearch(0, true); - } - break; - default: - break; //console.log(e.which); - } - }); - - // initialize the search box autocomplete results - var mapheader = userid ? '

Maps

' : '

Maps

'; - var topicheader = userid ? '

Topics

' : '

Topics

'; - $('.sidebarSearchField').typeahead([ - { - name: 'topics', - limit: 9999, - dupChecker: function (datum1, datum2) { - return false; - }, - template: $('#topicSearchTemplate').html(), - remote: { - url: '/search/topics?term=%QUERY', - replace: function () { - var q = '/search/topics?term=' + $('.sidebarSearchField').val(); - if ($("#limitTopicsToMe").is(':checked')) { - q += "&user=" + userid.toString(); - } - return q; - }, - filter: function (dataset) { - if (dataset.length == 0) { - dataset.push({ - value: "No results", - label: "No results", - typeImageURL: "/assets/icons/wildcard.png", - rtype: "noresult" - }); - } - return dataset; - } - }, - engine: Hogan, - header: topicheader - }, - { - name: 'maps', - limit: 9999, - dupChecker: function (datum1, datum2) { - return false; - }, - template: $('#mapSearchTemplate').html(), - remote: { - url: '/search/maps?term=%QUERY', - replace: function () { - var q = '/search/maps?term=' + $('.sidebarSearchField').val(); - if ($("#limitMapsToMe").is(':checked')) { - q += "&user=" + userid.toString(); - } - return q; - }, - filter: function (dataset) { - if (dataset.length == 0) { - dataset.push({ - value: "No results", - label: "No results", - rtype: "noresult" - }); - } - return dataset; - } - }, - engine: Hogan, - header: mapheader - }, - { - name: 'mappers', - limit: 9999, - dupChecker: function (datum1, datum2) { - return false; - }, - template: $('#mapperSearchTemplate').html(), - remote: { - url: '/search/mappers?term=%QUERY', - filter: function (dataset) { - if (dataset.length == 0) { - dataset.push({ - value: "No results", - label: "No results", - rtype: "noresult" - }); - } - return dataset; - } - }, - engine: Hogan, - header: '

Mappers

' - } - ]); - - //Set max height of the search results box to prevent it from covering bottom left footer - $('.sidebarSearchField').bind('typeahead:opened', function (event) { - var h = $(window).height(); - $(".tt-dropdown-menu").css('max-height', h - 100); - }); - $(window).resize(function () { - var h = $(window).height(); - $(".tt-dropdown-menu").css('max-height', h - 100); - }); - - - // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on - $('.sidebarSearchField').bind('typeahead:selected', function (event, datum, dataset) { - console.log(event); - if (datum.rtype != "noresult") { - var win; - if (dataset == "topics") { - win = window.open('/topics/' + datum.id, '_blank'); - } else if (dataset == "maps") { - win = window.open('/maps/' + datum.id, '_blank'); - } else if (dataset == "mappers") { - win = window.open('/maps/mappers/' + datum.id, '_blank'); - } - win.focus(); - closeSearch(0); - } - }); - - - var checkboxChangeInit = false, - minimizeInit = false; - - $('.sidebarSearchField').bind('keyup', function () { - - // when the user selects 'added by me' resend the query with their userid attached - if (!checkboxChangeInit) { - $('.limitToMe').bind("change", function (e) { - // set the value of the search equal to itself to retrigger the autocomplete event - searchIsOpen = false; - $('.sidebarSearchField').typeahead('setQuery', $('.sidebarSearchField').val()); - setTimeout(function () { - searchIsOpen = true; - }, 2000); - }); - checkboxChangeInit = true; - } - - // when the user clicks minimize section, hide the results for that section - if (!minimizeInit) { - $('.minimizeMapperResults').click(function (e) { - var s = $('.tt-dataset-mappers .tt-suggestions'); - console.log(s.css('height')); - if (s.css('height') == '0px') { - $('.tt-dataset-mappers .tt-suggestions').css({ - 'height': 'auto', - 'overflow': 'visible' - }); - $(this).removeClass('maximizeResults').addClass('minimizeResults'); - } else { - $('.tt-dataset-mappers .tt-suggestions').css({ - 'height': '0', - 'overflow': 'hidden' - }); - $(this).removeClass('minimizeResults').addClass('maximizeResults'); - } - }); - $('.minimizeTopicResults').click(function (e) { - var s = $('.tt-dataset-topics .tt-suggestions'); - console.log(s.css('height')); - if (s.css('height') == '0px') { - s.css({ - 'height': 'auto', - 'border-top': 'none', - 'overflow': 'visible' - }); - $(this).removeClass('maximizeResults').addClass('minimizeResults'); - } else { - s.css({ - 'height': '0', - 'border-top': '1px solid rgb(56, 56, 56)', - 'overflow': 'hidden' - }); - $(this).removeClass('minimizeResults').addClass('maximizeResults'); - } - }); - $('.minimizeMapResults').click(function (e) { - var s = $('.tt-dataset-maps .tt-suggestions'); - console.log(s.css('height')); - if (s.css('height') == '0px') { - s.css({ - 'height': 'auto', - 'border-top': 'none', - 'overflow': 'visible' - }); - $(this).removeClass('maximizeResults').addClass('minimizeResults'); - } else { - s.css({ - 'height': '0', - 'border-top': '1px solid rgb(56, 56, 56)', - 'overflow': 'hidden' - }); - $(this).removeClass('minimizeResults').addClass('maximizeResults'); - } - }); - minimizeInit = true; - } - }); - - // - - $('.sidebarSearch button.addToMap').click(function (event) { - event.stopPropagation(); - }); - } // end bindSearchHover - - function bindAccountHover() { - - var accountIsOpen = false - - // controls the sliding hover of the bottom left menu - var sliding1 = false; - var lT; - - var closeAccount = function () { - lT = setTimeout(function () { - if (!sliding1) { - sliding1 = true; - //$('.sidebarAccountIcon').css('background-color', '#0F1519'); - $('.sidebarAccountBox').fadeOut(200, function () { - sliding1 = false; - accountIsOpen = false; - }); - } - }, 300); - } - - var openAccount = function () { - clearTimeout(lT); - if (!sliding1) { - sliding1 = true; - - // hide the other two - $('.sidebarFilterBox').hide(); - $('.sidebarCollaborateBox').hide(); - $('.sidebarFilterIcon').css('background-color', '#0F1519'); - $('.sidebarCollaborateIcon').css('background-color', '#0F1519'); - - //$('.sidebarAccountIcon').css('background-color', '#000'); - $('.sidebarAccountBox').fadeIn(200, function () { - sliding1 = false; - accountIsOpen = true; - }); - } - } - // bind the hover events - $(".sidebarAccount").hover(openAccount, closeAccount); - } // end bindAccountHover - - // bind hover events - bindMainMenuHover(); - bindSearchHover(); - bindAccountHover(); - - // hide notices after 10 seconds - $('.notice.metamaps').delay(10000).fadeOut('fast'); - $('.alert.metamaps').delay(10000).fadeOut('fast'); - - //bind lightbox clicks - $('.openLightbox').click(function (event) { - openLightbox($(this).attr('data-open')); - event.preventDefault(); - return false; - }); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/jquery/MapPage.js b/app/assets/javascripts/jquery/MapPage.js deleted file mode 100644 index 2a9336d0..00000000 --- a/app/assets/javascripts/jquery/MapPage.js +++ /dev/null @@ -1,48 +0,0 @@ -/* MapPage means: -1. being on a Map page - - -*/ - -$(document).ready(function () { - - function bindInfoHover() { - - var infoIsOpen = false; - - // controls the sliding hover of the bottom left menu - var sliding1 = false; - var lT; - - var closeInfo = function () { - lT = setTimeout(function () { - if (!sliding1) { - sliding1 = true; - $('.mapInfoBox').fadeOut(200, function () { - sliding1 = false; - infoIsOpen = false; - }); - } - }, 300); - } - - var openInfo = function (event) { - clearTimeout(lT); - if (!sliding1 && event.target.className != "openCheatsheet openLightbox") { - sliding1 = true; - - $('.mapInfoBox').fadeIn(200, function () { - sliding1 = false; - infoIsOpen = true; - }); - } - } - // bind the hover events - $("div.index").hover(openInfo, closeInfo); - - - } // end bindInfoHover - - bindInfoHover(); - -}); // end document.ready \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/metamapsJIT.js b/app/assets/javascripts/metamaps/JIT.js similarity index 96% rename from app/assets/javascripts/metamaps/metamapsJIT.js rename to app/assets/javascripts/metamaps/JIT.js index 50b3afcc..cf15eb0d 100644 --- a/app/assets/javascripts/metamaps/metamapsJIT.js +++ b/app/assets/javascripts/metamaps/JIT.js @@ -2475,7 +2475,9 @@ Extras.Classes.Navigation = new Class({ this.pressed = true; //START METAMAPS CODE - if (!Metamaps.Mouse.boxStartCoordinates && e.shiftKey) { + var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); + // TODO make sure this works across browsers + if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos(); } Metamaps.Mouse.didPan = false; @@ -2499,12 +2501,13 @@ Extras.Classes.Navigation = new Class({ if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return; // START METAMAPS CODE - if (!Metamaps.Mouse.boxStartCoordinates && e.shiftKey) { + var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); + if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { Metamaps.Visualize.mGraph.busy = true; Metamaps.boxStartCoordinates = eventInfo.getPos(); return; } - if (Metamaps.Mouse.boxStartCoordinates && e.shiftKey) { + if (Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { Metamaps.Visualize.mGraph.busy = true; Metamaps.JIT.drawSelectBox(eventInfo,e); return; diff --git a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js new file mode 100644 index 00000000..1c577c6d --- /dev/null +++ b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js @@ -0,0 +1,526 @@ +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 this one +GlobalUI + +* all these get added when you are on a page with the Javascript Infovis Toolkit +Settings +Touch +Mouse +Active +Selected +Maps +Mappers +Metacodes +Topics +Synapses +Mappings +Backbone +Create +TopicCard +SynapseCard +Visualize +Util +Realtime +Control +Filter +Listeners +Organize +Topic +Synapse +Map +Mapper +JIT +*/ + + +$(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(); + } + } + + //Metamaps.Visualize.type = "ForceDirected3D"; + // this line could maybe go at the end of the Metamaps.JIT init function + if (Metamaps.JIT) Metamaps.JIT.prepareVizData(); +}); + +Metamaps.GlobalUI = { + notifyTimeout: null, + init: function () { + var self = Metamaps.GlobalUI; + + self.Search.init(); + self.MainMenu.init(); + self.CreateMap.init(); + self.Account.init(); + + //bind lightbox clicks + $('.openLightbox').click(function (event) { + self.openLightbox($(this).attr('data-open')); + event.preventDefault(); + return false; + }); + + // hide notices after 10 seconds + $('.notice.metamaps').delay(10000).fadeOut('fast'); + $('.alert.metamaps').delay(10000).fadeOut('fast'); + }, + openLightbox: function (which) { + $('.lightboxContent').hide(); + $('#' + which).show(); + + $('#lightbox_overlay').show(); + $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px'); + + if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) { + $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({ + mouseWheelPixels: 200, + advanced: { + updateOnContentResize: true + } + }); + Metamaps.Create.metacodeScrollerInit = true; + } + if (which == "switchMetacodes") { + Metamaps.Create.isSwitchingSet = true; + } + }, + + closeLightbox: function () { + $('#lightbox_overlay').hide(); + Metamaps.GlobalUI.CreateMap.reset('fork_map'); + Metamaps.GlobalUI.CreateMap.reset('new_map'); + if (Metamaps.Create && Metamaps.Create.isSwitchingSet) { + Metamaps.Create.cancelMetacodeSetSwitch(); + } + }, + notifyUser: function (message) { + var self = Metamaps.GlobalUI; + + if ($('.notice.metamaps').length == 0) { + $('body').prepend('
'); + } + $('.notice.metamaps').hide().html(message).fadeIn('fast'); + + clearTimeout(self.notifyTimeOut); + self.notifyTimeOut = setTimeout(function () { + $('.notice.metamaps').fadeOut('fast'); + }, 8000); + } +}; + +Metamaps.GlobalUI.MainMenu = { + isOpen: false, + timeOut: null, + changing: false, + init: function () { + var self = Metamaps.GlobalUI.MainMenu; + + $(".logo").hover(self.open, self.close); + + // when on touch screen, make touching on the logo do what hovering does on desktop + $("#mainTitle a").bind('touchend', function (evt) { + if (!self.isOpen) { + self.openMenu(); + evt.preventDefault(); + evt.stopPropagation(); + } + }); + }, + open: function () { + var self = Metamaps.GlobalUI.MainMenu; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing) { + self.changing = true; + + // toggle the upper right rounded corner off + $('.footer').css('border-top-right-radius', '0'); + + // move the hamburger menu icon a little bit further out + $('.logo').animate({ + 'background-position-x': '-7px' + }, 200); + + // fade the main part of the menu in + $('.footer .menu').fadeIn(200, function () { + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function () { + var self = Metamaps.GlobalUI.MainMenu; + + self.timeOut = setTimeout(function () { + if (!self.changing) { + self.changing = true; + + // set back to having a rounder upper right corner + $('.footer').css('border-top-right-radius', '5px'); + + // move the hamburger menu icon further to the left, more hidden again + $('.logo').animate({ + 'background-position-x': '-10px' + }, 200); + + // fade out the main menu + $('.footer .menu').fadeOut(200, function () { + self.changing = false; + self.isOpen = false; + }); + } + }, 500); + } +}; + + +Metamaps.GlobalUI.CreateMap = { + init: function () { + + // bind permission changer events on the createMap form + $('.permIcon').click(function () { + $(this).siblings('#map_permission').val($(this).attr('data-permission')); + $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); + $(this).find('.mapPermIcon').addClass('selected'); + }); + + }, + reset: function (id) { + + var form = $('#' + id); + + form.find('#map_name').val(''); + form.find('#map_desc').val(''); + form.find('#map_permission').val('commons'); + + if (id == "fork_map") { + form.find('#map_topicsToMap').val('0'); + form.find('#map_synapsesToMap').val('0'); + } + + // remove a selected state from all three of them + form.find('.mapPermIcon').removeClass('selected'); + // add a selected state back to commons permission, the default + form.find('.mapCommonsIcon').addClass('selected'); + + return false; + }, +}; + + +Metamaps.GlobalUI.Account = { + isOpen: false, + timeOut: null, + changing: false, + init: function () { + var self = Metamaps.GlobalUI.Account; + + $(".sidebarAccount").hover(self.open, self.close); + }, + open: function () { + var self = Metamaps.GlobalUI.Account; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing) { + self.changing = true; + $('.sidebarAccountBox').fadeIn(200, function () { + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function () { + var self = Metamaps.GlobalUI.Account; + + self.timeOut = setTimeout(function () { + if (!self.changing) { + self.changing = true; + $('.sidebarAccountBox').fadeOut(200, function () { + self.changing = false; + self.isOpen = false; + }); + } + }, 500); + } +}; + + + +Metamaps.GlobalUI.Search = { + isOpen: false, + timeOut: null, + changing: false, + optionsInitialized: false, + init: function () { + var self = Metamaps.GlobalUI.Search; + + // bind the hover events + $(".sidebarSearch").hover(function () { + self.open() + }, function () { + self.close(800, false) + }); + + $('.sidebarSearchIcon').click(function (e) { + $('.sidebarSearchField').focus(); + }); + $('.sidebarSearch').click(function (e) { + e.stopPropagation(); + }); + $('body').click(function (e) { + self.close(0, false); + }); + + // open if the search is closed and user hits ctrl+/ + // close if they hit ESC + $('body').bind('keydown', function (e) { + switch (e.which) { + case 191: + if (e.ctrlKey && !self.isOpen) { + self.open(); + } + break; + case 27: + if (self.isOpen) { + self.close(0, true); + } + break; + default: + break; //console.log(e.which); + } + }); + + self.startTypeahead(); + }, + open: function () { + var self = Metamaps.GlobalUI.Search; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing) { + self.changing = true; + $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ + width: '200px' + }, 200, function () { + $('.sidebarSearchField, .sidebarSearch .tt-hint').css({ + padding: '5px 10px', + width: '180px' + }); + $('.sidebarSearchField').focus(); + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function (closeAfter, bypass) { + var self = Metamaps.GlobalUI.Search; + + self.timeOut = setTimeout(function () { + if (!self.changing && self.isOpen && (bypass || $('.sidebarSearchField').val() == '')) { + self.changing = true; + $('.sidebarSearchField, .sidebarSearch .tt-hint').css({ + padding: '5px 0', + width: '200px' + }); + $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ + width: '0' + }, 200, function () { + $('.sidebarSearchField').typeahead('setQuery', ''); + $('.sidebarSearchField').blur(); + self.changing = false; + self.isOpen = false; + }); + } + }, closeAfter); + }, + startTypeahead: function () { + var self = Metamaps.GlobalUI.Search; + + // TODO stop using userid + var mapheader = userid ? '

Maps

' : '

Maps

'; + var topicheader = userid ? '

Topics

' : '

Topics

'; + var mapperheader = '

Mappers

'; + + var topics = { + name: 'topics', + limit: 9999, + dupChecker: function (datum1, datum2) { + return false; + }, + template: $('#topicSearchTemplate').html(), + remote: { + url: '/search/topics?term=%QUERY', + replace: function () { + var q = '/search/topics?term=' + $('.sidebarSearchField').val(); + if ($("#limitTopicsToMe").is(':checked')) { + q += "&user=" + userid.toString(); + } + return q; + }, + filter: function (dataset) { + if (dataset.length == 0) { + dataset.push({ + value: "No results", + label: "No results", + typeImageURL: "/assets/icons/wildcard.png", + rtype: "noresult" + }); + } + return dataset; + } + }, + engine: Hogan, + header: topicheader + }; + + var maps = { + name: 'maps', + limit: 9999, + dupChecker: function (datum1, datum2) { + return false; + }, + template: $('#mapSearchTemplate').html(), + remote: { + url: '/search/maps?term=%QUERY', + replace: function () { + var q = '/search/maps?term=' + $('.sidebarSearchField').val(); + if ($("#limitMapsToMe").is(':checked')) { + q += "&user=" + userid.toString(); + } + return q; + }, + filter: function (dataset) { + if (dataset.length == 0) { + dataset.push({ + value: "No results", + label: "No results", + rtype: "noresult" + }); + } + return dataset; + } + }, + engine: Hogan, + header: mapheader + }; + + var mappers = { + name: 'mappers', + limit: 9999, + dupChecker: function (datum1, datum2) { + return false; + }, + template: $('#mapperSearchTemplate').html(), + remote: { + url: '/search/mappers?term=%QUERY', + filter: function (dataset) { + if (dataset.length == 0) { + dataset.push({ + value: "No results", + label: "No results", + rtype: "noresult" + }); + } + return dataset; + } + }, + engine: Hogan, + header: mapperheader + }; + $('.sidebarSearchField').typeahead([topics, maps, mappers]); + + //Set max height of the search results box to prevent it from covering bottom left footer + $('.sidebarSearchField').bind('typeahead:opened', function (event) { + var h = $(window).height(); + $(".tt-dropdown-menu").css('max-height', h - 100); + }); + $(window).resize(function () { + var h = $(window).height(); + $(".tt-dropdown-menu").css('max-height', h - 100); + }); + + // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on + $('.sidebarSearchField').bind('typeahead:selected', self.handleResultClick); + // don't do it, if they clicked on a 'addToMap' button + $('.sidebarSearch button.addToMap').click(function (event) { + event.stopPropagation(); + }); + + // make sure that when you click on 'limit to me' or 'toggle section' it works + $('.sidebarSearchField').bind('keyup', self.initSearchOptions); + + }, + handleResultClick: function (event, datum, dataset) { + var self = Metamaps.GlobalUI.Search; + + if (datum.rtype != "noresult") { + self.close(0, true); + var win; + if (dataset == "topics") { + win = window.open('/topics/' + datum.id, '_blank'); + } else if (dataset == "maps") { + win = window.open('/maps/' + datum.id, '_blank'); + } else if (dataset == "mappers") { + win = window.open('/maps/mappers/' + datum.id, '_blank'); + } + win.focus(); + } + }, + initSearchOptions: function () { + var self = Metamaps.GlobalUI.Search; + + function toggleResultSet(set) { + var s = $('.tt-dataset-' + set + ' .tt-suggestions'); + if (s.css('height') == '0px') { + s.css({ + 'height': 'auto', + 'border-top': 'none', + 'overflow': 'visible' + }); + $(this).removeClass('maximizeResults').addClass('minimizeResults'); + } else { + s.css({ + 'height': '0', + 'border-top': '1px solid rgb(56, 56, 56)', + 'overflow': 'hidden' + }); + $(this).removeClass('minimizeResults').addClass('maximizeResults'); + } + } + + if (!self.optionsInitialized) { + + $('.limitToMe').bind("change", function (e) { + // set the value of the search equal to itself to retrigger the autocomplete event + self.isOpen = false; + $('.sidebarSearchField').typeahead('setQuery', $('.sidebarSearchField').val()); + setTimeout(function () { + self.isOpen = true; + }, 2000); + }); + + // when the user clicks minimize section, hide the results for that section + $('.minimizeMapperResults').click(function (e) { + toggleResultSet.call(this, 'mappers'); + }); + $('.minimizeTopicResults').click(function (e) { + toggleResultSet.call(this, 'topics'); + }); + $('.minimizeMapResults').click(function (e) { + toggleResultSet.call(this, 'maps'); + }); + + self.optionsInitialized = true; + } + } +}; \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.JIT.js b/app/assets/javascripts/metamaps/Metamaps.JIT.js new file mode 100644 index 00000000..5534d9e0 --- /dev/null +++ b/app/assets/javascripts/metamaps/Metamaps.JIT.js @@ -0,0 +1,1533 @@ +Metamaps.JIT = { + vizData: [], // contains the visualization-compatible graph + graphRendered: false, // flag indicates if we have rendered the data so we don't bother doing it again wastefully + /** + * This method will bind the event handlers it is interested and initialize the class. + */ + init: function () { + var self = Metamaps.JIT; + + + }, + /** + * convert our topic JSON into something JIT can use + */ + prepareVizData: function () { + var self = Metamaps.JIT; + var topic; + + var node; + var nodes = {}; + var existingEdge; + var edge; + var edges = []; + + Metamaps.Topics.each(function (t) { + node = t.createNode(); + nodes[node.id] = node; + }); + Metamaps.Synapses.each(function (s) { + edge = s.createEdge(); + + existingEdge = _.findWhere(edges, { + nodeFrom: edge.nodeFrom, + nodeTo: edge.nodeTo + }); + // also try the opposite + if (!existingEdge) { + existingEdge = _.findWhere(edges, { + nodeFrom: edge.nodeTo, + nodeTo: edge.nodeFrom + }); + } + + if (existingEdge) { + // for when you're dealing with multiple relationships between the same two topics + existingEdge['$mappingIDs'].push(m.isNew() ? m.cid : m.id); + existingEdge['$synapseIDs'].push(m.get('synapse_id')); + } else { + // for when you're dealing with a topic that has relationships to many different nodes + nodes[edge.nodeFrom].adjacencies.push(edge); + } + }); + _.each(nodes, function (node) { + self.vizData.push(node); + }); + + if (self.vizData.length == 0) { + Metamaps.Visualize.loadLater = true; + } + + Metamaps.Visualize.render("infovis", self.vizData); + }, // 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 = adj.getData("synapses")[0]; // for now, just grab the first synapse + + var directionCat = synapse.get("category"); + + //label placement on edges + Metamaps.JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse); + + //check for edge label in data + var desc = synapse.get("desc"); + + var showDesc = adj.getData("showDesc"); + + if (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 = 'hanging'; + + 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) + 8; + 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(); + + //render text + ctx.fillStyle = '#222222'; + ctx.textAlign = 'center'; + for (index = 0; index < arrayOfLabelLines.length; ++index) { + ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index)); + } + } + }, // edgeRender + edgeRenderEmbed: function (adj, canvas) { + //get nodes cartesian coordinates + var pos = adj.nodeFrom.pos.getc(true); + var posChild = adj.nodeTo.pos.getc(true); + + var directionCat = adj.getData("category"); + //label placement on edges + Metamaps.JIT.renderEdgeArrows(this.edgeHelper, adj); + + //check for edge label in data + var desc = adj.getData("desc"); + var showDesc = adj.getData("showDesc"); + if (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 = 'hanging'; + + 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) + 8; + 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(); + + //render text + ctx.fillStyle = '#222222'; + ctx.textAlign = 'center'; + for (index = 0; index < arrayOfLabelLines.length; ++index) { + ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index)); + } + } + }, // edgeRenderEmbed + ForceDirected: { + animateSavedLayout: { + modes: ['linear'], + transition: $jit.Trans.Quad.easeInOut, + duration: 800, + onComplete: function () { + Metamaps.Visualize.mGraph.busy = false; + } + }, + animateFDLayout: { + modes: ['linear'], + transition: $jit.Trans.Elastic.easeOut, + duration: 2500, + 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: 0.4 + }, + //Native canvas text styling + Label: { + type: 'Native', //Native or HTML + size: 20, + family: 'arial', + textBaseline: 'hanging', + 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); + }, + //Update node positions when dragged + onDragMove: function (node, eventInfo, e) { + Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); + }, + onDragEnd: function (node, eventInfo, e) { + Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); + }, + 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) { + Metamaps.Visualize.mGraph.busy = false; + Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); + Metamaps.JIT.selectNodesWithBox(); + 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); + } else if (node && !node.nodeFrom) { + Metamaps.JIT.selectNodeOnClickHandler(node, e); + } else { + Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); + } //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.selectNodesWithBox(); + 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'); + } //if + } + }, + //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'), + cat = topic ? topic.getMetacode().get('name') : false, + ctx = canvas.getCtx(); + + // if the topic is selected draw a circle around it + if (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 (!cat || !imgArray[cat].complete || (typeof imgArray[cat].naturalWidth !== "undefined" && imgArray[cat].naturalWidth === 0)) { + ctx.beginPath(); + ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false); + ctx.fillStyle = '#B6B2FD'; + ctx.fill(); + } else { + ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2); + } + }, + '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(true), + to = adj.nodeTo.pos.getc(true); + + return $jit.Graph.Plot.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); + } + } + }, + embed: { + graphSettings: { + + }, + nodeSettings: { + + }, + edgeSettings: { + 'customEdge': { + 'render': function (adj, canvas) { + Metamaps.JIT.edgeRenderEmbed(adj, 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, adj.Edge.epsilon); + } + } + } + } + }, // 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: { + + }, + embed: { + graphSettings: { + + }, + nodeSettings: { + + }, + edgeSettings: { + + } + } + }, // ForceDirected3D + RGraph: { + animate: { + modes: ['polar'], + duration: 2000, + 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, + type: 'HTML', + //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', + CanvasStyles: { + strokeStyle: '#333', + lineWidth: 1.5 + } + }, + //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: '#222222', + type: 'customEdge', + lineWidth: 2, + alpha: 0.4 + }, + //Native canvas text styling + Label: { + type: 'HTML', //Native or HTML + size: 20, + //style: 'bold' + }, + //Add Tips + Tips: { + enable: false, + onShow: function (tip, node) {} + }, + // Add node events + Events: { + enable: true, + enableForEdges: true, + type: 'HTML', + onMouseMove: function (node, eventInfo, e) { + Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e); + }, + //Update node positions when dragged + onDragMove: function (node, eventInfo, e) { + Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); + }, + onDragEnd: function (node, eventInfo, e) { + Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); + }, + 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); + Metamaps.Visualize.mGraph.labels.hideLabel(Metamaps.Visualize.mGraph.graph.getNode(Metamaps.TopicCard.openTopicCard)); + } + }, + //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) { + + if (Metamaps.Mouse.boxStartCoordinates) { + Metamaps.Visualize.mGraph.busy = false; + Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); + Metamaps.JIT.selectNodesWithBox(); + 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); + } else if (node && !node.nodeFrom) { + Metamaps.JIT.selectNodeOnClickHandler(node, e); + } else { + Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); + } //if + } + }, + //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'), + cat = node.getData('metacode'), + ctx = canvas.getCtx(); + // if the topic is on the Canvas draw a white circle around it + if (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(); + } + try { + ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2); + } catch (e) { + alert("You've got an topic causing an issue! It's ->this-> one: " + cat); + } + }, + 'contains': function (node, pos) { + var npos = node.pos.getc(true), + dim = node.getData('dim'); + return this.nodeHelper.circle.contains(npos, pos, dim); + } + } + }, + edgeSettings: { + 'customEdge': { + 'render': function (adj, canvas) { + Metamaps.JIT.edgeRender(adj, 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, adj.Edge.epsilon); + } + } + }, + embed: { + graphSettings: { + + }, + nodeSettings: { + + }, + edgeSettings: { + 'customEdge': { + 'render': function (adj, canvas) { + Metamaps.JIT.edgeRenderEmbed(adj, 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, adj.Edge.epsilon); + } + } + } + } + }, // RGraph + onMouseEnter: function (edge) { + + $('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, + alpha: 1 + }); + Metamaps.Visualize.mGraph.fx.animate({ + modes: ['edge-property:lineWidth:color:alpha'], + duration: 100 + }); + Metamaps.Visualize.mGraph.plot(); + } + }, // onMouseEnter + onMouseLeave: function (edge) { + $('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, + alpha: 0.4 + }); + Metamaps.Visualize.mGraph.fx.animate({ + modes: ['edge-property:lineWidth:color:alpha'], + 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 () { + // this is to submit new topic creation + if (Metamaps.Create.newTopic.beingCreated) { + Metamaps.Topic.createTopicLocally(); + } 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; + + console.log(scale); + + 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; + + if (node && !node.nodeFrom) { + Metamaps.Create.newTopic.hide(); + Metamaps.Create.newSynapse.hide(); + 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.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) { + 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); + node.setData('xloc', pos.x); + node.setData('yloc', pos.y); + } 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); + n.setData('xloc', x); + n.setData('yloc', y); + } //for + } //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) && userid != null) { + if (tempInit == false) { + tempNode = node; + tempInit = true; + + // 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.Visualize.mGraph.plot(); + + 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.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas); + Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas); + } 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"); + $('#new_synapse').css('left', myX + "px"); + $('#new_synapse').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 + }; + } + } + } + }, // onDragMoveTopicHandler + onDragCancelHandler: function (node, eventInfo, e) { + tempNode = null; + 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 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.id; + Metamaps.Create.newSynapse.topic2id = tempNode2.id; + 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 + mapping = node.getData('mapping'); + mapping.set({ + xloc: node.getPos().x, + yloc: node.getPos().y + }); + mapping.save(); + } + }, //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; + + if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE && !Metamaps.Mouse.didPan) { + // 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.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; + 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) { + Metamaps.Control.selectNode(node); + return 'deselect'; + } + if (Metamaps.Selected.Nodes.indexOf(node) == -1) { + if (e.shiftKey) { + Metamaps.Control.selectNode(node); + return 'nothing'; + } else { + return 'only-drag-this-one'; + } + } + return 'nothing'; //case 4? + }, // handleSelectionBeforeDragging + selectNodesWithBox: function () { + + var sX = Metamaps.Mouse.boxStartCoordinates.x, + sY = Metamaps.Mouse.boxStartCoordinates.y, + eX = Metamaps.Mouse.boxEndCoordinates.x, + eY = Metamaps.Mouse.boxEndCoordinates.y; + + + 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)) { + var nodeIsSelected = Metamaps.Selected.Nodes.indexOf(n); + if (nodeIsSelected == -1) Metamaps.Control.selectNode(n); // the node is not selected, so select it + else if (nodeIsSelected != -1) Metamaps.Control.deselectNode(n); // the node is selected, so deselect it + + } + }); + + Metamaps.Mouse.boxStartCoordinates = false; + Metamaps.Mouse.boxEndCoordinates = false; + Metamaps.Visualize.mGraph.plot(); + }, // selectNodesWithBox + 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()) { + if (!e.shiftKey) { + Metamaps.Control.deselectAllNodes(); + Metamaps.Control.deselectAllEdges(); + } + if (node.selected) { + Metamaps.Control.deselectNode(node); + } else { + Metamaps.Control.selectNode(node); + } + //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; + + // 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 = '
    '; + + if (userid != null) menustring += '
  • Delete
    • '; + if (Metamaps.Active.Map.id && userid != null) menustring += '
  • Remove from map
    • '; + menustring += '
  • Hide until refresh
    • '; + + if (!Metamaps.Active.Map) menustring += '
  • Center this topic
    • '; + menustring += '
  • Open in new tab
    • '; + if (userid) { + var options = '
    • commons
      • \ +
    • public
      • \ +
    • private
      • \ +
    '; + + menustring += '
  • Change permissions' + options + '
    • '; + } + + menustring += '
'; + rightclickmenu.innerHTML = menustring; + + // position the menu where the click happened + $(rightclickmenu).css({ + left: e.clientX, + top: e.clientY + }); + //add the menu to the page + $('#center-container').append(rightclickmenu); + + + // attach events to clicks on the list items + + // delete the selected things from the database + $('.rc-delete').click(function () { + $('.rightclickmenu').remove(); + 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 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(); + } + }); + + // remove the selected things from the map + $('.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(); + 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()); + }); + + }, //selectNodeOnRightClickHandler + 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()) { + if (!e.shiftKey) { + Metamaps.Control.deselectAllNodes(); + Metamaps.Control.deselectAllEdges(); + } + if (Metamaps.Selected.Edges.indexOf(adj) !== -1) { + 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 + + 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 = '
    '; + + if (Metamaps.Active.Mapper) menustring += '
  • Delete
    • '; + if (Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) { + menustring += '
  • Remove from map
    • '; + } + menustring += '
  • Hide until refresh
    • '; + if (Metamaps.Active.Mapper) { + var options = '
    • commons
      • \ +
    • public
      • \ +
    • private
      • \ +
    '; + + menustring += '
  • Change permissions' + options + '
    • '; + } + + menustring += '
'; + rightclickmenu.innerHTML = menustring; + + // position the menu where the click happened + $(rightclickmenu).css({ + left: e.clientX, + top: e.clientY + }); + //add the menu to the page + $('#center-container').append(rightclickmenu); + + + // attach events to clicks on the list items + + // delete the selected things from the database + $('.rc-delete').click(function () { + $('.rightclickmenu').remove(); + 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 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(); + } + }); + + // remove the selected things from the map + $('.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); + 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 = "#222222"; + ctx.lineWidth = 2; + ctx.globalAlpha = 0.4; + } + 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) { + + var self = Metamaps.JIT; + + var canvas = Metamaps.Visualize.mGraph.canvas; + + 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 direction = adj.data.$direction; + var inv = (direction && direction.length > 1 && 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 +}; \ No newline at end of file diff --git a/app/assets/javascripts/Jit/filter.js b/app/assets/javascripts/metamaps/codeleft.js similarity index 58% rename from app/assets/javascripts/Jit/filter.js rename to app/assets/javascripts/metamaps/codeleft.js index dc409f8c..12230b3c 100644 --- a/app/assets/javascripts/Jit/filter.js +++ b/app/assets/javascripts/metamaps/codeleft.js @@ -1,3 +1,69 @@ +function fetchRelatives(node) { + var myA = $.ajax({ + type: "Get", + url: "/topics/" + node.id + "?format=json", + success: function (data) { + if (gType == "centered") { + Mconsole.busy = true; + Mconsole.op.sum(data, { + type: 'fade', + duration: 500, + hideLabels: false + }); + Mconsole.graph.eachNode(function (n) { + n.eachAdjacency(function (a) { + if (!a.getData('showDesc')) { + a.setData('alpha', 0.4, 'start'); + a.setData('alpha', 0.4, 'current'); + a.setData('alpha', 0.4, 'end'); + } + }); + }); + Mconsole.busy = false; + } else { + Mconsole.op.sum(data, { + type: 'nothing', + }); + Mconsole.plot(); + } + }, + error: function () { + alert('failure'); + } + }); +} + +function centerOn(nodeid) { + if (!Mconsole.busy) { + var node = Mconsole.graph.getNode(nodeid); + $('div.index img').attr('src', imgArray[node.getData('metacode')].src); + $('div.index .mapName').html(node.name); + $(document).attr('title', node.name + ' | Metamaps'); + window.history.pushState(node.name, "Metamaps", "/topics/" + node.id); + Mconsole.onClick(node.id, { + hideLabels: false, + duration: 1000, + onComplete: function () { + fetchRelatives(node); + } + }); + } +} + + + +function MconsoleReset() { + + var tX = Mconsole.canvas.translateOffsetX; + var tY = Mconsole.canvas.translateOffsetY; + Mconsole.canvas.translate(-tX, -tY); + + var mX = Mconsole.canvas.scaleOffsetX; + var mY = Mconsole.canvas.scaleOffsetY; + Mconsole.canvas.scale((1 / mX), (1 / mY)); +} + + // create filters for maps function switchVisible(category, duration) { @@ -120,64 +186,4 @@ function filterTopicsByName(searchQuery) { duration: 500 }); }); -} // filterTopicsByName - -function clearCanvas() { - Mconsole.graph.eachNode(function(n) { - Mconsole.graph.removeNode(n.id); - }); - Mconsole.plot(); -} - -function clearCanvasExceptRoot() { - var ids = new Array(); - Mconsole.graph.eachNode(function(n) { - ids.push(n.id); - }); - - var root = Mconsole.graph.nodes[Mconsole.root]; - ids.forEach(function(id, index) { - if (id != root.id) { - Mconsole.graph.removeNode(id); - } - }); - fetchRelatives(root); //also runs Mconsole.plot() -} - -/** - * Define all the dynamic interactions for the Filter By Metacode using Jquery - */ - -$(document).ready(function() { - $('.sidebarFilterBox .showAll').click(function(e) { - showAll(); - $('#filter_by_metacode ul li').removeClass('toggledOff'); - for (var catVis in categoryVisible) { - categoryVisible[catVis] = true; - } - }); - $('.sidebarFilterBox .hideAll').click(function(e) { - hideAll(); - $('#filter_by_metacode ul li').addClass('toggledOff'); - for (var catVis in categoryVisible) { - categoryVisible[catVis] = false; - } - }); - - // toggle visibility of topics with metacodes based on status in the filters list - $('#filter_by_metacode ul li').click(function(event) { - - var category = $(this).children('img').attr('alt'); - switchVisible(category); - - // toggle the image and the boolean array value - if (categoryVisible[category] == true) { - $(this).addClass('toggledOff'); - categoryVisible[category] = false; - } - else if (categoryVisible[category] == false) { - $(this).removeClass('toggledOff'); - categoryVisible[category] = true; - } - }); -}); \ No newline at end of file +} // filterTopicsByName \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/metamaps.js b/app/assets/javascripts/metamaps/metamaps.js index 635f5c27..358c945e 100644 --- a/app/assets/javascripts/metamaps/metamaps.js +++ b/app/assets/javascripts/metamaps/metamaps.js @@ -1,5 +1,3 @@ -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 - var labelType, useGradients, nativeTextSupport, animate; (function () { @@ -16,35 +14,15 @@ var labelType, useGradients, nativeTextSupport, animate; 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; -$(document).ready(function () { - - _.templateSettings = { - interpolate: /{{(.+?)}}/g - }; - - for (var prop in Metamaps) { - if (Metamaps.hasOwnProperty(prop) && - Metamaps[prop].hasOwnProperty('init') && - typeof (Metamaps[prop].init) == 'function' - ) { - Metamaps[prop].init(); - } - } - - Metamaps.JIT.prepareVizData(); -}); - Metamaps.Settings = { - realtime: false, // indicates whether the user wants to be playing in the app with realtime updates to their topics 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 - selectedMetacodeSet: null, // will get initialized - selectedMetacodeSetIndex: null, // will get initialized colors: { background: '#344A58', synapses: { @@ -62,14 +40,49 @@ Metamaps.Settings = { } }; -// only one of these will be active at a time -// Map if you're on a map page -// Topic if you're on a topic page -Metamaps.Active = { - Map: null, - Topic: null +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, + changeInX: 0, + changeInY: 0, + edgeHoveringOver: false, + boxStartCoordinates: false, + boxEndCoordinates: false, + synapseStartCoordinates: [], + synapseEndCoordinates: null, + lastNodeClick: 0, + lastCanvasClick: 0, + DOUBLE_CLICK_TOLERANCE: 300 +}; + +Metamaps.Active = { + Map: null, + Topic: null, + Mapper: null +}; + +Metamaps.Selected = { + Nodes: [], + Edges: [] +}; + +Metamaps.Maps = {}; // will be initialized in Metamaps.Backbone.init as a MapCollection +Metamaps.Mappers = {}; // will be initialized in Metamaps.Backbone.init as a MapperCollection +Metamaps.Metacodes = {}; // will be initialized in Metamaps.Backbone.init as a MetacodeCollection +Metamaps.Topics = {}; // will be initialized in Metamaps.Backbone.init as a TopicCollection +Metamaps.Synapses = {}; // will be initialized in Metamaps.Backbone.init as a SynapseCollection +Metamaps.Mappings = {}; // will be initialized in Metamaps.Backbone.init as a MappingCollection + + +/* +* +* BACKBONE +* +*/ Metamaps.Backbone = { init: function () { var self = Metamaps.Backbone; @@ -82,7 +95,7 @@ Metamaps.Backbone = { self.Topic = Backbone.Model.extend({ urlRoot: '/topics', - blacklist: ['mappings'], + blacklist: ['node', 'created_at', 'updated_at'], toJSON: function (options) { return _.omit(this.attributes, this.blacklist); }, @@ -92,8 +105,7 @@ Metamaps.Backbone = { "user_id": Metamaps.Active.Mapper.id, "desc": '', "link": '', - "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons', - "mappings": [] + "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons' }); } }, @@ -105,16 +117,6 @@ Metamaps.Backbone = { if (mapper && this.get('user_id') === mapper.get('id')) return true; else return false; }, - updateMappings: function () { - var mappings = this.get('mappings'), - l = mappings.length, - i; - - for (i = 0; i < l; i++) { - mappings[i].set('topic_id', this.id); - if (!mappings[i].isNew()) mappings[i].save(); - } - }, getDate: function () { }, @@ -123,7 +125,41 @@ Metamaps.Backbone = { }, getMetacode: function () { return Metamaps.Metacodes.get(this.get('metacode_id')); - } + }, + getMapping: function () { + return Metamaps.Mappings.findWhere({ + map_id: Metamaps.Active.Map.id, + topic_id: this.isNew() ? this.cid : this.id + }); + }, + updateMapping: function () { + var mapping = this.getMapping(); + + if (mapping) { + mapping.set('topic_id', this.id); + } + }, + createNode: function () { + var mapping = this.getMapping(); + var node = { + adjacencies: [], + data: { + $mapping: null, + $mappingID: mapping ? mapping.id : null + }, + id: this.isNew() ? this.cid : this.id, + name: this.get('name') + }; + return node; + }, + updateNode: function () { + var mapping = this.getMapping(); + var node = this.get('node'); + node.setData('topic', this); + node.setData('mapping', mapping); + node.id = this.isNew() ? this.cid : this.id; + return node; + }, }); self.TopicCollection = Backbone.Collection.extend({ @@ -138,6 +174,10 @@ Metamaps.Backbone = { self.Synapse = Backbone.Model.extend({ urlRoot: '/synapses', + blacklist: ['edge', 'created_at', 'updated_at'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, initialize: function () { if (this.isNew()) { this.set({ @@ -155,16 +195,6 @@ Metamaps.Backbone = { if (mapper && this.get('user_id') === mapper.get('id')) return true; else return false; }, - updateMappings: function () { - var mappings = this.get('mappings'), - l = mappings.length, - i; - - for (i = 0; i < l; i++) { - mappings[i].set('synapse_id', this.id); - if (!mappings[i].isNew()) mappings[i].save(); - } - }, getUser: function () { return Metamaps.Mapper.get(this.get('user_id')); }, @@ -175,13 +205,48 @@ Metamaps.Backbone = { return Metamaps.Topic.get(this.get('node2_id')); }, getDirection: function () { - var mapping1 = this.getTopic1().get('mappings')[0], - mapping2 = this.getTopic2().get('mappings')[0]; return [ - mapping1.isNew() ? mapping1.cid : mapping1.id, - mapping2.isNew() ? mapping2.cid : mapping2.id - ]; - } + this.get('node1_id'), + this.get('node2_id') + ]; + }, + getMapping: function () { + return Metamaps.Mappings.findWhere({ + map_id: Metamaps.Active.Map.id, + synapse_id: this.isNew() ? this.cid : this.id + }); + }, + updateMapping: function () { + var mapping = this.getMapping(); + + if (mapping) { + mapping.set('synapse_id', this.id); + } + }, + createEdge: function () { + var mapping = this.getMapping(); + var mappingID = mapping.isNew() ? mapping.cid : mapping.id; + var synapseID = this.isNew() ? this.cid : this.id; + + var edge = { + nodeFrom: this.get('node1_id'), + nodeTo: this.get('node2_id'), + data: { + $mappings: [], + $mappingIDs: [mappingID], + $synapses: [], + $synapseIDs: [synapseID], + } + }; + return edge; + }, + updateEdge: function () { + var mapping = this.getMapping(); + var edge = this.get('edge'); + edge.getData('mappings').push(mapping); + edge.getData('synapses').push(this); + return edge; + }, }); self.SynapseCollection = Backbone.Collection.extend({ @@ -191,23 +256,17 @@ Metamaps.Backbone = { self.Mapping = Backbone.Model.extend({ urlRoot: '/mappings', - blacklist: ['node', 'edge'], + blacklist: ['created_at', 'updated_at'], toJSON: function (options) { return _.omit(this.attributes, this.blacklist); }, initialize: function () { - var topic = this.getTopic(), - synapse = this.getSynapse(); - if (this.isNew()) { this.set({ "user_id": Metamaps.Active.Mapper.id, "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null }); } - - if (topic) topic.set('mappings', [this]); - else if (synapse) synapse.set('mappings', [this]); }, getUser: function () { return Metamaps.Mapper.get(this.get('user_id')); @@ -222,51 +281,7 @@ Metamaps.Backbone = { getSynapse: function () { if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id')); else return false; - }, - createNode: function () { - var topic = this.getTopic(); - if (topic) { - var node = { - id: this.isNew() ? this.cid : this.id, - name: topic.get('name') - }; - return node; - } else return false; - }, - updateNode: function () { - var topic = this.getTopic(); - if (topic) { - var node = this.get('node'); - node.setData('topic', topic); - node.setData('mapping', this); - node.id = this.isNew() ? this.cid : this.id; - return node; - } else return false; - }, - createEdge: function () { - var synapse = this.getSynapse(); - if (synapse) { - var edge = { - nodeFrom: synapse.getTopic1().get('mappings')[0].id, - nodeTo: synapse.getTopic2().get('mappings')[0].id, - data: { - $synapses: [], - $mappings: [] - } - }; - return edge; - } else return false; - }, - updateEdge: function () { - var synapse = this.getSynapse(); - if (synapse) { - var edge = this.get('edge'); - - edge.getData('synapses').push(synapse); - edge.getData('mappings').push(this); - return edge; - } else return false; - }, + } }); self.MappingCollection = Backbone.Collection.extend({ @@ -276,6 +291,10 @@ Metamaps.Backbone = { self.Map = Backbone.Model.extend({ urlRoot: '/maps', + blacklist: ['created_at', 'updated_at'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, authorizeToEdit: function (mapper) { if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; else return false; @@ -287,7 +306,11 @@ Metamaps.Backbone = { }); self.Mapper = Backbone.Model.extend({ - urlRoot: '/users' + urlRoot: '/users', + blacklist: ['created_at', 'updated_at'], + toJSON: function (options) { + return _.omit(this.attributes, this.blacklist); + }, }); self.MapperCollection = Backbone.Collection.extend({ model: self.Mapper, @@ -311,331 +334,140 @@ Metamaps.Backbone = { Metamaps.Active.Map = new self.Map(Metamaps.Active.Map); Metamaps.Maps = new self.MapsCollection([Metamaps.Active.Map]); } -}; +}; // end Metamaps.Backbone -Metamaps.Control = { - init: function () { - - }, - selectNode: function (node) { - if (Metamaps.Selected.Topics.indexOf(node) != -1) return; - node.selected = true; - node.setData('dim', 30, 'current'); - node.eachAdjacency(function (adj) { - Metamaps.Control.selectEdge(adj); - }); - Metamaps.Selected.Topics.push(node); - }, - deselectAllNodes: function () { - var l = Metamaps.Selected.Topics.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = Metamaps.Selected.Topics[i]; - Metamaps.Control.deselectNode(node); - } - Metamaps.Visualize.mGraph.plot(); - }, - deselectNode: function (node) { - delete node.selected; - node.eachAdjacency(function (adj) { - Metamaps.Control.deselectEdge(adj); - }); - node.setData('dim', 25, 'current'); - - //remove the node - Metamaps.Selected.Topics.splice( - Metamaps.Selected.Topics.indexOf(node), 1); - }, - deleteSelectedNodes: function () { // refers to deleting topics permanently - var l = Metamaps.Selected.Topics.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = Metamaps.Selected.Topics[i]; - Metamaps.Control.deleteNode(node.id); - } - }, - deleteNode: function (nodeid) { // refers to deleting topics permanently - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - var id = node.getData('id'); - Metamaps.Control.deselectNode(node); - Metamaps.Topics.get(id).destroy(); - Metamaps.Control.hideNode(nodeid); - }, - removeSelectedNodes: function () { // refers to removing topics permanently from a map - var l = Metamaps.Selected.Topics.length, - i, - node, - mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - if (mapperm) { - for (i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Topics[i]; - Metamaps.Control.removeNode(node.id); - } - } - }, - removeNode: function (nodeid) { // refers to removing topics permanently from a map - var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - var mappingid = node.getData("mappingid"); - - if (mapperm) { - Metamaps.Control.deselectNode(node); - Metamaps.Mappings.get(mappingid).destroy(); - Metamaps.Control.hideNode(nodeid); - } - }, - hideSelectedNodes: function () { - var l = Metamaps.Selected.Topics.length, - i, - node; - - for (i = l - 1; i >= 0; i -= 1) { - node = Metamaps.Selected.Topics[i]; - Metamaps.Control.hideNode(node.id); - } - }, - hideNode: function (nodeid) { - var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); - if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph" - alert("You can't hide this topic, it is the root of your graph."); - return; - } - - 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); - }, - selectEdge: function (edge) { - if (Metamaps.Selected.Synapses.indexOf(edge) != -1) return; - edge.setData('showDesc', true, 'current'); - if (!Metamaps.Settings.embed) { - edge.setDataset('end', { - lineWidth: 4, - color: Metamaps.Settings.colors.synapses.selected, - alpha: 1 - }); - } else if (Metamaps.Settings.embed) { - edge.setDataset('end', { - lineWidth: 4, - color: Metamaps.Settings.colors.synapses.selected, - alpha: 1 - }); - } - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - Metamaps.Selected.Synapses.push(edge); - }, - deselectAllEdges: function () { - var l = Metamaps.Selected.Synapses.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = Metamaps.Selected.Synapses[i]; - Metamaps.Control.deselectEdge(edge); - } - Metamaps.Visualize.mGraph.plot(); - }, - deselectEdge: function (edge) { - edge.setData('showDesc', false, 'current'); - edge.setDataset('end', { - lineWidth: 2, - color: Metamaps.Settings.colors.synapses.normal, - alpha: 0.4 - }); - - if (Metamaps.Mouse.edgeHoveringOver == edge) { - edge.setData('showDesc', true, 'current'); - edge.setDataset('end', { - lineWidth: 4, - color: Metamaps.Settings.colors.synapses.hover, - alpha: 1 - }); - } - - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 - }); - - //remove the edge - Metamaps.Selected.Synapses.splice( - Metamaps.Selected.Synapses.indexOf(edge), 1); - }, - deleteSelectedEdges: function () { // refers to deleting topics permanently - var edge, - l = Metamaps.Selected.Synapses.length; - for (var i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Synapses[i]; - Metamaps.Control.deleteEdge(edge); - } - }, - deleteEdge: function (edge) { - var id = edge.getData("id"); - Metamaps.Synapses.get(id).destroy(); - Metamaps.Control.hideEdge(edge); - }, - removeSelectedEdges: function () { - var l = Metamaps.Selected.Synapses.length, - i, - edge; - - if (Metamaps.Active.Map) { - for (i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Synapses[i]; - Metamaps.Control.removeEdge(edge); - } - Metamaps.Selected.Synapses = new Array(); - } - }, - removeEdge: function (edge) { - var mappingid = edge.getData("mappingid"); - Metamaps.Mappings.get(mappingid).destroy(); - Metamaps.Control.hideEdge(edge); - }, - hideSelectedEdges: function () { - var edge, - l = Metamaps.Selected.Synapses.length, - i; - for (i = l - 1; i >= 0; i -= 1) { - edge = Metamaps.Selected.Synapses[i]; - Metamaps.Control.hideEdge(edge); - } - Metamaps.Selected.Synapses = new Array(); - }, - hideEdge: function (edge) { - var from = edge.nodeFrom.id; - var to = edge.nodeTo.id; - edge.setData('alpha', 0, 'end'); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:alpha'], - duration: 500 - }); - setTimeout(function () { - Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to); - }, 500); - }, - updateSelectedPermissions: function (permission) { - - // TODO - - if ($('.notice.metamaps').length == 0) { - $('body').prepend('
'); - } - $('.notice.metamaps').hide().html('Working...').fadeIn('fast'); - - // 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.Synapses.length; - for (var i = l - 1; i >= 0; i -= 1) { - var edge = Metamaps.Selected.Synapses[i]; - - if (edge.getData('userid') == userid) { - Metamaps.Control.updateSynapsePermission(edge, permission); - sCount++; - } - } - - // change the permission of the selected topics, if logged in user is the original creator - var l = Metamaps.Selected.Topics.length; - for (var i = l - 1; i >= 0; i -= 1) { - var node = Metamaps.Selected.Topics[i]; - - if (node.getData('userid') == userid) { - Metamaps.Control.updateTopicPermission(node, permission); - nCount++; - } - } - - var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and '); - var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses'); - - $('.notice.metamaps').html(nString + sString + ' you created updated to ' + permission) - setTimeout(function () { // TODO make it so that this can be cancelled by another message which is trying to be shown - $('.notice.metamaps').fadeOut('fast'); - }, 8000); - }, - updateTopicPermission: function (node, permission) { - var mdata = { - "topic": { - "permission": permission - } - }; - $.ajax({ - type: "PUT", - dataType: 'json', - url: "/topics/" + node.id, - data: mdata, - success: function (data) { - $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('.permissionSelect').remove(); - node.setData("permission", permission); - }, - error: function () { - console.log('failed to update permission'); - } - }); - }, - updateSynapsePermission: function (edge, permission) { - var mdata = { - "synapse": { - "permission": permission - } - }; - $.ajax({ - type: "PUT", - dataType: 'json', - url: "/synapses/" + edge.data.$id, - data: mdata, - success: function (data) { - $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); - $('#edit_synapse .permissionSelect').remove(); - edge.setData("permission", permission); - }, - error: function () { - console.log('failed to update permission'); - } - }); - }, - updateMapPermission: function (permission) { - var mdata = { - "map": { - "permission": permission - } - }; - $.ajax({ - type: "PUT", - dataType: 'json', - url: "/maps/" + Metamaps.Active.Map.id, - data: mdata, - success: function (data) { - $('.mapPermission').removeClass('commons public private minimize').addClass(permission); - $('.mapPermission .permissionSelect').remove(); - }, - error: function () { - console.log('failed to update permission'); - } - }); - } -}; +/* +* +* CREATE +* +*/ Metamaps.Create = { init: function () { - Metamaps.Create.newTopic.init(); - Metamaps.Create.newSynapse.init(); + 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(function () { + 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')); + } + }); + }, + isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open + metacodeScrollerInit: false, // indicates whether the scrollbar in the custom metacode set space has been init + selectedMetacodeSet: null, + selectedMetacodeSetIndex: null, + selectedMetacodeNames: [], + newSelectedMetacodeNames: [], + selectedMetacodes: [], + newSelectedMetacodes: [], + updateMetacodeSet: function (set, index, custom) { + + if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) { + alert('Please select at least one metacode to use!'); + return false; + } + + var codesToSwitchTo; + Metamaps.Create.selectedMetacodeSetIndex = index; + Metamaps.Create.selectedMetacodeSet = "metacodeset-" + set; + + if (!custom) { + codesToSwitchTo = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(','); + $('.customMetacodeList li').addClass('toggledOff'); + Metamaps.Create.selectedMetacodes = []; + Metamaps.Create.selectedMetacodeNames = []; + Metamaps.Create.newSelectedMetacodes = []; + Metamaps.Create.newSelectedMetacodeNames = []; + } + 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); + codesToSwitchTo = Metamaps.Create.selectedMetacodeNames.slice(0); + } + + // sort by name + codesToSwitchTo.sort(); + codesToSwitchTo.reverse(); + + $('#metacodeImg, #metacodeImgTitle').empty(); + $('#metacodeImg').removeData('cloudcarousel'); + var newMetacodes = ""; + for (var i = 0; i < codesToSwitchTo.length; i++) { + newMetacodes += '' + codesToSwitchTo[i] + ''; + }; + $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({ + titleBox: $('#metacodeImgTitle'), + yRadius: 40, + xPos: 150, + yPos: 40, + speed: 0.3, + mouseWheel: true, + bringToFront: true + }); + + $('#lightbox_overlay').hide(); + $('#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 () { @@ -698,6 +530,7 @@ Metamaps.Create = { }, newSynapse: { init: function () { + var self = Metamaps.Create.newSynapse; // keep the right click menu from opening $('#new_synapse').bind('contextmenu', function (e) { @@ -717,7 +550,7 @@ Metamaps.Create = { url: '/search/synapses?term=%QUERY' }, engine: Hogan - }, + }, { name: 'existing_synapses', limit: 50, @@ -725,13 +558,12 @@ Metamaps.Create = { remote: { url: '/search/synapses', replace: function () { - var q = '/search/synapses?topic1id=' + Metamaps.Create.newSynapse.topic1id + '&topic2id=' + Metamaps.Create.newSynapse.topic2id; - return q; + return self.getSearchQuery(); } }, engine: Hogan, header: "

Existing Synapses

" - }, + } ]); $('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) { @@ -753,193 +585,58 @@ Metamaps.Create = { }, 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; + }, + getSearchQuery: function () { + var self = Metamaps.Create.newSynapse; + + if (Metamaps.Selected.Nodes.length < 2) { + return '/search/synapses?topic1id=' + self.topic1id + '&topic2id=' + self.topic2id; + } else return ''; } } -}; -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)); - } - } - }, - - /* - * - * - */ - renderTopic: function (mapping, topic, createNewInDB) { - var self = Metamaps.Topic; - - var nodeOnViz, tempPos; - - var newnode = mapping.createNode(); - - if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) { - Metamaps.Visualize.mGraph.graph.addNode(newnode); - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - n.setData("dim", 25, "start"); - n.setData("dim", 25, "end"); - }); - nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id); - mapping.set('node', nodeOnViz); - mapping.updateNode(); // links the topic and the mapping to the node +}; // end Metamaps.Create - nodeOnViz.setData("dim", 1, "start"); - nodeOnViz.setData("dim", 40, "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) { - Metamaps.Create.newSynapse.topic1id = tempNode.id; - Metamaps.Create.newSynapse.topic2id = nodeOnViz.id; - Metamaps.Create.newSynapse.open(); - Metamaps.Create.newSynapse.beingCreated = true; - 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 () { +////////////////// TOPIC AND SYNAPSE CARDS ////////////////////////// - } - }); - } - } else { - Metamaps.Visualize.mGraph.loadJSON(newnode); - nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id); - mapping.set('node', nodeOnViz); - mapping.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 () { - - } - }); - } - - if (!Metamaps.Settings.sandbox && createNewInDB) { - if (topic.isNew()) { - topic.save(null, { - success: function (topicModel, response) { - topicModel.updateMappings(); - if (Metamaps.Active.Map) { - mapping.save(); - } - }, - error: function (model, response) { - console.log('error saving topic to database'); - } - }); - } else if (!topic.isNew() && Metamaps.Active.Map) { - mapping.save(); - } - } - }, - createTopicLocally: function () { - var self = Metamaps.Topic; - - var metacode = Metamaps.Metacodes.findWhere({ - name: 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(); - Metamaps.Create.newTopic.addSynapse = false; - - self.renderTopic(mapping, topic, true); // this function also includes the creation of the topic in the database - }, - getTopicFromAutocomplete: function (id) { - var self = Metamaps.Topic; - - 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, false); - } -}; +/* +* +* TOPICCARD +* +*/ Metamaps.TopicCard = { openTopicCard: null, //stores the JIT local ID of the topic with the topic card open init: function () { - //$('.best_in_place').best_in_place(); + + // 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" + }); + $('#showcard').resizable({ + maxHeight: 500, + maxWidth: 500, + minHeight: 320, + minWidth: 226, + resize: function (event, ui) { + var p = $('#showcard').find('.scroll'); + p.height(p.height()).mCustomScrollbar('update'); + } + }).css({ + display: 'none', + top: '300px', + left: '100px' + }); }, fadeInShowCard: function (topic) { $('.showcard').fadeIn('fast'); @@ -995,7 +692,22 @@ Metamaps.TopicCard = { $('.metacodeSelect li').click(function () { selectingMetacode = false; var metacodeName = $(this).find('.mSelectName').text(); - //updateMetacode(node, metacodeName); //TODO + var metacode = Metamaps.Metacodes.findWhere({ + name: metacodeName + }); + $('.CardOnGraph').find('.metacodeTitle').text(metacodeName) + .attr('class', 'metacodeTitle mbg' + metacodeName.replace(/\s/g, '')); + $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacodeName].src + ')'); + topic.save({ + metacode_id: metacode.id + }); + Metamaps.Visualize.mGraph.plot(); + $('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('.metacodeSelect').hide(); + setTimeout(function () { + $('.metacodeTitle').hide(); + $('.showcard .icon').css('z-index', '1'); + }, 500); }); } } else { @@ -1023,7 +735,11 @@ Metamaps.TopicCard = { $('.permissionSelect li').click(function (event) { selectingPermission = false; var permission = $(this).attr('class'); - // Metamaps.Control.updateTopicPermission(node, permission); // TODO + topic.save({ + permission: permission + }); + $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)); + $('.permissionSelect').remove(); event.stopPropagation(); }); } else { @@ -1144,2081 +860,230 @@ Metamaps.TopicCard = { nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc"); return nodeValues; } -}; -Metamaps.Find = { - filters: { - name: "", - type: [] - }, - init: function () { - $('#filterText').on('input', function () { - Metamaps.Find.filterText(); - }); - }, - filterText: function () { - var duration = 500; - query = $('#filterText').val(); - dim = $('#dim').is(":checked"); - if (dim) { - alpha = 0.2; +}; // 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 synapse = edge.getData('synapses')[0]; // 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.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 { - alpha = 0.0; + edit_div.className = 'permission cannotEdit'; + } + $('.main .wrapper').append(edit_div); + + self.populateShowCard(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 = synapse.isNew() ? synapse.cid : synapse.id; + }, + + hideCard: function () { + $('#edit_synapse').remove(); + Metamaps.SynapseCard.openSynapseCard = null; + }, + + populateShowCard: function (synapse) { + var self = Metamaps.SynapseCard; + + self.add_name_form(synapse); + self.add_user_info(synapse); + self.add_perms_form(synapse); + if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { + self.add_direction_form(synapse); + } + }, + + add_name_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 + + //name editing form + $('#edit_synapse').append('
'); + $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc'); + $('#edit_synapse_name').attr('data-object', 'synapse'); + $('#edit_synapse_name').attr('data-attribute', 'desc'); + $('#edit_synapse_name').attr('data-type', 'textarea'); + $('#edit_synapse_name').attr('data-nil', data_nil); + $('#edit_synapse_name').attr('data-url', '/synapses/' + synapse.id); + $('#edit_synapse_name').html(synapse.get("desc")); + + //if edge data is blank or just whitespace, populate it with data_nil + if ($('#edit_synapse_name').html().trim() == '') { + $('#edit_synapse_name').html(data_nil); } - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - //if node name doesnt matche query - if (query != "") { - if (n.name.toLowerCase().indexOf(query.toLowerCase()) === -1) { - n.setData('alpha', alpha, 'end'); - n.eachAdjacency(function (adj) { - adj.setData('alpha', alpha, 'end'); - }); - } + $('#edit_synapse_name').bind("ajax:success", function () { + var desc = $(this).html(); + if (desc == data_nil) { + synapse.set("desc", ''); } else { - n.setData('alpha', 1.0, 'end'); - n.eachAdjacency(function (adj) { - adj.setData('alpha', 1.0, 'end'); - }); + synapse.set("desc", desc); } - - }); - //Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - - Metamaps.Visualize.mGraph.animate({ - modes: ['node-property:alpha', - 'edge-property:alpha'], - duration: duration + Metamaps.Control.selectEdge(synapse.get('edge')); + Metamaps.Visualize.mGraph.plot(); }); }, - passFilters: function (topic) { - var self = Metamaps.Find; - var filters = self.filters; - var passesName = filters.name == "" ? true : false, - passesType = filters.type == [] ? true : false; + add_user_info: function (synapse) { + var u = '
'; + u += '
Created by ' + synapse.getUser().get("name") + '
'; + $('#edit_synapse').append(u); + }, - //filter by name - if (topic.get('1')[1][0].toLowerCase().indexOf(filters.name) !== -1) { - passesName = true; - } - // filter by type - if (!filters.type == []) { - // get the array of types that your topic 'is' - var metacodes = topic.get('2') ? topic.get('2')[1] : []; - if (_.intersection(filters.type, metacodes).length == 0) passesType = true; + add_perms_form: function (synapse) { + //permissions - if owner, also allow permission editing + $('#edit_synapse').append('
'); + + // ability to change permission + var selectingPermission = false; + if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { + $('#edit_synapse.yourEdge .mapPerm').click(function () { + 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(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(); + }); + } else { + selectingPermission = false; + $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('#edit_synapse .permissionSelect').remove(); + } + }); } + }, //add_perms_form - if (passesName && passesType) { - return true; + add_direction_form: function (synapse) { + //directionality checkboxes + $('#edit_synapse').append(''); + $('#edit_synapse').append(''); + $('#edit_synapse').append(''); + $('#edit_synapse').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; + var right = edge.nodeFrom; } else { - return false; - } - } -}; -Metamaps.JIT = { - vizData: [], // contains the visualization-compatible graph - graphRendered: false, // flag indicates if we have rendered the data so we don't bother doing it again wastefully - metacodeIMGinit: false, - /** - * This method will bind the event handlers it is interested and initialize the class. - */ - init: function () { - var self = Metamaps.JIT; - - - }, - /** - * convert our topic JSON into something JIT can use - */ - prepareVizData: function () { - var self = Metamaps.JIT; - var topic; - - Metamaps.Mappings.each(function (m) { - if (m.get("category") === "Topic") { - self.vizData.push(m.createNode()); - } - }); - - if (self.vizData.length == 0) { - Metamaps.Visualize.loadLater = true; + var left = edge.nodeFrom; + var right = edge.nodeTo; } - Metamaps.Visualize.render("infovis", self.vizData); - }, // prepareVizData - edgeRender: function (adj, canvas) { - //get nodes cartesian coordinates - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); + /* + * 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 synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse - - var directionCat = synapse.get("category"); - - //label placement on edges - Metamaps.JIT.renderEdgeArrows(this.edgeHelper, adj, synapse); - - //check for edge label in data - var desc = synapse.get("desc"); - - var showDesc = adj.getData("showDesc"); - - if (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 = 'hanging'; - - 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) + 8; - 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(); - - //render text - ctx.fillStyle = '#222222'; - ctx.textAlign = 'center'; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index)); + var directionCat = synapse.get('category'); //both, none, from-to + if (directionCat == 'from-to') { + var from_to = synapse.getDirection(); + if (from_to[0] == left.id) { + //check left checkbox + $('#edit_synapse_left').prop('checked', true); + } else { + //check right checkbox + $('#edit_synapse_right').prop('checked', true); } + } else if (directionCat == 'both') { + //check both checkboxes + $('#edit_synapse_left').prop('checked', true); + $('#edit_synapse_right').prop('checked', true); } - }, // edgeRender - edgeRenderEmbed: function (adj, canvas) { - //get nodes cartesian coordinates - var pos = adj.nodeFrom.pos.getc(true); - var posChild = adj.nodeTo.pos.getc(true); + $('#edit_synapse_left, #edit_synapse_right').click(function () { + var leftChecked = $('#edit_synapse_left').is(':checked'); + var rightChecked = $('#edit_synapse_right').is(':checked'); - var directionCat = adj.getData("category"); - //label placement on edges - Metamaps.JIT.renderEdgeArrows(this.edgeHelper, adj); - - //check for edge label in data - var desc = adj.getData("desc"); - var showDesc = adj.getData("showDesc"); - if (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 = 'hanging'; - - 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 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]; } - var width = Math.max.apply(null, lineWidths) + 8; - 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(); - - //render text - ctx.fillStyle = '#222222'; - ctx.textAlign = 'center'; - for (index = 0; index < arrayOfLabelLines.length; ++index) { - ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index)); - } - } - }, // edgeRenderEmbed - ForceDirected: { - animateSavedLayout: { - modes: ['linear'], - transition: $jit.Trans.Quad.easeInOut, - duration: 800, - onComplete: function () { - Metamaps.Visualize.mGraph.busy = false; - } - }, - animateFDLayout: { - modes: ['linear'], - transition: $jit.Trans.Elastic.easeOut, - duration: 2500, - 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: 0.4 - }, - //Native canvas text styling - Label: { - type: 'Native', //Native or HTML - size: 20, - family: 'arial', - textBaseline: 'hanging', - 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); - }, - //Update node positions when dragged - onDragMove: function (node, eventInfo, e) { - Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); - }, - onDragEnd: function (node, eventInfo, e) { - Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); - }, - 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) { - Metamaps.Visualize.mGraph.busy = false; - Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectNodesWithBox(); - 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); - } else if (node && !node.nodeFrom) { - Metamaps.JIT.selectNodeOnClickHandler(node, e); - } else { - Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); - } //if - }, - //Add also a click handler to nodes - onRightClick: function (node, eventInfo, e) { - - node = eventInfo.getNode(); - //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 { - - } //if - } - }, - //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'), - cat = topic ? topic.getMetacode().get('name') : false, - ctx = canvas.getCtx(); - - // if the topic is selected draw a circle around it - if (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 (!cat || !imgArray[cat].complete || (typeof imgArray[cat].naturalWidth !== "undefined" && imgArray[cat].naturalWidth === 0)) { - ctx.beginPath(); - ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false); - ctx.fillStyle = '#B6B2FD'; - ctx.fill(); - } else { - ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2); - } - }, - '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(true), - to = adj.nodeTo.pos.getc(true); - - return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); - } - } - }, - embed: { - graphSettings: { - - }, - nodeSettings: { - - }, - edgeSettings: { - 'customEdge': { - 'render': function (adj, canvas) { - Metamaps.JIT.edgeRenderEmbed(adj, 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, adj.Edge.epsilon); - } - } - } - } - }, // 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: { - - }, - embed: { - graphSettings: { - - }, - nodeSettings: { - - }, - edgeSettings: { - - } - } - }, // ForceDirected3D - RGraph: { - animate: { - modes: ['polar'], - duration: 2000, - 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, - type: 'HTML', - //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', - CanvasStyles: { - strokeStyle: '#333', - lineWidth: 1.5 - } - }, - //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: '#222222', - type: 'customEdge', - lineWidth: 2, - alpha: 0.4 - }, - //Native canvas text styling - Label: { - type: 'HTML', //Native or HTML - size: 20, - //style: 'bold' - }, - //Add Tips - Tips: { - enable: false, - onShow: function (tip, node) {} - }, - // Add node events - Events: { - enable: true, - enableForEdges: true, - type: 'HTML', - onMouseMove: function (node, eventInfo, e) { - Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e); - }, - //Update node positions when dragged - onDragMove: function (node, eventInfo, e) { - Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); - }, - onDragEnd: function (node, eventInfo, e) { - Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); - }, - 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); - Metamaps.Visualize.mGraph.labels.hideLabel(Metamaps.Visualize.mGraph.graph.getNode(Metamaps.TopicCard.openTopicCard)); - } - }, - //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) { - - if (Metamaps.Mouse.boxStartCoordinates) { - Metamaps.Visualize.mGraph.busy = false; - Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectNodesWithBox(); - 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); - } else if (node && !node.nodeFrom) { - Metamaps.JIT.selectNodeOnClickHandler(node, e); - } else { - Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); - } //if - } - }, - //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'), - cat = node.getData('metacode'), - ctx = canvas.getCtx(); - // if the topic is on the Canvas draw a white circle around it - if (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(); - } - try { - ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2); - } catch (e) { - alert("You've got an topic causing an issue! It's ->this-> one: " + cat); - } - }, - 'contains': function (node, pos) { - var npos = node.pos.getc(true), - dim = node.getData('dim'); - return this.nodeHelper.circle.contains(npos, pos, dim); - } - } - }, - edgeSettings: { - 'customEdge': { - 'render': function (adj, canvas) { - Metamaps.JIT.edgeRender(adj, 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, adj.Edge.epsilon); - } - } - }, - embed: { - graphSettings: { - - }, - nodeSettings: { - - }, - edgeSettings: { - 'customEdge': { - 'render': function (adj, canvas) { - Metamaps.JIT.edgeRenderEmbed(adj, 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, adj.Edge.epsilon); - } - } - } - } - }, // RGraph - addMetacode: function () { - - var self = Metamaps.JIT; - // code from http://www.professorcloud.com/mainsite/carousel-integration.htm - //mouseWheel:true, - if (!self.metacodeIMGinit) { - $("#metacodeImg").CloudCarousel({ - titleBox: $('#metacodeImgTitle'), - yRadius: 40, - xPos: 150, - yPos: 40, - speed: 0.15, - mouseWheel: true, - bringToFront: true - }); - self.metacodeIMGinit = true; - $('#topic_inlanguage').typeahead([ - { - name: 'topics', - template: '

{{value}}

{{type}}
{{type}}', - remote: { - url: '/topics/autocomplete_topic_inlanguage?term=%QUERY' - }, - engine: Hogan - } - ]); - $('#topic_inlanguage').bind('typeahead:selected', function (event, datum, dataset) { - Metamaps.Topic.getTopicFromAutocomplete(datum.id); - }); - } - }, // addMetacode - editMetacodeSet: function (id) { - $('#metacodeImg, #metacodeImgTitle').empty(); - $('#metacodeImg').append('809'); - $('#metacodeImg').removeData('cloudcarousel'); - var newMetacodes = ""; - /* _.each(topics, function (topic) { - newMetacodes += '' + topic.id + ''; - }); - $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({ - titleBox: $('#metacodeImgTitle'), - yRadius: 40, - xPos: 150, - yPos: 40, - speed: 0.15, - mouseWheel: true, - bringToFront: true - }); - */ - - }, // editMetacode - onMouseEnter: function (edge) { - - $('canvas').css('cursor', 'pointer'); - var edgeIsSelected = Metamaps.Selected.Synapses.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, - alpha: 1 - }); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - duration: 100 + synapse.save({ + category: dirCat, + node1_id: dir[0], + node2_id: dir[1] }); Metamaps.Visualize.mGraph.plot(); - } - }, // onMouseEnter - onMouseLeave: function (edge) { - $('canvas').css('cursor', 'default'); - var edgeIsSelected = Metamaps.Selected.Synapses.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, - alpha: 0.4 - }); - Metamaps.Visualize.mGraph.fx.animate({ - modes: ['edge-property:lineWidth:color:alpha'], - 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 () { - // this is to submit new topic creation - if (Metamaps.Create.newTopic.beingCreated) { - Metamaps.Topic.createTopicLocally(); - } 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; - - console.log(scale); - - 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; - - if (node && !node.nodeFrom) { - Metamaps.Create.newTopic.hide(); - Metamaps.Create.newSynapse.hide(); - 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.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) { - 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); - node.setData('xloc', pos.x); - node.setData('yloc', pos.y); - } else { - var len = Metamaps.Selected.Topics.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.Topics[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.Topics[i]; - var x = pos.x + xOffset[i]; - var y = pos.y + yOffset[i]; - n.pos.setc(x, y); - n.setData('xloc', x); - n.setData('yloc', y); - } //for - } //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) && userid != null) { - if (tempInit == false) { - tempNode = node; - tempInit = true; - - // set the draw synapse start positions - var l = Metamaps.Selected.Topics.length; - if (l > 0) { - for (var i = l - 1; i >= 0; i -= 1) { - var n = Metamaps.Selected.Topics[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.Topics.indexOf(temp) == -1) { // this means a Node has been returned - tempNode2 = temp; - Metamaps.Visualize.mGraph.plot(); - - 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.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas); - Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas); - } 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"); - $('#new_synapse').css('left', myX + "px"); - $('#new_synapse').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 - }; - } - } - } - }, // onDragMoveTopicHandler - onDragCancelHandler: function (node, eventInfo, e, centred) { - tempNode = null; - 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, allowRealtime) { - if (tempInit && tempNode2 == null) { - Metamaps.Create.newTopic.addSynapse = true; - $('#new_topic').fadeIn('fast'); - Metamaps.Create.newTopic.beingCreated = true; - Metamaps.JIT.addMetacode(); - $('#topic_name').focus(); - } else if (tempInit && tempNode2 != null) { - Metamaps.Create.newTopic.addSynapse = false; - Metamaps.Create.newSynapse.topic1id = tempNode.id; - Metamaps.Create.newSynapse.topic2id = tempNode2.id; - Metamaps.Create.newSynapse.open(); - Metamaps.Create.newSynapse.beingCreated = true - tempNode = null; - tempNode2 = null; - tempInit = false; - } - }, //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; - - if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) { - // 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"); - $('#new_topic').fadeIn('fast'); - Metamaps.Create.newTopic.beingCreated = true; - Metamaps.JIT.addMetacode(); - $('#topic_name').focus(); - } else if (!Metamaps.Mouse.didPan) { - // SINGLE CLICK - Metamaps.TopicCard.hideCard(); - $('#new_topic').fadeOut('fast'); - $("#topic_name").typeahead('setQuery', ''); - Metamaps.Create.newTopic.beingCreated = false; - $('#new_synapse').fadeOut('fast'); - Metamaps.Create.newSynapse.beingCreated = false; - $('.rightclickmenu').remove(); - // reset the draw synapse positions to false - Metamaps.Mouse.synapseStartCoordinates = []; - Metamaps.Mouse.synapseEndCoordinates = null; - tempInit = false; - tempNode = null; - tempNode2 = null; - Metamaps.Control.deselectAllEdges(); - Metamaps.Control.deselectAllNodes(); - } - }, //canvasClickHandler - nodeDoubleClickHandler: function (node, e) { - - Metamaps.TopicCard.showCard(node); - - }, // 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.Topics.length == 0) { - Metamaps.Control.selectNode(node); - return 'deselect'; - } - if (Metamaps.Selected.Topics.indexOf(node) == -1) { - if (e.shiftKey) { - Metamaps.Control.selectNode(node); - return 'nothing'; - } else { - return 'only-drag-this-one'; - } - } - return 'nothing'; //case 4? - }, // handleSelectionBeforeDragging - selectNodesWithBox: function () { - - var sX = Metamaps.Mouse.boxStartCoordinates.x, - sY = Metamaps.Mouse.boxStartCoordinates.y, - eX = Metamaps.Mouse.boxEndCoordinates.x, - eY = Metamaps.Mouse.boxEndCoordinates.y; - - - 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)) { - var nodeIsSelected = Metamaps.Selected.Topics.indexOf(n); - if (nodeIsSelected == -1) Metamaps.Control.selectNode(n); // the node is not selected, so select it - else if (nodeIsSelected != -1) Metamaps.Control.deselectNode(n); // the node is selected, so deselect it - - } }); + } //add_direction_form +}; // end Metamaps.SynapseCard - Metamaps.Mouse.boxStartCoordinates = false; - Metamaps.Mouse.boxEndCoordinates = false; - Metamaps.Visualize.mGraph.plot(); - }, // selectNodesWithBox - 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; +////////////////////// END TOPIC AND SYNAPSE CARDS ////////////////////////////////// - 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()) { - if (!e.shiftKey) { - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - if (n.id != node.id) { - Metamaps.Control.deselectNode(n); - } - }); - } - if (node.selected) { - Metamaps.Control.deselectNode(node); - } else { - Metamaps.Control.selectNode(node); - } - //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; - - // 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 = '
    '; - - if (userid != null) menustring += '
  • Delete
    • '; - if (Metamaps.Active.Map.id && userid != null) menustring += '
  • Remove from map
    • '; - menustring += '
  • Hide until refresh
    • '; - - if (!Metamaps.Active.Map) menustring += '
  • Center this topic
    • '; - menustring += '
  • Open in new tab
    • '; - if (userid) { - var options = '
    • commons
      • \ -
    • public
      • \ -
    • private
      • \ -
    '; - - menustring += '
  • Change permissions' + options + '
    • '; - } - - menustring += '
'; - rightclickmenu.innerHTML = menustring; - - // position the menu where the click happened - $(rightclickmenu).css({ - left: e.clientX, - top: e.clientY - }); - //add the menu to the page - $('#center-container').append(rightclickmenu); - - - // attach events to clicks on the list items - - // delete the selected things from the database - $('.rc-delete').click(function () { - $('.rightclickmenu').remove(); - var n = Metamaps.Selected.Topics.length; - var e = Metamaps.Selected.Synapses.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 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(); - } - }); - - // remove the selected things from the map - $('.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(); - 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()); - }); - - }, //selectNodeOnRightClickHandler - selectEdgeOnClickHandler: function (adj, e) { - if (Metamaps.Visualize.mGraph.busy) return; - - //editing overrides everything else - if (e.altKey) { - //in select-edit-delete-nodes-and-edges.js - // editEdge(adj, e); TODO need to find and reimplement this function - return; - } - - var edgeIsSelected = Metamaps.Selected.Synapses.indexOf(adj); - if (edgeIsSelected == -1) edgeIsSelected = false; - else if (edgeIsSelected != -1) edgeIsSelected = true; - - if (edgeIsSelected && e.shiftKey) { - //deselecting an edge with shift - Metamaps.Control.deselectEdge(adj); - } else if (!edgeIsSelected && e.shiftKey) { - //selecting an edge with shift - Metamaps.Control.selectEdge(adj); - } else if (edgeIsSelected && !e.shiftKey) { - //deselecting an edge without shift - unselect all - Metamaps.Control.deselectAllEdges(); - } else if (!edgeIsSelected && !e.shiftKey) { - //selecting an edge without shift - unselect all but new one - Metamaps.Control.deselectAllEdges(); - Metamaps.Control.selectEdge(adj); - } - - Metamaps.Visualize.mGraph.plot(); - }, //selectEdgeOnClickHandler - selectEdgeOnRightClickHandler: function (adj, e) { - if (Metamaps.Visualize.mGraph.busy) return; - - console.log('edge right click handler working'); - }, //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); - easing = easing * 0.75; - - if (easing < 0.1) window.clearInterval(panningInt); - } - }, // SmoothPanning - generateLittleHTML: function (node) { - var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); - - var littleHTML = '
{{ name }}
'; - - if (userid == null || !Metamaps.Active.Map || !mapperm) { - //unauthenticated, not on a map: can remove from canvas - littleHTML += ''; - } else if (mapperm) { - //permission to remove nodes from the map - littleHTML += ''; - } - - if (userid == node.getData('userid')) { - //logged in, and owner of the topic, thus permission to delete - littleHTML += ''; - } - littleHTML += '
'; - - var render = _.template(littleHTML); - var map; - Metamaps.Active.Map ? map = Metamaps.Active.Topic.id : map = null; - return render({ - id: node.id, - mapid: map, - name: node.name - }); - }, // generateLittleHTML - 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 = "#222222"; - ctx.lineWidth = 2; - ctx.globalAlpha = 0.4; - } - 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) { - - var self = Metamaps.JIT; - - var canvas = Metamaps.Visualize.mGraph.canvas; - - 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 direction = adj.data.$direction; - var inv = (direction && direction.length > 1 && 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 -}; -Metamaps.Listeners = { - - init: function () { - - $(document).on('keydown', function (e) { - switch (e.which) { - case 13: - Metamaps.JIT.enterKeyHandler(); - e.preventDefault(); - break; - case 27: - Metamaps.JIT.escKeyHandler(); - break; - default: - break; //alert(e.which); - } - }); - - //$(window).resize(function () { - // Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()); - //}); - } -}; - -Metamaps.Map = { - // this function is to retrieve a map JSON object from the database - // @param id = the id of the map to retrieve - get: function (id, callback) { - // if the desired topic is not yet in the local topic repository, fetch it - if (Metamaps.Maps.get(id) == undefined) { - if (!callback) { - var e = $.ajax({ - url: "/maps/" + id + ".json", - async: false - }); - Metamaps.Maps.add($.parseJSON(e.responseText)); - return Metamaps.Maps.get(id); - } else { - return $.ajax({ - url: "/users/" + id + ".json", - success: function (data) { - Metamaps.Maps.add(data); - callback(Metamaps.Maps.get(id)); - } - }); - } - } else { - if (!callback) { - return Metamaps.Maps.get(id); - } else { - return callback(Metamaps.Maps.get(id)); - } - } - }, -}; -Metamaps.Maps = null; // will be initialized in Metamaps.Backbone.init as a MapCollection - -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) { - // if the desired topic is not yet in the local topic repository, fetch it - if (Metamaps.Mappers.get(id) == undefined) { - if (!callback) { - var e = $.ajax({ - url: "/users/" + id + ".json", - async: false - }); - Metamaps.Mappers.add($.parseJSON(e.responseText)); - return Metamaps.Mappers.get(id); - } else { - return $.ajax({ - url: "/users/" + id + ".json", - success: function (data) { - Metamaps.Mappers.add(data); - callback(Metamaps.Mappers.get(id)); - } - }); - } - } else { - if (!callback) { - return Metamaps.Mappers.get(id); - } else { - return callback(Metamaps.Mappers.get(id)); - } - } - }, -}; -Metamaps.Mappers = null; // will be initialized in Metamaps.Backbone.init as a MapperCollection - -Metamaps.Mouse = { - didPan: false, - changeInX: 0, - changeInY: 0, - edgeHoveringOver: false, - boxStartCoordinates: false, - boxEndCoordinates: false, - synapseStartCoordinates: [], - synapseEndCoordinates: null, - lastNodeClick: 0, - lastCanvasClick: 0, - DOUBLE_CLICK_TOLERANCE: 300 -}; -Metamaps.Organize = { - init: function () { - - }, - arrange: function (layout, centerNode) { - console.log(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') { - 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 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; - /* - centerNode.eachAdjacency(function(n) { - var newPos = new $jit.Complex(); - newPos.x = lineLength*Math.sin(degree) +centerX; - newPos.y = lineLength*Math.cos(degree) +centerY; - n.nodeTo.setPos(newPos, 'end'); - degree += angle; - }); - Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - */ - - - - - - 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); - - - - - - /* - var radial = function (input) { - if (column == numColumns) { - column = 0; - row += 1; - } - var newPos = new $jit.Complex(); - newPos.x = column*GRIDSPACE; - newPos.y = row*GRIDSPACE; - n.setPos(newPos, 'end'); - - }); - 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; - console.log("new offset: (before translate)", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY); - console.log("new offset: (before translate)", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY); - Metamaps.Visualize.mGraph.canvas.translate(newOriginX - oldOriginX, newOriginY - oldOriginY); - console.log("ideal offset: ", newOriginX, newOriginY); - console.log("new offset: ", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY); - console.log("new offset: ", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY); - - - - - - - } else alert('please call function with a valid layout dammit!'); - }, - loadSavedLayout: function (id) { - Metamaps.Visualize.computePositions(); - Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); - }, - saveNewLayout: function () { - var layoutName = prompt("Enter a name for your layout..."); - if (layoutName === null) return; - var layoutObject = {}; - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - layoutObject[n.data.$id] = { - x: n.getPos().x, - y: n.getPos().y - }; - }); - - function addMetadata(e) { - // add the 'expressed In English' field - Metamaps.Field.createFieldInDatabase("topic", e.id, 1, layoutName); - // add the 'is a' synapses - Metamaps.Synapse.createSynapseInDatabase(e.id, 2, 1087, false); - // add the 'saved coordinates' field - Metamaps.Field.createFieldInDatabase("topic", e.id, 1088, JSON.stringify(layoutObject)); - // add the 'is layout for' synapses - Metamaps.Synapse.createSynapseInDatabase(e.id, 1089, Metamaps.Active.Topic.id, false); - $('#saveLayout').text('Saved!'); - setTimeout(function () { - $('#saveLayout').text('Save New Layout') - }, 1500); - Metamaps.Topic.get(e.id, function (ee) { - // add the new layout to the list - $('#selectSavedLayout').append(Metamaps.Util.generateOptionsList([ee])); - // switch to the new layout - $('#selectSavedLayout').val(ee.id); - }); - } - // call create topic which will run 'addMetadata' when it works - Metamaps.Topic.createTopicInDatabase(addMetadata, []); - }, - saveCurrentLayout: function () { - var id = $('#selectSavedLayout option:selected').val(); - if (id != "") { - Metamaps.Topic.get(id, function (e) { - // this is where the actual saved coordinates are - var fieldID = e[1088][2][0]; - var layoutObject = {}; - Metamaps.Visualize.mGraph.graph.eachNode(function (n) { - layoutObject[n.data.$id] = { - x: n.getPos().x, - y: n.getPos().y - }; - }); - // update the 'saved coordinates' field - Metamaps.Field.updateFieldInDatabase(fieldID, JSON.stringify(layoutObject)); - Metamaps.Topic.refresh(e.id); - $('#updateLayout').text('Updated!'); - setTimeout(function () { - $('#updateLayout').text('Overwrite Layout') - }, 1500); - }); - } - } -}; - - -Metamaps.Selected = { - Topics: [], - Synapses: [] -}; - - -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 = mapping.createEdge(); - - Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data); - edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id); - mapping.set('edge', edgeOnViz); - mapping.updateEdge(); // links the topic and the mapping to the node - - Metamaps.Visualize.mGraph.fx.plotLine(edgeOnViz, Metamaps.Visualize.mGraph.canvas); - Metamaps.Control.selectEdge(edgeOnViz); - - if (!Metamaps.Settings.sandbox && createNewInDB) { - if (synapse.isNew()) { - synapse.save(null, { - success: function (synapseModel, response) { - synapseModel.updateMappings(); - if (Metamaps.Active.Map) { - mapping.save(); - } - }, - error: function (model, response) { - console.log('error saving synapse to database'); - } - }); - } else if (!synapse.isNew() && Metamaps.Active.Map) { - mapping.save(); - } - } - }, - createSynapseLocally: function () { - var self = Metamaps.Synapse, - topic1, - topic2, - node1, - node2, - synapse, - mapping; - - //for each node in this array we will create a synapse going to the position2 node. - var synapsesToCreate = []; - - node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id); - topic2 = node2.getData('topic'); - - var len = Metamaps.Selected.Topics.length; - if (len == 0) { - synapsesToCreate[0] = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id); - } else if (len > 0) { - synapsesToCreate = Metamaps.Selected.Topics; - } - - 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; - - Metamaps.Create.newSynapse.hide(); - - var synapse = self.get(id); - - var mapping = new Metamaps.Backbone.Mapping({ - category: "Synapse", - synapse_id: synapse.id - }); - Metamaps.Mappings.add(mapping); - - self.renderSynapse(mapping, synapse, false); - } -}; - - -Metamaps.Synapses = {}; - - -Metamaps.SynapseCard = { - openSynapseCard: null -}; - - -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.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; - 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; - }, - 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)); - }, - 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); - } -}; +/* +* +* VISUALIZE +* +*/ Metamaps.Visualize = { mGraph: {}, // a reference to the graph object. cameraPosition: null, // stores the camera position when using a 3D visualization @@ -3259,7 +1124,9 @@ Metamaps.Visualize = { self.__buildGraph(vizData); }, computePositions: function () { - var self = Metamaps.Visualize; + var self = Metamaps.Visualize, + mapping; + if (self.type == "RGraph") { self.mGraph.graph.eachNode(function (n) { var pos = n.getPos(); @@ -3267,12 +1134,22 @@ Metamaps.Visualize = { }); self.mGraph.compute('end'); } else if (self.type == "ForceDirected" && self.savedLayout) { - var startPos, endPos, mapping; + var i, l, startPos, endPos, topic, synapse; self.mGraph.graph.eachNode(function (n) { - mapping = Metamaps.Mappings.get(n.id); - mapping.set('node', n); - mapping.updateNode(); + topic = Metamaps.Topics.get(n.id); + topic.set('node', n); + topic.updateNode(); + mapping = topic.getMapping(); + + n.eachAdjacency(function (edge) { + l = edge.getData('mappingIDs').length; + for (i = 0; i < l; i++) { + synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]); + synapse.set('edge', edge); + synapse.updateEdge(); + } + }); startPos = new $jit.Complex(0, 0); endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')); @@ -3338,9 +1215,66 @@ Metamaps.Visualize = { } } } -}; +}; // 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; + 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; + }, + 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)); + }, + 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 = { // this is for the heroku staging environment //Metamaps.Realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); @@ -3349,174 +1283,249 @@ Metamaps.Realtime = { // this is for localhost development //Metamaps.Realtime.socket = io.connect('http://localhost:5001'); socket: null, - notifyTimeOut: null, + isOpen: false, + timeOut: null, + changing: false, + mappersOnMap: {}, + status: true, // stores whether realtime is True/On or False/Off init: function () { + var self = Metamaps.Realtime; + + $(".realtimeOnOff").click(self.toggle); + + $(".sidebarCollaborate").hover(self.open, self.close); + var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); if (mapperm) { - Metamaps.Realtime.socket = io.connect('http://localhost:5001'); - Metamaps.Realtime.socket.on('connect', function () { + self.socket = io.connect('http://localhost:5001'); + self.socket.on('connect', function () { console.log('socket connected'); - Metamaps.Realtime.setupSocket(); + self.setupSocket(); }); } }, - notifyUser: function (message) { - if ($('.notice.metamaps').length == 0) { - $('body').prepend('
'); - } - $('.notice.metamaps').hide().html(message).fadeIn('fast'); + toggle: function () { + var self = Metamaps.Realtime; - clearTimeout(Metamaps.Realtime.notifyTimeOut); - Metamaps.Realtime.notifyTimeOut = setTimeout(function () { - $('.notice.metamaps').fadeOut('fast'); - }, 8000); + if (!self.status) { + self.sendRealtimeOn(); + $(this).html('ON').removeClass('rtOff').addClass('rtOn'); + $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); + } else { + self.sendRealtimeOff(); + $(this).html('OFF').removeClass('rtOn').addClass('rtOff'); + $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); + } + self.status = !self.status; + $(".sidebarCollaborateIcon").toggleClass("blue"); + }, + open: function () { + var self = Metamaps.Realtime; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing) { + self.changing = true; + $('.sidebarCollaborateBox').fadeIn(200, function () { + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function () { + var self = Metamaps.Realtime; + + self.timeOut = setTimeout(function () { + if (!self.changing) { + self.changing = true; + $('.sidebarCollaborateBox').fadeOut(200, function () { + self.changing = false; + self.isOpen = false; + }); + } + }, 500); }, setupSocket: function () { + var self = Metamaps.Realtime; var socket = Metamaps.Realtime.socket; socket.emit('newMapperNotify', { - userid: userid, - username: username, + userid: Metamaps.Active.Mapper.id, + username: Metamaps.Active.Mapper.get("name"), mapid: Metamaps.Active.Map.id }); // if you're the 'new guy' update your list with who's already online - socket.on(userid + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', function (data) { - // data.userid - // data.username - // data.userrealtime - - MetamapsModel.mappersOnMap[data.userid] = { - name: data.username, - realtime: data.userrealtime - }; - - var onOff = data.userrealtime ? "On" : "Off"; - var mapperListItem = '
  • ' + data.username + '
    • '; - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - }); + socket.on(userid + '-' + 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', function (data) { - // data.userid - // data.username - - MetamapsModel.mappersOnMap[data.userid] = { - name: data.username, - realtime: false - }; - - var mapperListItem = '
  • ' + data.username + '
    • '; - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - - Metamaps.Realtime.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: username, - userid: userid, - userrealtime: goRealtime, - mapid: Metamaps.Active.Map.id - }; - socket.emit('updateNewMapperList', update); - }); + 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', function (data) { - // data.userid - // data.username - - delete MetamapsModel.mappersOnMap[data.userid]; - - $('#mapper' + data.userid).remove(); - - Metamaps.Realtime.notifyUser(data.username + ' just 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', function (data) { - // data.userid - // data.username - - MetamapsModel.mappersOnMap[data.userid].realtime = true; - - $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn'); - - Metamaps.Realtime.notifyUser(data.username + ' just 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', function (data) { - // data.userid - // data.username + socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator); - MetamapsModel.mappersOnMap[data.userid].realtime = false; - - $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff'); - - Metamaps.Realtime.notifyUser(data.username + ' just turned off realtime'); - }); - - socket.on('maps-' + Metamaps.Active.Map.id, function (data) { - - - - //as long as you weren't the origin of the changes, update your map - if (data.origin != userid && goRealtime) { - if (data.resource == 'Topic') { - topic = $.parseJSON(data.obj); - - if (data.action == 'create') { - Metamaps.Realtime.addTopicToMap(topic); - } else if (data.action == 'update' && Metamaps.Visualize.mGraph.graph.getNode(topic.id) != 'undefined') { - Metamaps.Realtime.updateTopicOnMap(topic); - } else if (data.action == 'destroy' && Metamaps.Visualize.mGraph.graph.getNode(topic.id) != 'undefined') { - hideNode(topic.id) - } - - return; - } else if (data.resource == 'Synapse') { - synapse = $.parseJSON(data.obj); - - if (data.action == 'create') { - Metamaps.Realtime.addSynapseToMap(synapse); - } else if (data.action == 'update' && - Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { - Metamaps.Realtime.updateSynapseOnMap(synapse); - } else if (data.action == 'destroy' && - Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { - var edge = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']); - hideEdge(edge); - } - - return; - } - } - }); + socket.on('maps-' + Metamaps.Active.Map.id, self.contentUpdate); }, 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: username, - userid: userid, + username: Metamaps.Active.Mapper.get("name"), + userid: Metamaps.Active.Mapper.id, mapid: Metamaps.Active.Map.id }; - Metamaps.Realtime.socket.emit('notifyStartRealtime', update); + 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: username, - userid: userid, + username: Metamaps.Active.Mapper.get("name"), + userid: Metamaps.Active.Mapper.id, mapid: Metamaps.Active.Map.id }; - Metamaps.Realtime.socket.emit('notifyStopRealtime', update); + socket.emit('notifyStopRealtime', update); + }, + updateMapperList: function (data) { + var self = Metamaps.Realtime; + var socket = Metamaps.Realtime.socket; + + // data.userid + // data.username + // data.userrealtime + + self.mappersOnMap[data.userid] = { + name: data.username, + realtime: data.userrealtime + }; + + var onOff = data.userrealtime ? "On" : "Off"; + var mapperListItem = '
  • ' + data.username + '
    • '; + + $('#mapper' + data.userid).remove(); + $('.realtimeMapperList ul').append(mapperListItem); + }, + newPeerOnMap: function (data) { + var self = Metamaps.Realtime; + var socket = Metamaps.Realtime.socket; + + // data.userid + // data.username + + self.mappersOnMap[data.userid] = { + name: data.username, + realtime: true + }; + + var mapperListItem = '
  • ' + data.username + '
    • '; + $('#mapper' + data.userid).remove(); + $('.realtimeMapperList ul').append(mapperListItem); + + 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"), + userid: Metamaps.Active.Mapper.id, + userrealtime: self.status, + mapid: Metamaps.Active.Map.id + }; + socket.emit('updateNewMapperList', update); + }, + 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(); + + 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'); + + 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'); + + Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime'); + }, + contentUpdate: function (data) { + var self = Metamaps.Realtime; + var socket = Metamaps.Realtime.socket; + var graph = Metamaps.Visualize.mGraph.graph; + + //as long as you weren't the origin of the changes, update your map + if (data.origin != Metamaps.Active.Mapper.id && self.status) { + if (data.resource == 'Topic') { + topic = $.parseJSON(data.obj); + + if (data.action == 'create') { + self.addTopicToMap(topic); + } else if (data.action == 'update' && graph.getNode(topic.id) != 'undefined') { + self.updateTopicOnMap(topic); + } else if (data.action == 'destroy' && graph.getNode(topic.id) != 'undefined') { + Metamaps.Control.hideNode(topic.id) + } + + return; + } else if (data.resource == 'Synapse') { + synapse = $.parseJSON(data.obj); + + if (data.action == 'create') { + self.addSynapseToMap(synapse); + } else if (data.action == 'update' && + graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { + self.updateSynapseOnMap(synapse); + } else if (data.action == 'destroy' && + graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { + var edge = graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']); + Metamaps.Control.hideEdge(edge); + } + + return; + } + } }, addTopicToMap: function (topic) { + + // TODO var newPos, tempForT; Metamaps.Visualize.mGraph.graph.addNode(topic); tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id); @@ -3529,9 +1538,10 @@ Metamaps.Realtime = { tempForT.setPos(newPos, 'current'); tempForT.setPos(newPos, 'end'); Metamaps.Visualize.mGraph.fx.plotNode(tempForT, Metamaps.Visualize.mGraph.canvas); - return Metamaps.Visualize.mGraph.labels.plotLabel(Metamaps.Visualize.mGraph.canvas, tempForT, Metamaps.Visualize.mGraph.config); }, updateTopicOnMap: function (topic) { + + // TODO var newPos, tempForT; tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id); tempForT.data = topic.data; @@ -3552,6 +1562,8 @@ Metamaps.Realtime = { }); }, addSynapseToMap: function (synapse) { + + // TODO var Node1, Node2, tempForS; Node1 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[0]); Node2 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[1]); @@ -3572,6 +1584,8 @@ Metamaps.Realtime = { }); }, updateSynapseOnMap: function (synapse) { + + // TODO var k, tempForS, v, wasShowDesc, _ref; tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]); wasShowDesc = tempForS.data.$showDesc; @@ -3581,9 +1595,1118 @@ Metamaps.Realtime = { tempForS.data[k] = v; } tempForS.data.$showDesc = wasShowDesc; - if (MetamapsModel.edgecardInUse === synapse.data.$id) { + if (MetamapsModel.edgecardInUse === synapse.data.$id) { // TODO editEdge(tempForS, false); } return Metamaps.Visualize.mGraph.plot(); } -}; \ No newline at end of file +}; // end Metamaps.Realtime + + +/* +* +* CONTROL +* +*/ +Metamaps.Control = { + init: function () { + + }, + selectNode: function (node) { + if (Metamaps.Selected.Nodes.indexOf(node) != -1) return; + node.selected = true; + node.setData('dim', 30, 'current'); + node.eachAdjacency(function (adj) { + Metamaps.Control.selectEdge(adj); + }); + 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.eachAdjacency(function (adj) { + Metamaps.Control.deselectEdge(adj); + }); + node.setData('dim', 25, 'current'); + + //remove the node + Metamaps.Selected.Nodes.splice( + Metamaps.Selected.Nodes.indexOf(node), 1); + }, + deleteSelectedNodes: function () { // refers to deleting topics permanently + 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 + var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); + var id = node.getData('id'); + Metamaps.Control.deselectNode(node); + Metamaps.Topics.get(id).destroy(); + Metamaps.Control.hideNode(nodeid); + }, + removeSelectedNodes: function () { // refers to removing topics permanently from a map + var l = Metamaps.Selected.Nodes.length, + i, + node, + mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); + + if (mapperm) { + 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 + var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper); + var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid); + var mappingid = node.getData("mapping").id; + + if (mapperm) { + Metamaps.Control.deselectNode(node); + Metamaps.Mappings.get(mappingid).destroy(); + 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); + if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph" + alert("You can't hide this topic, it is the root of your graph."); + return; + } + + 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); + }, + selectEdge: function (edge) { + if (Metamaps.Selected.Edges.indexOf(edge) != -1) return; + edge.setData('showDesc', true, 'current'); + if (!Metamaps.Settings.embed) { + edge.setDataset('end', { + lineWidth: 4, + color: Metamaps.Settings.colors.synapses.selected, + alpha: 1 + }); + } else if (Metamaps.Settings.embed) { + edge.setDataset('end', { + lineWidth: 4, + color: Metamaps.Settings.colors.synapses.selected, + alpha: 1 + }); + } + Metamaps.Visualize.mGraph.fx.animate({ + modes: ['edge-property:lineWidth:color:alpha'], + duration: 100 + }); + 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('end', { + lineWidth: 2, + color: Metamaps.Settings.colors.synapses.normal, + alpha: 0.4 + }); + + if (Metamaps.Mouse.edgeHoveringOver == edge) { + edge.setData('showDesc', true, 'current'); + edge.setDataset('end', { + lineWidth: 4, + color: Metamaps.Settings.colors.synapses.hover, + alpha: 1 + }); + } + + Metamaps.Visualize.mGraph.fx.animate({ + modes: ['edge-property:lineWidth:color:alpha'], + duration: 100 + }); + + //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; + for (var i = l - 1; i >= 0; i -= 1) { + edge = Metamaps.Selected.Edges[i]; + Metamaps.Control.deleteEdge(edge); + } + }, + deleteEdge: function (edge) { + + // TODO make it so that you select which one, of multiple possible synapses you want to delete + + //var id = edge.getData("id"); + //Metamaps.Synapses.get(id).destroy(); + //Metamaps.Control.hideEdge(edge); + }, + removeSelectedEdges: function () { + var l = Metamaps.Selected.Edges.length, + i, + edge; + + if (Metamaps.Active.Map) { + 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) { + + // TODO make it so that you select which one, of multiple possible synapses you want + + //var mappingid = edge.getData("mappingid"); + //Metamaps.Mappings.get(mappingid).destroy(); + //Metamaps.Control.hideEdge(edge); + }, + 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.Visualize.mGraph.fx.animate({ + modes: ['edge-property:alpha'], + duration: 500 + }); + setTimeout(function () { + Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to); + }, 500); + }, + 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); + }, +}; // end Metamaps.Control + + +/* +* +* FILTER +* +*/ +Metamaps.Filter = { + filters: { + name: "", + metacode: [], + mappers: [], + synapseTypes: [] + }, + isOpen: false, + timeOut: null, + changing: false, + init: function () { + var self = Metamaps.Filter; + + $(".sidebarFilter").hover(self.open, self.close); + + // initialize scroll bar for filter by metacode, then hide it and position it correctly again + $("#filter_by_metacode").mCustomScrollbar({ + mouseWheelPixels: 200, + advanced: { + updateOnContentResize: true + } + }); + $('.sidebarFilterBox').hide().css({ + position: 'absolute', + top: '35px', + right: '-36px' + }); + + $('.sidebarFilterBox .showAll').click(self.filterNoMetacodes); + $('.sidebarFilterBox .hideAll').click(self.filterAllMetacodes); + + // toggle visibility of topics with metacodes based on status in the filters list + $('#filter_by_metacode ul li').click(self.toggleMetacode); + }, + open: function () { + var self = Metamaps.Filter; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing) { + self.changing = true; + + $('.sidebarFilterBox').fadeIn(200, function () { + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function () { + var self = Metamaps.Filter; + + self.timeOut = setTimeout(function () { + if (!self.changing) { + self.changing = true; + + $('.sidebarFilterBox').fadeOut(200, function () { + self.changing = false; + self.isOpen = false; + }); + } + }, 500); + }, + filterNoMetacodes: function (e) { + + $('#filter_by_metacode ul li').removeClass('toggledOff'); + + // TODO + /* + showAll(); + + for (var catVis in categoryVisible) { + categoryVisible[catVis] = true; + } + */ + }, + filterAllMetacodes: function (e) { + + $('#filter_by_metacode ul li').addClass('toggledOff'); + + // TODO + /* + hideAll(); + for (var catVis in categoryVisible) { + categoryVisible[catVis] = false; + } + */ + }, + toggleMetacode: function () { + + var category = $(this).children('img').attr('alt'); + + // TODO + /*switchVisible(category); + + // toggle the image and the boolean array value + if (categoryVisible[category] == true) { + $(this).addClass('toggledOff'); + categoryVisible[category] = false; + } else if (categoryVisible[category] == false) { + $(this).removeClass('toggledOff'); + categoryVisible[category] = true; + }*/ + }, + passFilters: function (topic) { + var self = Metamaps.Find; + var filters = self.filters; + + var passesName = filters.name == "" ? true : false, + passesType = filters.type == [] ? true : false; + + //filter by name + if (topic.get('1')[1][0].toLowerCase().indexOf(filters.name) !== -1) { + passesName = true; + } + // filter by type + if (!filters.type == []) { + // get the array of types that your topic 'is' + var metacodes = topic.get('2') ? topic.get('2')[1] : []; + if (_.intersection(filters.type, metacodes).length == 0) passesType = true; + } + + if (passesName && passesType) { + return true; + } else { + return false; + } + } +}; // end Metamaps.Filter + + +/* +* +* LISTENERS +* +*/ +Metamaps.Listeners = { + + init: function () { + + $(document).on('keydown', function (e) { + switch (e.which) { + case 13: + Metamaps.JIT.enterKeyHandler(); + e.preventDefault(); + break; + case 27: + Metamaps.JIT.escKeyHandler(); + break; + default: + break; //alert(e.which); + } + }); + + //$(window).resize(function () { + // Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()); + //}); + } +}; // 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!'); + }, + loadSavedLayout: function (id) { + Metamaps.Visualize.computePositions(); + Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout); + }, +}; // 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)); + } + } + }, + + /* + * + * + */ + renderTopic: function (mapping, topic, createNewInDB) { + var self = Metamaps.Topic; + + var nodeOnViz, tempPos; + + var newnode = topic.createNode(); + + if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) { + Metamaps.Visualize.mGraph.graph.addNode(newnode); + Metamaps.Visualize.mGraph.graph.eachNode(function (n) { + n.setData("dim", 25, "start"); + n.setData("dim", 25, "end"); + }); + nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id); + topic.set('node', nodeOnViz); + 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) { + Metamaps.Create.newSynapse.topic1id = tempNode.id; + Metamaps.Create.newSynapse.topic2id = nodeOnViz.id; + 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); + mapping.set('node', nodeOnViz); + mapping.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 () { + + } + }); + } + + if (!Metamaps.Settings.sandbox && createNewInDB) { + if (topic.isNew()) { + topic.save(null, { + success: function (topicModel, response) { + topicModel.updateMapping(); + if (Metamaps.Active.Map) { + mapping.save(); + } + }, + error: function (model, response) { + console.log('error saving topic to database'); + } + }); + } else if (!topic.isNew() && Metamaps.Active.Map) { + mapping.save(); + } + } + }, + createTopicLocally: function () { + var self = Metamaps.Topic; + + var metacode = Metamaps.Metacodes.findWhere({ + name: 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); // this function also includes the creation of the topic in the database + }, + getTopicFromAutocomplete: function (id) { + var self = Metamaps.Topic; + + 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, 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 topic and the mapping to the node + + Metamaps.Visualize.mGraph.fx.plotLine(edgeOnViz, Metamaps.Visualize.mGraph.canvas); + Metamaps.Control.selectEdge(edgeOnViz); + + if (!Metamaps.Settings.sandbox && createNewInDB) { + if (synapse.isNew()) { + synapse.save(null, { + success: function (synapseModel, response) { + synapseModel.updateMapping(); + if (Metamaps.Active.Map) { + mapping.save(); + } + }, + error: function (model, response) { + console.log('error saving synapse to database'); + } + }); + } else if (!synapse.isNew() && Metamaps.Active.Map) { + mapping.save(); + } + } + }, + createSynapseLocally: function () { + var self = Metamaps.Synapse, + topic1, + topic2, + node1, + node2, + synapse, + mapping; + + //for each node in this array we will create a synapse going to the position2 node. + var synapsesToCreate = []; + + node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id); + topic2 = node2.getData('topic'); + + var len = Metamaps.Selected.Nodes.length; + if (len == 0) { + synapsesToCreate[0] = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id); + } 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, + node1, + node2; + + Metamaps.Create.newSynapse.hide(); + + var synapse = self.get(id); + + var mapping = new Metamaps.Backbone.Mapping({ + category: "Synapse", + synapse_id: synapse.id + }); + Metamaps.Mappings.add(mapping); + + node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id); + node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id); + + self.renderSynapse(mapping, synapse, node1, node2, false); + } +}; // end Metamaps.Synapse + + +/* +* +* MAP +* +*/ +Metamaps.Map = { + 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(); + }); + + self.InfoBox.init(); + self.CheatSheet.init(); + }, + // this function is to retrieve a map JSON object from the database + // @param id = the id of the map to retrieve + get: function (id, callback) { + // if the desired topic is not yet in the local topic repository, fetch it + if (Metamaps.Maps.get(id) == undefined) { + if (!callback) { + var e = $.ajax({ + url: "/maps/" + id + ".json", + async: false + }); + Metamaps.Maps.add($.parseJSON(e.responseText)); + return Metamaps.Maps.get(id); + } else { + return $.ajax({ + url: "/users/" + id + ".json", + success: function (data) { + Metamaps.Maps.add(data); + callback(Metamaps.Maps.get(id)); + } + }); + } + } else { + if (!callback) { + return Metamaps.Maps.get(id); + } else { + return callback(Metamaps.Maps.get(id)); + } + } + }, + fork: function () { + Metamaps.GlobalUI.openLightbox('forkmap'); + + var nodes_data = "", + synapses_data = ""; + var synapses_array = new Array(); + Metamaps.Visualize.mGraph.graph.eachNode(function (n) { + //don't add to the map if it was filtered out + // TODO + //if (categoryVisible[n.getData('metacode')] == false) { + // return; + //} + + 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 += n.id + '/' + x + '/' + y + ','; + n.eachAdjacency(function (adj) { + synapses_array.push(adj.getData("synapses")[0].id); // TODO + }); + }); + + //get unique values only + synapses_array = $.grep(synapses_array, function (value, key) { + return $.inArray(value, synapses_array) === key; + }); + + synapses_data = synapses_array.join(); + nodes_data = nodes_data.slice(0, -1); + + $('#map_topicsToMap').val(nodes_data); + $('#map_synapsesToMap').val(synapses_data); + } +}; + + +/* +* +* CHEATSHEET +* +*/ +Metamaps.Map.CheatSheet = { + init: function () { + // tab the cheatsheet + $('#cheatSheet').tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); + $("#cheatSheet .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); + } +}; // end Metamaps.Map.CheatSheet + + +/* +* +* INFOBOX +* +*/ +Metamaps.Map.InfoBox = { + isOpen: false, + timeOut: null, + changing: false, + selectingPermission: false, + init: function () { + var self = Metamaps.Map.InfoBox; + + // because anyone who can edit the map can change the map title + $('.mapInfoName .best_in_place_name').bind("ajax:success", function () { + var name = $(this).html(); + $('.mapName').html(name); + Metamaps.Active.Map.set('name', name); + }); + + $('.yourMap .mapPermission').click(self.onPermissionClick); + + $("div.index").hover(self.open, self.close); + }, + open: function (event) { + var self = Metamaps.GlobalUI.Account; + + clearTimeout(self.timeOut); + if (!self.isOpen && !self.changing && event.target.className != "openCheatsheet openLightbox") { + self.changing = true; + $('.mapInfoBox').fadeIn(200, function () { + self.changing = false; + self.isOpen = true; + }); + } + }, + close: function () { + var self = Metamaps.GlobalUI.Account; + + self.timeOut = setTimeout(function () { + if (!self.changing) { + self.changing = true; + $('.mapInfoBox').fadeOut(200, function () { + self.changing = false; + self.isOpen = false; + }); + } + }, 500); + }, + onPermissionClick: function () { + 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); + } else { + self.selectingPermission = false; + $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow + $('.mapPermission .permissionSelect').remove(); + } + }, + selectPermission: function () { + var self = Metamaps.Map.InfoBox; + + self.selectingPermission = false; + var permission = $(this).attr('class'); + Metamaps.Active.Map.save({ + permission: permission + }); + $('.mapPermission').removeClass('commons public private minimize').addClass(permission); + $('.mapPermission .permissionSelect').remove(); + event.stopPropagation(); + } +}; // end Metamaps.Map.InfoBox + + +/* +* +* 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) { + // if the desired topic is not yet in the local topic repository, fetch it + if (Metamaps.Mappers.get(id) == undefined) { + if (!callback) { + var e = $.ajax({ + url: "/users/" + id + ".json", + async: false + }); + Metamaps.Mappers.add($.parseJSON(e.responseText)); + return Metamaps.Mappers.get(id); + } else { + return $.ajax({ + url: "/users/" + id + ".json", + success: function (data) { + Metamaps.Mappers.add(data); + callback(Metamaps.Mappers.get(id)); + } + }); + } + } else { + if (!callback) { + return Metamaps.Mappers.get(id); + } else { + return callback(Metamaps.Mappers.get(id)); + } + } + }, +}; // end Metamaps.Mapper \ No newline at end of file diff --git a/app/assets/javascripts/realtime/realtime.js b/app/assets/javascripts/realtime/realtime.js deleted file mode 100644 index db5a0717..00000000 --- a/app/assets/javascripts/realtime/realtime.js +++ /dev/null @@ -1,235 +0,0 @@ -window.realtime = {}; - -window.realtime.notifyTimeOut = null; -window.realtime.notifyUser = function (message) { - if ($('.notice.metamaps').length == 0) { - $('body').prepend('
    '); - } - $('.notice.metamaps').hide().html(message).fadeIn('fast'); - - clearTimeout(window.realtime.notifyTimeOut); - window.realtime.notifyTimeOut = setTimeout(function () { - $('.notice.metamaps').fadeOut('fast'); - }, 8000); -}; - -window.realtime.setupSocket = function () { - var socket = window.realtime.socket; - - socket.emit('newMapperNotify', { - userid: userid, - username: username, - mapid: mapid - }); - - // if you're the 'new guy' update your list with who's already online - socket.on(userid + '-' + mapid + '-UpdateMapperList', function (data) { - // data.userid - // data.username - // data.userrealtime - - MetamapsModel.mappersOnMap[data.userid] = { - name: data.username, - realtime: data.userrealtime - }; - - var onOff = data.userrealtime ? "On" : "Off"; - var mapperListItem = '
  • ' + data.username + '
    • '; - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - }); - - // receive word that there's a new mapper on the map - socket.on('maps-' + mapid + '-newmapper', function (data) { - // data.userid - // data.username - - MetamapsModel.mappersOnMap[data.userid] = { - name: data.username, - realtime: false - }; - - var mapperListItem = '
  • ' + data.username + '
    • '; - $('#mapper' + data.userid).remove(); - $('.realtimeMapperList ul').append(mapperListItem); - - window.realtime.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: username, - userid: userid, - userrealtime: goRealtime, - mapid: mapid - }; - socket.emit('updateNewMapperList', update); - }); - - // receive word that a mapper left the map - socket.on('maps-' + mapid + '-lostmapper', function (data) { - // data.userid - // data.username - - delete MetamapsModel.mappersOnMap[data.userid]; - - $('#mapper' + data.userid).remove(); - - window.realtime.notifyUser(data.username + ' just left the map'); - }); - - // receive word that there's a mapper turned on realtime - socket.on('maps-' + mapid + '-newrealtime', function (data) { - // data.userid - // data.username - - MetamapsModel.mappersOnMap[data.userid].realtime = true; - - $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn'); - - window.realtime.notifyUser(data.username + ' just turned on realtime'); - }); - - // receive word that there's a mapper turned on realtime - socket.on('maps-' + mapid + '-lostrealtime', function (data) { - // data.userid - // data.username - - MetamapsModel.mappersOnMap[data.userid].realtime = false; - - $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff'); - - window.realtime.notifyUser(data.username + ' just turned off realtime'); - }); - - socket.on('maps-' + mapid, function (data) { - - - - //as long as you weren't the origin of the changes, update your map - if (data.origin != userid && goRealtime) { - if (data.resource == 'Topic') { - topic = $.parseJSON(data.obj); - - if (data.action == 'create') { - window.realtime.addTopicToMap(topic); - } else if (data.action == 'update' && Mconsole.graph.getNode(topic.id) != 'undefined') { - window.realtime.updateTopicOnMap(topic); - } else if (data.action == 'destroy' && Mconsole.graph.getNode(topic.id) != 'undefined') { - hideNode(topic.id) - } - - return; - } else if (data.resource == 'Synapse') { - synapse = $.parseJSON(data.obj); - - if (data.action == 'create') { - window.realtime.addSynapseToMap(synapse); - } else if (data.action == 'update' && - Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { - window.realtime.updateSynapseOnMap(synapse); - } else if (data.action == 'destroy' && - Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') { - var edge = Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']); - hideEdge(edge); - } - - return; - } - } - }); -}; - -window.realtime.sendRealtimeOn = function () { - // send this new mapper back your details, and the awareness that you're online - var update = { - username: username, - userid: userid, - mapid: mapid - }; - window.realtime.socket.emit('notifyStartRealtime', update); -} - -window.realtime.sendRealtimeOff = function () { - // send this new mapper back your details, and the awareness that you're online - var update = { - username: username, - userid: userid, - mapid: mapid - }; - window.realtime.socket.emit('notifyStopRealtime', update); -} - -window.realtime.addTopicToMap = function (topic) { - var newPos, tempForT; - Mconsole.graph.addNode(topic); - tempForT = Mconsole.graph.getNode(topic.id); - tempForT.setData('dim', 1, 'start'); - tempForT.setData('dim', 25, 'end'); - newPos = new $jit.Complex(); - newPos.x = tempForT.data.$xloc; - newPos.y = tempForT.data.$yloc; - tempForT.setPos(newPos, 'start'); - tempForT.setPos(newPos, 'current'); - tempForT.setPos(newPos, 'end'); - Mconsole.fx.plotNode(tempForT, Mconsole.canvas); - return Mconsole.labels.plotLabel(Mconsole.canvas, tempForT, Mconsole.config); -}; - -window.realtime.updateTopicOnMap = function (topic) { - var newPos, tempForT; - tempForT = Mconsole.graph.getNode(topic.id); - tempForT.data = topic.data; - tempForT.name = topic.name; - if (MetamapsModel.showcardInUse === topic.id) { - populateShowCard(tempForT); - } - newPos = new $jit.Complex(); - newPos.x = tempForT.data.$xloc; - newPos.y = tempForT.data.$yloc; - tempForT.setPos(newPos, 'start'); - tempForT.setPos(newPos, 'current'); - tempForT.setPos(newPos, 'end'); - return Mconsole.fx.animate({ - modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'], - transition: $jit.Trans.Quad.easeInOut, - duration: 500 - }); -}; - -window.realtime.addSynapseToMap = function (synapse) { - var Node1, Node2, tempForS; - Node1 = Mconsole.graph.getNode(synapse.data.$direction[0]); - Node2 = Mconsole.graph.getNode(synapse.data.$direction[1]); - Mconsole.graph.addAdjacence(Node1, Node2, {}); - tempForS = Mconsole.graph.getAdjacence(Node1.id, Node2.id); - tempForS.setDataset('start', { - lineWidth: 0.4 - }); - tempForS.setDataset('end', { - lineWidth: 2 - }); - tempForS.data = synapse.data; - Mconsole.fx.plotLine(tempForS, Mconsole.canvas); - return Mconsole.fx.animate({ - modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'], - transition: $jit.Trans.Quad.easeInOut, - duration: 500 - }); -}; - -window.realtime.updateSynapseOnMap = function (synapse) { - var k, tempForS, v, wasShowDesc, _ref; - tempForS = Mconsole.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]); - wasShowDesc = tempForS.data.$showDesc; - _ref = synapse.data; - for (k in _ref) { - v = _ref[k]; - tempForS.data[k] = v; - } - tempForS.data.$showDesc = wasShowDesc; - if (MetamapsModel.edgecardInUse === synapse.data.$id) { - editEdge(tempForS, false); - } - return Mconsole.plot(); -}; \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 924cd0cc..c7e84755 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -514,7 +514,7 @@ label[for="user_remember_me"] { position: absolute; top: 0; left: -41px; - background: #0F1519 url('MMCCicon_help.png') no-repeat center center; + background: url('MMCCicon_help.png') no-repeat center center; background-size: 27px 27px; border-radius: 5px; height: 36px; @@ -692,18 +692,17 @@ li.accountInvite span { z-index: 200; width: 35px; height: 35px; - border-right: 1px solid black; } .sidebarForkIcon { position: absolute; width: 35px; height: 35px; - background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center; + background: url('MMCCicon_save_new_map.png') no-repeat center center; background-size: 28px 28px; cursor: pointer; } .sidebarForkIcon:hover { - background-color: black; + } .sidebarForkBox { position: absolute; @@ -746,18 +745,17 @@ li.accountInvite span { z-index: 200; width: 35px; height: 35px; - border-right: 1px solid black; } .sidebarSaveIcon { position: absolute; width: 35px; height: 35px; - background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center; + background: url('MMCCicon_save_layout.png') no-repeat center center; background-size: 22px 22px; cursor: pointer; } .sidebarSaveIcon:hover { - background-color: black; + } .sidebarSaveBox { position: absolute; @@ -798,7 +796,6 @@ li.accountInvite span { z-index: 200; width: 35px; height: 35px; - border-right: 1px solid black; } .sidebarFilter.loggedout { right: 35px; @@ -807,12 +804,12 @@ li.accountInvite span { position: absolute; width: 35px; height: 35px; - background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center; + background: url('MMCCicon_filter2.png') no-repeat center center; background-size: 28px 28px; cursor: pointer; } .sidebarFilterIcon:hover { - background-color: black; + } /* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then we hide the element and position it correctly */ @@ -889,7 +886,6 @@ h3.filterByMetacode { z-index: 200; width: 35px; height: 35px; - border-right: 1px solid black; } .sidebarCollaborateIcon { position: absolute; @@ -899,7 +895,6 @@ h3.filterByMetacode { background-size: 36px 36px; background-position: center center; background-repeat: no-repeat; - background-color: #0F1519; cursor: pointer; } .sidebarCollaborateIcon.blue { @@ -2269,7 +2264,7 @@ div.mapInfoStat { top: 0px; width: 44px; height: 35px; - background: #0F1519 url('MMCCicon_add_map.png') no-repeat 3px -4px; + background: url('MMCCicon_add_map.png') no-repeat 3px -4px; background-size: 40px 40px; border-radius: 5px; cursor: pointer; diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index a6c70db7..cdc403f8 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -1,6 +1,6 @@ class MapsController < ApplicationController - before_filter :require_user, only: [:new, :create, :edit, :update, :savelayout, :destroy] + before_filter :require_user, only: [:create, :update, :destroy] respond_to :html, :js, :json @@ -52,14 +52,6 @@ class MapsController < ApplicationController respond_with(@maps, @request, @user) end - # GET maps/new - def new - @map = Map.new - @user = current_user - - respond_with(@map) - end - # GET maps/:id def show @@ -69,8 +61,6 @@ class MapsController < ApplicationController if not @map redirect_to root_url and return end - - @mapjson = @map.self_as_json(@current).html_safe @alltopics = @map.topics # should limit to topics visible to user @allsynapses = @map.synapses # should also be limited @@ -78,43 +68,29 @@ class MapsController < ApplicationController @allmetacodes = Metacode.all respond_to do |format| - format.html { respond_with(@allmetacodes, @allmappings, @allsynapses, @alltopics, @map, @user) } - #format.json { respond_with(@mapjson) } - format.json { render json: @topics } - end + format.html { respond_with(@allmetacodes, @allmappings, @allsynapses, @alltopics, @map, @user) } + format.json { render json: @map } + end end # GET maps/:id/embed def embed - - @current = current_user + @current = current_user @map = Map.find(params[:id]).authorize_to_show(@current) if not @map redirect_to root_url and return end - - @mapjson = @map.self_as_json(@current).html_safe - + + @alltopics = @map.topics # should limit to topics visible to user + @allsynapses = @map.synapses # should also be limited + @allmappings = @map.mappings + @allmetacodes = Metacode.all + respond_to do |format| - format.html { respond_with(@map, @user) } - format.json { respond_with(@mapjson) } - end - end - - # GET maps/:id/json - def json - - @current = current_user - @map = Map.find(params[:id]).authorize_to_show(@current) - - if not @map - redirect_to root_url and return - end - - respond_to do |format| - format.json { render :json => @map.self_as_json(@current) } - end + format.html { respond_with(@allmetacodes, @allmappings, @allsynapses, @alltopics, @map, @user) } + format.json { render json: @map } + end end # POST maps @@ -171,20 +147,6 @@ class MapsController < ApplicationController end end - # GET maps/:id/edit - def edit - @current = current_user - @map = Map.find(params[:id]).authorize_to_edit(@current) - - if not @map - redirect_to root_url and return - end - - @outtopics = @map.topics.order("name ASC").delete_if{|topic| not topic.authorize_to_view(@current)} - - respond_with(@user, @map, @outtopics) - end - # PUT maps/:id def update @current = current_user @@ -202,32 +164,6 @@ class MapsController < ApplicationController respond_with @map end - # PUT maps/:id/savelayout - def savelayout - @user = current_user - @map = Map.find(params[:id]) - - if params[:map][:coordinates] - @all = params[:map][:coordinates] - @all = @all.split(',') - @all.each do |topic| - topic = topic.split('/') - @mapping = Mapping.find(topic[0]) - if @mapping - @mapping.xloc = topic[1] - @mapping.yloc = topic[2] - @mapping.save - - #push realtime update for location on map - @mapping.message 'update',@user.id - end - end - @map.arranged = true - @map.touch(:updated_at) - @map.save - end - end - # DELETE maps/:id def destroy @current = current_user diff --git a/app/controllers/synapses_controller.rb b/app/controllers/synapses_controller.rb index 8875c493..25a49ffe 100644 --- a/app/controllers/synapses_controller.rb +++ b/app/controllers/synapses_controller.rb @@ -3,20 +3,19 @@ class SynapsesController < ApplicationController before_filter :require_user, only: [:create, :update, :destroy] - respond_to :js, :json + respond_to :json - # GET synapses/:id/json - def json - @current = current_user - @synapse = Synapse.find(params[:id]).authorize_to_show(@current) + # GET /synapses/1.json + def show + @synapse = Synapse.find(params[:id]) + + #.authorize_to_show(@current) - if not @synapse - redirect_to root_url and return - end - - respond_to do |format| - format.json { render :json => @synapse.selfplusnodes_as_json } - end + #if not @synapse + # redirect_to root_url and return + #end + + render json: @synapse end # POST /synapses @@ -65,7 +64,7 @@ class SynapsesController < ApplicationController @synapse.delete if @synapse respond_to do |format| - format.js { render :json => "success" } + format.json { render :json => "success" } end end end diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb index 7081ad62..04ed5249 100644 --- a/app/controllers/topics_controller.rb +++ b/app/controllers/topics_controller.rb @@ -38,21 +38,6 @@ class TopicsController < ApplicationController format.json { render :json => @topic } end end - - # GET topics/:id/json - def json - @current = current_user - @topic = Topic.find(params[:id]).authorize_to_show(@current) - - if not @topic - redirect_to root_url and return - end - - respond_to do |format| - #format.json { render :json => @topic.self_as_json } - format.json { render :json => @topic.to_json } - end - end # POST /topics # POST /topics.json diff --git a/app/models/map.rb b/app/models/map.rb index a636a72d..abac522f 100644 --- a/app/models/map.rb +++ b/app/models/map.rb @@ -33,67 +33,6 @@ end return contributors end - - ###### JSON ###### - #build a json object of a map - def self_as_json(current) - Jbuilder.encode do |json| - @topics = self.topics.dup - @synapses = self.synapses.dup - - json.array!(@topics.delete_if{|topic| not topic.authorize_to_view(current)}) do |topic| - - #json.adjacencies topic.synapses2.delete_if{|synapse| (not @topics.include?(synapse.topic1)) || (not @synapses.include?(synapse)) || (not synapse.authorize_to_view(current)) || (not synapse.topic1.authorize_to_view(current)) } do |json, synapse| - - json.adjacencies topic.synapses1.delete_if{|synapse| (not @synapses.include?(synapse)) || (not @topics.include?(synapse.topic2)) || (not synapse.authorize_to_view(current)) || (not synapse.topic2.authorize_to_view(current)) } do |json, synapse| - json.nodeTo synapse.node2_id - json.nodeFrom synapse.node1_id - - @synapsedata = Hash.new - @synapsedata['$desc'] = synapse.desc - @synapsedata['$showDesc'] = false - @synapsedata['$category'] = synapse.category - @synapsedata['$id'] = synapse.id - @synapsedata['$userid'] = synapse.user.id - @synapsedata['$username'] = synapse.user.name - @synapsedata['$direction'] = [synapse.node1_id.to_s(), synapse.node2_id.to_s()] - @synapsedata['$permission'] = synapse.permission - @mapping = Mapping.find_by_synapse_id_and_map_id(synapse.id,self.id) - @synapsedata['$mappingid'] = @mapping.id - json.data @synapsedata - end - - @inmaps = Array.new - @mapsString = "" - topic.maps.each_with_index do |map, index| - @inmaps.push(map.id) - @mapsString += map.name - @mapsString += (index+1) == topic.maps.count ? "" : ", " - end - - @topicdata = Hash.new - @topicdata['$desc'] = topic.desc - @topicdata['$link'] = topic.link - @topicdata['$metacode'] = topic.metacode.name - @topicdata['$inmaps'] = @inmaps - @topicdata['$inmapsString'] = @mapsString - @topicdata['$synapseCount'] = topic.synapses.count - @topicdata['$userid'] = topic.user.id - @topicdata['$username'] = topic.user.name - @mapping = Mapping.find_by_topic_id_and_map_id(topic.id,self.id) - @topicdata['$xloc'] = @mapping.xloc - @topicdata['$yloc'] = @mapping.yloc - @topicdata['$mappingid'] = @mapping.id - @topicdata['$permission'] = topic.permission - @topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y") - @topicdata['$id'] = topic.id - json.data @topicdata - json.id @mapping.id - json.name topic.name - end - end - end - ##### PERMISSIONS ###### scope :visibleToUser, lambda { |current, user| @@ -135,15 +74,5 @@ end end return true end - - # returns Boolean based on whether user has permissions to edit or not - def authorize_linkto_edit(user) - if (self.user == user) - return true - elsif (self.permission == "commons") - return true - end - return false - end end diff --git a/app/views/layouts/_lightboxes.html.erb b/app/views/layouts/_lightboxes.html.erb index 8813c912..0328db16 100644 --- a/app/views/layouts/_lightboxes.html.erb +++ b/app/views/layouts/_lightboxes.html.erb @@ -6,7 +6,7 @@ <% end %>
    @@ -57,13 +59,15 @@
    - +
    \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 45aa2df2..caed06b6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -29,8 +29,8 @@ <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> - <% if controller_name == "maps" && action_name == "show" %> - <%= javascript_include_tag "map" %> + <% if (controller_name == "maps" || controller_name == "topics") && action_name == "show" %> + <%= javascript_include_tag "compileMapPages" %> <% end %> diff --git a/app/views/maps/_fork.html.erb b/app/views/maps/_fork.html.erb index 2ec5fa82..15cd12c8 100644 --- a/app/views/maps/_fork.html.erb +++ b/app/views/maps/_fork.html.erb @@ -58,7 +58,7 @@

    *new topics and synapses take on the same permission as the map they are created on

    - + <%= form.submit "Create!", class: "add" %>
    diff --git a/app/views/maps/_new.html.erb b/app/views/maps/_new.html.erb index 10b1c1ce..06c0c459 100644 --- a/app/views/maps/_new.html.erb +++ b/app/views/maps/_new.html.erb @@ -53,7 +53,7 @@

    *new topics and synapses take on the same permission as the map they are created on

    - + <%= form.submit "Create!", class: "add" %>
    diff --git a/app/views/maps/_newsynapse.html.erb b/app/views/maps/_newsynapse.html.erb index d32b7398..10f77fd3 100644 --- a/app/views/maps/_newsynapse.html.erb +++ b/app/views/maps/_newsynapse.html.erb @@ -6,11 +6,5 @@
    <%= form_for Synapse.new, url: synapses_url, remote: true do |form| %> <%= form.text_field :desc, :placeholder => "describe the connection..." %> - <%= form.hidden_field :topic1id, :value => 0 %> - <%= form.hidden_field :topic2id, :value => 0 %> - <%= form.hidden_field :grabSynapse, :value => "null" %> - <% if (@map.permission == "commons" && authenticated?) || @map.user == user %> - <%= form.hidden_field :map, :value => @map.id %> - <% end %> <% end %>
    diff --git a/app/views/maps/_newtopic.html.erb b/app/views/maps/_newtopic.html.erb index 8ba65f32..de307a22 100644 --- a/app/views/maps/_newtopic.html.erb +++ b/app/views/maps/_newtopic.html.erb @@ -22,23 +22,15 @@ <% end %>
    <%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %> - <%= form.hidden_field :metacode, :value => "Action" %> - <%= form.hidden_field :x, :value => 0 %> - <%= form.hidden_field :y, :value => 0 %> - <% if (@map.permission == "commons" && authenticated?) || @map.user == user %> - <%= form.hidden_field :map, :value => @map.id %> - <% end %> - <%= form.hidden_field :grabTopic, :value => "null" %> - <%= form.hidden_field :addSynapse, :value => false %>
    diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index 6fc2f193..8354eb7e 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -12,14 +12,6 @@ <% if authenticated? %> - <% if @map.permission == "commons" || @map.user == user %> -
    -
    -
    Save Layout
    -
    -
    -
    - <% end %>
    Save To New Map
    @@ -28,14 +20,14 @@
    <% if @map.permission == "commons" || @map.user == user %>
    -
    +

    Realtime:

    - OFF + ON
      -
    • +
    • <%= user.name %> (me)
    @@ -73,17 +65,10 @@ <% if authenticated? %> <% # add these if you have edit permissions on the map %> - <% if @map.permission == "commons" || @map.user == user %> - + <% if @map.permission == "commons" || @map.user == user %> <% # for creating and pulling in topics and synapses %> <%= render :partial => 'newtopic' %> <%= render :partial => 'newsynapse' %> - - <% # for saving the layout of the map %> - <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %> - <%= form.hidden_field "coordinates", :value => "" %> - <% end %> - <% end %> <% # for populating the change metacode list on the topic card %> diff --git a/config/environments/production.rb b/config/environments/production.rb index 10f00ab8..d476c262 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -70,7 +70,7 @@ ISSAD::Application.configure do # config.action_controller.asset_host = "http://assets.example.com" # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added) - config.assets.precompile += %w( metamaps.js ) + config.assets.precompile += %w( compileMapPages.js ) # Disable delivery errors, bad email addresses will be ignored # config.action_mailer.raise_delivery_errors = false diff --git a/config/routes.rb b/config/routes.rb index bf0e3f80..c8473630 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -12,20 +12,14 @@ ISSAD::Application.routes.draw do match '/search/mappers', to: 'main#searchmappers', via: :get, as: :searchmappers match '/search/synapses', to: 'main#searchsynapses', via: :get, as: :searchsynapses - match 'maps/:id/savelayout', to: 'maps#savelayout', via: :put, as: :savelayout - match 'topics/:map_id/:topic_id/removefrommap', to: 'topics#removefrommap', via: :post, as: :removefrommap - match 'synapses/:map_id/:synapse_id/removefrommap', to: 'synapses#removefrommap', via: :post, as: :removefrommap - resources :in_metacode_sets resources :metacode_sets, :except => [:show] resources :metacodes, :except => [:show, :destroy] resources :topics, except: [:index, :new, :edit] do get :autocomplete_topic, :on => :collection end - match 'topics/:id/:format', to: 'topics#json', via: :get, as: :json - resources :synapses, except: [:index, :new, :edit, :show] - match 'synapses/:id/:format', to: 'synapses#json', via: :get, as: :json + resources :synapses, except: [:index, :new, :edit] match 'maps/active', to: 'maps#index', via: :get, as: :activemaps match 'maps/featured', to: 'maps#index', via: :get, as: :featuredmaps @@ -36,7 +30,6 @@ ISSAD::Application.routes.draw do resources :maps, except: [:new, :edit] match 'maps/:id/embed', to: 'maps#embed', via: :get, as: :embed - match 'maps/:id/:format', to: 'maps#json', via: :get, as: :json devise_for :users, :controllers => { :registrations => "registrations" }, :path_names => { :sign_in => 'login', :sign_out => 'logout' } devise_scope :user do @@ -46,6 +39,6 @@ ISSAD::Application.routes.draw do resources :users, except: [:index] - resources :mappings + resources :mappings, except: [:index, :new, :edit] end