restructured a lot of code to be more readable and have less duplication of code
This commit is contained in:
Connor Turland
parent
55d8a197de
commit
6296ca480f
14 changed files with 220 additions and 312 deletions
|
|
@ -43,7 +43,7 @@ function switchVisible(category, duration) {
|
|||
|
||||
function hideCategory(category, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
console.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
if (n.getData('itemcatname') == category) {
|
||||
n.setData('alpha', 0, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
|
|
@ -51,7 +51,7 @@ function hideCategory(category, duration) {
|
|||
});
|
||||
}
|
||||
});
|
||||
console.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
|
|
@ -60,7 +60,7 @@ function hideCategory(category, duration) {
|
|||
|
||||
function showCategory(category, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
console.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
if (n.getData('itemcatname') == category) {
|
||||
n.setData('alpha', 1, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
|
|
@ -68,7 +68,7 @@ function showCategory(category, duration) {
|
|||
});
|
||||
}
|
||||
});
|
||||
console.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
|
|
@ -77,13 +77,13 @@ function showCategory(category, duration) {
|
|||
|
||||
function hideAll(duration) {
|
||||
if (duration == null) duration = 500;
|
||||
console.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 0, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 0, 'end');
|
||||
});
|
||||
});
|
||||
console.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
|
|
@ -92,13 +92,13 @@ function hideAll(duration) {
|
|||
|
||||
function showAll(duration) {
|
||||
if (duration == null) duration = 500;
|
||||
console.graph.eachNode( function (n) {
|
||||
Mconsole.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 1, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 1, 'end');
|
||||
});
|
||||
});
|
||||
console.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
|
|
|
|||
|
|
@ -40,15 +40,21 @@ function graphSettings(type) {
|
|||
},
|
||||
//Add Tips
|
||||
Tips: {
|
||||
enable: true,
|
||||
enable: false,
|
||||
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>";
|
||||
|
||||
//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
|
||||
|
|
@ -66,7 +72,7 @@ function graphSettings(type) {
|
|||
onDragMove: function (node, eventInfo, e) {
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
console.plot();
|
||||
Mconsole.plot();
|
||||
},
|
||||
//Implement the same handler for touchscreens
|
||||
onTouchMove: function (node, eventInfo, e) {
|
||||
|
|
@ -77,7 +83,7 @@ function graphSettings(type) {
|
|||
onClick: function (node) {
|
||||
if (!node) return;
|
||||
//set final styles
|
||||
console.graph.eachNode(function (n) {
|
||||
Mconsole.graph.eachNode(function (n) {
|
||||
if (n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function (adj) {
|
||||
|
|
@ -102,25 +108,11 @@ function graphSettings(type) {
|
|||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
console.fx.animate({
|
||||
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 FD algorithm
|
||||
|
|
@ -131,65 +123,14 @@ function graphSettings(type) {
|
|||
// on label creation and only for DOM labels (not native canvas ones).
|
||||
onCreateLabel: function (domElement, node) {
|
||||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
var nameContainer = document.createElement('span'),
|
||||
style = nameContainer.style;
|
||||
nameContainer.className = 'name';
|
||||
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.appendChild(nameContainer);
|
||||
style.fontSize = "0.9em";
|
||||
style.color = "#222222";
|
||||
//Toggle a node selection when clicking
|
||||
//its name. This is done by animating some
|
||||
//node styles like its dimension and the color
|
||||
//and lineWidth of its adjacencies.
|
||||
nameContainer.onclick = function () {
|
||||
//set final styles
|
||||
console.graph.eachNode(function (n) {
|
||||
if (n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.4,
|
||||
color: '#222222'
|
||||
});
|
||||
adj.setData('showDesc', false, 'current');
|
||||
});
|
||||
});
|
||||
if (!node.selected) {
|
||||
node.selected = true;
|
||||
node.setData('dim', 35, 'end');
|
||||
node.eachAdjacency(function (adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#FFF'
|
||||
});
|
||||
adj.setData('showDesc', true, 'current');
|
||||
});
|
||||
} else {
|
||||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
console.fx.animate({
|
||||
modes: ['node-property:dim',
|
||||
'edge-property:lineWidth:color'],
|
||||
duration: 500
|
||||
});
|
||||
// Build the right column relations list.
|
||||
// This is done by traversing the clicked node connections.
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
||||
|
||||
//append connections information
|
||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
||||
$jit.id('item_' + node.id).innerHTML = html;
|
||||
$("#showcard .scroll").mCustomScrollbar();
|
||||
};
|
||||
// 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.
|
||||
|
|
@ -268,16 +209,16 @@ function graphSettings(type) {
|
|||
type: 'HTML',
|
||||
//Change cursor style when hovering a node
|
||||
onMouseEnter: function () {
|
||||
//rg.canvas.getElement().style.cursor = 'move';
|
||||
//Mconsole.canvas.getElement().style.cursor = 'move';
|
||||
},
|
||||
onMouseLeave: function () {
|
||||
//rg.canvas.getElement().style.cursor = '';
|
||||
//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);
|
||||
rg.plot();
|
||||
Mconsole.plot();
|
||||
},
|
||||
//Implement the same handler for touchscreens
|
||||
onTouchMove: function (node, eventInfo, e) {
|
||||
|
|
@ -288,7 +229,7 @@ function graphSettings(type) {
|
|||
onClick: function (node) {
|
||||
if (!node) return;
|
||||
//set final styles
|
||||
rg.graph.eachNode(function (n) {
|
||||
Mconsole.graph.eachNode(function (n) {
|
||||
if (n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function (adj) {
|
||||
|
|
@ -313,7 +254,7 @@ function graphSettings(type) {
|
|||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
rg.fx.animate({
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim',
|
||||
'edge-property:lineWidth:color'],
|
||||
duration: 500
|
||||
|
|
@ -334,7 +275,7 @@ function graphSettings(type) {
|
|||
$("#showcard .scroll").mCustomScrollbar();
|
||||
}
|
||||
},
|
||||
//Number of iterations for the rg algorithm
|
||||
//Number of iterations for the Mconsole algorithm
|
||||
iterations: 200,
|
||||
//Edge length
|
||||
levelDistance: 200,
|
||||
|
|
@ -345,7 +286,7 @@ function graphSettings(type) {
|
|||
// to the main node label
|
||||
domElement.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.onclick = function () {
|
||||
rg.onClick(node.id, {
|
||||
Mconsole.onClick(node.id, {
|
||||
onComplete: function () {
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
|
|
@ -379,4 +320,71 @@ function graphSettings(type) {
|
|||
}
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
var labelType, useGradients, nativeTextSupport, animate, json, console, gType;
|
||||
var labelType, useGradients, nativeTextSupport, animate, json, Mconsole, gType;
|
||||
|
||||
(function() {
|
||||
var ua = navigator.userAgent,
|
||||
|
|
@ -46,75 +46,72 @@ imgArray['Trajectory'] = new Image(); imgArray['Trajectory'].src = '/assets/traj
|
|||
imgArray['Action'] = new Image(); imgArray['Action'].src = '/assets/action.png';
|
||||
imgArray['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({
|
||||
'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);
|
||||
}
|
||||
}
|
||||
});
|
||||
$jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
|
||||
//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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$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") {
|
||||
console = new $jit.RGraph(graphSettings(type));
|
||||
// init Rgraph
|
||||
Mconsole = new $jit.RGraph(graphSettings(type));
|
||||
}
|
||||
else if ( type == "arranged" || type == "chaotic" ) {
|
||||
// init ForceDirected
|
||||
console = new $jit.ForceDirected(graphSettings(type));
|
||||
Mconsole = new $jit.ForceDirected(graphSettings(type));
|
||||
}
|
||||
else {
|
||||
alert("You didn't specify a type!");
|
||||
|
|
@ -122,7 +119,7 @@ function initialize(type){
|
|||
}
|
||||
|
||||
// load JSON data.
|
||||
console.loadJSON(json);
|
||||
Mconsole.loadJSON(json);
|
||||
|
||||
// choose how to plot and animate the data onto the screen
|
||||
var chooseAnimate;
|
||||
|
|
@ -130,11 +127,11 @@ function initialize(type){
|
|||
if ( type == "centered") {
|
||||
// compute positions incrementally and animate.
|
||||
//trigger small animation
|
||||
console.graph.eachNode(function(n) {
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
var pos = n.getPos();
|
||||
pos.setc(-200, -200);
|
||||
});
|
||||
console.compute('end');
|
||||
Mconsole.compute('end');
|
||||
|
||||
chooseAnimate = {
|
||||
modes:['polar'],
|
||||
|
|
@ -143,7 +140,7 @@ function initialize(type){
|
|||
}
|
||||
else if ( type == "arranged" ) {
|
||||
// compute positions incrementally and animate.
|
||||
console.graph.eachNode(function(n) {
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
var pos = n.getPos();
|
||||
pos.setc(0, 0);
|
||||
var newPos = new $jit.Complex();
|
||||
|
|
@ -160,7 +157,7 @@ function initialize(type){
|
|||
}
|
||||
else if ( type == "chaotic" ) {
|
||||
// compute positions incrementally and animate.
|
||||
console.compute()
|
||||
Mconsole.compute()
|
||||
|
||||
chooseAnimate = {
|
||||
modes: ['linear'],
|
||||
|
|
@ -172,10 +169,10 @@ function initialize(type){
|
|||
|
||||
$(document).ready(function() {
|
||||
if ( type == "centered") {
|
||||
console.fx.animate(chooseAnimate);
|
||||
Mconsole.fx.animate(chooseAnimate);
|
||||
}
|
||||
else if ( type == "arranged" || type == "chaotic") {
|
||||
console.animate(chooseAnimate);
|
||||
Mconsole.animate(chooseAnimate);
|
||||
}
|
||||
});
|
||||
// end
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
//= require jquery_ujs
|
||||
//= require_tree .
|
||||
|
||||
// other options are 'graph'
|
||||
var viewMode = "list";
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
|
@ -150,7 +152,6 @@
|
|||
obj = document.getElementById('container');
|
||||
|
||||
var switchAll = $(this).attr('id');
|
||||
console.log(switchAll);
|
||||
|
||||
if ( switchAll === "showAll" || switchAll === "hideAll") {
|
||||
if (switchAll == "showAll") {
|
||||
|
|
@ -226,12 +227,13 @@
|
|||
event.preventDefault();
|
||||
coor = "";
|
||||
if (gType == "arranged" || gType == "chaotic") {
|
||||
console.graph.eachNode(function(n) {
|
||||
Mconsole.graph.eachNode(function(n) {
|
||||
coor = coor + n.data.$mappingid + '/' + n.pos.x + '/' + n.pos.y + ',';
|
||||
});
|
||||
coor = coor.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;
|
||||
}
|
||||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
$('#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 (console != null) {
|
||||
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');
|
||||
|
||||
|
|
@ -18,7 +16,7 @@ if (map2 != null) {
|
|||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
else if (gType == "arranged") {
|
||||
else if (gType == "arranged" || gType == "chaotic") {
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||
|
|
@ -26,19 +24,9 @@ if (map2 != null) {
|
|||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
}
|
||||
else if (gType == "chaotic") {
|
||||
<% unless (@mapping.nil?) %>
|
||||
temp.setData('xloc',0);
|
||||
temp.setData('yloc',0);
|
||||
temp.setData('mappingid', '<%= @mapping.id %>');
|
||||
<% end %>
|
||||
temp.setPos(new $jit.Complex(0, 0), 'current');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'start');
|
||||
temp.setPos(new $jit.Complex(0, 0), 'end');
|
||||
}
|
||||
|
||||
console.fx.plotNode(temp, console.canvas);
|
||||
console.fx.animate({
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim'],
|
||||
duration: 400
|
||||
});
|
||||
|
|
@ -47,14 +35,13 @@ if (map2 != null) {
|
|||
json = newnode;
|
||||
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();
|
||||
}
|
||||
|
|
@ -20,8 +20,6 @@
|
|||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
<div id="showcard">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
|
|
@ -44,10 +42,12 @@
|
|||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
<div id="showcard">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
<% if authenticated? %>
|
||||
<%= render :partial => 'items/new' %>
|
||||
<%= render :partial => 'synapses/new' %>
|
||||
<% end %>
|
||||
<script>
|
||||
json = <%= @items %>;
|
||||
if (json.length > 0) {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
<div class="clearfloat"></div>
|
||||
|
||||
<script>
|
||||
viewMode = "graph";
|
||||
json = <%= @mapjson %>;
|
||||
if (json.length > 0) {
|
||||
$(document).ready(function() {
|
||||
|
|
|
|||
|
|
@ -8,15 +8,18 @@ if (map1 != null) {
|
|||
|
||||
var newnode, temp1, temp2, temp;
|
||||
|
||||
if ( console != null) {
|
||||
temp1 = console.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 %>;
|
||||
console.graph.addNode(newnode);
|
||||
temp = console.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 (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');
|
||||
|
|
@ -26,17 +29,20 @@ if (map1 != null) {
|
|||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
console.fx.plotNode(temp, console.canvas);
|
||||
temp1 = console.graph.getNode(<%= @synapse.item1.id %>);
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
temp1 = Mconsole.graph.getNode(<%= @synapse.item1.id %>);
|
||||
}
|
||||
temp2 = console.graph.getNode(<%= @synapse.item2.id %>);
|
||||
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
|
||||
if (temp2 == null) {
|
||||
newnode = <%= @synapse.item2.self_as_json.html_safe %>;
|
||||
console.graph.addNode(newnode);
|
||||
temp = console.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 (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');
|
||||
|
|
@ -46,11 +52,11 @@ if (map1 != null) {
|
|||
temp.setPos(new $jit.Polar(5.54, 347.6), 'start');
|
||||
temp.setPos(new $jit.Polar(5.54, 347.6), 'end');
|
||||
}
|
||||
console.fx.plotNode(temp, console.canvas);
|
||||
temp2 = console.graph.getNode(<%= @synapse.item2.id %>);
|
||||
Mconsole.fx.plotNode(temp, Mconsole.canvas);
|
||||
temp2 = Mconsole.graph.getNode(<%= @synapse.item2.id %>);
|
||||
}
|
||||
console.graph.addAdjacence(temp1, temp2, {});
|
||||
temp = console.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'
|
||||
|
|
@ -69,8 +75,8 @@ if (map1 != null) {
|
|||
username: '<%= @synapse.user.name %>'
|
||||
});
|
||||
temp.data.$direction = d;
|
||||
console.fx.plotLine(temp, console.canvas);
|
||||
console.fx.animate({
|
||||
Mconsole.fx.plotLine(temp, Mconsole.canvas);
|
||||
Mconsole.fx.animate({
|
||||
modes: ['node-property:dim','edge-property:lineWidth:color'],
|
||||
duration: 400
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
/* clear styles */
|
||||
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
|
||||
pre, form, fieldset, table, th, td, legend { margin: 0; padding: 0; }
|
||||
img {border:0; padding:0; margin:0; display:block; text-indent:-9999px;}
|
||||
|
||||
html {height:100%; }
|
||||
body { background:#031924; font-family:Arial, Helvetica, sans-serif; background-attachment:fixed; color:#FFF; height:100%; overflow:hidden;}
|
||||
|
||||
#fadeWrapper {display:none; position:absolute; z-index:2; width:100%; height:100%; background:#000; opacity:0.7; }
|
||||
|
||||
h1 {display:block; text-align:left; }
|
||||
h2 {display:block; text-align:center; background: #333; opacity:0.8; font-size:24px;}
|
||||
|
||||
a {color:#FFF; text-decoration:none;}
|
||||
.clearfloat {clear:both;}
|
||||
|
||||
|
||||
.contentarea p, .contentarea ul , .contentarea ol, .contentarea table {font-size:14px; line-height:1.55em; padding:0.5em 0}
|
||||
.contentarea ul li {padding:0.2em 0; }
|
||||
.contentarea ol li {padding:0.2em 0; }
|
||||
.contentarea ul {margin:0 0 0 1em; }
|
||||
.contentarea ol {margin:0 0 0 1.3em; }
|
||||
|
||||
.main {height:100%; }
|
||||
|
||||
.headertop { display:block; height:38px; width:100%; background:#000; opacity:0.6; }
|
||||
#mainTitle { float: left; }
|
||||
.headertop ul { display:block; float: right; }
|
||||
.headertop ul li {display:block; float:right; }
|
||||
|
||||
.wrapper {display:block; height:100%;}
|
||||
.topleft {display:block; width:50%; height:50%; float:left; }
|
||||
.topright{display:block; width:50%; height:50%; float:left; text-align:right;}
|
||||
/* background: url(../images/centerCurriculum.png) no-repeat top left; */
|
||||
.centercircle {display:none; width:350px; height:350px; position:fixed; top:50%; left:50%; margin-left:-175px; margin-top:-175px;}
|
||||
.bottomleft {display:block; width:50%; height:50%; float:left; }
|
||||
.bottomright {display:block; width:50%; height:50%; float:left; text-align:right;}
|
||||
|
||||
/* add new object page */
|
||||
ul.addNew { display:block; width:240px; margin:100px auto 0 auto; }
|
||||
ul.addNew li { display:block; width:80px; height:80px; float:left; text-align:center; margin-top:20px; }
|
||||
ul.addNew li a{ display:block; width:80px; height:80px; }
|
||||
ul.addNew li:nth-child(4) a { background: url(../images/experience.png) no-repeat center 25px; }
|
||||
ul.addNew li:nth-child(2) a { background: url(../images/question.png) no-repeat center 25px; }
|
||||
ul.addNew li:nth-child(3) a { background: url(../images/reference.png) no-repeat center 25px; }
|
||||
ul.addNew li:nth-child(6) a { background: url(../images/resource.png) no-repeat center 25px; }
|
||||
ul.addNew li:nth-child(1) a { background: url(../images/idea.png) no-repeat center 25px; }
|
||||
ul.addNew li:nth-child(5) a { background: url(../images/action.png) no-repeat center 25px; }
|
||||
|
||||
|
||||
/* main page */
|
||||
.objSelected {z-index:3; }
|
||||
.objSelected .objectImage, .objSelected .objectContent {display:block;}
|
||||
|
||||
.action, .experience, .resource, .reference, .idea, .tool, .question, .opinion {display:block; position:absolute; }
|
||||
|
||||
.objectContent {display:none;}
|
||||
.objectImage {display:none; width:50px; overflow:visible; }
|
||||
|
||||
Loading…
Reference in a new issue