Files

Dom a27b74cf22 v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution

- Frontend v4 accessible sur réseau local (192.168.1.40)
- Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard)
- Ollama GPU fonctionnel
- Self-healing interactif
- Dashboard confiance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-29 11:23:51 +01:00

2.6 KiB

Raw Blame History

🎯 Guide du Drag-and-Drop

Le drag-and-drop est maintenant complètement implémenté ! Voici comment l'utiliser.

🚀 Démarrage rapide

Démarrer l'application :

cd visual_workflow_builder
./start.sh

Ouvrir dans le navigateur :

http://localhost:3000

📋 Deux méthodes pour ajouter des nodes

Méthode 1 : Drag-and-Drop (Glisser-Déposer) ✨

C'est la méthode la plus intuitive et visuelle !

Dans la palette à gauche, trouve le node que tu veux ajouter (ex: "Cliquer", "Saisir du texte", etc.)
Clique et maintiens le bouton de la souris sur le node
Glisse le node vers le canvas (la zone centrale)
Relâche le bouton de la souris à l'endroit où tu veux placer le node
✅ Le node apparaît exactement où tu l'as déposé !

Astuce : Tu verras le curseur changer en "grab" (main ouverte) quand tu survoles un node, et en "grabbing" (main fermée) quand tu le glisses.

Méthode 2 : Clic simple 🖱️

Si tu préfères une méthode plus rapide :

Clique simplement sur un node dans la palette
✅ Le node apparaît automatiquement sur le canvas à une position aléatoire

🎨 Catégories disponibles

La palette organise les nodes par catégories :

Actions Web : Cliquer, Saisir du texte, Attendre, Naviguer
Données : Extraire, Variable, Transformer
Logique : Condition, Boucle
Contrôle : Démarrer, Terminer
Intégrations : Appel API, Base de données

🔍 Recherche

Tu peux aussi utiliser la barre de recherche en haut de la palette pour filtrer les nodes par nom ou description.

🧪 Test rapide

Pour tester le drag-and-drop :

Ouvre l'application
Cherche "Cliquer" dans la palette
Glisse-le vers le canvas
Relâche-le au centre
Tu devrais voir un node "Cliquer" apparaître !

🐛 Dépannage

Le drag ne fonctionne pas ?

Vérifie que l'application est bien démarrée (./start.sh)
Rafraîchis la page (Ctrl+R ou Cmd+R)
Vérifie la console du navigateur (F12) pour les erreurs

Le node n'apparaît pas ?

Assure-toi de relâcher le node sur le canvas (zone centrale)
Vérifie que tu n'es pas en mode "readonly"

📝 Notes techniques

Le drag-and-drop utilise l'API HTML5 Drag and Drop
Les données sont transférées via dataTransfer avec le type MIME application/reactflow
Le Canvas écoute les événements onDrop et onDragOver
La Palette déclenche onDragStart sur chaque node

✅ Statut

✅ Drag-and-drop implémenté
✅ Clic simple implémenté
✅ Recherche fonctionnelle
✅ Catégories organisées
✅ Feedback visuel (curseur, hover)

Bon test ! 🎉

2.6 KiB Raw Blame History