From f29c8806c0f88119e089f15510b688622708c531 Mon Sep 17 00:00:00 2001
From: Christian Opitz <git@c-opitz.de>
Date: Sun, 12 Nov 2023 17:08:55 +0100
Subject: [PATCH] =?UTF-8?q?Achsen=20im=20Koordinatensystem=20erg=C3=A4nzt.?=
 =?UTF-8?q?=20Koordinatenursprung:=20unten=20links.=20=20Y-Achse=20inverti?=
 =?UTF-8?q?ert.=20Skalierung=20erg=C3=A4nzt.=20Die=20Datenpunkte=20und=20d?=
 =?UTF-8?q?ie=20Prototypen=20werden=20auf=20100%=20der=20Breite=20und=20H?=
 =?UTF-8?q?=C3=B6he=20skaliert.=20Szenarien=20=C3=BCberarbeitet.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 545 +++++++++++++++++++++++++++++++++-------------------
 1 file changed, 349 insertions(+), 196 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d6357f1..64c7b24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,20 @@
 <template>
-  <img
-    id="kein_bild"
-    src="./assets/img/weiss_pixel.png"
-    style="width: 0px; height: 0px"
-  />
-  <img
-    id="stadtplan"
-    src="./assets/img/stadtplan.png"
-    style="width: 0px; height: 0px"
-  />
-  <img
-    id="gold_rush"
-    src="./assets/img/desert_landscape.png"
-    style="width: 0px; height: 0px"
-  />
-  <img
-    id="lebensmittel"
-    src="./assets/img/weiss_pixel.png"
-    style="width: 0px; height: 0px"
-  />
+  <img id="kein_bild" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />
+  <img id="stadtplan" src="./assets/img/stadtplan.png" style="width: 0px; height: 0px" />
+  <img id="gold_rush" src="./assets/img/desert_landscape.png" style="width: 0px; height: 0px" />
+  <img id="lebensmittel" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />
 
+  
   <h2>
     Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
     die {{ this.bezeichnung_datenpunkte }} angepasst werden.
   </h2>
   <br />
 
-  <canvas
-    id="c"
-    STYLE="border: 1px black solid;"
-    height="450"
-    width="800"
-  ></canvas>
+  <canvas id="c" STYLE="border: 0px black solid;" height="450" width="800"></canvas>
   <br />
   Die <b>Punkte</b> auf der Karte sind die
-  <b>{{ this.bezeichnung_datenpunkte }}</b
-  >.<br />
+  <b>{{ this.bezeichnung_datenpunkte }}</b>.<br />
   Die <b>x-Markierungen</b> auf der Karte entsprechen den
   <b>{{ this.bezeichnung_prototypen }}</b>
   <br />
@@ -45,13 +24,7 @@
       starte Animation für alles
     </button>
 
-    <input
-      type="range"
-      v-model="animation_speed_range"
-      min="0"
-      max="2000"
-      step="1"
-    />
+    <input type="range" v-model="animation_speed_range" min="0" max="2000" step="1" />
 
     {{ animation_speed }} ms
   </div>
@@ -74,8 +47,7 @@
         <div class="column">
           {{ this.bezeichnung_aktueller_datenpunkt }}:
           <button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
-          &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt + 1 }}</b
-          >&nbsp;
+          &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt + 1 }}</b>&nbsp;
           <button class="btn btn-primary" @click="naechster_datenpunkt">
             +
           </button>
@@ -106,19 +78,12 @@
         <div class="column" style="text-align: center">
           <h3>{{ this.bezeichnung_datenpunkte }}</h3>
 
-          <button
-            class="btn btn-primary"
-            @click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)"
-          >
+          <button class="btn btn-primary" @click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)">
             -
           </button>
           &nbsp;
-          <b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b
-          >&nbsp;
-          <button
-            class="btn btn-primary"
-            @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)"
-          >
+          <b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b>&nbsp;
+          <button class="btn btn-primary" @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)">
             +
           </button>
 
@@ -129,19 +94,13 @@
         <div class="column" style="text-align: center">
           <h3>{{ this.bezeichnung_prototypen }}</h3>
 
-          <button
-            class="btn btn-primary"
-            @click="update_anzahl_prototypen(--this.anzahl_prototypen)"
-          >
+          <button class="btn btn-primary" @click="update_anzahl_prototypen(--this.anzahl_prototypen)">
             -
           </button>
           &nbsp;
           <b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
           &nbsp;
-          <button
-            class="btn btn-primary"
-            @click="update_anzahl_prototypen(++this.anzahl_prototypen)"
-          >
+          <button class="btn btn-primary" @click="update_anzahl_prototypen(++this.anzahl_prototypen)">
             +
           </button>
           <br />
@@ -159,11 +118,7 @@
           <div class="column" style="text-align: center">
             <b>Datenpunkt</b><br />
             x; y<br />
-            <textarea
-              v-model="txt_datensatz"
-              placeholder="add multiple lines"
-              rows="10"
-            ></textarea>
+            <textarea v-model="txt_datensatz" placeholder="add multiple lines" rows="10"></textarea>
             <br />
             <button class="btn btn-primary" @click="textarea_2_datensatz">
               Datenpunkte verändern
@@ -172,11 +127,7 @@
           <div class="column" style="text-align: center">
             <b>Prototyp</b><br />
             x; y<br />
-            <textarea
-              v-model="txt_prototypensatz"
-              placeholder="add multiple lines"
-              rows="10"
-            ></textarea>
+            <textarea v-model="txt_prototypensatz" placeholder="add multiple lines" rows="10"></textarea>
             <br />
             <button class="btn btn-primary" @click="textarea_2_prototypensatz">
               Prototypen verändern
@@ -213,6 +164,7 @@
 // Import the generateDifferentColors function from generateColors.js
 import { generateDifferentColors } from "./generateColors.js";
 
+
 export default {
   name: "App",
   components: {
@@ -229,90 +181,31 @@ export default {
       anzahl_prototypen: 3,
       szenario: "gold_rush",
 
+      beschriftungXachse: "X-Wert",
+      beschriftungYachse: "Y-Wert",
+
+      max_x_wert: 10,
+      max_y_wert: 10,
+
+
       gold_rush_datenpunkte: [
-        { x: 2, y: 3, color: "black" },
-        { x: 3, y: 6, color: "black" },
-        { x: 4, y: 7, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
-        { x: 300, y: 300, color: "black" },
         { x: 300, y: 300, color: "black" },
+        { x: 202, y: 70, color: "black" },
+        { x: 162, y: 250, color: "black" },
+        { x: 82, y: 20, color: "black" },
+        { x: 500, y: 350, color: "black" },
+        { x: 630, y: 170, color: "black" },
+        { x: 430, y: 270, color: "black" },
+        { x: 570, y: 30, color: "black" },
+      ],
+
+      gold_rush_prototypen: [
+        { x: 540, y: 50, color: "blue" },
+        { x: 380, y: 370, color: "blue" },
+        { x: 120, y: 150, color: "blue" },
       ],
 
       lebensmittel_datenpunkte: [
-        { x: 0, y: 10, color: "black" },
-        { x: 0, y: 40, color: "black" },
-        { x: 0, y: 40, color: "black" },
-        { x: 0, y: 50, color: "black" },
-        { x: 0, y: 60, color: "black" },
-        { x: 0, y: 30, color: "black" },
-        { x: 10, y: 60, color: "black" },
-        { x: 0, y: 140, color: "black" },
-        { x: 0, y: 150, color: "black" },
-        { x: 10, y: 90, color: "black" },
-        { x: 30, y: 140, color: "black" },
-        { x: 0, y: 210, color: "black" },
-        { x: 10, y: 200, color: "black" },
-        { x: 2, y: 0, color: "black" },
-        { x: 70, y: 40, color: "black" },
-        { x: 130, y: 20, color: "black" },
-        { x: 130, y: 0, color: "black" },
-        { x: 80, y: 180, color: "black" },
-        { x: 170, y: 10, color: "black" },
-        { x: 110, y: 240, color: "black" },
-        { x: 0, y: 520, color: "black" },
-        { x: 140, y: 10, color: "black" },
-        { x: 50, y: 350, color: "black" },
-        { x: 180, y: 10, color: "black" },
-        { x: 110, y: 210, color: "black" },
-        { x: 110, y: 220, color: "black" },
-        { x: 20, y: 550, color: "black" },
-        { x: 0, y: 730, color: "black" },
-        { x: 140, y: 360, color: "black" },
-        { x: 220, y: 110, color: "black" },
-        { x: 50, y: 510, color: "black" },
-        { x: 310, y: 30, color: "black" },
-        { x: 0, y: 770, color: "black" },
-        { x: 330, y: 60, color: "black" },
-        { x: 10, y: 770, color: "black" },
-        { x: 30, y: 610, color: "black" },
-        { x: 280, y: 0, color: "black" },
-        { x: 20, y: 710, color: "black" },
-        { x: 310, y: 20, color: "black" },
-        { x: 260, y: 290, color: "black" },
-        { x: 70, y: 590, color: "black" },
-        { x: 60, y: 710, color: "black" },
-        { x: 50, y: 740, color: "black" },
-        { x: 110, y: 610, color: "black" },
-        { x: 260, y: 540, color: "black" },
-        { x: 240, y: 530, color: "black" },
-        { x: 230, y: 570, color: "black" },
-        { x: 280, y: 530, color: "black" },
-        { x: 300, y: 590, color: "black" },
-        { x: 320, y: 540, color: "black" },
-        { x: 430, y: 370, color: "black" },
-        { x: 480, y: 80, color: "black" },
-        { x: 800, y: 0, color: "black" },
-        { x: 790, y: 0, color: "black" },
-        { x: 700, y: 60, color: "black" },
-        { x: 820, y: 10, color: "black" },
-      ],
-
-      /*
-       lebensmittel_datenpunkte: [
         { x: 0, y: 1, color: "black" },
         { x: 0, y: 4, color: "black" },
         { x: 0, y: 4, color: "black" },
@@ -370,7 +263,39 @@ export default {
         { x: 70, y: 6, color: "black" },
         { x: 82, y: 1, color: "black" },
       ],
-      */
+
+      lebensmittel_prototypen: [
+        { x: 10, y: 10, color: "blue" },
+        { x: 5, y: 50, color: "blue" },
+        { x: 50, y: 5, color: "blue" },
+      ],
+
+
+      stadtplan_datenpunkte: [
+        { x: 597, y: 13, color: "black" },
+        { x: 248, y: 99, color: "black" },
+        { x: 538, y: 274, color: "black" },
+        { x: 526, y: 321, color: "black" },
+        { x: 119, y: 316, color: "black" },
+        { x: 342, y: 365, color: "black" },
+        { x: 204, y: 368, color: "black" },
+        { x: 472, y: 43, color: "black" },
+        { x: 240, y: 264, color: "black" },
+        { x: 189, y: 175, color: "black" },
+        { x: 424, y: 318, color: "black" },
+        { x: 158, y: 344, color: "black" },
+        { x: 123, y: 246, color: "black" },
+        { x: 585, y: 297, color: "black" },
+        { x: 171, y: 80, color: "black" },
+      ],
+
+      stadtplan_prototypen: [
+        { x: 540, y: 50, color: "blue" },
+        { x: 380, y: 370, color: "blue" },
+        { x: 120, y: 150, color: "blue" },
+        { x: 305, y: 278, color: "blue" },
+      ],
+
 
       datenpunkte: [
         { x: 300, y: 300, color: "black" },
@@ -389,11 +314,7 @@ 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" },
-      ],
+      prototypen_original: [],
 
       canvas: null,
       vueCanvas: null,
@@ -470,12 +391,39 @@ export default {
         return null;
       }
     },
+
+
+    akt_datenpunkt_skaliert: function () {
+      if (this.aktueller_datenpunkt < this.datenpunkte.length) {
+        return this.datenpunkte_skaliert[this.aktueller_datenpunkt];
+      } else {
+        return null;
+      }
+    },
+
+    akt_prototyp_skaliert: function () {
+      if (this.aktueller_prototyp < this.prototypen.length) {
+        return this.prototypen_skaliert[this.aktueller_prototyp];
+      } else {
+        return null;
+      }
+    },
+
+
+    datenpunkte_skaliert: function () {
+      return this.ermittle_skalierten_datensatz(this.datenpunkte);
+    },
+    prototypen_skaliert: function () {
+      return this.ermittle_skalierten_datensatz(this.prototypen);
+    }
+
   },
 
   methods: {
     lade() {
       this.datensatz_2_textarea();
       this.prototypensatz_2_textarea();
+
     },
 
     datensatz_2_textarea() {
@@ -571,7 +519,34 @@ export default {
       }
     },
 
+
+    update_max_x_y() {
+      this.max_x_wert = 10;
+      this.max_y_wert = 10;
+
+      this.datenpunkte.forEach((element) => {
+        if (element.x > this.max_x_wert) {
+          this.max_x_wert = element.x;
+        }
+        if (element.y > this.max_y_wert) {
+          this.max_y_wert = element.y;
+        }
+      });
+
+
+      this.prototypen.forEach((element) => {
+        if (element.x > this.max_x_wert) {
+          this.max_x_wert = element.x;
+        }
+        if (element.y > this.max_y_wert) {
+          this.max_y_wert = element.y;
+        }
+      });
+
+    },
+
     szenario_aendern() {
+      /*
       if (this.szenario == "lebensmittel") {
         this.datenpunkte = this.ermittle_skalierten_datensatz(
           this.lebensmittel_datenpunkte
@@ -580,39 +555,55 @@ export default {
         this.update_anzahl_prototypen(4);
         this.datensatz_2_textarea();
       }
+*/
 
+      switch (this.szenario) {
+        case "gold_rush": this.datenpunkte = this.gold_rush_datenpunkte;
+          this.prototypen = this.gold_rush_prototypen;
+          break;
+        case "stadtplan": this.datenpunkte = this.stadtplan_datenpunkte;
+          this.prototypen = this.stadtplan_prototypen;
+          break;
+        case "lebensmittel": this.datenpunkte = this.lebensmittel_datenpunkte;
+          this.prototypen = this.lebensmittel_prototypen;
+          break;
+      }
+
+      this.prototypen_original = this.prototypen;
+
+      this.anzahl_datenpunkte = this.datenpunkte.length;
+      this.anzahl_prototypen = this.prototypen.length;
+
+
+      this.update_anzahl_prototypen(this.anzahl_prototypen);
+      this.datensatz_2_textarea();
+      this.prototypensatz_2_textarea();
       this.loesche_zeichenflaeche();
+      this.update_max_x_y();
       this.refresh();
     },
 
     ermittle_skalierten_datensatz(ds_eingabe) {
-      let breite = 800;
-      let hoehe = 450;
-      let max_x = 0;
-      let max_y = 0;
+      let breite_original = 800;
+      let hoehe_original = 450;
+
+      let offset_rand_ursprung_x = 14;
+      let offset_rand_ursprung_y = 14;
+      let offset_kreis_radius = 16; // damit die Kreise nicht außerhalb gezeichnet werden
+      let breite = breite_original - offset_rand_ursprung_x - offset_kreis_radius;
+      let hoehe = hoehe_original - offset_rand_ursprung_y - offset_kreis_radius;
+
       let ds_ausgabe = [];
 
       ds_eingabe.forEach((element) => {
-        if (element.x > max_x) {
-          max_x = element.x;
-        }
-        if (element.y > max_y) {
-          max_y = element.y;
-        }
-      });
-
-      max_x += 50;
-      max_y += 50;
-
-      ds_eingabe.forEach((element) => {
-        let x_skaliert = Math.round((element.x / max_x) * breite);
+        let x_skaliert = Math.round((element.x / this.max_x_wert) * breite) + offset_rand_ursprung_x;
         //let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
-        let y_skaliert = Math.round((element.y / max_y) * hoehe);
+        let y_skaliert = Math.round(hoehe_original - (element.y / this.max_y_wert) * hoehe) - offset_rand_ursprung_y;
         ds_ausgabe.push({ x: x_skaliert, y: y_skaliert, color: element.color });
       });
-      
+
       // Array mischen
-      ds_ausgabe = this.shuffleArray(ds_ausgabe);
+      //ds_ausgabe = this.shuffleArray(ds_ausgabe);
       return ds_ausgabe;
     },
 
@@ -678,8 +669,8 @@ export default {
     },
     */
     generiere_datenpunkt_zufaellig() {
-      let max_x = 800;
-      let max_y = 450;
+      let max_x = this.max_x_wert;
+      let max_y = this.max_y_wert;
       let datenpunkt = {};
 
       datenpunkt.x = Math.floor(Math.random() * max_x);
@@ -690,8 +681,8 @@ export default {
       return datenpunkt;
     },
     generiere_prototyp_zufaellig() {
-      let max_x = 800;
-      let max_y = 450;
+      let max_x = this.max_x_wert;
+      let max_y = this.max_y_wert;
       let prototyp = {};
 
       prototyp.x = Math.floor(Math.random() * max_x);
@@ -711,6 +702,8 @@ export default {
       let breite = 800;
       let hoehe = 450;
       this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
+
+      this.zeichneLegende();
     },
 
     faerbe_prototypen() {
@@ -726,13 +719,13 @@ export default {
     },
 
     faerbe_datenpunkte(alle) {
-      for (let i = 0; i < this.datenpunkte.length; i++) {
+      for (let i = 0; i < this.datenpunkte_skaliert.length; i++) {
         if (alle || i < this.aktueller_datenpunkt) {
           let next_prototyp = this.gib_naechstgelegener_prototyp(
-            this.datenpunkte[i]
+            this.datenpunkte_skaliert[i]
           );
           let farbe = next_prototyp.color;
-          this.datenpunkte[i].color = farbe;
+          this.datenpunkte_skaliert[i].color = farbe;
           console.log(farbe);
         }
       }
@@ -836,8 +829,8 @@ export default {
 
     zeige_line_an() {
       this.zeichne_linie_datenpunkt_prototyp(
-        this.datenpunkte[this.aktueller_datenpunkt],
-        this.prototypen[this.aktueller_prototyp]
+        this.datenpunkte_skaliert[this.aktueller_datenpunkt],
+        this.prototypen_skaliert[this.aktueller_prototyp]
       );
     },
 
@@ -846,7 +839,9 @@ export default {
       let i = 0;
       let hightlight_farbe = "lightgreen";
 
-      this.datenpunkte.forEach((element) => {
+      this.datenpunkte_skaliert.forEach((element) => {
+        console.log("x:" + element.x);
+
         if (markierung && i == this.aktueller_datenpunkt) {
           this.zeichne_kreis(
             element.x,
@@ -883,7 +878,7 @@ export default {
       let hightlight_farbe;
       let radius;
 
-      this.prototypen.forEach((element) => {
+      this.prototypen_skaliert.forEach((element) => {
         hightlight_farbe = "white";
         radius = 14;
 
@@ -951,8 +946,8 @@ export default {
       let naechstgelegener_prototyp = null;
       let min_distanz = null;
       // pruefe alle prototypen und merke die naechste
-      for (let i = 0; i < this.prototypen.length; i++) {
-        let akt_prototyp = this.prototypen[i];
+      for (let i = 0; i < this.prototypen_skaliert.length; i++) {
+        let akt_prototyp = this.prototypen_skaliert[i];
         let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
         if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
           naechstgelegener_prototyp = akt_prototyp;
@@ -977,8 +972,8 @@ export default {
     kurz_zeichne_linie_datenpunkt_prototyp() {
       // pruefe_aktuelle
       this.zeichne_linie_datenpunkt_prototyp(
-        this.akt_datenpunkt,
-        this.akt_prototyp,
+        this.akt_datenpunkt_skaliert,
+        this.akt_prototyp_skaliert,
         "lightgreen",
         4
       );
@@ -987,8 +982,8 @@ export default {
     existiert_kuerzere_Distanz() {
       // bisher naechstgelegener Prototyp
       let akt_distanz = this.gib_distanz(
-        this.akt_datenpunkt,
-        this.akt_prototyp
+        this.akt_datenpunkt_skaliert,
+        this.akt_prototyp_skaliert
       );
 
       // naechsten aktualisieren
@@ -996,7 +991,7 @@ export default {
         this.naechstgelegener_prototyp == null ||
         akt_distanz < this.naechstgelegener_prototyp_distanz
       ) {
-        this.naechstgelegener_prototyp = this.akt_prototyp;
+        this.naechstgelegener_prototyp = this.akt_prototyp_skaliert;
         this.naechstgelegener_prototyp_distanz = akt_distanz;
         return true;
       } else {
@@ -1012,7 +1007,7 @@ export default {
 
     kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
       this.zeichne_linie_datenpunkt_prototyp(
-        this.akt_datenpunkt,
+        this.akt_datenpunkt_skaliert,
         this.naechstgelegener_prototyp,
         "red",
         3
@@ -1124,7 +1119,7 @@ export default {
         // Your animation code here
         if (
           this.naechstgelegener_prototyp != null &&
-          this.akt_datenpunkt != null
+          this.akt_datenpunkt_skaliert != null
         ) {
           this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
           this.zeichne_datenpunkte(true, true);
@@ -1144,7 +1139,7 @@ export default {
         this.animieren();
 
         setTimeout(() => {
-          resolve(); // Resolve the promise when the animation is done
+          resolve(); // Resolve the promise when the animation is done    
         }, this.animation_speed * 2);
       });
     },
@@ -1157,16 +1152,16 @@ export default {
       let i = 0;
 
       let x_neu =
-        (this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
+        (this.akt_datenpunkt_skaliert.x + this.naechstgelegener_prototyp.x) / 2;
       let y_neu =
-        (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
+        (this.akt_datenpunkt_skaliert.y + this.naechstgelegener_prototyp.y) / 2;
 
       let delta_x =
-        (this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) /
+        (this.akt_datenpunkt_skaliert.x - this.naechstgelegener_prototyp.x) /
         2 /
         schritte;
       let delta_y =
-        (this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) /
+        (this.akt_datenpunkt_skaliert.y - this.naechstgelegener_prototyp.y) /
         2 /
         schritte;
 
@@ -1192,12 +1187,14 @@ export default {
           } else {
             this.naechstgelegener_prototyp.x = x_neu;
             this.naechstgelegener_prototyp.y = y_neu;
+            
             this.refresh();
           }
         } catch (error) {
           //console.error("Caught custom exception:", error.message);
           this.letzte_prototyp.x = x_neu;
           this.letzte_prototyp.y = y_neu;
+          
           this.refresh();
         }
       };
@@ -1213,7 +1210,7 @@ export default {
 
       for (let i = 0; i < this.datenpunkte.length; i++) {
         let next_prototyp = this.gib_naechstgelegener_prototyp(
-          this.datenpunkte[i]
+          this.datenpunkte_skaliert[i]
         );
         this.datenpunkte[i].color = "#000000";
       }
@@ -1225,6 +1222,161 @@ export default {
       this.zeichne_datenpunkte(false, true);
       console.log("Page completed with image and files!");
     },
+
+    // ------------------------------------------------------------------------------
+
+
+    gibCanvasPosX(wert) {
+      return wert * this.vueCanvas.canvas.width;
+    },
+
+    gibCanvasPosY(wert) {
+      return (1 - wert) * this.vueCanvas.canvas.height;
+    },
+
+    gibCanvasBreite() {
+      return this.vueCanvas.canvas.width;
+    },
+
+    gibCanvasHoehe() {
+      return this.window.innerHeight - this.randabstandRechts;
+    },
+
+
+
+    loescheCanvas() {
+      this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+
+    zeichneText(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "20px Arial";
+      this.vueCanvas.textAlign = "left";
+      if (x - 5 > this.gibCanvasBreite() / 2) {
+        this.vueCanvas.textAlign = "right";
+        x -= 5;
+      }
+      this.vueCanvas.fillText(text, x, y);
+    },
+
+    zeichneTextMittig(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "20px Arial";
+      this.vueCanvas.textAlign = "left";
+      if (x > this.gibCanvasBreite() / 4 * 3) {
+        this.vueCanvas.textAlign = "right";
+        x -= 5;
+      }
+      if (x < this.gibCanvasBreite() / 4) {
+        this.vueCanvas.textAlign = "left";
+        x -= 5;
+      }
+      this.vueCanvas.fillText(text, x, y);
+    },
+
+
+    zeichneTextLegendeXachse(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "12px Arial";
+      this.vueCanvas.textAlign = "center";
+      this.vueCanvas.fillText(text, x, y);
+    },
+
+    zeichnePfeilLegendeXachse(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "bold 14px Arial";
+      this.vueCanvas.textAlign = "right";
+      this.vueCanvas.fillText(text, x, y);
+    },
+
+
+    zeichnePfeilLegendeYachse(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "bold 14px Arial";
+      this.vueCanvas.textAlign = "right";
+      this.vueCanvas.rotate(-Math.PI / 2);
+      this.vueCanvas.fillText(text, x, y);
+      this.vueCanvas.rotate(Math.PI / 2);
+    },
+
+    zeichneTextLegendeYachse(x, y, text, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.font = "12px Arial";
+      this.vueCanvas.textAlign = "center";
+      this.vueCanvas.rotate(-Math.PI / 2);
+      this.vueCanvas.fillText(text, x, y);
+      this.vueCanvas.rotate(Math.PI / 2);
+    },
+
+    zeichneLinie(xStart, yStart, xEnd, yEnd, color) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.beginPath();
+      this.vueCanvas.moveTo(xStart, yStart);
+      this.vueCanvas.lineWidth = 3;
+      // set line color
+      this.vueCanvas.strokeStyle = color;
+      this.vueCanvas.fillStyle = this.vueCanvas.lineTo(xEnd, yEnd);
+      this.vueCanvas.stroke();
+    },
+
+    zeichneRechteck(x, y, width, height, color, opacity) {
+      this.vueCanvas.fillStyle = color;
+      this.vueCanvas.globalAlpha = opacity;
+      this.vueCanvas.fillRect(x, y, width, height);
+      this.vueCanvas.globalAlpha = 1.0;
+    },
+
+    zeichneLegende() {
+
+      //let ds = this.model.baum.gibAktuellenDatensplit().datensatz;
+
+      let beschriftungXachse = this.beschriftungXachse; // "X-Wert"; //gibPraediktorvariablen()[0];
+      let beschriftungYachse = this.beschriftungYachse; // "Y-Wert"; //gibPraediktorvariablen()[1];
+      this.vueCanvas.font = "14px Arial";
+
+      let beschriftungXBreite = this.vueCanvas.measureText(beschriftungXachse).width + 6;
+      let beschriftungYBreite = this.vueCanvas.measureText(beschriftungYachse).width + 6;
+
+
+
+      console.log("zeichne Legende");
+      // X-Achse
+      this.zeichneRechteck(0, this.vueCanvas.canvas.height - 16, this.vueCanvas.canvas.width, this.vueCanvas.canvas.height * 2, "white", 1);
+      this.zeichneRechteck(12, this.vueCanvas.canvas.height - 14, this.vueCanvas.canvas.width - 20, 2, "black", 1);
+      this.zeichnePfeilLegendeXachse(this.vueCanvas.canvas.width - 1, this.vueCanvas.canvas.height - 8, ">", "black");
+      //this.zeichneRechteck(this.vueCanvas.canvas.width / 2 - (beschriftungXBreite / 2), this.vueCanvas.canvas.height - 12, beschriftungXBreite, 12, "white", 1);
+      this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width / 2, this.vueCanvas.canvas.height - 1, beschriftungXachse, "black");
+
+      this.zeichneTextLegendeXachse(14, this.vueCanvas.canvas.height - 1, "0", "grey");
+      this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width - 20, this.vueCanvas.canvas.height - 1, this.max_x_wert, "grey");
+
+      // Y-Achse
+
+      this.zeichneRechteck(0, 0, 16, this.vueCanvas.canvas.height - 14, "white", 1);
+      this.zeichneRechteck(12, 8, 2, this.vueCanvas.canvas.height - 20, "black", 1);
+      this.zeichnePfeilLegendeYachse(-1, 18, ">", "black");
+      //this.zeichneRechteck(0, this.vueCanvas.canvas.height / 2 - (beschriftungYBreite / 2), 11, beschriftungYBreite, "white", 1);
+      this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height / 2), 11, beschriftungYachse, "black");
+
+      this.zeichneTextLegendeYachse(-20, 10, this.max_y_wert, "grey");
+      this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height - 12), 10, "0", "gray");
+
+    },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    // ------------------------------------------------------------------------------
   },
 
   mounted() {
@@ -1240,6 +1392,7 @@ export default {
 
     document.onreadystatechange = () => {
       if (document.readyState == "complete") {
+        this.szenario_aendern();
         this.refresh();
         this.zeichne_hintergrund();
         this.zeichne_prototypen(false);