Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Éditeur de scène : le canevas remplit vraiment tout l'espace disponible

Browse Source 
Le calcul purement CSS du tour précédent (aspect-ratio + height:100% +
max-width:100%, pour que le canevas garde ses proportions tout en tenant
dans la zone visible) laissait en pratique le canevas bien plus petit que
l'espace réellement disponible - le calcul de taille "auto" d'un élément
non remplacé dans ce contexte flex n'est pas fiable.

Remplacé par un calcul en JavaScript (fitCanvasToFrame()) : mesure la
taille réelle de .canvasFrame et calcule la plus grande taille en pixels
qui tient à la fois en largeur ET en hauteur pour l'aspect-ratio courant
(l'équivalent d'un "object-fit:contain"), posée directement en style
inline sur #canvas. Recalculé à l'ouverture de l'écran, au changement de
format (Portrait/Paysage/Carré), au redimensionnement de la fenêtre, et à
chaque rafraîchissement du panneau (#canvas étant recréé à chaque
sélection d'élément, sa taille calculée était perdue à chaque fois).
Sous 1300px (mise en page empilée), le style inline est explicitement
effacé pour laisser la règle CSS de repli (pleine largeur, page qui
défile normalement) reprendre la main.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-25 11:44:40 +02:00
co-authored by Claude Sonnet 5
parent dae6da166e
commit 14deba943a
2 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+13 -12
View File
@@ -249,20 +249,21 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
davantage (ex. fenêtre très basse) — jamais .builderCanvasArea (voir
plus haut), pour garder la barre d'onglets/d'outils toujours visible. */
flex:1 1 auto; min-height:0; width:100%; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel);
display:flex; align-items:flex-start; justify-content:center; overflow:auto;
display:flex; align-items:center; justify-content:center; overflow:auto;
}
.canvas{
/* "Monté le plus haut possible" et "je dois voir tout l'écran" : plutôt
qu'une largeur pleine (l'ancien width:100%, qui pouvait rendre un
format Portrait bien plus haut que la fenêtre), la hauteur DISPONIBLE
devient la contrainte principale (height:100%) et la largeur se déduit
de l'aspect-ratio (posé en style inline, voir screen_edit.html) —
max-width:100% prend le relais si jamais c'est la largeur qui manque
en premier (fenêtre étroite/écran Paysage). Résultat : le canevas
entier tient toujours dans la zone visible, sans avoir à défiler pour
voir le bas de l'écran. */
position:relative; height:100%; width:auto; max-width:100%; flex:0 0 auto; margin:0 auto; background:#0b0d12; border-radius:8px;
overflow:hidden; border:1px solid var(--border);
/* "Doit prendre toute la place disponible" ET garder son aspect-ratio :
un pur CSS (aspect-ratio + height:100%/max-width:100%) laissait trop
souvent le canevas bien plus petit que l'espace réellement disponible
(le calcul "auto" d'un élément non remplacé dans ce contexte flex
n'est pas fiable) — fitCanvasToFrame() (screen_edit.html) calcule donc
lui-même, en JS, la plus grande taille en pixels qui tient à la fois en
largeur ET en hauteur dans .canvasFrame (comme un "object-fit:contain"),
posée directement en style inline. Cette règle ne sert donc que de
valeur de secours avant le premier calcul JS (et en repli < 1300px,
voir le media query plus bas qui la réactive). */
position:relative; width:100%; margin:0 auto; background:#0b0d12; border-radius:8px;
overflow:hidden; border:1px solid var(--border); flex:0 0 auto;
}
.canvasElement{
/* Pas d'overflow:hidden ici : une échelle (transform:scale) ou une