update

rolandfarkasCOM · Apr 29, 2022 · 0118efe · 0118efe
1 parent 16df158
commit 0118efe
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -24,8 +24,7 @@
         <button onclick="Addtext()"><i class="fa fa-font" aria-hidden="true"></i>
              Add Text</button>
 
-
-
+
          <span class="mdi mdi-format-text"> <button title="Draw!" id="draw"><i class="fa fa-pencil" aria-hidden="true"></i>
              Pen</button></span>
          <span class="mdi mdi-format-text"> <button title="Remove selected" id="remove"><i class="fa fa-trash" aria-hidden="true"></i>
@@ -34,6 +33,12 @@
          <button><label title="Add a background" class="myFile2"><span class="mdi mdi-image"><i class="fa fa-picture-o" aria-hidden="true"></i> Add Background</span>&nbsp;
             <input type="file" id="file" />
          </label></button>
+
+         <span class="mdi mdi-format-text"> <button title="Undo" id="undo"><i class="fa fa-undo" aria-hidden="true"></i>
+          Undo</button></span>
+          <span class="mdi mdi-format-text"> <button title="Redo" id="redo"><i class="fa fa-repeat" aria-hidden="true"></i>
+            Redo</button></span>
+
         </div>
 
     <br><br><br>

diff --git a/script.js b/script.js
@@ -217,3 +217,106 @@ document.getElementById('remove').addEventListener('click', function() {
       padding: 5
    });
 
+
+   var current;
+var list = [];
+var state = [];
+var index = 0;
+var index2 = 0;
+var action = false;
+var refresh = true;
+
+canvas.on("object:added", function (e) {
+    var object = e.target;
+    console.log('object:modified');
+
+    if (action === true) {
+        state = [state[index2]];
+        list = [list[index2]];
+
+        action = false;
+        console.log(state);
+        index = 1;
+    }
+    object.saveState();
+
+    console.log(object.originalState);
+    state[index] = JSON.stringify(object.originalState);
+    list[index] = object;
+    index++;
+    index2 = index - 1;
+
+    refresh = true;
+});
+
+canvas.on("object:modified", function (e) {
+    var object = e.target;
+    console.log('object:modified');
+
+    if (action === true) {
+        state = [state[index2]];
+        list = [list[index2]];
+
+        action = false;
+        console.log(state);
+        index = 1;
+    }
+
+    object.saveState();
+
+    state[index] = JSON.stringify(object.originalState);
+    list[index] = object;
+    index++;
+    index2 = index - 1;
+
+    console.log(state);
+    refresh = true;
+});
+
+function undo() {
+
+    if (index <= 0) {
+        index = 0;
+        return;
+    }
+
+    if (refresh === true) {
+        index--;
+        refresh = false;
+    }
+
+    console.log('undo');
+
+    index2 = index - 1;
+    current = list[index2];
+    current.setOptions(JSON.parse(state[index2]));
+
+    index--;
+    current.setCoords();
+    canvas.renderAll();
+    action = true;
+}
+
+function redo() {
+
+    action = true;
+    if (index >= state.length - 1) {
+        return;
+    }
+
+    console.log('redo');
+
+    index2 = index + 1;
+    current = list[index2];
+    current.setOptions(JSON.parse(state[index2]));
+
+    index++;
+    current.setCoords();
+    canvas.renderAll();
+}
+document.getElementById('undo').addEventListener('click', function() {
+    undo();
+});
+document.getElementById('redo').addEventListener('click', function() {
+    redo();
+});