glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

restructured a lot of code to be more readable and have less duplication of code

Browse source
This commit is contained in:
Connor Turland 2012-12-15 02:39:14 -05:00
parent 55d8a197de
commit 6296ca480f
14 changed files with 220 additions and 312 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/Jit/filters.js
View file

@ -43,7 +43,7 @@ function switchVisible(category, duration) {
function hideCategory(category, duration) { function hideCategory(category, duration) {
if (duration == null) duration = 500; if (duration == null) duration = 500;
console.graph.eachNode( function (n) { Mconsole.graph.eachNode( function (n) {
if (n.getData('itemcatname') == category) { if (n.getData('itemcatname') == category) {
n.setData('alpha', 0, 'end'); n.setData('alpha', 0, 'end');
n.eachAdjacency(function(adj) { n.eachAdjacency(function(adj) {
@ -51,7 +51,7 @@ function hideCategory(category, duration) {
}); });
} }
}); });
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: duration duration: duration
@ -60,7 +60,7 @@ function hideCategory(category, duration) {
function showCategory(category, duration) { function showCategory(category, duration) {
if (duration == null) duration = 500; if (duration == null) duration = 500;
console.graph.eachNode( function (n) { Mconsole.graph.eachNode( function (n) {
if (n.getData('itemcatname') == category) { if (n.getData('itemcatname') == category) {
n.setData('alpha', 1, 'end'); n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) { n.eachAdjacency(function(adj) {
@ -68,7 +68,7 @@ function showCategory(category, duration) {
}); });
} }
}); });
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: duration duration: duration
@ -77,13 +77,13 @@ function showCategory(category, duration) {
function hideAll(duration) { function hideAll(duration) {
if (duration == null) duration = 500; if (duration == null) duration = 500;
console.graph.eachNode( function (n) { Mconsole.graph.eachNode( function (n) {
n.setData('alpha', 0, 'end'); n.setData('alpha', 0, 'end');
n.eachAdjacency(function(adj) { n.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end'); adj.setData('alpha', 0, 'end');
}); });
}); });
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: duration duration: duration
@ -92,13 +92,13 @@ function hideAll(duration) {
function showAll(duration) { function showAll(duration) {
if (duration == null) duration = 500; if (duration == null) duration = 500;
console.graph.eachNode( function (n) { Mconsole.graph.eachNode( function (n) {
n.setData('alpha', 1, 'end'); n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) { n.eachAdjacency(function(adj) {
adj.setData('alpha', 1, 'end'); adj.setData('alpha', 1, 'end');
}); });
}); });
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: duration duration: duration

192
app/assets/javascripts/Jit/graphsettings.js
View file

@ -40,15 +40,21 @@ function graphSettings(type) {
}, },
//Add Tips //Add Tips
Tips: { Tips: {
enable: true, enable: false,
onShow: function (tip, node) { onShow: function (tip, node) {
//count connections
var count = 0; //display node info in tooltip
node.eachAdjacency(function () { var html =
count++; '<p class="type">' + node.getData("itemcatname") + '</p>' +
}); '<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
//display node info in tooltip '<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" + "<div class=\"tip-text\">connections: " + count + "</div>"; '<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
tip.innerHTML = '<div class="" id="item_' + node.id + '"></div>';
$jit.id('item_' + node.id).innerHTML = html;
$("#_tooltip .scroll").mCustomScrollbar();
} }
}, },
// Add node events // Add node events
@ -66,7 +72,7 @@ function graphSettings(type) {
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
var pos = eventInfo.getPos(); var pos = eventInfo.getPos();
node.pos.setc(pos.x, pos.y); node.pos.setc(pos.x, pos.y);
console.plot(); Mconsole.plot();
}, },
//Implement the same handler for touchscreens //Implement the same handler for touchscreens
onTouchMove: function (node, eventInfo, e) { onTouchMove: function (node, eventInfo, e) {
@ -77,7 +83,7 @@ function graphSettings(type) {
onClick: function (node) { onClick: function (node) {
if (!node) return; if (!node) return;
//set final styles //set final styles
console.graph.eachNode(function (n) { Mconsole.graph.eachNode(function (n) {
if (n.id != node.id) delete n.selected; if (n.id != node.id) delete n.selected;
n.setData('dim', 25, 'end'); n.setData('dim', 25, 'end');
n.eachAdjacency(function (adj) { n.eachAdjacency(function (adj) {
@ -102,25 +108,11 @@ function graphSettings(type) {
delete node.selected; delete node.selected;
} }
//trigger animation to final styles //trigger animation to final styles
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:dim', modes: ['node-property:dim',
'edge-property:lineWidth:color'], 'edge-property:lineWidth:color'],
duration: 500 duration: 500
}); });
// Build the right column relations list.
// This is done by traversing the clicked node connections.
var html =
'<p class="type">' + node.getData("itemcatname") + '</p>' +
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
//append connections information
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
$jit.id('item_' + node.id).innerHTML = html;
$("#showcard .scroll").mCustomScrollbar();
} }
}, },
//Number of iterations for the FD algorithm //Number of iterations for the FD algorithm
@ -131,65 +123,14 @@ function graphSettings(type) {
// on label creation and only for DOM labels (not native canvas ones). // on label creation and only for DOM labels (not native canvas ones).
onCreateLabel: function (domElement, node) { onCreateLabel: function (domElement, node) {
// Create a 'name' and 'close' buttons and add them // Create a 'name' and 'close' buttons and add them
// to the main node label // to the main node label
var nameContainer = document.createElement('span'), var nameContainer = document.createElement('span'),
style = nameContainer.style; style = nameContainer.style;
nameContainer.className = 'name'; nameContainer.className = 'name';
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>'; nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
domElement.appendChild(nameContainer); domElement.appendChild(nameContainer);
style.fontSize = "0.9em"; style.fontSize = "0.9em";
style.color = "#222222"; 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 =
'<p class="type">' + node.getData("itemcatname") + '</p>' +
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
//append connections information
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
$jit.id('item_' + node.id).innerHTML = html;
$("#showcard .scroll").mCustomScrollbar();
};
}, },
// Change node styles when DOM labels are placed // Change node styles when DOM labels are placed
// or moved. // or moved.
@ -268,16 +209,16 @@ function graphSettings(type) {
type: 'HTML', type: 'HTML',
//Change cursor style when hovering a node //Change cursor style when hovering a node
onMouseEnter: function () { onMouseEnter: function () {
//rg.canvas.getElement().style.cursor = 'move'; //Mconsole.canvas.getElement().style.cursor = 'move';
}, },
onMouseLeave: function () { onMouseLeave: function () {
//rg.canvas.getElement().style.cursor = ''; //Mconsole.canvas.getElement().style.cursor = '';
}, },
//Update node positions when dragged //Update node positions when dragged
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
var pos = eventInfo.getPos(); var pos = eventInfo.getPos();
node.pos.setc(pos.x, pos.y); node.pos.setc(pos.x, pos.y);
rg.plot(); Mconsole.plot();
}, },
//Implement the same handler for touchscreens //Implement the same handler for touchscreens
onTouchMove: function (node, eventInfo, e) { onTouchMove: function (node, eventInfo, e) {
@ -288,7 +229,7 @@ function graphSettings(type) {
onClick: function (node) { onClick: function (node) {
if (!node) return; if (!node) return;
//set final styles //set final styles
rg.graph.eachNode(function (n) { Mconsole.graph.eachNode(function (n) {
if (n.id != node.id) delete n.selected; if (n.id != node.id) delete n.selected;
n.setData('dim', 25, 'end'); n.setData('dim', 25, 'end');
n.eachAdjacency(function (adj) { n.eachAdjacency(function (adj) {
@ -313,7 +254,7 @@ function graphSettings(type) {
delete node.selected; delete node.selected;
} }
//trigger animation to final styles //trigger animation to final styles
rg.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:dim', modes: ['node-property:dim',
'edge-property:lineWidth:color'], 'edge-property:lineWidth:color'],
duration: 500 duration: 500
@ -334,7 +275,7 @@ function graphSettings(type) {
$("#showcard .scroll").mCustomScrollbar(); $("#showcard .scroll").mCustomScrollbar();
} }
}, },
//Number of iterations for the rg algorithm //Number of iterations for the Mconsole algorithm
iterations: 200, iterations: 200,
//Edge length //Edge length
levelDistance: 200, levelDistance: 200,
@ -345,7 +286,7 @@ function graphSettings(type) {
// to the main node label // to the main node label
domElement.innerHTML = '<div class="label">' + node.name + '</div>'; domElement.innerHTML = '<div class="label">' + node.name + '</div>';
domElement.onclick = function () { domElement.onclick = function () {
rg.onClick(node.id, { Mconsole.onClick(node.id, {
onComplete: function () { onComplete: function () {
var html = var html =
'<p class="type">' + node.getData("itemcatname") + '</p>' + '<p class="type">' + node.getData("itemcatname") + '</p>' +
@ -379,4 +320,71 @@ function graphSettings(type) {
} }
return t; return t;
} }
// defining custom node type
var nodeSettings = {
'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);
}
}
}
// 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
//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") {
renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, true, canvas);
renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, false, canvas);
}
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);
}
//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);
}
}, 'contains' : function(adj, pos) {
var from = adj.nodeFrom.pos.getc(true),
to = adj.nodeTo.pos.getc(true);
return containsMidArrow(from, to, pos, this.edge.epsilon);
}
}
}

4
app/assets/javascripts/Jit/jit2.0.0.js
View file

@ -2360,8 +2360,8 @@ Extras.Classes.Tips = new Class({
}, },
hide: function(triggerCallback) { hide: function(triggerCallback) {
this.tip.style.display = 'none'; this.tip.style.display = 'none';
triggerCallback && this.config.onHide(); triggerCallback && this.config.onHide();
} }
}); });

127
app/assets/javascripts/Jit/loadgraphs.js
View file

@ -1,4 +1,4 @@
var labelType, useGradients, nativeTextSupport, animate, json, console, gType; var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, gType;
(function() { (function() {
var ua = navigator.userAgent, var ua = navigator.userAgent,
@ -46,75 +46,72 @@ imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/traj
imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png'; imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png'; imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
// defining code to draw edges with arrows pointing in the middle of them
var renderMidArrow = function(from, to, dim, swap, canvas){
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 midPoint = new $jit.Complex((to.x + from.x) / 2, (to.y + from.y) / 2);
// move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint
midPoint.x += (vect.x / 0.7);
midPoint.y += (vect.y / 0.7);
// compute the tail intersection point with the edge line
var intermediatePoint = new $jit.Complex(midPoint.x - vect.x,
midPoint.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));
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(midPoint.x, midPoint.y);
ctx.lineTo(v2.x, v2.y);
ctx.stroke();
};
var containsMidArrow = function(posFrom, posTo, pos, epsilon) {
return $jit.EdgeHelper.line.contains(posFrom, posTo, pos, epsilon);
};
function initialize(type){ function initialize(type){
viewMode = "graph";
gType = type; gType = type;
// init custom node type // init custom node type
$jit.ForceDirected.Plot.NodeTypes.implement({ $jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
'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 //implement an edge type
$jit.ForceDirected.Plot.EdgeTypes.implement({ $jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings);
'customEdge': { // end
'render': function(adj, canvas) {
//get nodes cartesian coordinates // init custom node type
var pos = adj.nodeFrom.pos.getc(true); $jit.RGraph.Plot.NodeTypes.implement(nodeSettings);
var posChild = adj.nodeTo.pos.getc(true); //implement an edge type
$jit.RGraph.Plot.EdgeTypes.implement(edgeSettings);
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 // end
if ( type == "centered") { if ( type == "centered") {
console = new $jit.RGraph(graphSettings(type)); // init Rgraph
Mconsole = new $jit.RGraph(graphSettings(type));
} }
else if ( type == "arranged" || type == "chaotic" ) { else if ( type == "arranged" || type == "chaotic" ) {
// init ForceDirected // init ForceDirected
console = new $jit.ForceDirected(graphSettings(type)); Mconsole = new $jit.ForceDirected(graphSettings(type));
} }
else { else {
alert("You didn't specify a type!"); alert("You didn't specify a type!");
@ -122,7 +119,7 @@ function initialize(type){
} }
// load JSON data. // load JSON data.
console.loadJSON(json); Mconsole.loadJSON(json);
// choose how to plot and animate the data onto the screen // choose how to plot and animate the data onto the screen
var chooseAnimate; var chooseAnimate;
@ -130,11 +127,11 @@ function initialize(type){
if ( type == "centered") { if ( type == "centered") {
// compute positions incrementally and animate. // compute positions incrementally and animate.
//trigger small animation //trigger small animation
console.graph.eachNode(function(n) { Mconsole.graph.eachNode(function(n) {
var pos = n.getPos(); var pos = n.getPos();
pos.setc(-200, -200); pos.setc(-200, -200);
}); });
console.compute('end'); Mconsole.compute('end');
chooseAnimate = { chooseAnimate = {
modes:['polar'], modes:['polar'],
@ -143,7 +140,7 @@ function initialize(type){
} }
else if ( type == "arranged" ) { else if ( type == "arranged" ) {
// compute positions incrementally and animate. // compute positions incrementally and animate.
console.graph.eachNode(function(n) { Mconsole.graph.eachNode(function(n) {
var pos = n.getPos(); var pos = n.getPos();
pos.setc(0, 0); pos.setc(0, 0);
var newPos = new $jit.Complex(); var newPos = new $jit.Complex();
@ -160,7 +157,7 @@ function initialize(type){
} }
else if ( type == "chaotic" ) { else if ( type == "chaotic" ) {
// compute positions incrementally and animate. // compute positions incrementally and animate.
console.compute() Mconsole.compute()
chooseAnimate = { chooseAnimate = {
modes: ['linear'], modes: ['linear'],
@ -172,10 +169,10 @@ function initialize(type){
$(document).ready(function() { $(document).ready(function() {
if ( type == "centered") { if ( type == "centered") {
console.fx.animate(chooseAnimate); Mconsole.fx.animate(chooseAnimate);
} }
else if ( type == "arranged" || type == "chaotic") { else if ( type == "arranged" || type == "chaotic") {
console.animate(chooseAnimate); Mconsole.animate(chooseAnimate);
} }
}); });
// end // end

6
app/assets/javascripts/application.js
View file

@ -16,6 +16,8 @@
//= require jquery_ujs //= require jquery_ujs
//= require_tree . //= require_tree .
// other options are 'graph'
var viewMode = "list";
$(document).ready(function() { $(document).ready(function() {
@ -150,7 +152,6 @@
obj = document.getElementById('container'); obj = document.getElementById('container');
var switchAll = $(this).attr('id'); var switchAll = $(this).attr('id');
console.log(switchAll);
if ( switchAll === "showAll" || switchAll === "hideAll") { if ( switchAll === "showAll" || switchAll === "hideAll") {
if (switchAll == "showAll") { if (switchAll == "showAll") {
@ -226,12 +227,13 @@
event.preventDefault(); event.preventDefault();
coor = ""; coor = "";
if (gType == "arranged" || gType == "chaotic") { if (gType == "arranged" || gType == "chaotic") {
console.graph.eachNode(function(n) { Mconsole.graph.eachNode(function(n) {
coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ','; coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
}); });
coor = coor.slice(0, -1); coor = coor.slice(0, -1);
$('#map_coordinates').val(coor); $('#map_coordinates').val(coor);
$('#saveMapLayout').submit(); $('#saveMapLayout').submit();
} }
}); });
}); });

13
app/assets/stylesheets/ForceDirected.css
View file

@ -7,16 +7,3 @@
span.name { span.name {
cursor: pointer; cursor: pointer;
} }
/*TOOLTIPS*/
.tip {
text-align: left;
width:auto;
max-width:500px;
}
.tip-title {
font-size: 11px;
text-align:center;
margin-bottom:2px;
}

22
app/assets/stylesheets/base.css
View file

@ -6,15 +6,12 @@
color:#444; color:#444;
} }
#showcard{ #showcard {
width:auto; width:auto;
height:auto; height:auto;
color:#FFF; color:#FFF;
text-align: left; text-align: left;
overflow: auto; overflow: auto;
position:absolute;
top:200px;
left:10px;
} }
#showcard .contributor { font-size:14px; } #showcard .contributor { font-size:14px; }
@ -28,21 +25,4 @@
height:100%; height:100%;
margin:0; margin:0;
overflow:hidden; overflow:hidden;
}
/*TOOLTIPS*/
.tip {
color: #111;
width: 139px;
background-color: white;
border:1px solid #ccc;
-moz-box-shadow:#555 2px 2px 8px;
-webkit-box-shadow:#555 2px 2px 8px;
-o-box-shadow:#555 2px 2px 8px;
box-shadow:#555 2px 2px 8px;
opacity:0.9;
filter:alpha(opacity=90);
font-size:12px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:7px;
} }

3
app/controllers/items_controller.rb
View file

@ -72,9 +72,8 @@ class ItemsController < ApplicationController
@item.save @item.save
end end
@mapping = nil @mapping = Mapping.new()
if params[:item][:map] if params[:item][:map]
@mapping = Mapping.new()
@mapping.category = "Item" @mapping.category = "Item"
@mapping.user = @user @mapping.user = @user
@mapping.map = Map.find(params[:item][:map]) @mapping.map = Map.find(params[:item][:map])

8
app/controllers/synapses_controller.rb
View file

@ -58,9 +58,11 @@ class SynapsesController < ApplicationController
@synapse.item1 = Item.find(params[:node1_id]) @synapse.item1 = Item.find(params[:node1_id])
@synapse.item2 = Item.find(params[:node2_id]) @synapse.item2 = Item.find(params[:node2_id])
@synapse.permission = params[:synapse][:permission] @synapse.permission = params[:synapse][:permission]
@synapse.user = @user @synapse.user = @user
@synapse.save @synapse.save
@mapping1 = Mapping.new()
@mapping2 = Mapping.new()
if params[:synapse][:map] if params[:synapse][:map]
@mapping = Mapping.new() @mapping = Mapping.new()
@mapping.category = "Synapse" @mapping.category = "Synapse"
@ -70,7 +72,6 @@ class SynapsesController < ApplicationController
@mapping.save @mapping.save
if not Map.find(params[:synapse][:map]).items.include?(@synapse.item1) if not Map.find(params[:synapse][:map]).items.include?(@synapse.item1)
@mapping1 = Mapping.new()
@mapping1.category = "Item" @mapping1.category = "Item"
@mapping1.user = @user @mapping1.user = @user
@mapping1.map = Map.find(params[:synapse][:map]) @mapping1.map = Map.find(params[:synapse][:map])
@ -78,7 +79,6 @@ class SynapsesController < ApplicationController
@mapping1.save @mapping1.save
end end
if not Map.find(params[:synapse][:map]).items.include?(@synapse.item2) if not Map.find(params[:synapse][:map]).items.include?(@synapse.item2)
@mapping2 = Mapping.new()
@mapping2.category = "Item" @mapping2.category = "Item"
@mapping2.user = @user @mapping2.user = @user
@mapping2.map = Map.find(params[:synapse][:map]) @mapping2.map = Map.find(params[:synapse][:map])
@ -89,7 +89,7 @@ class SynapsesController < ApplicationController
respond_to do |format| respond_to do |format|
format.html { respond_with(@user, location: user_synapse_url(@user, @synapse)) } format.html { respond_with(@user, location: user_synapse_url(@user, @synapse)) }
format.js { respond_with(@synapse) } format.js { respond_with(@synapse, @mapping1, @mapping2) }
end end
end end

37
app/views/items/create.js.erb
View file

@ -1,15 +1,13 @@
$('#new_item').fadeOut('fast'); $('#new_item').fadeOut('fast');
$('#new_item')[0].reset() $('#new_item')[0].reset();
// if there's a map, add the node to that, if its in card view add card if(viewMode == "graph") {
map2 = document.getElementById('container'); var newnode = <%= @item.self_as_json.html_safe %>;
if (map2 != null) {
var newnode = <%= @item.self_as_json.html_safe %>;
if (console != null) { if (Mconsole != null) {
var temp = fd.graph.getNode('<%= @item.id %>'); Mconsole.graph.addNode(newnode);
var temp = Mconsole.graph.getNode('<%= @item.id %>');
temp.setData('dim', 1, 'start'); temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end'); temp.setData('dim', 40, 'end');
@ -18,7 +16,7 @@ if (map2 != null) {
temp.setPos(new $jit.Polar(5.54, 347.6), 'start'); temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
temp.setPos(new $jit.Polar(5.54, 347.6), 'end'); temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
} }
else if (gType == "arranged") { else if (gType == "arranged" || gType == "chaotic") {
temp.setData('xloc',0); temp.setData('xloc',0);
temp.setData('yloc',0); temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping.id %>'); temp.setData('mappingid', '<%= @mapping.id %>');
@ -26,19 +24,9 @@ if (map2 != null) {
temp.setPos(new $jit.Complex(0, 0), 'start'); temp.setPos(new $jit.Complex(0, 0), 'start');
temp.setPos(new $jit.Complex(0, 0), 'end'); 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');
}
console.fx.plotNode(temp, console.canvas); Mconsole.fx.plotNode(temp, Mconsole.canvas);
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 400 duration: 400
}); });
@ -47,14 +35,13 @@ if (map2 != null) {
json = newnode; json = newnode;
initialize("chaotic"); initialize("chaotic");
} }
console.log(temp);
// add the new node to the synapse select lists // add the new node to the synapse select lists
$("#node1_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>"); $("#node1_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
$("#node2_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>"); $("#node2_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
} }
else { else {
alert('wrong!');
$('#cards').prepend('<%= escape_javascript(render(@item)) %>'); $('#cards').prepend('<%= escape_javascript(render(@item)) %>');
$(".scroll").mCustomScrollbar(); $(".scroll").mCustomScrollbar();
} }

8
app/views/main/console.html.erb
View file

@ -20,8 +20,6 @@
<div id="center-container"> <div id="center-container">
<div id="infovis"></div> <div id="infovis"></div>
</div> </div>
<div id="showcard">
</div>
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
@ -44,10 +42,12 @@
<div id="center-container"> <div id="center-container">
<div id="infovis"></div> <div id="infovis"></div>
</div> </div>
<div id="showcard">
</div>
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
<% if authenticated? %>
<%= render :partial => 'items/new' %>
<%= render :partial => 'synapses/new' %>
<% end %>
<script> <script>
json = <%= @items %>; json = <%= @items %>;
if (json.length > 0) { if (json.length > 0) {

1
app/views/maps/show.html.erb
View file

@ -31,6 +31,7 @@
<div class="clearfloat"></div> <div class="clearfloat"></div>
<script> <script>
viewMode = "graph";
json = <%= @mapjson %>; json = <%= @mapjson %>;
if (json.length > 0) { if (json.length > 0) {
$(document).ready(function() { $(document).ready(function() {

36
app/views/synapses/create.js.erb
View file

@ -8,15 +8,18 @@ if (map1 != null) {
var newnode, temp1, temp2, temp; var newnode, temp1, temp2, temp;
if ( console != null) { if ( Mconsole != null) {
temp1 = console.graph.getNode(<%= @synapse.item1.id %>); temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
if (temp1 == null) { if (temp1 == null) {
newnode = <%= @synapse.item1.self_as_json.html_safe %>; newnode = <%= @synapse.item1.self_as_json.html_safe %>;
console.graph.addNode(newnode); Mconsole.graph.addNode(newnode);
temp = console.graph.getNode('<%= @synapse.item1.id %>'); temp = Mconsole.graph.getNode('<%= @synapse.item1.id %>');
temp.setData('dim', 1, 'start'); temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end'); temp.setData('dim', 40, 'end');
if (gType == "arranged" || gType == "chaotic") { if (gType == "arranged" || gType == "chaotic") {
temp.setData('xloc',0);
temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping1.id %>');
temp.setPos(new $jit.Complex(0, 0), 'current'); temp.setPos(new $jit.Complex(0, 0), 'current');
temp.setPos(new $jit.Complex(0, 0), 'start'); temp.setPos(new $jit.Complex(0, 0), 'start');
temp.setPos(new $jit.Complex(0, 0), 'end'); temp.setPos(new $jit.Complex(0, 0), 'end');
@ -26,17 +29,20 @@ if (map1 != null) {
temp.setPos(new $jit.Polar(5.54, 347.6), 'start'); temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
temp.setPos(new $jit.Polar(5.54, 347.6), 'end'); temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
} }
console.fx.plotNode(temp, console.canvas); Mconsole.fx.plotNode(temp, Mconsole.canvas);
temp1 = console.graph.getNode(<%= @synapse.item1.id %>); temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
} }
temp2 = console.graph.getNode(<%= @synapse.item2.id %>); temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
if (temp2 == null) { if (temp2 == null) {
newnode = <%= @synapse.item2.self_as_json.html_safe %>; newnode = <%= @synapse.item2.self_as_json.html_safe %>;
console.graph.addNode(newnode); Mconsole.graph.addNode(newnode);
temp = console.graph.getNode('<%= @synapse.item2.id %>'); temp = Mconsole.graph.getNode('<%= @synapse.item2.id %>');
temp.setData('dim', 1, 'start'); temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end'); temp.setData('dim', 40, 'end');
if (gType == "arranged" || gType == "chaotic") { if (gType == "arranged" || gType == "chaotic") {
temp.setData('xloc',0);
temp.setData('yloc',0);
temp.setData('mappingid', '<%= @mapping2.id %>');
temp.setPos(new $jit.Complex(0, 0), 'current'); temp.setPos(new $jit.Complex(0, 0), 'current');
temp.setPos(new $jit.Complex(0, 0), 'start'); temp.setPos(new $jit.Complex(0, 0), 'start');
temp.setPos(new $jit.Complex(0, 0), 'end'); temp.setPos(new $jit.Complex(0, 0), 'end');
@ -46,11 +52,11 @@ if (map1 != null) {
temp.setPos(new $jit.Polar(5.54, 347.6), 'start'); temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
temp.setPos(new $jit.Polar(5.54, 347.6), 'end'); temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
} }
console.fx.plotNode(temp, console.canvas); Mconsole.fx.plotNode(temp, Mconsole.canvas);
temp2 = console.graph.getNode(<%= @synapse.item2.id %>); temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
} }
console.graph.addAdjacence(temp1, temp2, {}); Mconsole.graph.addAdjacence(temp1, temp2, {});
temp = console.graph.getAdjacence(temp1.id, temp2.id); temp = Mconsole.graph.getAdjacence(temp1.id, temp2.id);
temp.setDataset('start', { temp.setDataset('start', {
lineWidth: 0.4, lineWidth: 0.4,
color: '#d1d1d1' color: '#d1d1d1'
@ -69,8 +75,8 @@ if (map1 != null) {
username: '<%= @synapse.user.name %>' username: '<%= @synapse.user.name %>'
}); });
temp.data.$direction = d; temp.data.$direction = d;
console.fx.plotLine(temp, console.canvas); Mconsole.fx.plotLine(temp, Mconsole.canvas);
console.fx.animate({ Mconsole.fx.animate({
modes: ['node-property:dim','edge-property:lineWidth:color'], modes: ['node-property:dim','edge-property:lineWidth:color'],
duration: 400 duration: 400
}); });

59
public/style.css
View file

@ -1,59 +0,0 @@
/* clear styles */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, legend { margin: 0; padding: 0; }
img {border:0; padding:0; margin:0; display:block; text-indent:-9999px;}
html {height:100%; }
body { background:#031924; font-family:Arial, Helvetica, sans-serif; background-attachment:fixed; color:#FFF; height:100%; overflow:hidden;}
#fadeWrapper {display:none; position:absolute; z-index:2; width:100%; height:100%; background:#000; opacity:0.7; }
h1 {display:block; text-align:left; }
h2 {display:block; text-align:center; background: #333; opacity:0.8; font-size:24px;}
a {color:#FFF; text-decoration:none;}
.clearfloat {clear:both;}
.contentarea p, .contentarea ul , .contentarea ol, .contentarea table {font-size:14px; line-height:1.55em; padding:0.5em 0}
.contentarea ul li {padding:0.2em 0; }
.contentarea ol li {padding:0.2em 0; }
.contentarea ul {margin:0 0 0 1em; }
.contentarea ol {margin:0 0 0 1.3em; }
.main {height:100%; }
.headertop { display:block; height:38px; width:100%; background:#000; opacity:0.6; }
#mainTitle { float: left; }
.headertop ul { display:block; float: right; }
.headertop ul li {display:block; float:right; }
.wrapper {display:block; height:100%;}
.topleft {display:block; width:50%; height:50%; float:left; }
.topright{display:block; width:50%; height:50%; float:left; text-align:right;}
/* background: url(../images/centerCurriculum.png) no-repeat top left; */
.centercircle {display:none; width:350px; height:350px; position:fixed; top:50%; left:50%; margin-left:-175px; margin-top:-175px;}
.bottomleft {display:block; width:50%; height:50%; float:left; }
.bottomright {display:block; width:50%; height:50%; float:left; text-align:right;}
/* add new object page */
ul.addNew { display:block; width:240px; margin:100px auto 0 auto; }
ul.addNew li { display:block; width:80px; height:80px; float:left; text-align:center; margin-top:20px; }
ul.addNew li a{ display:block; width:80px; height:80px; }
ul.addNew li:nth-child(4) a { background: url(../images/experience.png) no-repeat center 25px; }
ul.addNew li:nth-child(2) a { background: url(../images/question.png) no-repeat center 25px; }
ul.addNew li:nth-child(3) a { background: url(../images/reference.png) no-repeat center 25px; }
ul.addNew li:nth-child(6) a { background: url(../images/resource.png) no-repeat center 25px; }
ul.addNew li:nth-child(1) a { background: url(../images/idea.png) no-repeat center 25px; }
ul.addNew li:nth-child(5) a { background: url(../images/action.png) no-repeat center 25px; }
/* main page */
.objSelected {z-index:3; }
.objSelected .objectImage, .objSelected .objectContent {display:block;}
.action, .experience, .resource, .reference, .idea, .tool, .question, .opinion {display:block; position:absolute; }
.objectContent {display:none;}
.objectImage {display:none; width:50px; overflow:visible; }