# 🐛 Guide de Débogage - Drag-and-Drop

## Modifications apportées

J'ai ajouté des logs de débogage dans le code pour identifier le problème :

### 1. Correction du warning React Flow

**Problème** : Les `nodeTypes` et `edgeTypes` étaient recréés à chaque render.

**Solution** : Déplacés en dehors du composant Canvas.

### 2. Ajout de logs de débogage

Des `console.log` ont été ajoutés dans :
- `Palette/index.tsx` : Quand un node est cliqué
- `App.tsx` : Quand handleNodeAdd est appelé
- `Canvas/index.tsx` : Quand un drop est détecté

## Comment déboguer

### Étape 1 : Redémarrer l'application

```bash
cd visual_workflow_builder
./stop.sh  # Arrêter les services
./start.sh # Redémarrer
```

### Étape 2 : Ouvrir la console du navigateur

1. Ouvre http://localhost:3000
2. Appuie sur **F12** (ou Cmd+Option+I sur Mac)
3. Va dans l'onglet **Console**

### Étape 3 : Tester le clic simple

1. Dans la palette à gauche, **clique** sur "Cliquer"
2. Regarde la console, tu devrais voir :
   ```
   Palette: Node clicked: click
   App: Adding node of type: click
   App: New node created: {id: "node-...", type: "click", ...}
   App: Updated nodes: [...]
   ```

**Si tu ne vois rien** : Le clic n'est pas capturé. Problème dans la Palette.

**Si tu vois "Palette: Node clicked" mais pas "App: Adding"** : Le callback n'est pas passé correctement.

### Étape 4 : Tester le drag-and-drop

1. **Clique et maintiens** sur "Cliquer" dans la palette
2. **Glisse** vers le canvas
3. **Relâche**
4. Regarde la console, tu devrais voir :
   ```
   Canvas: Drop event triggered
   Canvas: Node type from drag: click
   Canvas: Calling onNodeAdd with type: click
   App: Adding node of type: click
   App: New node created: {id: "node-...", type: "click", ...}
   App: Updated nodes: [...]
   ```

**Si tu ne vois rien** : Le drop n'est pas capturé. Problème dans le Canvas.

**Si tu vois "Canvas: Drop cancelled"** : Vérifie le message pour comprendre pourquoi.

## Problèmes possibles et solutions

### Problème 1 : Rien ne se passe au clic

**Cause possible** : Le `Paper` dans la Palette capture le clic mais ne le propage pas.

**Solution** : Vérifier que le `onClick` est bien sur le `Paper` et non sur un élément enfant.

### Problème 2 : Le drag ne fonctionne pas

**Cause possible** : L'attribut `draggable` n'est pas sur le bon élément.

**Solution** : Vérifier que `draggable` est bien sur le `Paper` dans la Palette.

### Problème 3 : Le drop ne fonctionne pas

**Cause possible** : Les handlers `onDrop` et `onDragOver` ne sont pas sur ReactFlow.

**Solution** : Vérifier que ces props sont bien passés au composant `<ReactFlow>`.

### Problème 4 : Le node apparaît mais disparaît

**Cause possible** : Les nodes ne sont pas synchronisés correctement entre App et Canvas.

**Solution** : Vérifier que `useNodesState` utilise bien les nodes passés en props.

## Vérification rapide

Exécute ce script pour vérifier que tout est en place :

```bash
cd visual_workflow_builder
./test_drag_drop.sh
```

Tous les checks devraient passer ✓

## Prochaines étapes

Une fois que tu as identifié le problème avec les logs :

1. **Partage les logs de la console** avec moi
2. Je pourrai identifier exactement où ça bloque
3. On corrigera le problème spécifique

## Nettoyage

Une fois le problème résolu, on pourra retirer les `console.log` pour un code plus propre.