Commit 05b1be1a authored by Katie Frey's avatar Katie Frey

undo history, undo/redo buttons

parent 532484c4
......@@ -76,10 +76,36 @@ html {
overflow-y: hidden;
}
#hidebutton, #arrowd, #treeoptions, #feedback {
#hidebutton, #arrowd, #treeoptions, #feedback, #history {
display: none;
}
#history {
/*float:right;
width:100px;
z-index: 10;
background-color: green;*/
z-index: 10;
width: auto;
height: auto;
max-height: 100%;
max-width: 380px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 25px;
background-color: rgba(255,255,255, 0.7);
padding: 20px 10px;
/*bottom: 5px;
right: 5px;*/
overflow-y: auto;
}
#undohistory, #redohistory {
font-size: 0.875em;
}
#feedback, #menu {
border-radius: 25px;
background-color: rgba(255,255,255, 0.7);
......
This diff is collapsed.
......@@ -5,6 +5,16 @@ function renderTree(j){
treeJSON = d3.json(j, function(error, treeData) {
var nodenames = {};
$("#undobutton").unbind();
$("#redobutton").unbind();
clear_history("undo");
clear_history("redo");
undo_list = [];
redo_list = [];
var changenum = 1;
//if i'm sending an actual json string instead of a file....
if(typeof treeData == 'undefined') {
treeData = j;
......@@ -291,7 +301,9 @@ treeJSON = d3.json(j, function(error, treeData) {
newparents = foundNodes
setupbackbutton(oldparent,newparents,draggingNode);
//setupbackbutton(oldparent,newparents,draggingNode);
add_to_history("undo",oldparent,newparents,draggingNode);
clear_history("redo");
endDrag();
} else {
endDrag();
......@@ -325,7 +337,7 @@ treeJSON = d3.json(j, function(error, treeData) {
function endDrag() {
console.log("End drag");
//console.log("End drag");
d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
d3.select(domNode).attr('class', 'node');
// now restore the mouseover event or we won't be able to drag a 2nd time
......@@ -335,12 +347,6 @@ treeJSON = d3.json(j, function(error, treeData) {
collapse(draggingNode); //< --- collapse the node in question at all times when dropped.
update(selectedNode);
console.log("boo");
console.log("domNode");
console.log(domNode);
console.log("draggingNode");
console.log(draggingNode);
//centerNode(draggingNode);
draggingNode = null;
}
......@@ -366,12 +372,12 @@ treeJSON = d3.json(j, function(error, treeData) {
}
var overCircle = function(d) {
console.log("overCircle " + d.name);
//console.log("overCircle " + d.name);
selectedNode = d;
updateTempConnector();
};
var outCircle = function(d) {
console.log("outCircle " + d.name);
//console.log("outCircle " + d.name);
selectedNode = null;
updateTempConnector();
......@@ -735,40 +741,116 @@ treeJSON = d3.json(j, function(error, treeData) {
}
};
function setupbackbutton(oldparent, newparents, newchild){
$("#undolast").remove();
function clear_history(historytype){
$("#"+historytype+"history").empty();
}
var undobutton = $("<input>")
.attr("type","button")
.val("Undo last")
.attr("id","undolast");
$("#undoloc").append(undobutton);
$("#undolast").on("click", function(){
for (x in newparents){
function add_to_history(historytype, oldparent, newparents, newchild){
change = {
"oldparent" : oldparent,
"newparents" : newparents,
"newchild" : newchild,
"changenum" : changenum
}
if (historytype == "undo") {
undo_list.push(change);
} else {
redo_list.push(change);
}
var desc = changenum+": "+newchild["name"]+" moved from "+oldparent["name"]+" to "+newparents[0]["name"]+"</br>";
var childs = newparents[x]["children"];
for (y in childs){
if (childs[y]["name"] == newchild["name"]){
childs.splice(y,1);
var historyitem = $("<span></span>")
.attr("id",historytype+"num"+changenum)
.html(desc);
$("#"+historytype+"history").append(historyitem);
changenum++;
}
$("#undobutton").on("click", function(){
try {
var item = undo_list.slice(-1)
undo_list.pop();
newparents = item[0]["newparents"];
newchild = item[0]["newchild"];
oldparent = item[0]["oldparent"];
changenum = item[0]["changenum"];
for (x in newparents){
var childs = newparents[x]["children"];
for (y in childs){
if (childs[y]["name"] == newchild["name"]){
childs.splice(y,1);
}
}
}
foundNodes = [];
searchTree(root,oldparent.name,foundNodes);
foundNodes.forEach(function(oldparent){
appendNode(oldparent,newchild);
});
$("#undonum"+changenum).remove();
add_to_history("redo", oldparent, newparents, newchild);
update(oldparent);
endDrag();
}
catch(err) {
console.log(err);
}
});
$("#redobutton").on("click", function(){
try {
var item = redo_list.slice(-1)[0]
redo_list.pop();
newparents = item["newparents"];
newchild = item["newchild"];
oldparent = item["oldparent"];
changenum = item["changenum"];
for (x in oldparent["children"]){
if (oldparent["children"][x]["name"] == newchild["name"]){
oldparent["children"].splice(x,1);
}
}
foundNodes = [];
searchTree(root,oldparent.name,foundNodes);
foundNodes.forEach(function(oldparent){
appendNode(oldparent,newchild);
var newp = newparents[0]
searchTree(root,newp.name,foundNodes);
foundNodes.forEach(function(newparents){
appendNode(newparents,newchild);
});
$("#redonum"+changenum).remove();
add_to_history("undo", oldparent, newparents, newchild);
update(oldparent);
endDrag();
}
catch(err) {
console.log(err);
}
$("#undolast").remove();
});
}
});
function appendNode(selectedNode, appNode){
var children = (selectedNode.children) ? selectedNode.children : selectedNode._children;
......
......@@ -194,6 +194,7 @@
//$("#feedback").hide();
$("#treeoptions").show();
$("#arrowd").show();
$("#history").show();
});
......@@ -246,6 +247,10 @@
});
})(jQuery);
//function to store new card info into browser localStorage
......
......@@ -78,8 +78,10 @@
<br /><hr>
<input type="button" value="Expand all" id="fullex"/>
<input type="button" value="Collapse all" id="fullcollapse"/>
<div id="undoloc"></div>
<br/>
<br/><br/>
<input type="button" value="Undo" id="undobutton" />
<input type="button" value="Redo" id="redobutton" />
<br/><br/>
Add Concept: <br />
<input type="text" id="newnode" /><input type="button" value="Add Node" id="add_node" />
......@@ -131,12 +133,28 @@
</div>
</div>
<div id="main">
<div id="history">
<strong>History of Changes</strong>
<br>
UNDO
<br/>
<div id="undohistory"></div>
<hr/>
REDO
<br/>
<div id="redohistory"></div>
</div>
<div id="tree-container">
<div id="instructions">
<span style="font-size: x-large;">
<br />
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment