. let glyph; if (z.bild && ZONENBILDER[z.bild]) { glyph = el("g", { class: "enf-zone-bild", transform: `translate(${(-r * 0.52 - 9.6).toFixed(1)} ${(zy - 9.6).toFixed(1)}) scale(.8)` }, koerper); glyph.innerHTML = ZONENBILDER[z.bild]; } else { glyph = el("text", { class: "enf-zone-glyph", x: -r * 0.52, y: zy }, koerper); glyph.textContent = z.zeichen || ""; } el("title", null, glyph).textContent = z.name; const nm = el("text", { class: "enf-zone-name", x: -r * 0.36, y: zy }, koerper); nm.textContent = z.name; const st = el("text", { class: "enf-zone-status", x: r * 0.6, y: zy }, koerper); st.textContent = "Aus"; if (!this.bearbeiten) { glyph.id = z.symbol; st.id = z.status; } }); } if (this.bearbeiten) this.ziehbarMachen(g, k); this.elemente[k.id] = { g, ring, wert, neben, zeichen, symbol, fuellung, fluss: null, segmente: [] }; } flussPfad(k) { const e = k.elternWirksam; const a = this.punkt(e), b = this.punkt(k); // Knick: quer vom Elternkreis senkrecht los, dann waagerecht in den Kreis // (Ecke x vom Eltern, y vom Kind); hochkant genau umgekehrt. let c; if (Math.abs(a[0] - b[0]) < 30 || Math.abs(a[1] - b[1]) < 30) { c = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]; } else { c = this.hochkant ? [b[0], a[1]] : [a[0], b[1]]; } const rand = (p, q, r) => { const dx = q[0] - p[0], dy = q[1] - p[1], l = Math.hypot(dx, dy) || 1; return [p[0] + dx / l * (r + 20), p[1] + dy / l * (r + 20)]; }; const s = rand(a, c, this.radius(e)), z = rand(b, c, this.radius(k)); return `M${s[0].toFixed(1)} ${s[1].toFixed(1)} Q${c[0]} ${c[1]} ${z[0].toFixed(1)} ${z[1].toFixed(1)}`; } 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); 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 }; } /* ------------------------------------------------------ Aktualisieren */ aktualisieren(daten) { this.letzte = daten; if (!this.svg) return; const m = leser(daten); for (const k of this.sichtbareKnoten()) { const e = this.elemente[k.id]; if (!e) continue; let z; try { z = k.lesen(m, k.optionenWirksam) || {}; } catch (fehler) { console.warn("Energiefluss: " + k.id, fehler); continue; } this.knotenSetzen(k, e, z); if (e.fluss) this.flussSetzen(e.fluss, z.fluss || 0); } } knotenSetzen(k, e, z) { // Werte const wert = z.wert !== undefined ? z.wert : leistungText(z.leistung || 0); if (e.wert.isConnected && e.wert.textContent !== wert) e.wert.textContent = wert; const neben = z.neben || ""; if (e.neben.isConnected && e.neben.textContent !== neben) e.neben.textContent = neben; e.g.classList.toggle("enf-ruhe", !!z.ruhe && k.aktiv); // Ring: Segmente in Hundertsteln des Umfangs let segmente = z.segmente || (z.leistung !== undefined ? [{ w: Math.abs(z.leistung), farbe: k.farbe }] : []); segmente = this.segmenteZusammenfassen(segmente); const skala = k.skala || 15000; while (e.segmente.length < segmente.length) { e.segmente.push(el("circle", { r: this.radius(k), class: "enf-bogen", pathLength: "100" }, e.ring)); } let start = 0; e.segmente.forEach((kreis, i) => { const s = segmente[i]; let laenge = s ? Math.max(0, Math.min(100 - start, (s.w / skala) * 100)) : 0; if (laenge < 0.4) laenge = 0; const luecke = laenge > 0 && start > 0 ? 0.6 : 0; const a = (laenge - luecke).toFixed(2), off = (-(start + luecke)).toFixed(2); const schluessel = a + "|" + off + "|" + (s ? s.farbe : ""); if (kreis._stand !== schluessel) { kreis._stand = schluessel; kreis.style.strokeDasharray = `${Math.max(0, a)} 100`; kreis.style.strokeDashoffset = off; if (s) kreis.style.stroke = s.farbe; } start += laenge; }); // Zustand des Symbols const zu = z.zustand || {}; e.g.classList.toggle("enf-an", !!zu.an); e.g.classList.toggle("enf-laden", !!zu.laden); if (zu.stand !== undefined && isFinite(zu.stand)) { const s = Math.max(0, Math.min(1, zu.stand)).toFixed(3); if (e.g.style.getPropertyValue("--stand") !== s) { e.g.style.setProperty("--stand", s); if (e.fuellung) e.fuellung.style.setProperty("--stand", s); } } if (zu.temps) { zu.temps.forEach((t, i) => { const r = e.symbol.querySelector(".enf-s-t" + i); const f = tempFarbe(t); if (r && r._f !== f) { r._f = f; r.style.fill = f; } }); } // Plaketten const zeichen = z.zeichen || []; const sig = zeichen.map(x => x.art + ":" + (x.text || "") + ":" + (x.titel || "")).join("|"); if (e.zeichen._sig !== sig) { e.zeichen._sig = sig; this.zeichenSetzen(k, e.zeichen, zeichen); } } /** Anteile ausgeschalteter Kreise fallen ins letzte Segment. */ segmenteZusammenfassen(segmente) { const aus = segmente.filter(s => s.knoten && this.nachId[s.knoten] && !this.nachId[s.knoten].aktiv); if (!aus.length) return segmente; const rest = segmente.filter(s => !aus.includes(s)).map(s => Object.assign({}, s)); if (rest.length) rest[rest.length - 1].w += aus.reduce((a, s) => a + Math.max(0, s.w), 0); return rest; } zeichenSetzen(k, gruppe, zeichen) { gruppe.innerHTML = ""; const r = this.radius(k); zeichen.forEach((z, i) => { const art = ZEICHEN[z.art]; if (!art) return; // Außen am Ring rechts unten, eine Plakette je 36 Grad - so bleiben // Wert und Zeile darunter frei. const winkel = (88 + i * 36) * Math.PI / 180; const px = Math.sin(winkel) * (r + 12), py = -Math.cos(winkel) * (r + 12); const p = el("g", { class: "enf-plakette", transform: `translate(${px.toFixed(1)} ${py.toFixed(1)})`, style: `--pfarbe:${art.farbe};--i:${i}` }, gruppe); if (z.titel) el("title", null, p).textContent = z.titel; if (z.text) { const breite = 26 + z.text.length * 10; el("rect", { x: -16, y: -16, width: breite, height: 32, rx: 16 }, p); el("text", { class: "enf-plakette-text", x: 12, y: 1 }, p).textContent = z.text; } else { el("circle", { r: 16 }, p); } el("text", { class: "enf-plakette-glyph", x: 0, y: 1 }, p).textContent = art.glyph; }); } flussSetzen(f, w) { const a = Math.abs(w); const still = a < 15; const breite = still ? 0 : 3.5 + 6.5 * (1 - Math.exp(-a / 3000)); // Schneller bei mehr Leistung: 2,6 s je Abschnitt bei wenig, 0,7 s bei viel. const dauer = still ? 0 : 0.7 + 1.9 * Math.exp(-a / 3000); const sig = still ? "still" : breite.toFixed(1) + "|" + dauer.toFixed(2) + "|" + (w < 0); if (f._sig === sig) return; f._sig = sig; f.g.classList.toggle("enf-still", still); f.g.classList.toggle("enf-rueck", w < 0); f.g.style.setProperty("--breite", breite.toFixed(1)); f.g.style.setProperty("--dauer", dauer.toFixed(2) + "s"); } pausieren() { if (!this.svg) return; this.svg.classList.toggle("enf-pause", !this.sichtbar || document.hidden); } /* -------------------------------------------------------- Bearbeiten */ ziehbarMachen(g, k) { g.classList.add("enf-ziehbar"); g.addEventListener("pointerdown", ev => { ev.preventDefault(); g.setPointerCapture(ev.pointerId); const pt = this.svg.createSVGPoint(); const svgPunkt = e2 => { pt.x = e2.clientX; pt.y = e2.clientY; return pt.matrixTransform(this.svg.getScreenCTM().inverse()); }; const start = svgPunkt(ev); const [x0, y0] = k.lage; g.classList.add("enf-zieht"); const bewegen = e2 => { const p = svgPunkt(e2); k.lage = [Math.round((x0 + p.x - start.x) / 10) * 10, Math.round((y0 + p.y - start.y) / 10) * 10]; g.setAttribute("transform", `translate(${k.lage[0]} ${k.lage[1]})`); for (const kind of this.knoten) { 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); } } }; const ende = () => { g.removeEventListener("pointermove", bewegen); g.classList.remove("enf-zieht"); this.rahmenSetzen(); if (this.opt.onVerschoben) this.opt.onVerschoben(k.id, k.lage[0], k.lage[1]); }; g.addEventListener("pointermove", bewegen); g.addEventListener("pointerup", ende, { once: true }); g.addEventListener("pointercancel", ende, { once: true }); }); } } window.Energiefluss = Energiefluss; })();