redo and undo implemented in fabric

extension/Resources/Public/Json/fabric.buttons.json

@@ -99,7 +99,30 @@
         "hasToggleElement": false,
         "toggleElement": "",
         "icon": "glyphicon-hand-up"
+      },
+      {
+        "name": "undo",
+        "selector": "undo",
+        "requiresDrawing": false,
+        "requiresSelection": false,
+        "isToggle": false,
+        "toggle": "",
+        "hasToggleElement": false,
+        "toggleElement": "",
+        "icon": "glyphicon-repeat"
+      },
+      {
+        "name": "redo",
+        "selector": "redo",
+        "requiresDrawing": false,
+        "requiresSelection": false,
+        "isToggle": false,
+        "toggle": "",
+        "hasToggleElement": false,
+        "toggleElement": "",
+        "icon": "glyphicon-repeat"
       }
+
     ],
     "currentMode": "draw",
   "colors": [

javascript/src/History.js

@@ -24,16 +24,24 @@ var QfqNS = QfqNS || {};
     };
 
     n.History.prototype.put = function(object) {
-        if (this.pointerAtCurrent()) {
-            this._removeForwardHistory();
+        if (this.history.length > 1) {
+            if (this.canGoForward()) {
+                console.log("trying to remove history");
+                this._removeForwardHistory();
+            }
         }
-        this.history.push(object);
-        this.pointer = this.history.length - 1;
+        if (JSON.stringify(this.history[this.pointer]) !== JSON.stringify(object)) {
+            this.history.push(object);
+            this.pointer = this.history.length - 1;
+        }
+        console.log(this);
     };
 
     n.History.prototype.back = function() {
         if (this.canGoBack()) {
-            this.pointer--;
+            this.pointer = this.pointer - 1;
+            console.log(this.pointer + "/" + this.history.length);
+            console.log(this.history);
             return this.history[this.pointer];
         } else {
             console.log("At the beginning of history");
@@ -42,8 +50,9 @@ var QfqNS = QfqNS || {};
     };
 
     n.History.prototype.forward = function() {
+        console.log(this.pointer);
         if (this.canGoForward()) {
-            this.pointer++;
+            this.pointer = this.pointer + 1;
             return this.history[this.pointer];
         } else {
             console.log("At the end of history");
@@ -59,16 +68,8 @@ var QfqNS = QfqNS || {};
         return this.pointer < this.history.length - 1;
     };
 
-    n.History.prototype.pointerAtCurrent = function() {
-        return this.pointer === this.history.length - 1;
-    };
-
     n.History.prototype._removeForwardHistory = function() {
-        var tempPointer = this.history.length - 1;
-        while (tempPointer > this.pointer && this.history.length > 0) {
-            this.history.pop();
-            tempPointer--;
-        }
+        this.history.splice(this.pointer + 1, this.history.length - this.pointer);
     };
 
 

javascript/src/Plugins/qfq.fabric.js

@@ -26,6 +26,7 @@ $(function (n) {
         this.emojiContainer = {};
         this.eventEmitter = new EventEmitter();
         this.qfqPage = {};
+        this.changeHistory = true;
         this.scaled = false;
         this.textContainer = {};
         this.userTextInput = {};
@@ -187,6 +188,11 @@ $(function (n) {
             }
         };
 
+        ModeSettings.prototype.disableButton = function(id, bool) {
+            var $button = this.getButtonById(id);
+            $button.prop("disabled",bool);
+        };
+
         ModeSettings.prototype.getModeByName = function (string) {
             $.each(this.myModes.modes, function(i, o) {
                 if (o.name === string) {
@@ -332,6 +338,7 @@ $(function (n) {
         if (defaultColor) {
             this.setColor(defaultColor);
         }
+        this.history.put(this.canvas.toJSON());
     };
 
     n.Fabric.prototype.prepareJSON = function (jsonString) {
@@ -844,6 +851,12 @@ $(function (n) {
             case "exportImage":
                 this.prepareForExport();
                 break;
+            case "undo":
+                this.changeState("undo");
+                break;
+            case "redo":
+                this.changeState("redo");
+                break;
             default:
                 console.error("unrecognized mode");
         }
@@ -981,6 +994,37 @@ $(function (n) {
         this.setBrush();
     };
 
+    /**
+     * Calls state from attached history and moves in defined
+     * direction. (undo / redo)
+     * @param direction string, undo or redo
+     */
+    n.Fabric.prototype.changeState = function(direction) {
+        var state = {};
+        console.log(direction);
+        if (direction === "undo") {
+            state = this.history.back();
+        } else {
+            state = this.history.forward();
+        }
+
+        if (state) {
+            this.changeHistory = false;
+            var that = this;
+            this.canvas.loadFromJSON(state, function() {
+                that.canvas.renderAll();
+                that.changeHistory = true;
+            });
+        }
+        this.updateHistoryButtons();
+    };
+
+    n.Fabric.prototype.updateHistoryButtons = function() {
+        this.modeSettings.disableButton("undo", !this.history.canGoBack());
+        this.modeSettings.disableButton("redo", !this.history.canGoForward());
+    };
+
+
     n.Fabric.prototype.rectangle = function() {
         this.drawRectangleMode = true;
     };
@@ -1003,6 +1047,10 @@ $(function (n) {
         /* Important! Changes only possible after initialisation */
         if (this.userChangePossible) {
             var that = this;
+            if (this.changeHistory) {
+                this.history.put(this.canvas.toJSON());
+                this.updateHistoryButtons();
+            }
             this.outputField.val(JSON.stringify(that.canvas.toJSON()));
             if (this.qfqPage.qfqForm) {
                 this.qfqPage.qfqForm.eventEmitter.emitEvent('form.changed', n.EventEmitter.makePayload(that, null));

mockup/mockData/fabric.buttons.json

@@ -89,8 +89,18 @@
             "icon": "glyphicon-trash"
         },
       {
-        "name": "rotateRight",
-        "selector": "turn-right",
+        "name": "undo",
+        "selector": "undo",
+        "requiresDrawing": false,
+        "requiresSelection": false,
+        "isToggle": false,
+        "toggle": "",
+        "hasToggleElement": false,
+        "toggleElement": "",
+        "icon": "glyphicon-repeat"
+      }, {
+        "name": "redo",
+        "selector": "redo",
         "requiresDrawing": false,
         "requiresSelection": false,
         "isToggle": false,