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:
@@ -43,104 +43,113 @@
|
||||
</select>
|
||||
<p class="hint">{{ 'pageEdit.folderHint' | translate }}</p>
|
||||
</div>
|
||||
<!-- Champs dynamiques du template -------------------------------- -->
|
||||
<!-- Champs dynamiques du template. Rendus en grille 12 colonnes quand le
|
||||
template porte une mise en page (hasLayout) ; sinon empilés (rendu
|
||||
historique). Les blocs suivent l'ordre (ligne, colonne) du template. -->
|
||||
@if (template?.fields?.length) {
|
||||
<h2 class="section-title">{{ 'pageEdit.fields' | translate }}</h2>
|
||||
@for (field of template!.fields; track field) {
|
||||
<!-- Champ TEXT : textarea editable -->
|
||||
@if (field.type === 'TEXT') {
|
||||
<div class="field">
|
||||
<label>{{ field.name }}</label>
|
||||
<textarea
|
||||
[(ngModel)]="values[field.name]"
|
||||
[name]="'value_' + field.name"
|
||||
rows="4"
|
||||
[placeholder]="'pageEdit.valuePlaceholder' | translate:{ field: field.name }">
|
||||
</textarea>
|
||||
</div>
|
||||
}
|
||||
<!-- Champ IMAGE : galerie editable. -->
|
||||
@if (field.type === 'IMAGE') {
|
||||
<div class="field">
|
||||
<label>{{ field.name }}</label>
|
||||
<app-image-gallery
|
||||
[imageIds]="imageValues[field.name] || []"
|
||||
[editable]="true"
|
||||
[layout]="field.layout ?? 'GALLERY'"
|
||||
(imageIdsChange)="imageValues[field.name] = $event">
|
||||
</app-image-gallery>
|
||||
</div>
|
||||
}
|
||||
<!-- Champ KEY_VALUE_LIST : liste libellé/valeur (labels figés par le template). -->
|
||||
@if (field.type === 'KEY_VALUE_LIST') {
|
||||
<div class="field">
|
||||
<label>{{ field.name }}</label>
|
||||
<div class="kv-grid">
|
||||
@for (lbl of field.labels ?? []; track $index) {
|
||||
<div class="kv-cell">
|
||||
<span class="kv-label">{{ lbl }}</span>
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="keyValueValues[field.name][lbl]"
|
||||
[name]="'kv_' + field.name + '_' + lbl"
|
||||
placeholder="—" />
|
||||
</div>
|
||||
}
|
||||
@if (!(field.labels ?? []).length) {
|
||||
<p class="kv-empty">{{ 'pageEdit.noLabels' | translate }}</p>
|
||||
}
|
||||
<div class="edit-fields" [class.edit-fields--grid]="hasLayout">
|
||||
@for (field of orderedFields; track field) {
|
||||
<!-- Champ TEXT : textarea editable -->
|
||||
@if (field.type === 'TEXT') {
|
||||
<div class="field"
|
||||
[style.grid-column]="hasLayout ? gridColumn(field) : null">
|
||||
<label>{{ field.name }}</label>
|
||||
<textarea
|
||||
[(ngModel)]="values[keyOf(field)]"
|
||||
[name]="'value_' + keyOf(field)"
|
||||
rows="4"
|
||||
[placeholder]="'pageEdit.valuePlaceholder' | translate:{ field: field.name }">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<!-- Champ TABLE : colonnes figées par le template, lignes libres. -->
|
||||
@if (field.type === 'TABLE') {
|
||||
<div class="field">
|
||||
<label>{{ field.name }}</label>
|
||||
@if ((field.labels ?? []).length) {
|
||||
<div class="table-edit-wrap">
|
||||
<table class="table-edit">
|
||||
<thead>
|
||||
<tr>
|
||||
@for (col of field.labels; track $index) {
|
||||
<th>{{ col }}</th>
|
||||
}
|
||||
<th class="table-edit-actions-col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of tableRows(field.name); track $index; let ri = $index) {
|
||||
}
|
||||
<!-- Champ IMAGE : galerie editable. -->
|
||||
@if (field.type === 'IMAGE') {
|
||||
<div class="field"
|
||||
[style.grid-column]="hasLayout ? gridColumn(field) : null">
|
||||
<label>{{ field.name }}</label>
|
||||
<app-image-block
|
||||
[editable]="true"
|
||||
[imageIds]="imageValues[keyOf(field)] || []"
|
||||
(imageIdsChange)="imageValues[keyOf(field)] = $event"
|
||||
[framing]="imageFraming[keyOf(field)] || {}"
|
||||
(framingChange)="imageFraming[keyOf(field)] = $event">
|
||||
</app-image-block>
|
||||
</div>
|
||||
}
|
||||
<!-- Champ KEY_VALUE_LIST : liste libellé/valeur (labels figés par le template). -->
|
||||
@if (field.type === 'KEY_VALUE_LIST') {
|
||||
<div class="field"
|
||||
[style.grid-column]="hasLayout ? gridColumn(field) : null">
|
||||
<label>{{ field.name }}</label>
|
||||
<div class="kv-grid">
|
||||
@for (lbl of field.labels ?? []; track $index) {
|
||||
<div class="kv-cell">
|
||||
<span class="kv-label">{{ lbl }}</span>
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="keyValueValues[keyOf(field)][lbl]"
|
||||
[name]="'kv_' + keyOf(field) + '_' + lbl"
|
||||
placeholder="—" />
|
||||
</div>
|
||||
}
|
||||
@if (!(field.labels ?? []).length) {
|
||||
<p class="kv-empty">{{ 'pageEdit.noLabels' | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<!-- Champ TABLE : colonnes figées par le template, lignes libres. -->
|
||||
@if (field.type === 'TABLE') {
|
||||
<div class="field"
|
||||
[style.grid-column]="hasLayout ? gridColumn(field) : null">
|
||||
<label>{{ field.name }}</label>
|
||||
@if ((field.labels ?? []).length) {
|
||||
<div class="table-edit-wrap">
|
||||
<table class="table-edit">
|
||||
<thead>
|
||||
<tr>
|
||||
@for (col of field.labels; track $index) {
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="row[col]"
|
||||
[name]="'tbl_' + field.name + '_' + ri + '_' + col"
|
||||
[placeholder]="col" />
|
||||
</td>
|
||||
<th>{{ col }}</th>
|
||||
}
|
||||
<td class="table-edit-actions-col">
|
||||
<button type="button" class="btn-row-delete"
|
||||
(click)="removeTableRow(field.name, ri)"
|
||||
[attr.aria-label]="'pageEdit.deleteRowN' | translate:{ n: (ri + 1) }" [title]="'pageEdit.deleteRow' | translate">
|
||||
<lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
|
||||
</button>
|
||||
</td>
|
||||
<th class="table-edit-actions-col"></th>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="button" class="btn-row-add" (click)="addTableRow(field.name, field.labels)">
|
||||
<lucide-icon [img]="Plus" [size]="13"></lucide-icon>
|
||||
{{ 'pageEdit.addRow' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<p class="kv-empty">{{ 'pageEdit.noColumns' | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of tableRows(keyOf(field)); track $index; let ri = $index) {
|
||||
<tr>
|
||||
@for (col of field.labels; track $index) {
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="row[col]"
|
||||
[name]="'tbl_' + keyOf(field) + '_' + ri + '_' + col"
|
||||
[placeholder]="col" />
|
||||
</td>
|
||||
}
|
||||
<td class="table-edit-actions-col">
|
||||
<button type="button" class="btn-row-delete"
|
||||
(click)="removeTableRow(keyOf(field), ri)"
|
||||
[attr.aria-label]="'pageEdit.deleteRowN' | translate:{ n: (ri + 1) }" [title]="'pageEdit.deleteRow' | translate">
|
||||
<lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="button" class="btn-row-add" (click)="addTableRow(keyOf(field), field.labels)">
|
||||
<lucide-icon [img]="Plus" [size]="13"></lucide-icon>
|
||||
{{ 'pageEdit.addRow' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<p class="kv-empty">{{ 'pageEdit.noColumns' | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<!-- Tags --------------------------------------------------------- -->
|
||||
<h2 class="section-title">{{ 'pageEdit.tags' | translate }}</h2>
|
||||
|
||||
Reference in New Issue
Block a user