Drag & Drop-widget və presets

1) Konsepsiya və ssenarilər

Drag & Drop-widgets - istifadəçinin şəbəkəyə bağlanmış kətan üzərində sərbəst yerləşdirdiyi interaktiv bloklar (qrafik kartları, cədvəllər, filtrlər, hərəkət düymələri). Presets - tez tətbiq edilə, paylaşıla və versiya edilə bilən qorunan düzənliklər və üslublar (layout + mövzu + parametrlər).

• Hazır bloklardan daşbordun yığılması (KPI kartları, qrafiklər, filtrlər).
• «Kompakt», «Analitik», «Təqdimat» presetləri vasitəsilə düzülüşün sürətli dəyişdirilməsi.
• Birgə redaktə: prodakt widget yerləşdirir, analitik mənbələri qurur.
• Steykholders üçün nəşr «yalnız oxumaq».

2) Memarlıq prinsipləri

1. Grid-first: məntiqi sütunlarda/sətirlərdə yerləşdirmə (12/24), piksellər - törəmələr.
2. Snapping & Guides: maqnit kılavuzları, grid və qonşulara yapışan, hizalama.
3. Constraint-aware: ölçü/nisbət məhdudlaşdırıcıları, min/max, lock-aspect.
4. Safe-by-default: davamlı avto-yaddaş, əməliyyat nəşri, undo/redo.
5. A11y-first: klaviatura ilə DnD və dəyişiklik səs.
6. Realtime-ready: Multiplayer seanslar üçün CRDT/OT.
7. Themable: dizayn işarələri, mövzu presetləri, işıqlı/qaranlıq/kontrast rejimləri.
8. Portable: ixrac/idxal JSON/YAML; sxemlərin versiyalaşdırılması.

3) Məlumat modeli (sadələşdirilmiş)

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, bağlayıcılar və bələdçilər

Mesh: masaüstü üçün 12 sütun, planşet üçün 6 sütun, telefonlar üçün 4 sütun; sabit şaquli addım üçün 'rowHeight' eynidir.
Snapping: kənarları/mərkəzləri bağlamaq; «maqnitlər» 4/8 px; qonşulara yaxınlaşarkən ağıllı bələdçilər.
Auto-flow: toqquşma zamanı aşağıda avtomatik transfer; «düşən bloklar» alqoritmi.
Responsivlik: breakpoints → alternativ 'pos' altında hər breakpoint.

5) DnD-hadisə və vəziyyət

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

• Ghost/Preview: sürükləmə zamanı yarı şəffaf kontur.
• Placeholders: icazə verilən zonalar (yaşıl işıqlandırma), qadağan (qırmızı).
• Collision map: işğal edilmiş hüceyrələrin sürətli hesablanması (bitset/interval tree).

6) Resize, hizalama, z-index

Bucaqlarda resayz qələmləri + nisbətləri saxlamaq üçün 'Shift' saxlayın.
Qrupun bərabərləşdirilməsi: «sol/sağ kənarda», «mərkəzdə», «bərabər payla».
Üst-üstə düşmə səviyyələri: 'z' diapazonu ilə, «ön/arxa» düymələri.

7) Qruplar, konteynerlər və daxili

Qruplar: çox seçmə, birgə sürükləmə, qrup hizalaması.
Konteyner-widget: tablar, akkordeonlar, karusellər - qız widget qəbul edə bilər.
Konteyner məhdudlaşdırıcıları: xarici şəbəkə ≠ daxili (digər sütunlar).

8) Presetlər (şablonlar) və versiyalar

Presets növləri: layout, mövzu (theme), «widgets dəsti», «düzən + məlumatlar».
Version: 'semver' sxem və miqrasiya (map sahələri, defoltlar).
Preview & Apply: tətbiq əvvəl önizleme.
Scoped presets: şəxsi, komanda, qlobal; oxu/redaktə hüququ.
İxrac/idxal: JSON/YAML, imza nəzarət məbləği, versiyanın uyğunluğunun yoxlanılması.

9) Əlçatanlıq (A11y) və klaviatura

• 'Enter/Space' - köçürməyə başlamaq; oxlar - mesh addım hərəkət; 'Shift' + oxlar - sürətli addım; 'Esc' - ləğv.
• 'Ctrl/Cmd + G' - qruplaşdırmaq; 'Ctrl/Cmd + Shift + G' - qruplaşdırmaq.
• 'Alt' - şəbəkə bağlantısını müvəqqəti olaraq kəsin.
• SR: "Köçürüldü (x, y). Yapışma: daxil. Münaqişə: bəli/yox".
• Focus-ring, böyük resaise tutacaqları, təsviri olan drop zonaları.

10) Taç və mobil nümunələr

DnD başlanğıc üçün Long-press (300-500 ms).
Artırılmış hədəflər (minimum 40-48 px).
Adaptiv alətlər paneli (alt dock paneli).
«Redaktə rejimi»: kənara köçürüldükdə kətan sürüşməsinin bloklanması, şaquli avtokroll.

11) Widgets hərəkətləri (Actionable Widgets)

Daxili CTA (düymə), kontekstli menyu, drag-clone (Alt tutma ilə dublyaj).
Widget üçün «sürətli presetlər» (sıxlıq, əfsanə, rəng sxemi).
Hallar: yükləmə/empty/error, təhlükəsiz qapaqlar («məlumatlar geri qalır»).

12) Birgə iş və nəşrlər

Realtime: CRDT (Yjs) və ya OT (Quill-yanaşma) - iştirakçıların kursorları, qrupların bloklanması.
Hüquqlar: 'Owner', 'Editor', 'Viewer'; şəkil yayımı (immutable snapshot).
Axınlar: layihə → review → nəşr; dəyişikliklərin müqayisəsi (diff layout's).

13) Undo/Redo və avtomobil qorunması

Komanda şini: hər bir əməliyyat 'do/undo' ilə komandadır.
Müştərinin jurnalı (in-memory + periodik persist), uzunluğu üzrə limit.
Auto-save: Hər N saniyə/ilə 'idle', «Saxlanıldı» göstəricisi ilə.

14) Temizləşdirmə və dizayn tokenləri

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

Layout sayılmadan mövzuların dəyişdirilməsi (yalnız vizual tokenlər).
AA/AAA kontrast, High-Contrast rejimi, düzgün boz ilə qaranlıq mövzu.

15) Performans

Qat-qat (mürəkkəb qrafiklər üçün canvas/webgl, xrom üçün DOM).
Siyahıların/cədvəllərin virtuallaşdırılması, throttle 'drag' (16 ms), requestAnimationFrame.
Diff-render: yalnız dəyişdirilmiş widget 'ları yenidən çəkin.
Konfliktlərin və bələdçilərin sayılması.

16) Təhlükəsizlik və məzmun qorunması

HTML widgets üçün sanbox (iframe, CSP, 'sandbox' bayraqlar).
Damcıların məhdudlaşdırılması: whitelist növləri (fayllar, bağlantılar, JSON presets); ölçüsü və məzmunu yoxlamaq.
Preset hüquqları (RBAC/ABAC), ixrac/idxal auditi.

17) API widget (müqavilə)

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

Həyat dövrü hadisələri: 'mount', 'resize', 'visibilityChange'.
Nəşrdən əvvəl propların təsdiqi.

18) İdxal/ixrac və miqrasiya

İxrac edir: 'grid', 'widgets', 'theme', 'meta'.
İdxal: sxem versiyalarının yoxlanılması, avtomatik miqrasiyalar (map sahələri/defoltlar), hesabat.
bütövlüyü təmin etmək üçün hash ilə lock-file preset.

19) Qaynar düymələr (tövsiyə olunur)

Naviqasiya: '← ↑ → ↓' - hərəkət; 'Shift' + oxları - sürətli addım.
Resize: 'Alt' + ok.
Əməliyyatlar: 'Ctrl/Cmd + D' - dublikat; 'Ctrl/Cmd + G' - qrup; 'Ctrl/Cmd + Shift + G' - alt qrup.
Səviyyələr: '['/']' - z-index üzrə geri/irəli.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
Presets: 'Ctrl/Cmd + 1.. 9' - tez saxlanılan tətbiq.

20) UX nümunələri

İlk başlanğıcda sürətli qaydalar (3-5 addımlıq mikro-bağlama).
Grid rejimi: «grid göstərmək/gizlətmək» açarı.
Toqquşmalarda inline ipuçları («əlçatmaz: minimum widget eni = 3»).
Maket tarixi: əvvəlki versiyaya qayıdış.

21) Test planı

Birlik: toqquşmaların hesablanması, snapping, validator constraints.
Inteqrasiya: DnD siçan/touch/klaviatura; qruplaşmalar; konteynerlər.
E2E: daşbordun sıfırdan yığılması, preset tətbiqi, nəşr, ixrac/idxal.
Xaos: render gecikmələri, əlaqənin itirilməsi (realtime), hüquqların toqquşması.
A11y: klaviatura ssenariləri, SR-səs, kontrast.

22) Giriş çek siyahısı

• Mesh/breakpoint və snapping xüsusi
• Resize/qruplar/hizalama iş və test
• Klaviatura DnD və ekran ipuçları daxildir
• Avtoseyv, undo/redo, maket tarixi
• Presets: versiyalar, hüquqlar, ixrac/idxal
• Mövzular və dizayn işarələri, High-Contrast rejimi
• Realtime-əməkdaşlıq və münaqişələrin həlli
• Damcıların məhdudlaşdırılması, faylların təsdiqlənməsi, HTML sandbox
• Metriklər: adoption, ilk yerləşdirmə vaxtı, toqquşma səhvləri

23) Mini-FAQ

Niyə pulsuz koordinatlar deyil, yalnız şəbəkə?
Mesh hizalamanı, adaptasiyanı, presetlərin tolerantlığını və performansını asanlaşdırır.

Breakpoint altında müxtəlif layout 'saxlamaq üçün necə?
Hər bir widget - avtomatik fall-back ilə breakpoint (desktop/tablet/mobile) üçün 'pos'.

Əməkdaşlıq üçün nə seçmək lazımdır - OT və ya CRDT?
CRDT offline/münaqişələr üçün asandır; OT - xətti mətn əməliyyatları üçün ok. Layout üçün daha çox CRDT alınır.

Yekun

Yaxşı Drag & Drop widgets yalnız «kartı sürükləmək» deyil. Bunlar: sərt mesh və snapping, rahat qruplar və hizalama, klaviatura ilə əlçatanlıq, versiyaları və ixracı ilə sabit presetlər, təhlükəsiz nəşrlər və əməkdaşlıq. Bunu UX və test planı ilə düşünülmüş etibarlı bir məlumat modeli ətrafında qurun və konstruktor sürətli, anlaşıqlı və artan məzmun və əmrlərə davamlı olacaq.