From 46f2e1eb616a51d56771763784952f911e4142a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 13:46:53 +0200
Subject: [PATCH 1/6] Started development on history integration Switched
 TextBox from using mutations for setting the content to actions for injecting
 history manipulation properly

---
 core/src/components/objects/TextBox.vue |  2 +-
 core/src/vuex/vuex.js                   | 56 ++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/core/src/components/objects/TextBox.vue b/core/src/components/objects/TextBox.vue
index 842a3c25..01ed6645 100644
--- a/core/src/components/objects/TextBox.vue
+++ b/core/src/components/objects/TextBox.vue
@@ -45,7 +45,7 @@ export default {
 		},
 		content: {
 			set(content) {
-				this.$store.commit("setTextBoxContent", { id: this.id, content }, {module: "core" });
+				this.$store.dispatch("setTextBoxContent", { id: this.id, content, ignoreHistory: false });
 			},
 			get() {
 				return this.textBox.content;
diff --git a/core/src/vuex/vuex.js b/core/src/vuex/vuex.js
index 1c400aad..5e7e030b 100644
--- a/core/src/vuex/vuex.js
+++ b/core/src/vuex/vuex.js
@@ -35,6 +35,15 @@ export default {
 			scrollOffsetY: 0,
 			scale: 1,
 		},
+		historyStep: 0,
+		history: [
+			{
+				location: 0,
+				type: "textBox",
+				oldValue: "Test",
+				newValue: "Neu"
+			}
+		],
 		navbarHeight: 10,
 		pencils: [
 			{
@@ -103,7 +112,7 @@ export default {
 				state.loadedPage.scrollOffsetY = options.y;
 				document.getElementsByClassName("PageContainer")[0].scrollTop = options.y * state.loadedPage.scale;
 			}else {
-				console.log("no scroll y")
+				console.log("no scroll y");
 			}
 		},
 		setScale(state, options) {
@@ -163,6 +172,18 @@ export default {
 				state.loadedPage.objects.textBoxes[state.focuseObjectId].quill.format(options.format, options.value, "user");
 			}
 		},
+		// History
+		pushHistory(state, action) {
+			state.history.push(action);
+		},
+		clearHistory(state, index) {
+			for(let i = 0; i > index; i--) {
+				state.history.pop();
+			}
+		},
+		setHistoryStep(state, historyStep) {
+			state.historyStep = historyStep;
+		}
 	},
 	getters: {
 		// Page
@@ -206,5 +227,38 @@ export default {
 		pointerUp: function({ commit }) {
 			commit("setPointer", {down: false, x: false, y: false, pressure: false,});
 		},
+		pushHistory({commit, state}, action) {
+			const isHistoryDirty = () => state.historyStep < 0;
+
+			if (isHistoryDirty()) {
+				commit("clearHistory", state.historyStep);
+			}
+			commit("pushHistory", action);
+		},
+		restoreHistory({commit, state}, delta) {
+			let historyIndex = state.history.length - state.historyStep + delta;
+			console.log(state.history);
+			console.log(historyIndex);
+			let historyObject = state.history[historyIndex];
+			console.log(historyObject);
+			switch (historyObject.type) {
+			case "textBox":
+				this.dispatch("setTextBoxContent", { id: historyObject.location, content: delta < 1 ? historyObject.oldValue : historyObject.newValue, ignoreHistory: true });
+				break;
+			}
+			commit("setHistoryStep", historyIndex);
+		},
+		setTextBoxContent({commit, state}, options) {
+			if (!options.ignoreHistory) {
+				this.dispatch("pushHistory", {
+					type: "textBox",
+					location: options.id,
+					newValue: options.content,
+					oldValue: state.loadedPage.objects.textBoxes[options.id].content
+				});
+			}
+
+			commit("setTextBoxContent", options, {module: "core"});
+		}
 	}
 };

From 76de55f917a51a1911540022f4c5e897f01f5966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 13:47:47 +0200
Subject: [PATCH 2/6] Added a undo and a redo button to the View tab

---
 core/src/components/navbar/Tab3/ZoomControl.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/core/src/components/navbar/Tab3/ZoomControl.vue b/core/src/components/navbar/Tab3/ZoomControl.vue
index 3e759a13..cfe0487e 100644
--- a/core/src/components/navbar/Tab3/ZoomControl.vue
+++ b/core/src/components/navbar/Tab3/ZoomControl.vue
@@ -1,5 +1,11 @@
 <template>
 	<div class="zoomControlContainer">
+		<md-button class="zoomControlButton" v-on:click="undo">
+			<md-icon>undo</md-icon>
+		</md-button>
+		<md-button class="zoomControlButton" v-on:click="redo">
+			<md-icon>redo</md-icon>
+		</md-button>
 		<md-button class="zoomControlButton" v-on:click="plus">
 			<md-icon>add</md-icon>
 		</md-button>
@@ -20,6 +26,12 @@ import { mapState } from "vuex";
 
 export default {
 	methods: {
+		undo: function() {
+			this.$store.dispatch("restoreHistory", -1);
+		},
+		redo: function() {
+			this.$store.dispatch("restoreHistory", 1);
+		},
 		plus: function() {
 			this.$store.commit("setScale", {scale: this.loadedPage.scale + 0.1,}, {module: "core" });
 		},

From 0b49d15367d13767bacf7256eca6b5ca171961bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 14:15:26 +0200
Subject: [PATCH 3/6] Moved undo and redo button into HistoryControl.vue Added
 history buttons to insert Reformatted Navbar.vue Moved duplicate style
 properties inside Navbar.vue into .tab-flex property

---
 .../navbar/MultiTab/HistoryControl.vue        | 26 +++++++++++++++++++
 core/src/components/navbar/Navbar.vue         | 24 ++++++++++++-----
 .../components/navbar/Tab3/ZoomControl.vue    |  6 -----
 3 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 core/src/components/navbar/MultiTab/HistoryControl.vue

diff --git a/core/src/components/navbar/MultiTab/HistoryControl.vue b/core/src/components/navbar/MultiTab/HistoryControl.vue
new file mode 100644
index 00000000..04b6fa3f
--- /dev/null
+++ b/core/src/components/navbar/MultiTab/HistoryControl.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="historyControlContainer">
+        <md-button class="historyControlButton" v-on:click="undo">
+            <md-icon>undo</md-icon>
+        </md-button>
+        <md-button class="historyControlButton" v-on:click="redo">
+            <md-icon>redo</md-icon>
+        </md-button>
+    </div>
+</template>
+
+<script>
+export default {
+	name: "HistoryControl"
+};
+</script>
+
+<style scoped>
+    .historyControlContainer {
+        height: 100%;
+    }
+    .historyControlButton {
+        height: 100%;
+        margin: 0px;
+    }
+</style>
\ No newline at end of file
diff --git a/core/src/components/navbar/Navbar.vue b/core/src/components/navbar/Navbar.vue
index ce70f637..90a74b23 100644
--- a/core/src/components/navbar/Navbar.vue
+++ b/core/src/components/navbar/Navbar.vue
@@ -8,17 +8,18 @@
         </md-tabs>
         <div class="navbarContent">
             <tab id="0">
-								<quill-toolbar v-if="focusedObjectType == 'textBoxes'" />
+                <quill-toolbar v-if="focusedObjectType == 'textBoxes'" />
             </tab>
-            <tab id="1" style="display: flex; flex-direction: row;">
+            <tab id="1" class="tab-flex">
                 <pencilSelector v-for="(pencil, index) in pencils" :id="index" :key="index"></pencilSelector>
                 <add-pencil/>
             </tab>
-						<tab id="2" style="display: flex; flex-direction: row;">
-							<add-text-box />
-						</tab>
-			<tab id="2"></tab>
-			<tab id="3">
+            <tab id="2" class="tab-flex">
+                <history-control />
+                <add-text-box />
+            </tab>
+			<tab id="3" class="tab-flex">
+                <history-control />
 				<zoom-control/>
 			</tab>
         </div>
@@ -30,6 +31,9 @@
 import tabSelector from "./TabSelector.vue";
 import tab from "./Tab.vue";
 
+// MultiTab
+import HistoryControl from "./MultiTab/HistoryControl";
+
 // Tab 0
 import quillToolbar from "./Tab0/QuillToolbar.vue";
 
@@ -47,6 +51,7 @@ import { mapState } from "vuex";
 
 export default {
 	components: {
+		HistoryControl,
 		tabSelector,
 		tab,
 		pencilSelector,
@@ -82,4 +87,9 @@ export default {
 .navbarContent {
     height: 100%;
 }
+
+.tab-flex {
+    display: flex;
+    flex-direction: row;
+}
 </style>
diff --git a/core/src/components/navbar/Tab3/ZoomControl.vue b/core/src/components/navbar/Tab3/ZoomControl.vue
index cfe0487e..150435df 100644
--- a/core/src/components/navbar/Tab3/ZoomControl.vue
+++ b/core/src/components/navbar/Tab3/ZoomControl.vue
@@ -1,11 +1,5 @@
 <template>
 	<div class="zoomControlContainer">
-		<md-button class="zoomControlButton" v-on:click="undo">
-			<md-icon>undo</md-icon>
-		</md-button>
-		<md-button class="zoomControlButton" v-on:click="redo">
-			<md-icon>redo</md-icon>
-		</md-button>
 		<md-button class="zoomControlButton" v-on:click="plus">
 			<md-icon>add</md-icon>
 		</md-button>

From 83143c7256e3fa03c94066032893b9f5d0c0e223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 15:02:14 +0200
Subject: [PATCH 4/6] Converted snake case to PascalCase to fix inconsistent
 naming

---
 core/src/components/navbar/Navbar.vue | 35 ++++++++++++---------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/core/src/components/navbar/Navbar.vue b/core/src/components/navbar/Navbar.vue
index 90a74b23..9d9dfffb 100644
--- a/core/src/components/navbar/Navbar.vue
+++ b/core/src/components/navbar/Navbar.vue
@@ -11,7 +11,7 @@
                 <quill-toolbar v-if="focusedObjectType == 'textBoxes'" />
             </tab>
             <tab id="1" class="tab-flex">
-                <pencilSelector v-for="(pencil, index) in pencils" :id="index" :key="index"></pencilSelector>
+                <pencil-selector v-for="(pencil, index) in pencils" :id="index" :key="index"></pencil-selector>
                 <add-pencil/>
             </tab>
             <tab id="2" class="tab-flex">
@@ -28,37 +28,37 @@
 
 <script>
 // miscellaneous
-import tabSelector from "./TabSelector.vue";
-import tab from "./Tab.vue";
+import TabSelector from "./TabSelector.vue";
+import Tab from "./Tab.vue";
 
 // MultiTab
 import HistoryControl from "./MultiTab/HistoryControl";
 
 // Tab 0
-import quillToolbar from "./Tab0/QuillToolbar.vue";
+import QuillToolbar from "./Tab0/QuillToolbar.vue";
 
 // Tab 1
-import addPencil from "./Tab1/AddPencil.vue";
-import pencilSelector from "./Tab1/PencilSelector.vue";
+import AddPencil from "./Tab1/AddPencil.vue";
+import PencilSelector from "./Tab1/PencilSelector.vue";
 
 // Tab 2
-import addTextBox from "./Tab2/AddTextBox.vue";
+import AddTextBox from "./Tab2/AddTextBox.vue";
 
 // Tab 3
-import zoomControl from "./Tab3/ZoomControl.vue";
+import ZoomControl from "./Tab3/ZoomControl.vue";
 
 import { mapState } from "vuex";
 
 export default {
 	components: {
 		HistoryControl,
-		tabSelector,
-		tab,
-		pencilSelector,
-		addPencil,
-		zoomControl,
-		quillToolbar,
-		addTextBox,
+		TabSelector,
+		Tab,
+		PencilSelector,
+		AddPencil,
+		ZoomControl,
+		QuillToolbar,
+		AddTextBox,
 	},
 	data: function() {
 		return {
@@ -80,10 +80,7 @@ export default {
     display: flex;
     flex-direction: column;
 }
-.navbarTabs {
-    height: 20%;
-    display: flex;
-}
+
 .navbarContent {
     height: 100%;
 }

From 0723cf21b048971171ffbb4265e6a825f29cb366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 16:49:42 +0200
Subject: [PATCH 5/6] Fixed history buttons not working

---
 core/src/components/navbar/MultiTab/HistoryControl.vue | 10 +++++++++-
 core/src/components/navbar/Tab3/ZoomControl.vue        |  6 ------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/core/src/components/navbar/MultiTab/HistoryControl.vue b/core/src/components/navbar/MultiTab/HistoryControl.vue
index 04b6fa3f..fce5239d 100644
--- a/core/src/components/navbar/MultiTab/HistoryControl.vue
+++ b/core/src/components/navbar/MultiTab/HistoryControl.vue
@@ -11,7 +11,15 @@
 
 <script>
 export default {
-	name: "HistoryControl"
+	name: "HistoryControl",
+	methods: {
+		undo: function() {
+			this.$store.dispatch("restoreHistory", -1);
+		},
+		redo: function() {
+			this.$store.dispatch("restoreHistory", 1);
+		},
+	}
 };
 </script>
 
diff --git a/core/src/components/navbar/Tab3/ZoomControl.vue b/core/src/components/navbar/Tab3/ZoomControl.vue
index 150435df..3e759a13 100644
--- a/core/src/components/navbar/Tab3/ZoomControl.vue
+++ b/core/src/components/navbar/Tab3/ZoomControl.vue
@@ -20,12 +20,6 @@ import { mapState } from "vuex";
 
 export default {
 	methods: {
-		undo: function() {
-			this.$store.dispatch("restoreHistory", -1);
-		},
-		redo: function() {
-			this.$store.dispatch("restoreHistory", 1);
-		},
 		plus: function() {
 			this.$store.commit("setScale", {scale: this.loadedPage.scale + 0.1,}, {module: "core" });
 		},

From 48a5c7bd125b55e24724c18f74740e074f06a519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florentin=20Schleu=C3=9F?=
 <27809595+macbrayne@users.noreply.github.com>
Date: Sun, 5 Jul 2020 18:47:40 +0200
Subject: [PATCH 6/6] Added vuex-undo-redo to replace the custom implementation

---
 core/package-lock.json | 5 +++++
 core/package.json      | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index a8af5c5b..df679833 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1190,6 +1190,11 @@
         "vue": "^2.6.10"
       }
     },
+    "vuex-undo-redo": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vuex-undo-redo/-/vuex-undo-redo-1.1.4.tgz",
+      "integrity": "sha512-IfuizJGwCxOa9ZDmLRuWafLBnUYXFhDbbO676oemyz9Kw3ncjo/QNH6SfEEZVOJOrZS9vdiEs5c47qBXPKrWTQ=="
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/core/package.json b/core/package.json
index 05512d42..5956639f 100644
--- a/core/package.json
+++ b/core/package.json
@@ -25,7 +25,8 @@
     "font-detective": "^2.0.0",
     "vue-color": "^2.7.1",
     "vue-material": "^1.0.0-beta-14",
-    "vue-quill-editor": "^3.0.6"
+    "vue-quill-editor": "^3.0.6",
+    "vuex-undo-redo": "^1.1.4"
   },
   "devDependencies": {
     "eslint": "^7.3.0",