Migrate to Vue3

.gitpod.yml

@@ -3,4 +3,4 @@ tasks:
 
 vscode:
   extensions:
-    - octref.vetur
+    - Vue.volar

core/package.json

@@ -33,14 +33,16 @@
     "html2pdf.js": "^0.10.1",
     "jspdf": "^2.0.0",
     "mathlive": "^0.89.4",
+    "pinia": "^2.0.33",
     "quill-mathlive-blot": "^1.2.0",
     "quill-mathquill-blot": "^1.8.0",
     "tinycolor2": "^1.4.1",
+    "vue": "^3.2.47",
     "vue-color": "^2.7.1",
-    "vue-material": "^1.0.0-beta-14",
-    "vue-moveable": "^2.0.0-beta.62",
-    "vue-selecto": "^1.13.3",
-    "vuejs-quill": "^1.3.0"
+    "vue3-moveable": "^0.19.4",
+    "vue3-selecto": "^1.8.1",
+    "vuejs-quill": "^1.3.0",
+    "vuetify": "^3.1.11"
   },
   "devDependencies": {
     "eslint-config-jonathantreffler": "^1.4.0",

core/src/components/FractavaNotes.vue

@@ -15,7 +15,9 @@ import Page from "./page/Page.vue";
 import Navbar from "./navbar/Navbar.vue";
 import PageContainer from "./page/PageContainer.vue";
 
-import { mapState } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useCoreStore } from "../pinia/core.js";
+
 
 export default {
 	components: {
@@ -33,15 +35,16 @@ export default {
 			let scrollOffsetX = event.srcElement.scrollLeft;
 			let scrollOffsetY = event.srcElement.scrollTop;
 
-			this.$store.commit("setScrollOffset", {x: scrollOffsetX, y: scrollOffsetY}, {module: "core" });
+			this.setScrollOffset({x: scrollOffsetX, y: scrollOffsetY});
 		}
 	},
-	computed: mapState({
-		debug: state => state.core.debug,
-		navbarHeight: state => state.core.navbarHeight,
-		scrollOffsetX: state => state.core.loadedPage.scrollOffsetX,
-		scrollOffsetY: state => state.core.loadedPage.scrollOffsetY,
-	}),
+	computed: {
+		...mapState(useCoreStore, {
+			debug: store => store.debug,
+      navbarHeight: store => store.navbarHeight,
+		}),
+    ...mapActions(useCoreStore, ['setScrollOffset'])
+  },
 };
 </script>
 

core/src/components/navbar/ColorPicker.vue

@@ -8,7 +8,8 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useCoreStore } from "../../pinia/core.js";
 import { Sketch } from "vue-color";
 
 export default {
@@ -33,8 +34,8 @@ export default {
 		},
 	},
 	computed: {
-		...mapState({
-			presetColors: state => state.core.presetColors,
+		...mapState(useCoreStore, {
+			presetColors: store => store.presetColors,
 		}),
 	},
 };

core/src/components/navbar/ModeSwitchButtons.vue

@@ -1,32 +1,31 @@
 <template>
   <div style="height: 100%; display: flex;">
-    <md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode('editing')" :class="{'md-raised': editingMode == 'editing'}">
+    <!--<md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode({mode: 'editing'})" :class="{'md-raised': editingMode == 'editing'}">
       <md-icon>edit</md-icon>
       <md-tooltip md-direction="bottom">Edit</md-tooltip>
     </md-button>
-    <md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode('selecting')" :class="{'md-raised': editingMode == 'selecting'}">
+    <md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode({mode: 'selecting'})" :class="{'md-raised': editingMode == 'selecting'}">
       <md-icon>highlight_alt</md-icon>
       <md-tooltip md-direction="bottom">Select</md-tooltip>
     </md-button>
-    <md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode('drawing')" :class="{'md-raised': editingMode == 'drawing'}">
+    <md-button class="navbarButton smallNavbarButton" v-on:click="switchEditingMode({mode: 'drawing'})" :class="{'md-raised': editingMode == 'drawing'}">
       <md-icon>gesture</md-icon>
       <md-tooltip md-direction="bottom">Draw</md-tooltip>
     </md-button>
-    <md-button class="navbarButton smallNavbarButton" />
+    <md-button class="navbarButton smallNavbarButton" />-->
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useCoreStore } from "../../pinia/core.js";
 
 export default {
-	computed: mapState({
-		editingMode: state => state.core.editingMode,
-	}),
-	methods: {
-		switchEditingMode: function(mode) {
-			this.$store.commit("switchEditingMode", {mode, }, {module: "core" });
-		},
-	},
+	computed: {
+		...mapState(useCoreStore, {
+			editingMode: store => store.editingMode,
+		}),
+    ...mapActions(useCoreStore, ["switchEditingMode"])
+  },
 };
 </script>

core/src/components/navbar/Navbar.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="navbar">
-    <md-tabs>
+    <v-tabs
+      v-model="tab"
+      bg-color="primary"
+    >
       <tab-selector content="Start" id="0" />
       <tab-selector content="Drawing" id="1" />
       <tab-selector content="Insert" id="2" />
       <tab-selector content="View" id="3" />
-    </md-tabs>
+    </v-tabs>
     <div class="navbarContent">
       <tab id="0">
-        <md-button class="navbarButton smallNavbarButton" onclick="window.print()">
+        <!--<md-button class="navbarButton smallNavbarButton" onclick="window.print()">
           <md-icon>print</md-icon>
-        </md-button>
+        </md-button>-->
         <export-menu />
         <quill-toolbar v-if="editingMode == 'editing' && focusedObjects.textBoxes && focusedObjects.textBoxes.length === 1 && numberOfObjectsFocused === 1" />
         <shape-toolbar v-if="editingMode == 'editing' && focusedObjects.shapes && focusedObjects.shapes.length === 1 && numberOfObjectsFocused === 1" />
@@ -54,7 +57,8 @@ import zoomControl from "./Tab3/ZoomControl.vue";
 import backgroundSelector from "./Tab3/BackgroundSelector.vue";
 import pageResize from "./Tab3/PageResize.vue";
 
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "pinia";
+import { useCoreStore } from "../../pinia/core.js";
 
 export default {
 	components: {
@@ -77,15 +81,12 @@ export default {
 		};
 	},
 	computed: {
-    ...mapState({
-      activeNavbarTab: state => state.core.activeNavbarTab,
-      pencils: state => state.core.pencils,
-      focusedObjects: state => state.core.focusedObjects,
-      editingMode: state => state.core.editingMode,
-    }),
-    ...mapGetters([
-      "numberOfObjectsFocused",
-    ]),
+		...mapState(useCoreStore, {
+			editingMode: store => store.editingMode,
+      focusedObjects: store => store.focusedObjects,
+      numberOfObjectsFocused: store => store.numberOfObjectsFocused,
+      pencils: store => store.pencils,
+		}),
   },
 	mixins: [],
 };

core/src/components/navbar/RelativeMenu.vue

@@ -1,12 +1,12 @@
 <template>
-	<md-card class="relativeMenu" :style="{width: width+'px'}">
+	<!--<md-card class="relativeMenu" :style="{width: width+'px'}">
 		<md-card-header>
 				<div class="md-title">{{ title }}</div>
 		</md-card-header>
 		<md-card-content>
 				<slot />
 		</md-card-content>
-	</md-card>
+	</md-card>-->
 </template>
 
 <script>

core/src/components/navbar/Tab.vue

@@ -8,7 +8,8 @@
 <script>
 import modeSwitchButtons from "./ModeSwitchButtons.vue";
 
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useCoreStore } from "../../pinia/core.js";
 
 export default {
 	components: {
@@ -19,9 +20,11 @@ export default {
 			default: 0,
 		},
 	},
-	computed: mapState({
-		activeNavbarTab: state => state.core.activeNavbarTab,
-	}),
+	computed: {
+		...mapState(useCoreStore, {
+			activeNavbarTab: store => store.activeNavbarTab,
+		}),
+	},
 };
 </script>
 

core/src/components/navbar/Tab0/AddSymbol.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-			<md-menu
+			<!--<md-menu
 				md-direction="bottom-start"
 				md-align-trigger
 				class="navbarButton"
@@ -19,20 +19,26 @@
 						</div>
 					</span>
 				</md-menu-content>
-			</md-menu>
+			</md-menu>-->
     </div>
 </template>
 
 <script>
+import { mapActions } from "pinia";
+import { useCoreStore } from "../../../pinia/core.js";
+
 export default {
 	data: function(){
 		return {
 			symbols: ["€", "£", "¥", "©", "®", "™", "±", "≠", "≤", "≥", "÷", "×", "∞", "µ", "α", "β", "π", "Ω", "Σ", "Δ", "√","∩", "∪", "⊆"],
 		};
 	},
+	computed: {
+		...mapActions(useCoreStore, ['insertText'])
+	},
 	methods: {
 		add: function(symbol) {
-			this.$store.commit("insertText", {text: symbol,}, {module: "core" });
+			this.insertText({text: symbol,});
 		},
 	},
 };

core/src/components/navbar/Tab0/ExportMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <md-menu
+  <!--<md-menu
     md-direction="bottom-start"
     md-align-trigger
     md-close-on-click
@@ -16,18 +16,20 @@
         <md-button class="exportButton" v-on:click="exportJPG()">JPG</md-button>
       </div>
     </md-menu-content>
-  </md-menu>
+  </md-menu>-->
+  <div></div>
 </template>
 
 <script>
 import html2pdf from "html2pdf.js";
 
-import { mapState } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useCoreStore } from "../../../pinia/core.js";
 
 export default {
 	methods: {
 		html2pdfStart: function(imageType) {
-			this.$store.commit("exportStarted", {}, {module: "core" });
+			this.exportStarted();
 
 			var element = this.getPageClone();
 			var opt = {
@@ -44,29 +46,29 @@ export default {
 			this.html2pdfStart("png").outputImg("datauristring").then(function(result) {
 				console.log(result);
 				self.saveFile(result, "png", "download");
-				self.$store.commit("exportStopped", {}, {module: "core" });
+				self.exportStopped();
 			});
 		},
 		exportWEBP: function() {
 			let self = this;
 			this.html2pdfStart("webp").outputImg("datauristring").then(function(result) {
 				console.log(result);
 				self.saveFile(result, "webp", "download");
-				self.$store.commit("exportStopped", {}, {module: "core" });
+				self.exportStopped();
 			});
 		},
 		exportJPG: function() {
 			let self = this;
 			this.html2pdfStart("jpeg").outputImg("datauristring").then(function(result) {
 				console.log(result);
 				self.saveFile(result, "jpg", "download");
-				self.$store.commit("exportStopped", {}, {module: "core" });
+				self.exportStopped();
 			});
 		},
 		exportPDF: function() {
 			let self = this;
 			this.html2pdfStart("png").save().then(function() {
-				self.$store.commit("exportStopped", {}, {module: "core" });
+				self.exportStopped();
 			});
 		},
 		getPageClone: function() {
@@ -84,10 +86,11 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			exportInProgress: state => state.core.exportInProgress,
-			loadedPage: state => state.core.loadedPage,
+		...mapState(useCoreStore, {
+			exportInProgress: store => store.exportInProgress,
+			loadedPage: store => store.loadedPage,
 		}),
+		...mapActions(useCoreStore, ["exportStarted", "exportStopped"]),
 		html2canvasOptions: function() {
 			return {
 				ignoreElements: function(element) {