Undo/Redo Feature

html/css/font.css

@@ -59,3 +59,9 @@
 .icon-cog:before {
 	content: "\e900";
 }
+.icon-undo:before {
+	content: "\f0e2";
+ }
+ .icon-redo:before {
+	content: "\f064";
+ }

html/index.html

@@ -45,6 +45,10 @@
                 <ul class="vertical-centered">
                     <li><button id="button-settings" class="button button--sacnite button--inverted" alt="Settings"><i class="icon-cog"></i></button></li>
                 </ul>
+                <ul class="vertical-centered">
+                    <li><button id="button-undo" class="button button--sacnite button--inverted" alt="Undo" title="Undo"><i class="icon-undo"></i></button></li>
+                    <li><button id="button-redo" class="button button--sacnite button--inverted" alt="Redo" title="Redo"><i class="icon-redo"></i></button></li>
+                </ul>
             </div>
         </div>
         <div id="canvas">
@@ -103,5 +107,8 @@
         <script src="js/tree/Tree.js"></script>
         <script src="js/tree/Node.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/undoredo/Changes.js"></script>
+        <script src="js/undoredo/Event.js"></script>
+        <script src="js/undoredo/Change.js"></script>
     </body>
 </html>

html/js/guiutils/MultiAction.js

@@ -56,46 +56,66 @@ GTE.TREE = (function(parentModule) {
                 // for the nodes in the line
                 var smallestAndLargest = this.findSmallestAndLargest();
                 // If S < L, add children to those nodes so that ALL nodes have L children now.
+                var changes = new GTE.TREE.Changes(GTE.MODES.ADD, GTE.REDO.MULTIACTIONLINE, this.nodesInLine[0]);
                 if (smallestAndLargest.smallest < smallestAndLargest.largest) {
                     for (var i = 0; i < this.nodesInLine.length; i++) {
                         while (this.nodesInLine[i].children.length < smallestAndLargest.largest) {
-                            this.nodesInLine[i].onClick();
+                            var nodesAdded = this.nodesInLine[i].onClick(false);
+                            for(var j = 0; j<nodesAdded.length; j++) {
+                                changes.addChange(GTE.MODES.ADD, nodesAdded[j]);
+                            }
                         }
                     }
                 }
                 // If L = 0, add two children to each node on the multiaction line, else
                 // If S = L, add one child to each node on the multiaction line.
                 else if (smallestAndLargest.largest === 0 || smallestAndLargest.smallest === smallestAndLargest.largest) {
                     for (var j = 0; j < this.nodesInLine.length; j++) {
-                        this.nodesInLine[j].onClick();
+                        var nodesAdded = this.nodesInLine[j].onClick(false);
+                        for(var k = 0; k<nodesAdded.length; k++) {
+                            changes.addChange(GTE.MODES.ADD, nodesAdded[k]);
+                        }
                     }
                 }
+                changes.endSetOfChanges();
                 break;
             case GTE.MODES.DELETE:
                 // if ANY of the nodes in the multiaction line have children,
                 // delete all their children but keep the node itself as part
                 // of the tree (i.e. even if some nodes are leaves already,
                 // do not delete them). otherwise (that is, ALL nodes in the
                 // multiaction line are leaves), delete all these leaves.
+                var changes = new GTE.TREE.Changes(GTE.MODES.DELETE, GTE.REDO.MULTIACTIONLINE, this.nodesInLine[0]);
                 var allLeaves = true;
                 for (var k = 0; k < this.nodesInLine.length; k++) {
                     if (this.nodesInLine[k].children.length > 0) {
                         allLeaves = false;
-                        this.nodesInLine[k].onClick();
+                        if(this.nodesInLine[k].isLeaf()) {
+                            changes.addChange(GTE.MODES.DELETE, this.nodesInLine[k]);
+                        } else {
+                            changes.addChange(GTE.MODES.PLAYER_ASSIGNMENT, this.nodesInLine[k]);
+                            changes.pushChildrenDeleted(this.nodesInLine[k]);
+                        }
+                        this.nodesInLine[k].onClick(false);
                     }
                 }
                 if (allLeaves) {
                     for (k = 0; k < this.nodesInLine.length; k++) {
-                        this.nodesInLine[k].onClick();
+                        changes.addChange(GTE.MODES.DELETE, this.nodesInLine[k]);
+                        this.nodesInLine[k].onClick(false);
                     }
                 }
+                changes.endSetOfChanges();
                 break;
             case GTE.MODES.PLAYER_ASSIGNMENT:
                 // set all nodes on the multiaction line to belong to the
                 // current player (which may be chance)
+                var changes = new GTE.TREE.Changes(GTE.MODES.PLAYER_ASSIGNMENT, GTE.REDO.MULTIACTIONLINE, this.nodesInLine[0]);
                 for (var l = 0; l < this.nodesInLine.length; l++) {
-                    this.nodesInLine[l].onClick();
+                    changes.addChange(GTE.MODES.PLAYER_ASSIGNMENT, this.nodesInLine[l]);
+                    this.nodesInLine[l].onClick(false);
                 }
+                changes.endSetOfChanges();
                 break;
             case GTE.MODES.MERGE:
                 // note that this mode button only works if every node belongs
@@ -111,15 +131,20 @@ GTE.TREE = (function(parentModule) {
                 var playerInLoop = null;
                 var numberOfChildrenInLoop = -1;
                 var isetInLoop = null;
+                var changes = new GTE.TREE.Changes(GTE.MODES.MERGE, GTE.REDO.MULTIACTIONLINE, this.nodesInLine[0]);
                 for (var m = 0; m < this.nodesInLine.length; m++) {
                     if (playerInLoop === this.nodesInLine[m].player &&
                         numberOfChildrenInLoop === this.nodesInLine[m].children.length) {
+                        changes.pushMultiactionMerge(isetInLoop, this.nodesInLine[m].iset);
                         isetInLoop = GTE.tree.merge(isetInLoop, this.nodesInLine[m].iset);
                     }
                     isetInLoop = this.nodesInLine[m].iset;
                     numberOfChildrenInLoop = this.nodesInLine[m].children.length;
                     playerInLoop = this.nodesInLine[m].player;
                 }
+                if(changes.queue.length >= 0) {
+                    changes.endSetOfChanges();
+                }
                 GTE.tree.draw();
                 break;
         }

html/js/guiutils/Tools.js

@@ -62,6 +62,9 @@ GTE.UI = (function (parentModule) {
                     // If iset tools have never been chosen
                     if (!this.isetToolsRan) {
                         // Assign singleton isets to each node with no iset
+                        var changes = new GTE.TREE.Changes(GTE.UNDO.INITIALIZEISETS);
+                        changes.pushSingletonChange(GTE.UNDO.INITIALIZEISETS);
+                        changes.endSetOfChanges();
                         GTE.tree.initializeISets();
                         this.isetToolsRan = true;
                     }
@@ -110,8 +113,13 @@ GTE.UI = (function (parentModule) {
     * Handles player buttons onclicks
     * @param {Number|String} playerId Player to be selected
     */
-    Tools.prototype.buttonPlayerHandler = function(playerId) {
+    Tools.prototype.buttonPlayerHandler = function(playerIndex) {
         return function () {
+            var player = document.getElementsByClassName("button-player")[playerIndex];
+            var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, player);
+            var playerId = player.getAttribute("player");
+            if(GTE.tools.activePlayer != playerId)
+                changes.pushButtonSwitchChange();
             GTE.tools.selectPlayer(parseInt(playerId));
         };
     };
@@ -189,6 +197,20 @@ GTE.UI = (function (parentModule) {
         }
     };
 
+    Tools.prototype.undo = function() {
+        if(GTE.UNDOQUEUE.length > 0) {
+            var evt = GTE.UNDOQUEUE.pop();
+            GTE.REDOQUEUE.push(evt.event);
+            evt.undo();
+        }
+    }
+
+    Tools.prototype.redo = function() {
+        if(GTE.REDOQUEUE.length > 0) {
+            GTE.REDOQUEUE.pop().redo();
+        }
+    }
+
     /**
     * Returns the colour correspondent to a given index. It is used to get the
     * player colour. Player id would be the same as colourIndex

html/js/main.js

@@ -80,41 +80,65 @@
     });
 
     document.getElementById("button-add").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-add"));
+        changes.pushButtonSwitchChange(GTE.MODES.ADD);
         GTE.tools.switchMode(GTE.MODES.ADD);
         return false;
     });
 
     document.getElementById("button-remove").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-remove"));
+        changes.pushButtonSwitchChange(GTE.MODES.DELETE);
         GTE.tools.switchMode(GTE.MODES.DELETE);
         return false;
     });
 
     document.getElementById("button-merge").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-merge"));
+        changes.pushButtonSwitchChange(GTE.MODES.MERGE);
         GTE.tools.switchMode(GTE.MODES.MERGE);
         return false;
     });
 
     document.getElementById("button-dissolve").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-dissolve"));
+        changes.pushButtonSwitchChange(GTE.MODES.DISSOLVE);
         GTE.tools.switchMode(GTE.MODES.DISSOLVE);
         return false;
     });
 
     var playerButtons = document.getElementsByClassName("button-player");
     for (var i = 0; i < playerButtons.length; i++) {
         playerButtons[i].addEventListener("click",
-            GTE.tools.buttonPlayerHandler(playerButtons[i].getAttribute("player")));
+            GTE.tools.buttonPlayerHandler(i));
     }
 
     document.getElementById("button-player-more").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-player-more"));
+        changes.queue.push(new GTE.TREE.Change(null, GTE.UNDO.ADDPLAYER));
+        changes.endSetOfChanges();
         GTE.tools.addPlayer();
         return false;
     });
 
     document.getElementById("button-player-less").addEventListener("click", function(){
+        var changes = new GTE.TREE.Changes(GTE.UNDO.BUTTONSWITCH, null, document.getElementById("button-player-less"));
+        changes.queue.push(new GTE.TREE.Change(null, GTE.UNDO.REMOVEPLAYER));
+        changes.endSetOfChanges();
         GTE.tools.removeLastPlayer();
         return false;
     });
 
+    document.getElementById("button-undo").addEventListener("click", function(){
+         GTE.tools.undo();
+         return false;
+    });
+
+    document.getElementById("button-redo").addEventListener("click", function(){
+         GTE.tools.redo();
+         return false;
+    });
+
     document.getElementById("button-settings").addEventListener("click", function(){
         var el = document.getElementById("settings");
         el.style.display = (el.style.display == "block") ? "none" : "block";
@@ -200,4 +224,16 @@
         settings.style.left = left + 'px';
     }
 
+    function KeyPress(e) {
+      var evtobj = window.event? event : e
+      if (evtobj.keyCode == 90 && evtobj.ctrlKey) {
+        GTE.tools.undo();
+      }
+      if (evtobj.keyCode == 89 && evtobj.ctrlKey) {
+        GTE.tools.redo();
+      }
+    }
+
+    document.onkeydown = KeyPress;
+
 }());

html/js/structure.js

@@ -93,5 +93,28 @@ var GTE = (function () {
         DEFAULT_CHANCE_NAME: "chance"
     };
 
+    GTE.UNDO = {
+      POPSELECTEDQUEUE : 5,
+      INITIALIZEISETS : 6,
+      POPISET : 7,
+      ASSIGNMOVES : 8,
+      POPMOVES : 9,
+      ASSIGNISET : 10,
+      ADDISET : 11,
+      DEINITIALIZEISETS : 12,
+      PUSHSELECTEDQUEUE : 13,
+      PUSHISET : 14,
+      BUTTONSWITCH : 15,
+      ADDPLAYER : 16,
+      REMOVEPLAYER : 17
+    };
+
+    GTE.REDO = {
+      NODE : 0,
+      ISET : 1,
+      MULTIACTIONLINE : 2
+    }
+    GTE.UNDOQUEUE = [];
+    GTE.REDOQUEUE = [];
     return GTE;
 }());

html/js/tree/ISet.js

@@ -277,60 +277,85 @@ GTE.TREE = (function (parentModule) {
     /**
     * On click function for the information set
     */
-    ISet.prototype.onClick = function () {
+    ISet.prototype.onClick = function (undo) {
         switch (GTE.MODE) {
             case GTE.MODES.ADD:
+                var changes = new GTE.TREE.Changes(GTE.MODES.ADD, GTE.REDO.ISET, this.firstNode);
                 if (this.numberOfMoves() === 0) {
                     // If no children, add two, since one child only doesn't
                     // make sense
-                    GTE.tree.addChildISetTo(this);
-                    GTE.tree.addChildISetTo(this);
+                    var iset = GTE.tree.addChildISetTo(this);
+                    changes.pushChangesAfterAddingIsets(iset);
+                    var iset = GTE.tree.addChildISetTo(this);
+                    changes.pushChangesAfterAddingIsets(iset);
                 } else {
-                    GTE.tree.addChildNodeToISet(this);
-                }// Tell the tree to redraw itself
+                    changes.pushChangesBeforeDissolving(this);
+                    var isets = GTE.tree.addChildNodeToISet(this);
+                    changes.pushChangesAfterAddingIsetsToArray(isets);
+                }
+                if(undo)
+                    changes.endSetOfChanges();
+                // Tell the tree to redraw itself
                 GTE.tree.draw();
                 break;
             case GTE.MODES.DELETE:
                 var children = this.getChildrenNodes();
+                var changes = new GTE.TREE.Changes(GTE.MODES.DELETE, GTE.REDO.ISET, this.firstNode);
                 if (children.length === 0) {
                     // Delete node
+                    changes.assignSingletonIsetDeletion(this);
                     GTE.tree.deleteNode(this.firstNode);
                 } else {
                     // Delete all children
+                    changes.assignChangesOnDeletingIset(this);
                     for (var i = 0; i < children.length; i++) {
                         // deleteNode() will delete everything below as well
                         GTE.tree.deleteNode(children[i]);
                     }
                     // Dissolve current iset
                     this.dissolve();
                 }
+                changes.endSetOfChanges();
                 // Tell the tree to redraw itself
                 GTE.tree.draw();
                 break;
             case GTE.MODES.PLAYER_ASSIGNMENT:
                 // Change the player of every node in the iset
                 var nodes = this.getNodes();
+                var changes = new GTE.TREE.Changes(GTE.MODES.PLAYER_ASSIGNMENT, GTE.REDO.ISET, this.firstNode);
                 for (var j = 0; j < nodes.length; j++) {
+                    changes.addChange(GTE.MODES.PLAYER_ASSIGNMENT, nodes[j]);
                     GTE.tree.assignSelectedPlayerToNode(nodes[j]);
                 }
+                changes.pushSingletonChange(GTE.UNDO.ASSIGNMOVES, this);
+                changes.endSetOfChanges();
                 // Reassign moves (create new moves and assign them to the
                 // children nodes as reachedBy)
                 this.reassignMoves();
                 GTE.tree.draw();
                 break;
             case GTE.MODES.MERGE:
                 if (this.getPlayer().id !== 0) {
+                    var changes = new GTE.TREE.Changes(GTE.MODES.MERGE, GTE.REDO.ISET, this.firstNode);
+                    changes.addChange(GTE.MODES.MERGE, null, this);
+                    if(GTE.tree.selected.length != 0) {
+                        changes.select = true;
+                        changes.iset = GTE.tree.selected[0];
+                    }
+                    changes.endSetOfChanges();
                     this.select();
                 }
                 break;
             case GTE.MODES.DISSOLVE:
+                var changes = new GTE.TREE.Changes(GTE.MODES.DISSOLVE, GTE.REDO.ISET, this.firstNode);
+                if(changes.pushChangesBeforeDissolving(this))
+                    changes.endSetOfChanges();
                 this.dissolve();
                 GTE.tree.draw();
                 break;
             default:
                 break;
         }
-
     };
 
     /**
@@ -362,7 +387,6 @@ GTE.TREE = (function (parentModule) {
                 this.removeNode(nodes[i]);
             }
         } else { // If there are no nodes
-            this.moves = []; //remove references to moves
             GTE.tree.deleteISetFromList(this);
         }
     };