Repository navigation
Bildausschnitt und grüne Fläche für Text auf Foto - #66
Merged
flomotlik merged 1 commit intoSep 25, 2026
Merged
Conversation
Hintergrundbilder sind laut CD ein zentrales Gestaltungsmittel. Zwei
Dinge fehlten dafuer.
BILDAUSSCHNITT
Das Foto wird formatfuellend skaliert, eine Achse steht ueber und wird
beschnitten. Die App laesst diese Achse bewusst beweglich, damit ein
Mensch den Ausschnitt waehlen kann (Kommentar in canvas-utils.js: "leave
the overflowing axis free so the user can still pan the image"). Die
Fassade konnte nur zentriert — bei einem Portraet in einer breiten
Vorlage also zwangsweise ohne Kopf.
CanvasUtils.backgroundFocus, gesetzt ueber setBackground(url, {focusX,
focusY}). 0 bis 1, Vorgabe 0,5 — das bisherige Verhalten bleibt damit
unveraendert. Die llms.txt nennt Faustregeln statt nur der Parameter.
Kein einziger der drei Reviewer hat diese Luecke erwaehnt. Mein
Review-Prompt hat Bilder nur als Untergrund fuer anderes aufgezaehlt,
nie als eigenstaendiges Gestaltungsmittel — die Reviewer sind meiner
Aufzaehlung gefolgt.
GRUENE FLAECHE
Die zentrale CD-Regel "Typografie steht immer in Kombination mit Gruen"
war mit einem Hintergrundfoto gar nicht einhaltbar: Es gab keine
Moeglichkeit, eine gruene Flaeche unter den Text zu legen. Alle drei
Reviewer nennen das.
Als echter Knopf in der Oberflaeche, nicht nur in der Fassade — damit
"kein zweiter Pfad" gilt, der Abdeckungstest weiter greift und Menschen
die Faehigkeit auch bekommen. Dazu addText(text, { panel: true }) als
bequemer Weg.
Ein Fehler, den erst das gerenderte Bild zeigte: Die erste Fassung
koppelte Flaeche und Text nicht. Die Tests waren gruen, das Bild nicht —
place('bottom') verschob nur den Text, die Flaeche blieb in der Mitte,
der Text sass halb daneben. Schlechter als gar keine Flaeche. Die
Flaeche haengt jetzt an ihrem Text und wird nach jedem Verschieben,
Skalieren, Drehen und Aendern neu eingepasst.
Nebenbei korrigiert: objects() stempelte JEDES Rechteck als Rolle
"canvas" — also auch die neue Flaeche, die damit den Schutzstatus der
Grundflaeche geerbt haette. Jetzt ist nur contentRect "canvas", andere
Rechtecke sind "panel".
VERSION auf 11. 132 Jest, 127 e2e gruen.
Claude-Session: https://claude.ai/code/session_01Qtib9MPRZATQU3j9w7ymDk
flomotlik
deleted the
feature/hintergrundbild-ausschnitt-und-gruene-flaeche
branch
September 25, 2026 17:25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hintergrundbilder sind laut CD ein zentrales Gestaltungsmittel. Zwei Dinge fehlten dafür.
Bildausschnitt
Das Foto wird formatfüllend skaliert, eine Achse steht über und wird beschnitten. Die App lässt diese Achse bewusst beweglich, damit ein Mensch den Ausschnitt wählen kann — Kommentar in
canvas-utils.js:Die Fassade konnte nur zentriert. Ein Porträt in einer breiten Vorlage verlor damit zwangsweise den Kopf.
Neu:
setBackground(url, { focusX, focusY }), Werte 0 bis 1, Vorgabe 0,5 — das bisherige Verhalten bleibt unverändert. Diellms.txtnennt dazu Faustregeln statt nur der Parameter: PorträtfocusY: 0–0.3, Landschaft mit Himmel0.6–1, Gruppenbild lieber mittig und ein passenderes Seitenverhältnis wählen.Kein einziger der drei Reviewer hat diese Lücke erwähnt — in 2715 Zeilen Review kommen
lockMovement,reframeund „Bildausschnitt" kein einziges Mal vor. Mein Review-Prompt hat Bilder nur als Untergrund für anderes aufgezählt, nie als eigenständiges Gestaltungsmittel mit eigenen Entscheidungen. Die Reviewer sind meiner Aufzählung gefolgt.Grüne Fläche
Die zentrale CD-Regel „Typografie steht immer in Kombination mit Grün" war mit einem Hintergrundfoto gar nicht einhaltbar — es gab keine Möglichkeit, eine grüne Fläche unter den Text zu legen. Alle drei Reviewer nennen das.
Umgesetzt als echter Knopf in der Oberfläche, nicht nur in der Fassade. Damit gilt weiterhin „kein zweiter Renderpfad", der Abdeckungstest bleibt aussagekräftig, und Menschen bekommen die Fähigkeit aus demselben CD-Grund auch.
Dazu
addText(text, { panel: true })als bequemer Weg, den diellms.txtempfiehlt.Ein Fehler, den erst das gerenderte Bild zeigte
Meine erste Fassung koppelte Fläche und Text nicht. Alle Tests waren grün, das Bild nicht:
place('bottom')verschob nur den Text, die grüne Fläche blieb in der Mitte, der Text saß halb daneben — schlechter als gar keine Fläche.Die Fläche hängt jetzt an ihrem Text (
text._gatPanel) und wird nach jedem Verschieben, Skalieren, Drehen und Ändern neu eingepasst. Ein Test prüft Position und Größe nach beidem.Das ist in dieser Sitzung das dritte Mal, dass grüne Tests ein falsches Bild nicht verhindert haben. Ich rendere deshalb nach jeder Bildänderung ein echtes Ergebnis und sehe es mir an.
Nebenbefund, mitkorrigiert
objects()stempelte jedes Rechteck als Rollecanvas— also auch die neue Fläche, die damit den Schutzstatus der Grundfläche geerbt hätte und unbeweglich gewesen wäre. Jetzt ist nurcontentRectdiecanvas, andere Rechtecke sindpanel.Tests
e2e/background-and-panel.spec.js, acht Tests: Fokus verschiebt den Ausschnitt in die richtige Richtung, die Vorgabe ist bit-gleich zum bisherigen Verhalten, Werte außerhalb 0..1 werden abgelehnt, die Fläche liegt hinter dem Text, sie folgt ihm beim Verschieben und Skalieren, und der Gesamtfall „Text auf Foto auf Grün" geht in einem Aufruf.132 Jest grün, 127 e2e grün. VERSION auf 11.
https://claude.ai/code/session_01Qtib9MPRZATQU3j9w7ymDk