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

437 lines
13 KiB
JavaScript
Raw Normal View History

function editEdge(edge, e) {
if (authorizeToEdit(edge)) {
//reset so we don't interfere with other edges
$('#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');
edit_div.className = 'permission canEdit';
$('.main .wrapper').append(edit_div);
populateEditEdgeForm(edge);
//drop it in the right spot, activate it
$('#edit_synapse').css('position', 'absolute');
$('#edit_synapse').css('left', e.clientX);
$('#edit_synapse').css('top', e.clientY);
//$('#edit_synapse_name').click(); //required in case name is empty
//$('#edit_synapse_name input').focus();
$('#edit_synapse').show();
}
else if ((! authorizeToEdit(edge)) && userid) {
alert("You don't have the permissions to edit this synapse.");
}
}
function populateEditEdgeForm(edge) {
add_perms_form(edge);
add_direction_form(edge);
add_name_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', 'input');
$('#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();
});
}
function add_perms_form(edge) {
//permissions - if owner, also allow permission editing
$('#edit_synapse').append('<div class="mapPerm"></div>');
$('#edit_synapse .mapPerm').html(mk_permission(edge));
if (userid == edge.getData('userid')) {
$('#edit_synapse').append('<div class="permActivator" />');
$('#edit_synapse .permActivator').append('<div class="editSettings" />');
$('#edit_synapse .editSettings').append('<span>Permissions:</span>');
$('#edit_synapse .editSettings').append('<span class="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 .editSettings').append('<div class="clearfloat" />');
$('#edit_synapse .permActivator').bind('mouseover', function() {
clearTimeout(MetamapsModel.edgePermTimer2);
that = this;
MetamapsModel.edgePermTimer1 = setTimeout(function() {
if (! MetamapsModel.edgePermSliding) {
MetamapsModel.edgePermSliding = true;
$(that).animate({
width: '203px',
height: '37px'
}, 300, function() {
MetamapsModel.edgePermSliding = false;
});
}
}, 300);
});
$('#edit_synapse .permActivator').bind('mouseout', function () {
clearTimeout(MetamapsModel.edgePermTimer1);
that = this;
MetamapsModel.edgePermTimer2 = setTimeout(function() {
if (! MetamapsModel.edgePermSliding) {
MetamapsModel.edgePermSliding = true;
$(that).animate({
height: '16px',
width: '16px'
}, 300, function() {
MetamapsModel.edgePermSliding = false;
});
}
},800);
}
);
}
}//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 best_in_place_perms(edge) {
console.log(edge);
var output =
'<span class="best_in_place best_in_place_permission" \
id="best_in_place_topic_$_id_$_permission" \
data-url="/synapses/$_id_$" \
data-object="synapse" \
data-collection=$_permission_choices_$ \
data-attribute="permission" \
data-type="select" \
data-value="$_current_$">$_perm_$</span>';
var permission_choices = "'[";
permission_choices += '["commons","commons"],';
permission_choices += '["public","public"],';
permission_choices += '["private","private"]';
permission_choices += "]'";
output = output.replace(/\$_permission_choices_\$/g, permission_choices);
output = output.replace(/\$_id_\$/g, edge.getData('id'));
output = output.replace(/\$_current_$\$/g, edge.getData('permission'));
output = output.replace(/\$_perm_\$/g, edge.getData('permission'));
return output;
}//best_in_place_perms
function deselectAllEdges() {
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
var edge = MetamapsModel.selectedEdges[i];
deselectEdge(edge);
}
}
// 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() {
for (var i = 0; i < MetamapsModel.selectedEdges.length; i += 1) {
var edge = MetamapsModel.selectedEdges[i];
hideEdge(edge);
}
MetamapsModel.selectedEdges = new Array();
}
function removeSelectedEdges() {
for (var i = 0; i < MetamapsModel.selectedEdges.length; 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() {
for (var i = 0; i < MetamapsModel.selectedEdges.length; 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;
var showDesc = edge.getData("showDesc");
if (! showDesc) {
edge.setData('showDesc', true, 'current');
2013-02-19 14:44:43 +00:00
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({
2013-01-24 04:40:06 +00:00
modes: ['edge-property:lineWidth:color:alpha'],
duration: 100
});
}
MetamapsModel.selectedEdges.push(edge);
}
function deselectEdge(edge) {
var showDesc = edge.getData("showDesc");
if (showDesc) {
edge.setData('showDesc', false, 'current');
edge.setDataset('end', {
lineWidth: 2,
2013-01-24 04:40:06 +00:00
color: '#222222',
alpha: 0.4
});
if (MetamapsModel.edgeHoveringOver == edge) {
edge.setDataset('end', {
lineWidth: 4,
2013-01-24 04:40:06 +00:00
color: '#222222',
alpha: 1
});
}
Mconsole.fx.animate({
2013-01-24 04:40:06 +00:00
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);
2013-01-25 05:47:32 +00:00
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);
Mconsole.labels.disposeLabel(nodeid);
}
function hideSelectedNodes() {
Mconsole.graph.eachNode( function (n) {
if (n.getData('whiteCircle') == true) {
2013-01-25 05:47:32 +00:00
hideNode(n.id);
}
});
}
2013-01-25 05:47:32 +00:00
function removeNode(nodeid) {
var node = Mconsole.graph.getNode(nodeid);
deselectNode(node);
2013-01-25 05:47:32 +00:00
if (mapperm) {
$.ajax({
type: "POST",
url: "/topics/" + mapid + "/" + nodeid + "/removefrommap",
});
}
}
function removeSelectedNodes() {
2013-01-25 05:47:32 +00:00
if (mapperm) {
Mconsole.graph.eachNode( function (n) {
if (n.getData('whiteCircle') == true) {
2013-01-25 05:47:32 +00:00
removeNode(n.id);
}
2013-01-25 05:47:32 +00:00
});
}
}
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,
});
}
function deleteSelectedNodes() {
Mconsole.graph.eachNode( function (n) {
if (n.getData('whiteCircle') == true) {
2013-01-25 05:47:32 +00:00
deleteNode(n.id);
}
});
}