reset button added, closes #1, small bug fixes

src/App.vue

@@ -53,6 +53,13 @@
     {{ animation_speed }} ms
   </div>
 
+  <br />
+  <div>
+    <button class="btn btn-primary" @click="szenario_zuruecksetzen">
+      Szenario zurücksetzen
+    </button>
+  </div>
+
   <br />
 
   <div style="width: 800px; margin: auto">
@@ -63,15 +70,15 @@
       <div class="row">
         <div class="column">
           {{ this.bezeichnung_aktueller_datenpunkt }}:
-          <button class="btn btn-primary" @click="voriges_datenpunkt">-</button>
+          <button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
           &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt }}</b
           >&nbsp;
-          <button class="btn btn-primary" @click="naechstes_datenpunkt">
+          <button class="btn btn-primary" @click="naechster_datenpunkt">
             +
           </button>
         </div>
         <div class="column">
-          {{ this.r }}:
+          {{ this.bezeichnung_aktueller_prototyp }}:
           <!-- <button @click="voriger_prototyp">-</button> -->
           <b style="font-size: x-large">{{ aktueller_prototyp }}</b>
           <!-- <button @click="naechster_prototyp">+</button> -->
@@ -168,7 +175,7 @@
           </option>
           <option value="kein_bild">reine Datenansicht</option>
         </select>
-      </div>>
+      </div>
       <br />
     </div>
   </div>
@@ -237,6 +244,12 @@ export default {
         { x: 120, y: 150, color: "blue" },
       ],
 
+      prototypen_original: [
+        { x: 540, y: 50, color: "blue" },
+        { x: 380, y: 370, color: "blue" },
+        { x: 120, y: 150, color: "blue" },
+      ],
+
       canvas: null,
       vueCanvas: null,
       aktueller_datenpunkt: 0,
@@ -409,6 +422,8 @@ export default {
       }
     },
     update_anzahl_prototypen(new_value) {
+      // Original Prototypen laden
+      this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original))
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
         this.anzahl_prototypen = new_value;
@@ -418,15 +433,20 @@ export default {
         }
 
         while (this.prototypen.length < this.anzahl_prototypen) {
-          let neue_prototyp = this.generiere_prototyp_zufaellig();
-          this.prototypen.push(neue_prototyp);
+          let neuer_prototyp = this.generiere_prototyp_zufaellig();
+          this.prototypen.push(neuer_prototyp);
         }
         //this.update_zeichnung_child_component();
         //        this.datensatz_2_textarea();
         this.refresh();
       } else {
         this.anzahl_prototypen = 0;
+        while (this.prototypen.length > this.anzahl_prototypen) {
+          this.prototypen.pop();
         }
+      }
+      // Original Prototypen merken
+      this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen))
     },
     /*
     update_zeichnung_child_component() {
@@ -483,7 +503,7 @@ export default {
       }
     },
 
-    farben_anpassen(alle) {
+    faerbe_datenpunkte(alle) {
       for (let i = 0; i < this.datenpunkte.length; i++) {
         if (alle || i < this.aktueller_datenpunkt) {
           let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
@@ -560,7 +580,7 @@ export default {
       this.vueCanvas.stroke();
     },
 
-    zeichne_linie_datenpunkt_naechstgelegene_prototyp(datenpunkt) {
+    zeichne_linie_datenpunkt_naechstgelegener_prototyp(datenpunkt) {
       let farbe = "red";
       let staerke = 2;
       let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt);
@@ -663,14 +683,14 @@ export default {
         i++;
       });
     },
-    naechstes_datenpunkt() {
+    naechster_datenpunkt() {
       if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) {
         this.aktueller_datenpunkt++;
         this.refresh();
         this.zeichne_datenpunkte(true, true);
       }
     },
-    voriges_datenpunkt() {
+    voriger_datenpunkt() {
       if (this.aktueller_datenpunkt > 0) {
         this.aktueller_datenpunkt--;
         this.refresh();
@@ -761,7 +781,7 @@ export default {
       }
     },
 
-    kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp() {
+    kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
       this.zeichne_linie_datenpunkt_prototyp(
         this.akt_datenpunkt,
         this.naechstgelegener_prototyp,
@@ -778,7 +798,7 @@ export default {
         await this.starte_animation();
       }
 
-      this.farben_anpassen(true);
+      this.faerbe_datenpunkte(true);
 
       this.loesche_zeichenflaeche();
       this.zeichne_hintergrund();
@@ -803,7 +823,7 @@ export default {
       let alle_prototypen_verarbeitet = false;
       while (!alle_prototypen_verarbeitet) {
         this.zeichne_hintergrund();
-        this.farben_anpassen(false);
+        this.faerbe_datenpunkte(false);
 
         if (this.aktueller_prototyp == 0) {
           this.zeichne_datenpunkte(false, true);
@@ -832,7 +852,7 @@ export default {
 
       // Schlussbild
       this.loesche_zeichenflaeche();
-      this.farben_anpassen(false);
+      this.faerbe_datenpunkte(false);
       this.zeichne_datenpunkte(false, true);
       this.zeichne_prototypen(false);
 
@@ -849,7 +869,7 @@ export default {
         // Simulate some delay (you can replace this with actual animation code)
         setTimeout(() => {
           resolve(); // Resolve the promise when the animation is done
-        }, zeitspanne); // 1-second delay
+        }, zeitspanne); // delay for zeitspanne 
       });
     },
 
@@ -874,7 +894,7 @@ export default {
       return new Promise((resolve) => {
         // Your animation code here
         if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) {
-          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
           this.zeichne_datenpunkte(true, true);
           this.zeichne_prototypen(true);
         }
@@ -888,7 +908,7 @@ export default {
 
     aktualisiere_pos_prototyp() {
       return new Promise((resolve) => {
-        this.farben_anpassen(false);
+        this.faerbe_datenpunkte(false);
         this.animieren();
 
         setTimeout(() => {
@@ -921,7 +941,7 @@ export default {
           this.loesche_zeichenflaeche();
           this.zeichne_hintergrund();
 
-          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
 
           this.zeichne_datenpunkte(true, true);
           this.zeichne_prototypen(true);
@@ -946,6 +966,25 @@ export default {
       // Zeichnen aufrufen
       draw();
     },
+
+    szenario_zuruecksetzen() {
+      this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
+      this.update_anzahl_prototypen(this.anzahl_prototypen);
+
+      this.aktueller_datenpunkt = 0;
+
+      for (let i = 0; i < this.datenpunkte.length; i++) {
+          let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
+          this.datenpunkte[i].color = "#000000";
+      }
+    
+      this.loesche_zeichenflaeche();
+      this.refresh();
+      this.zeichne_hintergrund();
+      this.zeichne_prototypen(false);
+      this.zeichne_datenpunkte(false, true);
+      console.log("Page completed with image and files!");
+    },
   },
 
   mounted() {