Bugfix: Geschachtelte ausklappbare Bereiche skalieren

src/App.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <img
     id="kein_bild"
     src="./assets/img/weiss_pixel.png"
@@ -33,8 +32,7 @@
   <b>{{ this.bezeichnung_datenpunkte }}</b
   >.<br />
   Die <b>x-Markierungen</b> auf der Karte entsprechen den
-  <b>{{ this.bezeichnung_prototypen }}</b
+  <b>{{ this.bezeichnung_prototypen }}</b>
-  >
   <br />
   <br />
   <div>
@@ -80,7 +78,7 @@
         <div class="column">
           {{ this.bezeichnung_aktueller_prototyp }}:
           <!-- <button @click="voriger_prototyp">-</button> -->
-          <b style="font-size: x-large">{{ aktueller_prototyp + 1}}</b>
+          <b style="font-size: x-large">{{ aktueller_prototyp + 1 }}</b>
           <!-- <button @click="naechster_prototyp">+</button> -->
         </div>
       </div>
@@ -96,8 +94,9 @@
       Vertiefung: weitere Einstellungsmöglichkeiten
     </button>
     <div class="content" id="content0" style="text-align: center">
-      <br>
+      <br />
-      Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und {{ this.bezeichnung_prototypen }}.
+      Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und
+      {{ this.bezeichnung_prototypen }}.
       <div class="row">
         <div class="column" style="text-align: center">
           <h3>{{ this.bezeichnung_datenpunkte }}</h3>
@@ -120,24 +119,6 @@
 
           <br />
           <br />
-
-          <button class="btn btn-primary collapsible" style="background: grey">
-            manuell verändern
-          </button>
-          <div class="content" id="content1" style="text-align: left">
-            In jeder Zeile wird ein Datenpunkt mit den zugehörigen Werten
-            dargestellt:<br /><br />
-            <b>&nbsp;&nbsp;&nbsp; x; y</b><br />
-            <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
-            </button>
-          </div>
         </div>
 
         <div class="column" style="text-align: center">
@@ -156,17 +137,37 @@
             class="btn btn-primary"
             @click="update_anzahl_prototypen(++this.anzahl_prototypen)"
           >
-            +</button
+            +
-          >          <br />
-          <br />
-
-          <button class="btn btn-primary collapsible" style="background: grey">
-            manuell verändern
           </button>
-          <div class="content" id="content2" style="text-align: left">
+          <br />
-            In jeder Zeile wird ein Protoyp mit den zugehörigen Werten
+          <br />
-            dargestellt:<br /><br />
+        </div>
-            <b>&nbsp;&nbsp;&nbsp; x; y</b><br />
+      </div>
+
+      <button class="btn btn-primary collapsible" style="background: grey">
+        manuell verändern
+      </button>
+      <div class="content" id="content1" style="text-align: center">
+        In jeder Zeile werden die zugehörigen Werte dargestellt für einen...
+        <br />
+        <div class="row">
+          
+          <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>
+            <br />
+            <button class="btn btn-primary" @click="textarea_2_datensatz">
+              Datenpunkte verändern
+            </button>
+          </div>
+          <div class="column" style="text-align: center">
+            <b>Prototyp</b><br />
+            x; y<br />
             <textarea
               v-model="txt_prototypensatz"
               placeholder="add multiple lines"
@@ -199,13 +200,11 @@
   </div>
   <br />
   <br />
-</div>
 </template>
 
 <script>
-
 // Import the generateDifferentColors function from generateColors.js
-import { generateDifferentColors } from './generateColors.js'
+import { generateDifferentColors } from "./generateColors.js";
 
 export default {
   name: "App",
@@ -381,7 +380,11 @@ export default {
         for (let i = 0; i < zeilen.length; i++) {
           if (zeilen[i].includes(";")) {
             let zeile = zeilen[i].split(";");
-            let ds = { x: parseInt(zeile[0]), y: parseInt(zeile[1]), color: "black" };
+            let ds = {
+              x: parseInt(zeile[0]),
+              y: parseInt(zeile[1]),
+              color: "black",
+            };
 
             neuer_ds.push(ds);
           }
@@ -423,7 +426,11 @@ export default {
         for (let i = 0; i < zeilen.length; i++) {
           if (zeilen[i].includes(";")) {
             let zeile = zeilen[i].split(";");
-            let ps = { x: parseInt(zeile[0]), y: parseInt(zeile[1]), color: "blue" };
+            let ps = {
+              x: parseInt(zeile[0]),
+              y: parseInt(zeile[1]),
+              color: "blue",
+            };
 
             neuer_ps.push(ps);
           }
@@ -464,7 +471,7 @@ export default {
       // Original Prototypen laden
       console.log(this.prototypen_original);
       console.log(this.prototypen);
-      this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original))
+      this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original));
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
         this.anzahl_prototypen = new_value;
@@ -487,7 +494,7 @@ export default {
         }
       }
       // Original Prototypen merken
-      this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen))
+      this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen));
     },
     /*
     update_zeichnung_child_component() {
@@ -547,7 +554,9 @@ export default {
     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]);
+          let next_prototyp = this.gib_naechstgelegener_prototyp(
+            this.datenpunkte[i]
+          );
           let farbe = next_prototyp.color;
           this.datenpunkte[i].color = farbe;
           console.log(farbe);
@@ -716,7 +725,13 @@ export default {
           );
         }
 
-        this.zeichne_kreis(element.x, element.y, radius, "white", element.color);
+        this.zeichne_kreis(
+          element.x,
+          element.y,
+          radius,
+          "white",
+          element.color
+        );
 
         this.zeichne_x(element.x, element.y, element.color);
         console.log(element.color);
@@ -774,7 +789,6 @@ export default {
     },
 
     berechne_neue_pos_haelfte(x1, y1, x2, y2) {
-
       let neue_pos = {
         x: (x1 + x2) / 2,
         y: (y1 + y2) / 2,
@@ -910,7 +924,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); // delay for zeitspanne 
+        }, zeitspanne); // delay for zeitspanne
       });
     },
 
@@ -934,7 +948,10 @@ export default {
     zeige_naechsten_bekannten_prototyp() {
       return new Promise((resolve) => {
         // Your animation code here
-        if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) {
+        if (
+          this.naechstgelegener_prototyp != null &&
+          this.akt_datenpunkt != null
+        ) {
           this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
           this.zeichne_datenpunkte(true, true);
           this.zeichne_prototypen(true);
@@ -965,13 +982,19 @@ export default {
       }
       let i = 0;
 
-      let x_neu = (this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
+      let x_neu =
-      let y_neu = (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
+        (this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
+      let y_neu =
+        (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
 
       let delta_x =
-        (this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) / 2 / schritte;
+        (this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) /
+        2 /
+        schritte;
       let delta_y =
-        (this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) / 2 / schritte;
+        (this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) /
+        2 /
+        schritte;
 
       // zeichnen definieren
       var draw = () => {
@@ -1015,10 +1038,12 @@ export default {
       this.aktueller_datenpunkt = 0;
 
       for (let i = 0; i < this.datenpunkte.length; i++) {
-          let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
+        let next_prototyp = this.gib_naechstgelegener_prototyp(
-          this.datenpunkte[i].color = "#000000";
+          this.datenpunkte[i]
+        );
+        this.datenpunkte[i].color = "#000000";
       }
-    
+
       this.loesche_zeichenflaeche();
       this.refresh();
       this.zeichne_hintergrund();
@@ -1078,7 +1103,6 @@ export default {
 //------------------------------------------------------------
 </script>
 
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -1101,7 +1125,7 @@ export default {
 .column {
   flex: 50%;
   padding: 10px;
-  /* border: solid black 1px;
+ /*border: solid black 1px;
   /*height: 300px; /* Should be removed. Only for demonstration */
 }
 
@@ -1172,4 +1196,3 @@ export default {
   border-color: #007bff;
 }
 </style>
-