# 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.