Eigene Bilder importieren und auf Slides legen

Bilder aus dem Finder kommen jetzt ueber die Dateiauswahl oder per Ziehen
direkt auf eine Slide herein. Beim Ablegen wird das Bild dort zum zweiten
Bild und laesst sich im Bearbeiten-Modus frei schieben und in der Groesse
aendern; ueber den Knopf importiert man nur und ordnet danach unter Inhalt
zu. Das zweite Bild laesst sich dort auch wieder abwaehlen.

Die Datei geht byteweise unveraendert an den neuen Endpunkt /upload und
liegt danach unter assets/eigene/. Nichts wird neu kodiert, skaliert oder
umbenannt -- nur Zeichen, die in einem Dateinamen nichts zu suchen haben,
weichen einem Bindestrich. Der Umweg ueber den Server ist Absicht: ein Foto
als Base64 im Projektstand waere groesser als der gesamte uebrige Stand und
machte jeden Diff unlesbar. So steht dort nur der Pfad, und das Bild liegt
mit im Repo wie jedes andere Asset auch.

Die Auswahllisten holt der Generator beim Start ueber /bilder vom Server
statt sie im Code zu pflegen. Importierte stehen deshalb sofort darin, mit
einem Stern gekennzeichnet. Beim Zuweisen folgt das Rahmenformat dem
Seitenverhaeltnis der Aufnahme.

Geprueft ueber das DevTools-Protokoll: ablegen, Bytes gegen die Quelle
vergleichen, Format, Verschieben im Bearbeiten-Modus, Export und Neustart.
Die abgelegte Datei war byteweise identisch mit der Quelle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

post1.html

@@ -49,6 +49,13 @@
   }
   #slide-ops button { flex: none; padding: 8px 10px; }
 
+  /* Zielmarke beim Ablegen einer Datei. */
+  .holder.ablegen::before {
+    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
+    outline: 12px dashed var(--accent-yellow); outline-offset: -6px;
+    background: rgba(241,183,41,.10);
+  }
+
   .saved {
     font-size: 11px; color: #6FCF97; opacity: 0; transition: opacity .2s;
     margin-left: 6px;
@@ -803,6 +810,15 @@
     <div id="inhalt"></div>
   </details>
 
+  <details class="group" data-grp="eigene-bilder">
+    <summary>Eigene Bilder</summary>
+    <input type="file" id="bild-datei" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" multiple hidden>
+    <button class="btn secondary" id="bild-waehlen" style="width:100%">Bilder importieren …</button>
+    <div class="hint" id="bild-hinweis">Oder eine Datei auf eine Slide ziehen — sie wird
+      dort das zweite Bild und lässt sich im Bearbeiten-Modus frei schieben.
+      Die Datei landet unverändert unter <b>assets/eigene/</b> und gehört mit in den Commit.</div>
+  </details>
+
   <details class="group" data-grp="variante">
     <summary>Variante</summary>
     <div class="opts" id="variants">
@@ -1090,7 +1106,10 @@
   /* Alle Screens im Ordner. Eine selbst angelegte Slide kann jeden davon
      wählen, deshalb werden sie vollständig geladen und nicht nur die, die
      eine Vorlage zufällig gerade benutzt. */
-  const SCREENS = [
+  /* Ausgangsliste. Der Server liefert beim Start die tatsaechlich vorhandenen
+     Dateien nach, damit importierte Bilder sofort auftauchen und die Liste
+     nicht im Code gepflegt werden muss. */
+  let BILDER = [
     { pfad: "./assets/screens/pipelines.png",         name: "Pipelines · Board" },
     { pfad: "./assets/screens/pipelines-liste.png",   name: "Pipelines · Liste" },
     { pfad: "./assets/screens/pipelines-detail.png",  name: "Pipelines · Detail" },
@@ -1117,6 +1136,9 @@
     const basis = eintrag.ref ? VORLAGEN.find(v => v.key === eintrag.ref) : null;
     const s = kopie(basis || NEUE_SLIDE);
     Object.assign(s, eintrag.werte || {});
+    // null heisst "weg", nicht "leeres Objekt": nur so laesst sich ein zweites
+    // Bild, das die Vorlage mitbringt, wieder abwaehlen.
+    if (s.media2 === null) delete s.media2;
     // Der Schlüssel landet im Dateinamen und muss eindeutig bleiben.
     s.key = (basis ? basis.key : (eintrag.key || "eigen")) + (eintrag.ref ? "" : "-" + (i + 1));
     return s;
@@ -1893,7 +1915,7 @@
     /* Alle Screens, nicht nur die gerade benutzten: eine selbst angelegte
        Slide kann jeden davon waehlen, und ein Bild, das erst beim Auswaehlen
        geladen wuerde, fehlt im Export. */
-    SCREENS.forEach(sc => paths.push(sc.pfad));
+    BILDER.forEach(sc => paths.push(sc.pfad));
     // Optional: the layout falls back to a hint if the file is not there yet.
     const optional = new Set(["./assets/mockups/laptop.png", "./assets/mockups/macbook-fels.png"]);
     paths.push("./assets/mockups/laptop.png", "./assets/mockups/macbook-fels.png");
@@ -2443,6 +2465,148 @@
      Geschrieben wird in slideListe[i].werte, nicht in SLIDES: SLIDES entsteht
      aus der Vorlage plus diesen Ueberschreibungen. Wer nichts anfasst, bekommt
      Aenderungen an der Vorlage im Code weiterhin mit. */
+  /* ─── Eigene Bilder ───────────────────────────────────────────────────────
+     Die Datei geht unveraendert an den Server und liegt danach unter
+     assets/eigene/. Der Umweg ist Absicht: als Base64 im Projektstand waere
+     ein einziges Foto groesser als der gesamte uebrige Stand und jeder Diff
+     unbrauchbar. So steht dort nur der Pfad. */
+  function bildOptionen() {
+    return BILDER.map(b =>
+      '<option value="' + b.pfad + '">' +
+      (b.ordner === "eigene" ? "★ " : "") + b.name + '</option>').join("");
+  }
+
+  async function bilderNachladen() {
+    try {
+      const res = await fetch("/bilder", { cache: "no-store" });
+      if (!res.ok) return;
+      const liste = await res.json();
+      if (Array.isArray(liste) && liste.length) BILDER = liste;
+    } catch (_) { /* ohne Server bleibt die eingebaute Liste */ }
+  }
+
+  // Eine Datei einlesen, damit sie sofort im Canvas und im Export vorliegt.
+  async function bildBereitstellen(pfad) {
+    if (assets[pfad]) return true;
+    const res = await fetch(pfad, { cache: "no-store" }).catch(() => null);
+    if (!res || !res.ok) return false;
+    const blob = await res.blob();
+    assets[pfad] = await new Promise((ok, fail) => {
+      const fr = new FileReader();
+      fr.onload = () => ok(fr.result);
+      fr.onerror = fail;
+      fr.readAsDataURL(blob);
+    });
+    return true;
+  }
+
+  async function bildImportieren(datei) {
+    const res = await fetch("/upload", {
+      method: "POST",
+      // Kodiert, damit Umlaute und Leerzeichen den Header nicht sprengen.
+      headers: { "X-Filename": encodeURIComponent(datei.name) },
+      body: datei,
+    });
+    if (!res.ok) {
+      const w = await res.json().catch(() => ({}));
+      throw new Error(w.error || ("HTTP " + res.status));
+    }
+    const { pfad } = await res.json();
+    await bilderNachladen();
+    await bildBereitstellen(pfad);
+    return pfad;
+  }
+
+  // Masse aus dem Bild selbst: ein Hochformat soll nicht in einem
+  // Querformat-Rahmen stehen.
+  function seitenverhaeltnis(pfad) {
+    return new Promise(ok => {
+      const im = new Image();
+      im.onload = () => ok(im.naturalWidth / im.naturalHeight);
+      im.onerror = () => ok(1.6);
+      im.src = assets[pfad] || pfad;
+    });
+  }
+
+  async function alsZweitesBild(i, pfad) {
+    const ar = await seitenverhaeltnis(pfad);
+    const w = werteVon(i);
+    const alt = w.media2 || SLIDES[i].media2 || {};
+    w.media2 = {
+      img: pfad, w: alt.w || 400, ar: +ar.toFixed(4),
+      left: alt.left != null ? alt.left : 500,
+      bottom: alt.bottom != null ? alt.bottom : 60,
+      z: alt.z || 2, rot: alt.rot || 0,
+    };
+    slidesNeuAufbauen();
+    deckNeuBauen();
+    show(i);
+    saveState();
+  }
+
+  async function dateienAufnehmen(dateien, zielSlide) {
+    const bilder = [...dateien].filter(f => /^image\//.test(f.type));
+    if (!bilder.length) { setStatus("Keine Bilddatei dabei", "err"); return; }
+    setStatus("Importiere " + bilder.length + " Bild(er) …");
+    const pfade = [];
+    try {
+      for (const f of bilder) pfade.push(await bildImportieren(f));
+    } catch (err) {
+      setStatus("Import fehlgeschlagen: " + err.message, "err");
+      return;
+    }
+    // Beim Ablegen auf einer Slide wandert das erste Bild gleich dorthin. Ueber
+    // den Knopf importiert man nur; zugeordnet wird dann in den Feldern.
+    if (typeof zielSlide === "number") {
+      await alsZweitesBild(zielSlide, pfade[0]);
+      setStatus(pfade.length + " Bild(er) importiert, erstes auf Slide " +
+                (zielSlide + 1) + " gelegt", "ok");
+    } else {
+      syncInhalt();
+      setStatus(pfade.length + " Bild(er) importiert · unter Inhalt zuweisen", "ok");
+    }
+  }
+
+  document.getElementById("bild-waehlen").addEventListener("click",
+    () => document.getElementById("bild-datei").click());
+  document.getElementById("bild-datei").addEventListener("change", ev => {
+    const f = ev.target.files;
+    if (f && f.length) dateienAufnehmen(f);
+    ev.target.value = "";     // dieselbe Datei soll erneut waehlbar bleiben
+  });
+
+  /* Ablegen auf einer Slide. Der Browser oeffnet eine fallengelassene Datei
+     sonst einfach im Tab und der Projektstand waere verloren. */
+  (function ablegen() {
+    const sc = document.getElementById("scroller");
+    const zielAus = e => {
+      const h = e.target.closest && e.target.closest(".holder");
+      return h ? Number(h.dataset.n) : null;
+    };
+    ["dragenter", "dragover"].forEach(art => sc.addEventListener(art, e => {
+      if (!e.dataTransfer || [...e.dataTransfer.types].indexOf("Files") < 0) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      const n = zielAus(e);
+      deck.querySelectorAll(".holder").forEach((h, i) => h.classList.toggle("ablegen", i === n));
+    }));
+    sc.addEventListener("dragleave", e => {
+      if (e.relatedTarget && sc.contains(e.relatedTarget)) return;
+      deck.querySelectorAll(".holder").forEach(h => h.classList.remove("ablegen"));
+    });
+    sc.addEventListener("drop", e => {
+      if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+      e.preventDefault();
+      const n = zielAus(e);
+      deck.querySelectorAll(".holder").forEach(h => h.classList.remove("ablegen"));
+      dateienAufnehmen(e.dataTransfer.files, n == null ? undefined : n);
+    });
+    // Ausserhalb der Flaeche nichts oeffnen, sondern still ablehnen.
+    ["dragover", "drop"].forEach(art => window.addEventListener(art, e => {
+      if (!sc.contains(e.target)) e.preventDefault();
+    }));
+  })();
+
   function werteVon(i) {
     const e = slideListe[i];
     return (e.werte = e.werte || {});
@@ -2466,9 +2630,10 @@
       ).join("") +
       (s.type === "feature"
         ? '<label class="inh-label" for="in-img">Screenshot</label>' +
-          '<select id="in-img" data-feld="img">' +
-          SCREENS.map(sc => '<option value="' + sc.pfad + '">' + sc.name + '</option>').join("") +
-          '</select>'
+          '<select id="in-img" data-feld="img">' + bildOptionen() + '</select>' +
+          '<label class="inh-label" for="in-media2">Zweites Bild</label>' +
+          '<select id="in-media2" data-feld="media2">' +
+          '<option value="">— keins —</option>' + bildOptionen() + '</select>'
         : "") +
       '<div class="hint">*Wort* setzt den Akzent, ein Zeilenumbruch bricht die Zeile um.' +
       (s.type === "title" ? ' Beim Titel wirkt das nur im Layout „Klassisch“.' : '') + '</div>';
@@ -2476,7 +2641,9 @@
     box.querySelectorAll("[data-feld]").forEach(el => {
       if (document.activeElement === el) return;
       const k = el.dataset.feld;
-      el.value = k === "img" ? (s.img || "") : htmlZuText(s[k]);
+      if (k === "img") el.value = s.img || "";
+      else if (k === "media2") el.value = (s.media2 && s.media2.img) || "";
+      else el.value = htmlZuText(s[k]);
     });
   }
 
@@ -2485,6 +2652,16 @@
     if (!el) return;
     const k = el.dataset.feld;
     const w = werteVon(current);
+    if (k === "media2") {
+      if (!el.value) {
+        // null statt weglassen: sonst kaeme das Bild der Vorlage zurueck.
+        w.media2 = null;
+        slidesNeuAufbauen(); deckNeuBauen(); show(current); saveState();
+      } else {
+        alsZweitesBild(current, el.value);
+      }
+      return;
+    }
     if (k === "img") {
       w.img = el.value;
       // Das Rahmenformat folgt dem Bild, sonst steht ein Hochformat in einem
@@ -3157,6 +3334,7 @@
   (async function boot() {
     try {
       setStatus("Lade Screens ...");
+      await bilderNachladen();
       await preloadAssets();
       const restored = await loadState();
       buildDeck();