diff --git a/css/solar.css b/css/solar.css index 833d5a0..2d93969 100644 --- a/css/solar.css +++ b/css/solar.css @@ -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; } /* --- Flüsse -------------------------------------------------------------- */ +/* Die Verbindungslinie zeichnet der Renderer nur im Bearbeitungsmodus - in + der Ansicht tragen die laufenden Punkte den Weg allein. */ .enf .enf-bett { fill: none; stroke: #2b333a; stroke-linecap: round; stroke-width: 2.5; 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); } -/* 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; } } .enf .enf-strom, .enf .enf-strom-hof { diff --git a/js/solar/energiefluss.js b/js/solar/energiefluss.js index e6a7172..fe86ae6 100644 --- a/js/solar/energiefluss.js +++ b/js/solar/energiefluss.js @@ -457,7 +457,11 @@ flussZeichnen(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 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 strom = el("path", { d, class: "enf-strom" }, g); this.elemente[k.id].fluss = { g, bett, hof, strom }; @@ -646,7 +650,8 @@ const f = this.elemente[kind.id] && this.elemente[kind.id].fluss; if (f && (kind === k || kind.elternWirksam === k)) { 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); } } };