docs: document editor architecture and user features

.gitignore

@@ -39,5 +39,6 @@ Thumbs.db
 .drei/
 .glitchdrei-cache/
 
+# Temporaire
 .backend/
 backend/

EDITOR-README.md

@@ -1,164 +0,0 @@
-# Editor Integration - La-Fabrik
-
-## ✅ Intégration terminée
-
-L'éditeur du POC-Editor a été entièrement intégré dans La-Fabrik sous la route `/editor`.
-
-## 🎯 Fonctionnalités implémentées
-
-### 1. **Routing React** (React Router DOM)
-
-- Route `/` → Jeu original La-Fabrik
-- Route `/editor` → Éditeur de map 3D
-- Navigation fluide entre les deux
-
-### 2. **Chargement automatique de map.json**
-
-- Cherche `/map.json` dans `public/` au démarrage
-- Scan automatique des modèles dans `public/models/`
-- Fallback: interface d'upload de dossier
-
-### 3. **Système de caméra hybride**
-
-- Réutilise `useCameraMode()` existant de La-Fabrik
-- **Mode debug** : OrbitControls (édition libre)
-- **Mode player** : FPSController custom (WASD/ZQSD + souris + jump)
-- Pas de dépendance à `octree` dans l'éditeur
-
-### 4. **Visualisation 3D avancée**
-
-- Support complet des **MapNode** (position, rotation, scale)
-- Chargement de modèles GLB/GLTF depuis `models/{nom}/model.glb`
-- Fallback: cubes colorés pour modèles manquants
-- Highlight orange pour sélection
-
-### 5. **Panneau de contrôle latéral**
-
-- Transformations: Translate (T), Rotate (R), Scale (S)
-- Undo/Redo avec compteurs (Ctrl+Z / Ctrl+Y)
-- Export JSON des modifications
-- Info sur la sélection et contrôles
-
-### 6. **Interaction et sélection**
-
-- Click pour sélectionner objets
-- ESC pour désélectionner
-- Intégration avec `InteractionManager` (système existant)
-- Visual feedback avec highlighting
-
-## 📁 Structure des fichiers
-
-```
-src/components/editor/
-├── EditorPage.tsx         # Composant route /editor + CSS + upload
-├── EditorViewer.tsx      # Composant principal (logique état + effets)
-├── EditorCamera.tsx      # Caméra (switch OrbitControls/FPS)
-├── EditorFPSController.tsx # Controller FPS sans collisions
-├── MapViewer.tsx         # Visualisation map.json + modèles
-├── EditorControls.tsx    # Panneau latéral UI
-├── types.ts              # Types: MapNode, SceneData, TransformMode
-└── EditorPage.css        # Styles scoped (~150 lignes)
-```
-
-## 🔧 Setup initial
-
-1. **Dépendances installées** :
-
-```bash
-npm install react-router-dom --legacy-peer-deps
-```
-
-2. **Modifications apportées** :
-
-- `main.tsx` → Enveloppé par `<BrowserRouter>`
-- `App.tsx` → Routes avec `<Route path="/editor">`
-- `vite.config.ts` → Pas de modif nécessaire
-
-## 🚀 Utilisation
-
-### Accès à l'éditeur
-
-1. Lancer le serveur : `npm run dev`
-2. Ouvrir `http://localhost:5176/editor`
-3. Si `map.json` manque → uploader un dossier
-
-### Structure du dossier
-
-```
-public/
-├── map.json              # Fichier JSON avec MapNode[]
-└── models/
-    ├── arbre/
-    │   └── model.glb     # Modèle 3D
-    ├── building/
-    │   └── model.glb
-    └── ...
-```
-
-### Format map.json
-
-```json
-[
-  {
-    "name": "arbre",
-    "type": "Mesh",
-    "position": [0, 5, 0],
-    "rotation": [0, 1.57, 0],
-    "scale": [1, 1, 1]
-  }
-]
-```
-
-### Contrôles claviers
-
-- **T** : Translate (déplacement)
-- **R** : Rotate (rotation)
-- **S** : Scale (échelle)
-- **Ctrl+Z** : Undo
-- **Ctrl+Y** : Redo
-- **ESC** : Désélection
-- **WASD/ZQSD** : Déplacement (mode player)
-- **Espace** : Saut (mode player)
-- **Clic souris** : Sélection objet
-
-## 🧪 Tests recommandés
-
-1. **Navigation** : `/` ↔ `/editor`
-2. **Upload dossier** : Télécharger un dossier test
-3. **Caméra** : Tester debug vs player mode
-4. **Transformations** : T/R/S sur objets sélectionnés
-5. **Undo/Redo** : Modifier puis annuler/rétablir
-6. **Export JSON** : Exporter map.json modifié
-7. **Performances** : Avec maps complexes (test map.json 12K lignes)
-
-## 📝 Points d'attention
-
-### Performance
-
-- Map.json de 12K+ lignes peut impacter perfs
-- Optimization: implémenter LOD si nécessaire
-- Cleanup des blob URLs après upload
-
-### Intégration systèmes existants
-
-- Réutilise `useCameraMode()` de La-Fabrik
-- Compatible avec `InteractionManager`
-- Styles scoped (`editor-` prefix) pour éviter conflits
-
-### Évolution future
-
-- Ajouter snap/toggle grid
-- Implémenter duplication objets
-- Ajouter outils texturing/matériaux
-- Synchronisation avec backend
-
-## 🔗 URLs de test
-
-- Jeu : `http://localhost:5176/`
-- Éditeur : `http://localhost:5176/editor`
-- Page de test : `file:///C:/Users/mathc/Documents/Programation/LA-FABRIK/La-Fabrik/test-editor.html`
-
----
-
-**Statut** : ✅ Intégration complète avec toutes les fonctionnalités demandées.
-**Prochaines étapes** : Tests utilisateur + optimisation performance.

docs/technical/architecture.md

@@ -4,13 +4,16 @@ This document describes the code that exists today in the repository.
 
 ## Runtime Structure
 
-- `src/App.tsx` mounts the `Canvas`, the 3D `World`, the debug perf overlay, and the HTML overlays.
+- `src/main.tsx` mounts React and wraps the app in `BrowserRouter`.
+- `src/App.tsx` declares the top-level routes:
+  - `/` mounts the playable 3D scene, debug perf overlay, and HTML overlays.
+  - `/editor` mounts the map editor page.
 - `src/world/World.tsx` composes the active scene, including:
   - environment and lighting
   - debug helpers and debug camera mode
   - either the map scene or the debug physics test scene
   - the player rig when the active camera mode is `player`
-- `src/world/Map.tsx` loads the main map model and builds the collision octree.
+- `src/components/game/GameMap.tsx` loads map nodes from `public/map.json`, resolves available models, and builds the collision octree.
 - `src/world/debug/TestScene.tsx` provides a debug-oriented interaction and physics scene.
 - `src/world/player/PlayerComponent.tsx` mounts the camera and controller.
 - `src/world/player/PlayerController.tsx` owns pointer lock movement, jump handling, and interaction input.
@@ -38,6 +41,26 @@ This document describes the code that exists today in the repository.
 - `src/utils/debug/scene/DebugHelpers.tsx` mounts debug helpers.
 - `src/utils/debug/scene/DebugCameraControls.tsx` mounts the free debug camera.
 
+## Editor System
+
+- `src/pages/editor/EditorPage.tsx` is the route-level editor page for `/editor`.
+- `src/features/editor/components/EditorControls.tsx` renders the HTML editor control panel.
+- `src/features/editor/scene/EditorScene.tsx` composes the editor canvas scene, camera controls, lights, shortcuts, and map rendering.
+- `src/features/editor/scene/EditorMap.tsx` renders map nodes, fallback cubes, selection highlighting, and transform controls.
+- `src/features/editor/controls/FlyController.tsx` provides player-style editor navigation.
+- `src/features/editor/hooks/useEditorSceneData.ts` loads scene data and handles folder upload fallback.
+- `src/features/editor/hooks/useEditorHistory.ts` owns editor undo and redo state.
+- `src/features/editor/utils/loadEditorScene.ts` handles editor-only folder upload parsing.
+- `src/utils/loadMapSceneData.ts` is shared by the game scene and editor to load `public/map.json` and resolve model URLs.
+- `src/types/editor.ts` contains the shared `MapNode`, `SceneData`, and `TransformMode` types.
+
+## Map Data
+
+- `public/map.json` is expected to be a `MapNode[]`.
+- Each map node `name` maps to `public/models/{name}/model.gltf`.
+- The editor renders a fallback cube for missing models.
+- The game scene filters out nodes whose model cannot be resolved.
+
 ## Current Limitations
 
 - The repository is still a prototype, not the full intended game runtime.
@@ -45,3 +68,4 @@ This document describes the code that exists today in the repository.
 - There is no central gameplay orchestrator such as `GameManager` yet.
 - Missions, zones, cinematics, and dialogue systems are not implemented.
 - The player uses octree collision and simple movement rules, not a complete gameplay physics stack.
+- Editor save-to-server is implemented as a Vite dev-server plugin, not a production backend API.

docs/technical/editor.md

@@ -0,0 +1,143 @@
+# Editor Technical Notes
+
+This document describes the map editor that exists in the current codebase.
+
+## Purpose
+
+The editor is a React route used to inspect and adjust the `public/map.json` scene data from inside the La-Fabrik app. It shares the same `MapNode` data format as the game scene and uses React Three Fiber for rendering.
+
+## Routing
+
+- `/` renders the playable La-Fabrik scene.
+- `/editor` renders the map editor.
+- `src/main.tsx` wraps the app with `BrowserRouter`.
+- `src/App.tsx` defines the route and imports `EditorPage` from `src/pages/editor/EditorPage.tsx`.
+
+## File Structure
+
+```txt
+src/
+├── pages/
+│   └── editor/
+│       └── EditorPage.tsx
+├── features/
+│   └── editor/
+│       ├── components/
+│       │   └── EditorControls.tsx
+│       ├── controls/
+│       │   └── FlyController.tsx
+│       ├── hooks/
+│       │   ├── useEditorHistory.ts
+│       │   └── useEditorSceneData.ts
+│       ├── scene/
+│       │   ├── EditorMap.tsx
+│       │   └── EditorScene.tsx
+│       └── utils/
+│           └── loadEditorScene.ts
+├── types/
+│   └── editor.ts
+└── utils/
+    └── loadMapSceneData.ts
+```
+
+## Responsibilities
+
+`src/pages/editor/EditorPage.tsx` is the route-level composition component. It owns route-specific state such as selected object, hovered object, transform mode, and player-mode toggle.
+
+`src/features/editor/hooks/useEditorSceneData.ts` loads the default map data and handles folder uploads.
+
+`src/features/editor/hooks/useEditorHistory.ts` owns editor undo and redo history.
+
+`src/features/editor/scene/EditorScene.tsx` composes the editor canvas scene, camera controls, lights, keyboard shortcuts, and `EditorMap`.
+
+`src/features/editor/scene/EditorMap.tsx` renders map nodes, fallback cubes, selection highlighting, and transform controls.
+
+`src/features/editor/components/EditorControls.tsx` renders the HTML control panel outside the canvas.
+
+`src/features/editor/controls/FlyController.tsx` provides editor movement controls for player-style navigation.
+
+`src/utils/loadMapSceneData.ts` is shared by the game map and editor. It loads `/map.json` and resolves available `public/models/{name}/model.gltf` files.
+
+`src/features/editor/utils/loadEditorScene.ts` contains editor-only upload handling for user-selected folders.
+
+## Data Format
+
+The shared editor type lives in `src/types/editor.ts`.
+
+```ts
+interface MapNode {
+  name: string;
+  type: string;
+  position: [number, number, number];
+  rotation: [number, number, number];
+  scale: [number, number, number];
+}
+```
+
+`public/map.json` is expected to be a `MapNode[]`.
+
+```json
+[
+  {
+    "name": "pylone",
+    "type": "Mesh",
+    "position": [0, 5, 0],
+    "rotation": [0, 1.57, 0],
+    "scale": [1, 1, 1]
+  }
+]
+```
+
+Each node `name` maps to a model folder:
+
+```txt
+public/
+├── map.json
+└── models/
+    └── pylone/
+        └── model.gltf
+```
+
+If a model is missing, the editor renders a fallback cube so the node can still be selected and transformed.
+
+## Editor Flow
+
+1. `EditorPage` mounts on `/editor`.
+2. `useEditorSceneData` calls `loadMapSceneData()`.
+3. `loadMapSceneData()` loads `/map.json` and available model URLs.
+4. If `/map.json` is missing, the page displays a folder-upload flow.
+5. `EditorScene` renders the grid, lights, camera controls, and map nodes.
+6. `EditorControls` exposes transform mode, history actions, export, save, and selection info.
+
+## Controls
+
+- Click: select a node.
+- `Esc`: clear selection.
+- `T`: translate mode.
+- `R`: rotate mode.
+- `S`: scale mode.
+- `Ctrl+Z` or `Cmd+Z`: undo.
+- `Ctrl+Y` or `Cmd+Y`: redo.
+- `WASD`, `ZQSD`, or arrow keys: move in player-controller mode.
+- `Space`: move upward in player-controller mode.
+- `Shift`: move downward in player-controller mode.
+
+## Saving And Exporting
+
+The editor supports two output paths:
+
+- Export JSON downloads the current `MapNode[]` as `map.json`.
+- Save to Server posts the current `MapNode[]` to `/api/save-map`.
+
+The dev-only `/api/save-map` endpoint is implemented by the Vite plugin in `vite.config.ts`. It writes to `public/map.json` and enforces a maximum payload size.
+
+## Styling
+
+Editor styles are in `src/index.css` under the `/* Editor page */` section. Classes are prefixed with `editor-` to avoid collisions with the game UI.
+
+## Known Limitations
+
+- Uploaded model object URLs are not currently revoked after replacement or unmount.
+- Large `map.json` files may need virtualization, culling, or LOD support later.
+- There is no snap-to-grid, duplication, material editing, or object creation workflow yet.
+- Save to Server is a Vite dev-server helper, not a production backend API.

docs/user/features.md

@@ -5,7 +5,7 @@ This document lists features that are implemented in the current codebase.
 ## Scene
 
 - Fullscreen React Three Fiber scene
-- Main map scene loaded from `public/models/map/model.gltf`
+- Main map scene loaded from `public/map.json` and matching `public/models/{name}/model.gltf` assets
 - Debug physics test scene selectable from the debug panel
 - Ambient and directional lighting
 - Environment background setup
@@ -38,6 +38,20 @@ This document lists features that are implemented in the current codebase.
 - Free debug camera
 - `r3f-perf` overlay
 
+## Map Editor
+
+- `/editor` route for inspecting and editing `public/map.json`
+- Automatic loading of `public/map.json` when available
+- Folder upload fallback when `map.json` is missing
+- Rendering of available `public/models/{name}/model.gltf` assets
+- Fallback cubes for nodes whose model is missing
+- Object selection by click
+- Transform modes for translate, rotate, and scale
+- Keyboard shortcuts for `T`, `R`, `S`, `Esc`, undo, and redo
+- Player-style navigation mode with `WASD`, `ZQSD`, arrow keys, `Space`, and `Shift`
+- JSON export for downloading the edited map
+- Dev-server save endpoint for writing changes back to `public/map.json`
+
 ## Not Implemented Yet
 
 - mission system
@@ -47,3 +61,4 @@ This document lists features that are implemented in the current codebase.
 - loading flow
 - minimap and mission HUD
 - full production separation between gameplay and debug scenes
+- production backend persistence for editor saves

src/App.tsx

@@ -5,7 +5,7 @@ import { Crosshair } from "@/components/ui/Crosshair";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
 import { DebugPerf } from "@/utils/debug/DebugPerf";
 import { World } from "@/world/World";
-import { EditorPage } from "@/pages/EditorPage";
+import { EditorPage } from "@/pages/editor/EditorPage";
 
 function App(): React.JSX.Element {
   return (

src/components/editor/EditorCamera.tsx

@@ -1,21 +0,0 @@
-import { useCameraMode } from "@/hooks/debug/useCameraMode";
-import { OrbitControls } from "@react-three/drei";
-
-export default function EditorCamera() {
-  const cameraMode = useCameraMode();
-
-  if (cameraMode === "debug") {
-    return (
-      <OrbitControls
-        enableDamping
-        dampingFactor={0.05}
-        minDistance={10}
-        maxDistance={500}
-        target={[0, 0, 0]}
-        makeDefault
-      />
-    );
-  }
-
-  return null;
-}

src/components/editor/EditorFPSController.tsx

@@ -1,144 +0,0 @@
-import { useEffect, useRef, useCallback } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import * as THREE from "three";
-
-const WALK_SPEED = 8;
-const JUMP_SPEED = 7;
-const MOUSE_SENSITIVITY = 0.002;
-
-export default function EditorFPSController() {
-  const { camera: rawCamera } = useThree();
-  const cameraRef = useRef(rawCamera);
-  const keys = useRef<Set<string>>(new Set());
-  const velocity = useRef(new THREE.Vector3());
-  const wantsJump = useRef(false);
-  const mouseLocked = useRef(false);
-
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    keys.current.add(e.code);
-
-    switch (e.key.toLowerCase()) {
-      case " ":
-        wantsJump.current = true;
-        e.preventDefault();
-        break;
-      case "e":
-        e.preventDefault();
-        break;
-    }
-  }, []);
-
-  const handleKeyUp = useCallback((e: KeyboardEvent) => {
-    keys.current.delete(e.code);
-  }, []);
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      if (!mouseLocked.current) return;
-
-      const movementX = e.movementX || 0;
-      const movementY = e.movementY || 0;
-
-      cameraRef.current.rotation.y -= movementX * MOUSE_SENSITIVITY;
-      cameraRef.current.rotation.x -= movementY * MOUSE_SENSITIVITY;
-      cameraRef.current.rotation.x = Math.max(
-        -Math.PI / 2,
-        Math.min(Math.PI / 2, cameraRef.current.rotation.x),
-      );
-    },
-    [cameraRef],
-  );
-
-  const handleMouseDown = useCallback((e: MouseEvent) => {
-    if (e.button === 0) {
-      if (!mouseLocked.current) {
-        mouseLocked.current = true;
-        document.body.requestPointerLock();
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mousedown", handleMouseDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [handleKeyDown, handleKeyUp, handleMouseMove, handleMouseDown]);
-
-  useFrame((_, delta) => {
-    const dt = Math.min(delta, 0.05);
-
-    if (!mouseLocked.current) return;
-
-    const forward = new THREE.Vector3(0, 0, -1);
-    const right = new THREE.Vector3(1, 0, 0);
-    const up = new THREE.Vector3(0, 1, 0);
-
-    forward.applyQuaternion(cameraRef.current.quaternion);
-    right.applyQuaternion(cameraRef.current.quaternion);
-
-    forward.setY(0);
-    right.setY(0);
-
-    if (forward.lengthSq() > 0) forward.normalize();
-    if (right.lengthSq() > 0) right.normalize();
-    if (up.lengthSq() > 0) up.normalize();
-
-    const isForward =
-      keys.current.has("KeyW") ||
-      keys.current.has("ArrowUp") ||
-      keys.current.has("KeyZ");
-    const isBackward =
-      keys.current.has("KeyS") || keys.current.has("ArrowDown");
-    const isLeft =
-      keys.current.has("KeyA") ||
-      keys.current.has("ArrowLeft") ||
-      keys.current.has("KeyQ");
-    const isRight = keys.current.has("KeyD") || keys.current.has("ArrowRight");
-
-    const wishDir = new THREE.Vector3();
-    if (isForward) wishDir.add(forward);
-    if (isBackward) wishDir.sub(forward);
-    if (isLeft) wishDir.sub(right);
-    if (isRight) wishDir.add(right);
-
-    if (wishDir.lengthSq() > 0) {
-      wishDir.normalize().multiplyScalar(WALK_SPEED * dt * 10);
-      velocity.current.x += wishDir.x;
-      velocity.current.z += wishDir.z;
-    }
-
-    const damping = Math.exp(-8 * dt);
-    velocity.current.x *= damping;
-    velocity.current.z *= damping;
-
-    if (wantsJump.current) {
-      velocity.current.y = JUMP_SPEED;
-      wantsJump.current = false;
-    } else {
-      velocity.current.y -= 20 * dt;
-    }
-
-    cameraRef.current.position.copy(
-      cameraRef.current.position
-        .clone()
-        .add(velocity.current.clone().multiplyScalar(dt)),
-    );
-
-    if (cameraRef.current.position.y < 2) {
-      cameraRef.current.position.y = 2;
-      velocity.current.y = 0;
-      velocity.current.x *= 0.9;
-      velocity.current.z *= 0.9;
-    }
-  });
-
-  return null;
-}

src/components/game/GameMap.tsx

@@ -1,21 +1,17 @@
-import { useEffect, useState, useMemo, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 import * as THREE from "three";
 import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
+import { loadMapSceneData } from "@/utils/loadMapSceneData";
 import type { OctreeReadyHandler } from "@/types/3d";
 import type { MapNode } from "@/types/editor";
 
-const MAP_JSON_PATH = "/map.json";
-
 interface GameMapProps {
   onOctreeReady: OctreeReadyHandler;
 }
 
 export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
   const [mapNodes, setMapNodes] = useState<MapNode[]>([]);
-  const [availableModels, setAvailableModels] = useState<Set<string>>(
-    new Set(),
-  );
   const [isLoading, setIsLoading] = useState(true);
   const groupRef = useRef<THREE.Group>(null);
 
@@ -24,32 +20,16 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
   useEffect(() => {
     const loadMap = async () => {
       try {
-        const nodesResponse = await fetch(MAP_JSON_PATH);
+        const sceneData = await loadMapSceneData();
-        if (!nodesResponse.ok) {
+        if (!sceneData) {
           console.warn("map.json not found");
           setIsLoading(false);
           return;
         }
 
-        const nodes: MapNode[] = await nodesResponse.json();
+        setMapNodes(
-        setMapNodes(nodes);
+          sceneData.mapNodes.filter((node) => sceneData.models.has(node.name)),
-
+        );
-        const uniqueModelNames = [...new Set(nodes.map((n) => n.name))];
-        const available = new Set<string>();
-
-        for (const modelName of uniqueModelNames) {
-          try {
-            const modelUrl = `/models/${modelName}/model.gltf`;
-            const modelResponse = await fetch(modelUrl);
-            const contentType = modelResponse.headers.get("content-type") || "";
-            if (contentType.includes("gltf") || contentType.includes("model")) {
-              available.add(modelName);
-            }
-          } catch {
-            /* empty */
-          }
-        }
-        setAvailableModels(available);
       } catch (error) {
         console.error("Error loading map:", error);
       } finally {
@@ -60,17 +40,13 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
     loadMap();
   }, []);
 
-  const nodesToRender = useMemo(() => {
-    return mapNodes.filter((node) => availableModels.has(node.name));
-  }, [mapNodes, availableModels]);
-
   if (isLoading) {
     return <></>;
   }
 
   return (
     <group ref={groupRef}>
-      {nodesToRender.map((node, index) => (
+      {mapNodes.map((node, index) => (
         <ModelInstance key={index} node={node} />
       ))}
     </group>

src/features/editor/components/EditorControls.tsx

@@ -12,12 +12,11 @@ interface EditorControlsProps {
   onRedo: () => void;
   onExportJson: () => void;
   onSaveToServer?: () => void;
-  onResetCamera?: () => void;
   onPlayerMode?: () => void;
   isPlayerMode?: boolean;
 }
 
-export default function EditorControls({
+export function EditorControls({
   transformMode,
   onTransformModeChange,
   selectedNodeIndex,
@@ -29,10 +28,9 @@ export default function EditorControls({
   onRedo,
   onExportJson,
   onSaveToServer,
-  onResetCamera,
   onPlayerMode,
   isPlayerMode,
-}: EditorControlsProps) {
+}: EditorControlsProps): React.JSX.Element {
   const cameraPosition = [0, 50, 100];
 
   return (
@@ -47,30 +45,30 @@ export default function EditorControls({
       <div className="editor-controls-panel">
         <h3>Transform</h3>
 
-        <div className="transform-buttons">
+        <div className="editor-transform-buttons">
           <button
-            className={`transform-button ${transformMode === "translate" ? "active" : ""}`}
+            className={`editor-transform-button ${transformMode === "translate" ? "active" : ""}`}
             onClick={() => onTransformModeChange("translate")}
           >
             ✋ Translate (T)
           </button>
           <button
-            className={`transform-button ${transformMode === "rotate" ? "active" : ""}`}
+            className={`editor-transform-button ${transformMode === "rotate" ? "active" : ""}`}
             onClick={() => onTransformModeChange("rotate")}
           >
             🔄 Rotate (R)
           </button>
           <button
-            className={`transform-button ${transformMode === "scale" ? "active" : ""}`}
+            className={`editor-transform-button ${transformMode === "scale" ? "active" : ""}`}
             onClick={() => onTransformModeChange("scale")}
           >
             📐 Scale (S)
           </button>
         </div>
 
-        <div className="history-buttons">
+        <div className="editor-history-buttons">
           <button
-            className="history-button"
+            className="editor-history-button"
             onClick={onUndo}
             disabled={undoCount === 0}
             style={{ color: undoCount > 0 ? "#00ff00" : "#555" }}
@@ -78,7 +76,7 @@ export default function EditorControls({
             ↩ Undo ({undoCount})
           </button>
           <button
-            className="history-button"
+            className="editor-history-button"
             onClick={onRedo}
             disabled={redoCount === 0}
             style={{ color: redoCount > 0 ? "#00ff00" : "#555" }}
@@ -87,27 +85,21 @@ export default function EditorControls({
           </button>
         </div>
 
-        <button className="export-button" onClick={onExportJson}>
+        <button className="editor-export-button" onClick={onExportJson}>
           💾 Export JSON
         </button>
 
         {onSaveToServer && (
-          <button className="save-button" onClick={onSaveToServer}>
+          <button className="editor-save-button" onClick={onSaveToServer}>
             💾 Save to Server
           </button>
         )}
 
         <h3>View</h3>
 
-        {onResetCamera && (
-          <button className="reset-button" onClick={onResetCamera}>
-            🔄 Reset Camera
-          </button>
-        )}
-
         {onPlayerMode && (
           <button
-            className={`player-button ${isPlayerMode ? "active" : ""}`}
+            className={`editor-player-button ${isPlayerMode ? "active" : ""}`}
             onClick={onPlayerMode}
           >
             🎮 Player Controller
@@ -116,23 +108,23 @@ export default function EditorControls({
 
         <h3>Selection</h3>
         {selectedNodeIndex !== null ? (
-          <div className="selected-info">
+          <div className="editor-selected-info">
-            <div className="selected-name">
+            <div className="editor-selected-name">
               Selected:{" "}
               <strong>
                 {selectedNodeName || `Node ${selectedNodeIndex + 1}`}
               </strong>
             </div>
-            <div className="selected-index">
+            <div className="editor-selected-index">
               Index: {selectedNodeIndex + 1} / {nodesCount}
             </div>
           </div>
         ) : (
-          <div className="no-selection">No object selected</div>
+          <div className="editor-no-selection">No object selected</div>
         )}
 
         <h3>Controls</h3>
-        <div className="controls-help">
+        <div className="editor-controls-help">
           <p>Click - Select object</p>
           <p>T/R/S - Transform mode</p>
           <p>Ctrl+Z - Undo</p>

src/features/editor/controls/FlyController.tsx

@@ -21,7 +21,7 @@ export interface FlyControllerRef {
   controls: OrbitControlsType | null;
 }
 
-const FlyControllerInner = forwardRef<FlyControllerRef, FlyControllerProps>(
+export const FlyController = forwardRef<FlyControllerRef, FlyControllerProps>(
   (
     { speed = 10, verticalSpeed = 5, onPositionChange, disabled = false },
     ref,
@@ -122,4 +122,4 @@ const FlyControllerInner = forwardRef<FlyControllerRef, FlyControllerProps>(
   },
 );
 
-export default FlyControllerInner;
+FlyController.displayName = "FlyController";

src/features/editor/hooks/useEditorHistory.ts

@@ -0,0 +1,161 @@
+import { useCallback, useRef, useState } from "react";
+import type { MapNode, SceneData } from "@/types/editor";
+
+interface ObjectTransform {
+  uuid: string;
+  position: { x: number; y: number; z: number };
+  rotation: { x: number; y: number; z: number };
+  scale: { x: number; y: number; z: number };
+}
+
+class HistoryManager {
+  private history: ObjectTransform[][] = [];
+  private currentIndex = -1;
+
+  constructor(private maxSize = 50) {}
+
+  saveSnapshot(objects: ObjectTransform[]): void {
+    if (this.currentIndex < this.history.length - 1) {
+      this.history = this.history.slice(0, this.currentIndex + 1);
+    }
+
+    this.history.push(objects.map((object) => ({ ...object })));
+    this.currentIndex = this.history.length - 1;
+
+    if (this.history.length > this.maxSize) {
+      this.history.shift();
+      this.currentIndex--;
+    }
+  }
+
+  undo(): ObjectTransform[] | undefined {
+    if (this.currentIndex <= 0) return undefined;
+
+    this.currentIndex--;
+    return this.history[this.currentIndex];
+  }
+
+  redo(): ObjectTransform[] | undefined {
+    if (this.currentIndex >= this.history.length - 1) return undefined;
+
+    this.currentIndex++;
+    return this.history[this.currentIndex];
+  }
+
+  getUndoCount(): number {
+    return this.currentIndex;
+  }
+
+  getRedoCount(): number {
+    return this.history.length - 1 - this.currentIndex;
+  }
+}
+
+interface UseEditorHistoryResult {
+  undoCount: number;
+  redoCount: number;
+  handleUndo: () => void;
+  handleRedo: () => void;
+  handleTransformStart: () => void;
+  handleTransformEnd: () => void;
+}
+
+export function useEditorHistory(
+  sceneData: SceneData | null,
+  setSceneData: React.Dispatch<React.SetStateAction<SceneData | null>>,
+): UseEditorHistoryResult {
+  const [undoCount, setUndoCount] = useState(0);
+  const [redoCount, setRedoCount] = useState(0);
+  const historyManager = useRef(new HistoryManager(50));
+
+  const updateHistoryCounts = useCallback(() => {
+    setUndoCount(historyManager.current.getUndoCount());
+    setRedoCount(historyManager.current.getRedoCount());
+  }, []);
+
+  const applySnapshot = useCallback(
+    (snapshot: ObjectTransform[]): void => {
+      setSceneData((prev) => {
+        if (!prev) return null;
+
+        const mapNodes = prev.mapNodes.map((node, index) => {
+          const transform = snapshot.find(
+            (item) => item.uuid === `node-${index}`,
+          );
+          if (!transform) return node;
+
+          return {
+            ...node,
+            position: [
+              transform.position.x,
+              transform.position.y,
+              transform.position.z,
+            ],
+            rotation: [
+              transform.rotation.x,
+              transform.rotation.y,
+              transform.rotation.z,
+            ],
+            scale: [transform.scale.x, transform.scale.y, transform.scale.z],
+          } satisfies MapNode;
+        });
+
+        return { ...prev, mapNodes };
+      });
+    },
+    [setSceneData],
+  );
+
+  const handleUndo = useCallback(() => {
+    const snapshot = historyManager.current.undo();
+    if (!snapshot) return;
+
+    applySnapshot(snapshot);
+    updateHistoryCounts();
+  }, [applySnapshot, updateHistoryCounts]);
+
+  const handleRedo = useCallback(() => {
+    const snapshot = historyManager.current.redo();
+    if (!snapshot) return;
+
+    applySnapshot(snapshot);
+    updateHistoryCounts();
+  }, [applySnapshot, updateHistoryCounts]);
+
+  const handleTransformStart = useCallback(() => {
+    if (!sceneData) return;
+    historyManager.current.saveSnapshot(createSnapshot(sceneData));
+  }, [sceneData]);
+
+  const handleTransformEnd = useCallback(() => {
+    if (!sceneData) return;
+    historyManager.current.saveSnapshot(createSnapshot(sceneData));
+    updateHistoryCounts();
+  }, [sceneData, updateHistoryCounts]);
+
+  return {
+    undoCount,
+    redoCount,
+    handleUndo,
+    handleRedo,
+    handleTransformStart,
+    handleTransformEnd,
+  };
+}
+
+function createSnapshot(sceneData: SceneData): ObjectTransform[] {
+  return sceneData.mapNodes.map((node, index) => ({
+    uuid: `node-${index}`,
+    position: {
+      x: node.position[0],
+      y: node.position[1],
+      z: node.position[2],
+    },
+    rotation: {
+      x: node.rotation[0],
+      y: node.rotation[1],
+      z: node.rotation[2],
+    },
+    scale: { x: node.scale[0], y: node.scale[1], z: node.scale[2] },
+  }));
+}

src/features/editor/hooks/useEditorSceneData.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from "react";
+import { createSceneDataFromFiles } from "@/features/editor/utils/loadEditorScene";
+import { loadMapSceneData } from "@/utils/loadMapSceneData";
+import type { SceneData } from "@/types/editor";
+
+interface UseEditorSceneDataResult {
+  hasMapJson: boolean;
+  isMapLoading: boolean;
+  sceneData: SceneData | null;
+  setSceneData: React.Dispatch<React.SetStateAction<SceneData | null>>;
+  handleFolderUpload: (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => Promise<void>;
+}
+
+export function useEditorSceneData(): UseEditorSceneDataResult {
+  const [hasMapJson, setHasMapJson] = useState<boolean>(false);
+  const [isMapLoading, setIsMapLoading] = useState<boolean>(true);
+  const [sceneData, setSceneData] = useState<SceneData | null>(null);
+
+  useEffect(() => {
+    const loadScene = async (): Promise<void> => {
+      setIsMapLoading(true);
+
+      try {
+        const loadedSceneData = await loadMapSceneData();
+        setSceneData(loadedSceneData);
+        setHasMapJson(Boolean(loadedSceneData));
+      } catch (error) {
+        console.error("Error loading map data:", error);
+        setHasMapJson(false);
+      } finally {
+        setIsMapLoading(false);
+      }
+    };
+
+    loadScene();
+  }, []);
+
+  const handleFolderUpload = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+      const files = event.target.files;
+      if (!files) return;
+
+      try {
+        const uploadedSceneData = await createSceneDataFromFiles(files);
+        setSceneData(uploadedSceneData);
+        setHasMapJson(true);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Erreur";
+        console.error("Error processing upload:", error);
+        alert(message);
+      }
+    },
+    [],
+  );
+
+  return {
+    hasMapJson,
+    isMapLoading,
+    sceneData,
+    setSceneData,
+    handleFolderUpload,
+  };
+}

src/features/editor/scene/EditorMap.tsx

@@ -1,11 +1,10 @@
 import { useMemo, useRef, useEffect, useState } from "react";
-import { useGLTF } from "@react-three/drei";
+import { Grid, TransformControls, useGLTF } from "@react-three/drei";
-import { Grid, TransformControls } from "@react-three/drei";
 import * as THREE from "three";
 
 import type { SceneData, MapNode, TransformMode } from "@/types/editor";
 
-interface MapViewerProps {
+interface EditorMapProps {
   sceneData: SceneData;
   selectedNodeIndex: number | null;
   onSelectNode: (index: number | null) => void;
@@ -17,7 +16,7 @@ interface MapViewerProps {
   onNodeTransform: (nodeIndex: number, transform: MapNode) => void;
 }
 
-export default function MapViewer({
+export function EditorMap({
   sceneData,
   selectedNodeIndex,
   onSelectNode,
@@ -27,7 +26,7 @@ export default function MapViewer({
   onTransformStart,
   onTransformEnd,
   onNodeTransform,
-}: MapViewerProps): React.JSX.Element {
+}: EditorMapProps): React.JSX.Element {
   const objectsMapRef = useRef<Map<number, THREE.Object3D>>(new Map());
 
   const handleTransformMouseDown = () => {
@@ -93,7 +92,7 @@ export default function MapViewer({
 
           if (modelUrl) {
             return (
-              <ModelNodeWithRef
+              <EditorModelNode
                 key={index}
                 index={index}
                 node={node}
@@ -107,7 +106,7 @@ export default function MapViewer({
             );
           } else {
             return (
-              <FallbackNodeWithRef
+              <EditorFallbackNode
                 key={index}
                 index={index}
                 node={node}
@@ -134,7 +133,7 @@ export default function MapViewer({
   );
 }
 
-function ModelNodeWithRef({
+function EditorModelNode({
   index,
   node,
   modelUrl,
@@ -233,7 +232,7 @@ function ModelNodeWithRef({
   );
 }
 
-function FallbackNodeWithRef({
+function EditorFallbackNode({
   index,
   node,
   isSelected,

src/features/editor/scene/EditorScene.tsx

@@ -1,11 +1,10 @@
 import { useEffect } from "react";
 import { OrbitControls } from "@react-three/drei";
-import EditorCamera from "./EditorCamera";
+import { FlyController } from "@/features/editor/controls/FlyController";
-import FlyController from "./FlyController";
+import { EditorMap } from "@/features/editor/scene/EditorMap";
-import MapViewer from "./MapViewer";
 import type { MapNode, TransformMode, SceneData } from "@/types/editor";
 
-interface EditorViewerProps {
+interface EditorSceneProps {
   sceneData: SceneData;
   selectedNodeIndex: number | null;
   onSelectNode: (index: number | null) => void;
@@ -21,7 +20,7 @@ interface EditorViewerProps {
   isPlayerMode?: boolean;
 }
 
-export default function EditorViewer({
+export function EditorScene({
   sceneData,
   selectedNodeIndex,
   onSelectNode,
@@ -35,7 +34,7 @@ export default function EditorViewer({
   onUndo,
   onRedo,
   isPlayerMode = false,
-}: EditorViewerProps) {
+}: EditorSceneProps): React.JSX.Element {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey || e.metaKey) {
@@ -75,8 +74,6 @@ export default function EditorViewer({
 
   return (
     <>
-      <EditorCamera />
-
       {isPlayerMode ? (
         <FlyController disabled={false} />
       ) : (
@@ -91,7 +88,7 @@ export default function EditorViewer({
         />
       )}
 
-      <MapViewer
+      <EditorMap
         sceneData={sceneData}
         selectedNodeIndex={selectedNodeIndex}
         onSelectNode={onSelectNode}

src/features/editor/utils/loadEditorScene.ts

@@ -0,0 +1,43 @@
+import type { MapNode, SceneData } from "@/types/editor";
+
+const MAP_JSON_PATH = "/map.json";
+
+export async function createSceneDataFromFiles(
+  files: FileList,
+): Promise<SceneData> {
+  const fileMap = new Map<string, File>();
+
+  for (const file of Array.from(files)) {
+    fileMap.set(getProjectRelativePath(file), file);
+  }
+
+  const mapFile = fileMap.get(MAP_JSON_PATH);
+  if (!mapFile) {
+    throw new Error("Fichier map.json manquant à la racine du dossier");
+  }
+
+  const mapNodes: MapNode[] = JSON.parse(await mapFile.text());
+  const models = new Map<string, string>();
+
+  for (const [path, file] of fileMap.entries()) {
+    const modelMatch = path.match(/^\/models\/(.+)\/model\.gltf$/);
+    if (modelMatch?.[1]) {
+      models.set(modelMatch[1], URL.createObjectURL(file));
+    }
+  }
+
+  return { mapNodes, models };
+}
+
+function getProjectRelativePath(file: File): string {
+  const relativePath =
+    (file as File & { webkitRelativePath?: string }).webkitRelativePath ||
+    file.name;
+
+  if (!relativePath.includes("/")) {
+    return `/${relativePath}`;
+  }
+
+  const [, ...pathParts] = relativePath.split("/");
+  return `/${pathParts.join("/")}`;
+}

src/index.css

@@ -136,7 +136,7 @@ canvas {
   font-family: "Courier New", monospace;
 }
 
-.upload-section {
+.editor-upload-section {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 12px;
   padding: 2rem;
@@ -145,13 +145,13 @@ canvas {
   margin-top: 2rem;
 }
 
-.upload-section h3 {
+.editor-upload-section h3 {
   color: #ff6600;
   margin-bottom: 1rem;
   font-size: 1.4rem;
 }
 
-.drop-zone {
+.editor-drop-zone {
   display: block;
   width: 100%;
   padding: 2rem 1rem;
@@ -167,28 +167,28 @@ canvas {
   margin-bottom: 1.5rem;
 }
 
-.drop-zone:hover {
+.editor-drop-zone:hover {
   background: rgba(255, 102, 0, 0.2);
   border-color: #ff8533;
 }
 
-.folder-input {
+.editor-folder-input {
   display: none;
 }
 
-.folder-structure {
+.editor-folder-structure {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   padding: 1rem;
   margin-top: 1rem;
 }
 
-.folder-structure h4 {
+.editor-folder-structure h4 {
   color: #aaa;
   margin-bottom: 0.5rem;
 }
 
-.folder-structure pre {
+.editor-folder-structure pre {
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem;
   border-radius: 6px;
@@ -234,13 +234,13 @@ canvas {
   color: #ff6600;
 }
 
-.transform-buttons {
+.editor-transform-buttons {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.transform-button {
+.editor-transform-button {
   padding: 12px;
   background: #333;
   color: white;
@@ -251,27 +251,27 @@ canvas {
   transition: all 0.2s;
 }
 
-.transform-button.active {
+.editor-transform-button.active {
   background: #ff6600;
   color: black;
   border-color: #ff6600;
 }
 
-.transform-button:hover {
+.editor-transform-button:hover {
   background: #444;
 }
 
-.transform-button.active:hover {
+.editor-transform-button.active:hover {
   background: #ff8533;
 }
 
-.history-buttons {
+.editor-history-buttons {
   display: flex;
   gap: 8px;
   margin-top: 10px;
 }
 
-.history-button {
+.editor-history-button {
   flex: 1;
   padding: 8px;
   background: #333;
@@ -282,12 +282,12 @@ canvas {
   font-size: 12px;
 }
 
-.history-button:disabled {
+.editor-history-button:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.export-button {
+.editor-export-button {
   width: 100%;
   margin-top: 10px;
   padding: 12px;
@@ -300,11 +300,11 @@ canvas {
   font-weight: bold;
 }
 
-.export-button:hover {
+.editor-export-button:hover {
   background: #ff8533;
 }
 
-.save-button {
+.editor-save-button {
   width: 100%;
   margin-top: 10px;
   padding: 12px;
@@ -317,27 +317,11 @@ canvas {
   font-weight: bold;
 }
 
-.save-button:hover {
+.editor-save-button:hover {
   background: #16a34a;
 }
 
-.reset-button {
+.editor-player-button {
-  width: 100%;
-  padding: 12px;
-  background: #444;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-bottom: 8px;
-}
-
-.reset-button:hover {
-  background: #555;
-}
-
-.player-button {
   width: 100%;
   padding: 12px;
   background: #444;
@@ -348,20 +332,20 @@ canvas {
   font-size: 14px;
 }
 
-.player-button.active {
+.editor-player-button.active {
   background: #ff6600;
   color: black;
 }
 
-.player-button:hover {
+.editor-player-button:hover {
   background: #555;
 }
 
-.player-button.active:hover {
+.editor-player-button.active:hover {
   background: #ff8533;
 }
 
-.selected-info {
+.editor-selected-info {
   background: rgba(255, 102, 0, 0.1);
   border: 1px solid #ff6600;
   border-radius: 6px;
@@ -369,17 +353,17 @@ canvas {
   margin-bottom: 15px;
 }
 
-.selected-name {
+.editor-selected-name {
   font-size: 16px;
   margin-bottom: 5px;
 }
 
-.selected-index {
+.editor-selected-index {
   font-size: 14px;
   color: #aaa;
 }
 
-.no-selection {
+.editor-no-selection {
   background: rgba(255, 255, 255, 0.05);
   border: 1px dashed #555;
   border-radius: 6px;
@@ -389,14 +373,14 @@ canvas {
   font-style: italic;
 }
 
-.controls-help {
+.editor-controls-help {
   background: #222;
   border-radius: 6px;
   padding: 15px;
   border: 1px solid #444;
 }
 
-.controls-help p {
+.editor-controls-help p {
   margin: 4px 0;
   font-size: 12px;
   color: #aaa;
@@ -407,11 +391,11 @@ canvas {
     font-size: 1.5rem;
   }
 
-  .upload-section {
+  .editor-upload-section {
     padding: 1.5rem;
   }
 
-  .drop-zone {
+  .editor-drop-zone {
     padding: 1.5rem 1rem;
   }
 }

src/pages/EditorPage.tsx

@@ -1,442 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { Canvas } from "@react-three/fiber";
-import EditorViewer from "@/components/editor/EditorViewer";
-import EditorControls from "@/components/editor/EditorControls";
-import type {
-  TransformMode,
-  MapNode,
-  SceneData,
-  ObjectTransform,
-} from "@/types/editor";
-
-class HistoryManager {
-  private history: ObjectTransform[][] = [];
-  private currentIndex = -1;
-  private maxSize: number;
-
-  constructor(maxSize = 50) {
-    this.maxSize = maxSize;
-  }
-
-  saveSnapshot(objects: ObjectTransform[]) {
-    if (this.currentIndex < this.history.length - 1) {
-      this.history = this.history.slice(0, this.currentIndex + 1);
-    }
-
-    this.history.push(objects.map((obj) => ({ ...obj })));
-
-    this.currentIndex = this.history.length - 1;
-
-    if (this.history.length > this.maxSize) {
-      this.history.shift();
-      this.currentIndex--;
-    }
-  }
-
-  undo(): ObjectTransform[] | undefined {
-    if (this.currentIndex > 0) {
-      this.currentIndex--;
-      return this.history[this.currentIndex];
-    }
-    return undefined;
-  }
-
-  redo(): ObjectTransform[] | undefined {
-    if (this.currentIndex < this.history.length - 1) {
-      this.currentIndex++;
-      return this.history[this.currentIndex];
-    }
-    return undefined;
-  }
-
-  getUndoCount(): number {
-    return this.currentIndex;
-  }
-
-  getRedoCount(): number {
-    return this.history.length - 1 - this.currentIndex;
-  }
-}
-
-export function EditorPage(): React.JSX.Element {
-  const [hasMapJson, setHasMapJson] = useState<boolean>(false);
-  const [isMapLoading, setIsMapLoading] = useState<boolean>(true);
-  const [sceneData, setSceneData] = useState<SceneData | null>(null);
-
-  const [selectedNodeIndex, setSelectedNodeIndex] = useState<number | null>(
-    null,
-  );
-  const [hoveredNodeIndex, setHoveredNodeIndex] = useState<number | null>(null);
-  const [transformMode, setTransformMode] =
-    useState<TransformMode>("translate");
-  const [undoCount, setUndoCount] = useState(0);
-  const [redoCount, setRedoCount] = useState(0);
-  const [isPlayerMode, setIsPlayerMode] = useState(false);
-
-  const historyManager = useRef<HistoryManager>(new HistoryManager(50));
-
-  const handleSelectNode = useCallback((index: number | null) => {
-    setSelectedNodeIndex(index);
-  }, []);
-
-  const handleHoverNode = useCallback((index: number | null) => {
-    setHoveredNodeIndex(index);
-  }, []);
-
-  const handleTransformModeChange = useCallback((mode: TransformMode) => {
-    setTransformMode(mode);
-  }, []);
-
-  const applySnapshot = useCallback(
-    (snapshot: ObjectTransform[]) => {
-      if (!sceneData) return;
-      setSceneData((prev) => {
-        if (!prev) return null;
-        const newMapNodes = prev.mapNodes.map((node, index) => {
-          const transform = snapshot.find((s) => s.uuid === `node-${index}`);
-          if (transform) {
-            return {
-              ...node,
-              position: [
-                transform.position.x,
-                transform.position.y,
-                transform.position.z,
-              ] as [number, number, number],
-              rotation: [
-                transform.rotation.x,
-                transform.rotation.y,
-                transform.rotation.z,
-              ] as [number, number, number],
-              scale: [
-                transform.scale.x,
-                transform.scale.y,
-                transform.scale.z,
-              ] as [number, number, number],
-            };
-          }
-          return node;
-        });
-        return { ...prev, mapNodes: newMapNodes };
-      });
-    },
-    [sceneData],
-  );
-
-  const handleUndo = useCallback(() => {
-    const snapshot = historyManager.current.undo();
-    if (snapshot) {
-      applySnapshot(snapshot);
-      setUndoCount(historyManager.current.getUndoCount());
-      setRedoCount(historyManager.current.getRedoCount());
-    }
-  }, [applySnapshot]);
-
-  const handleRedo = useCallback(() => {
-    const snapshot = historyManager.current.redo();
-    if (snapshot) {
-      applySnapshot(snapshot);
-      setUndoCount(historyManager.current.getUndoCount());
-      setRedoCount(historyManager.current.getRedoCount());
-    }
-  }, [applySnapshot]);
-
-  const handleSaveToServer = useCallback(async () => {
-    if (!sceneData) return;
-    const json = JSON.stringify(sceneData.mapNodes, null, 2);
-
-    try {
-      const response = await fetch("/api/save-map", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: json,
-      });
-
-      if (response.ok) {
-        alert("Map enregistrée avec succès!");
-      } else {
-        alert("Erreur lors de l'enregistrement");
-      }
-    } catch (err) {
-      console.error("Error saving map:", err);
-      alert("Erreur lors de l'enregistrement");
-    }
-  }, [sceneData]);
-
-  const handleExportJson = useCallback(() => {
-    if (!sceneData) return;
-    const json = JSON.stringify(sceneData.mapNodes, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "map.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [sceneData]);
-
-  const handleResetCamera = useCallback(() => {
-    console.log("Reset camera");
-  }, []);
-
-  const handlePlayerMode = useCallback(() => {
-    setIsPlayerMode((prev) => !prev);
-  }, []);
-
-  const createSnapshot = useCallback((): ObjectTransform[] => {
-    if (!sceneData) return [];
-
-    return sceneData.mapNodes.map((node, index) => ({
-      uuid: `node-${index}`,
-      position: {
-        x: node.position[0],
-        y: node.position[1],
-        z: node.position[2],
-      },
-      rotation: {
-        x: node.rotation[0],
-        y: node.rotation[1],
-        z: node.rotation[2],
-      },
-      scale: { x: node.scale[0], y: node.scale[1], z: node.scale[2] },
-    }));
-  }, [sceneData]);
-
-  const handleTransformStart = useCallback(() => {
-    if (!sceneData) return;
-    historyManager.current.saveSnapshot(createSnapshot());
-  }, [createSnapshot, sceneData]);
-
-  const handleTransformEnd = useCallback(() => {
-    if (!sceneData) return;
-    historyManager.current.saveSnapshot(createSnapshot());
-    setUndoCount(historyManager.current.getUndoCount());
-    setRedoCount(historyManager.current.getRedoCount());
-  }, [createSnapshot, sceneData]);
-
-  const handleNodeTransform = useCallback(
-    (nodeIndex: number, updatedNode: MapNode) => {
-      if (!sceneData) return;
-      setSceneData((prev) => {
-        if (!prev) return null;
-        const newMapNodes = [...prev.mapNodes];
-        newMapNodes[nodeIndex] = updatedNode;
-        return { ...prev, mapNodes: newMapNodes };
-      });
-    },
-    [sceneData],
-  );
-
-  useEffect(() => {
-    const loadMapData = async (): Promise<void> => {
-      setIsMapLoading(true);
-
-      try {
-        const response = await fetch("/map.json");
-
-        if (!response.ok) {
-          setHasMapJson(false);
-          setIsMapLoading(false);
-          return;
-        }
-
-        const mapNodes: MapNode[] = await response.json();
-
-        const models = new Map<string, string>();
-
-        const uniqueModelNames = [
-          ...new Set(mapNodes.map((n: MapNode) => n.name)),
-        ];
-        console.log("Unique model names in map:", uniqueModelNames);
-
-        for (const modelName of uniqueModelNames) {
-          try {
-            const modelUrl = `/models/${modelName}/model.gltf`;
-            const modelResponse = await fetch(modelUrl);
-
-            if (modelResponse.ok) {
-              const contentType =
-                modelResponse.headers.get("content-type") || "";
-
-              if (
-                contentType.includes("gltf") ||
-                contentType.includes("json") ||
-                contentType.includes("model")
-              ) {
-                const text = await modelResponse.text();
-                if (
-                  text.includes('"glTF"') ||
-                  text.includes('"scene"') ||
-                  text.includes('"nodes"')
-                ) {
-                  models.set(modelName, modelUrl);
-                } else {
-                  console.warn(
-                    `Invalid GLTF content for ${modelName}:`,
-                    text.substring(0, 100),
-                  );
-                }
-              } else {
-                console.warn(
-                  `Invalid Content-Type for ${modelName}:`,
-                  contentType,
-                );
-              }
-            }
-          } catch {
-            /* empty */
-          }
-        }
-        console.log("Loaded models:", Array.from(models.keys()));
-
-        setSceneData({ mapNodes, models });
-        setHasMapJson(true);
-      } catch (error) {
-        console.error("Error loading map data:", error);
-        setHasMapJson(false);
-      } finally {
-        setIsMapLoading(false);
-      }
-    };
-
-    loadMapData();
-  }, []);
-
-  const handleFolderUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ): Promise<void> => {
-    const files = event.target.files;
-    if (!files) return;
-
-    const fileMap = new Map<string, File>();
-    for (const file of Array.from(files)) {
-      const webkitRelativePath =
-        (file as File & { webkitRelativePath?: string }).webkitRelativePath ||
-        "/" + file.name;
-      fileMap.set(webkitRelativePath, file);
-    }
-
-    const mapFile = fileMap.get("/map.json");
-    if (!mapFile) {
-      alert("Fichier map.json manquant à la racine du dossier");
-      return;
-    }
-
-    try {
-      const mapText = await mapFile.text();
-      const mapNodes = JSON.parse(mapText);
-
-      const models = new Map<string, string>();
-
-      for (const [path, file] of fileMap.entries()) {
-        const modelMatch = path && path.match(/^\/models\/(.+)\/model\.gltf$/);
-        if (modelMatch && modelMatch[1]) {
-          const modelName = modelMatch[1];
-          const blobUrl = URL.createObjectURL(file);
-          models.set(modelName, blobUrl);
-        }
-      }
-
-      setSceneData({ mapNodes, models });
-      setHasMapJson(true);
-    } catch (error) {
-      console.error("Error processing upload:", error);
-      alert("Erreur lors du traitement du dossier");
-    }
-  };
-
-  if (isMapLoading) {
-    return (
-      <div className="editor-container">
-        <div className="editor-loading">
-          <h2>Chargement de l'éditeur...</h2>
-          <p>Vérification de map.json dans public/</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!hasMapJson) {
-    return (
-      <div className="editor-container">
-        <div className="editor-error">
-          <h2>Erreur : map.json introuvable</h2>
-          <p>
-            Le fichier map.json est requis dans le dossier <code>public/</code>.
-          </p>
-
-          <div className="upload-section">
-            <h3>Télécharger un dossier contenant map.json</h3>
-
-            <label className="drop-zone">
-              <input
-                type="file"
-                className="folder-input"
-                onChange={handleFolderUpload}
-              />
-              Choisir un dossier contenant map.json
-            </label>
-
-            <div className="folder-structure">
-              <h4>Structure requise :</h4>
-              <pre>
-                public/ ├── <strong>map.json</strong> (à la racine) └── models/
-                ├── arbre/ │ └── model.glb ├── building/ │ └── model.glb └── ...
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="editor-container">
-      <Canvas
-        camera={{ position: [0, 50, 100], fov: 50 }}
-        style={{ width: "100%", height: "100%" }}
-        onCreated={({ gl }) => {
-          gl.setClearColor("#1e293b");
-        }}
-      >
-        <EditorViewer
-          sceneData={sceneData!}
-          selectedNodeIndex={selectedNodeIndex}
-          onSelectNode={handleSelectNode}
-          hoveredNodeIndex={hoveredNodeIndex}
-          onHoverNode={handleHoverNode}
-          transformMode={transformMode}
-          onTransformModeChange={handleTransformModeChange}
-          onTransformStart={handleTransformStart}
-          onTransformEnd={handleTransformEnd}
-          onNodeTransform={handleNodeTransform}
-          onUndo={handleUndo}
-          onRedo={handleRedo}
-          isPlayerMode={isPlayerMode}
-        />
-      </Canvas>
-
-      {sceneData && (
-        <EditorControls
-          transformMode={transformMode}
-          onTransformModeChange={handleTransformModeChange}
-          selectedNodeIndex={selectedNodeIndex}
-          nodesCount={sceneData.mapNodes.length}
-          selectedNodeName={
-            selectedNodeIndex !== null && sceneData.mapNodes[selectedNodeIndex]
-              ? sceneData.mapNodes[selectedNodeIndex].name || null
-              : null
-          }
-          undoCount={undoCount}
-          redoCount={redoCount}
-          onUndo={handleUndo}
-          onRedo={handleRedo}
-          onExportJson={handleExportJson}
-          onSaveToServer={handleSaveToServer}
-          onResetCamera={handleResetCamera}
-          onPlayerMode={handlePlayerMode}
-          isPlayerMode={isPlayerMode}
-        />
-      )}
-    </div>
-  );
-}

src/pages/editor/EditorPage.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useState } from "react";
+import { Canvas } from "@react-three/fiber";
+import { EditorControls } from "@/features/editor/components/EditorControls";
+import { useEditorHistory } from "@/features/editor/hooks/useEditorHistory";
+import { useEditorSceneData } from "@/features/editor/hooks/useEditorSceneData";
+import { EditorScene } from "@/features/editor/scene/EditorScene";
+import type { MapNode, TransformMode } from "@/types/editor";
+
+export function EditorPage(): React.JSX.Element {
+  const {
+    hasMapJson,
+    isMapLoading,
+    sceneData,
+    setSceneData,
+    handleFolderUpload,
+  } = useEditorSceneData();
+
+  const [selectedNodeIndex, setSelectedNodeIndex] = useState<number | null>(
+    null,
+  );
+  const [hoveredNodeIndex, setHoveredNodeIndex] = useState<number | null>(null);
+  const [transformMode, setTransformMode] =
+    useState<TransformMode>("translate");
+  const [isPlayerMode, setIsPlayerMode] = useState(false);
+
+  const {
+    undoCount,
+    redoCount,
+    handleUndo,
+    handleRedo,
+    handleTransformStart,
+    handleTransformEnd,
+  } = useEditorHistory(sceneData, setSceneData);
+
+  const handleSelectNode = useCallback((index: number | null) => {
+    setSelectedNodeIndex(index);
+  }, []);
+
+  const handleHoverNode = useCallback((index: number | null) => {
+    setHoveredNodeIndex(index);
+  }, []);
+
+  const handleTransformModeChange = useCallback((mode: TransformMode) => {
+    setTransformMode(mode);
+  }, []);
+
+  const handleSaveToServer = useCallback(async () => {
+    if (!sceneData) return;
+    const json = JSON.stringify(sceneData.mapNodes, null, 2);
+
+    try {
+      const response = await fetch("/api/save-map", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: json,
+      });
+
+      if (response.ok) {
+        alert("Map enregistrée avec succès!");
+      } else {
+        alert("Erreur lors de l'enregistrement");
+      }
+    } catch (err) {
+      console.error("Error saving map:", err);
+      alert("Erreur lors de l'enregistrement");
+    }
+  }, [sceneData]);
+
+  const handleExportJson = useCallback(() => {
+    if (!sceneData) return;
+    const json = JSON.stringify(sceneData.mapNodes, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "map.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [sceneData]);
+
+  const handlePlayerMode = useCallback(() => {
+    setIsPlayerMode((prev) => !prev);
+  }, []);
+
+  const handleNodeTransform = useCallback(
+    (nodeIndex: number, updatedNode: MapNode) => {
+      setSceneData((prev) => {
+        if (!prev) return null;
+        const newMapNodes = [...prev.mapNodes];
+        newMapNodes[nodeIndex] = updatedNode;
+        return { ...prev, mapNodes: newMapNodes };
+      });
+    },
+    [setSceneData],
+  );
+
+  if (isMapLoading) {
+    return (
+      <div className="editor-container">
+        <div className="editor-loading">
+          <h2>Chargement de l'éditeur...</h2>
+          <p>Vérification de map.json dans public/</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!hasMapJson) {
+    return (
+      <div className="editor-container">
+        <div className="editor-error">
+          <h2>Erreur : map.json introuvable</h2>
+          <p>
+            Le fichier map.json est requis dans le dossier <code>public/</code>.
+          </p>
+
+          <div className="editor-upload-section">
+            <h3>Télécharger un dossier contenant map.json</h3>
+
+            <label className="editor-drop-zone">
+              <input
+                type="file"
+                className="editor-folder-input"
+                onChange={handleFolderUpload}
+                multiple
+                {...{ webkitdirectory: "" }}
+              />
+              Choisir un dossier contenant map.json
+            </label>
+
+            <div className="editor-folder-structure">
+              <h4>Structure requise :</h4>
+              <pre>
+                public/ ├── <strong>map.json</strong> (à la racine) └── models/
+                ├── arbre/ │ └── model.gltf ├── building/ │ └── model.gltf └──
+                ...
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="editor-container">
+      <Canvas
+        camera={{ position: [0, 50, 100], fov: 50 }}
+        style={{ width: "100%", height: "100%" }}
+        onCreated={({ gl }) => {
+          gl.setClearColor("#1e293b");
+        }}
+      >
+        <EditorScene
+          sceneData={sceneData!}
+          selectedNodeIndex={selectedNodeIndex}
+          onSelectNode={handleSelectNode}
+          hoveredNodeIndex={hoveredNodeIndex}
+          onHoverNode={handleHoverNode}
+          transformMode={transformMode}
+          onTransformModeChange={handleTransformModeChange}
+          onTransformStart={handleTransformStart}
+          onTransformEnd={handleTransformEnd}
+          onNodeTransform={handleNodeTransform}
+          onUndo={handleUndo}
+          onRedo={handleRedo}
+          isPlayerMode={isPlayerMode}
+        />
+      </Canvas>
+
+      {sceneData && (
+        <EditorControls
+          transformMode={transformMode}
+          onTransformModeChange={handleTransformModeChange}
+          selectedNodeIndex={selectedNodeIndex}
+          nodesCount={sceneData.mapNodes.length}
+          selectedNodeName={
+            selectedNodeIndex !== null && sceneData.mapNodes[selectedNodeIndex]
+              ? sceneData.mapNodes[selectedNodeIndex].name || null
+              : null
+          }
+          undoCount={undoCount}
+          redoCount={redoCount}
+          onUndo={handleUndo}
+          onRedo={handleRedo}
+          onExportJson={handleExportJson}
+          onSaveToServer={handleSaveToServer}
+          onPlayerMode={handlePlayerMode}
+          isPlayerMode={isPlayerMode}
+        />
+      )}
+    </div>
+  );
+}

src/types/editor.ts

@@ -12,14 +12,3 @@ export interface SceneData {
 }
 
 export type TransformMode = "translate" | "rotate" | "scale";
-
-export interface ObjectTransform {
-  uuid: string;
-  position: { x: number; y: number; z: number };
-  rotation: { x: number; y: number; z: number };
-  scale: { x: number; y: number; z: number };
-}
-
-export interface SceneSnapshot {
-  objects: ObjectTransform[];
-}

src/utils/loadMapSceneData.ts

@@ -0,0 +1,53 @@
+import type { MapNode, SceneData } from "@/types/editor";
+
+const MAP_JSON_PATH = "/map.json";
+const MODEL_FILE_NAME = "model.gltf";
+
+export async function loadMapSceneData(): Promise<SceneData | null> {
+  const response = await fetch(MAP_JSON_PATH);
+
+  if (!response.ok) {
+    return null;
+  }
+
+  const mapNodes: MapNode[] = await response.json();
+  return createSceneData(mapNodes);
+}
+
+export async function createSceneData(mapNodes: MapNode[]): Promise<SceneData> {
+  const models = await loadMapModelUrls(mapNodes);
+  return { mapNodes, models };
+}
+
+async function loadMapModelUrls(
+  mapNodes: MapNode[],
+): Promise<Map<string, string>> {
+  const models = new Map<string, string>();
+  const uniqueModelNames = [...new Set(mapNodes.map((node) => node.name))];
+
+  for (const modelName of uniqueModelNames) {
+    const modelUrl = `/models/${modelName}/${MODEL_FILE_NAME}`;
+
+    try {
+      const modelResponse = await fetch(modelUrl);
+      if (!modelResponse.ok) continue;
+
+      const text = await modelResponse.text();
+      if (isGltfContent(text)) {
+        models.set(modelName, modelUrl);
+      }
+    } catch {
+      /* Missing models are expected while editing incomplete maps. */
+    }
+  }
+
+  return models;
+}
+
+function isGltfContent(text: string): boolean {
+  return (
+    text.includes('"glTF"') ||
+    text.includes('"scene"') ||
+    text.includes('"nodes"')
+  );
+}