metamaps--metamaps/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js

439 lines
14 KiB
JavaScript
Raw Normal View History

function centerOn(nodeid) {
if (!Mconsole.busy) {
var node = Mconsole.graph.getNode(nodeid);
$('div.index img').attr('src', imgArray[node.getData('metacode')].src);
$('div.index .mapName').html(node.name);
$(document).attr('title', node.name + ' | Metamaps');
window.history.pushState(node.name, "Metamaps", "/topics/" + node.id);
Mconsole.onClick(node.id, {
hideLabels: false,
duration: 1000,
onComplete: function () {
fetchRelatives(node);
}
});
}
}
function editEdge(edge, e) {
//reset so we don't interfere with other edges, but first, save its x and y
var myX = $('#edit_synapse').css('left');
var myY = $('#edit_synapse').css('top');
$('#edit_synapse').remove();
//so label is missing while editing
deselectEdge(edge);
//create the wrapper around the form elements, including permissions
//classes to make best_in_place happy
var edit_div = document.createElement('div');
edit_div.setAttribute('id', 'edit_synapse');
2014-03-02 03:02:27 +00:00
if (authorizeToEdit(edge)) {
edit_div.className = 'permission canEdit';
edit_div.className += edge.getData('userid') === userid ? ' yourEdge' : '';
2014-03-02 03:02:27 +00:00
} else {
edit_div.className = 'permission cannotEdit';
2014-03-02 03:02:27 +00:00
}
$('.main .wrapper').append(edit_div);
populateEditEdgeForm(edge);
//drop it in the right spot, activate it
$('#edit_synapse').css('position', 'absolute');
if (e) {
$('#edit_synapse').css('left', e.clientX);
$('#edit_synapse').css('top', e.clientY);
} else {
$('#edit_synapse').css('left', myX);
$('#edit_synapse').css('top', myY);
}
//$('#edit_synapse_name').click(); //required in case name is empty
//$('#edit_synapse_name input').focus();
$('#edit_synapse').show();
MetamapsModel.edgecardInUse = edge.data.$id;
}
function populateEditEdgeForm(edge) {
add_name_form(edge);
add_user_info(edge);
add_perms_form(edge);
if (authorizeToEdit(edge)) {
add_direction_form(edge);
}
}
function add_name_form(edge) {
var data_nil = '<span class="gray">Click to add description.</span>';
//name editing form
$('#edit_synapse').append('<div id="edit_synapse_name"></div>');
$('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc');
$('#edit_synapse_name').attr('data-object', 'synapse');
$('#edit_synapse_name').attr('data-attribute', 'desc');
$('#edit_synapse_name').attr('data-type', 'textarea');
$('#edit_synapse_name').attr('data-nil', data_nil);
$('#edit_synapse_name').attr('data-url', '/synapses/' + edge.getData("id"));
$('#edit_synapse_name').html(edge.getData("desc"));
//if edge data is blank or just whitespace, populate it with data_nil
if ($('#edit_synapse_name').html().trim() == '') {
$('#edit_synapse_name').html(data_nil);
}
$('#edit_synapse_name').bind("ajax:success", function () {
var desc = $(this).html();
if (desc == data_nil) {
edge.setData("desc", '');
} else {
edge.setData("desc", desc);
}
selectEdge(edge);
Mconsole.plot();
});
}
2014-03-02 03:02:27 +00:00
function add_user_info(edge) {
$('#edit_synapse').append('<div id="edgeUser" class="hoverForTip"><div class="tip">Created by ' + edge.getData("username") + '</div></div>');
2014-03-02 03:02:27 +00:00
}
function add_perms_form(edge) {
//permissions - if owner, also allow permission editing
$('#edit_synapse').append('<div class="mapPerm ' + mk_permission(edge) + '"></div>');
// ability to change permission
var selectingPermission = false;
if (userid == edge.getData('userid')) {
$('#edit_synapse.yourEdge .mapPerm').click(function () {
if (!selectingPermission) {
selectingPermission = true;
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
if ($(this).hasClass('co')) {
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
} else if ($(this).hasClass('pu')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
} else if ($(this).hasClass('pr')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
}
$('#edit_synapse .permissionSelect li').click(function (event) {
selectingPermission = false;
var permission = $(this).attr('class');
updateSynapsePermission(edge, permission);
event.stopPropagation();
});
} else {
selectingPermission = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('#edit_synapse .permissionSelect').remove();
}
});
2014-03-02 03:02:27 +00:00
}
} //add_perms_form
function add_direction_form(edge) {
//directionality checkboxes
$('#edit_synapse').append('<input type="checkbox" id="edit_synapse_left">');
$('#edit_synapse').append('<label class="left">&lt;</label>');
$('#edit_synapse').append('<input type="checkbox" id="edit_synapse_right">');
$('#edit_synapse').append('<label class="right">&gt;</label>');
//determine which node is to the left and the right
//if directly in a line, top is left
if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
var left = edge.nodeTo;
var right = edge.nodeFrom;
} else {
var left = edge.nodeFrom;
var right = edge.nodeTo;
}
/*
* One node is actually on the left onscreen. Call it left, & the other right.
* If category is from-to, and that node is first, check the 'right' checkbox.
* Else check the 'left' checkbox since the arrow is incoming.
*/
var directionCat = edge.getData('category'); //both, none, from-to
if (directionCat == 'from-to') {
var from_to = edge.getData('direction');
if (from_to[0] == left.id) {
//check left checkbox
$('#edit_synapse_left').prop('checked', true);
} else {
//check right checkbox
$('#edit_synapse_right').prop('checked', true);
}
} else if (directionCat == 'both') {
//check both checkboxes
$('#edit_synapse_left').prop('checked', true);
$('#edit_synapse_right').prop('checked', true);
}
$('#edit_synapse_left, #edit_synapse_right').click(function () {
var leftChecked = $('#edit_synapse_left').is(':checked');
var rightChecked = $('#edit_synapse_right').is(':checked');
var dir = edge.getData('direction');
var dirCat = 'none';
if (leftChecked && rightChecked) {
dirCat = 'both';
} else if (!leftChecked && rightChecked) {
dirCat = 'from-to';
dir = [right.id, left.id];
} else if (leftChecked && !rightChecked) {
dirCat = 'from-to';
dir = [left.id, right.id];
}
$.ajax({
'type': 'PUT',
'url': '/synapses/' + edge.getData('id'),
'data': {
synapse: {
category: dirCat
},
node1_id: {
node1: dir[0]
},
node2_id: {
node2: dir[1]
}
},
'success': function (data) {
updateEdgeDisplay(edge, dir, dirCat);
}
});
});
} //add_direction_form
function updateEdgeDisplay(edge, dir, dirCat) {
edge.setData('category', dirCat);
edge.setData('direction', dir);
//render mid arrow
//renderEdgeArrows(Mconsole.fx.edgeHelper, edge);
Mconsole.plot();
}
function deselectAllEdges() {
var l = MetamapsModel.selectedEdges.length;
for (var i = l - 1; i >= 0; i -= 1) {
var edge = MetamapsModel.selectedEdges[i];
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
function removeEdge(edge) {
var id = edge.getData("id");
$.ajax({
type: "DELETE",
url: "/synapses/" + id,
success: function () {
hideEdge(edge);
},
});
}
function hideEdge(edge) {
var from = edge.nodeFrom.id;
var to = edge.nodeTo.id;
edge.setData('alpha', 0, 'end');
Mconsole.fx.animate({
modes: ['edge-property:alpha'],
duration: 1000
});
Mconsole.graph.removeAdjacence(from, to);
Mconsole.plot();
}
function hideSelectedEdges() {
var l = MetamapsModel.selectedEdges.length;
for (var i = l - 1; i >= 0; i -= 1) {
var edge = MetamapsModel.selectedEdges[i];
hideEdge(edge);
}
MetamapsModel.selectedEdges = new Array();
}
function removeSelectedEdges() {
var l = MetamapsModel.selectedEdges.length;
for (var i = l - 1; i >= 0; i -= 1) {
if (mapid != null) {
var edge = MetamapsModel.selectedEdges[i];
var id = edge.getData("id");
//delete mapping of id mapid
$.ajax({
type: "POST",
url: "/synapses/" + mapid + "/" + id + "/removefrommap",
});
}
hideEdge(edge);
}
MetamapsModel.selectedEdges = new Array();
}
function deleteSelectedEdges() {
var l = MetamapsModel.selectedEdges.length;
for (var i = l - 1; i >= 0; i -= 1) {
var edge = MetamapsModel.selectedEdges[i];
var id = edge.getData("id");
$.ajax({
type: "DELETE",
url: "/synapses/" + id,
});
hideEdge(edge);
}
MetamapsModel.selectedEdges = new Array();
}
function selectNode(node) {
if (MetamapsModel.selectedNodes.indexOf(node) != -1) return;
node.selected = true;
node.setData('dim', 30, 'current');
node.setData('whiteCircle', true);
node.eachAdjacency(function (adj) {
selectEdge(adj);
});
MetamapsModel.selectedNodes.push(node);
}
function deselectNode(node) {
delete node.selected;
node.setData('whiteCircle', false);
node.eachAdjacency(function (adj) {
deselectEdge(adj);
});
node.setData('dim', 25, 'current');
//remove the node
MetamapsModel.selectedNodes.splice(
MetamapsModel.selectedNodes.indexOf(node), 1);
}
function selectEdge(edge) {
if (MetamapsModel.selectedEdges.indexOf(edge) != -1) return;
edge.setData('showDesc', true, 'current');
if (!MetamapsModel.embed) {
edge.setDataset('end', {
lineWidth: 4,
color: '#FFFFFF',
alpha: 1
});
} else if (MetamapsModel.embed) {
edge.setDataset('end', {
lineWidth: 4,
color: '#999',
alpha: 1
});
}
Mconsole.fx.animate({
modes: ['edge-property:lineWidth:color:alpha'],
duration: 100
});
MetamapsModel.selectedEdges.push(edge);
}
function deselectEdge(edge) {
edge.setData('showDesc', false, 'current');
edge.setDataset('end', {
lineWidth: 2,
color: '#222222',
alpha: 0.4
});
if (MetamapsModel.edgeHoveringOver == edge) {
edge.setData('showDesc', true, 'current');
edge.setDataset('end', {
lineWidth: 4,
color: '#222222',
alpha: 1
});
}
Mconsole.fx.animate({
modes: ['edge-property:lineWidth:color:alpha'],
duration: 100
});
//remove the edge
MetamapsModel.selectedEdges.splice(
MetamapsModel.selectedEdges.indexOf(edge), 1);
}
2013-01-25 05:47:32 +00:00
// this is for hiding one topic from your canvas
function hideNode(nodeid) {
var node = Mconsole.graph.getNode(nodeid);
if (nodeid == Mconsole.root && gType == "centered") {
alert("You can't hide this topic, it is the root of your graph.");
return;
}
deselectNode(node);
node.setData('alpha', 0, 'end');
node.eachAdjacency(function (adj) {
adj.setData('alpha', 0, 'end');
});
Mconsole.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: 1000
});
Mconsole.graph.removeNode(nodeid);
2013-01-25 05:47:32 +00:00
}
function hideSelectedNodes() {
var l = MetamapsModel.selectedNodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
var node = MetamapsModel.selectedNodes[i];
hideNode(node.id);
}
}
2013-01-25 05:47:32 +00:00
function removeNode(nodeid) {
var node = Mconsole.graph.getNode(nodeid);
deselectNode(node);
if (mapperm) {
$.ajax({
type: "POST",
url: "/topics/" + mapid + "/" + nodeid + "/removefrommap",
});
}
2013-01-25 05:47:32 +00:00
}
function removeSelectedNodes() {
if (mapperm) {
var l = MetamapsModel.selectedNodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
var node = MetamapsModel.selectedNodes[i];
removeNode(node.id);
}
}
}
2013-01-25 05:47:32 +00:00
function deleteNode(nodeid) {
if (nodeid == Mconsole.root && gType == "centered") {
alert("You can't delete this topic, it is the root of your graph.");
return;
}
$.ajax({
type: "DELETE",
url: "/topics/" + nodeid,
});
2013-01-25 05:47:32 +00:00
}
function deleteSelectedNodes() {
var l = MetamapsModel.selectedNodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
var node = MetamapsModel.selectedNodes[i];
deleteNode(node.id);
}
}