PdfEditor — Frontend (Angular)

Application web d'édition de PDF auto-hébergée. Frontend Angular (standalone components, routing, lazy-loading) consommant l'API REST décrite dans ../docs/API.md. L'API est toujours appelée en chemin relatif /api/..., afin que le proxy nginx (prod) comme le proxy Angular (dev) fonctionnent sans configuration d'URL.

Prérequis

Node.js 20+ (testé avec Node 22/24) et npm.
Angular CLI (npm install -g @angular/cli) ou via npx ng.

Installation

npm install

Le fichier package-lock.json n'est pas fourni : il sera généré au premier npm install. Pensez à le commiter ensuite (le Dockerfile l'utilise via npm ci s'il est présent).

Développement local (`ng serve` + proxy)

Le backend est exposé en local sur http://localhost:8081 par ../docker-compose.local.yml. Le fichier proxy.conf.json redirige /api vers ce port.

Démarrer la base + le backend :

# à la racine du dépôt
docker compose -f docker-compose.local.yml up --build db backend

Lancer le serveur de dev Angular (utilise automatiquement le proxy) :

npm start
# équivaut à : ng serve --proxy-config proxy.conf.json

Ouvrir http://localhost:4200.

Build de production

npm run build
# Sortie : dist/pdfeditor-frontend/browser

Docker

Dockerfile (multi-stage : build Angular puis service nginx) et nginx.conf (SPA + proxy /api -> http://backend:8080) sont prévus pour ../docker-compose.yml et ../docker-compose.local.yml (service frontend, exposé sur le port 80 de l'image).

# build local de l'image (depuis le dossier frontend)
docker build -t pdfeditor-frontend .

Architecture

src/app/
├── core/                 # services transverses
│   ├── auth.service.ts       # login/register/refresh/logout + état utilisateur
│   ├── auth.interceptor.ts   # Bearer + refresh automatique sur 401
│   ├── auth.guard.ts         # garde des routes protégées
│   ├── documents.service.ts  # CRUD /api/documents
│   └── models.ts             # types alignés sur le contrat d'API
└── features/
    ├── auth/             # pages login + register
    ├── dashboard/        # liste des documents sauvegardés
    └── editor/           # éditeur PDF (cœur du produit)
        ├── editor.component.*       # orchestration (drag&drop, toolbar, export)
        ├── page-layer.component.ts  # rendu d'une page + couche d'annotations
        ├── pdf.service.ts           # rendu pdf.js + export pdf-lib
        ├── signature-dialog.component.ts
        └── annotation.model.ts

Librairies clés

pdfjs-dist : rendu des pages PDF dans un <canvas> (navigation, zoom).
pdf-lib : aplatissement des annotations dans le PDF à l'export.
signature_pad : capture de la signature à main levée.
Couche d'annotations : DOM/CSS maison (pas de fabric/konva) — éléments simples, édition de texte et rendu d'images natifs, dépendance évitée.

Authentification

access_token conservé en mémoire (perdu au rechargement, restauré par un refresh) ; refresh_token persisté dans localStorage.
L'intercepteur ajoute le Bearer et, sur 401, tente un /api/auth/refresh unique (les requêtes concurrentes attendent puis sont rejouées).

3.4 KiB Raw Permalink Blame History