pruebas_dockview/DOCKVIEW_README.md

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:

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:

.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

// 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

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:

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:

// 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

// 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

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

📚 Recursos

• DockView Documentation
• Mantine Documentation
• React TypeScript

🤝 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