Drag & Drop widget e preset

1) Concetto e script

Drag & Drop widget sono blocchi interattivi (schede grafiche, tabelle, filtri, pulsanti di azione) che l'utente posiziona liberamente sull'area di lavoro collegata alla griglia. Preimpostati - Layout e stili salvati (layout + tema + parametri) che possono essere rapidamente applicati, condivisi e versionati.

• Assembla un dashbord da blocchi finiti (schede KPI, grafici, filtri).
• Cambio rapido del layout attraverso i preset Compact, Analisi, Presentazione.
• Modifica condivisa: il prodotto posiziona i widget, l'analista configura le origini.
• Pubblica solo lettura per gli steakholder.

2) Principi architettonici

1. Grid-first: posizionamento in colonne o righe logiche (12/24), pixel derivati.
2. Snapping & Guides: guide magnetiche, attaccamenti alla griglia e ai vicini, allineamento.
3. Constraint-aware - Vincoli di quota/proporzione, min/max, lock-aspect.
4. Safe-by-default: archiviazione automatica continua, pubblicazione transazionale, undo/redo.
5. A11y-first: tastiera e pronuncia le modifiche.
6. Realtime-ready: CRDT/OT per le sessioni multiplayer.
7. Themable: token di design, preset di temi, modalità lucido/scuro/contrasto.
8. Portabile: esportazione/importazione JSON/YAML; versioning degli schemi.

3) Modello di dati (semplificato)

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, riferimenti e guide

Griglia: 12 colonne per il dectop, 6 per il tablet, 4 per i telefoni, 'rowHeight' uguali per il passo verticale stabile.
Snapping - Riferimento ai bordi/centri; «magneti» su 4/8 px; guidi intelligenti quando si avvicinano ai vicini.
Auto-flow - Trasferimento automatico più basso in caso di conflitto algoritmo «blocchi cadenti».
I breakpoint sono alternativi ai «pos» per ogni breakpoint.

5) Eventi e stati DnD

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

• Ghost/Preview - Tracciato semivuoto durante il trascinamento.
• Placeholders - Zone valide (evidenziate in verde), non consentite (in rosso).
• Collision map calcola rapidamente le celle occupate (bitset/interval tree).

6) Resaiz, allineamento, z-index

Maniglie di risalita all'angolo + Mantenete Maiusc per mantenere le proporzioni.
Allinea il gruppo a sinistra/destra, al centro, distribuisce equamente.
Livelli di fusione: 'z', con limite di intervallo, pulsanti anteriori/posteriori.

7) Gruppi, contenitori e allegati

Gruppi: selezione multipla, trascinamento condiviso, allineamento di gruppo.
I widget contenitori, gli accordi, le giostre, sono in grado di accettare i widget figli.
Delimitatori contenitore: griglia esterna interna (altre colonne).

8) Preset (modelli) e versioni

I tipi di preset sono layout, tema (theme), set di widget, layout + dati.
Versioning: diagrammi e migrazioni «semver» (map campi, default).
Preview & Apply - Anteprima prima dell'applicazione.
Scoped presets: personale, di comando, globale; Diritti di lettura/modifica.
Esporta/importa: JSON/YAML, firma numero di controllo, verifica compatibilità versione.

9) Disponibilità (A11y) e tastiera

• Invio/Space - Inizia la migrazione; frecce - sposta al passo della griglia; Maiusc + freccia - Passo accelerato; Esc - Annulla.
• «Ctrl/Cmd + G» - raggruppa; «Ctrl/Cmd + Maiusc + G» - Separa.
• Alt - Disattiva temporaneamente l'aggancio alla griglia.
• Voce SR: "Spostato su (x, y). Incollatura: attivata. Conflitto sì/no".
• Anelli focali, grandi maniglie resine, zone drop con descrizione.

10) Tac e pattern mobili

Long-press (300-500 mc) per la partenza del DnD.
Target aumentati (minimo 40-48 px).
Barre degli strumenti adattive (pannello docu inferiore).
Modalità di modifica - Blocca lo scorrimento dell'area di lavoro e lo scroll automatico verticale quando viene spostato verso il bordo.

11) Azioni da widget (Actionable Widgets)

CTA incorporato (pulsante), menu contestuale, drag-clone (doppio con «Alt»).
Preset veloci per il widget (densità, leggenda, schema di colori).
Stati: loading/empty/errore, stub sicuri («dati in ritardo»).

12) Collaborazione e pubblicazione

Realtime: CRDT (ad esempio, Yjs) o approccio OT - cursori dei membri, blocchi dei gruppi.
Diritti: «Owner», «Editor», «Viewer»; pubblicazione di un'istantanea (immutabile snapshot).
Flusso: bozza di invecchiamento, pubblicazione; confronto delle modifiche (diff layout'o).

13) Undo/Redo e memorizzazione automatica

Pneumatico di comando: ogni operazione è un comando con «do/undo».
Registro sul client (in-memory + persist periodico), limite di lunghezza.
Auto-save: ogni n secondi/per idle, con l'indicatore Salvato.

14) Tematizzazione e token di progettazione

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

Commutare i temi senza ricalcolare layout (solo token visivi).
Contrasto AA/AAA, modalità High-Contrast, tema scuro con grigio corretto.

15) Prestazioni

Disegni su livelli (canves/webgl per grafici complessi, DOM per cromo).
Virtualizzazione di elenchi/tabelle, throtl'drag '(16 ms), requestAnimationFrame.
Diff render: ridisegna solo i widget modificati.
Cache di conteggio collusioni e haydline.

16) Sicurezza e protezione dei contenuti

Sanbox per i widget HTML (iframe, CSP, bandiere «sandbox»).
Limitazione dei drop: tipo whitelist (file, collegamenti, preset JSON) Verifica delle dimensioni e del contenuto.
Diritti di preavviso (RBAC/ABAC), controllo di esportazione/importazione.

17) API widget (contratto)

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;
}

Eventi del ciclo di vita: «mount», «resize», «visibilityChange».
Convalida dei props prima della pubblicazione.

18) Importazione/esportazione e migrazione

Esporta «grid», «widgets», «theme», «meta».
Importa: verifica delle versioni dello schema, migrazioni automatiche (map campi/default), report.
Lock-file preset con hash per garantire l'integrità.

19) Tasti caldi (raccomandati)

Navigazione: «←↑→↓» - sposta; «Maiusc» + frecce - passo veloce.
Resaiz: «Alt» + frecce.
Operazioni: «Ctrl/Cmd + D» - duplicato; «Ctrl/Cmd + G» - Gruppo; «Ctrl/Cmd + Maiusc + G» - Dissociazione.
Livelli: '['/']' - indietro/avanti su z-index.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
Preset: 'Ctrl/Cmd + 1.. 9' - Applica rapidamente quelli salvati.

20) pattern UX

Gate veloci al primo avvio (micro-onboarding di 3-5 passi).
Modalità griglia - Mostra/nasconde la griglia.
Suggerimenti inline sui conflitti («non disponibile: min. larghezza widget = 3»).
Cronologia layout - Torna alla versione precedente.

21) Test-piano

Unit, calcolo collusioni, snapping, validatore constrains.
Integrazione: DnD con mouse/macchina/tastiera; raggruppamenti; container.
E2E - Assemblaggio dashbord da zero, applicazione del preset, pubblicazione, esportazione/importazione.
Caos: ritardi del render, perdita della connessione (realtime), conflitto di diritti.
A11y: script di tastiera, voce SR, contrasto.

22) Assegno-foglio di implementazione

• Griglia/breakpoint e snapping configurati
• Resaiz/gruppi/allineamento funzionano e sono stati testati
• Tastiera e suggerimenti inclusi
• Accesso automatico, undo/redo, cronologia dei layout
• Preset: versioni, diritti, esportazione/importazione
• Temi e token di progettazione, modalità High-Contrast
• Realtime-collaudo e risoluzione dei conflitti
• Limitazione dei drop, convalida dei file, sandbox HTML
• Metriche: adoption, tempo fino al primo posizionamento, errori di conflitto

23) Mini FAQ

Perché solo la griglia e non le coordinate libere?
La griglia semplifica l'allineamento, l'adattamento, la portabilità dei preset e le prestazioni.

Come conservare diversi layout's sotto i breakpoint?
Ogni widget è «pos» per breakpoint (desktop/tablet/mobile) con fall-back automatico.

Cosa scegliere per il collaudo - OT o CRDT?
CRDT più facile per offline/conflitti OK per le operazioni di testo lineare. Per layout è più comune prendere CRDT.

Totale

Un buon drag & Drop widget non è solo «trascinare la carta». Si tratta di griglia e snapping rigorosi, gruppi e allineamento comodi, disponibilità dalla tastiera, preset stabili con versioni ed esportazioni, pubblicazioni sicure e collaborazione. Costruite questo intorno a un modello di dati affidabile, un piano di test e UX, e il costruttore diventerà veloce, comprensibile e resistente alla crescita dei contenuti e dei comandi.