Merge branch 'ACI'
This commit is contained in:
Connor Turland
commit
7c65634ade
126 changed files with 726 additions and 1342 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['Activity'] = true;
|
||||
|
||||
function switchVisible(g, category, duration) {
|
||||
function switchVisible(category, duration) {
|
||||
if (categoryVisible[category] == true) {
|
||||
hideCategory(g, category, duration);
|
||||
hideCategory(category, duration);
|
||||
}
|
||||
else if (categoryVisible[category] == false) {
|
||||
showCategory(g, category, duration);
|
||||
showCategory(category, duration);
|
||||
}
|
||||
}
|
||||
|
||||
function hideCategory(g, category, duration) {
|
||||
function hideCategory(category, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
if (n.getData('itemcatname') == category) {
|
||||
n.setData('alpha', 0, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
|
|
@ -51,16 +51,16 @@ function hideCategory(g, category, duration) {
|
|||
});
|
||||
}
|
||||
});
|
||||
g.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
});
|
||||
}
|
||||
|
||||
function showCategory(g, category, duration) {
|
||||
function showCategory(category, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
if (n.getData('itemcatname') == category) {
|
||||
n.setData('alpha', 1, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
|
|
@ -68,37 +68,37 @@ function showCategory(g, category, duration) {
|
|||
});
|
||||
}
|
||||
});
|
||||
g.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
});
|
||||
}
|
||||
|
||||
function hideAll(g, duration) {
|
||||
function hideAll(duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 0, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 0, 'end');
|
||||
});
|
||||
});
|
||||
g.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
});
|
||||
}
|
||||
|
||||
function showAll(g, duration) {
|
||||
function showAll(duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 1, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 1, 'end');
|
||||
});
|
||||
});
|
||||
g.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
|
|
|
|||
390
app/assets/javascripts/Jit/graphsettings.js
Normal file
390
app/assets/javascripts/Jit/graphsettings.js
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
function graphSettings(type) {
|
||||
var t;
|
||||
|
||||
if (type == "arranged" || type == "chaotic") {
|
||||
t = {
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//Enable zooming and panning
|
||||
//by scrolling and DnD
|
||||
Navigation: {
|
||||
enable: true,
|
||||
type: 'HTML',
|
||||
//Enable panning events only if we're dragging the empty
|
||||
//canvas (and not a node).
|
||||
panning: 'avoid nodes',
|
||||
zooming: 10 //zoom speed. higher is more sensible
|
||||
},
|
||||
// Change node and edge styles such as
|
||||
// color and width.
|
||||
// These properties are also set per node
|
||||
// with dollar prefixed data-properties in the
|
||||
// JSON structure.
|
||||
Node: {
|
||||
overridable: true,
|
||||
color: '#2D6A5D',
|
||||
type: 'customNode',
|
||||
dim: 25
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#222222',
|
||||
type: 'customEdge',
|
||||
lineWidth: 1
|
||||
},
|
||||
//Native canvas text styling
|
||||
Label: {
|
||||
type: 'HTML', //Native or HTML
|
||||
size: 20,
|
||||
//style: 'bold'
|
||||
},
|
||||
//Add Tips
|
||||
Tips: {
|
||||
enable: false,
|
||||
onShow: function (tip, node) {
|
||||
|
||||
//display node info in tooltip
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
||||
|
||||
tip.innerHTML = '<div class="" id="item_' + node.id + '"></div>';
|
||||
$jit.id('item_' + node.id).innerHTML = html;
|
||||
$("#_tooltip .scroll").mCustomScrollbar();
|
||||
}
|
||||
},
|
||||
// Add node events
|
||||
Events: {
|
||||
enable: true,
|
||||
type: 'HTML',
|
||||
//Change cursor style when hovering a node
|
||||
onMouseEnter: function () {
|
||||
//fd.canvas.getElement().style.cursor = 'move';
|
||||
},
|
||||
onMouseLeave: function () {
|
||||
//fd.canvas.getElement().style.cursor = '';
|
||||
},
|
||||
//Update node positions when dragged
|
||||
onDragMove: function (node, eventInfo, e) {
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
Mconsole.plot();
|
||||
},
|
||||
//Implement the same handler for touchscreens
|
||||
onTouchMove: function (node, eventInfo, e) {
|
||||
$jit.util.event.stop(e); //stop default touchmove event
|
||||
this.onDragMove(node, eventInfo, e);
|
||||
},
|
||||
//Add also a click handler to nodes
|
||||
onClick: function (node) {
|
||||
if (!node) return;
|
||||
//set final styles
|
||||
Mconsole.graph.eachNode(function (n) {
|
||||
if (n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.5,
|
||||
color: '#222222'
|
||||
});
|
||||
adj.setData('showDesc', false, 'current');
|
||||
});
|
||||
});
|
||||
if (!node.selected) {
|
||||
node.selected = true;
|
||||
node.setData('dim', 35, 'end');
|
||||
node.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#FFF'
|
||||
});
|
||||
adj.setData('showDesc', true, 'current');
|
||||
});
|
||||
} else {
|
||||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim',
|
||||
'edge-property:lineWidth:color'],
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
},
|
||||
//Number of iterations for the FD algorithm
|
||||
iterations: 200,
|
||||
//Edge length
|
||||
levelDistance: 200,
|
||||
// Add text to the labels. This method is only triggered
|
||||
// on label creation and only for DOM labels (not native canvas ones).
|
||||
onCreateLabel: function (domElement, node) {
|
||||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
var nameContainer = document.createElement('span'),
|
||||
style = nameContainer.style;
|
||||
nameContainer.className = 'name';
|
||||
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.appendChild(nameContainer);
|
||||
style.fontSize = "0.9em";
|
||||
style.color = "#222222";
|
||||
},
|
||||
// Change node styles when DOM labels are placed
|
||||
// or moved.
|
||||
onPlaceLabel: function (domElement, node) {
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var top = parseInt(style.top);
|
||||
var w = domElement.offsetWidth;
|
||||
var dim = node.getData('dim');
|
||||
style.left = (left - w / 2) + 'px';
|
||||
style.top = (top + dim) + 'px';
|
||||
style.display = '';
|
||||
}
|
||||
};
|
||||
} else if (type = "centered") {
|
||||
t = {
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//Optional: create a background canvas that plots
|
||||
//concentric circles.
|
||||
background: {
|
||||
CanvasStyles: {
|
||||
strokeStyle: '#333',
|
||||
lineWidth: 1.5
|
||||
}
|
||||
},
|
||||
//Enable zooming and panning
|
||||
//by scrolling and DnD
|
||||
Navigation: {
|
||||
enable: true,
|
||||
type: 'HTML',
|
||||
//Enable panning events only if we're dragging the empty
|
||||
//canvas (and not a node).
|
||||
panning: 'avoid nodes',
|
||||
zooming: 10 //zoom speed. higher is more sensible
|
||||
},
|
||||
// Change node and edge styles such as
|
||||
// color and width.
|
||||
// These properties are also set per node
|
||||
// with dollar prefixed data-properties in the
|
||||
// JSON structure.
|
||||
Node: {
|
||||
overridable: true,
|
||||
color: '#2D6A5D',
|
||||
type: 'customNode',
|
||||
dim: 25
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#222222',
|
||||
type: 'customEdge',
|
||||
lineWidth: 1
|
||||
},
|
||||
//Native canvas text styling
|
||||
Label: {
|
||||
type: 'HTML', //Native or HTML
|
||||
size: 20,
|
||||
//style: 'bold'
|
||||
},
|
||||
//Add Tips
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function (tip, node) {
|
||||
//count connections
|
||||
var count = 0;
|
||||
node.eachAdjacency(function () {
|
||||
count++;
|
||||
});
|
||||
//display node info in tooltip
|
||||
tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" + "<div class=\"tip-text\">connections: " + count + "</div>";
|
||||
}
|
||||
},
|
||||
// Add node events
|
||||
Events: {
|
||||
enable: true,
|
||||
type: 'HTML',
|
||||
//Change cursor style when hovering a node
|
||||
onMouseEnter: function () {
|
||||
//Mconsole.canvas.getElement().style.cursor = 'move';
|
||||
},
|
||||
onMouseLeave: function () {
|
||||
//Mconsole.canvas.getElement().style.cursor = '';
|
||||
},
|
||||
//Update node positions when dragged
|
||||
onDragMove: function (node, eventInfo, e) {
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
Mconsole.plot();
|
||||
},
|
||||
//Implement the same handler for touchscreens
|
||||
onTouchMove: function (node, eventInfo, e) {
|
||||
$jit.util.event.stop(e); //stop default touchmove event
|
||||
this.onDragMove(node, eventInfo, e);
|
||||
},
|
||||
//Add also a click handler to nodes
|
||||
onClick: function (node) {
|
||||
if (!node) return;
|
||||
//set final styles
|
||||
Mconsole.graph.eachNode(function (n) {
|
||||
if (n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 1,
|
||||
color: '#222222'
|
||||
});
|
||||
adj.setData('showDesc', false, 'current');
|
||||
});
|
||||
});
|
||||
if (!node.selected) {
|
||||
node.selected = true;
|
||||
node.setData('dim', 35, 'end');
|
||||
node.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#FFF'
|
||||
});
|
||||
adj.setData('showDesc', true, 'current');
|
||||
});
|
||||
} else {
|
||||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim',
|
||||
'edge-property:lineWidth:color'],
|
||||
duration: 500
|
||||
});
|
||||
// Build the right column relations list.
|
||||
// This is done by traversing the clicked node connections.
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
||||
|
||||
//append connections information
|
||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
||||
$jit.id('item_' + node.id).innerHTML = html;
|
||||
$("#showcard .scroll").mCustomScrollbar();
|
||||
}
|
||||
},
|
||||
//Number of iterations for the Mconsole algorithm
|
||||
iterations: 200,
|
||||
//Edge length
|
||||
levelDistance: 200,
|
||||
// Add text to the labels. This method is only triggered
|
||||
// on label creation and only for DOM labels (not native canvas ones).
|
||||
onCreateLabel: function (domElement, node) {
|
||||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
domElement.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.onclick = function () {
|
||||
Mconsole.onClick(node.id, {
|
||||
onComplete: function () {
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
||||
|
||||
//append connections information
|
||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
||||
$jit.id('item_' + node.id).innerHTML = html;
|
||||
$("#showcard .scroll").mCustomScrollbar();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// Change node styles when DOM labels are placed
|
||||
// or moved.
|
||||
onPlaceLabel: function (domElement, node) {
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var top = parseInt(style.top);
|
||||
var w = domElement.offsetWidth;
|
||||
var dim = node.getData('dim');
|
||||
style.left = (left - w / 2) + 'px';
|
||||
style.top = (top + dim) + 'px';
|
||||
style.display = '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return t;
|
||||
}
|
||||
|
||||
|
||||
// defining custom node type
|
||||
var nodeSettings = {
|
||||
'customNode': {
|
||||
'render': function (node, canvas) {
|
||||
var pos = node.pos.getc(true),
|
||||
dim = node.getData('dim'),
|
||||
cat = node.getData('itemcatname'),
|
||||
ctx = canvas.getCtx();
|
||||
ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim*2, dim*2);
|
||||
|
||||
},
|
||||
'contains': function(node, pos) {
|
||||
var npos = node.pos.getc(true),
|
||||
dim = node.getData('dim');
|
||||
return this.nodeHelper.circle.contains(npos, pos, dim);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// defining custom edges
|
||||
var edgeSettings = {
|
||||
'customEdge': {
|
||||
'render': function(adj, canvas) {
|
||||
//get nodes cartesian coordinates
|
||||
var pos = adj.nodeFrom.pos.getc(true);
|
||||
var posChild = adj.nodeTo.pos.getc(true);
|
||||
|
||||
var directionCat = adj.getData("category");
|
||||
//label placement on edges
|
||||
//plot arrow edge
|
||||
if (directionCat == "none") {
|
||||
this.edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
|
||||
}
|
||||
else if (directionCat == "both") {
|
||||
renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, true, canvas);
|
||||
renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, false, canvas);
|
||||
}
|
||||
else if (directionCat == "from-to") {
|
||||
var direction = adj.data.$direction;
|
||||
var inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
|
||||
renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, inv, canvas);
|
||||
}
|
||||
|
||||
//check for edge label in data
|
||||
var desc = adj.getData("desc") + ' (' + adj.getData("userid") + ',' + adj.getData("id") + ')';
|
||||
var showDesc = adj.getData("showDesc");
|
||||
if( desc != "" && showDesc ) {
|
||||
//now adjust the label placement
|
||||
var radius = canvas.getSize();
|
||||
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
|
||||
var y = parseInt((pos.y + posChild.y) /2);
|
||||
canvas.getCtx().fillStyle = '#000';
|
||||
canvas.getCtx().font = 'bold 14px arial';
|
||||
//canvas.getCtx().fillText(desc, x, y);
|
||||
}
|
||||
}, 'contains' : function(adj, pos) {
|
||||
var from = adj.nodeFrom.pos.getc(true),
|
||||
to = adj.nodeTo.pos.getc(true);
|
||||
return containsMidArrow(from, to, pos, this.edge.epsilon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -2360,8 +2360,8 @@ Extras.Classes.Tips = new Class({
|
|||
},
|
||||
|
||||
hide: function(triggerCallback) {
|
||||
this.tip.style.display = 'none';
|
||||
triggerCallback && this.config.onHide();
|
||||
this.tip.style.display = 'none';
|
||||
triggerCallback && this.config.onHide();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
179
app/assets/javascripts/Jit/loadgraphs.js
Normal file
179
app/assets/javascripts/Jit/loadgraphs.js
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, gType;
|
||||
|
||||
(function() {
|
||||
var ua = navigator.userAgent,
|
||||
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
|
||||
typeOfCanvas = typeof HTMLCanvasElement,
|
||||
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
|
||||
textSupport = nativeCanvasSupport
|
||||
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
|
||||
//I'm setting this based on the fact that ExCanvas provides text support for IE
|
||||
//and that as of today iPhone/iPad current text support is lame
|
||||
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
|
||||
nativeTextSupport = labelType == 'Native';
|
||||
useGradients = nativeCanvasSupport;
|
||||
animate = !(iStuff || !nativeCanvasSupport);
|
||||
})();
|
||||
|
||||
var imgArray = new Object();
|
||||
|
||||
imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
|
||||
imgArray['Person'] = new Image(); imgArray['Person'].src = '/assets/person.png';
|
||||
imgArray['Bizarre'] = new Image(); imgArray['Bizarre'].src = '/assets/bizarre.png';
|
||||
imgArray['Catalyst'] = new Image(); imgArray['Catalyst'].src = '/assets/catalyst.png';
|
||||
imgArray['Closed'] = new Image(); imgArray['Closed'].src = '/assets/closed.png';
|
||||
imgArray['Experience'] = new Image(); imgArray['Experience'].src = '/assets/experience.png';
|
||||
imgArray['Future Dev'] = new Image(); imgArray['Future Dev'].src = '/assets/futuredev.png';
|
||||
imgArray['Idea'] = new Image(); imgArray['Idea'].src = '/assets/idea.png';
|
||||
imgArray['Implication'] = new Image(); imgArray['Implication'].src = '/assets/implication.png';
|
||||
imgArray['Insight'] = new Image(); imgArray['Insight'].src = '/assets/insight.png';
|
||||
imgArray['Intention'] = new Image(); imgArray['Intention'].src = '/assets/intention.png';
|
||||
imgArray['Knowledge'] = new Image(); imgArray['Knowledge'].src = '/assets/knowledge.png';
|
||||
imgArray['Location'] = new Image(); imgArray['Location'].src = '/assets/location.png';
|
||||
imgArray['Open Issue'] = new Image(); imgArray['Open Issue'].src = '/assets/openissue.png';
|
||||
imgArray['Opinion'] = new Image(); imgArray['Opinion'].src = '/assets/opinion.png';
|
||||
imgArray['Opportunity'] = new Image(); imgArray['Opportunity'].src = '/assets/opportunity.png';
|
||||
imgArray['Platform'] = new Image(); imgArray['Platform'].src = '/assets/platform.png';
|
||||
imgArray['Problem'] = new Image(); imgArray['Problem'].src = '/assets/problem.png';
|
||||
imgArray['Question'] = new Image(); imgArray['Question'].src = '/assets/question.png';
|
||||
imgArray['Reference'] = new Image(); imgArray['Reference'].src = '/assets/reference.png';
|
||||
imgArray['Requirement'] = new Image(); imgArray['Requirement'].src = '/assets/requirement.png';
|
||||
imgArray['Resource'] = new Image(); imgArray['Resource'].src = '/assets/resource.png';
|
||||
imgArray['Role'] = new Image(); imgArray['Role'].src = '/assets/role.png';
|
||||
imgArray['Task'] = new Image(); imgArray['Task'].src = '/assets/task.png';
|
||||
imgArray['Tool'] = new Image(); imgArray['Tool'].src = '/assets/tool.png';
|
||||
imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/trajectory.png';
|
||||
imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
|
||||
imgArray['Activity'] = new Image(); imgArray['Activity'].src = '/assets/activity.png';
|
||||
|
||||
|
||||
// defining code to draw edges with arrows pointing in the middle of them
|
||||
var renderMidArrow = function(from, to, dim, swap, canvas){
|
||||
var ctx = canvas.getCtx();
|
||||
// invert edge direction
|
||||
if (swap) {
|
||||
var tmp = from;
|
||||
from = to;
|
||||
to = tmp;
|
||||
}
|
||||
// vect represents a line from tip to tail of the arrow
|
||||
var vect = new $jit.Complex(to.x - from.x, to.y - from.y);
|
||||
// scale it
|
||||
vect.$scale(dim / vect.norm());
|
||||
// compute the midpoint of the edge line
|
||||
var midPoint = new $jit.Complex((to.x + from.x) / 2, (to.y + from.y) / 2);
|
||||
// move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint
|
||||
midPoint.x += (vect.x / 0.7);
|
||||
midPoint.y += (vect.y / 0.7);
|
||||
// compute the tail intersection point with the edge line
|
||||
var intermediatePoint = new $jit.Complex(midPoint.x - vect.x,
|
||||
midPoint.y - vect.y);
|
||||
// vector perpendicular to vect
|
||||
var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
|
||||
var v1 = intermediatePoint.add(normal);
|
||||
var v2 = intermediatePoint.$add(normal.$scale(-1));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(from.x, from.y);
|
||||
ctx.lineTo(to.x, to.y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(v1.x, v1.y);
|
||||
ctx.lineTo(midPoint.x, midPoint.y);
|
||||
ctx.lineTo(v2.x, v2.y);
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
var containsMidArrow = function(posFrom, posTo, pos, epsilon) {
|
||||
return $jit.EdgeHelper.line.contains(posFrom, posTo, pos, epsilon);
|
||||
};
|
||||
|
||||
function initialize(type){
|
||||
viewMode = "graph";
|
||||
gType = type;
|
||||
|
||||
// init custom node type
|
||||
$jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
|
||||
//implement an edge type
|
||||
$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings);
|
||||
// end
|
||||
|
||||
// init custom node type
|
||||
$jit.RGraph.Plot.NodeTypes.implement(nodeSettings);
|
||||
//implement an edge type
|
||||
$jit.RGraph.Plot.EdgeTypes.implement(edgeSettings);
|
||||
// end
|
||||
|
||||
|
||||
if ( type == "centered") {
|
||||
// init Rgraph
|
||||
Mconsole = new $jit.RGraph(graphSettings(type));
|
||||
}
|
||||
else if ( type == "arranged" || type == "chaotic" ) {
|
||||
// init ForceDirected
|
||||
Mconsole = new $jit.ForceDirected(graphSettings(type));
|
||||
}
|
||||
else {
|
||||
alert("You didn't specify a type!");
|
||||
return false;
|
||||
}
|
||||
|
||||
// load JSON data.
|
||||
Mconsole.loadJSON(json);
|
||||
|
||||
// choose how to plot and animate the data onto the screen
|
||||
var chooseAnimate;
|
||||
|
||||
if ( type == "centered") {
|
||||
// compute positions incrementally and animate.
|
||||
//trigger small animation
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
var pos = n.getPos();
|
||||
pos.setc(-200, -200);
|
||||
});
|
||||
Mconsole.compute('end');
|
||||
|
||||
chooseAnimate = {
|
||||
modes:['polar'],
|
||||
duration: 2000
|
||||
};
|
||||
}
|
||||
else if ( type == "arranged" ) {
|
||||
// compute positions incrementally and animate.
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
var pos = n.getPos();
|
||||
pos.setc(0, 0);
|
||||
var newPos = new $jit.Complex();
|
||||
newPos.x = n.data.$xloc;
|
||||
newPos.y = n.data.$yloc;
|
||||
n.setPos(newPos, 'end');
|
||||
});
|
||||
|
||||
chooseAnimate = {
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Quad.easeInOut,
|
||||
duration: 2500
|
||||
};
|
||||
}
|
||||
else if ( type == "chaotic" ) {
|
||||
// compute positions incrementally and animate.
|
||||
Mconsole.compute()
|
||||
|
||||
chooseAnimate = {
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Elastic.easeOut,
|
||||
duration: 2500
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
if ( type == "centered") {
|
||||
Mconsole.fx.animate(chooseAnimate);
|
||||
}
|
||||
else if ( type == "arranged" || type == "chaotic") {
|
||||
Mconsole.animate(chooseAnimate);
|
||||
}
|
||||
});
|
||||
// end
|
||||
}
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
//= require jquery_ujs
|
||||
//= require_tree .
|
||||
|
||||
// other options are 'graph'
|
||||
var viewMode = "list";
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
|
@ -150,25 +152,15 @@
|
|||
obj = document.getElementById('container');
|
||||
|
||||
var switchAll = $(this).attr('id');
|
||||
console.log(switchAll);
|
||||
|
||||
if ( switchAll === "showAll" || switchAll === "hideAll") {
|
||||
if (switchAll == "showAll") {
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
showAll(fd);
|
||||
}
|
||||
else if (rg != null) {
|
||||
showAll(rg);
|
||||
}
|
||||
else if (map != null) {
|
||||
showAll(map);
|
||||
}
|
||||
showAll();
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
console.log('rightone');
|
||||
$('.item').fadeIn('slow');
|
||||
}
|
||||
$('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
||||
|
|
@ -179,15 +171,7 @@
|
|||
else if (switchAll == "hideAll") {
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
hideAll(fd);
|
||||
}
|
||||
else if (rg != null) {
|
||||
hideAll(rg);
|
||||
}
|
||||
else if (map != null) {
|
||||
hideAll(map);
|
||||
}
|
||||
hideAll();
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
|
|
@ -204,15 +188,7 @@
|
|||
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
switchVisible(fd, category);
|
||||
}
|
||||
else if (rg != null) {
|
||||
switchVisible(rg, category);
|
||||
}
|
||||
else if (map != null) {
|
||||
switchVisible(map, category);
|
||||
}
|
||||
switchVisible(category);
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
|
|
@ -250,19 +226,15 @@
|
|||
$("#saveLayout").click(function(event) {
|
||||
event.preventDefault();
|
||||
coor = "";
|
||||
if (map != null) {
|
||||
map.graph.eachNode(function(n) {
|
||||
if (gType == "arranged" || gType == "chaotic") {
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
|
||||
});
|
||||
coor = coor.slice(0, -1);
|
||||
$('#map_coordinates').val(coor);
|
||||
$('#saveMapLayout').submit();
|
||||
|
||||
}
|
||||
else if (fd != null) {
|
||||
fd.graph.eachNode(function(n) {
|
||||
coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
|
||||
});
|
||||
}
|
||||
coor = coor.slice(0, -1);
|
||||
$('#map_coordinates').val(coor);
|
||||
$('#saveMapLayout').submit();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,16 +7,3 @@
|
|||
span.name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*TOOLTIPS*/
|
||||
.tip {
|
||||
text-align: left;
|
||||
width:auto;
|
||||
max-width:500px;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-size: 11px;
|
||||
text-align:center;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,12 @@
|
|||
color:#444;
|
||||
}
|
||||
|
||||
#showcard{
|
||||
#showcard {
|
||||
width:auto;
|
||||
height:auto;
|
||||
color:#FFF;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
position:absolute;
|
||||
top:200px;
|
||||
left:10px;
|
||||
}
|
||||
#showcard .contributor { font-size:14px; }
|
||||
|
||||
|
|
@ -28,21 +25,4 @@
|
|||
height:100%;
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/*TOOLTIPS*/
|
||||
.tip {
|
||||
color: #111;
|
||||
width: 139px;
|
||||
background-color: white;
|
||||
border:1px solid #ccc;
|
||||
-moz-box-shadow:#555 2px 2px 8px;
|
||||
-webkit-box-shadow:#555 2px 2px 8px;
|
||||
-o-box-shadow:#555 2px 2px 8px;
|
||||
box-shadow:#555 2px 2px 8px;
|
||||
opacity:0.9;
|
||||
filter:alpha(opacity=90);
|
||||
font-size:12px;
|
||||
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
|
||||
padding:7px;
|
||||
}
|
||||
|
|
@ -9,9 +9,9 @@ class ItemsController < ApplicationController
|
|||
|
||||
# GET /users/:user_id/items
|
||||
def index
|
||||
@user = User.find(params[:user_id])
|
||||
@user = User.find(params[:user_id])
|
||||
|
||||
@current = current_user
|
||||
@current = current_user
|
||||
@items = Item.visibleToUser(@current, @user)
|
||||
|
||||
respond_with(@user,@items)
|
||||
|
|
@ -72,9 +72,8 @@ class ItemsController < ApplicationController
|
|||
@item.save
|
||||
end
|
||||
|
||||
@mapping = nil
|
||||
@mapping = Mapping.new()
|
||||
if params[:item][:map]
|
||||
@mapping = Mapping.new()
|
||||
@mapping.category = "Item"
|
||||
@mapping.user = @user
|
||||
@mapping.map = Map.find(params[:item][:map])
|
||||
|
|
|
|||
|
|
@ -6,16 +6,27 @@ class MainController < ApplicationController
|
|||
respond_to :html, :js, :json
|
||||
|
||||
#homepage pick a random map and show it
|
||||
def samplemap
|
||||
@current = current_user
|
||||
@maps = Map.visibleToUser(@current, nil)
|
||||
@map = @maps.sample
|
||||
def console
|
||||
|
||||
@mapjson = @map.self_as_json(@current).html_safe if @map
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@map, @user) }
|
||||
format.json { respond_with(@mapjson) }
|
||||
@current = current_user
|
||||
|
||||
if authenticated?
|
||||
@items = all_as_json(@current, @current).html_safe
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@current) }
|
||||
format.json { respond_with(@items) }
|
||||
end
|
||||
else
|
||||
@maps = Map.visibleToUser(@current, nil)
|
||||
@map = @maps.sample
|
||||
|
||||
@mapjson = @map.self_as_json(@current).html_safe if @map
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@map) }
|
||||
format.json { respond_with(@mapjson) }
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -58,9 +58,11 @@ class SynapsesController < ApplicationController
|
|||
@synapse.item1 = Item.find(params[:node1_id])
|
||||
@synapse.item2 = Item.find(params[:node2_id])
|
||||
@synapse.permission = params[:synapse][:permission]
|
||||
@synapse.user = @user
|
||||
@synapse.user = @user
|
||||
@synapse.save
|
||||
|
||||
@mapping1 = Mapping.new()
|
||||
@mapping2 = Mapping.new()
|
||||
if params[:synapse][:map]
|
||||
@mapping = Mapping.new()
|
||||
@mapping.category = "Synapse"
|
||||
|
|
@ -70,7 +72,6 @@ class SynapsesController < ApplicationController
|
|||
@mapping.save
|
||||
|
||||
if not Map.find(params[:synapse][:map]).items.include?(@synapse.item1)
|
||||
@mapping1 = Mapping.new()
|
||||
@mapping1.category = "Item"
|
||||
@mapping1.user = @user
|
||||
@mapping1.map = Map.find(params[:synapse][:map])
|
||||
|
|
@ -78,7 +79,6 @@ class SynapsesController < ApplicationController
|
|||
@mapping1.save
|
||||
end
|
||||
if not Map.find(params[:synapse][:map]).items.include?(@synapse.item2)
|
||||
@mapping2 = Mapping.new()
|
||||
@mapping2.category = "Item"
|
||||
@mapping2.user = @user
|
||||
@mapping2.map = Map.find(params[:synapse][:map])
|
||||
|
|
@ -89,7 +89,7 @@ class SynapsesController < ApplicationController
|
|||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@user, location: user_synapse_url(@user, @synapse)) }
|
||||
format.js { respond_with(@synapse) }
|
||||
format.js { respond_with(@synapse, @mapping1, @mapping2) }
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -68,11 +68,18 @@ module ItemsHelper
|
|||
end
|
||||
end
|
||||
|
||||
def all_as_json(current)
|
||||
def all_as_json(current, user)
|
||||
|
||||
# current is current user
|
||||
|
||||
Jbuilder.encode do |json|
|
||||
|
||||
@items = Item.visibleToUser(current, nil)
|
||||
@synapses = Synapse.visibleToUser(current, nil)
|
||||
if user.nil?
|
||||
@items = Item.visibleToUser(current, nil)
|
||||
@synapses = Synapse.visibleToUser(current, nil)
|
||||
else
|
||||
@items = Item.visibleToUser(current, user)
|
||||
@synapses = Synapse.visibleToUser(current, user)
|
||||
end
|
||||
|
||||
json.array!(@items) do |item|
|
||||
json.adjacencies item.synapses2.delete_if{|synapse| (not @items.include?(Item.find_by_id(synapse.node1_id))) || (not @synapses.include?(synapse))} do |json, synapse|
|
||||
|
|
|
|||
|
|
@ -1,75 +1,47 @@
|
|||
$('#new_item').fadeOut('fast');
|
||||
$('#new_item')[0].reset()
|
||||
$('#new_item')[0].reset();
|
||||
|
||||
// if there's a map, add the node to that, if its in card view add card
|
||||
map2 = document.getElementById('container');
|
||||
|
||||
if (map2 != null) {
|
||||
var newnode = <%= @item.self_as_json.html_safe %>;
|
||||
if(viewMode == "graph") {
|
||||
var newnode = <%= @item.self_as_json.html_safe %>;
|
||||
|
||||
|
||||
if (fd != null) {
|
||||
fd.graph.addNode(newnode);
|
||||
var temp = fd.graph.getNode('<%= @item.id %>');
|
||||
if (Mconsole != null) {
|
||||
Mconsole.graph.addNode(newnode);
|
||||
var temp = Mconsole.graph.getNode('<%= @item.id %>');
|
||||
temp.setData('dim', 1, 'start');
|
||||
temp.setData('dim', 40, 'end');
|
||||
<% unless (@mapping.nil?) %>
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||
<% end %>
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
fd.fx.plotNode(temp, fd.canvas);
|
||||
fd.fx.animate({
|
||||
modes: ['node-property:dim'],
|
||||
duration: 400
|
||||
});
|
||||
}
|
||||
else if (rg != null) {
|
||||
rg.graph.addNode(newnode);
|
||||
var temp = rg.graph.getNode('<%= @item.id %>');
|
||||
temp.setData('dim', 1, 'start');
|
||||
temp.setData('dim', 40, 'end');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
rg.fx.plotNode(temp, rg.canvas);
|
||||
rg.fx.animate({
|
||||
modes: ['node-property:dim'],
|
||||
duration: 400
|
||||
});
|
||||
}
|
||||
else if (map != null) {
|
||||
map.graph.addNode(newnode);
|
||||
var temp = map.graph.getNode('<%= @item.id %>');
|
||||
temp.setData('dim', 1, 'start');
|
||||
temp.setData('dim', 40, 'end');
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
map.fx.plotNode(temp, map.canvas);
|
||||
map.fx.animate({
|
||||
|
||||
if (gType == "centered") {
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
else if (gType == "arranged" || gType == "chaotic") {
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
}
|
||||
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim'],
|
||||
duration: 400
|
||||
});
|
||||
}
|
||||
else {
|
||||
json = newnode;
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
}
|
||||
console.log(temp);
|
||||
// add the new node to the synapse select lists
|
||||
$("#node1_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
|
||||
$("#node2_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
|
||||
|
||||
}
|
||||
else {
|
||||
alert('wrong!');
|
||||
$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
|
||||
$(".scroll").mCustomScrollbar();
|
||||
}
|
||||
|
||||
$(".scroll").mCustomScrollbar();
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
json = <%= @relatives %>;
|
||||
console.log(json);
|
||||
$(document).ready(function() {
|
||||
initRG();
|
||||
initialize("centered");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
|
||||
|
||||
<div class="headertop">
|
||||
<div class="headertop">
|
||||
<h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div>
|
||||
<%= form_for Item.new, :html => { :class => "find_item", :id => "find_item" } do |f| %>
|
||||
<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %>
|
||||
|
|
@ -62,12 +62,13 @@
|
|||
</ul>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<div class="wrapper" id="wrapper">
|
||||
<%= yield %>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer">
|
||||
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
|
||||
<div class="feedback"><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@
|
|||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
<div id="showcard">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
|
|
@ -30,15 +28,36 @@
|
|||
if (json.length > 0) {
|
||||
$(document).ready(function() {
|
||||
<% if (@map.arranged) %>
|
||||
initMAP();
|
||||
initialize("arranged");
|
||||
<% else %>
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
<% end %>
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<% elsif @items %>
|
||||
<div class="maps" id="container">
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
<% if authenticated? %>
|
||||
<%= render :partial => 'items/new' %>
|
||||
<%= render :partial => 'synapses/new' %>
|
||||
<% end %>
|
||||
<script>
|
||||
json = <%= @items %>;
|
||||
if (json.length > 0) {
|
||||
$(document).ready(function() {
|
||||
initialize("chaotic");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<% else %>
|
||||
<h1><br>Shucks, there are no maps.<h1>
|
||||
<% end %>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<script>
|
||||
json = <%= @alljson %>;
|
||||
$(document).ready(function() {
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
});
|
||||
</script>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -31,13 +31,14 @@
|
|||
<div class="clearfloat"></div>
|
||||
|
||||
<script>
|
||||
viewMode = "graph";
|
||||
json = <%= @mapjson %>;
|
||||
if (json.length > 0) {
|
||||
$(document).ready(function() {
|
||||
<% if (@map.arranged) %>
|
||||
initMAP();
|
||||
initialize("arranged");
|
||||
<% else %>
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
<% end %>
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,61 +6,57 @@ map1 = document.getElementById('container');
|
|||
|
||||
if (map1 != null) {
|
||||
|
||||
var mymap, newnode, temp1, temp2, temp;
|
||||
if (fd != null) {
|
||||
mymap = fd;
|
||||
}
|
||||
else if (rg != null) {
|
||||
mymap = rg;
|
||||
}
|
||||
|
||||
else if (map != null) {
|
||||
mymap = map;
|
||||
}
|
||||
var newnode, temp1, temp2, temp;
|
||||
|
||||
if (mymap == fd || mymap == rg || mymap = map) {
|
||||
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
|
||||
if ( Mconsole != null) {
|
||||
temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
|
||||
if (temp1 == null) {
|
||||
newnode = <%= @synapse.item1.self_as_json.html_safe %>;
|
||||
mymap.graph.addNode(newnode);
|
||||
temp = mymap.graph.getNode('<%= @synapse.item1.id %>');
|
||||
Mconsole.graph.addNode(newnode);
|
||||
temp = Mconsole.graph.getNode('<%= @synapse.item1.id %>');
|
||||
temp.setData('dim', 1, 'start');
|
||||
temp.setData('dim', 40, 'end');
|
||||
if (mymap == fd) {
|
||||
if (gType == "arranged" || gType == "chaotic") {
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping1.id %>');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
}
|
||||
else if (mymap == rg) {
|
||||
else if (gType == "centered") {
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
mymap.fx.plotNode(temp, mymap.canvas);
|
||||
temp1 = mymap.graph.getNode(<%= @synapse.item1.id %>);
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
|
||||
}
|
||||
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
|
||||
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
|
||||
if (temp2 == null) {
|
||||
newnode = <%= @synapse.item2.self_as_json.html_safe %>;
|
||||
mymap.graph.addNode(newnode);
|
||||
temp = mymap.graph.getNode('<%= @synapse.item2.id %>');
|
||||
Mconsole.graph.addNode(newnode);
|
||||
temp = Mconsole.graph.getNode('<%= @synapse.item2.id %>');
|
||||
temp.setData('dim', 1, 'start');
|
||||
temp.setData('dim', 40, 'end');
|
||||
if (mymap == fd) {
|
||||
if (gType == "arranged" || gType == "chaotic") {
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping2.id %>');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
}
|
||||
else if (mymap == rg) {
|
||||
else if (gType == "centered") {
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'current');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
mymap.fx.plotNode(temp, mymap.canvas);
|
||||
temp2 = mymap.graph.getNode(<%= @synapse.item2.id %>);
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
|
||||
}
|
||||
mymap.graph.addAdjacence(temp1, temp2, {});
|
||||
temp = mymap.graph.getAdjacence(temp1.id, temp2.id);
|
||||
Mconsole.graph.addAdjacence(temp1, temp2, {});
|
||||
temp = Mconsole.graph.getAdjacence(temp1.id, temp2.id);
|
||||
temp.setDataset('start', {
|
||||
lineWidth: 0.4,
|
||||
color: '#d1d1d1'
|
||||
|
|
@ -70,25 +66,23 @@ if (map1 != null) {
|
|||
color: '#36acfb'
|
||||
});
|
||||
var d = new Array(<%= @synapse.node1_id.to_s() %>, <%= @synapse.node2_id.to_s() %>);
|
||||
console.log('d=' + d);
|
||||
temp.setDataset('current', {
|
||||
desc: '<%= @synapse.desc %>',
|
||||
showDesc: false,
|
||||
category: '<%= @synapse.category %>',
|
||||
id: '<%= @synapse.id %>',
|
||||
id: '<%= @synapse.id %>',
|
||||
userid: '<%= @synapse.user.id %>',
|
||||
username: '<%= @synapse.user.name %>'
|
||||
});
|
||||
temp.data.$direction = d;
|
||||
console.log(temp);
|
||||
mymap.fx.plotLine(temp, mymap.canvas);
|
||||
mymap.fx.animate({
|
||||
Mconsole.fx.plotLine(temp, Mconsole.canvas);
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim','edge-property:lineWidth:color'],
|
||||
duration: 400
|
||||
});
|
||||
}
|
||||
else {
|
||||
json = <%= @synapse.selfplusnodes_as_json.html_safe %>
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<script>
|
||||
json = <%= @synapsesjson %>;
|
||||
$(document).ready(function() {
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
json = <%= @synapsejson %>;
|
||||
console.log(json);
|
||||
$(document).ready(function() {
|
||||
initFD();
|
||||
initialize("chaotic");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
ISSAD::Application.routes.draw do
|
||||
|
||||
root to: 'main#samplemap', via: :get
|
||||
root to: 'main#console', via: :get
|
||||
|
||||
match 'metamap', to: 'main#metamap', via: :get, as: :metamap
|
||||
match 'maps', to: 'main#allmaps', via: :get, as: :allmaps
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
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 |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue