metamaps--metamaps/app/assets/javascripts/Jit/graphsettings-event-handlers.js
2014-06-04 15:24:16 -04:00

625 lines
21 KiB
JavaScript

function selectEdgeOnClickHandler(adj, e) {
if (Mconsole.busy) return;
// catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
selectEdgeOnRightClickHandler(adj, e)
return;
}
if (synapseWasDoubleClicked()) {
synapseDoubleClickHandler(adj, e);
return;
}
var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(adj);
if (edgeIsSelected == -1) edgeIsSelected = false;
else if (edgeIsSelected != -1) edgeIsSelected = true;
if (edgeIsSelected && e.shiftKey) {
//deselecting an edge with shift
deselectEdge(adj);
} else if (!edgeIsSelected && e.shiftKey) {
//selecting an edge with shift
selectEdge(adj);
} else if (edgeIsSelected && !e.shiftKey) {
//deselecting an edge without shift - unselect all
deselectAllEdges();
} else if (!edgeIsSelected && !e.shiftKey) {
//selecting an edge without shift - unselect all but new one
deselectAllEdges();
selectEdge(adj);
}
Mconsole.plot();
} //selectEdgeOnClickHandler
function selectEdgeOnRightClickHandler(adj, e) {
// the 'node' variable is a JIT node, the one that was clicked on
// the 'e' variable is the click event
e.preventDefault();
e.stopPropagation();
if (Mconsole.busy) return;
selectEdge(adj);
// delete old right click menu
$('.rightclickmenu').remove();
// create new menu for clicked on node
var rightclickmenu = document.createElement("div");
rightclickmenu.className = "rightclickmenu";
// add the proper options to the menu
var menustring = '<ul>';
if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
if (mapid && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
menustring += '<li class="rc-hide">Hide until refresh</li>';
if (userid) {
var options = '<ul><li class="changeP toCommons">commons</li> \
<li class="changeP toPublic">public</li> \
<li class="changeP toPrivate">private</li> \
</ul>';
menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
}
menustring += '</ul>';
rightclickmenu.innerHTML = menustring;
// position the menu where the click happened
$(rightclickmenu).css({
left: e.clientX,
top: e.clientY
});
//add the menu to the page
$('#center-container').append(rightclickmenu);
// attach events to clicks on the list items
// delete the selected things from the database
$('.rc-delete').click(function () {
$('.rightclickmenu').remove();
var n = MetamapsModel.selectedNodes.length;
var e = MetamapsModel.selectedEdges.length;
var ntext = n == 1 ? "1 topic" : n + " topics";
var etext = e == 1 ? "1 synapse" : e + " synapses";
var text = "You have " + ntext + " and " + etext + " selected. ";
var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
if (r == true) {
deleteSelectedEdges();
deleteSelectedNodes();
}
});
// remove the selected things from the map
$('.rc-remove').click(function () {
$('.rightclickmenu').remove();
removeSelectedEdges();
removeSelectedNodes();
});
// hide selected nodes and synapses until refresh
$('.rc-hide').click(function () {
$('.rightclickmenu').remove();
hideSelectedEdges();
hideSelectedNodes();
});
// change the permission of all the selected nodes and synapses that you were the originator of
$('.rc-permission li').click(function () {
$('.rightclickmenu').remove();
// $(this).text() will be 'commons' 'public' or 'private'
updateSelectedPermissions($(this).text());
});
} //selectEdgeOnRightClickHandler
function synapseDoubleClickHandler(adj, e) {
editEdge(adj, e);
}
/*
* Returns a boolean saying if the synapse was double clicked in our understanding of the word
*/
function synapseWasDoubleClicked() {
//grab the timestamp of the click
var storedTime = MetamapsModel.lastSynapseClick;
var now = Date.now(); //not compatible with IE8 FYI
MetamapsModel.lastSynapseClick = now;
if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
return true;
} else {
return false;
}
} //synapseWasDoubleClicked;
function nodeDoubleClickHandler(node, e) {
openNodeShowcard(node);
}
function enterKeyHandler(event) {
//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(event, id) {
if (userid == null) {
return;
}
$('#topic_addSynapse').val("false");
$('#topic_x').val(0);
$('#topic_y').val(0);
$('#topic_grabTopic').val(id);
$('.new_topic').submit();
event.preventDefault();
event.stopPropagation();
return false;
} //doubleClickNodeHandler
/*
* Returns a boolean saying if the node was double clicked in our understanding of the word
*/
function nodeWasDoubleClicked() {
//grab the timestamp of the click
var storedTime = MetamapsModel.lastNodeClick;
var now = Date.now(); //not compatible with IE8 FYI
MetamapsModel.lastNodeClick = now;
if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
return true;
} else {
return false;
}
} //nodeWasDoubleClicked;
function selectNodeOnClickHandler(node, e) {
if (Mconsole.busy) return;
// catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
selectNodeOnRightClickHandler(node, e)
return;
}
var check = nodeWasDoubleClicked();
if (check) {
nodeDoubleClickHandler(node, e);
return;
} else {
// wait a certain length of time, then check again, then run this code
setTimeout(function () {
if (!nodeWasDoubleClicked()) {
if (!e.shiftKey) {
Mconsole.graph.eachNode(function (n) {
if (n.id != node.id) {
deselectNode(n);
}
});
}
if (node.selected) {
deselectNode(node);
} else {
selectNode(node);
}
//trigger animation to final styles
Mconsole.fx.animate({
modes: ['edge-property:lineWidth:color:alpha'],
duration: 500
});
Mconsole.plot();
}
}, MetamapsModel.DOUBLE_CLICK_TOLERANCE);
}
} //selectNodeOnClickHandler
function selectNodeOnRightClickHandler(node, e) {
// the 'node' variable is a JIT node, the one that was clicked on
// the 'e' variable is the click event
e.preventDefault();
e.stopPropagation();
if (Mconsole.busy) return;
selectNode(node);
// delete old right click menu
$('.rightclickmenu').remove();
// create new menu for clicked on node
var rightclickmenu = document.createElement("div");
rightclickmenu.className = "rightclickmenu";
// add the proper options to the menu
var menustring = '<ul>';
if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
if (mapid && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
menustring += '<li class="rc-hide">Hide until refresh</li>';
if (!mapid) menustring += '<li class="rc-center">Center this topic</li>';
menustring += '<li class="rc-popout">Open in new tab</li>';
if (userid) {
var options = '<ul><li class="changeP toCommons">commons</li> \
<li class="changeP toPublic">public</li> \
<li class="changeP toPrivate">private</li> \
</ul>';
menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
}
menustring += '</ul>';
rightclickmenu.innerHTML = menustring;
// position the menu where the click happened
$(rightclickmenu).css({
left: e.clientX,
top: e.clientY
});
//add the menu to the page
$('#center-container').append(rightclickmenu);
// attach events to clicks on the list items
// delete the selected things from the database
$('.rc-delete').click(function () {
$('.rightclickmenu').remove();
var n = MetamapsModel.selectedNodes.length;
var e = MetamapsModel.selectedEdges.length;
var ntext = n == 1 ? "1 topic" : n + " topics";
var etext = e == 1 ? "1 synapse" : e + " synapses";
var text = "You have " + ntext + " and " + etext + " selected. ";
var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
if (r == true) {
deleteSelectedEdges();
deleteSelectedNodes();
}
});
// remove the selected things from the map
$('.rc-remove').click(function () {
$('.rightclickmenu').remove();
removeSelectedEdges();
removeSelectedNodes();
});
// hide selected nodes and synapses until refresh
$('.rc-hide').click(function () {
$('.rightclickmenu').remove();
hideSelectedEdges();
hideSelectedNodes();
});
// when in radial, center on the topic you picked
$('.rc-center').click(function () {
$('.rightclickmenu').remove();
centerOn(node.id);
});
// open the entity in a new tab
$('.rc-popout').click(function () {
$('.rightclickmenu').remove();
var win = window.open('/topics/' + node.id, '_blank');
win.focus();
});
// change the permission of all the selected nodes and synapses that you were the originator of
$('.rc-permission li').click(function () {
$('.rightclickmenu').remove();
// $(this).text() will be 'commons' 'public' or 'private'
updateSelectedPermissions($(this).text());
});
} //selectNodeOnRightClickHandler
function canvasDoubleClickHandler(canvasLoc, e) {
//grab the location and timestamp of the click
var storedTime = MetamapsModel.lastCanvasClick;
var now = Date.now(); //not compatible with IE8 FYI
MetamapsModel.lastCanvasClick = now;
// if on a public map, disable topic creation
if (userid && (mapperm || !mapid)) {
if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
//pop up node creation :)
$('#topic_grabTopic').val("null");
$('#topic_addSynapse').val("false");
$('#new_topic').css('left', e.clientX + "px");
$('#new_topic').css('top', e.clientY + "px");
$('#topic_x').val(canvasLoc.x);
$('#topic_y').val(canvasLoc.y);
$('#new_topic').fadeIn('fast');
$('#topic_name').typeahead('setQuery', '').focus();
return;
}
}
if (!MetamapsModel.didPan) {
$('#new_topic').fadeOut('fast');
$('#new_synapse').fadeOut('fast');
$('.rightclickmenu').remove();
// reset the draw synapse positions to false
MetamapsModel.synapseStartCoord = false;
MetamapsModel.synapseEndCoord = false;
deselectAllNodes();
tempInit = false;
tempNode = null;
tempNode2 = null;
Mconsole.plot();
}
} //canvasDoubleClickHandler
function handleSelectionBeforeDragging(node, e) {
// four cases:
// 1 nothing is selected, so pretend you aren't selecting
// 2 others are selected only and shift, so additionally select this one
// 3 others are selected only, no shift: drag only this one
// 4 this node and others were selected, so drag them (just return false)
//return value: deselect node again after?
if (MetamapsModel.selectedNodes.length == 0) {
selectNode(node);
return 'deselect';
}
if (MetamapsModel.selectedNodes.indexOf(node) == -1) {
if (e.shiftKey) {
selectNode(node);
return 'nothing';
} else {
return 'only-drag-this-one';
}
}
return 'nothing'; //case 4?
}
function onDragMoveTopicHandler(node, eventInfo, e) {
if (node && !node.nodeFrom) {
$('#new_synapse').fadeOut('fast');
$('#new_topic').fadeOut('fast');
var pos = eventInfo.getPos();
var newPosComplex = new $jit.Complex(pos.x, pos.y);
// if it's a left click, or a touch, move the node
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
var whatToDo = handleSelectionBeforeDragging(node, e);
if (whatToDo == 'only-drag-this-one' || whatToDo == 'deselect') {
if (gType == "centered") {
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 {
node.setPos(newPosComplex, 'start');
node.setPos(newPosComplex, 'current');
node.setPos(newPosComplex, 'end');
node.setData('xloc', pos.x);
node.setData('yloc', pos.y);
}
} else {
var len = MetamapsModel.selectedNodes.length;
//first define offset for each node
var xOffset = new Array();
var yOffset = new Array();
for (var i = 0; i < len; i += 1) {
var n = MetamapsModel.selectedNodes[i];
if (gType == "centered") {
xOffset[i] = n.pos.toComplex().x - node.pos.toComplex().x;
yOffset[i] = n.pos.toComplex().y - node.pos.toComplex().y;
} else {
xOffset[i] = n.pos.x - node.pos.x;
yOffset[i] = n.pos.y - node.pos.y;
}
} //for
for (var i = 0; i < len; i += 1) {
var n = MetamapsModel.selectedNodes[i];
if (gType == "centered") {
var x = pos.x + xOffset[i];
var y = pos.y + yOffset[i];
var rho = Math.sqrt(x * x + y * y);
var theta = Math.atan2(y, x);
n.pos.setp(theta, rho);
} else {
newPosComplex = new $jit.Complex(pos.x + xOffset[i], pos.y + yOffset[i]);
n.setPos(newPosComplex, 'start');
n.setPos(newPosComplex, 'current');
n.setPos(newPosComplex, 'end');
n.setData('xloc', pos.x + xOffset[i]);
n.setData('yloc', pos.y + yOffset[i]);
}
} //for
} //if
if (whatToDo == 'deselect') {
deselectNode(node);
}
dragged = node.id;
Mconsole.plot();
}
// if it's a right click or holding down alt, start synapse creation ->third option is for firefox
else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && userid != null) {
// if on a public map, disable synapse creation
if (mapid && !mapperm) return;
if (tempInit == false) {
tempNode = node;
tempInit = true;
// set the draw synapse start position
MetamapsModel.synapseStartCoord = {
x: node.pos.getc().x,
y: node.pos.getc().y
};
}
//
temp = eventInfo.getNode();
if (temp != false && temp.id != node.id) { // this means a Node has been returned
tempNode2 = temp;
// set the draw synapse end position
MetamapsModel.synapseEndCoord = {
x: temp.pos.getc().x,
y: temp.pos.getc().y
};
Mconsole.plot();
// before making the highlighted one bigger, make sure all the others are regular size
Mconsole.graph.eachNode(function (n) {
n.setData('dim', 25, 'current');
});
temp.setData('dim', 35, 'current');
Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
Mconsole.fx.plotNode(temp, Mconsole.canvas);
} else if (!temp) {
tempNode2 = null;
Mconsole.graph.eachNode(function (n) {
n.setData('dim', 25, 'current');
});
//pop up node creation :)
$('#topic_grabTopic').val("null");
var myX = e.clientX - 110;
var myY = e.clientY - 30;
$('#new_topic').css('left', myX + "px");
$('#new_topic').css('top', myY + "px");
$('#new_synapse').css('left', myX + "px");
$('#new_synapse').css('top', myY + "px");
$('#topic_x').val(eventInfo.getPos().x);
$('#topic_y').val(eventInfo.getPos().y);
// set the draw synapse end position
MetamapsModel.synapseEndCoord = {
x: eventInfo.getPos().x,
y: eventInfo.getPos().y
};
Mconsole.plot();
Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
}
}
}
}
var lastDist = 0;
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
function touchPanZoomHandler(eventInfo, e) {
if (e.touches.length == 1) {
var thispos = touchPos,
currentPos = eventInfo.getPos(),
canvas = Mconsole.canvas,
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY;
currentPos.x *= sx;
currentPos.y *= sy;
currentPos.x += ox;
currentPos.y += oy;
//var x = currentPos.x - thispos.x,
// y = currentPos.y - thispos.y;
var x = currentPos.x - thispos.x,
y = currentPos.y - thispos.y;
touchPos = currentPos;
Mconsole.canvas.translate(x * 1 / sx, y * 1 / sy);
} else if (e.touches.length == 2) {
var touch1 = e.touches[0];
var touch2 = e.touches[1];
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if (!lastDist) {
lastDist = dist;
}
var scale = dist / lastDist;
console.log(scale);
if (8 >= Mconsole.canvas.scaleOffsetX * scale && Mconsole.canvas.scaleOffsetX * scale >= 1) {
Mconsole.canvas.scale(scale, scale);
}
if (Mconsole.canvas.scaleOffsetX < 0.5) {
Mconsole.canvas.viz.labels.hideLabels(true);
} else if (Mconsole.canvas.scaleOffsetX > 0.5) {
Mconsole.canvas.viz.labels.hideLabels(false);
}
lastDist = dist;
}
}
function updateSelectedPermissions(permission) {
if ($('.notice.metamaps').length == 0) {
$('body').prepend('<div class="notice metamaps" />');
}
$('.notice.metamaps').hide().html('Working...').fadeIn('fast');
// variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0,
sCount = 0;
// change the permission of the selected synapses, if logged in user is the original creator
var l = MetamapsModel.selectedEdges.length;
for (var i = l - 1; i >= 0; i -= 1) {
var edge = MetamapsModel.selectedEdges[i];
if (edge.getData('userid') == userid) {
updateSynapsePermission(edge, permission);
sCount++;
}
}
// change the permission of the selected topics, if logged in user is the original creator
var l = MetamapsModel.selectedNodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
var node = MetamapsModel.selectedNodes[i];
if (node.getData('userid') == userid) {
updateTopicPermission(node, permission);
nCount++;
}
}
var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
$('.notice.metamaps').html(nString + sString + ' you created updated to ' + permission)
setTimeout(function () {
$('.notice.metamaps').fadeOut('fast');
}, 8000);
}