mhoennigandClaude Opus 4.8
779ac10cdf
Auf kleinen Screens brach die Diagramm-Titelzeile um, weil die Download-Buttons mit „SVG“/„PNG“-Textlabels zu breit sind. Sie klappen jetzt auf Mobil hinter einen einzelnen Download-Icon zusammen (dlGroup/dlTrigger/dlmenu); ein Tipp zeigt die Formatwahl als Dropdown-Overlay unter der Kopfzeile, Auswahl oder Tipp daneben schließt. „Kopieren“ bleibt sichtbar. Desktop unverändert (SVG/PNG inline). Neuer i18n-Key downloadMenu (9 Sprachen), SPEC §9 nachgeführt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1939 lines
108 KiB
HTML
1939 lines
108 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Werkbaum – WBS-Editor für Projektstrukturplan & Feature-Tree (Und/Oder-Baum)</title>
|
||
<meta name="description" content="Werkbaum ist ein textbasierter Editor für Projektstrukturpläne (PSP / Work Breakdown Structure, WBS): Struktur als Text schreiben, das Und/Oder-Baum-Diagramm entsteht live. Ebenso als Feature-Tree für Anforderungen (Requirements) und Aufwandsschätzung.">
|
||
<link rel="icon" type="image/svg+xml" href="../docs/brand/favicon.svg">
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--paper:#F3F6F9;
|
||
--grid:rgba(36,52,71,.055);
|
||
--ink:#243447;
|
||
--line:#41556E;
|
||
--card:#FFFFFF;
|
||
--muted:#6B7A8C;
|
||
--or:#0F766E;
|
||
--warn:#B45309;
|
||
--r:8px;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{
|
||
font-family:'IBM Plex Sans',system-ui,sans-serif;
|
||
color:var(--ink);
|
||
background:
|
||
repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
|
||
repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
|
||
var(--paper);
|
||
/* Mobile Viewport-Höhe: 100vh ist die *große* Höhe (inkl. Fläche hinter
|
||
der unteren Browserleiste) — Footer/Editor-Titelzeile rutschen dahinter.
|
||
100dvh folgt der sichtbaren Fläche, versagt aber bei Browsern mit
|
||
Overlay-Leiste (z. B. Brave). Deshalb setzt JS zusätzlich --app-height
|
||
aus window.visualViewport.height (die wirklich sichtbare Höhe). Reihen-
|
||
folge = Fallback-Kaskade: vh → dvh → exakte JS-Höhe. */
|
||
height:100vh;
|
||
height:100dvh;
|
||
height:var(--app-height, 100dvh);
|
||
overflow:hidden;
|
||
display:flex;flex-direction:column;
|
||
padding:24px 20px 12px;
|
||
}
|
||
header{max-width:1200px;width:100%;margin:0 auto 16px;flex:0 0 auto}
|
||
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
||
.header-tools{display:flex;align-items:center;gap:12px}
|
||
.fsbtn{
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
width:30px;height:29px;padding:0;cursor:pointer;
|
||
border:1px solid rgba(36,52,71,.2);border-radius:8px;
|
||
background:var(--card);color:var(--muted);
|
||
}
|
||
.fsbtn svg{display:block}
|
||
.fsbtn:hover{border-color:var(--or);color:var(--or)}
|
||
.fsbtn.active{background:var(--or);color:#fff;border-color:var(--or)}
|
||
/* Vollbild: Panels nutzen fast die ganze Fensterbreite; es bleibt ein
|
||
schmaler Rand (halber Panel-Zwischenraum = 7 px), damit es nicht gedrängt
|
||
wirkt. */
|
||
body.fullscreen{padding-left:7px;padding-right:7px}
|
||
body.fullscreen header,
|
||
body.fullscreen .app,
|
||
body.fullscreen .site-footer{max-width:none}
|
||
h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
|
||
header p{margin-top:4px;color:var(--muted);font-size:.9rem}
|
||
.sub-short{display:none} /* Kurzfassung nur auf kleinem Bildschirm */
|
||
.langsel{
|
||
display:inline-flex;flex:0 0 auto;
|
||
border:1px solid rgba(36,52,71,.2);border-radius:999px;overflow:hidden;
|
||
}
|
||
.langsel button{
|
||
border:0;background:var(--card);cursor:pointer;color:var(--muted);
|
||
font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.04em;
|
||
padding:5px 10px;
|
||
}
|
||
.langsel button + button{border-left:1px solid rgba(36,52,71,.14)}
|
||
.langsel button:hover:not(.active){color:var(--or)}
|
||
.langsel button.active{background:var(--or);color:#fff}
|
||
.langmore{letter-spacing:0;padding:5px 8px;font-weight:600}
|
||
.langsel .lang-extra{display:none} /* PL/RU/HI erst nach Aufklappen */
|
||
.langsel.expanded .lang-extra{display:block}
|
||
.site-footer{
|
||
max-width:1200px;margin:14px auto 0;
|
||
color:var(--muted);font-size:.78rem;text-align:center;
|
||
}
|
||
.site-footer a{color:var(--or);text-decoration:none}
|
||
.site-footer a:hover{text-decoration:underline}
|
||
.site-footer .vibe{cursor:help;text-decoration:underline dotted;text-underline-offset:2px}
|
||
|
||
/* Horizontal (Toggle aus): Diagramm oben, Editor unten — je volle Breite.
|
||
Vertikal (Toggle an, .side): Editor links, Diagramm rechts.
|
||
Zwischen beiden liegt ein verschiebbarer Gutter (Splitter). */
|
||
.app{
|
||
max-width:1200px;width:100%;margin:0 auto;
|
||
flex:1 1 auto;min-height:0;
|
||
display:grid;gap:0;
|
||
grid-template-columns:minmax(0,1fr);
|
||
grid-template-rows:var(--drow,60%) 14px minmax(0,1fr);
|
||
grid-template-areas:"diagram" "gutter" "editor";
|
||
align-items:stretch;
|
||
}
|
||
.app.side{
|
||
grid-template-columns:var(--col,360px) 14px minmax(0,1fr);
|
||
grid-template-rows:minmax(0,1fr);
|
||
grid-template-areas:"editor gutter diagram";
|
||
}
|
||
.panel.editor{grid-area:editor}
|
||
.panel.right{grid-area:diagram}
|
||
.gutter{grid-area:gutter}
|
||
/* Splitter/Gutter: stapelweise horizontal, seitlich vertikal. */
|
||
.gutter{
|
||
position:relative;align-self:stretch;justify-self:stretch;
|
||
height:14px;cursor:row-resize;touch-action:none;
|
||
}
|
||
.app.side .gutter{height:auto;width:14px;cursor:col-resize}
|
||
.gutter::before{
|
||
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
|
||
width:46px;height:4px;border-radius:999px;background:rgba(36,52,71,.16);
|
||
transition:background .15s;
|
||
}
|
||
.app.side .gutter::before{width:4px;height:46px}
|
||
.gutter:hover::before,.gutter.dragging::before{background:var(--or)}
|
||
|
||
/* Minimieren: Panel auf seine Titelzeile schrumpfen, Körper ausblenden.
|
||
'a' = Diagramm minimiert (Editor maximal), 'b' = Editor minimiert. */
|
||
.panel.collapsed .editor-body,
|
||
.panel.collapsed .diagram,
|
||
.panel.collapsed .warnings{display:none}
|
||
.panel.collapsed .copybtn,
|
||
.panel.collapsed .switch,
|
||
.panel.collapsed .seg{display:none}
|
||
.panel.collapsed .panel-head{cursor:pointer}
|
||
.panel.collapsed .panel-head>span{cursor:pointer}
|
||
/* Gestapelt: kollabiertes Panel = Titelzeile (auto), anderes füllt. */
|
||
.app:not(.side).collapse-diagram{grid-template-rows:auto 14px minmax(0,1fr)}
|
||
.app:not(.side).collapse-editor{grid-template-rows:minmax(0,1fr) 14px auto}
|
||
/* Seitlich: schmaler vertikaler Streifen mit gedrehter Beschriftung. */
|
||
.app.side.collapse-editor{grid-template-columns:auto 14px minmax(0,1fr)}
|
||
.app.side.collapse-diagram{grid-template-columns:minmax(0,1fr) 14px auto}
|
||
.app.side .panel.collapsed{align-self:stretch}
|
||
.app.side .panel.collapsed .panel-head{
|
||
flex-direction:column;align-items:center;gap:12px;
|
||
height:100%;padding:12px 6px;border-bottom:0;
|
||
}
|
||
.app.side .panel.collapsed .panel-head>span{
|
||
writing-mode:vertical-rl;transform:rotate(180deg);
|
||
margin:0;white-space:nowrap;
|
||
}
|
||
.app.side .panel.collapsed .winbtns{flex-direction:column}
|
||
|
||
/* Schmaler Viewport: Seitenmodus fällt auf gestapelt zurück. */
|
||
@media (max-width:820px){
|
||
.app.side{
|
||
grid-template-columns:minmax(0,1fr);
|
||
grid-template-rows:var(--drow,60%) 14px minmax(0,1fr);
|
||
grid-template-areas:"diagram" "gutter" "editor";
|
||
}
|
||
.app.side.collapse-diagram{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 14px minmax(0,1fr)}
|
||
.app.side.collapse-editor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 14px auto}
|
||
.app.side .panel.collapsed .panel-head{flex-direction:row;align-items:center;height:auto;padding:10px 16px}
|
||
.app.side .panel.collapsed .panel-head>span{writing-mode:horizontal-tb;transform:none}
|
||
.app.side .panel.collapsed .winbtns{flex-direction:row}
|
||
.app.side .gutter{height:14px;width:auto;cursor:row-resize}
|
||
.app.side .gutter::before{width:46px;height:4px}
|
||
}
|
||
|
||
/* Editor-Innenaufbau: Textarea + aufklappbare Agenda.
|
||
Horizontal nebeneinander, vertikal (.side) untereinander. */
|
||
.editor-body{display:flex;align-items:stretch;flex:1 1 auto;min-height:0}
|
||
.editor-body textarea{flex:1 1 auto;min-width:0;min-height:0}
|
||
.agenda{
|
||
flex:0 0 auto;
|
||
border-left:1px dashed rgba(36,52,71,.18);
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.agenda[open]{width:300px}
|
||
.agenda>summary{
|
||
list-style:none;cursor:pointer;white-space:nowrap;
|
||
padding:10px 16px;
|
||
font-family:'IBM Plex Mono',monospace;
|
||
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
|
||
display:flex;align-items:center;gap:7px;
|
||
}
|
||
.agenda>summary::-webkit-details-marker{display:none}
|
||
.agenda>summary::before{content:'▸';display:inline-block;transition:transform .15s}
|
||
.agenda[open]>summary::before{transform:rotate(90deg)}
|
||
.agenda{min-height:0}
|
||
.agenda[open]{overflow:hidden}
|
||
.agenda .hint{border-top:0;flex:1 1 auto;min-height:0;overflow:auto}
|
||
.side .editor-body{flex-direction:column;align-items:stretch}
|
||
.side .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)}
|
||
.side .agenda[open]{width:auto}
|
||
|
||
.panel{
|
||
background:var(--card);
|
||
border:1px solid rgba(15,118,110,.30); /* dezentes Petrol */
|
||
border-radius:12px;
|
||
overflow:hidden;
|
||
display:flex;flex-direction:column;min-height:0;min-width:0;
|
||
}
|
||
.panel-head{
|
||
flex:0 0 auto;
|
||
padding:10px 16px;
|
||
display:flex;justify-content:space-between;align-items:center;gap:14px;
|
||
font-family:'IBM Plex Mono',monospace;
|
||
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
|
||
color:var(--muted);
|
||
border-bottom:1px solid rgba(36,52,71,.1);
|
||
flex-wrap:wrap;
|
||
}
|
||
.panel-head>span{margin-right:auto}
|
||
.switch{
|
||
display:flex;align-items:center;gap:7px;cursor:pointer;
|
||
text-transform:none;letter-spacing:0;
|
||
font-family:'IBM Plex Sans',sans-serif;font-size:.78rem;color:var(--muted);
|
||
}
|
||
.switch input{position:absolute;opacity:0;width:0;height:0}
|
||
.switch i{
|
||
width:30px;height:17px;border-radius:999px;background:#C6CFD8;
|
||
position:relative;transition:background .15s;flex:0 0 auto;
|
||
}
|
||
.switch i::before{
|
||
content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
|
||
border-radius:50%;background:#fff;transition:left .15s;
|
||
box-shadow:0 1px 2px rgba(36,52,71,.25);
|
||
}
|
||
.switch input:checked + i{background:var(--or)}
|
||
.switch input:checked + i::before{left:15px}
|
||
.seg{
|
||
display:inline-flex;align-items:stretch;
|
||
border:1px solid rgba(36,52,71,.2);border-radius:999px;overflow:hidden;
|
||
}
|
||
.seg label{display:flex;cursor:pointer}
|
||
.seg input{position:absolute;opacity:0;width:0;height:0}
|
||
.seg span{
|
||
display:grid;place-items:center;padding:4px 10px;color:var(--muted);
|
||
transition:background .15s,color .15s;
|
||
}
|
||
.seg span svg{display:block}
|
||
.seg label + label span{border-left:1px solid rgba(36,52,71,.14)}
|
||
.seg input:checked + span{background:var(--or);color:#fff}
|
||
.seg input:focus-visible + span{outline:2px solid var(--or);outline-offset:-2px}
|
||
.winbtns{display:inline-flex;gap:4px;align-items:center}
|
||
.winbtn{
|
||
width:19px;height:19px;display:grid;place-items:center;
|
||
border:1px solid rgba(36,52,71,.2);border-radius:5px;
|
||
background:var(--card);color:var(--muted);cursor:pointer;
|
||
font-size:.72rem;line-height:1;padding:0;
|
||
}
|
||
.winbtn:hover{border-color:var(--or);color:var(--or)}
|
||
.winbtn.active{background:var(--or);color:#fff;border-color:var(--or)}
|
||
.copybtn{
|
||
color:var(--muted);background:var(--card);
|
||
border:1px solid rgba(36,52,71,.2);border-radius:6px;
|
||
padding:3px 6px;cursor:pointer;
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
}
|
||
.copybtn:hover,.copybtn.done{border-color:var(--or);color:var(--or)}
|
||
.copybtn svg{display:block;width:15px;height:15px}
|
||
.copybtn .ic-done{display:none}
|
||
.copybtn.done .ic-copy{display:none}
|
||
.copybtn.done .ic-done{display:block}
|
||
.dlbtn{gap:3px}
|
||
.dl-label{font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.02em}
|
||
/* Download-Gruppe: Desktop zeigt SVG/PNG inline, der Trigger ist versteckt.
|
||
Auf Mobil (body.mobile, s. u.) klappt sie als Overlay-Menü auf. */
|
||
.dlgroup{display:inline-flex;align-items:center;gap:3px}
|
||
.dlmenu{display:inline-flex;gap:3px}
|
||
.dltrigger{display:none}
|
||
.legendbtn{display:none} /* nur auf kleinem Bildschirm sichtbar */
|
||
.togglebtn[aria-pressed="true"]{background:var(--or);color:#fff;border-color:var(--or)}
|
||
.togglebtn[aria-pressed="true"]:hover{color:#fff}
|
||
textarea{
|
||
display:block;width:100%;min-height:0;
|
||
border:0;outline:none;resize:none;
|
||
padding:14px 16px;
|
||
font-family:'IBM Plex Mono',monospace;
|
||
font-size:.85rem;line-height:1.7;
|
||
color:var(--ink);background:var(--card);
|
||
tab-size:2;
|
||
}
|
||
.hint{
|
||
padding:12px 16px;border-top:1px dashed rgba(36,52,71,.18);
|
||
font-size:.8rem;color:var(--muted);line-height:1.7;
|
||
}
|
||
.hint code{
|
||
font-family:'IBM Plex Mono',monospace;font-size:.75rem;
|
||
background:var(--paper);border:1px solid rgba(36,52,71,.12);
|
||
border-radius:4px;padding:0 5px;
|
||
}
|
||
.hint .or-code{color:var(--or);border-color:rgba(15,118,110,.4)}
|
||
|
||
.diagram{
|
||
flex:1 1 auto;min-height:0;
|
||
padding:28px 16px 24px;
|
||
overflow:auto;
|
||
background:transparent;
|
||
}
|
||
.panel.right{background:rgba(255,255,255,.6);position:relative}
|
||
.warnings{padding:0 16px 14px;font-size:.8rem;color:var(--warn)}
|
||
.warnings div{margin-top:4px}
|
||
.empty{color:var(--muted);font-size:.85rem;padding:8px 4px}
|
||
|
||
/* Zoom-Steuerung: schwebt unten rechts über dem Diagramm. */
|
||
.zoomctl{
|
||
position:absolute;right:14px;bottom:14px;z-index:5;
|
||
display:inline-flex;align-items:center;gap:2px;padding:2px;
|
||
background:var(--card);border:1px solid rgba(36,52,71,.18);
|
||
border-radius:8px;box-shadow:0 1px 4px rgba(36,52,71,.14);
|
||
}
|
||
.zoomctl button{
|
||
border:0;background:transparent;cursor:pointer;color:var(--muted);
|
||
font-family:'IBM Plex Mono',monospace;font-size:.82rem;line-height:1;
|
||
padding:4px 8px;border-radius:6px;min-width:30px;
|
||
}
|
||
#zoomReset{min-width:48px;font-size:.72rem}
|
||
.zoomctl button:hover{background:var(--paper);color:var(--or)}
|
||
.panel.collapsed .zoomctl{display:none}
|
||
|
||
/* ---------- Baum ---------- */
|
||
.tree{width:max-content;margin:0 auto;list-style:none;position:relative}
|
||
.tree ul{list-style:none}
|
||
.tree li{display:flex;flex-direction:column;align-items:center;position:relative}
|
||
.tree > li + li{margin-top:36px}
|
||
|
||
.node{
|
||
position:relative;
|
||
color:var(--ink);
|
||
background:var(--card);
|
||
border:1.5px solid var(--line);
|
||
border-radius:var(--r);
|
||
padding:7px 14px;
|
||
font-size:.88rem;font-weight:500;line-height:1.3;
|
||
white-space:nowrap;
|
||
box-shadow:0 1px 2px rgba(36,52,71,.08);
|
||
}
|
||
a.node{text-decoration:none;cursor:pointer}
|
||
a.node:hover{box-shadow:0 2px 8px rgba(36,52,71,.22)}
|
||
.ext{font-size:.72em;margin-left:5px;opacity:.55}
|
||
.size{
|
||
position:absolute;top:-9px;right:-9px;
|
||
font-family:'IBM Plex Mono',monospace;
|
||
font-size:.58rem;font-weight:500;letter-spacing:.02em;
|
||
background:var(--or);color:#fff;
|
||
border:1.5px solid var(--card);
|
||
border-radius:999px;padding:1px 6px;line-height:1.4;
|
||
}
|
||
.tags{
|
||
position:absolute;right:-9px;bottom:-9px;
|
||
display:flex;gap:3px;
|
||
}
|
||
.tag{
|
||
font-family:'IBM Plex Mono',monospace;
|
||
font-size:.58rem;font-weight:500;letter-spacing:.02em;
|
||
background:#EEF1F4;color:var(--ink);
|
||
border:1.5px solid var(--line);
|
||
border-radius:999px;padding:1px 6px;line-height:1.4;
|
||
box-shadow:0 0 0 1.5px var(--card);
|
||
}
|
||
.ghost-node{
|
||
position:relative;margin-top:14px;
|
||
border:1.5px dashed var(--warn);
|
||
color:var(--warn);background:rgba(180,83,9,.06);
|
||
border-radius:var(--r);padding:4px 12px;
|
||
font-size:.74rem;font-style:italic;white-space:nowrap;
|
||
}
|
||
.ghost-node::before{
|
||
content:'';position:absolute;top:-14px;left:50%;height:14px;
|
||
border-left:2px dashed var(--warn);
|
||
}
|
||
.root-node{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;padding:9px 20px}
|
||
|
||
/* Günstigster Pfad (Inversion): nicht benötigte Knoten (nicht-gewählte
|
||
any-of-Alternativen samt Teilbaum) treten zurück (blass, entsättigt);
|
||
der günstige Pfad hebt sich dadurch von allein ab. */
|
||
.cheap-on .node:not(.cheap){opacity:.32;filter:saturate(.4)}
|
||
/* implizit als M angenommene Größe: invertiertes Badge (weiß statt petrol) */
|
||
.size.implicit{background:var(--card);color:var(--or);border-color:var(--or)}
|
||
/* Günstigster-Pfad-Linie: gestrichelt, geschwungen, petrol — fädelt durch
|
||
die Endknoten (Blätter) des Pfads. Zwei Overlays in #out (erben dessen
|
||
zoom): die kräftige Linie liegt HINTER den Knoten (nur in den Lücken
|
||
sichtbar), eine abgetönte Kopie liegt DAVOR (deutet den Verlauf beim
|
||
Durchschreiten von Knoten nur schwach an). Kleine Stationspunkte an den
|
||
Blättern zeigen, welche Knoten wirklich auf dem Pfad enden — durchquerte
|
||
Fremdknoten tragen keinen Punkt. Reihenfolge im DOM steuert vorn/hinten. */
|
||
.cheap-overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
|
||
.cheap-path{fill:none;stroke:var(--or);stroke-width:2.5;stroke-linecap:round;
|
||
stroke-dasharray:8 6;opacity:.9}
|
||
.cheap-path.faint{opacity:.2}
|
||
/* Stationspunkt: groß, aber blass gefüllt — der Knotentext bleibt lesbar */
|
||
.cheap-dot{fill:var(--or);fill-opacity:.2;stroke:var(--or);stroke-opacity:.35;stroke-width:1.5}
|
||
|
||
/* --- ALL OF: Kinder nebeneinander, durchgezogener Verteiler --- */
|
||
ul.and{display:flex;align-items:flex-start;position:relative;padding-top:14px}
|
||
ul.and::before{
|
||
content:'';position:absolute;top:0;left:50%;height:14px;border-left:2px solid var(--line);
|
||
}
|
||
ul.and>li{padding:16px 12px 0}
|
||
ul.and>li::before,
|
||
ul.and>li::after{
|
||
content:'';position:absolute;top:0;right:50%;
|
||
border-top:2px solid var(--line);width:50%;height:16px;
|
||
}
|
||
ul.and>li::after{right:auto;left:50%;border-left:2px solid var(--line)}
|
||
ul.and>li:only-child{padding-top:14px}
|
||
ul.and>li:only-child::before,ul.and>li:only-child::after{border-top:none}
|
||
ul.and>li:only-child::after{border-left:2px solid var(--line);height:14px}
|
||
ul.and>li:first-child::before,
|
||
ul.and>li:last-child::after{border:0 none}
|
||
ul.and>li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
|
||
ul.and>li:first-child::after{border-radius:6px 0 0 0}
|
||
|
||
/* --- ANY OF: durchgehend gestrichelte graue Linien (Haupt- + Abzweige) --- */
|
||
li.has-or{align-items:flex-start}
|
||
ul.or{
|
||
display:flex;flex-direction:column;
|
||
align-items:flex-start;
|
||
position:relative;
|
||
padding-top:14px;
|
||
}
|
||
ul.or::before{
|
||
content:'';position:absolute;top:0;left:9px;height:14px;border-left:2px dashed var(--muted);
|
||
}
|
||
ul.or>li{position:relative;align-items:flex-start;padding:5px 0 5px 30px}
|
||
/* Abzweig auf Höhe der Knoten-Mitte (5px li-Padding + halbe Knotenhöhe), nicht Mitte des Teilbaums */
|
||
ul.or>li::before{
|
||
content:'';position:absolute;left:9px;top:23px;width:21px;border-top:2px dashed var(--muted);
|
||
}
|
||
ul.or>li::after{
|
||
content:'';position:absolute;left:9px;top:0;height:100%;border-left:2px dashed var(--muted);
|
||
}
|
||
ul.or>li:last-child::after{height:23px}
|
||
/* all-of-Teilbaum UNTER einer any-of-Alternative (nur horizontal):
|
||
schmal transponiert stapeln — Kinder untereinander mit linkem, solidem
|
||
Verteiler (wie im kompakten Modus), statt breitem Fächer. Sonst zwingt der
|
||
breite Fächer ein Zentrieren, das den Alternativknoten (und damit den
|
||
ganzen Elternbaum) weit nach rechts schiebt. Passt zugleich stilistisch
|
||
zur gestapelten any-of-Spalte darüber. Vertikal/kompakt haben ihre eigene
|
||
`ul.and`-Behandlung und bleiben unberührt. */
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and{
|
||
flex-direction:column;align-items:flex-start;padding-top:14px;
|
||
}
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and::before{left:9px;height:14px}
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and>li{padding:5px 0 5px 30px}
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and>li::before{
|
||
left:9px;right:auto;top:23px;width:21px;height:0;
|
||
border:0;border-top:2px solid var(--line);border-radius:0;
|
||
}
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and>li::after{
|
||
left:9px;right:auto;top:0;width:0;height:100%;
|
||
border:0;border-left:2px solid var(--line);border-radius:0;
|
||
}
|
||
.tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and>li:last-child::after{height:23px}
|
||
ul.or .node{
|
||
border-color:var(--muted);
|
||
box-shadow:none;
|
||
font-weight:400;
|
||
}
|
||
|
||
/* ---------- Status (Pastell) ---------- */
|
||
.node.st-idee {background:#EBEDEF;border-color:#A2ABB5;color:var(--ink)}
|
||
.node.st-geplant {background:#EBE4F6;border-color:#A991D4;color:var(--ink)}
|
||
.node.st-arbeit {background:#FADDE4;border-color:#D897A8;color:var(--ink)}
|
||
.node.st-durchstich{background:#FBF2CE;border-color:#D9BE63;color:var(--ink)}
|
||
.node.st-fertig {background:#DCF1DE;border-color:#86C293;color:var(--ink)}
|
||
.node.st-prod {background:#DBEAF8;border-color:#85ACD7;color:var(--ink)}
|
||
.node.st-verworfen{
|
||
background:#F1F2F4;border-color:#B3BAC2;border-style:dashed;
|
||
color:var(--muted);text-decoration:line-through;box-shadow:none;
|
||
}
|
||
|
||
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
||
.chip{
|
||
font-family:'IBM Plex Mono',monospace;font-size:.72rem;
|
||
border:1.5px solid;border-radius:6px;padding:2px 8px;
|
||
color:var(--ink);white-space:nowrap;
|
||
}
|
||
.chip.st-idee {background:#EBEDEF;border-color:#A2ABB5}
|
||
.chip.st-geplant {background:#EBE4F6;border-color:#A991D4}
|
||
.chip.st-arbeit {background:#FADDE4;border-color:#D897A8}
|
||
.chip.st-durchstich{background:#FBF2CE;border-color:#D9BE63}
|
||
.chip.st-fertig {background:#DCF1DE;border-color:#86C293}
|
||
.chip.st-prod {background:#DBEAF8;border-color:#85ACD7}
|
||
.chip.st-verworfen{background:#F1F2F4;border-color:#B3BAC2;border-style:dashed;color:var(--muted);text-decoration:line-through}
|
||
|
||
/* ---------- Transponierte Modi (vertikal + kompakt) ---------- */
|
||
/* Gemeinsame Basis: Kinder untereinander, Sammelleiste links,
|
||
Abzweig auf Knotenmitte (23-px-Offset). */
|
||
.tree.vertical, .tree.kompakt{margin:0}
|
||
.tree.vertical li, .tree.kompakt li{align-items:flex-start}
|
||
.tree.vertical ul.and, .tree.kompakt ul.and{flex-direction:column;align-items:flex-start;padding-top:14px}
|
||
.tree.vertical ul.and::before, .tree.kompakt ul.and::before{left:9px;height:14px}
|
||
.tree.vertical ul.and>li, .tree.kompakt ul.and>li{padding:5px 0 5px 30px}
|
||
.tree.vertical ul.and>li::before, .tree.kompakt ul.and>li::before{
|
||
left:9px;right:auto;top:23px;width:21px;height:0;
|
||
border:0;border-top:2px solid var(--line);border-radius:0;
|
||
}
|
||
.tree.vertical ul.and>li::after, .tree.kompakt ul.and>li::after{
|
||
left:9px;right:auto;top:0;width:0;height:100%;
|
||
border:0;border-left:2px solid var(--line);border-radius:0;
|
||
}
|
||
.tree.vertical ul.and>li:last-child::after, .tree.kompakt ul.and>li:last-child::after{height:23px}
|
||
|
||
/* Nur vertikal: echter transponierter, ZENTRIERTER LR-Baum — analog zur
|
||
horizontalen Darstellung, nur um 90° gedreht. Der Überknoten sitzt
|
||
vertikal mittig zu seiner Kindergruppe; die all-of-Verbindung tritt rechts
|
||
auf halber Höhe aus, eine vertikale Sammelleiste verteilt auf die Kinder.
|
||
Kompakt bleibt unberührt (führt all-of nach unten). */
|
||
.tree.vertical li.has-and{flex-direction:row;align-items:center}
|
||
.tree.vertical li.has-and>ul.and{padding-top:0}
|
||
/* Stub von der Parent-Mitte (halbe Höhe) zur vertikalen Sammelleiste */
|
||
.tree.vertical li.has-and>ul.and::before{
|
||
left:0;top:50%;width:9px;height:0;
|
||
border-left:0;border-top:2px solid var(--line);
|
||
}
|
||
/* Abzweig trifft die tatsächliche Knotenmitte des Kindes:
|
||
Blatt- und Any-of-Kinder sitzen oben (Offset 23 px), all-of-Zwischenknoten
|
||
sind selbst vertikal zentriert (50 %). Ohne diese Unterscheidung liefen die
|
||
Linien zu zentrierten Zwischenknoten ins Leere. Die Enden der Sammelleiste
|
||
folgen demselben Abzweigpunkt des jeweiligen Rand-Kindes. */
|
||
.tree.vertical li.has-and>ul.and>li:first-child::after{top:23px;height:calc(100% - 23px)}
|
||
.tree.vertical li.has-and>ul.and>li:only-child::after{border:0}
|
||
.tree.vertical li.has-and>ul.and>li.has-and::before{top:50%}
|
||
.tree.vertical li.has-and>ul.and>li.has-and:first-child::after{top:50%;height:50%}
|
||
.tree.vertical li.has-and>ul.and>li.has-and:last-child::after{top:0;height:50%}
|
||
.tree.vertical li.has-and>ul.and>li.has-and:only-child::after{border:0}
|
||
|
||
/* Mehr Luft zwischen gestapelten Knoten (transponierte Modi): sonst
|
||
überlappt das Größen-Badge (oben rechts) eines Knotens mit den
|
||
Namens-Tags (unten rechts) des Knotens darüber. Nur zusätzlicher Abstand
|
||
NACH unten, damit der obere 23-px-Abzweig unverändert bleibt. */
|
||
.tree.kompakt ul.and>li,
|
||
.tree.kompakt ul.or>li,
|
||
.tree.vertical ul.or>li,
|
||
.tree.vertical ul.and>li:not(.has-and){
|
||
padding-bottom:20px;
|
||
}
|
||
/* Zentrierte all-of-Zwischenknoten (nur vertikal) brauchen den Abstand
|
||
symmetrisch, damit ihr 50%-Abzweig auf der Knotenmitte bleibt. */
|
||
.tree.vertical li.has-and>ul.and>li.has-and{
|
||
padding-top:16px;padding-bottom:16px;
|
||
}
|
||
/* Vertikal + any-of-Alternative, die selbst all-of zerlegt (z. B. „Web+Nativ“):
|
||
Der Knoten sitzt vertikal mittig zu seinem Rechts-Fächer, also muss auch der
|
||
EINKOMMENDE any-of-Abzweig auf die Knotenmitte (50 %) zeigen statt auf 23 px —
|
||
sonst ist der Knoten von seiner Linie von oben abgetrennt. Symmetrisches
|
||
Padding hält die Mitte bei 50 % (überschreibt das asymmetrische ul.or>li). */
|
||
.tree.vertical ul.or>li.has-and{padding-top:16px;padding-bottom:16px}
|
||
.tree.vertical ul.or>li.has-and::before{top:50%}
|
||
.tree.vertical ul.or>li.has-and:last-child::after{height:50%}
|
||
|
||
/* Kompakt: auch All-of läuft nach unten (spart Breite) — kein Rechts-Fächer.
|
||
Die graue, gestrichelte Any-of-Führung kommt aus der Basis und gilt hier
|
||
wie in allen Modi. Gate-Codierung: und = durchgezogen dunkel (Tinte),
|
||
oder = gestrichelt grau. */
|
||
|
||
/* ---------- Kleiner Bildschirm (Smartphone) ----------
|
||
body.mobile wird per matchMedia (<=640px) gesetzt. Standardmäßig ist ein
|
||
Bereich groß, der andere schrumpft auf seine Titelzeile und dient als
|
||
Umschalter (Tippen bringt ihn nach vorn). Die Min/Normal/Max-Buttons
|
||
entfallen; geteilt wird weiterhin über den **Splitter**, der sichtbar
|
||
bleibt. Das gestapelte Layout inkl. Gutter liefert bereits die
|
||
820-px-Regel weiter oben. Die Legende bekommt einen eigenen Umschalter
|
||
statt der dauerhaften „AGENDA“-Zeile. */
|
||
body.mobile .winbtns{display:none}
|
||
/* Untertitel: Kurzfassung, garantiert einzeilig (Ellipsis als Sicherung) */
|
||
body.mobile .sub-full{display:none}
|
||
body.mobile .sub-short{display:inline}
|
||
body.mobile header p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
/* Editor immer gestapelt (Textarea oben, Legende darunter) */
|
||
body.mobile .editor-body{flex-direction:column;align-items:stretch}
|
||
body.mobile .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)}
|
||
body.mobile .agenda[open]{width:auto}
|
||
/* Legende: keine dauerhafte Summary-Zeile, dafür der #legendBtn im Kopf */
|
||
body.mobile .agenda>summary{display:none}
|
||
body.mobile .legendbtn{display:inline-flex}
|
||
/* Sprachwahl schlank: eingeklappt nur die aktive Sprache. Ein Tipp klappt die
|
||
volle Leiste als Overlay über die Kopfzeile auf (verdeckt fsToggle usw.,
|
||
statt die Zeile zu verbreitern); nach der Auswahl klappt sie wieder ein
|
||
(JS). Das „…“ entfällt hier — die aktive Sprache ist selbst der Auslöser. */
|
||
body.mobile .header-tools{position:relative}
|
||
body.mobile .langsel button[data-lang]{display:none}
|
||
body.mobile .langsel button[data-lang].active{display:inline-block}
|
||
body.mobile .langmore{display:none}
|
||
body.mobile .langsel.expanded{
|
||
position:absolute;top:0;right:0;z-index:40;
|
||
background:var(--card);
|
||
box-shadow:0 6px 18px rgba(36,52,71,.28);
|
||
}
|
||
body.mobile .langsel.expanded button[data-lang]{display:inline-block}
|
||
/* Modus-Wähler kompakt: nur das aktive Icon (ein Drittel Platz), Tippen
|
||
schaltet reihum weiter (horizontal → kompakt → vertikal → …, siehe JS). */
|
||
body.mobile .seg label{display:none}
|
||
body.mobile .seg label:has(input:checked){display:flex}
|
||
/* Download schlank: nur der Trigger-Icon-Button; ein Tipp klappt SVG/PNG als
|
||
Dropdown-Overlay unter der Kopfzeile auf (verhindert den Zeilenumbruch durch
|
||
die breiten „SVG“/„PNG“-Labels). Kopieren bleibt sichtbar. */
|
||
body.mobile .dlgroup{position:relative}
|
||
body.mobile .dltrigger{display:inline-flex}
|
||
body.mobile .dltrigger[aria-expanded="true"]{border-color:var(--or);color:var(--or)}
|
||
body.mobile .dlmenu{display:none}
|
||
body.mobile .dlgroup.open .dlmenu{
|
||
display:flex;flex-direction:column;gap:5px;
|
||
position:absolute;top:calc(100% + 6px);right:0;z-index:40;
|
||
background:var(--card);border:1px solid rgba(36,52,71,.15);
|
||
border-radius:8px;padding:5px;box-shadow:0 6px 18px rgba(36,52,71,.28);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="header-row">
|
||
<h1 style="display:flex;align-items:center;gap:11px">
|
||
<svg width="34" height="34" viewBox="0 0 64 64" aria-hidden="true">
|
||
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
|
||
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||
</svg>
|
||
<span data-i18n-title="brandTooltip" title="„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).">Werk<span style="color:var(--or)">baum</span></span>
|
||
</h1>
|
||
<div class="header-tools">
|
||
<button type="button" id="fsToggle" class="fsbtn" aria-pressed="false" data-i18n-title="fullscreenTooltip" data-i18n-aria="fullscreenTooltip" title="Vollbild – Panels nutzen die ganze Fensterbreite" aria-label="Vollbild – Panels nutzen die ganze Fensterbreite">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
||
</button>
|
||
<div class="langsel" role="radiogroup" aria-label="Sprache / Language">
|
||
<button type="button" data-lang="de" title="Deutsch">DE</button>
|
||
<button type="button" data-lang="en" title="English">EN</button>
|
||
<button type="button" data-lang="es" title="Español">ES</button>
|
||
<button type="button" data-lang="fr" title="Français">FR</button>
|
||
<button type="button" class="lang-extra" data-lang="pl" title="Polski">PL</button>
|
||
<button type="button" class="lang-extra" data-lang="ru" title="Русский">RU</button>
|
||
<button type="button" class="lang-extra" data-lang="hi" title="हिन्दी">HI</button>
|
||
<button type="button" class="lang-extra" data-lang="zh" title="中文">中</button>
|
||
<button type="button" class="lang-extra" data-lang="ja" title="日本語">日</button>
|
||
<button type="button" id="langMore" class="langmore" aria-expanded="false" data-i18n-title="langMore" data-i18n-aria="langMore" title="weitere Sprachen" aria-label="weitere Sprachen">…</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p><span class="sub-full" data-i18n="subtitle">Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree/Requirements-Baum Diagramm-Editor.</span><span class="sub-short" data-i18n="subtitleShort">WBS, Feature- & Requirements-Bäume als Text</span></p>
|
||
</header>
|
||
|
||
<div class="app" id="app">
|
||
<div class="panel editor">
|
||
<div class="panel-head">
|
||
<span data-i18n="editorTitle">Struktur (Text)</span>
|
||
<button type="button" class="copybtn" id="copy" data-i18n-title="copyTooltip" data-i18n-aria="copyTooltip" title="Text in die Zwischenablage kopieren" aria-label="Text in die Zwischenablage kopieren">
|
||
<svg class="ic-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
<svg class="ic-done" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||
</button>
|
||
<button type="button" class="copybtn legendbtn" id="legendBtn" data-i18n-title="legendTooltip" data-i18n-aria="legendTooltip" title="Legende ein-/ausblenden" aria-label="Legende ein-/ausblenden">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</button>
|
||
<div class="winbtns" aria-label="Editor">
|
||
<button type="button" class="winbtn" data-state="b" data-i18n-title="minimize" title="minimieren">—</button>
|
||
<button type="button" class="winbtn" data-state="normal" data-i18n-title="normal" title="normal">▢</button>
|
||
<button type="button" class="winbtn" data-state="a" data-i18n-title="maximize" title="maximieren">■</button>
|
||
</div>
|
||
</div>
|
||
<div class="editor-body">
|
||
<textarea id="src" spellcheck="false"></textarea>
|
||
<details class="agenda">
|
||
<summary data-i18n="agenda">Agenda</summary>
|
||
<div class="hint" id="hint">
|
||
Einrückung (2 Leerzeichen oder Tab) definiert die Hierarchie.<br>
|
||
<code>-</code> Teilpaket, alle erforderlich <em>(all of)</em><br>
|
||
<code class="or-code">|</code> Alternative, eine wählen <em>(any of)</em><br>
|
||
Zeile ohne Zeichen = Wurzelknoten. Geschwister sollten dasselbe Zeichen tragen.<br>
|
||
Status als Kästchen nach dem Zeichen, z. B. <code>- [~] Frontend</code>:
|
||
<div class="chips">
|
||
<span class="chip st-idee">[?] Idee</span>
|
||
<span class="chip st-geplant">[ ] geplant</span>
|
||
<span class="chip st-arbeit">[~] in Arbeit</span>
|
||
<span class="chip st-durchstich">[/] Durchstich</span>
|
||
<span class="chip st-fertig">[x] fertig</span>
|
||
<span class="chip st-prod">[^] in Produktion</span>
|
||
<span class="chip st-verworfen">[-] verworfen</span>
|
||
</div>
|
||
Aufwand als T-Shirt-Größe in Klammern, Link einfach als URL anhängen:<br>
|
||
<code>- [ ] Backend (L) https://…</code><br>
|
||
Ab <code>(M)</code> gilt: weiter untergliedern — fehlt die Untergliederung, erscheint ein Platzhalter im Diagramm.<br>
|
||
Kommentare mit <code>%%</code> — als ganze Zeile oder am Zeilenende.
|
||
Personen mit <code>@name</code> — erscheinen unten rechts am Knoten.
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gutter" id="gutter" role="separator" aria-label="Bereiche größenverändern" title="Ziehen zum Verschieben"></div>
|
||
|
||
<div class="panel right">
|
||
<div class="panel-head">
|
||
<span data-i18n="diagramTitle">Diagramm</span>
|
||
<button type="button" class="copybtn togglebtn" id="showc" aria-pressed="false" data-i18n-title="discardedTooltip" data-i18n-aria="discardedTooltip" title="Verworfene Knoten samt Teilbaum ein-/ausblenden" aria-label="Verworfene Knoten samt Teilbaum ein-/ausblenden">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="6" width="18" height="12" rx="2" stroke-dasharray="3 2.5"/><path d="M7 12h10"/></svg>
|
||
</button>
|
||
<button type="button" class="copybtn togglebtn" id="cheapBtn" aria-pressed="true" data-i18n-title="cheapTooltip" data-i18n-aria="cheapTooltip" title="Günstigsten Pfad hervorheben – nicht benötigte Alternativen treten zurück" aria-label="Günstigsten Pfad hervorheben – nicht benötigte Alternativen treten zurück">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="6" r="2.5"/><circle cx="19" cy="18" r="2.5"/><path d="M7.5 6H14a3 3 0 0 1 0 6H10a3 3 0 0 0 0 6h6.5"/></svg>
|
||
</button>
|
||
<div class="seg" role="radiogroup" aria-label="Darstellung">
|
||
<label data-i18n-title="modeHorizontal" title="Horizontal – Organigramm, Diagramm über dem Editor">
|
||
<input type="radio" name="layout" value="horizontal" checked data-i18n-aria="modeHorizontal" aria-label="Horizontal – Organigramm">
|
||
<span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="4" rx="1"/><rect x="2.5" y="17" width="6" height="4" rx="1"/><rect x="15.5" y="17" width="6" height="4" rx="1"/><path d="M12 7V13M5.5 13H18.5M5.5 13V17M18.5 13V17"/></svg></span>
|
||
</label>
|
||
<label data-i18n-title="modeKompakt" title="Kompakt – alles nach unten, platzsparend">
|
||
<input type="radio" name="layout" value="kompakt" data-i18n-aria="modeKompakt" aria-label="Kompakt – alles nach unten">
|
||
<span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="6" height="4" rx="1"/><path d="M6 7V20"/><path d="M6 11H10M6 17H10"/><rect x="10" y="9" width="9" height="4" rx="1"/><rect x="10" y="15" width="9" height="4" rx="1"/></svg></span>
|
||
</label>
|
||
<label data-i18n-title="modeVertikal" title="Vertikal – Baum nach rechts, Diagramm neben dem Editor">
|
||
<input type="radio" name="layout" value="vertikal" data-i18n-aria="modeVertikal" aria-label="Vertikal – Baum nach rechts">
|
||
<span><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="9.5" width="5" height="5" rx="1"/><rect x="16" y="3" width="6" height="4" rx="1"/><rect x="16" y="17" width="6" height="4" rx="1"/><path d="M7.5 12H12M12 5V19M12 5H16M12 19H16"/></svg></span>
|
||
</label>
|
||
</div>
|
||
<button type="button" class="copybtn" id="copyDiagram" data-i18n-title="copyDiagramTooltip" data-i18n-aria="copyDiagramTooltip" title="Diagramm als PNG-Bild in die Zwischenablage kopieren" aria-label="Diagramm als PNG-Bild in die Zwischenablage kopieren">
|
||
<svg class="ic-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
<svg class="ic-done" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||
</button>
|
||
<div class="dlgroup" id="dlGroup">
|
||
<button type="button" class="copybtn dltrigger" id="dlTrigger" aria-haspopup="true" aria-expanded="false" data-i18n-title="downloadMenu" data-i18n-aria="downloadMenu" title="Diagramm herunterladen (SVG/PNG)" aria-label="Diagramm herunterladen (SVG/PNG)">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M8 11l4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
|
||
</button>
|
||
<div class="dlmenu">
|
||
<button type="button" class="copybtn dlbtn" id="dlDiagram" data-i18n-title="downloadDiagramTooltip" data-i18n-aria="downloadDiagramTooltip" title="Diagramm als SVG-Datei herunterladen" aria-label="Diagramm als SVG-Datei herunterladen">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M8 11l4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg><span class="dl-label">SVG</span>
|
||
</button>
|
||
<button type="button" class="copybtn dlbtn" id="dlDiagramPng" data-i18n-title="downloadPngTooltip" data-i18n-aria="downloadPngTooltip" title="Diagramm als PNG-Datei herunterladen" aria-label="Diagramm als PNG-Datei herunterladen">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M8 11l4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg><span class="dl-label">PNG</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="winbtns" aria-label="Diagramm">
|
||
<button type="button" class="winbtn" data-state="a" data-i18n-title="minimize" title="minimieren">—</button>
|
||
<button type="button" class="winbtn" data-state="normal" data-i18n-title="normal" title="normal">▢</button>
|
||
<button type="button" class="winbtn" data-state="b" data-i18n-title="maximize" title="maximieren">■</button>
|
||
</div>
|
||
</div>
|
||
<div class="diagram"><ul class="tree" id="out"></ul></div>
|
||
<div class="warnings" id="warn"></div>
|
||
<div class="zoomctl" data-i18n-aria="zoomAria" aria-label="Zoom (Strg/Cmd + Mausrad)">
|
||
<button type="button" id="zoomOut" data-i18n-title="zoomOut" title="verkleinern">−</button>
|
||
<button type="button" id="zoomReset" data-i18n-title="zoomReset" title="zurücksetzen">100 %</button>
|
||
<button type="button" id="zoomIn" data-i18n-title="zoomIn" title="vergrößern">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="site-footer"><a href="https://github.com/mhoennig/werkbaum" target="_blank" rel="noopener">Werkbaum</a> <a class="ver" href="https://github.com/mhoennig/werkbaum/commits/main" target="_blank" rel="noopener">1.0</a> – © 2026 <a href="https://michael.hoennig.de" target="_blank" rel="noopener">Michael Hönnig</a> · <span class="vibe" title="Fable 5 and Opus 4.8">Vibe-Coded with Claude Code</span> – <a href="../LICENSE" target="_blank" rel="noopener">MIT-License</a> · <a href="https://michael.hoennig.de/imprint.html" target="_blank" rel="noopener" data-i18n="imprint">Impressum</a></footer>
|
||
|
||
<script>
|
||
const INITIAL = `%% Project structure – Sprint 14
|
||
[~] Website relaunch (XL) https://wiki.example.com/relaunch
|
||
- [x] Concept (M)
|
||
- [x] Audience analysis (S)
|
||
- [x] Sitemap (XS)
|
||
- [~] Implementation (XL)
|
||
- [~] Frontend (M) https://git.example.com/frontend @anna
|
||
| [ ] PWA (S)
|
||
| [ ] Web+Nativ
|
||
- [/] Web (S)
|
||
- [ ] Android (M)
|
||
- [ ] iOS (M)
|
||
- [ ] Backend (L) @ben @carla
|
||
- [ ] CMS integration (M)
|
||
| [ ] WordPress
|
||
| [?] Headless CMS
|
||
| [-] Custom build %% too much effort
|
||
- [?] Hosting (M)
|
||
| Cooperative Community Cloud https://hostsharing.net
|
||
| On-premise`;
|
||
|
||
const SIZE_RANK = {XS:0, S:1, M:2, L:3, XL:4, XXL:5};
|
||
|
||
const STATUS_BY_CODE = {
|
||
'?': {key:'idee', name:'Idee'},
|
||
' ': {key:'geplant', name:'geplant'},
|
||
'~': {key:'arbeit', name:'in Arbeit'},
|
||
'/': {key:'durchstich', name:'Durchstich – funktionsbereit, Feinarbeiten offen'},
|
||
'x': {key:'fertig', name:'fertig'},
|
||
'^': {key:'prod', name:'in Produktion'},
|
||
'-': {key:'verworfen', name:'verworfen'}
|
||
};
|
||
|
||
const src = document.getElementById('src');
|
||
const out = document.getElementById('out');
|
||
const warnBox = document.getElementById('warn');
|
||
|
||
function esc(s){
|
||
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||
}
|
||
|
||
/* ---------- Parser ---------- */
|
||
function parse(text){
|
||
const virtualRoot = {label:'', type:'and', children:[]};
|
||
const stack = [{node:virtualRoot, width:-1}];
|
||
const warnings = [];
|
||
|
||
text.split('\n').forEach((raw, i) => {
|
||
raw = raw.replace(/%%.*$/, ''); /* %%-Kommentare entfernen (Mermaid-Konvention) */
|
||
if(!raw.trim()) return;
|
||
const m = raw.match(/^([ \t]*)([-|])?\s*(?:\[([ ?~xX^\/-])]\s*)?(.*)$/);
|
||
const width = m[1].replace(/\t/g,' ').length;
|
||
const type = m[2] === '|' ? 'or' : 'and';
|
||
const status = m[3] ? STATUS_BY_CODE[m[3].toLowerCase()] : null;
|
||
|
||
let rest = m[4], url = null, size = null;
|
||
const tags = [];
|
||
rest = rest.replace(/https?:\/\/\S+/i, s => { url = s; return ''; });
|
||
rest = rest.replace(/\((XXL|XS|XL|S|M|L)\)/i, (s, g) => { size = g.toUpperCase(); return ''; });
|
||
rest = rest.replace(/@([\p{L}\p{N}._-]+)/gu, (s, g) => { tags.push(g); return ''; });
|
||
const label = rest.replace(/\s+/g, ' ').trim();
|
||
if(!label) return;
|
||
|
||
while(stack.length > 1 && stack[stack.length-1].width >= width) stack.pop();
|
||
const parent = stack[stack.length-1].node;
|
||
|
||
const node = {label, type, status, url, size, tags, children:[], line:i+1};
|
||
parent.children.push(node);
|
||
stack.push({node, width});
|
||
});
|
||
|
||
return {roots: virtualRoot.children, warnings};
|
||
}
|
||
|
||
/* ---------- Renderer ---------- */
|
||
function gateOf(children){
|
||
return children.length && children[0].type === 'or' ? 'or' : 'and';
|
||
}
|
||
|
||
function needsBreakdown(n){
|
||
if(n.status && n.status.key === 'verworfen') return false;
|
||
return !!n.size && SIZE_RANK[n.size] >= SIZE_RANK.M && !n.children.length;
|
||
}
|
||
|
||
function visibleChildren(n){
|
||
if(discardedShown()) return n.children;
|
||
return n.children.filter(k => !k.status || k.status.key !== 'verworfen');
|
||
}
|
||
|
||
/* ---------- Günstigster Pfad ----------
|
||
Markiert die Knoten, die für die günstigste Realisierung nötig sind:
|
||
all-of ⇒ alle Kinder nötig; any-of ⇒ nur die günstigste Alternative.
|
||
„Günstig" = kleinste rekursive Kosten (eigene T-Shirt-Größe + Kinder;
|
||
bei any-of das Minimum). Verworfene zählen nie mit — unabhängig vom
|
||
Einblenden-Toggle. Gleichstand ⇒ erste Alternative. Fehlende Größe = M. */
|
||
let cheapPathOn = true;
|
||
const cheapSet = new Set();
|
||
function pathChildren(n){
|
||
return n.children.filter(k => !k.status || k.status.key !== 'verworfen');
|
||
}
|
||
/* fehlende Größe wird als M interpretiert */
|
||
function ownCost(n){ return SIZE_RANK[n.size || 'M'] + 1; }
|
||
function cheapestCost(n){
|
||
const kids = pathChildren(n);
|
||
let c = ownCost(n);
|
||
if(kids.length){
|
||
if(gateOf(kids) === 'or') c += Math.min(...kids.map(cheapestCost));
|
||
else c += kids.reduce((s, k) => s + cheapestCost(k), 0);
|
||
}
|
||
return c;
|
||
}
|
||
function markCheapest(n){
|
||
cheapSet.add(n);
|
||
const kids = pathChildren(n);
|
||
if(!kids.length) return;
|
||
if(gateOf(kids) === 'or'){
|
||
let best = null, bc = Infinity;
|
||
for(const k of kids){ const c = cheapestCost(k); if(c < bc){ bc = c; best = k; } }
|
||
if(best) markCheapest(best);
|
||
} else {
|
||
for(const k of kids) markCheapest(k);
|
||
}
|
||
}
|
||
function cheapCls(n){
|
||
if(!(cheapPathOn && cheapSet.has(n))) return '';
|
||
/* Endknoten des Pfads: kein Kind liegt (mehr) auf dem günstigen Pfad */
|
||
const leaf = !pathChildren(n).some(k => cheapSet.has(k));
|
||
return leaf ? 'cheap cheap-leaf' : 'cheap';
|
||
}
|
||
|
||
function nodeHtml(n, extra){
|
||
const need = needsBreakdown(n);
|
||
const cls = ['node', extra || '', n.status ? 'st-' + n.status.key : '']
|
||
.filter(Boolean).join(' ');
|
||
const title = n.status ? ` title="${esc(t('st_' + n.status.key)).replace(/"/g,'"')}"` : '';
|
||
const tagsHtml = n.tags && n.tags.length
|
||
? `<span class="tags">${n.tags.map(tag => `<span class="tag">${esc(tag)}</span>`).join('')}</span>`
|
||
: '';
|
||
const implicitTip = esc(t('implicitSizeTooltip')).replace(/"/g,'"');
|
||
const sizeBadge = n.size
|
||
? `<span class="size">${n.size}</span>`
|
||
: (cheapPathOn ? `<span class="size implicit" title="${implicitTip}">M</span>` : '');
|
||
const inner = esc(n.label) +
|
||
(n.url ? '<span class="ext">↗</span>' : '') +
|
||
sizeBadge +
|
||
tagsHtml;
|
||
const html = n.url
|
||
? `<a class="${cls}" href="${esc(n.url).replace(/"/g,'"')}" target="_blank" rel="noopener"${title}>${inner}</a>`
|
||
: `<div class="${cls}"${title}>${inner}</div>`;
|
||
const ghostTip = esc(t('ghostTooltip')).replace(/"/g,'"');
|
||
const ghost = `<div class="ghost-node" title="${ghostTip}">${esc(t('ghost'))}</div>`;
|
||
return html + (need ? ghost : '');
|
||
}
|
||
|
||
function renderChildren(node, warnings){
|
||
const kids = visibleChildren(node);
|
||
if(!kids.length) return '';
|
||
const types = new Set(kids.map(k => k.type));
|
||
if(types.size > 1){
|
||
warnings.push(t('mixedWarn', {line: kids[0].line, label: esc(node.label)}));
|
||
}
|
||
const gate = gateOf(kids);
|
||
const items = kids.map(k => {
|
||
const vk = visibleChildren(k);
|
||
const liCls = vk.length ? (gateOf(vk) === 'or' ? ' class="has-or"' : ' class="has-and"') : '';
|
||
return `<li${liCls}>` +
|
||
nodeHtml(k, cheapCls(k)) +
|
||
renderChildren(k, warnings) +
|
||
`</li>`;
|
||
}).join('');
|
||
return `<ul class="${gate}">${items}</ul>`;
|
||
}
|
||
|
||
function render(){
|
||
let {roots} = parse(src.value);
|
||
const warnings = [];
|
||
if(!discardedShown()){
|
||
roots = roots.filter(r => !r.status || r.status.key !== 'verworfen');
|
||
}
|
||
|
||
if(!roots.length){
|
||
out.innerHTML = `<div class="empty">${esc(t('empty'))}</div>`;
|
||
warnBox.innerHTML = '';
|
||
return;
|
||
}
|
||
|
||
cheapSet.clear();
|
||
if(cheapPathOn) roots.forEach(markCheapest);
|
||
out.classList.toggle('cheap-on', cheapPathOn);
|
||
|
||
out.innerHTML = roots.map(root => {
|
||
const vk = visibleChildren(root);
|
||
const liCls = vk.length ? (gateOf(vk) === 'or' ? ' class="has-or"' : ' class="has-and"') : '';
|
||
return `<li${liCls}>` +
|
||
nodeHtml(root, ('root-node ' + cheapCls(root)).trim()) +
|
||
renderChildren(root, warnings) +
|
||
`</li>`;
|
||
}).join('');
|
||
|
||
warnBox.innerHTML = warnings.map(w => `<div>⚠ ${w}</div>`).join('');
|
||
drawCheapPath();
|
||
}
|
||
|
||
/* ---------- Günstigster-Pfad-Linie ----------
|
||
Eine gestrichelte, geschwungene Petrol-Linie fädelt durch die Endknoten
|
||
(Blätter) des günstigen Pfads. Das Overlay-SVG liegt in #out und erbt damit
|
||
dessen CSS-`zoom`; die Punkte werden in unskalierte #out-Koordinaten
|
||
umgerechnet (getBoundingClientRect / zoom). Neu gezeichnet nach jedem
|
||
render() und nach Moduswechsel (applyLayout ruft nicht render). */
|
||
const SVGNS = 'http://www.w3.org/2000/svg';
|
||
function catmullRom(p){
|
||
if(p.length < 2) return '';
|
||
if(p.length === 2) return `M${p[0].x.toFixed(1)},${p[0].y.toFixed(1)} L${p[1].x.toFixed(1)},${p[1].y.toFixed(1)}`;
|
||
let d = `M${p[0].x.toFixed(1)},${p[0].y.toFixed(1)}`;
|
||
for(let i = 0; i < p.length - 1; i++){
|
||
const p0 = p[i-1] || p[i], p1 = p[i], p2 = p[i+1], p3 = p[i+2] || p2;
|
||
const c1x = p1.x + (p2.x - p0.x)/6, c1y = p1.y + (p2.y - p0.y)/6;
|
||
const c2x = p2.x - (p3.x - p1.x)/6, c2y = p2.y - (p3.y - p1.y)/6;
|
||
d += ` C${c1x.toFixed(1)},${c1y.toFixed(1)} ${c2x.toFixed(1)},${c2y.toFixed(1)} ${p2.x.toFixed(1)},${p2.y.toFixed(1)}`;
|
||
}
|
||
return d;
|
||
}
|
||
function svgEl(name, attrs){
|
||
const e = document.createElementNS(SVGNS, name);
|
||
for(const k in attrs) e.setAttribute(k, attrs[k]);
|
||
return e;
|
||
}
|
||
function overlaySvg(cls, w, h){
|
||
const svg = svgEl('svg', {class:'cheap-overlay ' + cls, width:w, height:h,
|
||
viewBox:`0 0 ${w.toFixed(1)} ${h.toFixed(1)}`});
|
||
return svg;
|
||
}
|
||
function drawCheapPath(){
|
||
out.querySelectorAll('svg.cheap-overlay').forEach(e => e.remove());
|
||
if(!cheapPathOn) return;
|
||
const leaves = [...out.querySelectorAll('.node.cheap-leaf')]; /* Dokument-Reihenfolge = Lese-Reihenfolge */
|
||
if(leaves.length < 2) return;
|
||
const outRect = out.getBoundingClientRect();
|
||
const z = zoom || 1;
|
||
if(!outRect.width || !outRect.height) return; /* Panel eingeklappt */
|
||
const pts = leaves.map(el => {
|
||
const r = el.getBoundingClientRect();
|
||
return {x:(r.left + r.width/2 - outRect.left)/z, y:(r.top + r.height/2 - outRect.top)/z};
|
||
});
|
||
const w = outRect.width/z, h = outRect.height/z;
|
||
const d = catmullRom(pts);
|
||
|
||
/* kräftige Linie HINTER die Knoten (als erstes Kind → hinterste Paint-Ebene) */
|
||
const back = overlaySvg('cheap-back', w, h);
|
||
back.appendChild(svgEl('path', {class:'cheap-path', d}));
|
||
out.insertBefore(back, out.firstChild);
|
||
|
||
/* davor: abgetönte Kopie (deutet den Verlauf über Knoten an) + Stationspunkte */
|
||
const front = overlaySvg('cheap-front', w, h);
|
||
front.appendChild(svgEl('path', {class:'cheap-path faint', d}));
|
||
pts.forEach(p => front.appendChild(
|
||
svgEl('circle', {class:'cheap-dot', cx:p.x.toFixed(1), cy:p.y.toFixed(1), r:10})));
|
||
out.appendChild(front);
|
||
}
|
||
|
||
/* ---------- Diagramm als Grafik (SVG → PNG) ---------- */
|
||
/* Das gerenderte Diagramm wird aus der Live-Geometrie in ein eigenständiges
|
||
SVG (nur Formen + Text, keine externen Ressourcen) nachgezeichnet und als
|
||
PNG in die Zwischenablage gelegt. Knotenfarben, Größen-Badges, Tags und
|
||
der Geister-Knoten werden übernommen; Verbindungslinien werden je Gate
|
||
(und = durchgezogen Tinte, oder = gestrichelt Grau) neu gezogen und treffen
|
||
so garantiert die Knoten — unabhängig vom Darstellungsmodus. */
|
||
function diagramToSvg(){
|
||
const treeRect = out.getBoundingClientRect();
|
||
const PAD = 24;
|
||
const W = Math.ceil(treeRect.width) + PAD*2;
|
||
const H = Math.ceil(treeRect.height) + PAD*2;
|
||
const ox = -treeRect.left + PAD, oy = -treeRect.top + PAD;
|
||
const R = el => { const r = el.getBoundingClientRect();
|
||
return {x:r.left+ox, y:r.top+oy, w:r.width, h:r.height,
|
||
cx:r.left+ox+r.width/2, cy:r.top+oy+r.height/2, r:r.right+ox, b:r.bottom+oy}; };
|
||
const parts = [`<rect x="0" y="0" width="${W}" height="${H}" fill="#ffffff"/>`];
|
||
const nodes = [...out.querySelectorAll('.node')];
|
||
const cheapPts = cheapPathOn
|
||
? [...out.querySelectorAll('.node.cheap-leaf')].map(el => { const b = R(el); return {x:b.cx, y:b.cy}; })
|
||
: [];
|
||
const cheapLine = op =>
|
||
`<path d="${catmullRom(cheapPts)}" fill="none" stroke="#0F766E" stroke-width="2.5" stroke-dasharray="8 6" stroke-linecap="round" opacity="${op}"/>`;
|
||
|
||
/* 1) Verbindungslinien (hinter den Knoten) */
|
||
const seg = (x1,y1,x2,y2,stroke,dash) =>
|
||
`<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="${stroke}" stroke-width="2"${dash?' stroke-dasharray="5 4"':''} stroke-linecap="round"/>`;
|
||
nodes.forEach(parentEl => {
|
||
const li = parentEl.closest('li');
|
||
const childUl = li && [...li.children].find(c => c.tagName === 'UL');
|
||
if(!childUl) return;
|
||
const gate = childUl.classList.contains('or') ? 'or' : 'and';
|
||
const stroke = gate === 'or' ? '#6B7A8C' : '#41556E';
|
||
const dash = gate === 'or';
|
||
const kids = [...childUl.children]
|
||
.map(cli => cli.querySelector(':scope > .node, :scope > a.node')).filter(Boolean).map(R);
|
||
if(!kids.length) return;
|
||
const p = R(parentEl);
|
||
const avgdx = kids.reduce((s,k)=>s+(k.cx-p.cx),0)/kids.length;
|
||
const avgdy = kids.reduce((s,k)=>s+(k.cy-p.cy),0)/kids.length;
|
||
if(Math.abs(avgdx) >= Math.abs(avgdy)){ /* links→rechts */
|
||
const toRight = avgdx >= 0;
|
||
const px = toRight ? p.r : p.x;
|
||
const busX = toRight ? Math.min(...kids.map(k=>k.x))-14 : Math.max(...kids.map(k=>k.r))+14;
|
||
const ys = kids.map(k=>k.cy).concat(p.cy);
|
||
parts.push(seg(px, p.cy, busX, p.cy, stroke, dash));
|
||
parts.push(seg(busX, Math.min(...ys), busX, Math.max(...ys), stroke, dash));
|
||
kids.forEach(k => parts.push(seg(busX, k.cy, toRight?k.x:k.r, k.cy, stroke, dash)));
|
||
} else { /* oben→unten */
|
||
const toDown = avgdy >= 0;
|
||
const py = toDown ? p.b : p.y;
|
||
const busY = toDown ? Math.min(...kids.map(k=>k.y))-14 : Math.max(...kids.map(k=>k.b))+14;
|
||
const xs = kids.map(k=>k.cx).concat(p.cx);
|
||
parts.push(seg(p.cx, py, p.cx, busY, stroke, dash));
|
||
parts.push(seg(Math.min(...xs), busY, Math.max(...xs), busY, stroke, dash));
|
||
kids.forEach(k => parts.push(seg(k.cx, busY, k.cx, toDown?k.y:k.b, stroke, dash)));
|
||
}
|
||
});
|
||
|
||
/* 1b) Günstigster-Pfad: kräftige Linie hinter den Knoten */
|
||
if(cheapPts.length >= 2) parts.push(cheapLine('0.9'));
|
||
|
||
/* 2) Badge/Pille (Größe, Tags) */
|
||
const drawBadge = (el, fill, textColor, strokeColor) => {
|
||
const b = R(el);
|
||
parts.push(`<rect x="${b.x.toFixed(1)}" y="${b.y.toFixed(1)}" width="${b.w.toFixed(1)}" height="${b.h.toFixed(1)}" rx="${Math.min(b.h/2,9).toFixed(1)}" fill="${fill}"${strokeColor?` stroke="${strokeColor}" stroke-width="1.2"`:''}/>`);
|
||
parts.push(`<text x="${b.cx.toFixed(1)}" y="${(b.cy+3.2).toFixed(1)}" text-anchor="middle" fill="${textColor}" font-size="9" font-family="'IBM Plex Mono',monospace">${esc(el.textContent.trim())}</text>`);
|
||
};
|
||
|
||
/* 3) Knoten */
|
||
nodes.forEach(node => {
|
||
const b = R(node), cs = getComputedStyle(node);
|
||
const dashed = cs.borderTopStyle === 'dashed';
|
||
parts.push(`<rect x="${b.x.toFixed(1)}" y="${b.y.toFixed(1)}" width="${b.w.toFixed(1)}" height="${b.h.toFixed(1)}" rx="8" fill="${cs.backgroundColor}" stroke="${cs.borderTopColor}" stroke-width="${parseFloat(cs.borderTopWidth)||1.5}"${dashed?' stroke-dasharray="4 3"':''}/>`);
|
||
const clone = node.cloneNode(true);
|
||
clone.querySelectorAll('.size,.tags,.ext').forEach(e => e.remove());
|
||
const label = clone.textContent.replace(/\s+/g,' ').trim();
|
||
const deco = cs.textDecorationLine.includes('line-through') ? ' text-decoration="line-through"' : '';
|
||
parts.push(`<text x="${b.cx.toFixed(1)}" y="${(b.cy+5).toFixed(1)}" text-anchor="middle" fill="${cs.color}" font-size="14" font-weight="${cs.fontWeight}"${deco}>${esc(label)}</text>`);
|
||
const sizeEl = node.querySelector('.size');
|
||
if(sizeEl) drawBadge(sizeEl, '#0F766E', '#ffffff');
|
||
node.querySelectorAll('.tag').forEach(tg => {
|
||
const t = getComputedStyle(tg);
|
||
drawBadge(tg, t.backgroundColor, t.color, t.borderTopColor);
|
||
});
|
||
});
|
||
|
||
/* 3b) Günstigster-Pfad: abgetönte Kopie über den Knoten + Stationspunkte */
|
||
if(cheapPts.length >= 2){
|
||
parts.push(cheapLine('0.2'));
|
||
cheapPts.forEach(p => parts.push(
|
||
`<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="10" fill="#0F766E" fill-opacity="0.2" stroke="#0F766E" stroke-opacity="0.35" stroke-width="1.5"/>`));
|
||
}
|
||
|
||
/* 4) Geister-Knoten „Untergliederung fehlt“ */
|
||
out.querySelectorAll('.ghost-node').forEach(g => {
|
||
const b = R(g);
|
||
parts.push(seg(b.cx, b.y-14, b.cx, b.y, '#B45309', true));
|
||
parts.push(`<rect x="${b.x.toFixed(1)}" y="${b.y.toFixed(1)}" width="${b.w.toFixed(1)}" height="${b.h.toFixed(1)}" rx="8" fill="rgba(180,83,9,0.06)" stroke="#B45309" stroke-width="1.5" stroke-dasharray="4 3"/>`);
|
||
parts.push(`<text x="${b.cx.toFixed(1)}" y="${(b.cy+4).toFixed(1)}" text-anchor="middle" fill="#B45309" font-size="11" font-style="italic">${esc(g.textContent.trim())}</text>`);
|
||
});
|
||
|
||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" font-family="'IBM Plex Sans',system-ui,sans-serif">${parts.join('')}</svg>`;
|
||
return {svg, W, H};
|
||
}
|
||
function svgToPng(svg, W, H, scale){
|
||
return new Promise(resolve => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
const c = document.createElement('canvas');
|
||
c.width = Math.round(W*scale); c.height = Math.round(H*scale);
|
||
const ctx = c.getContext('2d');
|
||
ctx.scale(scale, scale);
|
||
ctx.drawImage(img, 0, 0);
|
||
c.toBlob(b => resolve({blob:b, dataUrl:c.toDataURL('image/png')}), 'image/png');
|
||
};
|
||
img.onerror = () => resolve(null);
|
||
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
|
||
});
|
||
}
|
||
/* Kopiert das Diagramm als PNG-Bild. Zusätzlich wird eine text/html-Variante
|
||
mit eingebettetem PNG mitgegeben — Office-Programme wie LibreOffice Writer
|
||
bevorzugen den HTML-Flavor und betten das Bild dann korrekt ein. */
|
||
async function copyDiagramImage(){
|
||
const {svg, W, H} = diagramToSvg();
|
||
const png = await svgToPng(svg, W, H, 2);
|
||
if(png && png.blob && navigator.clipboard && window.ClipboardItem){
|
||
const html = new Blob(
|
||
[`<img src="${png.dataUrl}" width="${W}" height="${H}" alt="Werkbaum-Diagramm">`],
|
||
{type:'text/html'});
|
||
try{
|
||
await navigator.clipboard.write([new ClipboardItem({'image/png':png.blob, 'text/html':html})]);
|
||
return;
|
||
}catch(_){
|
||
try{ await navigator.clipboard.write([new ClipboardItem({'image/png':png.blob})]); return; }catch(_){}
|
||
}
|
||
}
|
||
await writeClipboard(svg); /* Fallback: SVG-Quelltext (ebenfalls Grafik) */
|
||
}
|
||
/* Als Datei speichern (SVG, Vektor). Verlässlicher Weg z. B. für LibreOffice
|
||
Writer: Einfügen → Bild → die Datei; das Bild-Clipboard aus dem Browser
|
||
erkennt LibreOffice nicht zuverlässig. */
|
||
function saveBlob(blob, filename){
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url; a.download = filename;
|
||
document.body.appendChild(a); a.click(); a.remove();
|
||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||
}
|
||
function downloadDiagramSvg(){
|
||
const {svg} = diagramToSvg();
|
||
saveBlob(new Blob([`<?xml version="1.0" encoding="UTF-8"?>\n` + svg], {type:'image/svg+xml'}),
|
||
'werkbaum-diagramm.svg');
|
||
}
|
||
async function downloadDiagramPng(){
|
||
const {svg, W, H} = diagramToSvg();
|
||
const png = await svgToPng(svg, W, H, 2);
|
||
if(png && png.blob) saveBlob(png.blob, 'werkbaum-diagramm.png');
|
||
}
|
||
|
||
/* Tab-Taste rückt ein statt den Fokus zu wechseln */
|
||
src.addEventListener('keydown', e => {
|
||
if(e.key === 'Tab'){
|
||
e.preventDefault();
|
||
const {selectionStart:s, selectionEnd:eEnd, value} = src;
|
||
src.value = value.slice(0, s) + ' ' + value.slice(eEnd);
|
||
src.selectionStart = src.selectionEnd = s + 2;
|
||
render();
|
||
saveSrc();
|
||
}
|
||
});
|
||
|
||
src.addEventListener('input', render);
|
||
src.addEventListener('input', saveSrc);
|
||
|
||
const app = document.getElementById('app');
|
||
function applyLayout(mode){
|
||
out.classList.toggle('vertical', mode === 'vertikal');
|
||
out.classList.toggle('kompakt', mode === 'kompakt');
|
||
app.classList.toggle('side', mode !== 'horizontal');
|
||
applySplit(); /* Preset für die neue Orientierung neu setzen */
|
||
drawCheapPath(); /* Blatt-Positionen ändern sich mit dem Modus */
|
||
}
|
||
document.querySelectorAll('input[name="layout"]').forEach(radio => {
|
||
radio.addEventListener('change', () => { if(radio.checked) applyLayout(radio.value); });
|
||
});
|
||
|
||
/* ---------- Min/Normal/Max je Bereich (Fenster-Buttons) ---------- */
|
||
/* Zustand 'a' = Diagramm minimiert (Editor maximiert),
|
||
'b' = Editor minimiert (Diagramm maximiert), 'normal' = beide sichtbar.
|
||
Minimieren schrumpft ein Panel auf seine Titelzeile; Maximieren des einen
|
||
entspricht dem Minimieren des anderen. */
|
||
let splitState = 'normal';
|
||
const editorPanel = document.querySelector('.panel.editor');
|
||
const diagramPanel = document.querySelector('.panel.right');
|
||
function clearCollapse(){
|
||
app.classList.remove('collapse-editor','collapse-diagram');
|
||
editorPanel.classList.remove('collapsed');
|
||
diagramPanel.classList.remove('collapsed');
|
||
document.querySelectorAll('.winbtn').forEach(b => b.classList.remove('active'));
|
||
}
|
||
function applySplit(){
|
||
/* Preset-/Drag-Größen bei Preset-Wechsel zurücksetzen */
|
||
app.style.removeProperty('--col');
|
||
app.style.removeProperty('--drow');
|
||
app.classList.toggle('collapse-diagram', splitState==='a');
|
||
app.classList.toggle('collapse-editor', splitState==='b');
|
||
diagramPanel.classList.toggle('collapsed', splitState==='a');
|
||
editorPanel.classList.toggle('collapsed', splitState==='b');
|
||
document.querySelectorAll('.winbtn').forEach(b => b.classList.toggle('active', b.dataset.state===splitState));
|
||
saveUI();
|
||
}
|
||
/* Setzt einen Minimier-Zustand während des Ziehens nur bei Änderung. */
|
||
function snapTo(state){ if(splitState!==state){ splitState = state; applySplit(); } }
|
||
document.querySelectorAll('.winbtn').forEach(b => {
|
||
b.addEventListener('click', e => {
|
||
/* Fenster-Buttons sind maßgeblich: nicht zum Titelzeilen-Restore durchreichen */
|
||
e.stopPropagation();
|
||
splitState = b.dataset.state; applySplit();
|
||
});
|
||
});
|
||
/* Klick auf die Titelzeile eines minimierten Panels stellt es wieder her. */
|
||
[editorPanel, diagramPanel].forEach(panel => {
|
||
panel.querySelector('.panel-head').addEventListener('click', e => {
|
||
if(e.target.closest('button, label, input')) return; /* Bedienelemente behalten ihre Funktion */
|
||
if(!panel.classList.contains('collapsed')) return;
|
||
/* Klein: das getippte Panel nach vorn holen (das andere schrumpft);
|
||
sonst: zurück in die normale Zweiteilung. */
|
||
if(isMobile()) splitState = (panel === editorPanel) ? 'a' : 'b';
|
||
else splitState = 'normal';
|
||
applySplit();
|
||
});
|
||
});
|
||
|
||
/* ---------- Splitter: Bereiche per Drag verteilen ---------- */
|
||
const gutter = document.getElementById('gutter');
|
||
const diagramEl = document.querySelector('.diagram');
|
||
let dragging = false;
|
||
gutter.addEventListener('pointerdown', e => {
|
||
dragging = true;
|
||
gutter.classList.add('dragging');
|
||
gutter.setPointerCapture(e.pointerId);
|
||
document.body.style.userSelect = 'none';
|
||
/* Freies Ziehen hebt Preset und Minimierung auf */
|
||
splitState = 'custom';
|
||
clearCollapse();
|
||
e.preventDefault();
|
||
});
|
||
/* Näher als SNAP an einem Rand: in den minimierten Zustand einrasten,
|
||
sonst frei skalieren. So sind beide Extreme per Splitter erreichbar. */
|
||
const SNAP = 72;
|
||
gutter.addEventListener('pointermove', e => {
|
||
if(!dragging) return;
|
||
const rect = app.getBoundingClientRect();
|
||
if(app.classList.contains('side')){
|
||
const w = e.clientX - rect.left, maxw = rect.width - 14;
|
||
if(w <= SNAP) snapTo('b'); /* Editor auf Titelzeile */
|
||
else if(w >= maxw - SNAP) snapTo('a'); /* Diagramm auf Titelzeile */
|
||
else {
|
||
if(splitState!=='custom'){ splitState='custom'; clearCollapse(); }
|
||
app.style.setProperty('--col', w + 'px');
|
||
}
|
||
} else {
|
||
const h = e.clientY - rect.top, maxh = rect.height - 14;
|
||
if(h <= SNAP) snapTo('a'); /* Diagramm (oben) auf Titelzeile */
|
||
else if(h >= maxh - SNAP) snapTo('b'); /* Editor (unten) auf Titelzeile */
|
||
else {
|
||
if(splitState!=='custom'){ splitState='custom'; clearCollapse(); }
|
||
app.style.setProperty('--drow', h + 'px');
|
||
}
|
||
}
|
||
});
|
||
function endDrag(e){
|
||
if(!dragging) return;
|
||
dragging = false;
|
||
gutter.classList.remove('dragging');
|
||
document.body.style.userSelect = '';
|
||
try{ gutter.releasePointerCapture(e.pointerId); }catch(_){}
|
||
saveUI(); /* freie Drag-Groesse (--col/--drow) sichern */
|
||
}
|
||
gutter.addEventListener('pointerup', endDrag);
|
||
gutter.addEventListener('pointercancel', endDrag);
|
||
/* Doppelklick auf den Splitter stellt die normale Aufteilung wieder her. */
|
||
gutter.addEventListener('dblclick', () => { splitState = 'normal'; applySplit(); });
|
||
|
||
/* ---------- Zoom für das Diagramm ---------- */
|
||
/* CSS-`zoom` skaliert die Layout-Box, dadurch greifen die Scrollbalken
|
||
des Diagramm-Containers korrekt (anders als transform: scale). */
|
||
const ZMIN = 0.3, ZMAX = 3, ZSTEP = 0.1;
|
||
let zoom = 1;
|
||
function applyZoom(){
|
||
zoom = Math.min(ZMAX, Math.max(ZMIN, Math.round(zoom * 100) / 100));
|
||
out.style.zoom = zoom;
|
||
document.getElementById('zoomReset').textContent = Math.round(zoom * 100) + ' %';
|
||
saveUI();
|
||
}
|
||
document.getElementById('zoomIn').addEventListener('click', () => { zoom += ZSTEP; applyZoom(); });
|
||
document.getElementById('zoomOut').addEventListener('click', () => { zoom -= ZSTEP; applyZoom(); });
|
||
document.getElementById('zoomReset').addEventListener('click', () => { zoom = 1; applyZoom(); });
|
||
diagramEl.addEventListener('wheel', e => {
|
||
if(!(e.ctrlKey || e.metaKey)) return; /* Strg/Cmd + Mausrad zoomt */
|
||
e.preventDefault();
|
||
zoom += (e.deltaY < 0 ? ZSTEP : -ZSTEP);
|
||
applyZoom();
|
||
}, {passive:false});
|
||
|
||
const showc = document.getElementById('showc');
|
||
function discardedShown(){ return showc.getAttribute('aria-pressed') === 'true'; }
|
||
function setDiscarded(on){ showc.setAttribute('aria-pressed', on ? 'true' : 'false'); }
|
||
showc.addEventListener('click', () => { setDiscarded(!discardedShown()); render(); saveUI(); });
|
||
|
||
/* Günstigster-Pfad-Hervorhebung an/aus */
|
||
const cheapBtn = document.getElementById('cheapBtn');
|
||
cheapBtn.addEventListener('click', () => {
|
||
cheapPathOn = !cheapPathOn;
|
||
cheapBtn.setAttribute('aria-pressed', cheapPathOn ? 'true' : 'false');
|
||
render();
|
||
saveUI();
|
||
});
|
||
|
||
/* ---------- In die Zwischenablage kopieren ---------- */
|
||
async function writeClipboard(text){
|
||
try{ await navigator.clipboard.writeText(text); return; }catch(_){}
|
||
const ta = document.createElement('textarea'); /* Fallback ohne Clipboard-API */
|
||
ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
|
||
document.body.appendChild(ta); ta.select();
|
||
try{ document.execCommand('copy'); }catch(_){}
|
||
document.body.removeChild(ta);
|
||
}
|
||
function flashCopied(btn, restoreTitleKey){
|
||
btn.classList.add('done');
|
||
btn.title = t('copyDone');
|
||
btn.setAttribute('aria-label', t('copyDone'));
|
||
setTimeout(() => {
|
||
btn.classList.remove('done');
|
||
btn.title = t(restoreTitleKey);
|
||
btn.setAttribute('aria-label', t(restoreTitleKey));
|
||
}, 1500);
|
||
}
|
||
document.getElementById('copy').addEventListener('click', async () => {
|
||
await writeClipboard(src.value);
|
||
flashCopied(document.getElementById('copy'), 'copyTooltip');
|
||
});
|
||
document.getElementById('copyDiagram').addEventListener('click', async () => {
|
||
await copyDiagramImage();
|
||
flashCopied(document.getElementById('copyDiagram'), 'copyDiagramTooltip');
|
||
});
|
||
function flashBtn(btn){ /* kurzer Petrol-Blitz als Rückmeldung, Tooltip bleibt */
|
||
btn.classList.add('done');
|
||
setTimeout(() => btn.classList.remove('done'), 1500);
|
||
}
|
||
document.getElementById('dlDiagram').addEventListener('click', () => {
|
||
downloadDiagramSvg();
|
||
flashBtn(document.getElementById('dlDiagram'));
|
||
closeDlMenu();
|
||
});
|
||
document.getElementById('dlDiagramPng').addEventListener('click', async () => {
|
||
closeDlMenu();
|
||
await downloadDiagramPng();
|
||
flashBtn(document.getElementById('dlDiagramPng'));
|
||
});
|
||
|
||
/* Download-Menü (nur Mobil): Trigger klappt SVG/PNG als Overlay auf; Auswahl
|
||
oder Tipp außerhalb schließt wieder. Auf Desktop ist der Trigger versteckt. */
|
||
const dlGroup = document.getElementById('dlGroup');
|
||
const dlTrigger = document.getElementById('dlTrigger');
|
||
function closeDlMenu(){
|
||
dlGroup.classList.remove('open');
|
||
dlTrigger.setAttribute('aria-expanded', 'false');
|
||
}
|
||
dlTrigger.addEventListener('click', () => {
|
||
const open = dlGroup.classList.toggle('open');
|
||
dlTrigger.setAttribute('aria-expanded', String(open));
|
||
});
|
||
document.addEventListener('click', e => {
|
||
if(dlGroup.classList.contains('open') && !dlGroup.contains(e.target)) closeDlMenu();
|
||
});
|
||
|
||
/* ---------- Internationalisierung (DE/EN/ES/FR) ---------- */
|
||
const I18N = {
|
||
de: {
|
||
subtitle:"Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree/Requirements-Baum Diagramm-Editor.",
|
||
subtitleShort:"WBS, Feature- & Requirements-Bäume als Text",
|
||
imprint:"Impressum",
|
||
legendTooltip:"Legende ein-/ausblenden",
|
||
ghostTooltip:"Ab Größe M sollte ein Element weiter untergliedert werden.",
|
||
discardedTooltip:"Verworfene Knoten samt Teilbaum ein-/ausblenden",
|
||
cheapTooltip:"Günstigsten Pfad hervorheben – nicht benötigte Alternativen treten zurück",
|
||
implicitSizeTooltip:"Keine Größe angegeben – für die Kostenschätzung als M angenommen",
|
||
fullscreenTooltip:"Vollbild – Panels nutzen die ganze Fensterbreite",
|
||
brandTooltip:"„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).",
|
||
editorTitle:"Struktur (Text)", diagramTitle:"Diagramm",
|
||
copy:"kopieren", copyDone:"kopiert ✓", copyTooltip:"Text in die Zwischenablage kopieren",
|
||
copyDiagramTooltip:"Diagramm als PNG-Bild in die Zwischenablage kopieren",
|
||
downloadDiagramTooltip:"Diagramm als SVG-Datei herunterladen (z. B. für LibreOffice: Einfügen → Bild)",
|
||
downloadPngTooltip:"Diagramm als PNG-Datei herunterladen (Rasterbild, überall einfügbar)",
|
||
downloadMenu:"Diagramm herunterladen (SVG/PNG)",
|
||
minimize:"minimieren", normal:"normal", maximize:"maximieren",
|
||
agenda:"Agenda", discarded:"verworfene",
|
||
modeHorizontal:"Horizontal – Organigramm, Diagramm über dem Editor",
|
||
modeKompakt:"Kompakt – alles nach unten, platzsparend",
|
||
modeVertikal:"Vertikal – Baum nach rechts, Diagramm neben dem Editor",
|
||
zoomOut:"verkleinern", zoomReset:"zurücksetzen", zoomIn:"vergrößern",
|
||
zoomAria:"Zoom (Strg/Cmd + Mausrad)", langMore:"weitere Sprachen",
|
||
empty:"Noch keine Struktur — einfach lostippen.", ghost:"…",
|
||
mixedWarn:"Zeile {line}: Unter „{label}“ sind - und | gemischt — dargestellt nach dem ersten Kind.",
|
||
st_idee:"Idee", st_geplant:"geplant", st_arbeit:"in Arbeit", st_durchstich:"Durchstich",
|
||
st_fertig:"fertig", st_prod:"in Produktion", st_verworfen:"verworfen",
|
||
hint_indent:"Einrückung (2 Leerzeichen oder Tab) definiert die Hierarchie.",
|
||
hint_all:"Teilpaket, alle erforderlich", hint_any:"Alternative, eine wählen",
|
||
hint_root:"Zeile ohne Zeichen = Wurzelknoten. Geschwister sollten dasselbe Zeichen tragen.",
|
||
hint_status:"Status als Kästchen nach dem Zeichen, z. B.",
|
||
hint_size:"Aufwand als T-Shirt-Größe in Klammern, Link einfach als URL anhängen:",
|
||
hint_break:"Ab (M) gilt: weiter untergliedern — fehlt die Untergliederung, erscheint ein Platzhalter im Diagramm.",
|
||
hint_comment:"Kommentare mit %% — als ganze Zeile oder am Zeilenende.",
|
||
hint_people:"Personen mit @name — erscheinen unten rechts am Knoten."
|
||
},
|
||
en: {
|
||
subtitle:"Werkbaum – A text-based WBS / work breakdown structure / feature-tree / requirements-tree diagram editor.",
|
||
subtitleShort:"WBS, feature & requirements trees as text",
|
||
imprint:"Imprint (Impressum)",
|
||
legendTooltip:"Show/hide legend",
|
||
ghostTooltip:"From size M upward, an item should be broken down further.",
|
||
discardedTooltip:"Show/hide discarded nodes and their subtree",
|
||
cheapTooltip:"Highlight the cheapest path – unneeded alternatives recede",
|
||
implicitSizeTooltip:"No size given – assumed as M for the cost estimate",
|
||
fullscreenTooltip:"Full screen – panels use the full window width",
|
||
brandTooltip:"“Werkbaum” means roughly ‘work tree’ — the tree of the work breakdown structure (WBS).",
|
||
editorTitle:"Structure (text)", diagramTitle:"Diagram",
|
||
copy:"copy", copyDone:"copied ✓", copyTooltip:"Copy text to clipboard",
|
||
copyDiagramTooltip:"Copy diagram as a PNG image to the clipboard",
|
||
downloadDiagramTooltip:"Download diagram as an SVG file (e.g. for LibreOffice: Insert → Image)",
|
||
downloadPngTooltip:"Download diagram as a PNG file (raster image, insertable anywhere)",
|
||
downloadMenu:"Download diagram (SVG/PNG)",
|
||
minimize:"minimize", normal:"normal", maximize:"maximize",
|
||
agenda:"Legend", discarded:"discarded",
|
||
modeHorizontal:"Horizontal – org chart, diagram above the editor",
|
||
modeKompakt:"Compact – everything downward, space-saving",
|
||
modeVertikal:"Vertical – tree to the right, diagram beside the editor",
|
||
zoomOut:"zoom out", zoomReset:"reset", zoomIn:"zoom in",
|
||
zoomAria:"Zoom (Ctrl/Cmd + mouse wheel)", langMore:"more languages",
|
||
empty:"No structure yet — just start typing.", ghost:"…",
|
||
mixedWarn:"Line {line}: under “{label}”, - and | are mixed — rendered by the first child.",
|
||
st_idee:"idea", st_geplant:"planned", st_arbeit:"in progress", st_durchstich:"walking skeleton",
|
||
st_fertig:"done", st_prod:"in production", st_verworfen:"discarded",
|
||
hint_indent:"Indentation (2 spaces or a tab) defines the hierarchy.",
|
||
hint_all:"sub-task, all required", hint_any:"alternative, choose one",
|
||
hint_root:"Line without a marker = root node. Siblings should share the same marker.",
|
||
hint_status:"Status as a checkbox after the marker, e.g.",
|
||
hint_size:"Effort as a T-shirt size in parentheses; add a link simply as a URL:",
|
||
hint_break:"From (M) on: break it down further — if the breakdown is missing, a placeholder appears in the diagram.",
|
||
hint_comment:"Comments with %% — whole line or at the end of a line.",
|
||
hint_people:"People with @name — shown at the bottom-right of the node."
|
||
},
|
||
es: {
|
||
subtitle:"Werkbaum – Un editor de diagramas basado en texto para EDT / estructura de desglose del trabajo / árbol de características / árbol de requisitos.",
|
||
subtitleShort:"EDT y árboles de características y requisitos",
|
||
imprint:"Aviso legal (Impressum)",
|
||
legendTooltip:"Mostrar u ocultar la leyenda",
|
||
ghostTooltip:"A partir de la talla M, un elemento debería desglosarse más.",
|
||
discardedTooltip:"Mostrar u ocultar los nodos descartados y su subárbol",
|
||
cheapTooltip:"Resaltar la ruta más económica: las alternativas no necesarias se atenúan",
|
||
implicitSizeTooltip:"Sin tamaño indicado: se asume M para el cálculo de costes",
|
||
fullscreenTooltip:"Pantalla completa – los paneles usan todo el ancho de la ventana",
|
||
brandTooltip:"«Werkbaum» significa algo así como ‘árbol de trabajo’ — el árbol de la estructura de desglose del trabajo (EDT).",
|
||
editorTitle:"Estructura (texto)", diagramTitle:"Diagrama",
|
||
copy:"copiar", copyDone:"copiado ✓", copyTooltip:"Copiar el texto al portapapeles",
|
||
copyDiagramTooltip:"Copiar el diagrama como imagen PNG al portapapeles",
|
||
downloadDiagramTooltip:"Descargar el diagrama como archivo SVG (p. ej. para LibreOffice: Insertar → Imagen)",
|
||
downloadPngTooltip:"Descargar el diagrama como archivo PNG (imagen de trama, insertable en cualquier lugar)",
|
||
downloadMenu:"Descargar el diagrama (SVG/PNG)",
|
||
minimize:"minimizar", normal:"normal", maximize:"maximizar",
|
||
agenda:"Leyenda", discarded:"descartados",
|
||
modeHorizontal:"Horizontal – organigrama, diagrama sobre el editor",
|
||
modeKompakt:"Compacto – todo hacia abajo, ahorra espacio",
|
||
modeVertikal:"Vertical – árbol hacia la derecha, diagrama junto al editor",
|
||
zoomOut:"alejar", zoomReset:"restablecer", zoomIn:"acercar",
|
||
zoomAria:"Zoom (Ctrl/Cmd + rueda del ratón)", langMore:"más idiomas",
|
||
empty:"Aún no hay estructura — simplemente empieza a escribir.", ghost:"…",
|
||
mixedWarn:"Línea {line}: bajo «{label}» se mezclan - y | — se representa según el primer hijo.",
|
||
st_idee:"idea", st_geplant:"planificado", st_arbeit:"en curso", st_durchstich:"prototipo funcional",
|
||
st_fertig:"terminado", st_prod:"en producción", st_verworfen:"descartado",
|
||
hint_indent:"La sangría (2 espacios o un tabulador) define la jerarquía.",
|
||
hint_all:"subtarea, todas obligatorias", hint_any:"alternativa, elige una",
|
||
hint_root:"Línea sin marcador = nodo raíz. Los hermanos deberían llevar el mismo marcador.",
|
||
hint_status:"Estado como casilla tras el marcador, p. ej.",
|
||
hint_size:"Esfuerzo como talla de camiseta entre paréntesis; añade un enlace simplemente como URL:",
|
||
hint_break:"A partir de (M): sigue desglosando — si falta el desglose, aparece un marcador de posición en el diagrama.",
|
||
hint_comment:"Comentarios con %% — línea completa o al final de la línea.",
|
||
hint_people:"Personas con @nombre — aparecen abajo a la derecha del nodo."
|
||
},
|
||
fr: {
|
||
subtitle:"Werkbaum – Un éditeur de diagrammes basé sur le texte pour WBS / organigramme des tâches / arbre de fonctionnalités / arbre d'exigences.",
|
||
subtitleShort:"WBS, arbres de fonctionnalités et d'exigences",
|
||
imprint:"Mentions légales (Impressum)",
|
||
legendTooltip:"Afficher/masquer la légende",
|
||
ghostTooltip:"À partir de la taille M, un élément devrait être décomposé davantage.",
|
||
discardedTooltip:"Afficher/masquer les nœuds abandonnés et leur sous-arbre",
|
||
cheapTooltip:"Mettre en évidence le chemin le moins coûteux – les alternatives inutiles s'estompent",
|
||
implicitSizeTooltip:"Aucune taille indiquée – considérée comme M pour l'estimation des coûts",
|
||
fullscreenTooltip:"Plein écran – les panneaux occupent toute la largeur de la fenêtre",
|
||
brandTooltip:"« Werkbaum » signifie à peu près « arbre de travail » — l’arbre de l’organigramme des tâches (WBS).",
|
||
editorTitle:"Structure (texte)", diagramTitle:"Diagramme",
|
||
copy:"copier", copyDone:"copié ✓", copyTooltip:"Copier le texte dans le presse-papiers",
|
||
copyDiagramTooltip:"Copier le diagramme comme image PNG dans le presse-papiers",
|
||
downloadDiagramTooltip:"Télécharger le diagramme en fichier SVG (p. ex. pour LibreOffice : Insertion → Image)",
|
||
downloadPngTooltip:"Télécharger le diagramme en fichier PNG (image matricielle, insérable partout)",
|
||
downloadMenu:"Télécharger le diagramme (SVG/PNG)",
|
||
minimize:"réduire", normal:"normal", maximize:"agrandir",
|
||
agenda:"Légende", discarded:"abandonnés",
|
||
modeHorizontal:"Horizontal – organigramme, diagramme au-dessus de l'éditeur",
|
||
modeKompakt:"Compact – tout vers le bas, gain de place",
|
||
modeVertikal:"Vertical – arbre vers la droite, diagramme à côté de l'éditeur",
|
||
zoomOut:"dézoomer", zoomReset:"réinitialiser", zoomIn:"zoomer",
|
||
zoomAria:"Zoom (Ctrl/Cmd + molette)", langMore:"plus de langues",
|
||
empty:"Pas encore de structure — commencez à taper.", ghost:"…",
|
||
mixedWarn:"Ligne {line} : sous « {label} », - et | sont mélangés — rendu selon le premier enfant.",
|
||
st_idee:"idée", st_geplant:"planifié", st_arbeit:"en cours", st_durchstich:"squelette fonctionnel",
|
||
st_fertig:"terminé", st_prod:"en production", st_verworfen:"abandonné",
|
||
hint_indent:"L'indentation (2 espaces ou une tabulation) définit la hiérarchie.",
|
||
hint_all:"sous-tâche, toutes requises", hint_any:"alternative, en choisir une",
|
||
hint_root:"Ligne sans marqueur = nœud racine. Les frères devraient porter le même marqueur.",
|
||
hint_status:"Statut sous forme de case après le marqueur, p. ex.",
|
||
hint_size:"Effort en taille de T-shirt entre parenthèses ; ajoutez un lien simplement comme URL :",
|
||
hint_break:"À partir de (M) : décomposer davantage — si la décomposition manque, un espace réservé apparaît dans le diagramme.",
|
||
hint_comment:"Commentaires avec %% — ligne entière ou en fin de ligne.",
|
||
hint_people:"Personnes avec @nom — affichées en bas à droite du nœud."
|
||
},
|
||
pl: {
|
||
subtitle:"Werkbaum – Edytor diagramów oparty na tekście: WBS / struktura podziału pracy / drzewo funkcji / drzewo wymagań.",
|
||
subtitleShort:"WBS, drzewa funkcji i wymagań jako tekst",
|
||
imprint:"Nota prawna (Impressum)",
|
||
legendTooltip:"Pokaż/ukryj legendę",
|
||
ghostTooltip:"Od rozmiaru M element powinien być dalej podzielony.",
|
||
discardedTooltip:"Pokaż/ukryj odrzucone węzły wraz z poddrzewem",
|
||
cheapTooltip:"Wyróżnij najtańszą ścieżkę – niepotrzebne alternatywy są przygaszone",
|
||
implicitSizeTooltip:"Nie podano rozmiaru – przyjęto M do szacowania kosztów",
|
||
fullscreenTooltip:"Pełny ekran – panele wykorzystują całą szerokość okna",
|
||
brandTooltip:"„Werkbaum” znaczy mniej więcej ‚drzewo pracy’ — drzewo struktury podziału pracy (WBS).",
|
||
editorTitle:"Struktura (tekst)", diagramTitle:"Diagram",
|
||
copy:"kopiuj", copyDone:"skopiowano ✓", copyTooltip:"Kopiuj tekst do schowka",
|
||
copyDiagramTooltip:"Kopiuj diagram jako obraz PNG do schowka",
|
||
downloadDiagramTooltip:"Pobierz diagram jako plik SVG (np. dla LibreOffice: Wstaw → Obraz)",
|
||
downloadPngTooltip:"Pobierz diagram jako plik PNG (obraz rastrowy, wszędzie do wstawienia)",
|
||
downloadMenu:"Pobierz diagram (SVG/PNG)",
|
||
minimize:"minimalizuj", normal:"normalny", maximize:"maksymalizuj",
|
||
agenda:"Legenda", discarded:"odrzucone",
|
||
modeHorizontal:"Poziomo – schemat organizacyjny, diagram nad edytorem",
|
||
modeKompakt:"Kompaktowo – wszystko w dół, oszczędza miejsce",
|
||
modeVertikal:"Pionowo – drzewo w prawo, diagram obok edytora",
|
||
zoomOut:"pomniejsz", zoomReset:"resetuj", zoomIn:"powiększ",
|
||
zoomAria:"Powiększenie (Ctrl/Cmd + kółko myszy)", langMore:"więcej języków",
|
||
empty:"Brak struktury — zacznij pisać.", ghost:"…",
|
||
mixedWarn:"Wiersz {line}: pod „{label}” mieszają się - i | — renderowane według pierwszego dziecka.",
|
||
st_idee:"pomysł", st_geplant:"zaplanowane", st_arbeit:"w toku", st_durchstich:"działający szkielet",
|
||
st_fertig:"gotowe", st_prod:"w produkcji", st_verworfen:"odrzucone",
|
||
hint_indent:"Wcięcie (2 spacje lub tabulator) definiuje hierarchię.",
|
||
hint_all:"podzadanie, wszystkie wymagane", hint_any:"alternatywa, wybierz jedną",
|
||
hint_root:"Wiersz bez znacznika = węzeł główny. Rodzeństwo powinno mieć ten sam znacznik.",
|
||
hint_status:"Status jako pole wyboru po znaczniku, np.",
|
||
hint_size:"Nakład jako rozmiar koszulki w nawiasach; link dodaj po prostu jako URL:",
|
||
hint_break:"Od (M): dziel dalej — gdy brakuje podziału, w diagramie pojawia się symbol zastępczy.",
|
||
hint_comment:"Komentarze z %% — cały wiersz lub na końcu wiersza.",
|
||
hint_people:"Osoby z @nazwa — pokazywane w prawym dolnym rogu węzła."
|
||
},
|
||
ru: {
|
||
subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций / дерево требований.",
|
||
subtitleShort:"СДР, деревья функций и требований",
|
||
imprint:"Выходные данные (Impressum)",
|
||
legendTooltip:"Показать/скрыть легенду",
|
||
ghostTooltip:"Начиная с размера M элемент следует далее декомпозировать.",
|
||
discardedTooltip:"Показать/скрыть отклонённые узлы вместе с поддеревом",
|
||
cheapTooltip:"Выделить самый дешёвый путь — ненужные альтернативы приглушаются",
|
||
implicitSizeTooltip:"Размер не указан — для оценки затрат принят как M",
|
||
fullscreenTooltip:"Полный экран – панели занимают всю ширину окна",
|
||
brandTooltip:"«Werkbaum» примерно означает ‚дерево работ’ — дерево структуры декомпозиции работ (СДР).",
|
||
editorTitle:"Структура (текст)", diagramTitle:"Диаграмма",
|
||
copy:"копировать", copyDone:"скопировано ✓", copyTooltip:"Скопировать текст в буфер обмена",
|
||
copyDiagramTooltip:"Скопировать диаграмму как изображение PNG в буфер обмена",
|
||
downloadDiagramTooltip:"Скачать диаграмму как файл SVG (напр. для LibreOffice: Вставка → Изображение)",
|
||
downloadPngTooltip:"Скачать диаграмму как файл PNG (растровое изображение, вставляется везде)",
|
||
downloadMenu:"Скачать диаграмму (SVG/PNG)",
|
||
minimize:"свернуть", normal:"обычный", maximize:"развернуть",
|
||
agenda:"Легенда", discarded:"отклонённые",
|
||
modeHorizontal:"Горизонтально – оргсхема, диаграмма над редактором",
|
||
modeKompakt:"Компактно – всё вниз, экономит место",
|
||
modeVertikal:"Вертикально – дерево вправо, диаграмма рядом с редактором",
|
||
zoomOut:"уменьшить", zoomReset:"сбросить", zoomIn:"увеличить",
|
||
zoomAria:"Масштаб (Ctrl/Cmd + колесо мыши)", langMore:"ещё языки",
|
||
empty:"Пока нет структуры — просто начните печатать.", ghost:"…",
|
||
mixedWarn:"Строка {line}: под «{label}» смешаны - и | — отображается по первому потомку.",
|
||
st_idee:"идея", st_geplant:"запланировано", st_arbeit:"в работе", st_durchstich:"сквозной прототип",
|
||
st_fertig:"готово", st_prod:"в эксплуатации", st_verworfen:"отклонено",
|
||
hint_indent:"Отступ (2 пробела или табуляция) задаёт иерархию.",
|
||
hint_all:"подзадача, все обязательны", hint_any:"альтернатива, выберите одну",
|
||
hint_root:"Строка без маркера = корневой узел. У соседних узлов должен быть одинаковый маркер.",
|
||
hint_status:"Статус в виде флажка после маркера, напр.",
|
||
hint_size:"Трудоёмкость как размер футболки в скобках; ссылку добавьте просто как URL:",
|
||
hint_break:"С (M): дробите дальше — если декомпозиции нет, в диаграмме появляется заполнитель.",
|
||
hint_comment:"Комментарии через %% — вся строка или в конце строки.",
|
||
hint_people:"Люди через @имя — показываются справа внизу узла."
|
||
},
|
||
hi: {
|
||
subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री / रिक्वायरमेंट-ट्री।",
|
||
subtitleShort:"WBS, फ़ीचर और रिक्वायरमेंट ट्री",
|
||
imprint:"प्रकाशन विवरण (Impressum)",
|
||
legendTooltip:"लेजेंड दिखाएँ/छिपाएँ",
|
||
ghostTooltip:"आकार M से ऊपर किसी तत्व को और अधिक उप-विभाजित करना चाहिए।",
|
||
discardedTooltip:"अस्वीकृत नोड्स और उनके उप-वृक्ष दिखाएँ/छिपाएँ",
|
||
cheapTooltip:"सबसे किफ़ायती पथ को उजागर करें – अनावश्यक विकल्प मंद हो जाते हैं",
|
||
implicitSizeTooltip:"कोई आकार नहीं दिया गया – लागत अनुमान के लिए M माना गया",
|
||
fullscreenTooltip:"पूर्ण स्क्रीन – पैनल पूरी विंडो चौड़ाई का उपयोग करते हैं",
|
||
brandTooltip:"„Werkbaum“ का अर्थ लगभग ‚कार्य-वृक्ष‘ है — कार्य विभाजन संरचना (WBS) का वृक्ष।",
|
||
editorTitle:"संरचना (टेक्स्ट)", diagramTitle:"आरेख",
|
||
copy:"कॉपी करें", copyDone:"कॉपी हो गया ✓", copyTooltip:"टेक्स्ट को क्लिपबोर्ड पर कॉपी करें",
|
||
copyDiagramTooltip:"आरेख को PNG छवि के रूप में क्लिपबोर्ड पर कॉपी करें",
|
||
downloadDiagramTooltip:"आरेख को SVG फ़ाइल के रूप में डाउनलोड करें (जैसे LibreOffice: सम्मिलित करें → छवि)",
|
||
downloadPngTooltip:"आरेख को PNG फ़ाइल के रूप में डाउनलोड करें (रास्टर छवि, कहीं भी सम्मिलित करने योग्य)",
|
||
downloadMenu:"आरेख डाउनलोड करें (SVG/PNG)",
|
||
minimize:"छोटा करें", normal:"सामान्य", maximize:"बड़ा करें",
|
||
agenda:"लेजेंड", discarded:"अस्वीकृत",
|
||
modeHorizontal:"क्षैतिज – संगठन-चार्ट, संपादक के ऊपर आरेख",
|
||
modeKompakt:"सघन – सब नीचे की ओर, जगह बचाता है",
|
||
modeVertikal:"लंबवत – पेड़ दाईं ओर, संपादक के बगल में आरेख",
|
||
zoomOut:"ज़ूम आउट", zoomReset:"रीसेट करें", zoomIn:"ज़ूम इन",
|
||
zoomAria:"ज़ूम (Ctrl/Cmd + माउस-व्हील)", langMore:"और भाषाएँ",
|
||
empty:"अभी कोई संरचना नहीं — बस टाइप करना शुरू करें।", ghost:"…",
|
||
mixedWarn:"पंक्ति {line}: „{label}“ के अंतर्गत - और | मिश्रित हैं — पहले चाइल्ड के अनुसार दिखाया गया।",
|
||
st_idee:"विचार", st_geplant:"नियोजित", st_arbeit:"प्रगति पर", st_durchstich:"कार्यशील ढाँचा",
|
||
st_fertig:"पूर्ण", st_prod:"उत्पादन में", st_verworfen:"अस्वीकृत",
|
||
hint_indent:"इंडेंट (2 स्पेस या टैब) पदानुक्रम तय करता है।",
|
||
hint_all:"उप-कार्य, सभी आवश्यक", hint_any:"विकल्प, एक चुनें",
|
||
hint_root:"बिना मार्कर वाली पंक्ति = मूल नोड। सहोदर नोड्स का मार्कर समान होना चाहिए।",
|
||
hint_status:"मार्कर के बाद चेकबॉक्स के रूप में स्थिति, जैसे",
|
||
hint_size:"प्रयास कोष्ठक में टी-शर्ट आकार के रूप में; लिंक बस URL के रूप में जोड़ें:",
|
||
hint_break:"(M) से आगे: और विभाजित करें — विभाजन न होने पर आरेख में प्लेसहोल्डर दिखता है।",
|
||
hint_comment:"%% से टिप्पणियाँ — पूरी पंक्ति या पंक्ति के अंत में।",
|
||
hint_people:"@नाम से व्यक्ति — नोड के नीचे-दाएँ दिखते हैं।"
|
||
},
|
||
zh: {
|
||
subtitle:"Werkbaum – 基于文本的图表编辑器：WBS / 工作分解结构 / 功能树 / 需求树。",
|
||
subtitleShort:"WBS、功能树与需求树",
|
||
imprint:"法律声明（Impressum）",
|
||
legendTooltip:"显示/隐藏图例",
|
||
brandTooltip:"「Werkbaum」大致意为‘工作之树’——即工作分解结构（WBS）之树。",
|
||
fullscreenTooltip:"全屏——面板占据整个窗口宽度",
|
||
discardedTooltip:"显示/隐藏已放弃的节点及其子树",
|
||
cheapTooltip:"突出显示成本最低的路径——不需要的备选项将淡化",
|
||
implicitSizeTooltip:"未指定尺寸——成本估算时按 M 计",
|
||
ghostTooltip:"从 M 号起，元素应进一步细分。",
|
||
editorTitle:"结构（文本）", diagramTitle:"图表",
|
||
copy:"复制", copyDone:"已复制 ✓", copyTooltip:"将文本复制到剪贴板",
|
||
copyDiagramTooltip:"将图表作为 PNG 图片复制到剪贴板",
|
||
downloadDiagramTooltip:"将图表下载为 SVG 文件（例如用于 LibreOffice：插入 → 图像）",
|
||
downloadPngTooltip:"将图表下载为 PNG 文件（位图，可在任何地方插入）",
|
||
downloadMenu:"下载图表（SVG/PNG）",
|
||
minimize:"最小化", normal:"正常", maximize:"最大化",
|
||
agenda:"图例", discarded:"已放弃",
|
||
modeHorizontal:"横向——组织结构图，图表在编辑器上方",
|
||
modeKompakt:"紧凑——全部向下，节省空间",
|
||
modeVertikal:"纵向——树向右展开，图表在编辑器旁边",
|
||
zoomOut:"缩小", zoomReset:"重置", zoomIn:"放大",
|
||
zoomAria:"缩放（Ctrl/Cmd + 鼠标滚轮）", langMore:"更多语言",
|
||
empty:"还没有结构——直接开始输入吧。", ghost:"…",
|
||
mixedWarn:"第 {line} 行：在「{label}」下 - 与 | 混用——按第一个子项渲染。",
|
||
st_idee:"想法", st_geplant:"已计划", st_arbeit:"进行中", st_durchstich:"可运行骨架",
|
||
st_fertig:"已完成", st_prod:"已上线", st_verworfen:"已放弃",
|
||
hint_indent:"缩进（2 个空格或制表符）定义层级。",
|
||
hint_all:"子任务，全部必需", hint_any:"备选项，择其一",
|
||
hint_root:"无标记的行 = 根节点。同级应使用相同的标记。",
|
||
hint_status:"在标记后用方框表示状态，例如",
|
||
hint_size:"用括号中的 T 恤尺码表示工作量；链接直接作为 URL 附加：",
|
||
hint_break:"从 (M) 起：继续细分——若缺少细分，图表中会出现占位符。",
|
||
hint_comment:"用 %% 注释——整行或行尾。",
|
||
hint_people:"用 @姓名 表示人员——显示在节点右下角。"
|
||
},
|
||
ja: {
|
||
subtitle:"Werkbaum – テキストベースの図エディター：WBS / 作業分解構成図 / フィーチャーツリー / 要件ツリー。",
|
||
subtitleShort:"WBS・機能ツリー・要件ツリー",
|
||
imprint:"運営者情報（Impressum）",
|
||
legendTooltip:"凡例を表示/非表示",
|
||
brandTooltip:"「Werkbaum」はおおよそ『作業の木』の意味 — 作業分解構成図（WBS）のツリーです。",
|
||
fullscreenTooltip:"全画面 — パネルがウィンドウ幅いっぱいを使用",
|
||
discardedTooltip:"破棄したノードとその下位ツリーを表示/非表示",
|
||
cheapTooltip:"最も低コストの経路を強調 – 不要な選択肢は控えめに表示",
|
||
implicitSizeTooltip:"サイズ未指定 – コスト見積もりのため M として扱う",
|
||
ghostTooltip:"サイズ M 以上の要素はさらに分解すべきです。",
|
||
editorTitle:"構造（テキスト）", diagramTitle:"ダイアグラム",
|
||
copy:"コピー", copyDone:"コピーしました ✓", copyTooltip:"テキストをクリップボードにコピー",
|
||
copyDiagramTooltip:"ダイアグラムを PNG 画像としてクリップボードにコピー",
|
||
downloadDiagramTooltip:"ダイアグラムを SVG ファイルとしてダウンロード（例：LibreOffice の 挿入 → 画像）",
|
||
downloadPngTooltip:"ダイアグラムを PNG ファイルとしてダウンロード（ラスター画像、どこにでも挿入可能）",
|
||
downloadMenu:"ダイアグラムをダウンロード（SVG/PNG）",
|
||
minimize:"最小化", normal:"標準", maximize:"最大化",
|
||
agenda:"凡例", discarded:"破棄",
|
||
modeHorizontal:"横 — 組織図、ダイアグラムはエディターの上",
|
||
modeKompakt:"コンパクト — すべて下方向、省スペース",
|
||
modeVertikal:"縦 — ツリーを右へ、ダイアグラムはエディターの横",
|
||
zoomOut:"縮小", zoomReset:"リセット", zoomIn:"拡大",
|
||
zoomAria:"ズーム（Ctrl/Cmd + マウスホイール）", langMore:"その他の言語",
|
||
empty:"まだ構造がありません — 入力を始めてください。", ghost:"…",
|
||
mixedWarn:"{line} 行目：「{label}」の下で - と | が混在 — 最初の子に従って表示。",
|
||
st_idee:"アイデア", st_geplant:"計画済み", st_arbeit:"作業中", st_durchstich:"ウォーキングスケルトン",
|
||
st_fertig:"完了", st_prod:"本番稼働", st_verworfen:"破棄",
|
||
hint_indent:"インデント（スペース2つまたはタブ）で階層を定義します。",
|
||
hint_all:"サブタスク、すべて必須", hint_any:"選択肢、1つを選ぶ",
|
||
hint_root:"マーカーのない行 = ルートノード。兄弟は同じマーカーを使うべきです。",
|
||
hint_status:"マーカーの後にチェックボックスで状態、例：",
|
||
hint_size:"工数は括弧内の T シャツサイズで；リンクは URL としてそのまま追加：",
|
||
hint_break:"(M) 以上：さらに分解 — 分解がないと図にプレースホルダーが表示されます。",
|
||
hint_comment:"%% でコメント — 行全体または行末。",
|
||
hint_people:"@名前 で担当者 — ノードの右下に表示されます。"
|
||
}
|
||
};
|
||
let lang = 'de';
|
||
function t(key, vars){
|
||
let s = (I18N[lang] && I18N[lang][key]) ?? I18N.de[key] ?? key;
|
||
if(vars) for(const k in vars) s = s.split('{'+k+'}').join(vars[k]);
|
||
return s;
|
||
}
|
||
function buildHint(){
|
||
const chip = (key, code) => `<span class="chip st-${key}">${code} ${esc(t('st_'+key))}</span>`;
|
||
return `${esc(t('hint_indent'))}<br>
|
||
<code>-</code> ${esc(t('hint_all'))} <em>(all of)</em><br>
|
||
<code class="or-code">|</code> ${esc(t('hint_any'))} <em>(any of)</em><br>
|
||
${esc(t('hint_root'))}<br>
|
||
${esc(t('hint_status'))} <code>- [~] Frontend</code>:
|
||
<div class="chips">
|
||
${chip('idee','[?]')}
|
||
${chip('geplant','[ ]')}
|
||
${chip('arbeit','[~]')}
|
||
${chip('durchstich','[/]')}
|
||
${chip('fertig','[x]')}
|
||
${chip('prod','[^]')}
|
||
${chip('verworfen','[-]')}
|
||
</div>
|
||
${esc(t('hint_size'))}<br>
|
||
<code>- [ ] Backend (L) https://…</code><br>
|
||
${esc(t('hint_break'))}<br>
|
||
${esc(t('hint_comment'))}
|
||
${esc(t('hint_people'))}`;
|
||
}
|
||
function applyLang(l){
|
||
lang = l;
|
||
document.documentElement.lang = l;
|
||
document.querySelectorAll('[data-i18n]').forEach(el => el.textContent = t(el.dataset.i18n));
|
||
document.querySelectorAll('[data-i18n-title]').forEach(el => el.title = t(el.dataset.i18nTitle));
|
||
document.querySelectorAll('[data-i18n-aria]').forEach(el => el.setAttribute('aria-label', t(el.dataset.i18nAria)));
|
||
document.getElementById('hint').innerHTML = buildHint();
|
||
document.querySelectorAll('.langsel button[data-lang]').forEach(b => b.classList.toggle('active', b.dataset.lang===l));
|
||
/* Ist eine aufklappbare Sprache aktiv, den erweiterten Bereich offen halten.
|
||
Auf kleinem Bildschirm nicht — dort bleibt die Leiste schlank (EN + aktive
|
||
Sprache reichen; die aktive wird per CSS auch als „extra“ eingeblendet). */
|
||
if(LANG_EXTRA.includes(l) && !isMobile()){
|
||
langsel.classList.add('expanded');
|
||
langMore.setAttribute('aria-expanded', 'true');
|
||
}
|
||
render();
|
||
try{ localStorage.setItem('werkbaum-lang', l); }catch(_){}
|
||
}
|
||
const langsel = document.querySelector('.langsel');
|
||
const langMore = document.getElementById('langMore');
|
||
const LANG_EXTRA = ['pl','ru','hi','zh','ja'];
|
||
langMore.addEventListener('click', () => {
|
||
const exp = langsel.classList.toggle('expanded');
|
||
langMore.setAttribute('aria-expanded', String(exp));
|
||
});
|
||
function collapseLangsel(){
|
||
langsel.classList.remove('expanded');
|
||
langMore.setAttribute('aria-expanded', 'false');
|
||
}
|
||
document.querySelectorAll('.langsel button[data-lang]').forEach(b => {
|
||
b.addEventListener('click', () => {
|
||
/* Mobil: eingeklappt ist nur die aktive Sprache sichtbar — ein Tipp klappt
|
||
die volle Leiste als Overlay auf; erst im aufgeklappten Zustand wählt ein
|
||
Tipp die Sprache und klappt wieder ein. */
|
||
if(isMobile() && !langsel.classList.contains('expanded')){
|
||
langsel.classList.add('expanded');
|
||
langMore.setAttribute('aria-expanded', 'true');
|
||
return;
|
||
}
|
||
applyLang(b.dataset.lang);
|
||
if(isMobile()) collapseLangsel();
|
||
});
|
||
});
|
||
/* Mobil: Tipp außerhalb der aufgeklappten Leiste schließt sie wieder. */
|
||
document.addEventListener('click', e => {
|
||
if(isMobile() && langsel.classList.contains('expanded') && !langsel.contains(e.target)){
|
||
collapseLangsel();
|
||
}
|
||
});
|
||
|
||
/* ---------- Vollbild: Panels über die ganze Fensterbreite ---------- */
|
||
const fsBtn = document.getElementById('fsToggle');
|
||
fsBtn.addEventListener('click', () => {
|
||
const on = document.body.classList.toggle('fullscreen');
|
||
fsBtn.classList.toggle('active', on);
|
||
fsBtn.setAttribute('aria-pressed', String(on));
|
||
saveUI();
|
||
});
|
||
|
||
/* ---------- GUI-Zustand + Editortext im Browser sichern ----------
|
||
Noch kein Backend: Einstellungen (Modus, verworfene, Aufteilung, Zoom,
|
||
Vollbild) und der Editortext bleiben per localStorage über Neuladen
|
||
erhalten. Sprache liegt weiterhin in 'werkbaum-lang'. */
|
||
const LS_UI = 'werkbaum-ui', LS_SRC = 'werkbaum-src';
|
||
let restoring = false; /* unterdrückt Speichern während des Wiederherstellens */
|
||
let hadStoredUI = false; /* gab es beim Laden schon gespeicherte GUI-Einstellungen? */
|
||
function saveSrc(){
|
||
if(restoring) return;
|
||
try{ localStorage.setItem(LS_SRC, src.value); }catch(_){}
|
||
}
|
||
function saveUI(){
|
||
if(restoring) return;
|
||
try{
|
||
const modeEl = document.querySelector('input[name="layout"]:checked');
|
||
localStorage.setItem(LS_UI, JSON.stringify({
|
||
mode: modeEl ? modeEl.value : 'horizontal',
|
||
discarded: discardedShown(),
|
||
cheapPath: cheapPathOn,
|
||
split: splitState,
|
||
col: app.style.getPropertyValue('--col') || null,
|
||
drow: app.style.getPropertyValue('--drow') || null,
|
||
zoom: zoom,
|
||
fullscreen: document.body.classList.contains('fullscreen')
|
||
}));
|
||
}catch(_){}
|
||
}
|
||
function restoreState(){
|
||
restoring = true;
|
||
let savedSrc = null, ui = null;
|
||
try{ savedSrc = localStorage.getItem(LS_SRC); }catch(_){}
|
||
try{ ui = JSON.parse(localStorage.getItem(LS_UI) || 'null'); }catch(_){}
|
||
hadStoredUI = !!ui;
|
||
src.value = (savedSrc !== null) ? savedSrc : INITIAL; /* leerer String bleibt leer */
|
||
const mode = (ui && ui.mode) || 'horizontal';
|
||
const modeEl = document.querySelector('input[name="layout"][value="' + mode + '"]');
|
||
if(modeEl) modeEl.checked = true;
|
||
if(ui){
|
||
if(typeof ui.discarded === 'boolean') setDiscarded(ui.discarded);
|
||
if(typeof ui.cheapPath === 'boolean'){
|
||
cheapPathOn = ui.cheapPath;
|
||
cheapBtn.setAttribute('aria-pressed', cheapPathOn ? 'true' : 'false');
|
||
}
|
||
if(typeof ui.zoom === 'number') zoom = ui.zoom;
|
||
if(ui.split) splitState = ui.split;
|
||
if(ui.fullscreen){
|
||
document.body.classList.add('fullscreen');
|
||
fsBtn.classList.add('active');
|
||
fsBtn.setAttribute('aria-pressed', 'true');
|
||
}
|
||
}
|
||
applyLayout(mode); /* setzt Ausrichtung + ruft applySplit() */
|
||
if(splitState === 'custom'){ /* freie Drag-Größen nach applySplit wieder setzen */
|
||
if(ui && ui.col) app.style.setProperty('--col', ui.col);
|
||
if(ui && ui.drow) app.style.setProperty('--drow', ui.drow);
|
||
}
|
||
applyZoom();
|
||
restoring = false;
|
||
}
|
||
|
||
/* ---------- Kleiner Bildschirm: nur ein Panel, schlanke Sprachwahl, Vollbild ---------- */
|
||
const mqMobile = window.matchMedia('(max-width:640px)');
|
||
function isMobile(){ return mqMobile.matches; }
|
||
|
||
/* Exakte sichtbare Höhe (--app-height) aus window.visualViewport ableiten.
|
||
Nötig, weil manche Browser (z. B. Brave) ihre untere Leiste als Overlay
|
||
zeichnen: 100dvh meldet dann weiterhin die volle Höhe, und Footer/Editor-
|
||
Titelzeile verschwinden dahinter. visualViewport.height liefert die wirklich
|
||
sichtbare Fläche. Fällt es weg, greift die CSS-Kaskade (dvh/vh). */
|
||
function setAppHeight(){
|
||
const vv = window.visualViewport;
|
||
const h = vv ? vv.height : window.innerHeight;
|
||
document.documentElement.style.setProperty('--app-height', Math.round(h) + 'px');
|
||
}
|
||
setAppHeight();
|
||
window.addEventListener('resize', setAppHeight);
|
||
window.addEventListener('orientationchange', setAppHeight);
|
||
if(window.visualViewport){
|
||
window.visualViewport.addEventListener('resize', setAppHeight);
|
||
}
|
||
const legendBtn = document.getElementById('legendBtn');
|
||
const agenda = document.querySelector('.agenda');
|
||
legendBtn.addEventListener('click', () => {
|
||
agenda.open = !agenda.open;
|
||
legendBtn.classList.toggle('active', agenda.open);
|
||
});
|
||
agenda.addEventListener('toggle', () => legendBtn.classList.toggle('active', agenda.open));
|
||
/* Modus-Wähler auf kleinem Bildschirm: es ist nur das aktive Icon sichtbar,
|
||
Tippen schaltet zum nächsten Modus (reihum). Auf normaler Größe bleibt es
|
||
der Dreier-Umschalter — dort kehrt der Handler sofort zurück. */
|
||
const seg = document.querySelector('.seg');
|
||
const LAYOUT_MODES = ['horizontal','kompakt','vertikal'];
|
||
seg.addEventListener('click', e => {
|
||
if(!isMobile()) return;
|
||
e.preventDefault();
|
||
const cur = document.querySelector('input[name="layout"]:checked').value;
|
||
const next = LAYOUT_MODES[(LAYOUT_MODES.indexOf(cur) + 1) % LAYOUT_MODES.length];
|
||
const r = document.querySelector('input[name="layout"][value="' + next + '"]');
|
||
r.checked = true;
|
||
r.dispatchEvent(new Event('change', {bubbles:true}));
|
||
});
|
||
function applyMobile(){
|
||
const m = isMobile();
|
||
document.body.classList.toggle('mobile', m);
|
||
if(m) collapseLangsel(); /* Sprachleiste eingeklappt starten (Overlay-Logik) */
|
||
if(!m) return;
|
||
/* Nur ein Panel sichtbar: normal/custom passen nicht — auf Diagramm (b). */
|
||
if(splitState !== 'a' && splitState !== 'b'){ splitState = 'b'; applySplit(); }
|
||
/* Default Vollbild auf kleinem Bildschirm — nur ohne gespeicherte Wahl. */
|
||
if(!hadStoredUI && !document.body.classList.contains('fullscreen')){
|
||
document.body.classList.add('fullscreen');
|
||
fsBtn.classList.add('active');
|
||
fsBtn.setAttribute('aria-pressed', 'true');
|
||
saveUI();
|
||
}
|
||
}
|
||
mqMobile.addEventListener('change', applyMobile);
|
||
|
||
restoreState(); /* Editortext + GUI-Zustand aus dem Browser wiederherstellen */
|
||
let startLang = 'de';
|
||
try{ startLang = localStorage.getItem('werkbaum-lang') || 'de'; }catch(_){}
|
||
applyLang(I18N[startLang] ? startLang : 'de'); /* setzt Texte + rendert */
|
||
applyMobile(); /* Mobil-Verhalten (nach Sprache/Restore) anwenden */
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|