Drag & Drop widgets y presets

1) Concepto y escenarios

Los widgets Drag & Drop son bloques interactivos (tarjetas de gráficos, tablas, filtros, botones de acción) que el usuario coloca libremente en el lienzo con un enlace a la cuadrícula. Presets: diseños y estilos guardados (layout + tema + parámetros) que se pueden aplicar, compartir y versionar rápidamente.

• Ensamblaje de dashboard a partir de bloques terminados (tarjetas KPI, gráficos, filtros).
• Cambio rápido de diseño a través de los presets Compacto, Analítico, Presentación.
• Edición conjunta: el producto coloca widgets, el analista configura fuentes.
• Publicación de «sólo lectura» para stakeholder.

2) Principios arquitectónicos

1. Grid-first: posicionamiento en columnas/filas lógicas (12/24), píxeles - derivados.
2. Snapping & Guides: guías magnéticas, adherencias a la malla y vecinos, alineación.
3. Constraint-aware: limitadores de tamaño/proporción, min/max, lock-aspect.
4. Safe-by-default: almacenamiento automático continuo, publicación transaccional, undo/redo.
5. A11y-first: DnD desde el teclado y doblaje de cambios.
6. Realtime-ready: CRDT/OT para sesiones multijugador.
7. Themable: tokens de diseño, presets de temas, modos claro/oscuro/contraste.
8. Portable: exportación/importación de JSON/YAML; versionar esquemas.

3) Modelo de datos (simplificado)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) Grid, ataduras y guías

Rejilla: 12 columnas para escritorio, 6 para tableta, 4 para teléfonos; 'rowHeight' es el mismo para un paso vertical estable.
Snapping: ajuste por bordes/centros; «imanes» en 4/8 px; gaids inteligentes cuando se acercan a sus vecinos.
Auto-flow: transferencia automática a continuación en caso de conflicto; algoritmo de «bloques caídos».
Responsividad: breakpoints → 'pos' alternativos bajo cada breakpoint.

5) Eventos y estados DnD

События: `dragStart`, `drag`, `dragOver`, `drop`, `resizeStart`, `resize`, `resizeEnd`, `select`, `group`, `ungroup`, `reorder`, `undo`, `redo`.

• Ghost/Preview: contorno translúcido durante el arrastre.
• Placeholders: zonas permitidas (resaltadas en verde), prohibidas (en rojo).
• Mapa de colisión: cálculo rápido de células ocupadas (árbol de bitset/intervalo).

6) Resaise, alineación, z-index

Manijas de resaise en las esquinas + mantenga pulsado 'Mayús' para guardar las proporciones.
Alineación del grupo: «en el margen izquierdo/derecho», «en el centro», «distribuir uniformemente».
Niveles de superposición: 'z' con límite de rango, botones 'delante/detrás'.

7) Grupos, contenedores y accesorios

Grupos: selección múltiple, arrastrar y soltar, alineación de grupo.
Contenedor-widgets: tabas, acordeones, carruseles - saben aceptar widgets hijos.
Limitadores de contenedor: malla exterior ≠ interior (otras columnas).

8) Presets (plantillas) y versiones

Tipos de presets: layout, tema (theme), «conjunto de widgets», «diseño + datos».
Versionar: esquemas de 'semver' y migraciones (mapeo de campos, impagos).
Vista previa y aplicación: vista previa antes de la aplicación.
Scoped presets: personal, equipo, global; derechos de lectura/edición.
Exportación/importación: JSON/YAML, firma de suma de comprobación, verificación de compatibilidad de versión.

9) Disponibilidad (A11y) y teclado

• 'Enter/Space' - Iniciar la transferencia; flechas - mover un paso de la cuadrícula; 'Mayús' + flechas - paso acelerado; 'Esp' - cancelar.
• 'Ctrl/Cmd + G' - agrupar; 'Ctrl/Cmd + Mayús + G' - desagrupar.
• 'Alt' - deshabilitar temporalmente el enlace a la cuadrícula.
• Voz SR: "Movido a (x, y). Adherencia: activada. Conflicto: sí/no".
• Anillos focales, grandes manijas de resaiza, zonas de drop con descripción.

10) Patrones táctiles y móviles

Long-press (300-500 ms) para el inicio de DnD.
Objetivos aumentados (mínimo 40-48 px).
Barras de herramientas adaptables (panel de acoplamiento inferior).
«Modo de edición»: bloqueo de desplazamiento de lienzo, desplazamiento automático vertical cuando se transfiere al borde.

11) Acciones de widgets (Widgets actuables)

CTA integrado (botón), menú contextual, drag-clone (duplicación con retención 'Alt').
«Presets rápidos» para widget (densidad, leyenda, esquema de color).
Estados: carga/empty/error, enchufes seguros («datos atrasados»).

12) Colaboración y publicaciones

Realtime: CRDT (por ejemplo, Yjs) o OT (enfoque Quill): cursores de participantes, bloqueos de grupos.
Derechos: 'Owner', 'Editor', 'Viewer'; publicación de la instantánea (immutable snapshot).
Flujos: borrador → rugido → publicación; comparación de cambios (diff layout's).

13) Undo/Redo y autocontrol

Bus de comando: cada operación es un comando con 'do/undo'.
Registro en el cliente (in-memory + perist periódico), límite de longitud.
Auto-guardar: cada N segundos/por 'idle', con el indicador 'Guardado'.

14) Temización y tokens de diseño

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

Cambia los temas sin volver a calcular layout (sólo señales visuales).
Contraste AA/AAA, modo High-Contrast, tema oscuro con gris correcto.

15) Rendimiento

Dibujo por capas (canvas/webgl para gráficos complejos, DOM para cromo).
Virtualización de listas/tablas, throttle 'drag' (16 ms), requestAnimationFrame.
Render de diff: Redibuja sólo los widgets modificados.
Caché de conteo de colisiones y gaidlines.

16) Seguridad y protección del contenido

Sanbox para widgets HTML (iframe, CSP, banderas 'sandbox').
Restricción de drops: tipos whitelist (archivos, enlaces, presets JSON); comprobar el tamaño y el contenido.
Derechos de presets (RBAC/ABAC), auditoría de exportación/importación.

17) widgets API (contrato)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

Eventos del ciclo de vida: 'mount', 'resize', 'visibilityChange'.
Validación de props antes de la publicación.

18) Importación/exportación y migración

Exporta: 'grid', 'widgets', 'theme', 'meta'.
Importación: validación de versiones del esquema, migraciones automáticas (map de campos/default), informe.
Preajuste de archivo de bloqueo con hash para garantizar la integridad.

19) Teclas de acceso rápido (recomendadas)

Navegación: '←↑→↓' - mover; 'Mayús' + flechas - paso rápido.
Resise: 'Alt' + flechas.
Operaciones: 'Ctrl/Cmd + D' - duplicado;' Ctrl/Cmd + G '- grupo;' Ctrl/Cmd + Mayús + G '- desagrupación.
Niveles: '['/']' - atrás/adelante por z-index.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
Presets: 'Ctrl/Cmd + 1.. 9' - aplicar rápidamente guardado.

20) Patrones UX

Gaids rápidos la primera vez que se inicia (micro-on-boarding en 3-5 pasos).
Modo de malla: interruptor «Mostrar/Ocultar malla».
Pistas en línea sobre colisiones («no disponible: min. ancho del widget = 3»).
Historial de diseños: volver a la versión anterior.

21) Plan de prueba

Unit: cálculo de colisiones, snapping, validador de constraints.
Integración: DnD con ratón/tach/teclado; agrupaciones; contenedores.
E2E: ensamblaje de dashboard «desde cero», aplicación de preset, publicación, exportación/importación.
Caos: retrasos en el renderizado, pérdida de conexión (realtime), conflicto de derechos.
A11y: scripts de teclado, voz SR, contraste.

22) Lista de verificación de implementación

• Rejilla/breakpoints y snapping personalizados
• Resise/Group/Nivelación funciona y está probado
• Teclado DnD y consejos de pantalla incluidos
• Auto Seave, undo/redo, historia de los diseños
• Presets: versiones, derechos, exportación/importación
• Temas y tokens de diseño, modo High-Contrast
• Colaboración real y resolución de conflictos
• Limitación de drops, validación de archivos, sandbox HTML
• Métricas: adaptación, tiempo hasta la primera colocación, errores de colisión

23) Mini preguntas frecuentes

¿Por qué sólo la cuadrícula, no las coordenadas libres?
La cuadrícula simplifica la alineación mediante la adaptación, la portabilidad de presets y el rendimiento.

¿Cómo almacenar diferentes layout's bajo breakpoints?
Cada widget tiene un 'pos' por breakpoint (escritorio/tablet/móvil) con un fall-back automático.

¿Qué elegir para la colaboración es OT o CRDT?
CRDT es más fácil para conflictos/conflictos fuera de línea; OT - ok para operaciones de texto lineal. Para layout es más probable tomar CRDT.

Los buenos widgets Drag & Drop no son solo «arrastrar y soltar la tarjeta». Estos son: malla estricta y snapping, grupos cómodos y alineación, disponibilidad con teclado, preajustes estables con versiones y exportaciones, publicaciones seguras y colaboración. Construye esto en torno a un modelo de datos confiable, un UX pensado y un plan de prueba, y el diseñador se volverá rápido, comprensible y resistente al crecimiento de contenido y comandos.