Met la page entière à l'échelle dans l'aperçu de modèle, sans barre de défilement
La page a une largeur/un ratio fixes côté moteur (960px, A4 paysage) — sans mise à l'échelle, elle débordait verticalement de la fenêtre d'aperçu (plus petite qu'un canevas d'édition en plein écran) et défilait/rognait au lieu de tenir entière. Un script calcule maintenant le facteur d'échelle qui la fait toujours tenir en entier (transform: scale, jamais un agrandissement au-delà de 1), recalculé au redimensionnement. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
7730b3688f
commit
be62275675
@@ -23,11 +23,25 @@
|
|||||||
.previewPages {
|
.previewPages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* La page réelle a une largeur/un ratio FIXES côté moteur
|
||||||
|
(--doc-page-width/aspect-ratio, voir static/document/
|
||||||
|
document-editor.css) — sans mise à l'échelle, elle déborde
|
||||||
|
verticalement de cette fenêtre d'aperçu plus petite qu'un canevas
|
||||||
|
d'édition en plein écran, et défile/rogne au lieu de tenir
|
||||||
|
entière (retour utilisateur du 24/09/2026). `forgeDocFitPreviewPage`
|
||||||
|
calcule un facteur d'échelle qui la fait TOUJOURS tenir
|
||||||
|
entièrement, sans barre de défilement. */
|
||||||
|
.previewPages .docPage {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transform-origin: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.previewPages .docPage[hidden] {
|
.previewPages .docPage[hidden] {
|
||||||
@@ -105,6 +119,40 @@
|
|||||||
});
|
});
|
||||||
render();
|
render();
|
||||||
}());
|
}());
|
||||||
|
|
||||||
|
(function fitPreviewPage() {
|
||||||
|
// Toutes les pages partagent EXACTEMENT la même largeur/le même ratio
|
||||||
|
// fixes côté moteur (--doc-page-width/aspect-ratio) quel que soit leur
|
||||||
|
// contenu (voir static/document/document-editor.css) : mesurer une
|
||||||
|
// seule page suffit à connaître la taille "naturelle" de toutes.
|
||||||
|
var container = document.querySelector('.previewPages');
|
||||||
|
var pages = Array.prototype.slice.call(document.querySelectorAll('.previewPages .docPage'));
|
||||||
|
if (!container || !pages.length) return;
|
||||||
|
var reference = pages[0];
|
||||||
|
|
||||||
|
function applyFit() {
|
||||||
|
var wasHidden = reference.hidden;
|
||||||
|
var previousTransform = reference.style.transform;
|
||||||
|
reference.hidden = false;
|
||||||
|
reference.style.transform = 'none';
|
||||||
|
var naturalWidth = reference.offsetWidth;
|
||||||
|
var naturalHeight = reference.offsetHeight;
|
||||||
|
reference.hidden = wasHidden;
|
||||||
|
reference.style.transform = previousTransform;
|
||||||
|
if (!naturalWidth || !naturalHeight) return;
|
||||||
|
var availableWidth = container.clientWidth - 32;
|
||||||
|
var availableHeight = container.clientHeight - 32;
|
||||||
|
// Jamais agrandie au-delà de sa taille réelle (max 1) — un simple
|
||||||
|
// rétrécissement pour tenir, jamais un zoom artificiel.
|
||||||
|
var scale = Math.min(availableWidth / naturalWidth, availableHeight / naturalHeight, 1);
|
||||||
|
pages.forEach(function scalePage(page) {
|
||||||
|
page.style.transform = 'scale(' + scale + ')';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFit();
|
||||||
|
window.addEventListener('resize', applyFit);
|
||||||
|
}());
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user