Trageţi şi plasaţi widget-uri şi presetări

1) Concept și scenarii

Widget-urile Drag & Drop sunt blocuri interactive (carduri de grafic, tabele, filtre, butoane de acțiune) pe care utilizatorul le plasează liber pe pânză cu referire la grilă. Presetări - machete și stiluri salvate (aspect + temă + parametri) care pot fi aplicate rapid, partajate și versionate.

• Asamblarea tabloului de bord din blocuri gata (carduri KPI, grafice, filtre).
• Schimbarea rapidă a machetei prin presetările "Compact", "Analytics'," Prezentare ".
• Co-editare: produsul plasează widget-uri, analistul stabilește surse.
• Publicarea numai pentru părțile interesate.

2) Principii arhitecturale

1. Prima grilă: poziționare în coloane/rânduri logice (12/24), pixeli - derivați.
2. Ajustare și ghidaje: ghidaje magnetice, lipirea la plasă și vecini, alinierea.
3. Conștient de constrângere: limitatoare de dimensiune/aspect, min/max, aspect de blocare.
4. Safe-by-default: autosave continuă, editare tranzacțională, anulare/redo.
5. A11y-first: DnD de la tastatură și modificări de voce.
6. Realtime-ready: CRDT/OT pentru sesiuni multiplayer.
7. Temabil: jetoane de design, presetări tematice, moduri de lumină/întuneric/contrast.
8. Portabil: export/import JSON/YAML; versioning circuit.

3) Modelul de date (simplificat)

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) Grilă, ajustări și ghidaje

Grilă: 12 boxe pentru desktop, 6 pentru tabletă, 4 pentru telefoane; "RowHeight' este același lucru pentru pitch vertical stabil.
Ajustare: ajustare la margini/centre; „magneți” la 4/8 px; ghiduri inteligente atunci când se apropie de vecini.
Flux automat: transfer automat mai jos în caz de coliziune; algoritmul „blocuri căzătoare”.
Capacitatea de reacţie: puncte de întrerupere → "pos' alternative pentru fiecare punct de întrerupere.

5) DnD evenimente și stări

События: 'dragStart', 'drag', 'dragOver', 'drop', 'redimensionareStart', 'redimensionare', 'redimensionareEnd',' select ',' grup ',' ungroup ',' reorder ',' anulare ',' redo '.

• Ghost/Preview-O cale translucidă în timp ce trageți.
• Substituenți: zone permise (verde), interzise (roșu).
• Harta coliziunii - calculul rapid al celulelor ocupate (arbore bitset/interval).

6) Raise, alinia, z-index

Resise mânere la colţuri + hold' Shift' pentru a menţine proporţiile.
Alinierea grupului: „stânga/dreapta”, „centru”, „distribuie uniform”.
Niveluri de suprapunere: „z” cu restricție de interval, butoane față/spate.

7) Grupuri, containere și cuiburi

Grupuri: selecţie multiplă, tragere şi plasare combinate, aliniere grup.
Container widget: file, acordeoane, carusele - ei știu cum să accepte widget-uri pentru copii.
Opriri containere: grilă externă ≠ internă (alte coloane).

8) Presetări (șabloane) și versiuni

Tipuri de presetări: aspect, temă, set widget, aspect + date.
Versioning: scheme și migrații „semver” (harta câmpului, defaults).
Previzualizare & Aplicare-previzualizare înainte de a aplica.
Presetări scopate: personal, echipă, global; citire/editare drepturi.
Export/import: JSON/YAML, semnătura sumei de control, verificarea compatibilității versiunii.

9) Accesibilitate (A11y) și tastatură

• „Enter/Space” - începe transferul; săgeți - treceți la spațierea grilei; 'Shift' + săgeți - spațiere accelerată; "Esc' - anulează.
• „Ctrl/Cmd + G” - grup; 'Ctrl/Cmd + Shift + G' - ungroup.
• „Alt” - opriți temporar ruperea la grilă.
• Voce SR: "Mutat la (x, y). Lipirea: pe. Conflict: Da/Nu"
• Inele de focalizare, mânere mari recise, zone picătură cu o descriere.

10) Modele touch și mobile

Apăsați lung (300-500 ms) pentru DnD start.
Obiective crescute (minim 40-48 px).
Bare de instrumente adaptive (dock de jos).
Mod de editare: blocare defilare pânză, auto-derulare verticală atunci când se deplasează la margine.

11) Acțiuni de la widget-uri (widget-uri acționabile)

Built-in CTA (buton), meniu contextual, drag-clone (duplicare Alt-a avut loc).
„Presetări rapide” pentru widget (densitate, legendă, schemă de culori).
Stări: încărcare/gol/eroare, cioburi securizate („datele rămân în urmă”).

12) Colaborare și publicare

Timp real: CRDT (de exemplu, Yjs) sau OT (abordare Quill) - cursoare participante, încuietori de grup.
Drepturi: 'Proprietar', 'Editor', 'Vizualizator'; Publică un instantaneu imuabil.
Fluxuri: proiect de revizuire → → publicare; compararea modificărilor (machete diferite).

13) Anulare/Redo și autosave

Autobuz de comandă: fiecare operațiune este o comandă cu „do/anulare”.
Conectați-vă la client (în memorie + persistă periodic), limita de lungime.
Salvare automată: la fiecare N secunde/prin 'inactivitate', cu indicatorul „Salvat”.

14) Jetoane de temizare și design

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

Comutarea temelor fără a recalcula aspectul (numai jetoane vizuale).
Contrast AA/AAA, modul High-Contrast, temă întunecată cu gri corect.

15) Performanță

Randare pe straturi (panza/webgl pentru grafice complexe, DOM pentru crom).
Virtualizare listă/tabel, accelerație 'drag' (16 ms), requestAnimationFrame.
Diff randare: redesenați numai widget-uri modificate.
Cache de numărare coliziuni și linii directoare.

16) Securitatea și protecția conținutului

Sunbox pentru widget-uri HTML (iframe, CSP, steaguri „sandbox”).
Limitare drop: tipuri whitelist (fișiere, link-uri, presetări JSON); verificarea dimensiunii și conținutului.
Drepturi la presetări (RBAC/ABAC), audit de export/import.

17) Widget API (contract)

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

Evenimentele ciclului de viață sunt "mount'," redimensionare "," vizibilitateSchimbare ".
Validarea recuzitei înainte de publicare.

18) Import/export și migrații

Exporturi: „grilă”, „widget-uri”, „temă”, „meta”.
Import: verificarea versiunilor schemei, migrații automate (harta câmpului/defaults), raport.
Blocare-fișier presetat cu hash pentru a asigura integritatea.

19) Hotkeys (recomandat)

Navigare: '←↑→↓' - mutare; 'Shift' + săgeți - pas rapid.
Recise: „Alt” + săgeți.
Operațiuni: „Ctrl/Cmd + D” - duplicat; „Ctrl/Cmd + G” - grup; 'Ctrl/Cmd + Shift + G' - ungroup.
Niveluri: '['/']' - înapoi/înainte pe z-index.
Anulare/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (или 'Y').
Presetări: 'Ctrl/Cmd + 1.. 9 '- aplicați rapid cele salvate.

20) Modele UX

Ghidaje rapide la prima lansare (micro-onboarding pentru 3-5 pași).
Modul grilă: comutați „arată/ascunde grila”.
Indicii inline privind coliziunile („indisponibil: lățime minimă = 3”).
Layout History: Revine la versiunea anterioară.

21) Planul de încercare

Unitate: calcul coliziune, rupere, validator constrângere.
Integrare: mouse-ul DnD/robinet/tastatură; grupări; containere.
E2E: asamblarea unui tablou de bord de la zero, aplicarea unei presetări, publicarea, exportul/importul.
Haos: întârzieri, pierderea conexiunii (în timp real), conflict de drepturi.
A11y: scripturi pentru tastatură, SR-voce, contrast.

22) Lista de verificare a implementării

• Grilă/puncte de întrerupere și ajustare configurate
• Recise/grupuri/aliniere de lucru și testate
• Tastatură DnD și ScreenTips activat
• Autosave, anulare/redo, istoric aspect
• Presetări: versiuni, drepturi, export/import
• Teme și jetoane de design, modul High-Contrast
• Colaborarea în timp real și rezolvarea conflictelor
• Limitare picătură, validare fișier, sandbox HTML
• Măsurători: adopție, timpul până la prima plasare, erori de coliziune

23) Mini-Întrebări frecvente

De ce doar o grilă, nu coordonate gratuite?
Grila simplifică alinierea, coronavirusul, portabilitatea presetată și performanța.

Cum se stochează diferite machete pentru breakpoints?
Fiecare widget are un 'pos' pe breakpoint (desktop/tabletă/mobil) cu retragere automată.

Ce să alegeți pentru colaborare - OT sau CRDT?
CRDT este mai ușor pentru offline/conflicte; OT - ok pentru operații de text liniar. Pentru aspect, CRDT este mai des luat.

Total

Widget-uri bune Drag & Drop nu sunt numai "drag and drop. "Acestea sunt: grilă strictă și rupere, grupuri convenabile și aliniere, accesibilitate la tastatură, presetări stabile cu versiuni și exporturi, publicații sigure și colaborare. Construiți acest lucru în jurul unui model de date fiabil, un UX bine gândit și un plan de testare - iar constructorul va deveni rapid, ușor de înțeles și rezistent la creșterea conținutului și a comenzilor.