Introduction au constructeur de format d'impression

Le constructeur de format d'impression est un éditeur visuel intégré à Dodock qui permet de personnaliser la mise en page des documents PDF générés depuis Dokos. Il offre une interface intuitive pour organiser les sections, les tableaux et les éléments textuels sans écrire de code HTML ou CSS.

Fonctionnalités principales

Séparateurs de zone

Les zones En-tête, Corps et Pied de page sont clairement délimitées par des séparateurs visuels discrets. Lorsque l'option Répéter l'en-tête et le pied de page est activée dans les Paramètres d'impression, un indicateur « Répété sur toutes les pages » apparaît sous le séparateur pour rappeler que ces zones seront dupliquées sur chaque page du PDF.

      
flowchart TD
    A[En-tête] -->|Répété sur toutes les pages| B[Corps]
    B --> C[Pied de page]
    C -->|Répété sur toutes les pages| D[Page suivante]

    

Contrôles de titre en ligne

Les options de configuration des titres et libellés (afficher/masquer le titre et saisir le texte) sont regroupées sur une seule ligne dans le panneau d'inspection, ce qui simplifie leur accès et leur modification.

Redimensionnement des colonnes de section

Vous pouvez ajuster la largeur des colonnes dans une section en faisant glisser la bordure entre deux colonnes. Les largeurs sont enregistrées sous forme de ratios flexibles dans le format d'impression et sont respectées lors de la génération du PDF.

Redimensionnement des colonnes de tableau

Les colonnes des tableaux peuvent être redimensionnées directement depuis la zone de prévisualisation en faisant glisser la bordure entre les en-têtes de colonne. La largeur minimale d'une colonne est fixée à 5 % de la largeur totale du tableau pour garantir une lisibilité minimale.

Architecture technique

Le constructeur de format d'impression est composé de plusieurs composants Vue.js qui interagissent pour offrir une expérience utilisateur fluide :

• PrintFormat.vue : composant principal qui gère l'aperçu en temps réel et la synchronisation avec le backend.
• PrintFormatSection.vue : gère l'affichage et la manipulation des sections (en-tête, corps, pied de page).
• Field.vue : composant générique pour l'affichage et l'édition des champs.
• LabelField.vue : composant dédié à la configuration des titres et libellés.

Gestion des événements de redimensionnement

Les événements de redimensionnement des colonnes (sections et tableaux) sont gérés via des pointer events pour une compatibilité optimale avec les périphériques tactiles et les souris. Les écouteurs d'événements sont nettoyés automatiquement lors du désabonnement (pointercancel) ou du démontage du composant pour éviter les fuites mémoire.

Persistance des largeurs de colonne

Les largeurs des colonnes sont stockées dans le champ format_data du document Print Format sous forme de ratios flexibles. Ces données sont utilisées par le générateur PDF pour appliquer les largeurs lors de la génération du document final.

Bonnes pratiques de développement

• Nettoyage des écouteurs : assurez-vous de supprimer tous les écouteurs d'événements lors du démontage des composants pour éviter les fuites mémoire.
• Compatibilité tactile : utilisez des pointer events plutôt que des mouse events pour une meilleure compatibilité avec les périphériques tactiles.
• Validation des données : vérifiez que les largeurs de colonne respectent les contraintes minimales (5 % par colonne) avant de les enregistrer.
• Tests automatisés : utilisez Cypress pour couvrir les scénarios de redimensionnement et de persistance des largeurs.

Exemple de code

Voici un extrait du code gérant le redimensionnement des colonnes de tableau :

// Extrait de frappe/public/js/print_format_builder/components/editor/PrintFormat.vue
function setupColumnResize() {
  const resizeHandles = document.querySelectorAll('.column-resize-handle');
  resizeHandles.forEach(handle => {
    handle.addEventListener('pointerdown', startResize);
  });
}

function startResize(e) {
  e.preventDefault();
  const handle = e.target;
  const columnIndex = parseInt(handle.dataset.columnIndex);
  const table = handle.closest('table');
  
  const startX = e.clientX;
  const startWidth = table.columns[columnIndex].width;
  
  function onMove(e) {
    const deltaX = e.clientX - startX;
    const newWidth = startWidth + deltaX;
    // Appliquer la nouvelle largeur avec une contrainte minimale de 5%
    table.columns[columnIndex].width = Math.max(5, newWidth);
  }
  
  function onUp() {
    document.removeEventListener('pointermove', onMove);
    document.removeEventListener('pointerup', onUp);
    document.removeEventListener('pointercancel', onUp);
  }
  
  document.addEventListener('pointermove', onMove);
  document.addEventListener('pointerup', onUp);
  document.addEventListener('pointercancel', onUp);
}

Tests automatisés

Les fonctionnalités de redimensionnement sont couvertes par des tests Cypress dans le fichier cypress/integration/print_format_builder.js. Voici un exemple de test pour le redimensionnement des colonnes de tableau :

// Extrait de cypress/integration/print_format_builder.js
describe('Print Format Builder - Column Resize', () => {
  it('should resize table columns and persist widths', () => {
    cy.visit('/app/print-format/new-print-format-1/edit?builder=1');
    cy.get('.column-resize-handle').first().trigger('pointerdown', { which: 1 });
    cy.get('.column-resize-handle').first().trigger('pointermove', { clientX: 300 });
    cy.get('.column-resize-handle').first().trigger('pointerup');
    
    // Vérifier que la largeur est bien enregistrée
    cy.get('.table-column').first().should('have.attr', 'style').and('include', 'width');
    
    // Sauvegarder et recharger pour vérifier la persistance
    cy.get('.save-btn').click();
    cy.reload();
    cy.get('.table-column').first().should('have.attr', 'style').and('include', 'width');
  });
});

Ressources supplémentaires

• Documentation utilisateur : guide pratique pour les utilisateurs finaux.
• Code source : implémentation technique des composants du constructeur.