ipwatch/architecture.md

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)

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)

{
  "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)

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.