removed public assets
This commit is contained in:
Connor Turland
parent
9f4522e1e7
commit
55d8a197de
122 changed files with 711 additions and 1246 deletions
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -32,18 +32,18 @@ categoryVisible['Trajectory'] = true;
|
||||||
categoryVisible['Action'] = true;
|
categoryVisible['Action'] = true;
|
||||||
categoryVisible['Activity'] = true;
|
categoryVisible['Activity'] = true;
|
||||||
|
|
||||||
function switchVisible(g, category, duration) {
|
function switchVisible(category, duration) {
|
||||||
if (categoryVisible[category] == true) {
|
if (categoryVisible[category] == true) {
|
||||||
hideCategory(g, category, duration);
|
hideCategory(category, duration);
|
||||||
}
|
}
|
||||||
else if (categoryVisible[category] == false) {
|
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;
|
if (duration == null) duration = 500;
|
||||||
g.graph.eachNode( function (n) {
|
console.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,16 +51,16 @@ function hideCategory(g, category, duration) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
g.fx.animate({
|
console.fx.animate({
|
||||||
modes: ['node-property:alpha',
|
modes: ['node-property:alpha',
|
||||||
'edge-property:alpha'],
|
'edge-property:alpha'],
|
||||||
duration: duration
|
duration: duration
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCategory(g, category, duration) {
|
function showCategory(category, duration) {
|
||||||
if (duration == null) duration = 500;
|
if (duration == null) duration = 500;
|
||||||
g.graph.eachNode( function (n) {
|
console.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,37 +68,37 @@ function showCategory(g, category, duration) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
g.fx.animate({
|
console.fx.animate({
|
||||||
modes: ['node-property:alpha',
|
modes: ['node-property:alpha',
|
||||||
'edge-property:alpha'],
|
'edge-property:alpha'],
|
||||||
duration: duration
|
duration: duration
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideAll(g, duration) {
|
function hideAll(duration) {
|
||||||
if (duration == null) duration = 500;
|
if (duration == null) duration = 500;
|
||||||
g.graph.eachNode( function (n) {
|
console.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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
g.fx.animate({
|
console.fx.animate({
|
||||||
modes: ['node-property:alpha',
|
modes: ['node-property:alpha',
|
||||||
'edge-property:alpha'],
|
'edge-property:alpha'],
|
||||||
duration: duration
|
duration: duration
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showAll(g, duration) {
|
function showAll(duration) {
|
||||||
if (duration == null) duration = 500;
|
if (duration == null) duration = 500;
|
||||||
g.graph.eachNode( function (n) {
|
console.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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
g.fx.animate({
|
console.fx.animate({
|
||||||
modes: ['node-property:alpha',
|
modes: ['node-property:alpha',
|
||||||
'edge-property:alpha'],
|
'edge-property:alpha'],
|
||||||
duration: duration
|
duration: duration
|
||||||
|
|
|
||||||
382
app/assets/javascripts/Jit/graphsettings.js
Normal file
382
app/assets/javascripts/Jit/graphsettings.js
Normal file
|
|
@ -0,0 +1,382 @@
|
||||||
|
function graphSettings(type) {
|
||||||
|
var t;
|
||||||
|
|
||||||
|
if (type == "arranged" || type == "chaotic") {
|
||||||
|
t = {
|
||||||
|
//id of the visualization container
|
||||||
|
injectInto: 'infovis',
|
||||||
|
//Enable zooming and panning
|
||||||
|
//by scrolling and DnD
|
||||||
|
Navigation: {
|
||||||
|
enable: true,
|
||||||
|
type: 'HTML',
|
||||||
|
//Enable panning events only if we're dragging the empty
|
||||||
|
//canvas (and not a node).
|
||||||
|
panning: 'avoid nodes',
|
||||||
|
zooming: 10 //zoom speed. higher is more sensible
|
||||||
|
},
|
||||||
|
// Change node and edge styles such as
|
||||||
|
// color and width.
|
||||||
|
// These properties are also set per node
|
||||||
|
// with dollar prefixed data-properties in the
|
||||||
|
// JSON structure.
|
||||||
|
Node: {
|
||||||
|
overridable: true,
|
||||||
|
color: '#2D6A5D',
|
||||||
|
type: 'customNode',
|
||||||
|
dim: 25
|
||||||
|
},
|
||||||
|
Edge: {
|
||||||
|
overridable: true,
|
||||||
|
color: '#222222',
|
||||||
|
type: 'customEdge',
|
||||||
|
lineWidth: 1
|
||||||
|
},
|
||||||
|
//Native canvas text styling
|
||||||
|
Label: {
|
||||||
|
type: 'HTML', //Native or HTML
|
||||||
|
size: 20,
|
||||||
|
//style: 'bold'
|
||||||
|
},
|
||||||
|
//Add Tips
|
||||||
|
Tips: {
|
||||||
|
enable: true,
|
||||||
|
onShow: function (tip, node) {
|
||||||
|
//count connections
|
||||||
|
var count = 0;
|
||||||
|
node.eachAdjacency(function () {
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
//display node info in tooltip
|
||||||
|
tip.innerHTML = "<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);
|
||||||
|
console.plot();
|
||||||
|
},
|
||||||
|
//Implement the same handler for touchscreens
|
||||||
|
onTouchMove: function (node, eventInfo, e) {
|
||||||
|
$jit.util.event.stop(e); //stop default touchmove event
|
||||||
|
this.onDragMove(node, eventInfo, e);
|
||||||
|
},
|
||||||
|
//Add also a click handler to nodes
|
||||||
|
onClick: function (node) {
|
||||||
|
if (!node) return;
|
||||||
|
//set final styles
|
||||||
|
console.graph.eachNode(function (n) {
|
||||||
|
if (n.id != node.id) delete n.selected;
|
||||||
|
n.setData('dim', 25, 'end');
|
||||||
|
n.eachAdjacency(function (adj) {
|
||||||
|
adj.setDataset('end', {
|
||||||
|
lineWidth: 0.5,
|
||||||
|
color: '#222222'
|
||||||
|
});
|
||||||
|
adj.setData('showDesc', false, 'current');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (!node.selected) {
|
||||||
|
node.selected = true;
|
||||||
|
node.setData('dim', 35, 'end');
|
||||||
|
node.eachAdjacency(function (adj) {
|
||||||
|
adj.setDataset('end', {
|
||||||
|
lineWidth: 3,
|
||||||
|
color: '#FFF'
|
||||||
|
});
|
||||||
|
adj.setData('showDesc', true, 'current');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
delete node.selected;
|
||||||
|
}
|
||||||
|
//trigger animation to final styles
|
||||||
|
console.fx.animate({
|
||||||
|
modes: ['node-property:dim',
|
||||||
|
'edge-property:lineWidth:color'],
|
||||||
|
duration: 500
|
||||||
|
});
|
||||||
|
// Build the right column relations list.
|
||||||
|
// This is done by traversing the clicked node connections.
|
||||||
|
var html =
|
||||||
|
'<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
|
||||||
|
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
|
||||||
|
// 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 () {
|
||||||
|
//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 = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return t;
|
||||||
|
}
|
||||||
182
app/assets/javascripts/Jit/loadgraphs.js
Normal file
182
app/assets/javascripts/Jit/loadgraphs.js
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
var labelType, useGradients, nativeTextSupport, animate, json, console, gType;
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var ua = navigator.userAgent,
|
||||||
|
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
|
||||||
|
typeOfCanvas = typeof HTMLCanvasElement,
|
||||||
|
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
|
||||||
|
textSupport = nativeCanvasSupport
|
||||||
|
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
|
||||||
|
//I'm setting this based on the fact that ExCanvas provides text support for IE
|
||||||
|
//and that as of today iPhone/iPad current text support is lame
|
||||||
|
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
|
||||||
|
nativeTextSupport = labelType == 'Native';
|
||||||
|
useGradients = nativeCanvasSupport;
|
||||||
|
animate = !(iStuff || !nativeCanvasSupport);
|
||||||
|
})();
|
||||||
|
|
||||||
|
var imgArray = new Object();
|
||||||
|
|
||||||
|
imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
|
||||||
|
imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
|
||||||
|
imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
|
||||||
|
imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
|
||||||
|
imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
|
||||||
|
imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
|
||||||
|
imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
|
||||||
|
imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
|
||||||
|
imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
|
||||||
|
imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
|
||||||
|
imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
|
||||||
|
imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
|
||||||
|
imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
|
||||||
|
imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
|
||||||
|
imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
|
||||||
|
imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
|
||||||
|
imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
|
||||||
|
imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
|
||||||
|
imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
|
||||||
|
imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
|
||||||
|
imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
|
||||||
|
imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
|
||||||
|
imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
|
||||||
|
imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
|
||||||
|
imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
|
||||||
|
imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
|
||||||
|
imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
|
||||||
|
imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
|
||||||
|
|
||||||
|
function initialize(type){
|
||||||
|
gType = type;
|
||||||
|
|
||||||
|
// init custom node type
|
||||||
|
$jit.ForceDirected.Plot.NodeTypes.implement({
|
||||||
|
'customNode': {
|
||||||
|
'render': function (node, canvas) {
|
||||||
|
var pos = node.pos.getc(true),
|
||||||
|
dim = node.getData('dim'),
|
||||||
|
cat = node.getData('itemcatname'),
|
||||||
|
ctx = canvas.getCtx();
|
||||||
|
ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim*2, dim*2);
|
||||||
|
|
||||||
|
},
|
||||||
|
'contains': function(node, pos) {
|
||||||
|
var npos = node.pos.getc(true),
|
||||||
|
dim = node.getData('dim');
|
||||||
|
return this.nodeHelper.circle.contains(npos, pos, dim);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//implement an edge type
|
||||||
|
$jit.ForceDirected.Plot.EdgeTypes.implement({
|
||||||
|
'customEdge': {
|
||||||
|
'render': function(adj, canvas) {
|
||||||
|
//get nodes cartesian coordinates
|
||||||
|
var pos = adj.nodeFrom.pos.getc(true);
|
||||||
|
var posChild = adj.nodeTo.pos.getc(true);
|
||||||
|
|
||||||
|
var directionCat = adj.getData("category");
|
||||||
|
//label placement on edges
|
||||||
|
//plot arrow edge
|
||||||
|
if (directionCat == "none") {
|
||||||
|
this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
|
||||||
|
}
|
||||||
|
else if (directionCat == "both") {
|
||||||
|
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, false, canvas);
|
||||||
|
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, true, canvas);
|
||||||
|
}
|
||||||
|
else if (directionCat == "from-to") {
|
||||||
|
var direction = adj.data.$direction;
|
||||||
|
var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
|
||||||
|
this.edgeHelper.arrow.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 40, inv, canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
//check for edge label in data
|
||||||
|
var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
|
||||||
|
var showDesc = adj.getData("showDesc");
|
||||||
|
if( desc != "" && showDesc ) {
|
||||||
|
//now adjust the label placement
|
||||||
|
var radius = canvas.getSize();
|
||||||
|
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
|
||||||
|
var y = parseInt((pos.y + posChild.y) /2);
|
||||||
|
canvas.getCtx().fillStyle = '#000';
|
||||||
|
canvas.getCtx().font = 'bold 14px arial';
|
||||||
|
//canvas.getCtx().fillText(desc, x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// end
|
||||||
|
|
||||||
|
|
||||||
|
if ( type == "centered") {
|
||||||
|
console = new $jit.RGraph(graphSettings(type));
|
||||||
|
}
|
||||||
|
else if ( type == "arranged" || type == "chaotic" ) {
|
||||||
|
// init ForceDirected
|
||||||
|
console = new $jit.ForceDirected(graphSettings(type));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert("You didn't specify a type!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// load JSON data.
|
||||||
|
console.loadJSON(json);
|
||||||
|
|
||||||
|
// choose how to plot and animate the data onto the screen
|
||||||
|
var chooseAnimate;
|
||||||
|
|
||||||
|
if ( type == "centered") {
|
||||||
|
// compute positions incrementally and animate.
|
||||||
|
//trigger small animation
|
||||||
|
console.graph.eachNode(function(n) {
|
||||||
|
var pos = n.getPos();
|
||||||
|
pos.setc(-200, -200);
|
||||||
|
});
|
||||||
|
console.compute('end');
|
||||||
|
|
||||||
|
chooseAnimate = {
|
||||||
|
modes:['polar'],
|
||||||
|
duration: 2000
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else if ( type == "arranged" ) {
|
||||||
|
// compute positions incrementally and animate.
|
||||||
|
console.graph.eachNode(function(n) {
|
||||||
|
var pos = n.getPos();
|
||||||
|
pos.setc(0, 0);
|
||||||
|
var newPos = new $jit.Complex();
|
||||||
|
newPos.x = n.data.$xloc;
|
||||||
|
newPos.y = n.data.$yloc;
|
||||||
|
n.setPos(newPos, 'end');
|
||||||
|
});
|
||||||
|
|
||||||
|
chooseAnimate = {
|
||||||
|
modes: ['linear'],
|
||||||
|
transition: $jit.Trans.Quad.easeInOut,
|
||||||
|
duration: 2500
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else if ( type == "chaotic" ) {
|
||||||
|
// compute positions incrementally and animate.
|
||||||
|
console.compute()
|
||||||
|
|
||||||
|
chooseAnimate = {
|
||||||
|
modes: ['linear'],
|
||||||
|
transition: $jit.Trans.Elastic.easeOut,
|
||||||
|
duration: 2500
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
if ( type == "centered") {
|
||||||
|
console.fx.animate(chooseAnimate);
|
||||||
|
}
|
||||||
|
else if ( type == "arranged" || type == "chaotic") {
|
||||||
|
console.animate(chooseAnimate);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// end
|
||||||
|
}
|
||||||
|
|
@ -156,19 +156,10 @@
|
||||||
if (switchAll == "showAll") {
|
if (switchAll == "showAll") {
|
||||||
// this means that we are on a map view
|
// this means that we are on a map view
|
||||||
if (obj != null) {
|
if (obj != null) {
|
||||||
if (fd != null) {
|
showAll();
|
||||||
showAll(fd);
|
|
||||||
}
|
|
||||||
else if (rg != null) {
|
|
||||||
showAll(rg);
|
|
||||||
}
|
|
||||||
else if (map != null) {
|
|
||||||
showAll(map);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// this means that we are on a card view
|
// this means that we are on a card view
|
||||||
else {
|
else {
|
||||||
console.log('rightone');
|
|
||||||
$('.item').fadeIn('slow');
|
$('.item').fadeIn('slow');
|
||||||
}
|
}
|
||||||
$('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
$('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
||||||
|
|
@ -179,15 +170,7 @@
|
||||||
else if (switchAll == "hideAll") {
|
else if (switchAll == "hideAll") {
|
||||||
// this means that we are on a map view
|
// this means that we are on a map view
|
||||||
if (obj != null) {
|
if (obj != null) {
|
||||||
if (fd != null) {
|
hideAll();
|
||||||
hideAll(fd);
|
|
||||||
}
|
|
||||||
else if (rg != null) {
|
|
||||||
hideAll(rg);
|
|
||||||
}
|
|
||||||
else if (map != null) {
|
|
||||||
hideAll(map);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// this means that we are on a card view
|
// this means that we are on a card view
|
||||||
else {
|
else {
|
||||||
|
|
@ -204,15 +187,7 @@
|
||||||
|
|
||||||
// this means that we are on a map view
|
// this means that we are on a map view
|
||||||
if (obj != null) {
|
if (obj != null) {
|
||||||
if (fd != null) {
|
switchVisible(category);
|
||||||
switchVisible(fd, category);
|
|
||||||
}
|
|
||||||
else if (rg != null) {
|
|
||||||
switchVisible(rg, category);
|
|
||||||
}
|
|
||||||
else if (map != null) {
|
|
||||||
switchVisible(map, category);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// this means that we are on a card view
|
// this means that we are on a card view
|
||||||
else {
|
else {
|
||||||
|
|
@ -250,19 +225,14 @@
|
||||||
$("#saveLayout").click(function(event) {
|
$("#saveLayout").click(function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
coor = "";
|
coor = "";
|
||||||
if (map != null) {
|
if (gType == "arranged" || gType == "chaotic") {
|
||||||
map.graph.eachNode(function(n) {
|
console.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);
|
||||||
|
$('#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();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ class ItemsController < ApplicationController
|
||||||
|
|
||||||
# GET /users/:user_id/items
|
# GET /users/:user_id/items
|
||||||
def index
|
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)
|
@items = Item.visibleToUser(@current, @user)
|
||||||
|
|
||||||
respond_with(@user,@items)
|
respond_with(@user,@items)
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,27 @@ class MainController < ApplicationController
|
||||||
respond_to :html, :js, :json
|
respond_to :html, :js, :json
|
||||||
|
|
||||||
#homepage pick a random map and show it
|
#homepage pick a random map and show it
|
||||||
def samplemap
|
def console
|
||||||
@current = current_user
|
|
||||||
@maps = Map.visibleToUser(@current, nil)
|
|
||||||
@map = @maps.sample
|
|
||||||
|
|
||||||
@mapjson = @map.self_as_json(@current).html_safe if @map
|
@current = current_user
|
||||||
|
|
||||||
respond_to do |format|
|
if authenticated?
|
||||||
format.html { respond_with(@map, @user) }
|
@items = all_as_json(@current, @current).html_safe
|
||||||
format.json { respond_with(@mapjson) }
|
|
||||||
|
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
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -68,11 +68,18 @@ module ItemsHelper
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def all_as_json(current)
|
def all_as_json(current, user)
|
||||||
|
|
||||||
|
# current is current user
|
||||||
|
|
||||||
Jbuilder.encode do |json|
|
Jbuilder.encode do |json|
|
||||||
|
if user.nil?
|
||||||
@items = Item.visibleToUser(current, nil)
|
@items = Item.visibleToUser(current, nil)
|
||||||
@synapses = Synapse.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.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|
|
json.adjacencies item.synapses2.delete_if{|synapse| (not @items.include?(Item.find_by_id(synapse.node1_id))) || (not @synapses.include?(synapse))} do |json, synapse|
|
||||||
|
|
|
||||||
|
|
@ -8,59 +8,44 @@ if (map2 != null) {
|
||||||
var newnode = <%= @item.self_as_json.html_safe %>;
|
var newnode = <%= @item.self_as_json.html_safe %>;
|
||||||
|
|
||||||
|
|
||||||
if (fd != null) {
|
if (console != null) {
|
||||||
fd.graph.addNode(newnode);
|
var temp = fd.graph.getNode('<%= @item.id %>');
|
||||||
var temp = fd.graph.getNode('<%= @item.id %>');
|
|
||||||
temp.setData('dim', 1, 'start');
|
temp.setData('dim', 1, 'start');
|
||||||
temp.setData('dim', 40, 'end');
|
temp.setData('dim', 40, 'end');
|
||||||
<% unless (@mapping.nil?) %>
|
|
||||||
|
if (gType == "centered") {
|
||||||
|
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
|
||||||
|
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||||
|
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||||
|
}
|
||||||
|
else if (gType == "arranged") {
|
||||||
|
temp.setData('xloc',0);
|
||||||
|
temp.setData('yloc',0);
|
||||||
|
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||||
|
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||||
|
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||||
|
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||||
|
}
|
||||||
|
else if (gType == "chaotic") {
|
||||||
|
<% unless (@mapping.nil?) %>
|
||||||
temp.setData('xloc',0);
|
temp.setData('xloc',0);
|
||||||
temp.setData('yloc',0);
|
temp.setData('yloc',0);
|
||||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||||
<% end %>
|
<% end %>
|
||||||
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');
|
||||||
fd.fx.plotNode(temp, fd.canvas);
|
}
|
||||||
fd.fx.animate({
|
|
||||||
modes: ['node-property:dim'],
|
console.fx.plotNode(temp, console.canvas);
|
||||||
duration: 400
|
console.fx.animate({
|
||||||
});
|
|
||||||
}
|
|
||||||
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({
|
|
||||||
modes: ['node-property:dim'],
|
modes: ['node-property:dim'],
|
||||||
duration: 400
|
duration: 400
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
json = newnode;
|
json = newnode;
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
}
|
}
|
||||||
console.log(temp);
|
console.log(temp);
|
||||||
// add the new node to the synapse select lists
|
// add the new node to the synapse select lists
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
json = <%= @relatives %>;
|
json = <%= @relatives %>;
|
||||||
console.log(json);
|
console.log(json);
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
initRG();
|
initialize("centered");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<body>
|
<body>
|
||||||
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
|
<%= 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>
|
<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| %>
|
<%= 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..." %>
|
<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %>
|
||||||
|
|
@ -62,12 +62,13 @@
|
||||||
</ul>
|
</ul>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfloat"></div>
|
<div class="clearfloat"></div>
|
||||||
|
|
||||||
<div class="wrapper" id="wrapper">
|
<div class="wrapper" id="wrapper">
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
|
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
|
||||||
<div class="feedback"><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></div>
|
<div class="feedback"><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -30,15 +30,34 @@
|
||||||
if (json.length > 0) {
|
if (json.length > 0) {
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
<% if (@map.arranged) %>
|
<% if (@map.arranged) %>
|
||||||
initMAP();
|
initialize("arranged");
|
||||||
<% else %>
|
<% else %>
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
<% end %>
|
<% end %>
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<% elsif @items %>
|
||||||
|
<div class="maps" id="container">
|
||||||
|
<div id="center-container">
|
||||||
|
<div id="infovis"></div>
|
||||||
|
</div>
|
||||||
|
<div id="showcard">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearfloat"></div>
|
||||||
|
<script>
|
||||||
|
json = <%= @items %>;
|
||||||
|
if (json.length > 0) {
|
||||||
|
$(document).ready(function() {
|
||||||
|
initialize("chaotic");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<% else %>
|
<% else %>
|
||||||
<h1><br>Shucks, there are no maps.<h1>
|
<h1><br>Shucks, there are no maps.<h1>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<script>
|
<script>
|
||||||
json = <%= @alljson %>;
|
json = <%= @alljson %>;
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -35,9 +35,9 @@
|
||||||
if (json.length > 0) {
|
if (json.length > 0) {
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
<% if (@map.arranged) %>
|
<% if (@map.arranged) %>
|
||||||
initMAP();
|
initialize("arranged");
|
||||||
<% else %>
|
<% else %>
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
<% end %>
|
<% end %>
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,61 +6,51 @@ map1 = document.getElementById('container');
|
||||||
|
|
||||||
if (map1 != null) {
|
if (map1 != null) {
|
||||||
|
|
||||||
var mymap, newnode, temp1, temp2, temp;
|
var newnode, temp1, temp2, temp;
|
||||||
if (fd != null) {
|
|
||||||
mymap = fd;
|
|
||||||
}
|
|
||||||
else if (rg != null) {
|
|
||||||
mymap = rg;
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (map != null) {
|
|
||||||
mymap = map;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mymap == fd || mymap == rg || mymap = map) {
|
if ( console != null) {
|
||||||
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
|
temp1 = console.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 %>;
|
||||||
mymap.graph.addNode(newnode);
|
console.graph.addNode(newnode);
|
||||||
temp = mymap.graph.getNode('<%= @synapse.item1.id %>');
|
temp = console.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 (mymap == fd) {
|
if (gType == "arranged" || gType == "chaotic") {
|
||||||
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');
|
||||||
}
|
}
|
||||||
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), 'current');
|
||||||
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');
|
||||||
}
|
}
|
||||||
mymap.fx.plotNode(temp, mymap.canvas);
|
console.fx.plotNode(temp, console.canvas);
|
||||||
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
|
temp1 = console.graph.getNode(<%= @synapse.item1.id %>);
|
||||||
}
|
}
|
||||||
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
|
temp2 = console.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 %>;
|
||||||
mymap.graph.addNode(newnode);
|
console.graph.addNode(newnode);
|
||||||
temp = mymap.graph.getNode('<%= @synapse.item2.id %>');
|
temp = console.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 (mymap == fd) {
|
if (gType == "arranged" || gType == "chaotic") {
|
||||||
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');
|
||||||
}
|
}
|
||||||
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), 'current');
|
||||||
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');
|
||||||
}
|
}
|
||||||
mymap.fx.plotNode(temp, mymap.canvas);
|
console.fx.plotNode(temp, console.canvas);
|
||||||
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
|
temp2 = console.graph.getNode(<%= @synapse.item2.id %>);
|
||||||
}
|
}
|
||||||
mymap.graph.addAdjacence(temp1, temp2, {});
|
console.graph.addAdjacence(temp1, temp2, {});
|
||||||
temp = mymap.graph.getAdjacence(temp1.id, temp2.id);
|
temp = console.graph.getAdjacence(temp1.id, temp2.id);
|
||||||
temp.setDataset('start', {
|
temp.setDataset('start', {
|
||||||
lineWidth: 0.4,
|
lineWidth: 0.4,
|
||||||
color: '#d1d1d1'
|
color: '#d1d1d1'
|
||||||
|
|
@ -70,25 +60,23 @@ if (map1 != null) {
|
||||||
color: '#36acfb'
|
color: '#36acfb'
|
||||||
});
|
});
|
||||||
var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
|
var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
|
||||||
console.log('d=' + d);
|
|
||||||
temp.setDataset('current', {
|
temp.setDataset('current', {
|
||||||
desc: '<%= @synapse.desc %>',
|
desc: '<%= @synapse.desc %>',
|
||||||
showDesc: false,
|
showDesc: false,
|
||||||
category: '<%= @synapse.category %>',
|
category: '<%= @synapse.category %>',
|
||||||
id: '<%= @synapse.id %>',
|
id: '<%= @synapse.id %>',
|
||||||
userid: '<%= @synapse.user.id %>',
|
userid: '<%= @synapse.user.id %>',
|
||||||
username: '<%= @synapse.user.name %>'
|
username: '<%= @synapse.user.name %>'
|
||||||
});
|
});
|
||||||
temp.data.$direction = d;
|
temp.data.$direction = d;
|
||||||
console.log(temp);
|
console.fx.plotLine(temp, console.canvas);
|
||||||
mymap.fx.plotLine(temp, mymap.canvas);
|
console.fx.animate({
|
||||||
mymap.fx.animate({
|
|
||||||
modes: ['node-property:dim','edge-property:lineWidth:color'],
|
modes: ['node-property:dim','edge-property:lineWidth:color'],
|
||||||
duration: 400
|
duration: 400
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
|
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<script>
|
<script>
|
||||||
json = <%= @synapsesjson %>;
|
json = <%= @synapsesjson %>;
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
json = <%= @synapsejson %>;
|
json = <%= @synapsejson %>;
|
||||||
console.log(json);
|
console.log(json);
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
initFD();
|
initialize("chaotic");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,21 @@
|
||||||
development:
|
development:
|
||||||
min_messages: WARNING
|
min_messages: WARNING
|
||||||
adapter: postgresql
|
adapter: postgresql
|
||||||
host: ec2-54-243-188-58.compute-1.amazonaws.com
|
host: 127.0.0.1
|
||||||
port: 5442
|
port: 5432
|
||||||
encoding: unicode
|
encoding: unicode
|
||||||
database: da81fvorvn5pp9
|
database: metamap002_development
|
||||||
pool: 5
|
pool: 5
|
||||||
username: yolhqgtlivenrk
|
username: postgres
|
||||||
password: "oi_EAZwbXboYjqB_9tWPh2x5YS"
|
password: "3112"
|
||||||
|
|
||||||
test:
|
|
||||||
min_messages: WARNING
|
|
||||||
adapter: postgresql
|
|
||||||
host: ec2-54-243-188-58.compute-1.amazonaws.com
|
|
||||||
port: 5442
|
|
||||||
encoding: unicode
|
|
||||||
database: da81fvorvn5pp9
|
|
||||||
pool: 5
|
|
||||||
username: yolhqgtlivenrk
|
|
||||||
password: "oi_EAZwbXboYjqB_9tWPh2x5YS"
|
|
||||||
|
|
||||||
production:
|
production:
|
||||||
min_messages: WARNING
|
min_messages: WARNING
|
||||||
adapter: postgresql
|
adapter: postgresql
|
||||||
host: ec2-54-243-188-58.compute-1.amazonaws.com
|
host: ec2-107-21-107-194.compute-1.amazonaws.com
|
||||||
port: 5442
|
port: 5432
|
||||||
encoding: unicode
|
encoding: unicode
|
||||||
database: da81fvorvn5pp9
|
database: ddcrn2lgphjk9k
|
||||||
pool: 5
|
pool: 5
|
||||||
username: yolhqgtlivenrk
|
username: qqpckkahytovwv
|
||||||
password: "oi_EAZwbXboYjqB_9tWPh2x5YS"
|
password: "njeP6cMA8EjM9ukHk9s3ReOdy7"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
ISSAD::Application.routes.draw do
|
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 'metamap', to: 'main#metamap', via: :get, as: :metamap
|
||||||
match 'maps', to: 'main#allmaps', via: :get, as: :allmaps
|
match 'maps', to: 'main#allmaps', via: :get, as: :allmaps
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
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
Binary file not shown.
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.
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 |
|
|
@ -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 |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue