Uebersicht: keine Verbindungslinie mehr, wo nichts fliesst

Die duenne dunkle Linie gibt es nur noch im Bearbeitungsmodus, wo sie beim
Schieben zeigt, was mit was verbunden ist. In der Ansicht tragen die
laufenden Punkte den Weg allein.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 11:49:37 +02:00
co-authored by Claude Opus 5
parent f83f8fa2fd
commit 05db809140
2 changed files with 9 additions and 5 deletions
+2 -3
View File
@@ -3621,15 +3621,14 @@ svg.enf.enf-hoch { max-height: none; }
.enf .enf-zone-status { font-size: 15px; font-weight: 600; fill: var(--ton-schrift, #e8ede9); text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums; } .enf .enf-zone-status { font-size: 15px; font-weight: 600; fill: var(--ton-schrift, #e8ede9); text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums; }
/* --- Flüsse -------------------------------------------------------------- */ /* --- Flüsse -------------------------------------------------------------- */
/* Die Verbindungslinie zeichnet der Renderer nur im Bearbeitungsmodus - in
der Ansicht tragen die laufenden Punkte den Weg allein. */
.enf .enf-bett { .enf .enf-bett {
fill: none; stroke: #2b333a; stroke-linecap: round; fill: none; stroke: #2b333a; stroke-linecap: round;
stroke-width: 2.5; stroke-width: 2.5;
stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1;
transition: opacity .6s;
animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz); animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz);
} }
/* Fliesst etwas, tragen die Punkte den Weg allein. */
.enf .enf-fluss:not(.enf-still) .enf-bett { opacity: 0; }
@keyframes enf-zeichnen { to { stroke-dashoffset: 0; } } @keyframes enf-zeichnen { to { stroke-dashoffset: 0; } }
.enf .enf-strom, .enf .enf-strom,
.enf .enf-strom-hof { .enf .enf-strom-hof {
+7 -2
View File
@@ -457,7 +457,11 @@
flussZeichnen(k) { flussZeichnen(k) {
const d = this.flussPfad(k); const d = this.flussPfad(k);
const g = el("g", { class: "enf-fluss enf-still", style: `--farbe:${k.farbe};--verz:${k.tiefe * 110 + 150}ms` }, this.ebeneFluss); const g = el("g", { class: "enf-fluss enf-still", style: `--farbe:${k.farbe};--verz:${k.tiefe * 110 + 150}ms` }, this.ebeneFluss);
const bett = el("path", { d, class: "enf-bett", pathLength: "1" }, g); // Das Bett gibt es nur beim Bearbeiten: dort zeigt es, was mit was
// verbunden ist, waehrend man die Kreise schiebt. In der Ansicht
// erzaehlen die laufenden Punkte den Weg, und wo nichts fliesst, soll
// auch keine Linie stehen.
const bett = this.bearbeiten ? el("path", { d, class: "enf-bett", pathLength: "1" }, g) : null;
const hof = el("path", { d, class: "enf-strom-hof" }, g); const hof = el("path", { d, class: "enf-strom-hof" }, g);
const strom = el("path", { d, class: "enf-strom" }, g); const strom = el("path", { d, class: "enf-strom" }, g);
this.elemente[k.id].fluss = { g, bett, hof, strom }; this.elemente[k.id].fluss = { g, bett, hof, strom };
@@ -646,7 +650,8 @@
const f = this.elemente[kind.id] && this.elemente[kind.id].fluss; const f = this.elemente[kind.id] && this.elemente[kind.id].fluss;
if (f && (kind === k || kind.elternWirksam === k)) { if (f && (kind === k || kind.elternWirksam === k)) {
const d = this.flussPfad(kind); const d = this.flussPfad(kind);
f.bett.setAttribute("d", d); f.hof.setAttribute("d", d); f.strom.setAttribute("d", d); if (f.bett) f.bett.setAttribute("d", d);
f.hof.setAttribute("d", d); f.strom.setAttribute("d", d);
} }
} }
}; };