Drag & Drop Widget & lar

1) Düşünje we ssenariýalar

Drag & Drop-widjetler - ulanyjynyň tora birikdirilen kanwada erkin ýerleşdirýän interaktiw bloklary (grafika kartoçkalary, tablisalar, süzgüçler, hereket düwmeleri). Presetler - çalt ulanyp, paýlaşyp we wersiýa edip boljak saklanan düzüm we stiller (layout + tema + parametrler).

• Taýýar bloklardan daşbord ýygnamak (KPI kartoçkalary, grafikler, süzgüçler).
• "Ykjam", "Analitika", "Prezentasiýa" presetleri arkaly düzülişi çalt çalyşmak.
• Bilelikde redaktirlemek: prodakt widjetleri ýerleşdirýär, analitik çeşmeleri sazlaýar.
• Steýkholderler üçin "diňe okamak".

2) Binagärlik ýörelgeleri

1. Grid-first: logiki sütünlerde/setirlerde ýerleşmek (12/24), pikseller - emele gelenler.
2. Snapping & Guides: magnit gollanmalar, tora we goňşulara ýapyşmak, tekizlemek.
3. Constraint-aware: ululyk/proporsiýa çäklendirijileri, min/max, lock-aspect.
4. Safe-by-default: üznüksiz awto-gorap saklamak, geleşik çap etmek, undo/redo.
5. A11y-first: Klawiaturadan DnD we üýtgeşmeleri seslendirmek.
6. Realtime-ready: CRDT/OT köp ulanyjy sessiýalary üçin.
7. Themable: dizaýn bellikleri, mowzuk presetleri, açyk/gara/kontrast re modeimleri.
8. Portable: eksport/import JSON/YAML; shemalary wersiýalaşdyrmak.

3) Maglumatlaryň modeli (ýönekeýleşdirilen)

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, baglanyşyklar we gollanmalar

Desktop üçin 12 sütün, planşet üçin 6 sütün, telefonlar üçin 4 sütün; 'rowHeight' durnukly dik ädim üçin deňdir.
Snapping: gyralarda/merkezlerde baglanyşyk; "magnitler" 4/8 px; goňşularyna ýakynlaşanda akylly ýolbeletler.
Awto-flow: gapma-garşylyk ýüze çykanda aşakda awtomatiki geçirmek; "ýykylýan bloklaryň" algoritmi.
Responsivity: breakpoints → alternatiw 'pos' her arakesme nokady üçin.

5) DnD-wakalar we ýagdaýlar

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

• Ghost/Preview: süýräniňizde aç-açan kontury.
• Placeholders: Rugsat berilýän zolaklar (ýaşyl yşyklandyryş), gadagan (gyzyl yşyklandyryş).
• Collision map: işleýän öýjükleri çalt hasaplamak (bitset/interval tree).

6) Gaýtadan ýazmak, tekizlemek, z-index

Resaýzyň burçlaryndaky tutawaçlar + proporsiýalary saklamak üçin 'Shift' tutawaçlary.
Topary deňleşdirmek: "çep/sag gyrada", "merkezde", "deň paýlamak".
Aralyk çäkli 'z', "öň/arka" düwmeleri.

7) Toparlar, gaplar we goýmalar

Toparlar: köp saýlamak, bilelikde süýremek, toparlaýyn deňleşdirmek.
Konteýner-widjetler: tablar, akkordeonlar, karuseller - gyz widjetleri kabul etmegi bilýärler.
Konteýneriň çäklendirijileri: daşarky tor ≠ içki (beýleki sütünler).

8) Presetler (şablonlar) we wersiýalar

Presetleriň görnüşleri: layout, tema (theme), "widget toplumy", "düzüliş + maglumatlar".
Wersiýa: 'semver' shemasy we göçmek (meýdan kartasy, defoltlar).
Preview & Apply: ulanylmazdan öň öňünden görmek.
Scoped presets: şahsy, toparlaýyn, global; okamak/redaktirlemek hukugy.
Eksport/Import: JSON/YAML, gözegçilik mukdary bilen gol, wersiýanyň laýyklygyny barlamak.

9) Elýeterlilik (A11y) we klawiatura

• 'Enter/Space' - Geçirişe başla; oklar - setir ädimine geçmek; 'Shift' + oklar - çaltlaşdyrylan ädim; 'Esc' - ýatyrmak.
• 'Ctrl/Cmd + G' - toparlanyň; 'Ctrl/Cmd + Shift + G' - toparlanyň.
• 'Alt' - tor baglanyşygyny wagtlaýyn öçürmek.
• SR: "Göçürildi (x, y). Ýapyşmak: açyldy. Gapma-garşylyk: hawa/ýok".
• Fokus halkalary, rezaýzyň uly tutawaçlary, beýany bolan aýlaw zolaklary.

10) Taç we ykjam patternler

DnD başlamak üçin Long-press (300-500 ms).
Uly nyşanlar (azyndan 40-48 px).
Uýgunlaşdyrylan gural panelleri (aşaky dock paneli).
"Redaktirleme re modeimi": kenara geçirilende tuval aýlanmagyny blokirlemek, dik awto-skroll.

11) Widget hereketler (Actionable Widgets)

Gurlan CTA (düwme), kontekstiň menýusy, drag-clone ('Alt' bilen köpeltmek).
Widget üçin "Çalt presetler" (dykyzlyk, rowaýat, reňk shemasy).
Şertler: loading/empty/error, howpsuz bloklar ("maglumatlar yzda").

12) Bilelikdäki iş we neşirler

Realtime: CRDT (Yjs) ýa-da OT (Quill-çemeleşme) - gatnaşyjylaryň kursorlary, toparlaryň petiklenmegi.
Hukuklar: 'Owner', 'Editor', 'Viewer'; suraty çap etmek (immutable snapshot).
Akymlar: taslama → revyu → neşir etmek; üýtgeşmeleri deňeşdirmek (diff layout's).

13) Undo/Redo we Awto gorap saklamak

Buýruk tekeri: her bir amal - 'do/undo' buýrugy.
Müşderi boýunça žurnal (in-memory + döwürleýin persist), uzynlyk boýunça çäk.
Auto-save: her N sekunt/po 'idle', "Saklandy" görkezijisi bilen.

14) Temizasiýa we dizaýn-bellikler

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

Saýlamasyz mowzuklary üýtgetmek (diňe wizual bellikler).
AA/AAA kontrast, High-Contrast re modeimi, dogry çal bilen garaňky tema.

15) Öndürijilik

Gatlaklara görä çyzmak (çylşyrymly grafikler üçin canvas/webgl, hrom üçin DOM).
Sanlaşdyrma sanawlary/tablisalary, throttle 'drag' (16 ms), requestAnimationFrame.
Diff-render: diňe üýtgedilen widjetleri täzeden çyzmak.
Gapma-garşylyklary we gidlinleri sanamak üçin keş.

16) Howpsuzlyk we mazmuny goramak

HTML widjetleri üçin sanbox (iframe, CSP, 'sandbox' baýdaklary).
Damjalary çäklendirmek: whitelist görnüşleri (faýllar, baglanyşyklar, JSON presetleri); ululygyny we mazmunyny barlamak.
Presetlere bolan hukuklar (RBAC/ABAC), eksport/import barlagy.

17) Widjetleriň API-si (şertnama)

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

Durmuş sikli wakalary: 'mount', 'resize', 'visibilityChange'.
Propslary çap etmezden öň tassyklamak.

18) Import/eksport we migrasiýa

Eksport edýär: 'grid', 'widgets', 'theme', 'meta'.
Import: shema wersiýalaryny barlamak, awtomatiki göçmek (meýdan kartoçkalary/defoltlar), hasabat.
Bütewiligi kepillendirmek üçin hash bilen Lock-file presenti.

19) Gyzgyn düwmeler (maslahat berilýär)

Nawigasiýa: '← ↑ → ↓' - hereket etmek; 'Shift' oklar - çalt ädim.
Jogap: 'Alt' oklar.
Amallar: 'Ctrl/Cmd + D' - dublikat; 'Ctrl/Cmd + G' - topar; 'Ctrl/Cmd + Shift + G' - topar.
Derejeler: '['/']' - z-index boýunça yza/öňe.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
'Ctrl/Cmd + 1.. 9' - saklananlary çalt ulanmak.

20) UX-patternler

Ilkinji işe girizilende çalt gidler (3-5 ädimde mikro-onbording).
Tor mody: "Tory görkezmek/gizlemek" düwmesini açyň.
Gapma-garşylyklarda inline maslahatlar ("elýeterli däl: min. widget ini = 3").
Ýerleşiş taryhy: öňki wersiýasyna gaýdyp gelmek.

21) Synag-meýilnama

Birlik: gapma-garşylyklary hasaplamak, snapping, walidator constraints.
Integrasiýa: DnD syçan/tuşla/klawiatura; toparlanmalar; konteýnerler.
E2E: daşbordyň "noldan" ýygnalmagy, presetiň ulanylmagy, neşir edilmegi, eksport/import.
Bulam-bujarlyk: renderiň gijikdirilmegi, baglanyşygyň ýitmegi (realtime), hukuklaryň gapma-garşylygy.
A11y: klawiatura ssenarileri, SR-ses, kontrast.

22) Girizmegiň çek-sanawy

• Tor/arakesme nokatlary we snapping sazlandy
• Gaýtadan işlemek/toparlar/tekizlemek işleýär we synagdan geçirildi
• Klawiatura DnD we ekran maslahatlary goşuldy
• Awtoseýw, undo/redo, ýerleşiş taryhy
• Sazlamalar: wersiýalar, hukuklar, eksport/import
• Mowzuklar we dizaýn bellikleri, High-Contrast re modeimi
• Realtime-hyzmatdaşlyk we gapma-garşylyklary çözmek
• Damjalary çäklendirmek, faýllary tassyklamak, HTML sandbox
• Metrikler: adoption, ilkinji ýerleşdiriş wagty, gapma-garşylyklaryň ýalňyşlyklary

23) Mini-FAQ

Näme üçin erkin koordinatlar däl-de, diňe tor?
Tor tekizlemegi, uýgunlaşmagy, presetleriň çydamlylygyny we öndürijiligini aňsatlaşdyrýar.

Arakesme nokatlarynda dürli layout 'lary nädip saklamaly?
Her widgetda awtomatiki fall-back bilen 'pos' breykpoint (desktop/tablet/mobile) bar.

Hyzmatdaşlyk üçin näme saýlamaly - OT ýa-da CRDT?
CRDT offline/gapma-garşylyklar üçin has aňsat; OT - çyzykly tekst amallary üçin ok. Layout üçin köplenç CRDT alynýar.

Jemi

Gowy Drag & Drop widjetleri diňe "kartoçkany süýremek" däl. Bular: berk tor we snapping, amatly toparlar we tekizlemek, klawiatura elýeterliligi, wersiýalary we eksporty bilen durnukly presetler, ygtybarly neşirler we bilelikde işlemek. Muny UX we synag meýilnamasy tarapyndan oýlanyşykly ygtybarly maglumat modeliniň töwereginde guruň - dizaýner çalt, düşnükli we mazmunyň we buýruklaryň ösmegine çydamly bolar.