Merge pull request #35 from jb-leger/redo

Redo

README.md

@@ -43,6 +43,7 @@ Result | Windows and Linux | macOS
 ------ | -------------------- | -------
 Clear the whiteboard | Ctrl + Shift + Z | Command + Shift + Z
 Undo your last step | Ctrl + Z | Command + Z
+Redo your last undo | Ctrl + Shift + Z | Command + + Shift + Z
 Select an area | Ctrl + X | Command + X
 Take the mouse | Ctrl + M | Command + M
 Take the pen | Ctrl + P | Command + P

public/index.html

@@ -54,6 +54,9 @@
 			<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
 				<i class="fa fa-undo"></i>
 			</button>
+			<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn">
+				<i class="fa fa-redo"></i>
+			</button>
 		</div>
 
 		<div class="btn-group">

public/js/keybinds.js

@@ -9,6 +9,7 @@ var keybinds = {
     // 'key(s)' : 'function',
     'defmod-shift-z' : 'clearWhiteboard',
     'defmod-z' : 'undoStep', 
+    'defmod-shift-z' : 'redoStep',
     'defmod-x' : 'setTool_recSelect',
     'defmod-m' : 'setTool_mouse',
     'defmod-p' : 'setTool_pen',

public/js/main.js

@@ -101,6 +101,7 @@ $(document).ready(function () {
     var shortcutFunctions = {
         clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
         undoStep: function () { whiteboard.undoWhiteboardClick(); },
+        redoStep: function () { whiteboard.redoWhiteboardClick(); },
         setTool_mouse: function () { $(".whiteboardTool[tool=mouse]").click(); },
         setTool_recSelect: function () { $(".whiteboardTool[tool=recSelect]").click(); },
         setTool_pen: function () {
@@ -255,6 +256,11 @@ $(document).ready(function () {
         whiteboard.undoWhiteboardClick();
     });
 
+    // redo button
+    $("#whiteboardRedoBtn").click(function () {
+        whiteboard.redoWhiteboardClick();
+    });
+
     // switch tool
     $(".whiteboardTool").click(function () {
         $(".whiteboardTool").removeClass("active");

public/js/whiteboard.js

@@ -24,7 +24,8 @@ var whiteboard = {
     svgRect: null,
     svgCirle: null,
     drawBuffer: [],
-    drawId: 0, //Used for undo function
+    undoBuffer: [],
+    drawId: 0, //Used for undo/redo functions
     imgDragActive: false,
     latestActiveTextBoxId: false, //The id of the latest clicked Textbox (for font and color change)
     pressedKeys: {},
@@ -531,6 +532,7 @@ var whiteboard = {
         _this.textContainer.empty();
         _this.sendFunction({ "t": "clear" });
         _this.drawBuffer = [];
+        _this.undoBuffer = [];
         _this.drawId = 0;
     },
     setStrokeThickness(thickness) {
@@ -687,12 +689,39 @@ var whiteboard = {
                 var drawId = _this.drawBuffer[i]["drawId"];
                 for (var i = _this.drawBuffer.length - 1; i >= 0; i--) {
                     if (_this.drawBuffer[i]["drawId"] == drawId && _this.drawBuffer[i]["username"] == username) {
+                        _this.undoBuffer.push(_this.drawBuffer[i])
                         _this.drawBuffer.splice(i, 1);
                     }
                 }
                 break;
             }
         }
+        if (_this.undoBuffer.length > 1000) {
+            _this.undoBuffer.splice(0, _this.undoBuffer.length-1000);
+        }
+        _this.canvas.height = _this.canvas.height;
+        _this.imgContainer.empty();
+        _this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
+            //Nothing to do
+        });
+    },
+    redoWhiteboard: function (username) { //Not call this directly because you will get out of sync whit others...
+        var _this = this;
+        if (!username) {
+            username = _this.settings.username;
+        }
+        for (var i = _this.undoBuffer.length - 1; i >= 0; i--) {
+            if (_this.undoBuffer[i]["username"] == username) {
+                var drawId = _this.undoBuffer[i]["drawId"];
+                for (var i = _this.undoBuffer.length - 1; i >= 0; i--) {
+                    if (_this.undoBuffer[i]["drawId"] == drawId && _this.undoBuffer[i]["username"] == username) {
+                        _this.drawBuffer.push(_this.undoBuffer[i])
+                        _this.undoBuffer.splice(i, 1);
+                    }
+                }
+                break;
+            }
+        }
         _this.canvas.height = _this.canvas.height;
         _this.imgContainer.empty();
         _this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
@@ -703,6 +732,10 @@ var whiteboard = {
         this.sendFunction({ "t": "undo" });
         this.undoWhiteboard();
     },
+    redoWhiteboardClick: function () {
+        this.sendFunction({ "t": "redo" });
+        this.redoWhiteboard();
+    },
     setTool: function (tool) {
         this.tool = tool;
         if (this.tool === "text") {
@@ -778,6 +811,7 @@ var whiteboard = {
                 _this.imgContainer.empty();
                 _this.textContainer.empty();
                 _this.drawBuffer = [];
+                _this.undoBuffer = [];
                 _this.drawId = 0;
             } else if (tool === "cursor" && _this.settings) {
                 if (content["event"] === "move") {
@@ -793,6 +827,8 @@ var whiteboard = {
                 }
             } else if (tool === "undo") {
                 _this.undoWhiteboard(username);
+            } else if (tool === "redo") {
+                _this.redoWhiteboard(username);
             }
         });