# DockView Implementation con Mantine

Esta implementación integra **DockView** con **Mantine** para crear una interfaz de usuario modular y flexible con paneles que se pueden mover, redimensionar e interactuar entre ellos.

## 🚀 Características

- **Paneles Modulares**: Docks independientes que se pueden mover y reorganizar
- **Comunicación Entre Docks**: Los docks pueden intercambiar información entre sí
- **Interfaz Responsive**: Se adapta a diferentes tamaños de pantalla
- **Temas Personalizados**: Integración completa con el sistema de temas de Mantine
- **TypeScript**: Tipado completo para mayor seguridad

## 📁 Estructura de Archivos

```
src/
├── components/
│   ├── DockViewMain.tsx          # Componente principal de DockView
│   ├── dockview.css              # Estilos personalizados
│   └── docks/                    # Componentes de dock individuales
│       ├── TaskDock.tsx          # Gestor de tareas
│       ├── PropertiesDock.tsx    # Panel de propiedades
│       ├── ConsoleDock.tsx       # Consola de logs
│       └── FileExplorerDock.tsx  # Explorador de archivos
└── pages/
    └── DockView.page.tsx         # Página dedicada a DockView
```

## 🎯 Docks Disponibles

### 1. TaskDock (Gestor de Tareas)
- Crear, editar y eliminar tareas
- Marcar tareas como completadas
- Notificaciones a otros docks cuando cambian las tareas

### 2. PropertiesDock (Panel de Propiedades)
- Editar propiedades de elementos seleccionados
- Controles de color, opacidad, tamaño
- Vista previa en tiempo real

### 3. ConsoleDock (Consola)
- Mostrar logs del sistema
- Exportar logs a archivo
- Filtrado por tipo (info, warning, error, success)

### 4. FileExplorerDock (Explorador de Archivos)
- Navegación por estructura de archivos
- Crear/eliminar archivos y carpetas
- Notificar selección de archivos a otros docks

## 🔄 Comunicación Entre Docks

Los docks se comunican a través de un sistema de contexto compartido:

```typescript
interface DockCommunicationContext {
  selectedFile: any;
  properties: any;
  tasks: any[];
  logs: any[];
  updateSelectedFile: (file: any) => void;
  updateProperties: (props: any) => void;
  updateTasks: (tasks: any[]) => void;
  addLog: (log: any) => void;
}
```

### Ejemplo de Comunicación
Cuando seleccionas un archivo en el FileExplorerDock:
1. Se actualiza `selectedFile` en el contexto
2. Se envía un log a ConsoleDock
3. PropertiesDock puede mostrar propiedades del archivo seleccionado

## 🎨 Personalización

### Temas
Los estilos están definidos en `dockview.css` y siguen las variables CSS de Mantine:

```css
.dockview-theme-light {
  --dv-activecontainer-border: #228be6;
  --dv-tab-active-color: #228be6;
  --dv-tab-active-border: #228be6;
}
```

### Agregar Nuevos Docks

1. Crear el componente del dock en `src/components/docks/`
2. Crear un wrapper component para la integración
3. Registrar en el objeto `components` de `DockViewMain.tsx`
4. Agregar al layout inicial en `onReady`

```typescript
// Nuevo dock
const MyCustomDockWrapper = (props: IDockviewPanelProps) => {
  return <MyCustomDock onDataChange={handleDataChange} />;
};

// Registrar
const components = {
  tasks: TaskDockWrapper,
  properties: PropertiesDockWrapper,
  console: ConsoleDockWrapper,
  fileExplorer: FileExplorerDockWrapper,
  myCustom: MyCustomDockWrapper, // Nuevo dock
};
```

## 🛠️ Uso

### Iniciar la aplicación
```bash
npm run dev
```

### Navegar a DockView
- Visita `http://localhost:5174/`
- Haz clic en "Abrir DockView"
- O navega directamente a `http://localhost:5174/dockview`

### Interacciones Disponibles
- **Arrastrar pestañas**: Reorganiza los paneles
- **Redimensionar**: Arrastra los separadores entre paneles
- **Cerrar paneles**: Usa el botón X en las pestañas
- **Crear nuevos paneles**: (Funcionalidad extendible)

## 📝 Configuración del Layout

El layout inicial se configura en el método `onReady`:

```typescript
const onReady = (event: DockviewReadyEvent) => {
  // Panel principal (izquierda)
  const panel1 = event.api.addPanel({
    id: 'file-explorer',
    component: 'fileExplorer',
    title: 'Explorador',
  });

  // Panel a la derecha
  const panel2 = event.api.addPanel({
    id: 'properties',
    component: 'properties',
    title: 'Propiedades',
    position: { direction: 'right', referencePanel: panel1 },
  });

  // Más paneles...
};
```

## 🔧 Configuración Avanzada

### Estado Persistente
Para guardar el estado del layout entre sesiones:

```typescript
// Guardar estado
const layoutState = api.toJSON();
localStorage.setItem('dockview-layout', JSON.stringify(layoutState));

// Restaurar estado
const savedState = localStorage.getItem('dockview-layout');
if (savedState) {
  api.fromJSON(JSON.parse(savedState));
}
```

### Eventos Personalizados
```typescript
// Escuchar cambios en el layout
api.onDidLayoutChange(() => {
  console.log('Layout changed');
});

// Escuchar cuando se activa un panel
api.onDidActiveGroupChange((event) => {
  console.log('Active group changed:', event.group);
});
```

## 🐛 Solución de Problemas

### Problemas Comunes

1. **Paneles no se muestran correctamente**
   - Verifica que el componente esté registrado en `components`
   - Asegúrate de que el wrapper component retorne JSX válido

2. **Comunicación entre docks no funciona**
   - Verifica que los callbacks estén pasándose correctamente
   - Revisa que el contexto se actualice en `useEffect`

3. **Estilos no se aplican**
   - Asegúrate de importar `dockview.css`
   - Verifica que las variables CSS estén definidas

### Debugging
```typescript
// Agregar logs para debugging
console.log('Dock state:', dockCommunication);
console.log('API groups:', api.groups);
```

## 📚 Recursos

- [DockView Documentation](https://dockview.dev/)
- [Mantine Documentation](https://mantine.dev/)
- [React TypeScript](https://react-typescript-cheatsheet.netlify.app/)

## 🤝 Contribuir

Para agregar nuevas funcionalidades:
1. Crea un nuevo dock en `src/components/docks/`
2. Implementa la comunicación necesaria
3. Agrega documentación
4. Prueba la integración con otros docks