loop and next button for manual control

src/components/MenuReset.vue

@@ -1,5 +1,23 @@
 <template>
   <div class="form-field">
+    <div class="form-field">
+      <label>
+        Loop
+        <input
+          :value="loop"
+          type="checkbox"
+          :checked="loop"
+          @input="toggleLoop()"
+        />
+      </label>
+    </div>
+    <input
+      type="button"
+      name="next"
+      class="next"
+      value="Next"
+      @click="toggleNext()"
+    />
     <input
       type="button"
       name="stop"
@@ -17,13 +35,21 @@
   </div>
 </template>
 <script>
-  import { mapActions } from "pinia";
+  import { mapState, mapActions } from "pinia";
   import { globalStore } from "../stores/index.js";
 
   export default {
     name: "MenuReset",
+    computed: {
+      ...mapState(globalStore, ["loop"]),
+    },
     methods: {
-      ...mapActions(globalStore, ["toggleReset", "toggleStop"]),
+      ...mapActions(globalStore, [
+        "toggleReset",
+        "toggleStop",
+        "toggleLoop",
+        "toggleNext",
+      ]),
     },
   };
 </script>

src/stores/index.js

@@ -43,7 +43,8 @@ export const globalStore = defineStore("globalStore", {
       picture: null,
       mainMenu: false,
       activeSubMenu: "",
-      loop: true,
+      loop: false,
+      lastAction: "drawfromlast",
     };
   },
   actions: {
@@ -62,6 +63,7 @@ export const globalStore = defineStore("globalStore", {
     },
     toggleDraw2d() {
       this.setActiveSubMenu("");
+      this.lastAction = "draw2d";
       this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
@@ -69,6 +71,7 @@ export const globalStore = defineStore("globalStore", {
     },
     toggleDraw2dLast() {
       this.setActiveSubMenu("");
+      this.lastAction = "drawfromlast";
       this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
@@ -90,6 +93,21 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dpicture = false;
       this.canDraw = false;
     },
+    toggleLoop() {
+      this.loop = !this.loop;
+    },
+    toggleNext() {
+      switch (this.lastAction) {
+        case "drawfromlast":
+          this.toggleDraw2dLast();
+          break;
+        case "draw2d":
+          this.toggleDraw2d();
+          break;
+        default:
+          return;
+      }
+    },
     setActiveSubMenu(data) {
       if (this.activeSubMenu == data) this.activeSubMenu = "";
       else this.activeSubMenu = data;