finished redo and undo implementation

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

@@ -9,6 +9,7 @@
             "toggle": "isDrawingMode",
             "hasToggleElement": false,
             "toggleElement": "",
+            "disabled": false,
             "icon": "glyphicon-pencil"
         },
         {
@@ -20,6 +21,7 @@
             "toggle": "isHighlightMode",
             "hasToggleElement": false,
             "toggleElement": "",
+            "disabled": false,
             "icon": "glyphicon-pencil"
         },
 
@@ -32,6 +34,7 @@
           "toggle": "emojiMode",
           "hasToggleElement": true,
           "toggleElement": "emojiContainer",
+          "disabled": false,
           "icon": "glyphicon-ice-lolly-tasted"
         },
         {
@@ -43,6 +46,7 @@
             "toggle": "drawRectangleMode",
             "hasToggleElement": false,
             "toggleElement": "",
+          "disabled": false,
             "icon": "glyphicon-stop"
         },
       {
@@ -54,6 +58,7 @@
         "toggle": "",
         "hasToggleElement": false,
         "toggleElement": "",
+        "disabled": false,
         "icon": "glyphicon-text-height"
       },
         {
@@ -65,6 +70,7 @@
             "toggle": "moveMode",
             "hasToggleElement": false,
             "toggleElement": "",
+          "disabled": false,
             "icon": "glyphicon-move"
         },
         {
@@ -76,6 +82,7 @@
             "toggle": "",
             "hasToggleElement": false,
             "toggleElement": "",
+          "disabled": false,
             "icon": "glyphicon-trash"
         },
         {
@@ -87,6 +94,7 @@
           "toggle": "isZoomMode",
           "hasToggleElement": false,
           "toggleElement": "",
+          "disabled": false,
           "icon": "glyphicon-search"
         },
       {
@@ -98,6 +106,7 @@
         "toggle": "isMouseMode",
         "hasToggleElement": false,
         "toggleElement": "",
+        "disabled": false,
         "icon": "glyphicon-hand-up"
       },
       {
@@ -109,7 +118,8 @@
         "toggle": "",
         "hasToggleElement": false,
         "toggleElement": "",
-        "icon": "glyphicon-repeat"
+        "disabled": true,
+        "icon": "glyphicon-repeat icon-flipped"
       },
       {
         "name": "redo",
@@ -120,6 +130,7 @@
         "toggle": "",
         "hasToggleElement": false,
         "toggleElement": "",
+        "disabled": true,
         "icon": "glyphicon-repeat"
       }
 

javascript/src/Plugins/qfq.fabric.js

@@ -65,6 +65,7 @@ $(function (n) {
         this.imageOutput = '';
         this.localStore = new n.LocalStorage("fabric");
         this.history = new n.History();
+        this.firstLoad = false;
 
         // Handles button states and generation of said buttons. Should be renamed.
         function ModeSettings() {
@@ -112,6 +113,7 @@ $(function (n) {
                 $button.on("click", function() {
                     that.qFabric.buttonPress(modePressed, $button)
                 });
+                $button.prop("disabled", o.disabled);
             });
             $controlWrapper.append($buttonGroup);
 
@@ -321,7 +323,9 @@ $(function (n) {
         this.generateCanvas(width, height);
         if (this.outputField.val()) {
             var fabricJSON = this.prepareJSON(this.outputField.val());
+            this.history.put(fabricJSON);
             this.canvas.loadFromJSON(fabricJSON, function() {
+                this.firstLoad = true;
                 that.setBackground();
                 that.resizeCanvas();
                 that.setBrush();
@@ -333,12 +337,12 @@ $(function (n) {
             that.setBrush();
             that.canvas.renderAll();
             that.userChangePossible = true;
+            this.history.put(this.canvas.toJSON());
         }
         var defaultColor = $fabricElement.data('fabric-color') || false;
         if (defaultColor) {
             this.setColor(defaultColor);
         }
-        this.history.put(this.canvas.toJSON());
     };
 
     n.Fabric.prototype.prepareJSON = function (jsonString) {
@@ -538,6 +542,7 @@ $(function (n) {
             this.setBackground();
             this.canvas.renderAll();
         }
+
     };
 
     n.Fabric.prototype.zoomCanvas = function(o, zoomCalc) {
@@ -566,7 +571,10 @@ $(function (n) {
                      centeredScaling: true,
                      centeredRotation: true
                  });
-                 that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
+                 that.canvas.setBackgroundImage(img, function() {
+                     that.canvas.renderAll.bind(that.canvas);
+                     that.canvas.renderAll();
+                 });
              });
         } else {
             var $image = document.getElementsByClassName("qfq-fabric-image")[0];
@@ -582,9 +590,12 @@ $(function (n) {
                     centeredRotation: true
                 });
                 img.rotate(that.rotation);
-                that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
-                that.canvas.renderAll();
+                that.canvas.setBackgroundImage(img, function() {
+                    that.canvas.renderAll.bind(that.canvas);
+                    that.canvas.renderAll();
+                });
             };
+            that.canvas.renderAll();
 
         }
     };
@@ -1012,6 +1023,7 @@ $(function (n) {
             this.changeHistory = false;
             var that = this;
             this.canvas.loadFromJSON(state, function() {
+                that.setBackground();
                 that.canvas.renderAll();
                 that.changeHistory = true;
             });
@@ -1045,12 +1057,13 @@ $(function (n) {
 
     n.Fabric.prototype.defaultChangeHandler = function () {
         /* Important! Changes only possible after initialisation */
+
         if (this.userChangePossible) {
-            var that = this;
             if (this.changeHistory) {
                 this.history.put(this.canvas.toJSON());
                 this.updateHistoryButtons();
             }
+            var that = this;
             this.outputField.val(JSON.stringify(that.canvas.toJSON()));
             if (this.qfqPage.qfqForm) {
                 this.qfqPage.qfqForm.eventEmitter.emitEvent('form.changed', n.EventEmitter.makePayload(that, null));