rpa_vision_v3/visual_workflow_builder/DEBUG_DRAG_DROP.md

🐛 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

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 :

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.