Pages de lore en blocs (grille 2D libre) + bloc image recadrable, et import dd2vtt sur les scènes
All checks were successful
All checks were successful
Refonte du système de templates de lore en assemblage de blocs (façon Lore
d'Amsel), plus le support des cartes DungeonDraft (.dd2vtt) sur les scènes.
Templates de lore — éditeur de blocs en grille :
- Builder partagé `block-grid-builder` : palette de types de blocs à glisser sur
une grille 12 colonnes, placement LIBRE (x/y) et redimensionnement en largeur
ET hauteur par poignées, renommage en place. Remplace la liste + flèches de
template-create/template-edit (dédupliqués).
- Rendu : page-view (aperçu) honore largeur ET hauteur (grille à lignes fixes) ;
page-edit garde les colonnes (côte-à-côte) avec des hauteurs naturelles pour
l'édition. Repli empilé pour les templates sans mise en page.
- Modèle : `TemplateField` gagne `id` (clé stable) et `pos {x,y,w,h}`. Les valeurs
de page sont ancrées sur l'`id` (repli sur le nom) → renommer un bloc ne perd
plus son contenu. Sérialisation JSON additive, aucune migration ; correction au
passage de la non-relecture de `foundryPath` dans le converter.
Bloc image :
- Nouveau composant `image-block` (remplace la galerie pour les pages de lore) :
plusieurs images plein cadre (carrousel), déplacement (recadrage) et zoom
persistés PAR image et PAR page. Rendu `object-fit: contain` (image entière,
bordures noires) avec zoom 0,4×–4×.
- Stockage : `Page.imageFraming` (fieldKey → imageId → {x,y,scale}), colonne
`image_framing` (migration V8), DTO/mapper + passthrough export/import.
Scènes — source de carte au choix :
- Sélecteur Dungeon Alchemist (image/vidéo + .json, inchangé) / DungeonDraft
(.dd2vtt). Le .dd2vtt embarque l'image en base64 : extraction à l'upload
(→ média) + sidecar allégé (→ données) pour que l'export Foundry et le module
fonctionnent sans changement. Mode déduit à la relecture de l'extension.
Front-only, sans migration.
i18n fr/en, tests (converters back + helper front) et specs e2e mis à jour.
This commit is contained in:
@@ -1,4 +1,52 @@
|
||||
// Styles spécifiques à page-view.
|
||||
// Le gros du style "fiche de jeu" vient du partial global `styles/_view.scss`.
|
||||
// Aucun override nécessaire pour l'instant — ce fichier existe pour rester
|
||||
// cohérent avec la structure des autres composants (ts/html/scss).
|
||||
|
||||
// Conteneur des champs dynamiques.
|
||||
// - Sans mise en page (hasLayout=false) : `display: contents` -> les sections
|
||||
// se comportent EXACTEMENT comme avant (enfants visuels directs de .view-page,
|
||||
// empilées, bordures de séparation gérées par _view.scss). Aucun changement.
|
||||
// - Avec mise en page : grille 12 colonnes ; chaque section est placée via
|
||||
// [style.grid-column] / [style.grid-row]. On neutralise alors les bordures
|
||||
// top (un séparateur horizontal n'a pas de sens entre blocs côte-à-côte).
|
||||
.view-fields {
|
||||
display: contents;
|
||||
|
||||
// Grille 2D fidèle : largeur (colonnes) ET hauteur (lignes de 32px = GRID_ROW_HEIGHT)
|
||||
// honorées. Chaque bloc remplit sa cellule ; le contenu trop grand défile.
|
||||
&.view-fields--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-auto-rows: 32px; // = GRID_ROW_HEIGHT (block-layout.helper.ts)
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
|
||||
.view-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
|
||||
// L'image (et autres contenus extensibles) remplit la hauteur restante.
|
||||
app-image-block { flex: 1 1 auto; min-height: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Depuis que les champs vivent dans `.view-fields`, la première section "meta"
|
||||
// (tags / pages liées / notes privées) devient `:first-of-type` parmi les
|
||||
// enfants directs de `.view-page` et perdrait sa bordure de séparation héritée
|
||||
// de _view.scss. On la lui restitue (scopé à page-view, sans impact sur
|
||||
// arc/chapter/scene-view qui n'ont pas ce wrapper).
|
||||
.view-page > .view-section:first-of-type {
|
||||
border-top: 1px solid #1e1e3a;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
// Repli mobile : la grille se réempile en une colonne.
|
||||
@media (max-width: 820px) {
|
||||
.view-fields.view-fields--grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user