.
This commit is contained in:
commit
5139fb849d
10 changed files with 159 additions and 35 deletions
2
Gemfile~
2
Gemfile~
|
@ -14,7 +14,7 @@ gem 'json'
|
||||||
gem 'rails3-jquery-autocomplete'
|
gem 'rails3-jquery-autocomplete'
|
||||||
gem 'best_in_place'
|
gem 'best_in_place'
|
||||||
#gem 'therubyracer' #optional
|
#gem 'therubyracer' #optional
|
||||||
#gem 'rb-readline'
|
gem 'rb-readline'
|
||||||
|
|
||||||
# Gems used only for assets and not required
|
# Gems used only for assets and not required
|
||||||
# in production environments by default.
|
# in production environments by default.
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
How to code in Metamaps
|
==How to code in Metamaps
|
||||||
|
|
||||||
Here are the important folders/files:
|
Here are the important folders/files:
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ app/assets/views/*.js.erb: Javascript that is called in response to, e.g., editi
|
||||||
Setting up the database:
|
Setting up the database:
|
||||||
|
|
||||||
1) Copy database.yml.default to database.yml
|
1) Copy database.yml.default to database.yml
|
||||||
- Then you'll need to figure out how to configure it to work with Postgresql (which you need to install - try Herokuapp's exe or app)
|
- Then you'll need to figure out how to configure it to work with Postgresql (which you need to install - try Herokuapp's exe or app)
|
||||||
2) In a terminal:
|
2) In a terminal:
|
||||||
$ rake db:create
|
$ rake db:create
|
||||||
$ rake db:migrate
|
$ rake db:migrate
|
||||||
|
@ -25,8 +25,9 @@ Setting up the database:
|
||||||
|
|
||||||
Running the server:
|
Running the server:
|
||||||
|
|
||||||
$rails s #runs the server
|
$rails s #runs the server
|
||||||
$rails c #gives you an interactive console
|
$
|
||||||
|
$rails c #gives you an interactive console
|
||||||
|
|
||||||
==Installing on Ubuntu
|
==Installing on Ubuntu
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
function selectEdgeOnClickHandler(adj, e) {
|
function selectEdgeOnClickHandler(adj, e) {
|
||||||
|
|
||||||
if (Mconsole.busy) return;
|
if (Mconsole.busy) return;
|
||||||
|
|
||||||
//editing overrides everything else
|
//editing overrides everything else
|
||||||
|
@ -29,6 +28,29 @@ function selectEdgeOnClickHandler(adj, e) {
|
||||||
}//selectEdgeOnClickHandler
|
}//selectEdgeOnClickHandler
|
||||||
|
|
||||||
function nodeDoubleClickHandler(node, e) {
|
function nodeDoubleClickHandler(node, e) {
|
||||||
|
keepFromCommons(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
function enterKeyHandler() {
|
||||||
|
var selectedNodesCopy = MetamapsModel.selectedNodes.slice(0);
|
||||||
|
var len = selectedNodesCopy.length;
|
||||||
|
for (var i = 0; i < len; i += 1) {
|
||||||
|
n = selectedNodesCopy[i];
|
||||||
|
keepFromCommons(n);
|
||||||
|
}//for
|
||||||
|
Mconsole.plot();
|
||||||
|
}//enterKeyHandler
|
||||||
|
|
||||||
|
function escKeyHandler() {
|
||||||
|
deselectAllEdges();
|
||||||
|
deselectAllNodes();
|
||||||
|
}//escKeyHandler
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Make a node "in the commons" (with a green circle) lose its
|
||||||
|
* green circle so it stays on the console/map/...
|
||||||
|
*/
|
||||||
|
function keepFromCommons(node) {
|
||||||
if (userid == null) {
|
if (userid == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -58,7 +80,6 @@ function nodeDoubleClickHandler(node, e) {
|
||||||
node.setData('mappingid', data.id);
|
node.setData('mappingid', data.id);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}//doubleClickNodeHandler
|
}//doubleClickNodeHandler
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -167,7 +188,11 @@ function onDragMoveTopicHandler(node, eventInfo, e) {
|
||||||
if ( e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
|
if ( e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
|
||||||
//if the node dragged isn't already selected, select it
|
//if the node dragged isn't already selected, select it
|
||||||
var whatToDo = handleSelectionBeforeDragging(node, e);
|
var whatToDo = handleSelectionBeforeDragging(node, e);
|
||||||
if (whatToDo == 'only-drag-this-one') {
|
if (node.pos.rho || node.pos.rho === 0) {
|
||||||
|
var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
|
||||||
|
var theta = Math.atan2(pos.y, pos.x);
|
||||||
|
node.pos.setp(theta, rho);
|
||||||
|
} else if (whatToDo == 'only-drag-this-one') {
|
||||||
node.pos.setc(pos.x, pos.y);
|
node.pos.setc(pos.x, pos.y);
|
||||||
node.setData('xloc', pos.x);
|
node.setData('xloc', pos.x);
|
||||||
node.setData('yloc', pos.y);
|
node.setData('yloc', pos.y);
|
||||||
|
@ -178,16 +203,18 @@ function onDragMoveTopicHandler(node, eventInfo, e) {
|
||||||
var xOffset = new Array();
|
var xOffset = new Array();
|
||||||
var yOffset = new Array();
|
var yOffset = new Array();
|
||||||
for (var i = 0; i < len; i += 1) {
|
for (var i = 0; i < len; i += 1) {
|
||||||
n = MetamapsModel.selectedNodes[i];
|
var n = MetamapsModel.selectedNodes[i];
|
||||||
xOffset[i] = n.getData('xloc') - node.getData('xloc');
|
xOffset[i] = n.pos.x - node.pos.x;
|
||||||
yOffset[i] = n.getData('yloc') - node.getData('yloc');
|
yOffset[i] = n.pos.y - node.pos.y;
|
||||||
}//for
|
}//for
|
||||||
|
|
||||||
for (var i = 0; i < len; i += 1) {
|
for (var i = 0; i < len; i += 1) {
|
||||||
n = MetamapsModel.selectedNodes[i];
|
var n = MetamapsModel.selectedNodes[i];
|
||||||
n.pos.setc(pos.x + xOffset[i], pos.y + yOffset[i]);
|
var x = pos.x + xOffset[i];
|
||||||
n.setData('xloc', pos.x + xOffset[i]);
|
var y = pos.y + yOffset[i];
|
||||||
n.setData('yloc', pos.y + yOffset[i]);
|
n.pos.setc(x, y);
|
||||||
|
n.setData('xloc', x);
|
||||||
|
n.setData('yloc', y);
|
||||||
}//for
|
}//for
|
||||||
}//if
|
}//if
|
||||||
|
|
||||||
|
|
|
@ -20,6 +20,10 @@ MetamapsModel.widthOfLabel = null;
|
||||||
//is the mouse hovering over an edge? which one?
|
//is the mouse hovering over an edge? which one?
|
||||||
MetamapsModel.edgeHoveringOver = false;
|
MetamapsModel.edgeHoveringOver = false;
|
||||||
|
|
||||||
|
//coordinates of shift click for using box select
|
||||||
|
MetamapsModel.boxStartCoordinates = false;
|
||||||
|
MetamapsModel.boxEndCoordinates = false;
|
||||||
|
|
||||||
//double clicking of nodes or canvas
|
//double clicking of nodes or canvas
|
||||||
MetamapsModel.lastNodeClick = 0;
|
MetamapsModel.lastNodeClick = 0;
|
||||||
MetamapsModel.lastCanvasClick = 0;
|
MetamapsModel.lastCanvasClick = 0;
|
||||||
|
|
|
@ -105,7 +105,11 @@ function graphSettings(type, embed) {
|
||||||
if (e.target.id != "infovis-canvas") return false;
|
if (e.target.id != "infovis-canvas") return false;
|
||||||
|
|
||||||
//topic and synapse editing cards
|
//topic and synapse editing cards
|
||||||
if (!Mconsole.events.moved) hideCards();
|
if (!Mconsole.events.moved && !node) {
|
||||||
|
hideCards();
|
||||||
|
deselectAllNodes();
|
||||||
|
deselectAllEdges();
|
||||||
|
}
|
||||||
|
|
||||||
//clicking on a node, or clicking on blank part of canvas?
|
//clicking on a node, or clicking on blank part of canvas?
|
||||||
if (node.nodeFrom) {
|
if (node.nodeFrom) {
|
||||||
|
@ -427,10 +431,65 @@ var nodeSettings = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function drawSelectBox(eventInfo, e) {
|
||||||
|
var ctx=Mconsole.canvas.getCtx();
|
||||||
|
|
||||||
|
var startX = MetamapsModel.boxStartCoordinates.x,
|
||||||
|
startY = MetamapsModel.boxStartCoordinates.y,
|
||||||
|
currX = eventInfo.getPos().x,
|
||||||
|
currY = eventInfo.getPos().y;
|
||||||
|
|
||||||
|
Mconsole.plot();
|
||||||
|
ctx.moveTo(startX,startY);
|
||||||
|
ctx.lineTo(startX,currY);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.lineTo(currX,currY);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.lineTo(currX,startY);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.lineTo(startX,startY);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectNodesWithBox() {
|
||||||
|
|
||||||
|
var sX = MetamapsModel.boxStartCoordinates.x,
|
||||||
|
sY = MetamapsModel.boxStartCoordinates.y,
|
||||||
|
eX = MetamapsModel.boxEndCoordinates.x,
|
||||||
|
eY = MetamapsModel.boxEndCoordinates.y;
|
||||||
|
|
||||||
|
|
||||||
|
Mconsole.graph.eachNode(function (n) {
|
||||||
|
var x = n.pos.x, y = n.pos.y;
|
||||||
|
|
||||||
|
if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
|
||||||
|
selectNode(n);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
MetamapsModel.boxStartCoordinates = false;
|
||||||
|
MetamapsModel.boxEndCoordinates = false;
|
||||||
|
Mconsole.plot();
|
||||||
|
}
|
||||||
|
|
||||||
function onMouseMoveHandler(node, eventInfo, e) {
|
function onMouseMoveHandler(node, eventInfo, e) {
|
||||||
|
|
||||||
if (Mconsole.busy) return;
|
if (Mconsole.busy) return;
|
||||||
|
|
||||||
|
if (!MetamapsModel.boxStartCoordinates && e.shiftKey) {
|
||||||
|
MetamapsModel.boxStartCoordinates = eventInfo.getPos();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (MetamapsModel.boxStartCoordinates && e.shiftKey) {
|
||||||
|
drawSelectBox(eventInfo,e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (MetamapsModel.boxStartCoordinates && !e.shiftKey) {
|
||||||
|
MetamapsModel.boxEndCoordinates = eventInfo.getPos();
|
||||||
|
Mconsole.plot();
|
||||||
|
selectNodesWithBox();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var node = eventInfo.getNode();
|
var node = eventInfo.getNode();
|
||||||
var edge = eventInfo.getEdge();
|
var edge = eventInfo.getEdge();
|
||||||
|
|
|
@ -75,6 +75,16 @@ function add_perms_form(edge) {
|
||||||
$('#edit_synapse .click-to-edit').attr('title', 'Click to Edit');
|
$('#edit_synapse .click-to-edit').attr('title', 'Click to Edit');
|
||||||
$('#edit_synapse .click-to-edit').append(best_in_place_perms(edge));
|
$('#edit_synapse .click-to-edit').append(best_in_place_perms(edge));
|
||||||
$('#edit_synapse .editSettings').append('<div class="clearfloat" />');
|
$('#edit_synapse .editSettings').append('<div class="clearfloat" />');
|
||||||
|
|
||||||
|
$('#edit_synapse').find('.best_in_place_permission').bind("ajax:success", function() {
|
||||||
|
var permission = $(this).html();
|
||||||
|
switch(permission) {
|
||||||
|
case 'commons': $('#edit_synapse .mapPerm').html('co'); break;
|
||||||
|
case 'public': $('#edit_synapse .mapPerm').html('pu'); break;
|
||||||
|
case 'private': $('#edit_synapse .mapPerm').html('pr'); break;
|
||||||
|
}//switch
|
||||||
|
});
|
||||||
|
|
||||||
$('#edit_synapse .permActivator').bind('mouseover', function() {
|
$('#edit_synapse .permActivator').bind('mouseover', function() {
|
||||||
clearTimeout(MetamapsModel.edgePermTimer2);
|
clearTimeout(MetamapsModel.edgePermTimer2);
|
||||||
that = this;
|
that = this;
|
||||||
|
@ -220,12 +230,21 @@ function best_in_place_perms(edge) {
|
||||||
}//best_in_place_perms
|
}//best_in_place_perms
|
||||||
|
|
||||||
function deselectAllEdges() {
|
function deselectAllEdges() {
|
||||||
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
|
var l = MetamapsModel.selectedEdges.length;
|
||||||
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
var edge = MetamapsModel.selectedEdges[i];
|
var edge = MetamapsModel.selectedEdges[i];
|
||||||
deselectEdge(edge);
|
deselectEdge(edge);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function deselectAllNodes() {
|
||||||
|
var l = MetamapsModel.selectedNodes.length;
|
||||||
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
|
var node = MetamapsModel.selectedNodes[i];
|
||||||
|
deselectNode(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// this is for hiding one topic from your canvas
|
// this is for hiding one topic from your canvas
|
||||||
function removeEdge(edge) {
|
function removeEdge(edge) {
|
||||||
var id = edge.getData("id");
|
var id = edge.getData("id");
|
||||||
|
@ -251,7 +270,8 @@ function hideEdge(edge) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideSelectedEdges() {
|
function hideSelectedEdges() {
|
||||||
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
|
var l = MetamapsModel.selectedEdges.length;
|
||||||
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
var edge = MetamapsModel.selectedEdges[i];
|
var edge = MetamapsModel.selectedEdges[i];
|
||||||
hideEdge(edge);
|
hideEdge(edge);
|
||||||
}
|
}
|
||||||
|
@ -259,7 +279,8 @@ function hideSelectedEdges() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSelectedEdges() {
|
function removeSelectedEdges() {
|
||||||
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
|
var l = MetamapsModel.selectedEdges.length;
|
||||||
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
if (mapid != null) {
|
if (mapid != null) {
|
||||||
var edge = MetamapsModel.selectedEdges[i];
|
var edge = MetamapsModel.selectedEdges[i];
|
||||||
var id = edge.getData("id");
|
var id = edge.getData("id");
|
||||||
|
@ -275,7 +296,8 @@ function removeSelectedEdges() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteSelectedEdges() {
|
function deleteSelectedEdges() {
|
||||||
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
|
var l = MetamapsModel.selectedEdges.length;
|
||||||
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
var edge = MetamapsModel.selectedEdges[i];
|
var edge = MetamapsModel.selectedEdges[i];
|
||||||
var id = edge.getData("id");
|
var id = edge.getData("id");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
@ -390,11 +412,11 @@ function hideNode(nodeid) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideSelectedNodes() {
|
function hideSelectedNodes() {
|
||||||
Mconsole.graph.eachNode( function (n) {
|
var l = MetamapsModel.selectedNodes.length;
|
||||||
if (n.getData('whiteCircle') == true) {
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
hideNode(n.id);
|
var node = MetamapsModel.selectedNodes[i];
|
||||||
}
|
hideNode(node.id);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeNode(nodeid) {
|
function removeNode(nodeid) {
|
||||||
|
@ -409,11 +431,11 @@ function removeNode(nodeid) {
|
||||||
}
|
}
|
||||||
function removeSelectedNodes() {
|
function removeSelectedNodes() {
|
||||||
if (mapperm) {
|
if (mapperm) {
|
||||||
Mconsole.graph.eachNode( function (n) {
|
var l = MetamapsModel.selectedNodes.length;
|
||||||
if (n.getData('whiteCircle') == true) {
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
removeNode(n.id);
|
var node = MetamapsModel.selectedNodes[i];
|
||||||
}
|
removeNode(node.id);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -428,9 +450,9 @@ function deleteNode(nodeid) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function deleteSelectedNodes() {
|
function deleteSelectedNodes() {
|
||||||
Mconsole.graph.eachNode( function (n) {
|
var l = MetamapsModel.selectedNodes.length;
|
||||||
if (n.getData('whiteCircle') == true) {
|
for (var i = l-1; i >= 0; i -= 1) {
|
||||||
deleteNode(n.id);
|
var node = MetamapsModel.selectedNodes[i];
|
||||||
}
|
deleteNode(node.id);
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -300,3 +300,11 @@ function MconsoleReset() {
|
||||||
Mconsole.canvas.scale((1/mX),(1/mY));
|
Mconsole.canvas.scale((1/mX),(1/mY));
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$('*').keypress(function(e) {
|
||||||
|
switch(e.which) {
|
||||||
|
case 13: enterKeyHandler(); break;
|
||||||
|
case 27: escKeyHandler(); break;
|
||||||
|
default: //alert(e.which); break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
#%>
|
#%>
|
||||||
<div class="headertop">
|
<div class="headertop">
|
||||||
<button onclick="hideSelectedEdges();hideSelectedNodes();">Hide Selected</button>
|
<button onclick="hideSelectedEdges();hideSelectedNodes();">Hide Selected</button>
|
||||||
|
<button onclick="enterKeyHandler();">Keep Selected</button>
|
||||||
<% if authenticated? %>
|
<% if authenticated? %>
|
||||||
<button onclick="var r=confirm('Are you sure you want to permanently delete selected objects?!'); if (r == true) {deleteSelectedEdges();deleteSelectedNodes();}">Permanently Delete Selected</button>
|
<button onclick="var r=confirm('Are you sure you want to permanently delete selected objects?!'); if (r == true) {deleteSelectedEdges();deleteSelectedNodes();}">Permanently Delete Selected</button>
|
||||||
<button onclick="saveToMap();">Save to Map</button>
|
<button onclick="saveToMap();">Save to Map</button>
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
<button onclick="if (!goRealtime) { this.innerHTML = 'Stop Realtime'; } else if (goRealtime) { this.innerHTML = 'Start Realtime'; } goRealtime = !goRealtime;">Start Realtime</button>
|
<button onclick="if (!goRealtime) { this.innerHTML = 'Stop Realtime'; } else if (goRealtime) { this.innerHTML = 'Start Realtime'; } goRealtime = !goRealtime;">Start Realtime</button>
|
||||||
<% end %>
|
<% end %>
|
||||||
<button onclick="hideSelectedEdges();hideSelectedNodes();">Hide Selected</button>
|
<button onclick="hideSelectedEdges();hideSelectedNodes();">Hide Selected</button>
|
||||||
|
<button onclick="enterKeyHandler();">Keep Selected</button>
|
||||||
<% if authenticated? %>
|
<% if authenticated? %>
|
||||||
<% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
|
<% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
|
||||||
<button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>
|
<button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
#%>
|
#%>
|
||||||
|
|
||||||
<div class="headertop">
|
<div class="headertop">
|
||||||
|
<button onclick="enterKeyPressed();">Keep Selected</button>
|
||||||
<% if authenticated? %>
|
<% if authenticated? %>
|
||||||
<button onclick="saveToMap();">Save to Map</button>
|
<button onclick="saveToMap();">Save to Map</button>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
Loading…
Reference in a new issue