diff --git a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js b/app/assets/javascripts/Jit/ForceDirected/metamapFD.js
deleted file mode 100644
index def4cffd..00000000
--- a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js
+++ /dev/null
@@ -1,323 +0,0 @@
-var labelType, useGradients, nativeTextSupport, animate, json, fd;
-
-(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);
-})();
-
-var imgArray = new Object();
-
-imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
-imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
-imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
-imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
-imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
-imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
-imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
-imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
-imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
-imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
-imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
-imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
-imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
-imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
-imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
-imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
-imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
-imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
-imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
-imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
-imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
-imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
-imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
-imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
-imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
-imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
-imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
-imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
-
-function initFD(){
- // init custom node type
- $jit.ForceDirected.Plot.NodeTypes.implement({
- 'customNode': {
- 'render': function (node, canvas) {
- var pos = node.pos.getc(true),
- dim = node.getData('dim'),
- cat = node.getData('itemcatname'),
- ctx = canvas.getCtx();
- 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);
- }
- }
- });
- //implement an edge type
- $jit.ForceDirected.Plot.EdgeTypes.implement({
- '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
- //plot arrow edge
- if (directionCat == "none") {
- this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
- }
- else if (directionCat == "both") {
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
- }
- else if (directionCat == "from-to") {
- var direction = adj.data.$direction;
- var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, inv, canvas);
- }
-
- //check for edge label in data
- var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
- var showDesc = adj.getData("showDesc");
- if( desc != "" && showDesc ) {
- //now adjust the label placement
- var radius = canvas.getSize();
- var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
- var y = parseInt((pos.y + posChild.y) /2);
- canvas.getCtx().fillStyle = '#000';
- canvas.getCtx().font = 'bold 14px arial';
- //canvas.getCtx().fillText(desc, x, y);
- }
- }
- }
- });
- // end
- // init ForceDirected
- fd = new $jit.ForceDirected({
- //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: 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,
- color: '#2D6A5D',
- type: 'customNode',
- dim: 25
- },
- Edge: {
- overridable: true,
- color: '#222222',
- type: 'customEdge',
- lineWidth: 1
- },
- //Native canvas text styling
- Label: {
- type: 'HTML', //Native or HTML
- size: 20,
- //style: 'bold'
- },
- //Add Tips
- Tips: {
- enable: true,
- onShow: function(tip, node) {
- //count connections
- var count = 0;
- node.eachAdjacency(function() { count++; });
- //display node info in tooltip
- tip.innerHTML = "
" + node.name + "
"
- + "connections: " + count + "
";
- }
- },
- // Add node events
- Events: {
- enable: true,
- type: 'HTML',
- //Change cursor style when hovering a node
- onMouseEnter: function() {
- //fd.canvas.getElement().style.cursor = 'move';
- },
- onMouseLeave: function() {
- //fd.canvas.getElement().style.cursor = '';
- },
- //Update node positions when dragged
- onDragMove: function(node, eventInfo, e) {
- var pos = eventInfo.getPos();
- node.pos.setc(pos.x, pos.y);
- fd.plot();
- },
- //Implement the same handler for touchscreens
- onTouchMove: function(node, eventInfo, e) {
- $jit.util.event.stop(e); //stop default touchmove event
- this.onDragMove(node, eventInfo, e);
- },
- //Add also a click handler to nodes
- onClick: function(node) {
- if(!node) return;
- //set final styles
- fd.graph.eachNode(function(n) {
- if(n.id != node.id) delete n.selected;
- n.setData('dim', 25, 'end');
- n.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 0.5,
- color: '#222222'
- });
- adj.setData('showDesc', false, 'current');
- });
- });
- if(!node.selected) {
- node.selected = true;
- node.setData('dim', 35, 'end');
- node.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 3,
- color: '#FFF'
- });
- adj.setData('showDesc', true, 'current');
- });
- } else {
- delete node.selected;
- }
- //trigger animation to final styles
- fd.fx.animate({
- modes: ['node-property:dim',
- 'edge-property:lineWidth:color'],
- duration: 500
- });
- // Build the right column relations list.
- // This is done by traversing the clicked node connections.
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- }
- },
- //Number of iterations for the FD algorithm
- iterations: 200,
- //Edge length
- levelDistance: 200,
- // Add text to the labels. This method is only triggered
- // on label creation and only for DOM labels (not native canvas ones).
- onCreateLabel: function(domElement, node){
- // Create a 'name' and 'close' buttons and add them
- // to the main node label
- var nameContainer = document.createElement('span'),
- style = nameContainer.style;
- nameContainer.className = 'name';
- nameContainer.innerHTML = '' + node.name + '
';
- domElement.appendChild(nameContainer);
- style.fontSize = "0.9em";
- style.color = "#222222";
- //Toggle a node selection when clicking
- //its name. This is done by animating some
- //node styles like its dimension and the color
- //and lineWidth of its adjacencies.
- nameContainer.onclick = function() {
- //set final styles
- fd.graph.eachNode(function(n) {
- if(n.id != node.id) delete n.selected;
- n.setData('dim', 25, 'end');
- n.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 0.4,
- color: '#222222'
- });
- adj.setData('showDesc', false, 'current');
- });
- });
- if(!node.selected) {
- node.selected = true;
- node.setData('dim', 35, 'end');
- node.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 3,
- color: '#FFF'
- });
- adj.setData('showDesc', true, 'current');
- });
- } else {
- delete node.selected;
- }
- //trigger animation to final styles
- fd.fx.animate({
- modes: ['node-property:dim',
- 'edge-property:lineWidth:color'],
- duration: 500
- });
- // Build the right column relations list.
- // This is done by traversing the clicked node connections.
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- };
- },
- // Change node styles when DOM labels are placed
- // or moved.
- onPlaceLabel: function(domElement, node){
- var style = domElement.style;
- var left = parseInt(style.left);
- var top = parseInt(style.top);
- var w = domElement.offsetWidth;
- var dim = node.getData('dim');
- style.left = (left - w / 2) + 'px';
- style.top = (top + dim) + 'px';
- style.display = '';
- }
- });
- // load JSON data.
- fd.loadJSON(json);
- // compute positions incrementally and animate.
- fd.compute()
-
- $(document).ready(function() {
- fd.animate({
- modes: ['linear'],
- transition: $jit.Trans.Elastic.easeOut,
- duration: 2500
- });
- });
- // end
-}
diff --git a/app/assets/javascripts/Jit/Map/metamapMAP.js b/app/assets/javascripts/Jit/Map/metamapMAP.js
deleted file mode 100644
index 81e3f359..00000000
--- a/app/assets/javascripts/Jit/Map/metamapMAP.js
+++ /dev/null
@@ -1,330 +0,0 @@
-var labelType, useGradients, nativeTextSupport, animate, json, map;
-
-(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);
-})();
-
-var imgArray = new Object();
-
-imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
-imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
-imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
-imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
-imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
-imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
-imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
-imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
-imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
-imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
-imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
-imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
-imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
-imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
-imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
-imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
-imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
-imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
-imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
-imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
-imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
-imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
-imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
-imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
-imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
-imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
-imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
-imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
-
-function initMAP(){
- // init custom node type
- $jit.ForceDirected.Plot.NodeTypes.implement({
- 'customNode': {
- 'render': function (node, canvas) {
- var pos = node.pos.getc(true),
- dim = node.getData('dim'),
- cat = node.getData('itemcatname'),
- ctx = canvas.getCtx();
- 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);
- }
- }
- });
- //implement an edge type
- $jit.ForceDirected.Plot.EdgeTypes.implement({
- '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
- //plot arrow edge
- if (directionCat == "none") {
- this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
- }
- else if (directionCat == "both") {
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
- }
- else if (directionCat == "from-to") {
- var direction = adj.data.$direction;
- var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, inv, canvas);
- }
-
- //check for edge label in data
- var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
- var showDesc = adj.getData("showDesc");
- if( desc != "" && showDesc ) {
- //now adjust the label placement
- var radius = canvas.getSize();
- var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
- var y = parseInt((pos.y + posChild.y) /2);
- canvas.getCtx().fillStyle = '#000';
- canvas.getCtx().font = 'bold 14px arial';
- //canvas.getCtx().fillText(desc, x, y);
- }
- }
- }
- });
- // end
- // init ForceDirected
- map = new $jit.ForceDirected({
- //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: 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,
- color: '#2D6A5D',
- type: 'customNode',
- dim: 25
- },
- Edge: {
- overridable: true,
- color: '#222222',
- type: 'customEdge',
- lineWidth: 1
- },
- //Native canvas text styling
- Label: {
- type: 'HTML', //Native or HTML
- size: 20,
- //style: 'bold'
- },
- //Add Tips
- Tips: {
- enable: true,
- onShow: function(tip, node) {
- //count connections
- var count = 0;
- node.eachAdjacency(function() { count++; });
- //display node info in tooltip
- tip.innerHTML = "" + node.name + "
"
- + "connections: " + count + "
";
- }
- },
- // Add node events
- Events: {
- enable: true,
- type: 'HTML',
- //Change cursor style when hovering a node
- onMouseEnter: function() {
- //fd.canvas.getElement().style.cursor = 'move';
- },
- onMouseLeave: function() {
- //fd.canvas.getElement().style.cursor = '';
- },
- //Update node positions when dragged
- onDragMove: function(node, eventInfo, e) {
- var pos = eventInfo.getPos();
- node.pos.setc(pos.x, pos.y);
- map.plot();
- },
- //Implement the same handler for touchscreens
- onTouchMove: function(node, eventInfo, e) {
- $jit.util.event.stop(e); //stop default touchmove event
- this.onDragMove(node, eventInfo, e);
- },
- //Add also a click handler to nodes
- onClick: function(node) {
- if(!node) return;
- //set final styles
- map.graph.eachNode(function(n) {
- if(n.id != node.id) delete n.selected;
- n.setData('dim', 25, 'end');
- n.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 0.5,
- color: '#222222'
- });
- adj.setData('showDesc', false, 'current');
- });
- });
- if(!node.selected) {
- node.selected = true;
- node.setData('dim', 35, 'end');
- node.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 3,
- color: '#FFF'
- });
- adj.setData('showDesc', true, 'current');
- });
- } else {
- delete node.selected;
- }
- //trigger animation to final styles
- map.fx.animate({
- modes: ['node-property:dim',
- 'edge-property:lineWidth:color'],
- duration: 500
- });
- // Build the right column relations list.
- // This is done by traversing the clicked node connections.
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- }
- },
- //Number of iterations for the FD algorithm
- iterations: 200,
- //Edge length
- levelDistance: 200,
- // Add text to the labels. This method is only triggered
- // on label creation and only for DOM labels (not native canvas ones).
- onCreateLabel: function(domElement, node){
- // Create a 'name' and 'close' buttons and add them
- // to the main node label
- var nameContainer = document.createElement('span'),
- style = nameContainer.style;
- nameContainer.className = 'name';
- nameContainer.innerHTML = '' + node.name + '
';
- domElement.appendChild(nameContainer);
- style.fontSize = "0.9em";
- style.color = "#222222";
- //Toggle a node selection when clicking
- //its name. This is done by animating some
- //node styles like its dimension and the color
- //and lineWidth of its adjacencies.
- nameContainer.onclick = function() {
- //set final styles
- map.graph.eachNode(function(n) {
- if(n.id != node.id) delete n.selected;
- n.setData('dim', 25, 'end');
- n.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 0.4,
- color: '#222222'
- });
- adj.setData('showDesc', false, 'current');
- });
- });
- if(!node.selected) {
- node.selected = true;
- node.setData('dim', 35, 'end');
- node.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 3,
- color: '#FFF'
- });
- adj.setData('showDesc', true, 'current');
- });
- } else {
- delete node.selected;
- }
- //trigger animation to final styles
- map.fx.animate({
- modes: ['node-property:dim',
- 'edge-property:lineWidth:color'],
- duration: 500
- });
- // Build the right column relations list.
- // This is done by traversing the clicked node connections.
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- };
- },
- // Change node styles when DOM labels are placed
- // or moved.
- onPlaceLabel: function(domElement, node){
- var style = domElement.style;
- var left = parseInt(style.left);
- var top = parseInt(style.top);
- var w = domElement.offsetWidth;
- var dim = node.getData('dim');
- style.left = (left - w / 2) + 'px';
- style.top = (top + dim) + 'px';
- style.display = '';
- }
- });
- // load JSON data.
- map.loadJSON(json);
- // compute positions incrementally and animate.
- map.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');
- });
-
- $(document).ready(function() {
- map.animate({
- modes: ['linear'],
- transition: $jit.Trans.Quad.easeInOut,
- duration: 2500
- });
- });
- // end
-}
diff --git a/app/assets/javascripts/Jit/RGraph/metamapRG.js b/app/assets/javascripts/Jit/RGraph/metamapRG.js
deleted file mode 100644
index 723267c3..00000000
--- a/app/assets/javascripts/Jit/RGraph/metamapRG.js
+++ /dev/null
@@ -1,293 +0,0 @@
-var labelType, useGradients, nativeTextSupport, animate, json, rg;
-
-(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);
-})();
-
-var imgArray = new Object();
-
-imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
-imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
-imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
-imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
-imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
-imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
-imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
-imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
-imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
-imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
-imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
-imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
-imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
-imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
-imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
-imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
-imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
-imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
-imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
-imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
-imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
-imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
-imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
-imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
-imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
-imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
-imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
-imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
-
-function initRG(){
- // init custom node type
- $jit.RGraph.Plot.NodeTypes.implement({
- 'customNode': {
- 'render': function (node, canvas) {
- var pos = node.pos.getc(true),
- dim = node.getData('dim'),
- cat = node.getData('itemcatname'),
- ctx = canvas.getCtx();
- 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);
- }
- }
- });
- //implement an edge type
- $jit.RGraph.Plot.EdgeTypes.implement({
- '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
- //plot arrow edge
- if (directionCat == "none") {
- this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
- }
- else if (directionCat == "both") {
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
- }
- else if (directionCat == "from-to") {
- var direction = adj.data.$direction;
- var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
- this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, inv, canvas);
- }
-
- //check for edge label in data
- var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
- var showDesc = adj.getData("showDesc");
- if( desc != "" && showDesc ) {
- //now adjust the label placement
- var radius = canvas.getSize();
- var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
- var y = parseInt((pos.y + posChild.y) /2);
- canvas.getCtx().fillStyle = '#000';
- canvas.getCtx().font = 'bold 14px arial';
- //canvas.getCtx().fillText(desc, x, y);
- }
- }
- }
- });
- // end
- // init RGraph
- rg = new $jit.RGraph({
- //id of the visualization container
- injectInto: 'infovis',
- //Optional: create a background canvas that plots
- //concentric circles.
- background: {
- CanvasStyles: {
- strokeStyle: '#333',
- lineWidth: 1.5
- }
- },
- //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: 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,
- color: '#2D6A5D',
- type: 'customNode',
- dim: 25
- },
- Edge: {
- overridable: true,
- color: '#222222',
- type: 'customEdge',
- lineWidth: 1
- },
- //Native canvas text styling
- Label: {
- type: 'HTML', //Native or HTML
- size: 20,
- //style: 'bold'
- },
- //Add Tips
- Tips: {
- enable: true,
- onShow: function(tip, node) {
- //count connections
- var count = 0;
- node.eachAdjacency(function() { count++; });
- //display node info in tooltip
- tip.innerHTML = "" + node.name + "
"
- + "connections: " + count + "
";
- }
- },
- // Add node events
- Events: {
- enable: true,
- type: 'HTML',
- //Change cursor style when hovering a node
- onMouseEnter: function() {
- //rg.canvas.getElement().style.cursor = 'move';
- },
- onMouseLeave: function() {
- //rg.canvas.getElement().style.cursor = '';
- },
- //Update node positions when dragged
- onDragMove: function(node, eventInfo, e) {
- var pos = eventInfo.getPos();
- node.pos.setc(pos.x, pos.y);
- rg.plot();
- },
- //Implement the same handler for touchscreens
- onTouchMove: function(node, eventInfo, e) {
- $jit.util.event.stop(e); //stop default touchmove event
- this.onDragMove(node, eventInfo, e);
- },
- //Add also a click handler to nodes
- onClick: function(node) {
- if(!node) return;
- //set final styles
- rg.graph.eachNode(function(n) {
- if(n.id != node.id) delete n.selected;
- n.setData('dim', 25, 'end');
- n.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 1,
- color: '#222222'
- });
- adj.setData('showDesc', false, 'current');
- });
- });
- if(!node.selected) {
- node.selected = true;
- node.setData('dim', 35, 'end');
- node.eachAdjacency(function(adj) {
- adj.setDataset('end', {
- lineWidth: 3,
- color: '#FFF'
- });
- adj.setData('showDesc', true, 'current');
- });
- } else {
- delete node.selected;
- }
- //trigger animation to final styles
- rg.fx.animate({
- modes: ['node-property:dim',
- 'edge-property:lineWidth:color'],
- duration: 500
- });
- // Build the right column relations list.
- // This is done by traversing the clicked node connections.
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- }
- },
- //Number of iterations for the rg algorithm
- iterations: 200,
- //Edge length
- levelDistance: 200,
- // Add text to the labels. This method is only triggered
- // on label creation and only for DOM labels (not native canvas ones).
- onCreateLabel: function(domElement, node){
- // Create a 'name' and 'close' buttons and add them
- // to the main node label
- domElement.innerHTML = '' + node.name + '
';
- domElement.onclick = function(){
- rg.onClick(node.id, {
- onComplete: function() {
- var html =
- '' + node.getData("itemcatname") + '
' +
- '
' +
- '' +
- '' + node.getData('link') + '';
-
- //append connections information
- $jit.id('showcard').innerHTML = '';
- $jit.id('item_' + node.id).innerHTML = html;
- $("#showcard .scroll").mCustomScrollbar();
- }
- });
- }
- },
- // Change node styles when DOM labels are placed
- // or moved.
- onPlaceLabel: function(domElement, node){
- var style = domElement.style;
- var left = parseInt(style.left);
- var top = parseInt(style.top);
- var w = domElement.offsetWidth;
- var dim = node.getData('dim');
- style.left = (left - w / 2) + 'px';
- style.top = (top + dim) + 'px';
- style.display = '';
- }
- });
- // load JSON data.
- rg.loadJSON(json);
- // compute positions incrementally and animate.
- //trigger small animation
- rg.graph.eachNode(function(n) {
- var pos = n.getPos();
- pos.setc(-200, -200);
- });
- rg.compute('end');
- rg.fx.animate({
- modes:['polar'],
- duration: 2000
- });
- // end
-}
diff --git a/app/assets/javascripts/Jit/filters.js b/app/assets/javascripts/Jit/filters.js
index d53bf105..33d2097c 100644
--- a/app/assets/javascripts/Jit/filters.js
+++ b/app/assets/javascripts/Jit/filters.js
@@ -32,18 +32,18 @@ categoryVisible['Trajectory'] = true;
categoryVisible['Action'] = true;
categoryVisible['Activity'] = true;
-function switchVisible(g, category, duration) {
+function switchVisible(category, duration) {
if (categoryVisible[category] == true) {
- hideCategory(g, category, duration);
+ hideCategory(category, duration);
}
else if (categoryVisible[category] == false) {
- showCategory(g, category, duration);
+ showCategory(category, duration);
}
}
-function hideCategory(g, category, duration) {
+function hideCategory(category, duration) {
if (duration == null) duration = 500;
- g.graph.eachNode( function (n) {
+ console.graph.eachNode( function (n) {
if (n.getData('itemcatname') == category) {
n.setData('alpha', 0, 'end');
n.eachAdjacency(function(adj) {
@@ -51,16 +51,16 @@ function hideCategory(g, category, duration) {
});
}
});
- g.fx.animate({
+ console.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: duration
});
}
-function showCategory(g, category, duration) {
+function showCategory(category, duration) {
if (duration == null) duration = 500;
- g.graph.eachNode( function (n) {
+ console.graph.eachNode( function (n) {
if (n.getData('itemcatname') == category) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
@@ -68,37 +68,37 @@ function showCategory(g, category, duration) {
});
}
});
- g.fx.animate({
+ console.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: duration
});
}
-function hideAll(g, duration) {
+function hideAll(duration) {
if (duration == null) duration = 500;
- g.graph.eachNode( function (n) {
+ console.graph.eachNode( function (n) {
n.setData('alpha', 0, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end');
});
});
- g.fx.animate({
+ console.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: duration
});
}
-function showAll(g, duration) {
+function showAll(duration) {
if (duration == null) duration = 500;
- g.graph.eachNode( function (n) {
+ console.graph.eachNode( function (n) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 1, 'end');
});
});
- g.fx.animate({
+ console.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: duration
diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js
new file mode 100644
index 00000000..ba113813
--- /dev/null
+++ b/app/assets/javascripts/Jit/graphsettings.js
@@ -0,0 +1,382 @@
+function graphSettings(type) {
+ var t;
+
+ if (type == "arranged" || type == "chaotic") {
+ t = {
+ //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: 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,
+ color: '#2D6A5D',
+ type: 'customNode',
+ dim: 25
+ },
+ Edge: {
+ overridable: true,
+ color: '#222222',
+ type: 'customEdge',
+ lineWidth: 1
+ },
+ //Native canvas text styling
+ Label: {
+ type: 'HTML', //Native or HTML
+ size: 20,
+ //style: 'bold'
+ },
+ //Add Tips
+ Tips: {
+ enable: true,
+ onShow: function (tip, node) {
+ //count connections
+ var count = 0;
+ node.eachAdjacency(function () {
+ count++;
+ });
+ //display node info in tooltip
+ tip.innerHTML = "" + node.name + "
" + "connections: " + count + "
";
+ }
+ },
+ // Add node events
+ Events: {
+ enable: true,
+ type: 'HTML',
+ //Change cursor style when hovering a node
+ onMouseEnter: function () {
+ //fd.canvas.getElement().style.cursor = 'move';
+ },
+ onMouseLeave: function () {
+ //fd.canvas.getElement().style.cursor = '';
+ },
+ //Update node positions when dragged
+ onDragMove: function (node, eventInfo, e) {
+ var pos = eventInfo.getPos();
+ node.pos.setc(pos.x, pos.y);
+ console.plot();
+ },
+ //Implement the same handler for touchscreens
+ onTouchMove: function (node, eventInfo, e) {
+ $jit.util.event.stop(e); //stop default touchmove event
+ this.onDragMove(node, eventInfo, e);
+ },
+ //Add also a click handler to nodes
+ onClick: function (node) {
+ if (!node) return;
+ //set final styles
+ console.graph.eachNode(function (n) {
+ if (n.id != node.id) delete n.selected;
+ n.setData('dim', 25, 'end');
+ n.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 0.5,
+ color: '#222222'
+ });
+ adj.setData('showDesc', false, 'current');
+ });
+ });
+ if (!node.selected) {
+ node.selected = true;
+ node.setData('dim', 35, 'end');
+ node.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 3,
+ color: '#FFF'
+ });
+ adj.setData('showDesc', true, 'current');
+ });
+ } else {
+ delete node.selected;
+ }
+ //trigger animation to final styles
+ console.fx.animate({
+ modes: ['node-property:dim',
+ 'edge-property:lineWidth:color'],
+ duration: 500
+ });
+ // Build the right column relations list.
+ // This is done by traversing the clicked node connections.
+ var html =
+ '' + node.getData("itemcatname") + '
' +
+ '
' +
+ '' +
+ '' + node.getData('link') + '';
+
+ //append connections information
+ $jit.id('showcard').innerHTML = '';
+ $jit.id('item_' + node.id).innerHTML = html;
+ $("#showcard .scroll").mCustomScrollbar();
+ }
+ },
+ //Number of iterations for the FD algorithm
+ iterations: 200,
+ //Edge length
+ levelDistance: 200,
+ // Add text to the labels. This method is only triggered
+ // on label creation and only for DOM labels (not native canvas ones).
+ onCreateLabel: function (domElement, node) {
+ // Create a 'name' and 'close' buttons and add them
+ // to the main node label
+ var nameContainer = document.createElement('span'),
+ style = nameContainer.style;
+ nameContainer.className = 'name';
+ nameContainer.innerHTML = '' + node.name + '
';
+ domElement.appendChild(nameContainer);
+ style.fontSize = "0.9em";
+ style.color = "#222222";
+ //Toggle a node selection when clicking
+ //its name. This is done by animating some
+ //node styles like its dimension and the color
+ //and lineWidth of its adjacencies.
+ nameContainer.onclick = function () {
+ //set final styles
+ console.graph.eachNode(function (n) {
+ if (n.id != node.id) delete n.selected;
+ n.setData('dim', 25, 'end');
+ n.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 0.4,
+ color: '#222222'
+ });
+ adj.setData('showDesc', false, 'current');
+ });
+ });
+ if (!node.selected) {
+ node.selected = true;
+ node.setData('dim', 35, 'end');
+ node.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 3,
+ color: '#FFF'
+ });
+ adj.setData('showDesc', true, 'current');
+ });
+ } else {
+ delete node.selected;
+ }
+ //trigger animation to final styles
+ console.fx.animate({
+ modes: ['node-property:dim',
+ 'edge-property:lineWidth:color'],
+ duration: 500
+ });
+ // Build the right column relations list.
+ // This is done by traversing the clicked node connections.
+ var html =
+ '' + node.getData("itemcatname") + '
' +
+ '
' +
+ '' +
+ '' + node.getData('link') + '';
+
+ //append connections information
+ $jit.id('showcard').innerHTML = '';
+ $jit.id('item_' + node.id).innerHTML = html;
+ $("#showcard .scroll").mCustomScrollbar();
+ };
+ },
+ // Change node styles when DOM labels are placed
+ // or moved.
+ onPlaceLabel: function (domElement, node) {
+ var style = domElement.style;
+ var left = parseInt(style.left);
+ var top = parseInt(style.top);
+ var w = domElement.offsetWidth;
+ var dim = node.getData('dim');
+ style.left = (left - w / 2) + 'px';
+ style.top = (top + dim) + 'px';
+ style.display = '';
+ }
+ };
+ } else if (type = "centered") {
+ t = {
+ //id of the visualization container
+ injectInto: 'infovis',
+ //Optional: create a background canvas that plots
+ //concentric circles.
+ background: {
+ CanvasStyles: {
+ strokeStyle: '#333',
+ lineWidth: 1.5
+ }
+ },
+ //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: 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,
+ color: '#2D6A5D',
+ type: 'customNode',
+ dim: 25
+ },
+ Edge: {
+ overridable: true,
+ color: '#222222',
+ type: 'customEdge',
+ lineWidth: 1
+ },
+ //Native canvas text styling
+ Label: {
+ type: 'HTML', //Native or HTML
+ size: 20,
+ //style: 'bold'
+ },
+ //Add Tips
+ Tips: {
+ enable: true,
+ onShow: function (tip, node) {
+ //count connections
+ var count = 0;
+ node.eachAdjacency(function () {
+ count++;
+ });
+ //display node info in tooltip
+ tip.innerHTML = "" + node.name + "
" + "connections: " + count + "
";
+ }
+ },
+ // Add node events
+ Events: {
+ enable: true,
+ type: 'HTML',
+ //Change cursor style when hovering a node
+ onMouseEnter: function () {
+ //rg.canvas.getElement().style.cursor = 'move';
+ },
+ onMouseLeave: function () {
+ //rg.canvas.getElement().style.cursor = '';
+ },
+ //Update node positions when dragged
+ onDragMove: function (node, eventInfo, e) {
+ var pos = eventInfo.getPos();
+ node.pos.setc(pos.x, pos.y);
+ rg.plot();
+ },
+ //Implement the same handler for touchscreens
+ onTouchMove: function (node, eventInfo, e) {
+ $jit.util.event.stop(e); //stop default touchmove event
+ this.onDragMove(node, eventInfo, e);
+ },
+ //Add also a click handler to nodes
+ onClick: function (node) {
+ if (!node) return;
+ //set final styles
+ rg.graph.eachNode(function (n) {
+ if (n.id != node.id) delete n.selected;
+ n.setData('dim', 25, 'end');
+ n.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 1,
+ color: '#222222'
+ });
+ adj.setData('showDesc', false, 'current');
+ });
+ });
+ if (!node.selected) {
+ node.selected = true;
+ node.setData('dim', 35, 'end');
+ node.eachAdjacency(function (adj) {
+ adj.setDataset('end', {
+ lineWidth: 3,
+ color: '#FFF'
+ });
+ adj.setData('showDesc', true, 'current');
+ });
+ } else {
+ delete node.selected;
+ }
+ //trigger animation to final styles
+ rg.fx.animate({
+ modes: ['node-property:dim',
+ 'edge-property:lineWidth:color'],
+ duration: 500
+ });
+ // Build the right column relations list.
+ // This is done by traversing the clicked node connections.
+ var html =
+ '' + node.getData("itemcatname") + '
' +
+ '
' +
+ '' +
+ '' + node.getData('link') + '';
+
+ //append connections information
+ $jit.id('showcard').innerHTML = '';
+ $jit.id('item_' + node.id).innerHTML = html;
+ $("#showcard .scroll").mCustomScrollbar();
+ }
+ },
+ //Number of iterations for the rg algorithm
+ iterations: 200,
+ //Edge length
+ levelDistance: 200,
+ // Add text to the labels. This method is only triggered
+ // on label creation and only for DOM labels (not native canvas ones).
+ onCreateLabel: function (domElement, node) {
+ // Create a 'name' and 'close' buttons and add them
+ // to the main node label
+ domElement.innerHTML = '' + node.name + '
';
+ domElement.onclick = function () {
+ rg.onClick(node.id, {
+ onComplete: function () {
+ var html =
+ '' + node.getData("itemcatname") + '
' +
+ '
' +
+ '' +
+ '' + node.getData('link') + '';
+
+ //append connections information
+ $jit.id('showcard').innerHTML = '';
+ $jit.id('item_' + node.id).innerHTML = html;
+ $("#showcard .scroll").mCustomScrollbar();
+ }
+ });
+ }
+ },
+ // Change node styles when DOM labels are placed
+ // or moved.
+ onPlaceLabel: function (domElement, node) {
+ var style = domElement.style;
+ var left = parseInt(style.left);
+ var top = parseInt(style.top);
+ var w = domElement.offsetWidth;
+ var dim = node.getData('dim');
+ style.left = (left - w / 2) + 'px';
+ style.top = (top + dim) + 'px';
+ style.display = '';
+ }
+ };
+ }
+
+ return t;
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/Jit/loadgraphs.js b/app/assets/javascripts/Jit/loadgraphs.js
new file mode 100644
index 00000000..8c9d4d7c
--- /dev/null
+++ b/app/assets/javascripts/Jit/loadgraphs.js
@@ -0,0 +1,182 @@
+var labelType, useGradients, nativeTextSupport, animate, json, console, gType;
+
+(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);
+})();
+
+var imgArray = new Object();
+
+imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
+imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
+imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
+imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
+imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
+imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
+imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
+imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
+imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
+imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
+imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
+imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
+imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
+imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
+imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
+imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
+imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
+imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
+imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
+imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
+imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
+imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
+imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
+imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
+imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
+imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
+imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
+imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
+
+function initialize(type){
+ gType = type;
+
+ // init custom node type
+ $jit.ForceDirected.Plot.NodeTypes.implement({
+ 'customNode': {
+ 'render': function (node, canvas) {
+ var pos = node.pos.getc(true),
+ dim = node.getData('dim'),
+ cat = node.getData('itemcatname'),
+ ctx = canvas.getCtx();
+ 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);
+ }
+ }
+ });
+ //implement an edge type
+ $jit.ForceDirected.Plot.EdgeTypes.implement({
+ '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
+ //plot arrow edge
+ if (directionCat == "none") {
+ this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
+ }
+ else if (directionCat == "both") {
+ this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
+ this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
+ }
+ else if (directionCat == "from-to") {
+ var direction = adj.data.$direction;
+ var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
+ this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, inv, canvas);
+ }
+
+ //check for edge label in data
+ var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
+ var showDesc = adj.getData("showDesc");
+ if( desc != "" && showDesc ) {
+ //now adjust the label placement
+ var radius = canvas.getSize();
+ var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
+ var y = parseInt((pos.y + posChild.y) /2);
+ canvas.getCtx().fillStyle = '#000';
+ canvas.getCtx().font = 'bold 14px arial';
+ //canvas.getCtx().fillText(desc, x, y);
+ }
+ }
+ }
+ });
+ // end
+
+
+ if ( type == "centered") {
+ console = new $jit.RGraph(graphSettings(type));
+ }
+ else if ( type == "arranged" || type == "chaotic" ) {
+ // init ForceDirected
+ console = new $jit.ForceDirected(graphSettings(type));
+ }
+ else {
+ alert("You didn't specify a type!");
+ return false;
+ }
+
+ // load JSON data.
+ console.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
+ console.graph.eachNode(function(n) {
+ var pos = n.getPos();
+ pos.setc(-200, -200);
+ });
+ console.compute('end');
+
+ chooseAnimate = {
+ modes:['polar'],
+ duration: 2000
+ };
+ }
+ else if ( type == "arranged" ) {
+ // compute positions incrementally and animate.
+ console.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
+ };
+ }
+ else if ( type == "chaotic" ) {
+ // compute positions incrementally and animate.
+ console.compute()
+
+ chooseAnimate = {
+ modes: ['linear'],
+ transition: $jit.Trans.Elastic.easeOut,
+ duration: 2500
+ };
+ }
+
+
+ $(document).ready(function() {
+ if ( type == "centered") {
+ console.fx.animate(chooseAnimate);
+ }
+ else if ( type == "arranged" || type == "chaotic") {
+ console.animate(chooseAnimate);
+ }
+ });
+ // end
+}
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index d3d746d1..6c10b5ee 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -156,19 +156,10 @@
if (switchAll == "showAll") {
// this means that we are on a map view
if (obj != null) {
- if (fd != null) {
- showAll(fd);
- }
- else if (rg != null) {
- showAll(rg);
- }
- else if (map != null) {
- showAll(map);
- }
+ showAll();
}
// this means that we are on a card view
else {
- console.log('rightone');
$('.item').fadeIn('slow');
}
$('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff');
@@ -179,15 +170,7 @@
else if (switchAll == "hideAll") {
// this means that we are on a map view
if (obj != null) {
- if (fd != null) {
- hideAll(fd);
- }
- else if (rg != null) {
- hideAll(rg);
- }
- else if (map != null) {
- hideAll(map);
- }
+ hideAll();
}
// this means that we are on a card view
else {
@@ -204,15 +187,7 @@
// this means that we are on a map view
if (obj != null) {
- if (fd != null) {
- switchVisible(fd, category);
- }
- else if (rg != null) {
- switchVisible(rg, category);
- }
- else if (map != null) {
- switchVisible(map, category);
- }
+ switchVisible(category);
}
// this means that we are on a card view
else {
@@ -250,19 +225,14 @@
$("#saveLayout").click(function(event) {
event.preventDefault();
coor = "";
- if (map != null) {
- map.graph.eachNode(function(n) {
+ if (gType == "arranged" || gType == "chaotic") {
+ console.graph.eachNode(function(n) {
coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
});
+ coor = coor.slice(0, -1);
+ $('#map_coordinates').val(coor);
+ $('#saveMapLayout').submit();
}
- else if (fd != null) {
- fd.graph.eachNode(function(n) {
- coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
- });
- }
- coor = coor.slice(0, -1);
- $('#map_coordinates').val(coor);
- $('#saveMapLayout').submit();
});
});
diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb
index 7dd959ac..02482ee9 100644
--- a/app/controllers/items_controller.rb
+++ b/app/controllers/items_controller.rb
@@ -9,9 +9,9 @@ class ItemsController < ApplicationController
# GET /users/:user_id/items
def index
- @user = User.find(params[:user_id])
+ @user = User.find(params[:user_id])
- @current = current_user
+ @current = current_user
@items = Item.visibleToUser(@current, @user)
respond_with(@user,@items)
diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb
index a19e889b..cd844aca 100644
--- a/app/controllers/main_controller.rb
+++ b/app/controllers/main_controller.rb
@@ -6,16 +6,27 @@ class MainController < ApplicationController
respond_to :html, :js, :json
#homepage pick a random map and show it
- def samplemap
- @current = current_user
- @maps = Map.visibleToUser(@current, nil)
- @map = @maps.sample
+ def console
- @mapjson = @map.self_as_json(@current).html_safe if @map
-
- respond_to do |format|
- format.html { respond_with(@map, @user) }
- format.json { respond_with(@mapjson) }
+ @current = current_user
+
+ if authenticated?
+ @items = all_as_json(@current, @current).html_safe
+
+ respond_to do |format|
+ format.html { respond_with(@current) }
+ format.json { respond_with(@items) }
+ end
+ else
+ @maps = Map.visibleToUser(@current, nil)
+ @map = @maps.sample
+
+ @mapjson = @map.self_as_json(@current).html_safe if @map
+
+ respond_to do |format|
+ format.html { respond_with(@map) }
+ format.json { respond_with(@mapjson) }
+ end
end
end
diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb
index 8864f4ed..1e62b59e 100644
--- a/app/helpers/items_helper.rb
+++ b/app/helpers/items_helper.rb
@@ -68,11 +68,18 @@ module ItemsHelper
end
end
- def all_as_json(current)
+ def all_as_json(current, user)
+
+ # current is current user
+
Jbuilder.encode do |json|
-
- @items = Item.visibleToUser(current, nil)
- @synapses = Synapse.visibleToUser(current, nil)
+ if user.nil?
+ @items = Item.visibleToUser(current, nil)
+ @synapses = Synapse.visibleToUser(current, nil)
+ else
+ @items = Item.visibleToUser(current, user)
+ @synapses = Synapse.visibleToUser(current, user)
+ end
json.array!(@items) do |item|
json.adjacencies item.synapses2.delete_if{|synapse| (not @items.include?(Item.find_by_id(synapse.node1_id))) || (not @synapses.include?(synapse))} do |json, synapse|
diff --git a/app/views/items/create.js.erb b/app/views/items/create.js.erb
index d333cfcd..16648f5d 100644
--- a/app/views/items/create.js.erb
+++ b/app/views/items/create.js.erb
@@ -8,59 +8,44 @@ if (map2 != null) {
var newnode = <%= @item.self_as_json.html_safe %>;
- if (fd != null) {
- fd.graph.addNode(newnode);
- var temp = fd.graph.getNode('<%= @item.id %>');
+ if (console != null) {
+ var temp = fd.graph.getNode('<%= @item.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
- <% unless (@mapping.nil?) %>
+
+ if (gType == "centered") {
+ temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
+ temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
+ temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
+ }
+ else if (gType == "arranged") {
+ temp.setData('xloc',0);
+ temp.setData('yloc',0);
+ temp.setData('mappingid', '<%= @mapping.id %>');
+ temp.setPos(new $jit.Complex(0, 0), 'current');
+ temp.setPos(new $jit.Complex(0, 0), 'start');
+ temp.setPos(new $jit.Complex(0, 0), 'end');
+ }
+ else if (gType == "chaotic") {
+ <% unless (@mapping.nil?) %>
temp.setData('xloc',0);
temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping.id %>');
- <% end %>
- temp.setPos(new $jit.Complex(0, 0), 'current');
- temp.setPos(new $jit.Complex(0, 0), 'start');
- temp.setPos(new $jit.Complex(0, 0), 'end');
- fd.fx.plotNode(temp, fd.canvas);
- fd.fx.animate({
- modes: ['node-property:dim'],
- duration: 400
- });
- }
- else if (rg != null) {
- rg.graph.addNode(newnode);
- var temp = rg.graph.getNode('<%= @item.id %>');
- temp.setData('dim', 1, 'start');
- temp.setData('dim', 40, 'end');
- temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
- temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
- temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
- rg.fx.plotNode(temp, rg.canvas);
- rg.fx.animate({
- modes: ['node-property:dim'],
- duration: 400
- });
- }
- else if (map != null) {
- map.graph.addNode(newnode);
- var temp = map.graph.getNode('<%= @item.id %>');
- temp.setData('dim', 1, 'start');
- temp.setData('dim', 40, 'end');
- temp.setData('xloc',0);
- temp.setData('yloc',0);
- temp.setData('mappingid', '<%= @mapping.id %>');
- temp.setPos(new $jit.Complex(0, 0), 'current');
- temp.setPos(new $jit.Complex(0, 0), 'start');
- temp.setPos(new $jit.Complex(0, 0), 'end');
- map.fx.plotNode(temp, map.canvas);
- map.fx.animate({
+ <% end %>
+ temp.setPos(new $jit.Complex(0, 0), 'current');
+ temp.setPos(new $jit.Complex(0, 0), 'start');
+ temp.setPos(new $jit.Complex(0, 0), 'end');
+ }
+
+ console.fx.plotNode(temp, console.canvas);
+ console.fx.animate({
modes: ['node-property:dim'],
duration: 400
});
}
else {
json = newnode;
- initFD();
+ initialize("chaotic");
}
console.log(temp);
// add the new node to the synapse select lists
diff --git a/app/views/items/show.html.erb b/app/views/items/show.html.erb
index 421c4465..649752ba 100644
--- a/app/views/items/show.html.erb
+++ b/app/views/items/show.html.erb
@@ -29,7 +29,7 @@
json = <%= @relatives %>;
console.log(json);
$(document).ready(function() {
- initRG();
+ initialize("centered");
});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index d6d33431..77b3bc68 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,7 +11,7 @@
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
-