Added undo and redo in gear activity

activities/Gears.activity/css/activity.css

@@ -35,6 +35,14 @@ body {
   background-image: url(../icons/edit-clear.svg);
 }
 
+#main-toolbar #undo-button {
+	background-image: url(../icons/edit-undo.svg);
+}
+
+#main-toolbar #redo-button {
+	background-image: url(../icons/edit-redo.svg);
+}
+
 #main-toolbar #help-button {
   background-image: url(../icons/help.svg);
 }

activities/Gears.activity/index.html

@@ -25,6 +25,8 @@
       <button class="toolbutton" id="chain-button" title="Chain"></button>
       <button class="toolbutton" id="momentum-button" title="Momentum"></button>
       <button class="toolbutton play" id="play-button" title="Play"></button>
+      <button class="toolbutton" id="undo-button" data-i18n="undo" title="Undo" style="opacity: 0.4;"></button>
+      <button class="toolbutton" id="redo-button" data-i18n="redo" title="Redo" style="opacity: 0.4;"></button>
       <hr/>
       <button class="toolbutton" id="clear-button" title="Clear"></button>
       <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>

activities/Gears.activity/js/activity.js

@@ -7,7 +7,7 @@ define(["sugar-web/activity/activity","sugar-web/graphics/radiobuttonsgroup","ge
 
         // Initialize the activity.
         activity.setup();
-
+        
         var stopButton = document.getElementById("stop-button");
         stopButton.addEventListener('click', function (event) {
             console.log("writing...");
@@ -39,6 +39,97 @@ define(["sugar-web/activity/activity","sugar-web/graphics/radiobuttonsgroup","ge
         }
         datastoreObject.loadAsText(onLoaded);
 
+        // Create a redo array associated with history object of global scope  
+        window.history = {};
+        window.$h = window.history;
+        history.undo = [];
+        history.redo = [];
+
+        document.getElementById('undo-button').addEventListener('click', function(){
+            if ($h.undo.length > 0 && gearSketch.selectedButton !== "playButton") {
+                var obj = $h.undo.pop();
+                if(obj.method === "delete" || obj.method === "add"){
+                    $h.redo.push(obj);
+                    gearSketch.board.clear();
+                    // console.log($h.undo);
+                    $h.undo.map((value, ind) => {
+                        if(value.method === "add"){
+                            gearSketch.board[value.type][value.item.id] = value.item;
+                        } else if( value.method === "delete"){
+                            // Search for the item with the id and delete it
+                            for (var type in gearSketch.board) {
+                                if (gearSketch.board.hasOwnProperty(type)) {
+                                    var items = gearSketch.board[type];
+                                    for (var itemId in items) {
+                                        if (items.hasOwnProperty(itemId) && itemId === value.item.id) {
+                                            delete gearSketch.board[type][itemId];
+                                        }
+                                    }
+                                }
+                            }
+                        } 
+                    })
+                } else if(obj.method === "locationchange") {
+                    for (var type in gearSketch.board) {
+                        if (gearSketch.board.hasOwnProperty(type)) {
+                            var items = gearSketch.board[type];
+                            for (var itemId in items) {
+                                if (items.hasOwnProperty(itemId) && itemId === obj.item) {
+                                    var earlierLocation = gearSketch.board[type][itemId].location;
+                                    gearSketch.board[type][itemId].location = obj.location;
+                                    obj.location = earlierLocation;
+                                    $h.redo.push(obj);
+                                }
+                            }
+                        }
+                    }
+                } 
+                document.getElementById("redo-button").style.opacity = 1;
+            }
+            if($h.undo.length === 0) document.getElementById("undo-button").style.opacity = 0.4;
+            else document.getElementById("undo-button").style.opacity = 1;
+        })
+
+        document.getElementById('redo-button').addEventListener('click', function(){
+            if ($h.redo.length > 0 && gearSketch.selectedButton !== "playButton") {
+                var obj = $h.redo.pop();
+                if(obj.method === "delete"){
+                    $h.undo.push(obj);
+                    // Search for the item with the id and delete it
+                    for (var type in gearSketch.board) {
+                        if (gearSketch.board.hasOwnProperty(type)) {
+                            var items = gearSketch.board[type];
+                            for (var itemId in items) {
+                                if (items.hasOwnProperty(itemId) && itemId === obj.item.id) {
+                                    delete gearSketch.board[type][itemId];
+                                }
+                            }
+                        }
+                    }
+                } else if(obj.method === "add"){
+                    $h.undo.push(obj);
+                    gearSketch.board[obj.type][obj.item.id] = obj.item;
+                } else if(obj.method === "locationchange") {
+                    for (var type in gearSketch.board) {
+                        if (gearSketch.board.hasOwnProperty(type)) {
+                            var items = gearSketch.board[type];
+                            for (var itemId in items) {
+                                if (items.hasOwnProperty(itemId) && itemId === obj.item) {
+                                    var earlierLocation = gearSketch.board[type][itemId].location;
+                                    gearSketch.board[type][itemId].location = obj.location;
+                                    obj.location = earlierLocation;
+                                    $h.undo.push(obj);
+                                }
+                            }
+                        }
+                    }
+                }
+                document.getElementById("undo-button").style.opacity = 1;
+            }
+            if($h.redo.length === 0) document.getElementById("redo-button").style.opacity = 0.4;
+            else document.getElementById("redo-button").style.opacity = 1;
+        })
+
         var radioButtons;
         var gearButton = document.getElementById("gear-button");
         var chainButton = document.getElementById("chain-button");
@@ -125,7 +216,7 @@ define(["sugar-web/activity/activity","sugar-web/graphics/radiobuttonsgroup","ge
             }
             gearSketch.playDemo();
         });
-        
+
         // Full screen.
         document.getElementById("fullscreen-button").addEventListener('click', function() {
             document.getElementById("main-toolbar").style.opacity = 0;