pruebas_dockview/VSCODE_LAYOUT_README.md

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

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

<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

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

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

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

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

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

interface Panel {
  id: string;
  title: string;
  component: React.ComponentType<any>;
  props?: any;
  closable?: boolean;
  icon?: React.ReactNode;
}

Zone Interface

interface Zone {
  id: string;
  name: string;
  panels: Panel[];
  activePanel?: string;
  visible: boolean;
}

🎨 Temas y Estilos

Variables CSS Disponibles

: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

.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

   // Verificar que el componente esté registrado
   const components = {
     myComponent: MyComponent, // ✅ Registrado
   };
   

2. Layout no se guarda

   // Verificar localStorage disponible
   if (typeof Storage !== "undefined") {
     // localStorage disponible
   }
   

3. Redimensión no funciona

   /* Verificar que no haya CSS conflictivo */
   .vscode-layout {
     position: relative; /* Requerido */
     overflow: hidden;  /* Requerido */
   }
   

Debug Mode

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

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