Implement history

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",

core/src/components/navbar/MultiTab/HistoryControl.vue

@@ -0,0 +1,34 @@
+<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",
+	methods: {
+		undo: function() {
+			this.$store.dispatch("restoreHistory", -1);
+		},
+		redo: function() {
+			this.$store.dispatch("restoreHistory", 1);
+		},
+	}
+};
+</script>
+
+<style scoped>
+    .historyControlContainer {
+        height: 100%;
+    }
+    .historyControlButton {
+        height: 100%;
+        margin: 0px;
+    }
+</style>

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;">
-                <pencilSelector v-for="(pencil, index) in pencils" :id="index" :key="index"></pencilSelector>
+            <tab id="1" class="tab-flex">
+                <pencil-selector v-for="(pencil, index) in pencils" :id="index" :key="index"></pencil-selector>
                 <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>
@@ -27,33 +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: {
-		tabSelector,
-		tab,
-		pencilSelector,
-		addPencil,
-		zoomControl,
-		quillToolbar,
-		addTextBox,
+		HistoryControl,
+		TabSelector,
+		Tab,
+		PencilSelector,
+		AddPencil,
+		ZoomControl,
+		QuillToolbar,
+		AddTextBox,
 	},
 	data: function() {
 		return {
@@ -75,11 +80,13 @@ export default {
     display: flex;
     flex-direction: column;
 }
-.navbarTabs {
-    height: 20%;
-    display: flex;
-}
+
 .navbarContent {
     height: 100%;
 }
+
+.tab-flex {
+    display: flex;
+    flex-direction: row;
+}
 </style>

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;

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"});
+		}
 	}
 };