Merge branch 'ACI'

This commit is contained in:
Connor Turland 2012-12-15 02:39:52 -05:00
commit 7c65634ade
126 changed files with 726 additions and 1342 deletions

View file

@ -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 = "<div class=\"tip-title\">" + node.name + "</div>"
+ "<div class=\"tip-text\">connections: " + count + "</div>";
}
},
// 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 =
'<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
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 = '<div class="label">' + node.name + '</div>';
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 =
'<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
// 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
}

View file

@ -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 = "<div class=\"tip-title\">" + node.name + "</div>"
+ "<div class=\"tip-text\">connections: " + count + "</div>";
}
},
// 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 =
'<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
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 = '<div class="label">' + node.name + '</div>';
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 =
'<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
// 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
}

View file

@ -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 = "<div class=\"tip-title\">" + node.name + "</div>"
+ "<div class=\"tip-text\">connections: " + count + "</div>";
}
},
// 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 =
'<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 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 = '<div class="label">' + node.name + '</div>';
domElement.onclick = function(){
rg.onClick(node.id, {
onComplete: function() {
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
// 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
}

View file

@ -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) {
Mconsole.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({
Mconsole.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) {
Mconsole.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({
Mconsole.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) {
Mconsole.graph.eachNode( function (n) {
n.setData('alpha', 0, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end');
});
});
g.fx.animate({
Mconsole.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) {
Mconsole.graph.eachNode( function (n) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 1, 'end');
});
});
g.fx.animate({
Mconsole.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: duration

View file

@ -0,0 +1,390 @@
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: false,
onShow: function (tip, node) {
//display node info in tooltip
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>';
tip.innerHTML = '<div class="" id="item_' + node.id + '"></div>';
$jit.id('item_' + node.id).innerHTML = html;
$("#_tooltip .scroll").mCustomScrollbar();
}
},
// 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);
Mconsole.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
Mconsole.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
Mconsole.fx.animate({
modes: ['node-property:dim',
'edge-property:lineWidth:color'],
duration: 500
});
}
},
//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 = '<div class="label">' + node.name + '</div>';
domElement.appendChild(nameContainer);
style.fontSize = "0.9em";
style.color = "#222222";
},
// 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 = "<div class=\"tip-title\">" + node.name + "</div>" + "<div class=\"tip-text\">connections: " + count + "</div>";
}
},
// Add node events
Events: {
enable: true,
type: 'HTML',
//Change cursor style when hovering a node
onMouseEnter: function () {
//Mconsole.canvas.getElement().style.cursor = 'move';
},
onMouseLeave: function () {
//Mconsole.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);
Mconsole.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
Mconsole.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
Mconsole.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();
}
},
//Number of iterations for the Mconsole 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 = '<div class="label">' + node.name + '</div>';
domElement.onclick = function () {
Mconsole.onClick(node.id, {
onComplete: function () {
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
// 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;
}
// 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);
}
}
}

View file

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

View file

@ -0,0 +1,179 @@
var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, 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';
// 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){
viewMode = "graph";
gType = type;
// init custom node type
$jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
//implement an edge type
$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings);
// end
// init custom node type
$jit.RGraph.Plot.NodeTypes.implement(nodeSettings);
//implement an edge type
$jit.RGraph.Plot.EdgeTypes.implement(edgeSettings);
// end
if ( type == "centered") {
// init Rgraph
Mconsole = new $jit.RGraph(graphSettings(type));
}
else if ( type == "arranged" || type == "chaotic" ) {
// init ForceDirected
Mconsole = new $jit.ForceDirected(graphSettings(type));
}
else {
alert("You didn't specify a type!");
return false;
}
// load JSON data.
Mconsole.loadJSON(json);
// choose how to plot and animate the data onto the screen
var chooseAnimate;
if ( type == "centered") {
// compute positions incrementally and animate.
//trigger small animation
Mconsole.graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(-200, -200);
});
Mconsole.compute('end');
chooseAnimate = {
modes:['polar'],
duration: 2000
};
}
else if ( type == "arranged" ) {
// compute positions incrementally and animate.
Mconsole.graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(0, 0);
var newPos = new $jit.Complex();
newPos.x = n.data.$xloc;
newPos.y = n.data.$yloc;
n.setPos(newPos, 'end');
});
chooseAnimate = {
modes: ['linear'],
transition: $jit.Trans.Quad.easeInOut,
duration: 2500
};
}
else if ( type == "chaotic" ) {
// compute positions incrementally and animate.
Mconsole.compute()
chooseAnimate = {
modes: ['linear'],
transition: $jit.Trans.Elastic.easeOut,
duration: 2500
};
}
$(document).ready(function() {
if ( type == "centered") {
Mconsole.fx.animate(chooseAnimate);
}
else if ( type == "arranged" || type == "chaotic") {
Mconsole.animate(chooseAnimate);
}
});
// end
}

View file

@ -16,6 +16,8 @@
//= require jquery_ujs
//= require_tree .
// other options are 'graph'
var viewMode = "list";
$(document).ready(function() {
@ -150,25 +152,15 @@
obj = document.getElementById('container');
var switchAll = $(this).attr('id');
console.log(switchAll);
if ( switchAll === "showAll" || switchAll === "hideAll") {
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 +171,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 +188,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 +226,15 @@
$("#saveLayout").click(function(event) {
event.preventDefault();
coor = "";
if (map != null) {
map.graph.eachNode(function(n) {
if (gType == "arranged" || gType == "chaotic") {
Mconsole.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();
});
});

View file

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

View file

@ -6,15 +6,12 @@
color:#444;
}
#showcard{
#showcard {
width:auto;
height:auto;
color:#FFF;
text-align: left;
overflow: auto;
position:absolute;
top:200px;
left:10px;
}
#showcard .contributor { font-size:14px; }
@ -28,21 +25,4 @@
height:100%;
margin:0;
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;
}

View file

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

View file

@ -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

View file

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

View file

@ -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|

View file

@ -1,75 +1,47 @@
$('#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
map2 = document.getElementById('container');
if (map2 != null) {
var newnode = <%= @item.self_as_json.html_safe %>;
if(viewMode == "graph") {
var newnode = <%= @item.self_as_json.html_safe %>;
if (fd != null) {
fd.graph.addNode(newnode);
var temp = fd.graph.getNode('<%= @item.id %>');
if (Mconsole != null) {
Mconsole.graph.addNode(newnode);
var temp = Mconsole.graph.getNode('<%= @item.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
<% 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({
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" || gType == "chaotic") {
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');
}
Mconsole.fx.plotNode(temp, Mconsole.canvas);
Mconsole.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
$("#node1_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
$("#node2_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
}
else {
alert('wrong!');
$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
$(".scroll").mCustomScrollbar();
}
$(".scroll").mCustomScrollbar();
}

View file

@ -29,7 +29,7 @@
json = <%= @relatives %>;
console.log(json);
$(document).ready(function() {
initRG();
initialize("centered");
});
</script>

View file

@ -11,7 +11,7 @@
<body>
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
<div class="headertop">
<div class="headertop">
<h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div>
<%= form_for Item.new, :html => { :class => "find_item", :id => "find_item" } do |f| %>
<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %>
@ -62,12 +62,13 @@
</ul>
<% end %>
</div>
<div class="clearfloat"></div>
<div class="clearfloat"></div>
<div class="wrapper" id="wrapper">
<%= yield %>
</div>
<div class="footer">
<div class="footer">
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
<div class="feedback"><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></div>
<% end %>

View file

@ -20,8 +20,6 @@
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="showcard">
</div>
</div>
<div class="clearfloat"></div>
@ -30,15 +28,36 @@
if (json.length > 0) {
$(document).ready(function() {
<% if (@map.arranged) %>
initMAP();
initialize("arranged");
<% else %>
initFD();
initialize("chaotic");
<% end %>
});
}
</script>
<% elsif @items %>
<div class="maps" id="container">
<div id="center-container">
<div id="infovis"></div>
</div>
</div>
<div class="clearfloat"></div>
<% if authenticated? %>
<%= render :partial => 'items/new' %>
<%= render :partial => 'synapses/new' %>
<% end %>
<script>
json = <%= @items %>;
if (json.length > 0) {
$(document).ready(function() {
initialize("chaotic");
});
}
</script>
<% else %>
<h1><br>Shucks, there are no maps.<h1>
<% end %>

View file

@ -10,7 +10,7 @@
<script>
json = <%= @alljson %>;
$(document).ready(function() {
initFD();
initialize("chaotic");
});
</script>
<% end %>

View file

@ -31,13 +31,14 @@
<div class="clearfloat"></div>
<script>
viewMode = "graph";
json = <%= @mapjson %>;
if (json.length > 0) {
$(document).ready(function() {
<% if (@map.arranged) %>
initMAP();
initialize("arranged");
<% else %>
initFD();
initialize("chaotic");
<% end %>
});
}

View file

@ -6,61 +6,57 @@ map1 = document.getElementById('container');
if (map1 != null) {
var mymap, newnode, temp1, temp2, temp;
if (fd != null) {
mymap = fd;
}
else if (rg != null) {
mymap = rg;
}
else if (map != null) {
mymap = map;
}
var newnode, temp1, temp2, temp;
if (mymap == fd || mymap == rg || mymap = map) {
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
if ( Mconsole != null) {
temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
if (temp1 == null) {
newnode = <%= @synapse.item1.self_as_json.html_safe %>;
mymap.graph.addNode(newnode);
temp = mymap.graph.getNode('<%= @synapse.item1.id %>');
Mconsole.graph.addNode(newnode);
temp = Mconsole.graph.getNode('<%= @synapse.item1.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
if (mymap == fd) {
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), 'start');
temp.setPos(new $jit.Complex(0, 0), 'end');
}
else if (mymap == rg) {
else 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');
}
mymap.fx.plotNode(temp, mymap.canvas);
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
Mconsole.fx.plotNode(temp, Mconsole.canvas);
temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
}
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
if (temp2 == null) {
newnode = <%= @synapse.item2.self_as_json.html_safe %>;
mymap.graph.addNode(newnode);
temp = mymap.graph.getNode('<%= @synapse.item2.id %>');
Mconsole.graph.addNode(newnode);
temp = Mconsole.graph.getNode('<%= @synapse.item2.id %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
if (mymap == fd) {
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), 'start');
temp.setPos(new $jit.Complex(0, 0), 'end');
}
else if (mymap == rg) {
else 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');
}
mymap.fx.plotNode(temp, mymap.canvas);
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
Mconsole.fx.plotNode(temp, Mconsole.canvas);
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
}
mymap.graph.addAdjacence(temp1, temp2, {});
temp = mymap.graph.getAdjacence(temp1.id, temp2.id);
Mconsole.graph.addAdjacence(temp1, temp2, {});
temp = Mconsole.graph.getAdjacence(temp1.id, temp2.id);
temp.setDataset('start', {
lineWidth: 0.4,
color: '#d1d1d1'
@ -70,25 +66,23 @@ if (map1 != null) {
color: '#36acfb'
});
var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
console.log('d=' + d);
temp.setDataset('current', {
desc: '<%= @synapse.desc %>',
showDesc: false,
category: '<%= @synapse.category %>',
id: '<%= @synapse.id %>',
id: '<%= @synapse.id %>',
userid: '<%= @synapse.user.id %>',
username: '<%= @synapse.user.name %>'
});
temp.data.$direction = d;
console.log(temp);
mymap.fx.plotLine(temp, mymap.canvas);
mymap.fx.animate({
Mconsole.fx.plotLine(temp, Mconsole.canvas);
Mconsole.fx.animate({
modes: ['node-property:dim','edge-property:lineWidth:color'],
duration: 400
});
}
else {
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
initFD();
initialize("chaotic");
}
}

View file

@ -10,7 +10,7 @@
<script>
json = <%= @synapsesjson %>;
$(document).ready(function() {
initFD();
initialize("chaotic");
});
</script>

View file

@ -11,7 +11,7 @@
json = <%= @synapsejson %>;
console.log(json);
$(document).ready(function() {
initFD();
initialize("chaotic");
});
</script>

View file

@ -1,6 +1,6 @@
ISSAD::Application.routes.draw do
root to: 'main#samplemap', via: :get
root to: 'main#console', via: :get
match 'metamap', to: 'main#metamap', via: :get, as: :metamap
match 'maps', to: 'main#allmaps', via: :get, as: :allmaps

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 676 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 676 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

View file

@ -1,49 +0,0 @@
---
48px-all.zip: 48px-all-2dd6aaa6c99e01af92fd7aa61fbf642a.zip
96px-gen001.zip: 96px-gen001-a2e2d959694d5f3c98e717eb4f82d5dd.zip
action.png: action-02bd981b8466a7b2cb167afffc284703.png
activity.png: activity-27aedb9b5baea69ea88f1f2b5303862c.png
background.jpg: background-2fcc9f96ace4764a02278ada04bc0d9d.jpg
background2-for-repeating.jpg: background2-for-repeating-8d022369a362b364c9395039167f1ffd.jpg
background2.jpg: background2-c2b46d9ebc7d31aea8135e3c505aa1e9.jpg
bg.png: bg-eea3f1ec61623cbc3833f8fcbf114bf8.png
bizarre.png: bizarre-4154e4b7b2e0169cfc4af24c32119305.png
catalyst.png: catalyst-21e04cdb0f34140b3e00d0b98aca240c.png
closed.png: closed-11f6970ed42d52bc9352fa8860ab7479.png
col2.png: col2-4f58f5695026bcc1789ef2a87be40897.png
experience.png: experience-8068d2c812493d1852ee7e3c992365ce.png
futuredev.png: futuredev-e3c62458cfd457b0501dddc6d9b2d8d4.png
gradient.png: gradient-6c6f5be85356b9e5ff76658e56ccc0f9.png
group.png: group-70155e13e72ec389d64a4f80a8d62d24.png
idea.png: idea-283b58d94b9166856f2734e3c5426ca4.png
implication.png: implication-652ece8bc0b1060dd5ca0756393cf21e.png
insight.png: insight-858ccca7357b37837a257e0202319b27.png
intention.png: intention-a487d116bfcf64c7ac559ef89ed61544.png
junto.png: junto-3bca283ec5fe80ef34d6a888b7c676b4.png
knowledge.png: knowledge-eb4b1dc4412b210c286b934737b04f80.png
location.png: location-e1642892214a5cb4b2891f3837f437de.png
old icons/action.png: old icons/action-d55838ce24528a56dd241c285ef2349a.png
old icons/group.png: old icons/group-bd3f38a2d40c7aef4123fd61caa833c7.png
old icons/intention.png: old icons/intention-6fc1087e39981084643eb9d713f82d90.png
old icons/location.png: old icons/location-4f88b890ffc41fea38627f59f2c19a3e.png
old icons/person.png: old icons/person-be021351add736f73b07acc5880ecbf4.png
old icons/resource.png: old icons/resource-9e40d89dbf5a02859533b6c02eabe2d8.png
openissue.png: openissue-d9c50446b2dbd0587942ae298bda2a75.png
opinion.png: opinion-c65d63ce63d9c1dc01f60b2f9a4fecfe.png
opportunity.png: opportunity-4fe7c2f4f5cbe678058c76924ec43a7f.png
person.png: person-2cb4eace780426c21c109ca6475431ce.png
platform.png: platform-29f4dc32fb5f2a9f369b92d2f51ba005.png
problem.png: problem-d660aa3522f737dfd25487937bed6db1.png
question.png: question-bc1ccabf1e7cb8b4b6d6744fe096760c.png
reference.png: reference-c840b77477e0dc3fd431236766793a5f.png
requirement.png: requirement-d200e129a41fff36f64111f554abea72.png
resource.png: resource-4017b1e9535d80d205ceff916930cf5d.png
role.png: role-c474b1fcb4b4f836e7ca0db67e744dc3.png
task.png: task-0ac599d122a709a5e73990f1745019e0.png
tool.png: tool-45532482693a381d4da31c103392ee5b.png
topbg.png: topbg-eb18f5cf8dcfaf7dfd7e47f503956a5d.png
topbg2.png: topbg2-f9640f6cb183bb610d0954c7759ecc23.png
trajectory.png: trajectory-a7c520e746d4c1ffe401805b3d0cb6cd.png
application.js: application-1aeff30841c7f6db27108875313507a1.js
scroll/mCSB_buttons.png: scroll/mCSB_buttons-6eb1e766df3b6b28f5cb2a218697658f.png
application.css: application-4af40eb7816893311357a68724f2ade6.css

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

Some files were not shown because too many files have changed in this diff Show more