Clic en +/-: expandir/colapsar | Doble-clic: info | Arrastrar nodo: mover | Paneo: arrastrar fondo
Título
Descripción
Sistema Solar
Categorías
Planetas
Cuerpos Menores
Lunas
💡 Prompt Maestro (v6.5)
[MODO] Actúo como un diseñador gráfico e interactivo experto, mejorando un mapa mental HTML/CSS/JS (v6.4).
[TAREA] Solucionar la "inestabilidad", el "brinco" al pasar el mouse y el "caos" al arrastrar nodos.
[SUPERPODERES v6.5 - ESTABILIDAD TOTAL]
1. **SOLUCIÓN AL "BRINCO" (Estabilidad CSS/JS):**
* Se diagnosticó el conflicto: CSS (`:hover`) aplicaba `transform: scale` mientras JS (`renderNode`) aplicaba `transform: translate`.
* **Solución:** Se reescribió la lógica.
* CSS (`.node`): Ya NO usa `transform: translate()`.
* CSS (`.node:hover`): Usa `transform: scale(1.1)`.
* JS (`renderNode`): Ahora calcula el centro del nodo manualmente (`data.x - nodeSize.width / 2`) y lo posiciona usando `left` y `top`.
* **Resultado:** No hay conflicto. El "brinco" desaparece.
2. **SOLUCIÓN AL "CAOS" (Arrastre de Grupo):**
* Se diagnosticó el problema: Arrastrar un nodo "padre" no movía a sus "hijos", rompiendo las líneas.
* **Solución:** Se creó una nueva función recursiva `moveNodeAndChildren(nodeData, dx, dy)`.
* En el evento `mousemove`, en lugar de mover un solo nodo, se llama a esta función.
* Calcula el `deltaX` y `deltaY` (cuánto se movió) y aplica ese mismo delta al nodo arrastrado Y a todos sus descendientes (hijos, nietos, etc.).
* **Resultado:** Arrastrar "Planetas Exteriores" ahora mueve a Júpiter, Saturno y todas sus lunas como un grupo cohesivo.
3. **LÓGICA DE MEMORIA (Estabilidad de Colapso):**
* Se mantuvo la lógica de "memoria" (v6.3). Al expandir, los nodos que el usuario arrastró recuerdan su posición personalizada (`child.x`) en lugar de saltar a su órbita original.
4. **REFINAMIENTO DE INTERACCIÓN:**
* El `expander` (`+/-`) sigue controlando el colapso.
* El `dblclick` sigue controlando la info.
* El `drag` (arrastre) y el `pan` (paneo) coexisten limpiamente.