diff --git a/src/App.vue b/src/App.vue index 88b4519..8d4ec03 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,6 +53,13 @@ {{ animation_speed }} ms +
+
+ +
+
@@ -63,15 +70,15 @@
{{ this.bezeichnung_aktueller_datenpunkt }}: - +  {{ aktueller_datenpunkt }}  -
- {{ this.r }}: + {{ this.bezeichnung_aktueller_prototyp }}: {{ aktueller_prototyp }} @@ -168,7 +175,7 @@ -
> +

@@ -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() {