589 lines
14 KiB
Markdown
589 lines
14 KiB
Markdown
# Architecture réseau (draft)
|
||
Date: 2025-12-25
|
||
|
||
## Vision générale
|
||
- Modèle principal: boîtes imbriquées (composition) + liaisons (graph).
|
||
- Objectifs: représenter la topologie physique/logique et les relations réseau.
|
||
|
||
## Composition (boîtes imbriquées)
|
||
- Exemple de hiérarchie:
|
||
- World (Internet)
|
||
- Maison
|
||
- Livebox
|
||
- Switch
|
||
- Borne Wi‑Fi
|
||
- Laptop
|
||
- Smartphone
|
||
- Server Proxmox
|
||
- VM Debian
|
||
- Docker
|
||
- Service
|
||
- Raspberry Pi
|
||
- Service(s)
|
||
- IoT Hub
|
||
- Service(s)
|
||
|
||
## Liaisons (graph)
|
||
- Les boîtes peuvent être reliées entre elles indépendamment de la hiérarchie.
|
||
- Exemples:
|
||
- Service -> Docker -> VM -> Server -> Switch -> Livebox -> Maison -> World
|
||
- AP (Wi‑Fi) -> Laptop / Smartphone
|
||
- Style des liaisons:
|
||
- LAN: trait plein
|
||
- Wi‑Fi: trait pointillé
|
||
|
||
## Ports
|
||
- Nombre de ports ajustable.
|
||
- Plusieurs connexions possibles sur un même port.
|
||
|
||
## Objets composés
|
||
- Un objet peut contenir des enfants.
|
||
- Enfants positionnés par rapport au parent (coordonnées locales).
|
||
- Types possibles d’enfants: icône, forme, texte, badge, objet complet.
|
||
|
||
## Redimensionnement
|
||
- Les conteneurs sont redimensionnables pour inclure d’autres objets.
|
||
- À décider:
|
||
- Taille des enfants figée ou proportionnelle au parent lors du resize.
|
||
|
||
## Modèle de données (à préciser)
|
||
- Node (id, type, label, size, children[], ports[])
|
||
- Port (id, label, capacity)
|
||
- Edge (from, to, kind: LAN/Wi‑Fi)
|
||
|
||
## Modèle d’objet (draft)
|
||
- Parent optionnel + enfants multiples.
|
||
- Types d’objets: rectangle, icône, image, table, texte, lien, commande, connecteur.
|
||
- Propriétés communes:
|
||
- id, name, parentId, children[]
|
||
- category
|
||
- position: x, y (locales au parent), zIndex
|
||
- size: width, height
|
||
- rotation: degrés
|
||
- keep_ratio: true | false
|
||
- visible
|
||
- anchor: free | edge, edgeSide: 1|2|3|4
|
||
- style: fillColor, strokeColor, opacity
|
||
- font: family, size, weight (normal|bold), style (normal|italic), color
|
||
- state: libre | accroché | en bordure
|
||
- command: texte/commande associée (optionnel)
|
||
- connecteurs: liste d’IDs d’objets connecteur
|
||
|
||
### Image
|
||
- formats: png, jpg, svg, webp
|
||
- size: width, height
|
||
- anchor: position d’accrochage
|
||
- state: libre | accroché | en bordure
|
||
- storage: fichier sur disque + chemin (`src`) dans JSON/DB (pas d’image brute)
|
||
- displayName: nom lisible optionnel
|
||
- naming: conserver le nom lisible + suffixe unique (ex: `livebox_7f3a.png`)
|
||
- upload:
|
||
- création d’un nouveau fichier avec métadonnées
|
||
- réduction de poids possible à l’upload et après (optimize)
|
||
- library:
|
||
- images ajoutées dans une bibliothèque
|
||
- metadata category obligatoire
|
||
|
||
### Table
|
||
- size: width, height
|
||
- position: x, y (locales au parent)
|
||
- parentId, children[]
|
||
- grid: rows, cols
|
||
- headers: title1, title2, title3...
|
||
- style spécifique:
|
||
- borderColor, fillColor, headerColor, textColor
|
||
- fontWeight (normal|bold), fontStyle (normal|italic), fontSize, fontFamily
|
||
- anchor: x, y, zIndex
|
||
- connecteurs: liste d’IDs d’objets connecteur
|
||
|
||
### Connecteur
|
||
- Objet à part entière:
|
||
- id, name, parentId, children[]
|
||
- endpoints: connecteur1 -> targetId, connecteur2 -> targetId
|
||
|
||
## Exemple Mermaid (boîtes imbriquées + liaisons)
|
||
```mermaid
|
||
flowchart TB
|
||
%% Boîtes imbriquées
|
||
subgraph World["World (Internet)"]
|
||
subgraph Maison["Maison"]
|
||
Livebox["Livebox"]
|
||
Switch["Switch"]
|
||
subgraph Server["Server Proxmox"]
|
||
VM["VM Debian"]
|
||
subgraph Docker["Docker"]
|
||
Service["Service"]
|
||
end
|
||
end
|
||
Laptop["Laptop"]
|
||
Smartphone["Smartphone"]
|
||
end
|
||
end
|
||
|
||
%% Liaisons (réseau/logique)
|
||
Service --> Docker
|
||
Docker --> VM
|
||
VM --> Server
|
||
Server --> Switch
|
||
Switch --> Livebox
|
||
Livebox --> Maison
|
||
Maison --> World
|
||
```
|
||
|
||
## Exemple JSON (draft)
|
||
```json
|
||
{
|
||
"nodes": [
|
||
{
|
||
"id": "world",
|
||
"type": "rectangle",
|
||
"name": "World",
|
||
"parentId": null,
|
||
"children": ["maison"],
|
||
"position": { "x": 0, "y": 0 },
|
||
"zIndex": 0,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#2B2D2A",
|
||
"strokeColor": "#8F8F7A",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 14,
|
||
"weight": "bold",
|
||
"style": "normal",
|
||
"color": "#E6DB74"
|
||
},
|
||
"state": "libre",
|
||
"command": null,
|
||
"connecteurs": []
|
||
},
|
||
{
|
||
"id": "maison",
|
||
"type": "rectangle",
|
||
"name": "Maison",
|
||
"parentId": "world",
|
||
"children": ["livebox", "server"],
|
||
"position": { "x": 40, "y": 40 },
|
||
"zIndex": 1,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#3A3D39",
|
||
"strokeColor": "#A6E22E",
|
||
"opacity": 0.95
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 12,
|
||
"weight": "bold",
|
||
"style": "normal",
|
||
"color": "#E6DB74"
|
||
},
|
||
"state": "libre",
|
||
"command": null,
|
||
"connecteurs": []
|
||
},
|
||
{
|
||
"id": "livebox",
|
||
"type": "image",
|
||
"name": "Livebox",
|
||
"category": "network",
|
||
"parentId": "maison",
|
||
"children": [],
|
||
"position": { "x": 20, "y": 30 },
|
||
"size": { "width": 48, "height": 48 },
|
||
"rotation": 0,
|
||
"keepRatio": true,
|
||
"zIndex": 2,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#272822",
|
||
"strokeColor": "#F92672",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 11,
|
||
"weight": "normal",
|
||
"style": "normal",
|
||
"color": "#F8F8F2"
|
||
},
|
||
"state": "libre",
|
||
"command": null,
|
||
"connecteurs": ["c-livebox"],
|
||
"image": {
|
||
"format": "svg",
|
||
"src": "livebox.svg",
|
||
"displayName": "Livebox",
|
||
"category": "network",
|
||
"sizeBytes": 12456,
|
||
"width": 48,
|
||
"height": 48
|
||
}
|
||
},
|
||
{
|
||
"id": "server",
|
||
"type": "rectangle",
|
||
"name": "Server Proxmox",
|
||
"parentId": "maison",
|
||
"children": ["vm-debian"],
|
||
"position": { "x": 140, "y": 30 },
|
||
"zIndex": 2,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#2F3130",
|
||
"strokeColor": "#66D9EF",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 11,
|
||
"weight": "bold",
|
||
"style": "normal",
|
||
"color": "#E6DB74"
|
||
},
|
||
"state": "libre",
|
||
"command": "ssh root@server",
|
||
"connecteurs": ["c-server"]
|
||
},
|
||
{
|
||
"id": "vm-debian",
|
||
"type": "rectangle",
|
||
"name": "VM Debian",
|
||
"parentId": "server",
|
||
"children": ["docker"],
|
||
"position": { "x": 16, "y": 36 },
|
||
"zIndex": 3,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#1F2A2A",
|
||
"strokeColor": "#A6E22E",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 10,
|
||
"weight": "normal",
|
||
"style": "normal",
|
||
"color": "#E6DB74"
|
||
},
|
||
"state": "libre",
|
||
"command": null,
|
||
"connecteurs": []
|
||
},
|
||
{
|
||
"id": "docker",
|
||
"type": "rectangle",
|
||
"name": "Docker",
|
||
"parentId": "vm-debian",
|
||
"children": ["service-web"],
|
||
"position": { "x": 12, "y": 28 },
|
||
"zIndex": 4,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "#263238",
|
||
"strokeColor": "#F8F8F2",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 10,
|
||
"weight": "normal",
|
||
"style": "normal",
|
||
"color": "#F8F8F2"
|
||
},
|
||
"state": "libre",
|
||
"command": "docker ps",
|
||
"connecteurs": []
|
||
},
|
||
{
|
||
"id": "service-web",
|
||
"type": "text",
|
||
"name": "Service Web",
|
||
"parentId": "docker",
|
||
"children": [],
|
||
"position": { "x": 10, "y": 18 },
|
||
"zIndex": 5,
|
||
"visible": true,
|
||
"anchor": "free",
|
||
"edgeSide": null,
|
||
"style": {
|
||
"fillColor": "transparent",
|
||
"strokeColor": "transparent",
|
||
"opacity": 1
|
||
},
|
||
"font": {
|
||
"family": "Space Grotesk",
|
||
"size": 10,
|
||
"weight": "normal",
|
||
"style": "italic",
|
||
"color": "#A6E22E"
|
||
},
|
||
"state": "libre",
|
||
"command": null,
|
||
"connecteurs": ["c-service"]
|
||
}
|
||
],
|
||
"connecteurs": [
|
||
{
|
||
"id": "c-livebox",
|
||
"name": "LAN Livebox",
|
||
"parentId": "livebox",
|
||
"children": [],
|
||
"endpoints": [
|
||
{ "name": "c1", "targetId": "c-server" },
|
||
{ "name": "c2", "targetId": "world" }
|
||
]
|
||
},
|
||
{
|
||
"id": "c-server",
|
||
"name": "LAN Server",
|
||
"parentId": "server",
|
||
"children": [],
|
||
"endpoints": [
|
||
{ "name": "c1", "targetId": "c-livebox" },
|
||
{ "name": "c2", "targetId": "c-service" }
|
||
]
|
||
},
|
||
{
|
||
"id": "c-service",
|
||
"name": "Service Link",
|
||
"parentId": "service-web",
|
||
"children": [],
|
||
"endpoints": [
|
||
{ "name": "c1", "targetId": "c-server" },
|
||
{ "name": "c2", "targetId": "docker" }
|
||
]
|
||
}
|
||
],
|
||
"edges": [
|
||
{ "from": "c-livebox", "to": "c-server", "kind": "lan" },
|
||
{ "from": "c-livebox", "to": "world", "kind": "lan" }
|
||
]
|
||
}
|
||
```
|
||
|
||
## UML (tables SQLite - draft)
|
||
```mermaid
|
||
classDiagram
|
||
class diagram {
|
||
+id TEXT
|
||
+name TEXT
|
||
+created_at TEXT
|
||
+updated_at TEXT
|
||
+version TEXT
|
||
}
|
||
class node {
|
||
+id TEXT
|
||
+diagram_id TEXT
|
||
+type TEXT
|
||
+name TEXT
|
||
+category TEXT
|
||
+parent_id TEXT
|
||
+x REAL
|
||
+y REAL
|
||
+width REAL
|
||
+height REAL
|
||
+rotation REAL
|
||
+keep_ratio INTEGER
|
||
+z_index INTEGER
|
||
+visible INTEGER
|
||
+anchor TEXT
|
||
+edge_side INTEGER
|
||
+state TEXT
|
||
}
|
||
class node_style {
|
||
+node_id TEXT
|
||
+fill_color TEXT
|
||
+stroke_color TEXT
|
||
+opacity REAL
|
||
+font_family TEXT
|
||
+font_size REAL
|
||
+font_weight TEXT
|
||
+font_style TEXT
|
||
+font_color TEXT
|
||
}
|
||
class node_command {
|
||
+node_id TEXT
|
||
+command_text TEXT
|
||
}
|
||
class node_media {
|
||
+node_id TEXT
|
||
+media_type TEXT
|
||
+src TEXT
|
||
+format TEXT
|
||
+display_name TEXT
|
||
+category TEXT
|
||
+size_bytes INTEGER
|
||
+width REAL
|
||
+height REAL
|
||
}
|
||
class node_text {
|
||
+node_id TEXT
|
||
+content TEXT
|
||
}
|
||
class node_link {
|
||
+node_id TEXT
|
||
+url TEXT
|
||
+label TEXT
|
||
}
|
||
class node_table {
|
||
+node_id TEXT
|
||
+rows INTEGER
|
||
+cols INTEGER
|
||
+width REAL
|
||
+height REAL
|
||
+header_color TEXT
|
||
+header_text_color TEXT
|
||
+border_color TEXT
|
||
+cell_color TEXT
|
||
+font_family TEXT
|
||
+font_size REAL
|
||
+font_weight TEXT
|
||
+font_style TEXT
|
||
}
|
||
class node_table_header {
|
||
+node_id TEXT
|
||
+col_index INTEGER
|
||
+title TEXT
|
||
}
|
||
class connector {
|
||
+id TEXT
|
||
+diagram_id TEXT
|
||
+name TEXT
|
||
+parent_id TEXT
|
||
+x REAL
|
||
+y REAL
|
||
+z_index INTEGER
|
||
+visible INTEGER
|
||
}
|
||
class connector_endpoint {
|
||
+id TEXT
|
||
+connector_id TEXT
|
||
+name TEXT
|
||
+target_id TEXT
|
||
}
|
||
class edge {
|
||
+id TEXT
|
||
+diagram_id TEXT
|
||
+from_id TEXT
|
||
+to_id TEXT
|
||
+kind TEXT
|
||
+style TEXT
|
||
+label TEXT
|
||
+color TEXT
|
||
}
|
||
class port {
|
||
+id TEXT
|
||
+node_id TEXT
|
||
+name TEXT
|
||
+capacity INTEGER
|
||
+x REAL
|
||
+y REAL
|
||
+anchor TEXT
|
||
+edge_side INTEGER
|
||
}
|
||
|
||
diagram "1" --> "many" node
|
||
diagram "1" --> "many" connector
|
||
diagram "1" --> "many" edge
|
||
node "1" --> "0..1" node : parent
|
||
node "1" --> "0..1" node_style
|
||
node "1" --> "0..1" node_command
|
||
node "1" --> "0..1" node_media
|
||
node "1" --> "0..1" node_text
|
||
node "1" --> "0..1" node_link
|
||
node "1" --> "0..1" node_table
|
||
node "1" --> "many" node_table_header
|
||
node "1" --> "many" port
|
||
connector "1" --> "many" connector_endpoint
|
||
```
|
||
|
||
## Frontend (UI - draft)
|
||
- Panneau gauche: **Édition** (mode édition activable).
|
||
- Palette d’objets: carré, rectangle, rond, ovale, pilule, image, texte, table, commande.
|
||
- Liaisons: ligne, connexion, flèche, spline.
|
||
- Boutons:
|
||
- Supprimer un objet du monde (avec choix de cascade):
|
||
- supprimer les enfants
|
||
- relier les enfants au grand‑parent
|
||
- Importer un objet (bibliothèque) + enfants (JSON).
|
||
- Bibliothèque:
|
||
- stockage local (JSON)
|
||
- export/import possible
|
||
- Panneau droit: **Propriétés** (ex‑Actions).
|
||
- Propriétés organisées par sections (plus lisible).
|
||
- Parent/enfants configurables depuis Propriétés.
|
||
- Image: afficher poids + catégorie.
|
||
- Afficher rotation + dimensions (avec poignées de resize/rotation activables).
|
||
- Barre d’outils dépliable (outils courants):
|
||
- couper, copier, coller, supprimer, cloner
|
||
- palette couleurs (trait / intérieur)
|
||
- police (liste déroulante) + taille (boutons + / -)
|
||
- zoom (loupe + / -)
|
||
- épaisseur de trait
|
||
|
||
## Stockage des ressources (arborescence proposée)
|
||
```
|
||
architecture/
|
||
backend/
|
||
app/
|
||
diagrams/
|
||
world.json
|
||
database/
|
||
resources/
|
||
toolbars/
|
||
editbar.json
|
||
prop_bar.json
|
||
outils.json
|
||
images/
|
||
originals/
|
||
optimized/
|
||
thumbs/
|
||
police/
|
||
palettes/
|
||
commandes/
|
||
library/
|
||
objects.json
|
||
simple_objects.json
|
||
images.json
|
||
tables.json
|
||
commands.json
|
||
palettes.json
|
||
fonts.json
|
||
exports/
|
||
imports/
|
||
```
|
||
Descriptions:
|
||
- backend/: API + logique serveur pour l’éditeur.
|
||
- app/: code UI + logique front.
|
||
- diagrams/: fichiers de diagrammes (world.json, etc.).
|
||
- database/: base SQLite locale.
|
||
- resources/toolbars/: définitions des barres d’outils.
|
||
- resources/images/: images sources, optimisées, miniatures.
|
||
- resources/police/: polices disponibles.
|
||
- formats acceptés: ttf (support initial), woff/woff2 possibles plus tard.
|
||
- resources/palettes/: palettes de couleurs.
|
||
- resources/commandes/: commandes prêtes à l’emploi.
|
||
- library/: bibliothèque d’objets réutilisables.
|
||
- exports/: exports (JSON, images, etc.).
|
||
- imports/: imports.
|
||
- Les deux volets sont repliés par défaut; un bouton en haut permet de les déplier.
|
||
- Drag & drop depuis Édition vers l’arbre réseau:
|
||
- crée un nouvel objet dans le monde avec paramètres par défaut.
|
||
- Mode lecture:
|
||
- édition désactivée = pas de déplacement ni de modification.
|