Drag & Drop-vidjetlar va presetlar

1) Konsepsiya va ssenariylar

Drag & Drop-vidjetlar - interaktiv bloklar (grafiklar kartochkalari, jadvallar, filtrlar, harakat tugmalari), ularni foydalanuvchi to’rga bog’langan holda kanvasga erkin joylashtiradi. Presetlar - saqlangan tuzilmalar va uslublar (layout + mavzu + parametrlar), ularni tezda qoʻllash, baham koʻrish va versiyalash mumkin.

• Tayyor bloklardan dashbordni yig’ish (KPI kartochkalari, grafiklar, filtrlar).
• «Ixcham», «Analitik», «Taqdimot» presetlari orqali tarkibiy qismlarni tez almashtirish.
• Birgalikda tahrir qilish: mahsulot vidjetlarni joylashtiradi, tahlilchi manbalarni sozlaydi.
• Steykxolderlar uchun «faqat oʻqish» ni nashr etish.

2) Arxitektura prinsiplari

1. Grid-first: mantiqiy ustunlarda/satrlarda joylashtirish (12/24), piksellar - hosilalar.
2. Snapping & Guides: magnit yo’nalishlar, to’rga va qo’shnilarga yopishish, tekislash.
3. Constraint-aware: oʻlcham/nisbat chegaralari, min/max, lock-aspect.
4. Safe-by-default: uzluksiz avtomatik saqlash, tranzaksion nashr, undo/redo.
5. A11y-first: klaviaturadan DnD va o’zgarishlarni ovozlash.
6. Realtime-ready: Koʻp foydalanuvchi sessiyalari uchun CRDT/OT.
7. Themable: dizayn-tokenlar, mavzu presetlari, ochiq/qorong’u/kontrast rejimlar.
8. Portable: JSON/YAML eksport/import; sxemalarni versiyalash.

3) Ma’lumotlar modeli (soddalashtirilgan)

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, bog’lovchilar va yo’naltiruvchilar

To’r: 12 ta stoltop uchun, 6 tasi planshet uchun, 4 tasi telefonlar uchun; «rowHeight» barqaror vertikal qadam uchun bir xil.
Snapping: qirralar/markazlar boʻyicha bogʻlash; «magnitlar» 4/8 px; qo’shnilarga yaqinlashganda aqlli gaydlar.
Auto-flow: to’qnashuv paytida avtomatik ravishda quyida ko’chirish; «yiqiladigan bloklar» algoritmi.
Responsivlik: breakpoints → har bir breakpoint uchun muqobil’pos’.

5) DnD-hodisalar va holatlar

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

• Ghost/Preview: koʻchirish paytida shaffof kontur.
• Placeholders: yo’l qo’yiladigan zonalar (yashil), taqiqlangan (qizil).
• Collision map: band boʻlgan kataklarni tezda hisoblash (bitset/interval tree).

6) Resayz, tekislash, z-index

Burchaklardagi resayz tutqichlari + nisbatlarni saqlash uchun Shift tutqichlari.
Guruhni tekislash: «chap/oʻng chekkada», «markazda», «bir tekis taqsimlash».
Qo’llash darajasi:’z’diapazoni bo’yicha cheklangan, «old/orqa» tugmasi.

7) Guruhlar, konteynyerlar va joylanma

Guruhlar: koʻp tanlash, birgalikda sudrab chiqish, guruhlarni tekislash.
Konteyner-vidjetlar: tablar, akkordeonlar, karusellar - qizlar vidjetlarini qabul qila oladi.
Konteyner cheklovlari: tashqi to’r ≠ ichki (boshqa ustunlar).

8) Presetlar (shablonlar) va versiyalar

Preset turlari: layout, mavzu (theme), «vidjetlar toʻplami», «tuzilma + maʼlumotlar».
Version:’semver’sxemasi va migratsiyasi (maydon haritalari, defoltlar).
Preview & Apply: qoʻllashdan oldin koʻrib chiqish.
Scoped presets: shaxsiy, jamoaviy, global; o’qish/tahrir qilish huquqlari.
Eksport/import: JSON/YAML, nazorat summasi imzosi, versiyaning mosligini tekshirish.

9) Foydalanish imkoniyati (A11y) va klaviatura

• ’Enter/Space’ - koʻchirishni boshlash; o’qlar - panjara qadami;’Shift’+ o’qlar - tezlashtirilgan qadam;’Esc’- bekor qilish.
• ’Ctrl/Cmd + G’ - guruhlash;’Ctrl/Cmd + Shift + G’- guruhdan chiqarish.
• ’Alt’ - toʻrga bogʻlashni vaqtincha oʻchirish.
• SR tovushi: "(x, y) ga koʻchirildi. Yopishish: yoqilgan. Mojaro: ha/yoʻq".
• Fokus halqalari, resayzning katta tutqichlari, tasviri yozilgan teshik zonalari.

10) Tach va mobil patternlar

DnD boshlash uchun Long-press (300-500 ms).
Kattalashtirilgan targetlar (kamida 40-48 px).
Moslashuvchan asboblar paneli (pastki doc paneli).
«Tahrirlash rejimi»: tuval aylanishini bloklash, chetga koʻchirilganda vertikal avto-skroll.

11) Vidjetlar harakati (Actionable Widgets)

Oʻrnatilgan CTA (tugma), kontekstli menyu, drag-clone (’Alt’bilan takrorlash).
Vidjet uchun «Tez presetalar» (zichligi, afsonasi, rang sxemasi).
Holatlar: loading/empty/error, xavfsiz tugmalar («maʼlumotlar orqada»).

12) Birgalikdagi ishlar va nashrlar

Realtime: CRDT (masalan, Yjs) yoki OT (Quill-yondashuv) - ishtirokchilarning kursorlari, guruhlarni blokirovka qilish.
Huquqlar:’Owner’,’Editor’,’Viewer’; rasmni chop etish (immutable snapshot).
Oqimlar: loyiha → revyu → nashr etish; o’zgarishlarni taqqoslash (diff layout’lar).

13) Undo/Redo va avto- saqlash

Buyruq shinasi: har bir operatsiya - s’do/undo’buyrugʻi.
Mijozdagi jurnal (in-memory + davriy persist), uzunligi bo’yicha limit.
Auto-save: har N soniya/’ idle’, «Saqlangan» indikatori bilan.

14) Temizatsiya va dizayn-tokenlar

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

Mavzuni layout bilan qayta hisoblamasdan oʻzgartirish (faqat vizual tokenlar).
AA/AAA kontrast, High-Contrast rejimi, to’g’ri kulrang mavzu.

15) Unumdorlik

Qatlamlar bo’yicha chizish (murakkab grafiklar uchun canvas/webgl, xrom uchun DOM).
Roʻyxat/jadvallarni virtual qilish, throttle’drag’(16 ms), requestAnimationFrame.
Diff-render: faqat o’zgartirilgan vidjetlarni qayta chizish.
Qarama-qarshiliklar va gidlaynlarni hisoblash uchun kesh.

16) Xavfsizlik va kontentni himoya qilish

HTML vidjetlari uchun sanbox (iframe, CSP,’sandbox’bayroqlari).
Droplarni cheklash: whitelist turlari (fayllar, havolalar, JSON presetlar); miqdori va tarkibini tekshirish.
Presetlarga bo’lgan huquqlar (RBAC/ABAC), eksport/import auditi.

17) Vidjetlar (kontrakt) API

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

’mount’,’resize’,’visibilityChange’.
E’lon qilingunga qadar propslarni validatsiya qilish.

18) Import/eksport va migratsiya

Eksport qiladi:’grid’,’widgets’,’theme’,’meta’.
Import: sxema versiyalarini tekshirish, avtomatik migratsiya (map/defolt), hisobot.
Yaxlitlikni kafolatlash uchun xesh bilan lock-file preset.

19) Issiq tugmalar (tavsiya etilgan)

Navigatsiya:’← ↑ → ↓’- harakatlanish;’Shift’+ oʻqlar - tez qadam.
Qayta yozish:’Alt’+ oʻqlar.
Operatsiyalar:’Ctrl/Cmd + D’- dublikat;’Ctrl/Cmd + G’- guruh;’Ctrl/Cmd + Shift + G’- kichik guruh.
Darajalar:’[’/’]’- z-index boʻyicha orqaga/oldinga.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
’Ctrl/Cmd + 1.. 9’ - saqlanganlarni tezda qoʻllash.

20) UX-patternlar

Birinchi ishga tushirishda tezkor gaydlar (3-5 qadam mikro-onbording).
Panjara rejimi: «panjarani koʻrsatish/bekitish» tugmasi.
Ixtiloflardagi inline-maslahatlar («mavjud emas: minimal kenglik = 3»).
Namunalar tarixi: oldingi versiyaga qaytish.

21) Test-reja

Yunit: kolliziyalar hisobi, snapping, validator constraints.
Integratsiya: sichqoncha/touch/klaviatura bilan DnD; guruhlash; konteynyerlar.
E2E: dashbordni «noldan» yig’ish, presetni qo’llash, nashr etish, eksport/import qilish.
Xaos: renderning kechikishi, ulanishning yoʻqolishi (realtime), huquqlar toʻqnashuvi.
A11y: klaviatura stsenariylari, SR-ovoz, kontrast.

22) Joriy etish chek-varaqasi

• To’r/breykpindlar va snapping sozlangan
• Qayta/guruhlar/tekislash ishlari va sinovdan o’tkazildi
• Klaviatura DnD va ekran maslahatlari
• Avtoseyv, undo/redo, maket tarixi
• Prefetlar: versiyalar, huquqlar, eksport/import
• Mavzular va dizayn tokenlari, High-Contrast rejimi
• Realtime-hamkorlik va nizolarni hal qilish
• Toʻsinlarni cheklash, fayllarni validatsiya qilish, HTML sandbox
• Metriklar: adoption, birinchi joylashtirishdan oldingi vaqt, noto’g’ri to’qnashuvlar

23) Mini-FAQ

Nima uchun erkin koordinatlar emas, balki faqat panjara?
Panjara tekislashni, moslashuvni, presetlarning chidamliligini va unumdorligini soddalashtiradi.

Turli layout’larni breykpindlar ostida qanday saqlash kerak?
Har bir vidjetda’pos’avtomatik fall-back bilan breakpoint (desktop/tablet/mobile) mavjud.

Hamkorlik uchun nima tanlash kerak - OT yoki CRDT?
CRDT oflayn/mojarolar uchun osonroq; OT - chiziqli matnli operatsiyalar uchun. Layout uchun koʻpincha CRDT olinadi.

Jami

Yaxshi Drag & Drop-vidjetlar - bu shunchaki «kartani ko’chirish» emas. Bular: qat’iy to’r va snapping, qulay guruhlar va tekislash, klaviaturadan foydalanish imkoniyati, versiyalar va eksport bilan barqaror presetlar, xavfsiz nashrlar va birgalikda ishlash. Buni ishonchli ma’lumotlar modeli, o’ylangan UX va test-reja atrofida quring - va konstruktor tezkor, tushunarli va kontent va buyruqlarning o’sishiga chidamli bo’ladi.