# 🎯 Guide du Drag-and-Drop

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

## 🚀 Démarrage rapide

1. **Démarrer l'application** :
```bash
cd visual_workflow_builder
./start.sh
```

2. **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 !

1. **Dans la palette à gauche**, trouve le node que tu veux ajouter (ex: "Cliquer", "Saisir du texte", etc.)

2. **Clique et maintiens** le bouton de la souris sur le node

3. **Glisse** le node vers le canvas (la zone centrale)

4. **Relâche** le bouton de la souris à l'endroit où tu veux placer le node

5. ✅ 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 :

1. **Clique simplement** sur un node dans la palette

2. ✅ 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 :

1. Ouvre l'application
2. Cherche "Cliquer" dans la palette
3. Glisse-le vers le canvas
4. Relâche-le au centre
5. 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 ! 🎉