Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,369 @@
|
||||
# VSCode Layout con DockView
|
||||
|
||||
Una implementación completa de un sistema de layout similar a Visual Studio Code, con zonas redimensionables y capacidad de mover paneles de DockView entre diferentes áreas de la aplicación.
|
||||
|
||||
## 🎯 Características Principales
|
||||
|
||||
### ✅ **Zonas Redimensionables**
|
||||
- **Navbar**: Barra superior fija
|
||||
- **Sidebar**: Panel lateral izquierdo redimensionable
|
||||
- **Asidebar**: Panel lateral derecho redimensionable
|
||||
- **Bottom**: Panel inferior redimensionable
|
||||
- **Center**: Área central principal
|
||||
|
||||
### ✅ **Sistema de Drag & Drop**
|
||||
- Arrastra paneles entre cualquier zona
|
||||
- Indicadores visuales durante el arrastre
|
||||
- Soporte completo para pestañas de DockView
|
||||
|
||||
### ✅ **Gestión de Estado**
|
||||
- Persistencia automática en localStorage
|
||||
- Exportar/importar configuraciones de layout
|
||||
- Sistema de versionado para compatibilidad
|
||||
|
||||
### ✅ **Integración con DockView**
|
||||
- Cada zona puede contener múltiples paneles de DockView
|
||||
- Comunicación entre paneles preservada
|
||||
- Soporte para todos los componentes de dock existentes
|
||||
|
||||
## 🚀 Uso Rápido
|
||||
|
||||
```typescript
|
||||
import { VSCodeDockView } from '@/components/VSCodeLayout';
|
||||
|
||||
function App() {
|
||||
return <VSCodeDockView />;
|
||||
}
|
||||
```
|
||||
|
||||
## 📁 Arquitectura del Sistema
|
||||
|
||||
### Componentes Principales
|
||||
|
||||
```
|
||||
VSCodeLayout/
|
||||
├── VSCodeLayout.tsx # Layout base con zonas redimensionables
|
||||
├── ZoneManager.tsx # Gestión de paneles y zonas
|
||||
├── ZoneDockView.tsx # Integración DockView por zona
|
||||
├── VSCodeDockView.tsx # Componente principal completo
|
||||
├── LayoutPersistence.tsx # Persistencia y exportación
|
||||
├── VSCodeLayout.css # Estilos del layout
|
||||
└── index.ts # Exportaciones
|
||||
```
|
||||
|
||||
### Flujo de Datos
|
||||
|
||||
```
|
||||
VSCodeDockView (Provider)
|
||||
↓
|
||||
ZoneManagerContext (Estado global)
|
||||
↓
|
||||
VSCodeLayout (UI Layout)
|
||||
↓
|
||||
ZoneDockView (DockView por zona)
|
||||
↓
|
||||
Componentes de Dock individuales
|
||||
```
|
||||
|
||||
## 🎨 Personalización
|
||||
|
||||
### Configurar Zonas Iniciales
|
||||
|
||||
```typescript
|
||||
<VSCodeLayout
|
||||
navbar={<CustomNavbar />}
|
||||
sidebar={
|
||||
<SidebarDockView
|
||||
components={dockComponents}
|
||||
initialPanels={[
|
||||
{ id: 'explorer', component: 'fileExplorer', title: 'Explorador' }
|
||||
]}
|
||||
/>
|
||||
}
|
||||
onLayoutChange={(layout) => console.log('Layout changed:', layout)}
|
||||
>
|
||||
<CenterArea />
|
||||
</VSCodeLayout>
|
||||
```
|
||||
|
||||
### Agregar Componentes Personalizados
|
||||
|
||||
```typescript
|
||||
const customComponents = {
|
||||
myDock: MyCustomDockComponent,
|
||||
tasks: TaskDock,
|
||||
properties: PropertiesDock,
|
||||
};
|
||||
|
||||
<ZoneDockView
|
||||
zone="sidebar"
|
||||
components={customComponents}
|
||||
initialPanels={[
|
||||
{ id: 'my-panel', component: 'myDock', title: 'Mi Panel' }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### Gestión Programática de Paneles
|
||||
|
||||
```typescript
|
||||
function MyComponent() {
|
||||
const { movePanel, addPanel, removePanel } = useZoneManager();
|
||||
|
||||
const handleMovePanel = () => {
|
||||
movePanel('panel-id', 'sidebar', 'center');
|
||||
};
|
||||
|
||||
const handleAddPanel = () => {
|
||||
addPanel('bottom', {
|
||||
id: 'new-panel',
|
||||
title: 'Nuevo Panel',
|
||||
component: MyPanelComponent,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button onClick={handleMovePanel}>
|
||||
Mover Panel
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 Configuración Avanzada
|
||||
|
||||
### Persistencia Personalizada
|
||||
|
||||
```typescript
|
||||
import { useLayoutPersistence } from '@/components/VSCodeLayout';
|
||||
|
||||
function LayoutManager() {
|
||||
const { saveLayout, loadLayout, clearLayout } = useLayoutPersistence();
|
||||
|
||||
useEffect(() => {
|
||||
const savedLayout = loadLayout();
|
||||
if (savedLayout) {
|
||||
// Aplicar layout guardado
|
||||
applyLayout(savedLayout);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<Button onClick={() => saveLayout(currentLayout, currentPanels)}>
|
||||
Guardar Layout
|
||||
</Button>
|
||||
<Button onClick={clearLayout}>
|
||||
Limpiar Layout
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Auto-guardado
|
||||
|
||||
```typescript
|
||||
import { useAutoSaveLayout } from '@/components/VSCodeLayout';
|
||||
|
||||
function AutoSaveExample() {
|
||||
const [layout, setLayout] = useState(defaultLayout);
|
||||
const [panels, setPanels] = useState(defaultPanels);
|
||||
|
||||
// Auto-guardar cada 2 segundos después de cambios
|
||||
useAutoSaveLayout(layout, panels, 2000);
|
||||
|
||||
return <VSCodeLayout layout={layout} onLayoutChange={setLayout} />;
|
||||
}
|
||||
```
|
||||
|
||||
## 🎮 Controles de Usuario
|
||||
|
||||
### Atajos de Teclado (Futuro)
|
||||
- `Ctrl+Shift+E`: Toggle sidebar
|
||||
- `Ctrl+Shift+F`: Toggle asidebar
|
||||
- `Ctrl+J`: Toggle bottom panel
|
||||
- `Ctrl+Shift+P`: Abrir panel de comandos
|
||||
|
||||
### Gestos del Mouse
|
||||
- **Arrastrar bordes**: Redimensionar zonas
|
||||
- **Arrastrar pestañas**: Mover paneles entre zonas
|
||||
- **Doble click bordes**: Auto-ajustar tamaño
|
||||
- **Click derecho pestañas**: Menú contextual
|
||||
|
||||
## 🔍 API de Zonas
|
||||
|
||||
### ZoneManager Context
|
||||
|
||||
```typescript
|
||||
interface ZoneManagerContextType {
|
||||
zones: Record<ZoneType, Zone>;
|
||||
movePanel: (panelId: string, fromZone: ZoneType, toZone: ZoneType) => void;
|
||||
addPanel: (zone: ZoneType, panel: Panel) => void;
|
||||
removePanel: (zone: ZoneType, panelId: string) => void;
|
||||
setActivePanel: (zone: ZoneType, panelId: string) => void;
|
||||
toggleZone: (zone: ZoneType) => void;
|
||||
}
|
||||
```
|
||||
|
||||
### Panel Interface
|
||||
|
||||
```typescript
|
||||
interface Panel {
|
||||
id: string;
|
||||
title: string;
|
||||
component: React.ComponentType<any>;
|
||||
props?: any;
|
||||
closable?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
### Zone Interface
|
||||
|
||||
```typescript
|
||||
interface Zone {
|
||||
id: string;
|
||||
name: string;
|
||||
panels: Panel[];
|
||||
activePanel?: string;
|
||||
visible: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 Temas y Estilos
|
||||
|
||||
### Variables CSS Disponibles
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vscode-navbar-height: 40px;
|
||||
--vscode-sidebar-width: 250px;
|
||||
--vscode-asidebar-width: 300px;
|
||||
--vscode-bottom-height: 200px;
|
||||
|
||||
--vscode-border-color: #d0d7de;
|
||||
--vscode-bg-primary: #ffffff;
|
||||
--vscode-bg-secondary: #f6f8fa;
|
||||
--vscode-text-primary: #24292f;
|
||||
--vscode-text-secondary: #656d76;
|
||||
|
||||
--vscode-resize-handle-color: #0078d4;
|
||||
--vscode-resize-handle-hover: #106ebe;
|
||||
}
|
||||
```
|
||||
|
||||
### Clases CSS Personalizables
|
||||
|
||||
```css
|
||||
.vscode-layout { /* Layout principal */ }
|
||||
.layout-zone { /* Cualquier zona */ }
|
||||
.layout-zone.navbar { /* Navbar específica */ }
|
||||
.layout-zone.sidebar { /* Sidebar específica */ }
|
||||
.resize-handle { /* Manejadores de redimensión */ }
|
||||
.zone-content { /* Contenido de zona */ }
|
||||
.zone-tabs { /* Pestañas de zona */ }
|
||||
.drop-zone-active { /* Zona con drop activo */ }
|
||||
```
|
||||
|
||||
## 🚨 Troubleshooting
|
||||
|
||||
### Problemas Comunes
|
||||
|
||||
1. **Paneles no se mueven entre zonas**
|
||||
```typescript
|
||||
// Verificar que el componente esté registrado
|
||||
const components = {
|
||||
myComponent: MyComponent, // ✅ Registrado
|
||||
};
|
||||
```
|
||||
|
||||
2. **Layout no se guarda**
|
||||
```typescript
|
||||
// Verificar localStorage disponible
|
||||
if (typeof Storage !== "undefined") {
|
||||
// localStorage disponible
|
||||
}
|
||||
```
|
||||
|
||||
3. **Redimensión no funciona**
|
||||
```css
|
||||
/* Verificar que no haya CSS conflictivo */
|
||||
.vscode-layout {
|
||||
position: relative; /* Requerido */
|
||||
overflow: hidden; /* Requerido */
|
||||
}
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
```typescript
|
||||
// Habilitar logs de debug
|
||||
localStorage.setItem('vscode-layout-debug', 'true');
|
||||
|
||||
// En el código
|
||||
const debug = localStorage.getItem('vscode-layout-debug') === 'true';
|
||||
if (debug) {
|
||||
console.log('Zone state:', zones);
|
||||
console.log('Layout state:', layout);
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Métricas y Performance
|
||||
|
||||
### Optimizaciones Implementadas
|
||||
- **Debounce en redimensión**: Evita re-renders excesivos
|
||||
- **Lazy loading**: Paneles se cargan cuando son visibles
|
||||
- **Memoización**: Componentes memorizados para mejor performance
|
||||
- **Virtual scrolling**: En listas largas de paneles
|
||||
|
||||
### Monitoreo de Performance
|
||||
|
||||
```typescript
|
||||
// Medir tiempo de operaciones
|
||||
console.time('panel-move');
|
||||
movePanel('panel-1', 'sidebar', 'center');
|
||||
console.timeEnd('panel-move');
|
||||
|
||||
// Memory usage
|
||||
console.log('Memory:', (performance as any).memory);
|
||||
```
|
||||
|
||||
## 🔮 Roadmap
|
||||
|
||||
### Próximas Características
|
||||
- [ ] Múltiples instancias de DockView por zona
|
||||
- [ ] Atajos de teclado configurables
|
||||
- [ ] Temas personalizables por zona
|
||||
- [ ] Animaciones de transición
|
||||
- [ ] Modo fullscreen para paneles
|
||||
- [ ] Búsqueda global de paneles
|
||||
- [ ] Workspaces personalizados
|
||||
- [ ] Integración con React Router
|
||||
- [ ] API REST para layouts remotos
|
||||
- [ ] Colaboración en tiempo real
|
||||
|
||||
### Mejoras Técnicas
|
||||
- [ ] Testing completo (Jest + RTL)
|
||||
- [ ] Storybook para componentes
|
||||
- [ ] Performance profiling
|
||||
- [ ] A11y compliance
|
||||
- [ ] Mobile responsiveness
|
||||
- [ ] PWA support
|
||||
|
||||
## 📄 Licencia
|
||||
|
||||
Este proyecto usa la misma licencia que el proyecto principal.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contribuir
|
||||
|
||||
Para agregar nuevas funcionalidades al VSCode Layout:
|
||||
|
||||
1. **Nuevas Zonas**: Extender `ZoneType` y `ZoneManager`
|
||||
2. **Nuevos Paneles**: Crear componente y registrar en `components`
|
||||
3. **Nuevas Características**: Seguir la arquitectura de contexto/hooks
|
||||
4. **Estilos**: Usar variables CSS para consistencia
|
||||
|
||||
¡El VSCode Layout está diseñado para ser extensible y modular!
|
||||
Reference in New Issue
Block a user