Bugfix: Geschachtelte ausklappbare Bereiche skalieren
All checks were successful
ci/woodpecker/push/default Pipeline was successful
All checks were successful
ci/woodpecker/push/default Pipeline was successful
This commit is contained in:
co
parent
8d5d3b8468
commit
e208743f13
1 changed files with 79 additions and 56 deletions
117
src/App.vue
117
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>
|
||||
|
|
@ -96,8 +94,9 @@
|
|||
Vertiefung: weitere Einstellungsmöglichkeiten
|
||||
</button>
|
||||
<div class="content" id="content0" style="text-align: center">
|
||||
<br>
|
||||
Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und {{ this.bezeichnung_prototypen }}.
|
||||
<br />
|
||||
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> 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 />
|
||||
+
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary collapsible" style="background: grey">
|
||||
manuell verändern
|
||||
</button>
|
||||
<div class="content" id="content2" style="text-align: left">
|
||||
In jeder Zeile wird ein Protoyp mit den zugehörigen Werten
|
||||
dargestellt:<br /><br />
|
||||
<b> x; y</b><br />
|
||||
<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,
|
||||
|
|
@ -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 y_neu = (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
|
||||
let x_neu =
|
||||
(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,7 +1038,9 @@ 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]
|
||||
);
|
||||
this.datenpunkte[i].color = "#000000";
|
||||
}
|
||||
|
||||
|
|
@ -1078,7 +1103,6 @@ export default {
|
|||
//------------------------------------------------------------
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
|
|
@ -1172,4 +1196,3 @@ export default {
|
|||
border-color: #007bff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue