Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user