Canvas

Le Canvas est l’écran central d’un projet HNetwork : tu y modélises visuellement une infrastructure réseau en plaçant des services (nodes) et leurs connexions. Le canvas est collaboratif en temps réel et supporte les zones, les environnements multiples, et un système de champs personnalisés par service.

📷 [IMAGE — vue d’ensemble canvas] (à venir)

1. Organisation de l’écran

┌───────────────────────────────────────────────────────┐
│  Toolbar (haut)                                       │
├──────────┬──────────────────────────────┬────────────┤
│ Palette  │                              │ Panneau    │
│ (nodes)  │      Zone de canvas          │ Sélection  │
│          │      (drag & drop, zoom)     │ (node /    │
│          │                              │  edge)     │
│          ├──────────────────────────────┤            │
│          │  Mini-map · Controls (zoom)  │            │
└──────────┴──────────────────────────────┴────────────┘

2. Toolbar (en haut)

Gauche

• 🏠 Retour Dashboard.
• Nom du projet — clique dessus (ou sur le ✏️) pour éditer en place.
  • Entrée valide, Échap annule.

Centre / droite

• 👥 Indicateur de collaboration — montre l’état de synchronisation et les avatars colorés des membres connectés en temps réel.
• 🎨 Sélecteur d’environnement — voir section 7.
• 🐞 Issues — badge avec compteur (signale les problèmes détectés dans la modélisation).
• 🔗 Connexion (toggle) — active le mode création de connexion (voir section 5).
• 🗺️ Zones — ouvre le ZoneManagerModal (voir section 6).
• 📄 Docs — bascule vers la partie Docs du projet (Docs).
• 🤝 Partager — ouvre la modale de partage (membres + invitations par email avec rôle).

📷 [IMAGE — toolbar canvas] (à venir)

3. Palette (sidebar gauche)

La palette regroupe toutes les catégories de services disponibles.

• Catégories pliables (ex. Networking, Serveurs, Cloud…).
• Chaque catégorie affiche un compteur de types disponibles.
• Par défaut, les catégories sont repliées — clique sur la flèche pour les déplier.

Créer un node

1. Trouve le type de service dans la palette.
2. Glisse-le vers la zone du canvas.
3. Relâche : un node est créé à l’emplacement de la souris.

💡 Si tu glisses par-dessus un host node, le nouveau service est automatiquement créé à l’intérieur du host (s’il est compatible).

📷 [IMAGE — palette + drag node] (à venir)

4. Travailler avec les nodes

Types de nodes

Type	Description
Generic	Boîte simple avec poignées de connexion gauche/droite.
Host	Conteneur pouvant accueillir d’autres nodes à l’intérieur. En-tête avec flèche de pliage et compteur d’enfants.

Sélectionner / éditer

• Clic sur un node → ouverture du panneau Node à droite (voir section 8).
• Glisse un node sélectionné pour le déplacer :
  • Position relative à son host parent si imbriqué.
  • Position absolue sinon.

Imbriquer dans un host

• Glisse un node générique par-dessus un host existant.
• Pendant le drag, un overlay coloré t’indique :
  • ✅ Vert = dépose autorisée (compatible).
  • ❌ Rouge = dépose refusée (incompatibilité, imbrication cyclique…).
• Relâche pour confirmer.

Détacher d’un host

• Sélectionne un node imbriqué.
• Dans le panneau Node, clique sur « Détacher ».
• La position relative est convertie en position absolue.

Supprimer un node

• Sélectionne-le.
• Dans le panneau Node, clique sur le bouton rouge 🗑️.
• Confirme.

📷 [IMAGE — host + nodes imbriqués] (à venir)

5. Créer une connexion

1. Active le toggle « Connexion » dans la toolbar — les poignées de connexion apparaissent sur les nodes (points gauche/droite).
2. Clique sur la poignée gauche (cible) d’un node, glisse vers la poignée droite (source) d’un autre node.
3. Relâche : la modale « Nouvelle connexion » s’ouvre.
4. Renseigne :
   • Protocole (HTTP, HTTPS, SSH, DNS, TCP, UDP, custom…).
   • Port source et port destination (auto-rempli si pertinent).
   • Chiffrement (TLS, mTLS, IPSec, Aucun…).
   • Bidirectionnel (Oui/Non).
   • Label et description (optionnels).
5. Valide.

📷 [IMAGE — créer une connexion] (à venir)

Modifier ou supprimer une connexion

• Clique sur l’edge → le panneau Connexion s’ouvre à droite.
• Affiche source/cible, protocole, ports, chiffrement, bidirection.
• Boutons Éditer (rouvre la modale) et Supprimer (avec confirmation).

6. Zones

Les zones permettent de regrouper logiquement des services (DMZ, LAN, Cloud, etc.).

Ouvrir le gestionnaire

Clique sur 🗺️ Zones dans la toolbar — le ZoneManagerModal s’ouvre.

Créer une zone

• Renseigne Nom + Type (Custom, DMZ, LAN, Cloud, …).
• Le type applique automatiquement une couleur associée (le « custom » laisse le choix).
• Valide.

Modifier ou supprimer

• Modifie le nom inline.
• Change le type via le menu déroulant.
• 🗑️ supprime la zone — si des nodes y sont assignés, la confirmation te les rappelle ; après suppression ils repassent non zonés.

Assigner une zone à un node

• Sélectionne le node.
• Dans le panneau Node, ouvre le menu déroulant « Zone ».
• Choisis une zone existante ou clique sur « + » pour la créer à la volée.

📷 [IMAGE — modale gestion des zones] (à venir)

7. Environnements

Un environnement est une variante de ton projet (prod, staging, dev, preprod…) qui peut surcharger les valeurs des champs des services sans dupliquer les nodes.

Sélecteur d’environnement (toolbar)

• « Tous » (par défaut) — affiche les valeurs de base.
• Boutons par environnement (pastille colorée + nom).
• ⚙️ Settings → EnvironmentManagerModal.

Gérer les environnements

Dans le modal :

• Créer un environnement (couleur attribuée automatiquement, modifiable).
• Renommer.
• Changer la couleur.
• Supprimer (au moins 1 environnement requis).

📷 [IMAGE — gestion des environnements] (à venir)

Surcharger un champ par environnement

1. Sélectionne un environnement (sortie du mode « Tous »).
2. Sélectionne un node.
3. Le panneau Node affiche une bannière jaune rappelant que tu édites pour l’environnement actif.
4. Modifie un champ → la nouvelle valeur est enregistrée comme override pour cet environnement.
5. Un bouton ↺ apparaît à côté du champ overridé pour revenir à la valeur de base d’un clic.

Assigner un node à plusieurs environnements

Dans le panneau Node, la section « Environnements » propose des cases à cocher : le node n’apparaît que dans les environnements cochés.

8. Panneau Node (sélection)

Quand tu cliques sur un node, le panneau Node s’ouvre à droite.

En-tête

• Icône du type + libellé en majuscules.
• 🔀 Changer de type — ChangeTypeModal.
• ❌ Fermer.

Sections principales

Section	Description
Banner lecture seule	Visible si tu es viewer. Toute édition désactivée.
Banner environnement	Présent si un env est actif : « tu modifies une surcharge ».
Nom du node	Champ texte, auto-save au blur.
Zone réseau	Dropdown avec bouton « + » pour créer une nouvelle zone.
Champs de base	Définis par le schéma du type (ex. IP, Hostname, Port). Affichent la valeur effective (base ou override).
Champs custom	Couples clé-valeur libres. Bouton « + » pour ajouter, 🗑️ pour supprimer. Conservés en cas de changement de type.
Environnements	Cases à cocher de visibilité par env.
Pages liées	Liste des pages docs liées au node + bouton « Créer une page pour ce service ».
Détacher	Si imbriqué dans un host : convertit la position relative en absolue.
Sauvegarder / Supprimer	Bouton sauvegarde (quand modifié) + bouton ❌ rouge avec confirmation.

📷 [IMAGE — panneau node] (à venir)

9. Panneau Connexion (sélection)

Quand tu cliques sur un edge, le panneau Connexion s’ouvre à droite.

• En-tête : pastille colorée + « Connexion · {Protocole} ».
• Informations en lecture seule : source → cible, protocole, ports, chiffrement, bidirectionnel, label, description.
• Boutons Éditer (modale) et Supprimer.

📷 [IMAGE — panneau connexion] (à venir)

10. Contrôles du canvas

En bas à droite, une barre flottante donne accès aux contrôles généraux :

Bouton	Effet	Raccourci
↶ Undo	Annule la dernière action canvas.	Ctrl + Z
↷ Redo	Rejoue l’action annulée.	Ctrl + Y ou Ctrl + Shift + Z
−	Zoom arrière.	Molette ↓
%	Affiche le zoom actuel ; clic = reset à 100 %.	—
+	Zoom avant.	Molette ↑
⊞ Fit view	Re-cadre pour afficher tous les nodes.	—
⤢ Plein écran	Bascule plein écran du canvas.	—
🗺️ Minimap	Affiche/cache la mini-carte.	—

Min zoom : 0.2x — Max zoom : 5.0x.

📷 [IMAGE — contrôles canvas] (à venir)

11. Collaboration temps réel

• Les modifications sont synchronisées en direct via une couche collaborative (Yjs).
• L’indicateur de la toolbar affiche les avatars colorés des membres connectés au même projet.
• Le mode viewer est en lecture seule : aucune action d’édition n’est disponible (UI grisée + banner explicite).
• L’undo / redo est local à ta session (chaque collaborateur a son propre historique).

12. Partage du projet

Le bouton « Partager » dans la toolbar ouvre la modale de partage :

• Inviter par email + rôle (admin, editor, viewer).
• Lister les membres actuels du projet, modifier leur rôle, les retirer.
• Pour un projet org-scopé : la modale rappelle les règles d’accès cloisonné (les admins de l’org peuvent reprendre la main via l’onglet Contenu de l’admin org — voir Administration).

📷 [IMAGE — modale de partage] (à venir)

13. Issues (diagnostic)

Le bouton 🐞 Issues affiche les anomalies détectées dans la modélisation : connexions incomplètes, ports en conflit, services orphelins, zones vides, etc. Clique sur une issue pour être amené sur l’élément concerné dans le canvas.

💡 Pratique pour valider qu’une maquette est cohérente avant de la partager.

14. Raccourcis clavier

Raccourci	Action
Ctrl + Z / Cmd + Z	Annuler
Ctrl + Y / Ctrl + Shift + Z	Refaire
Entrée (édition inline)	Valider
Échap (édition inline)	Annuler
Drag depuis Palette → Canvas	Créer un node
Drag entre poignées (mode Connexion)	Créer une connexion

Suite

• Rédiger les Docs liées aux services
• Administration de l’organisation