100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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.
|
|
|
|
1. Démarrer la base + le backend :
|
|
|
|
```bash
|
|
# à la racine du dépôt
|
|
docker compose -f docker-compose.local.yml up --build db backend
|
|
```
|
|
|
|
2. Lancer le serveur de dev Angular (utilise automatiquement le proxy) :
|
|
|
|
```bash
|
|
npm start
|
|
# équivaut à : ng serve --proxy-config proxy.conf.json
|
|
```
|
|
|
|
3. Ouvrir http://localhost:4200.
|
|
|
|
## Build de production
|
|
|
|
```bash
|
|
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).
|
|
|
|
```bash
|
|
# 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).
|