From 7b6da8e286d54db442f71433db6cb1b142fd2340 Mon Sep 17 00:00:00 2001
From: Michael Hoennig <michael@hoennig.de>
Date: Tue, 21 Jul 2026 11:04:09 +0200
Subject: [PATCH] =?UTF-8?q?frontend:=20Zoom=20f=C3=BCr=20das=20Diagramm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Schwebende Zoom-Steuerung (−/Prozent/+) unten rechts im Diagramm plus
Strg/Cmd + Mausrad. Skaliert via CSS-`zoom` (Layout-Box), damit die
Scrollbalken des Containers korrekt greifen; Grenzen 30–300 %.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/index.html | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index bd9e853..bec3fe6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -217,11 +217,27 @@
     overflow:auto;
     background:transparent;
   }
-  .panel.right{background:rgba(255,255,255,.6)}
+  .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}
   .tree ul{list-style:none}
@@ -460,6 +476,11 @@
     </div>
     <div class="diagram"><ul class="tree" id="out"></ul></div>
     <div class="warnings" id="warn"></div>
+    <div class="zoomctl" aria-label="Zoom (Strg/Cmd + Mausrad)">
+      <button type="button" id="zoomOut" title="verkleinern">−</button>
+      <button type="button" id="zoomReset" title="zurücksetzen">100&nbsp;%</button>
+      <button type="button" id="zoomIn" title="vergrößern">+</button>
+    </div>
   </div>
 </div>
 
@@ -698,6 +719,26 @@ function endDrag(e){
 gutter.addEventListener('pointerup', endDrag);
 gutter.addEventListener('pointercancel', endDrag);
 
+/* ---------- 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) + ' %';
+}
+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');
 showc.addEventListener('change', render);