feat editor

2026-04-23 15:24:40 +02:00
parent 20fbaf05e1
commit d0cf876372
18 changed files with 2252 additions and 40 deletions
@@ -0,0 +1,127 @@
+# ✅ Résolution de l'erreur R3F "Div is not part of the THREE namespace!"
+
+## ❌ Problème initial
+
+**Erreur** : `Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend?`
+
+**Cause** : Le composant `EditorControls` était rendu à l'intérieur du `<Canvas>` de React Three Fiber, alors qu'il contient des éléments HTML (`<div>`, `<button>`, `<h3>`).
+
+## ✅ Solution implémentée
+
+### Changement 1 : Réorganisation de la structure des composants
+
+**Ancienne structure (PROBLÉMATIQUE)**
+
+```
+EditorPage.tsx
+└── Canvas
+    ├── EditorViewer
+    │   ├── EditorCamera
+    │   ├── EditorFPSController
+    │   ├── MapViewer
+    │   └── EditorControls ← HTML DANS LE CANVAS !
+    └── Lumières
+```
+
+**Nouvelle structure (CORRIGÉE)**
+
+```
+EditorPage.tsx
+├── Canvas (uniquement 3D)
+│   ├── EditorViewer
+│   │   ├── EditorCamera
+│   │   ├── EditorFPSController
+│   │   └── MapViewer
+│   └── Lumières
+└── EditorControls ← HTML EN DEHORS DU CANVAS
+```
+
+### Changement 2 : Props drilling pour partager l'état
+
+**État partagé dans `EditorPage.tsx`** :
+
+```tsx
+const [selectedNodeIndex, setSelectedNodeIndex] = useState<number | null>(null);
+const [transformMode, setTransformMode] = useState<TransformMode>("translate");
+const [undoCount, setUndoCount] = useState(0);
+const [redoCount, setRedoCount] = useState(0);
+```
+
+**Props passés au Canvas (3D)** :
+
+```tsx
+<EditorViewer
+  sceneData={sceneData!}
+  selectedNodeIndex={selectedNodeIndex}
+  onSelectNode={handleSelectNode}
+  transformMode={transformMode}
+/>
+```
+
+**Props passés à EditorControls (HTML)** :
+
+```tsx
+<EditorControls
+  transformMode={transformMode}
+  onTransformModeChange={handleTransformModeChange}
+  selectedNodeIndex={selectedNodeIndex}
+  nodesCount={sceneData.mapNodes.length}
+  // ... autres props
+/>
+```
+
+### Changement 3 : Mise à jour des interfaces
+
+**`EditorViewer`** : Accepte maintenant les props de l'état
+
+```tsx
+interface EditorViewerProps {
+  sceneData: SceneData;
+  selectedNodeIndex: number | null;
+  onSelectNode: (index: number | null) => void;
+  transformMode: TransformMode;
+}
+```
+
+### Changement 4 : Simplification de `EditorViewer`
+
+- Retrait de la gestion d'état local
+- Propagation de `onSelectNode` à `MapViewer`
+- Suppression de `EditorControls` du return JSX
+- Focus sur le rendu 3D uniquement
+
+## 🧪 Résultats
+
+### ✅ Résolu
+
+1. **Erreur R3F ** éliminée
+2. **Séparation claire** : HTML vs 3D
+3. **État synchronisé** entre UI et scène 3D
+4. **Build TypeScript** : Pas d'erreurs
+5. **Serveur dev** : Démarre sur port 5177
+
+### ⚡ Fonctionnalités préservées
+
+- ✅ Upload dossier map.json
+- ✅ Visualisation 3D avec MapNode
+- ✅ Transformations T/R/S
+- ✅ Undo/Redo (Ctrl+Z/Y)
+- ✅ Export JSON
+- ✅ Mode player FPS
+- ✅ Sélection objets + highlight
+- ✅ Navigation jeu ↔ éditeur
+
+### 📋 Tests recommandés
+
+1. **Accéder à `/editor`** : Vérifier que l'erreur R3F disparaît
+2. **Interaction** : Tester sélection d'objets (clic sur cubes)
+3. **Panels** : Vérifier que EditorControls s'affiche correctement
+4. **Keyboard shortcuts** : T/R/S, ESC, Ctrl+Z/Y
+
+### 📁 Fichiers modifiés
+
+1. `src/components/editor/EditorPage.tsx` → Gestion état + réorganisation
+2. `src/components/editor/EditorViewer.tsx` → Props drilling + cleanup
+3. Props updates dans l'arbre de composants
+
+L'erreur R3F est maintenant résolue avec une architecture propre qui sépare correctement le HTML du 3D ! 🎉