diff --git a/post1.html b/post1.html index 9aa43e4..6035d96 100644 --- a/post1.html +++ b/post1.html @@ -814,8 +814,9 @@ Eigene Bilder -
Oder eine Datei auf eine Slide ziehen — sie wird - dort das zweite Bild und lässt sich im Bearbeiten-Modus frei schieben. +
Das Bild landet mittig auf der gewählten Slide. + Auf eine andere Slide ziehen legt es dort ab. Mit E lässt es sich schieben + und über A−/A+ in der Größe ändern.
Die Datei landet unverändert unter assets/eigene/ und gehört mit in den Commit.
@@ -1792,19 +1793,6 @@ '
'; page.appendChild(mock); - if (sl.media2) { - const m2 = sl.media2; - const el2 = document.createElement("div"); - el2.className = "mock mock-2"; - el2.style.cssText = - "--mock-w:" + m2.w + "px;--mock-ar:" + m2.ar + - ";--mock-left:" + m2.left + "px;--m2-bottom:" + m2.bottom + - "px;--m2-z:" + m2.z + ";--rot:" + (m2.rot || 0) + "deg"; - el2.innerHTML = - '
'; - page.appendChild(el2); - } if (sl.note) { const nt = sl.note; @@ -1822,6 +1810,23 @@ } } + /* Ein zweites Bild gibt es auf jeder Slide, nicht nur auf Feature-Slides: + ein importiertes Bild soll auf der gewaehlten Slide landen, egal + welche das ist. */ + if (sl.media2) { + const m2 = sl.media2; + const el2 = document.createElement("div"); + el2.className = "mock mock-2"; + el2.style.cssText = + "--mock-w:" + m2.w + "px;--mock-ar:" + m2.ar + + ";--mock-left:" + m2.left + "px;--m2-bottom:" + m2.bottom + + "px;--m2-z:" + m2.z + ";--rot:" + (m2.rot || 0) + "deg"; + el2.innerHTML = + '
'; + page.appendChild(el2); + } + renderPage(page, j); return page; } @@ -2532,19 +2537,46 @@ }); } - async function alsZweitesBild(i, pfad) { + /* Ein Element genau auf die Mitte der Slide setzen. Gerechnet wird nicht, + sondern gemessen: das Blatt ist gepolstert, die Mockups stehen schief im + Raum, und ein Dreisatz ueber left und bottom laege daneben. Der Versatz + wandert in die Bearbeitung, ist also nachtraeglich frei verschiebbar. */ + function mittigSetzen(i, key) { + const node = deck.querySelector( + '.page[data-j="' + i + '"] [data-edit="' + key + '"]'); + if (!node) return; + const slide = node.closest(".slide"); + if (!slide) return; + const sr = slide.getBoundingClientRect(), nr = node.getBoundingClientRect(); + if (!sr.width || !nr.width) return; + const k = sr.width / 1080; + const dx = ((nr.left + nr.width / 2) - (sr.left + sr.width / 2)) / k; + const dy = ((nr.top + nr.height / 2) - (sr.top + sr.height / 2)) / k; + const set = (edits[i][key] = edits[i][key] || {}); + set.dx = Math.round((set.dx || 0) - dx); + set.dy = Math.round((set.dy || 0) - dy); + applyEditsAll(); + } + + async function alsZweitesBild(i, pfad, mittig) { const ar = await seitenverhaeltnis(pfad); const w = werteVon(i); - const alt = w.media2 || SLIDES[i].media2 || {}; + const vorher = 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, + img: pfad, w: vorher.w || 480, ar: +ar.toFixed(4), + left: vorher.left != null ? vorher.left : 300, + bottom: vorher.bottom != null ? vorher.bottom : 400, + z: vorher.z || 2, rot: mittig ? 0 : (vorher.rot || 0), }; slidesNeuAufbauen(); deckNeuBauen(); show(i); + // Ein frisch importiertes Bild soll man sehen, nicht suchen. + if (mittig) { + edits[i]["mock-2"] = {}; + mittigSetzen(i, "mock-2"); + pick(i, "mock-2"); + } saveState(); } @@ -2561,14 +2593,16 @@ } // 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"); - } + /* Ohne Ziel gilt die gewaehlte Slide. Frueher wurde nur importiert und + die Zuordnung blieb in einem Auswahlfeld liegen -- das Bild war damit + nirgends zu sehen und der Import wirkte wie ein Fehlschlag. */ + const ziel = typeof zielSlide === "number" ? zielSlide : current; + await alsZweitesBild(ziel, pfade[0], true); + syncInhalt(); + setStatus(pfade.length === 1 + ? "Bild auf Slide " + (ziel + 1) + " gelegt · mit E verschieben" + : pfade.length + " Bilder importiert, erstes auf Slide " + (ziel + 1) + + " gelegt · Rest unter Inhalt", "ok"); } document.getElementById("bild-waehlen").addEventListener("click",