Drag & Drop-виджеттер жана алдын ала жазуулар

1) Концепция жана сценарийлер

Drag & Drop-виджеттер - колдонуучу торго байланган кенепке эркин жайгаштырган интерактивдүү блоктор (графикалык карталар, таблицалар, фильтрлер, баскычтар). Presets - сакталган макеттер жана стилдерди (layout + тема + параметрлер), алар тез колдонула алат, бөлүшө жана версиялоо.

• Даяр блоктордон дашбордду чогултуу (KPI карталары, графиктер, фильтрлер).
• "Компакт", "Аналитика", "Презентация" пресеттери аркылуу макетти тез алмаштыруу.
• Биргелешип түзөтүү: Product widget жайгаштырат, аналитик булактарды орнотот.
• Стейкхолдерлер үчүн "гана окуу" жарыялоо.

2) Архитектуралык принциптер

1. Grid-first: логикалык тилке/саптарда жайгаштыруу (12/24), пиксел - туунду.
2. Snapping & Жол: магниттик жол, торго жана кошуналарга жабышып, тегиздөө.
3. Constraint-aware: өлчөмдөрдү/пропорцияларды чектөөчүлөр, min/max, lock-aspect.
4. Safe-by-default: үзгүлтүксүз auto сактоо, транзакциялык жарыялоо, undo/redo.
5. A11y-first: DnD клавиатура жана үн өзгөрүүлөр менен.
6. Realtime-ready: CRDT/OT көп колдонуучу сессиялар үчүн.
7. Themable: дизайн-токендер, тема алдын ала жазуулар, режимдери жарык/караңгы/карама-каршы.
8. Portable: экспорт/импорт JSON/YAML; схемаларды версиялоо.

3) Маалыматтар модели (жөнөкөйлөштүрүлгөн)

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, байлоо жана багыт

Grid: 12 столдор үчүн, 6 - планшет үчүн, 4 - телефондор үчүн; 'rowHeight' туруктуу тик кадам үчүн бирдей.
Snapping: четине/борборлоруна байлап; 4/8 px боюнча "магниттер"; коңшуларына жакындаганда акылдуу гайддар.
Auto-flow: кагылышуу учурунда төмөндө автоматтык өткөрүп берүү; "кулап блоктордун" алгоритми.
Респонсивдүүлүк: breakpoints → альтернатива 'pos' ар бир брейк-пойнт астында.

5) DnD-окуялар жана шарттар

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

• Ghost/Preview: сүйрөп жатканда жарым тунук контур.
• Placeholders: уруксат берилген зоналар (жашыл жарык), тыюу салынган (кызыл).
• Collision map: ээлеп турган клеткаларды тез эсептөө (bitset/interval tree).

6) кайра иштетүү, тегиздөө, z-индекс

бурчтары + пропорцияларды сактоо үчүн 'Shift' кармоо үчүн ресайз туткалары.
Топту тегиздөө: "сол/оң чети боюнча", "борбору боюнча", "бирдей бөлүштүрүү".
Аралаштыруу деңгээли: 'z' диапазону боюнча чектөө менен, "алдыңкы/арткы" баскычтары.

7) Топтор, контейнерлер жана салым

Топтор: көп тандоо, чогуу сүйрөө, топтук тегиздөө.
Контейнер-виджеттер: табалар, аккордеондор, карусельдер - кыздык виджеттерди кабыл алууну билишет.
Контейнер чектөөчүлөр: тышкы тор ≠ ички (башка мамычалар).

8) Presets (үлгүлөрү) жана нускалары

Пресеттердин түрлөрү: layout, тема (тема), "виджеттер топтому", "макет + маалыматтар".
Версиялоо: 'semver' схемалар жана миграция (талаа карталар, дефолттар).
Preview & Apply: колдонуудан мурун алдын ала көрүү.
Scoped presets: жеке, командалык, глобалдык; окуу/түзөтүү укугу.
Экспорт/импорт: JSON/YAML, кол контролдук суммасы, версия шайкештигин текшерүү.

9) Жеткиликтүүлүк (A11y) жана клавиатура

• 'Enter/Space' - которууну баштоо; жебелер - тор кадам көчүп; 'Shift' + жебелер - тездетилген кадам; 'Esc' - жокко чыгаруу.
• 'Ctrl/Cmd + G' - топтоо; 'Ctrl/Cmd + Shift + G' - топтоштуруу.
• 'Alt' - тор байланышын убактылуу өчүрүү.
• SR үн: "көчүп (x, y). Жабышуу: камтылган. Чыр-чатак: ооба/жок".
• Focus шакек, ири туткалары resaise, сүрөттөлүшү менен тешик зоналары.

10) Tach жана мобилдик үлгүлөрү

DnD баштоо үчүн Long-press (300-500 ms).
Чоңойтулган максаттар (кеминде 40-48 px).
Адаптивдик аспаптар панелдери (төмөнкү док-панель).
"Түзөтүү режими": четтерине которулганда кенептин тоголотуп кулпу, тик auto-скролл.

11) Widgets иш-аракеттер (Actionable Widgets)

Камтылган CTA (баскычы), контексттик меню, drag-clone ('Alt' кармап калуу менен кайталоо).
Widget үчүн "Fast Presets" (тыгыздыгы, легенда, түс схемасы).
Шарттар: loading/empty/error, коопсуз штепсель ("маалыматтар артта").

12) Биргелешип иштөө жана жарыялоо

Realtime: CRDT (мисалы, Yjs) же OT (Quill-мамиле) - катышуучулардын курсорлору, топторду бөгөттөө.
Укук: 'Owner', 'Editor', 'Viewer'; сүрөттү жарыялоо (immutable snapshot).
Агымдар: долбоор → review → жарыялоо; өзгөрүүлөрдү салыштыруу (diff layout's).

13) Undo/Redo жана унаа сактоо

Командалык дөңгөлөк: ар бир операция команда менен 'do/undo'.
Кардар боюнча журнал (in-memory + мезгилдүү persist), узундугу боюнча лимит.
Auto-save: ар бир N секунд/' idle ', "Сакталган" көрсөткүчү менен.

14) Темификация жана дизайн-токендер

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

Кайра эсептелбестен темаларды которуу (визуалдык токендер гана).
Контраст AA/AAA, High-Contrast режими, туура боз менен караңгы тема.

15) аткаруу

Катмарларга сызуу (татаал графиктер үчүн canvas/webgl, хром үчүн DOM).
Тизмелерди/таблицаларды виртуалдаштыруу, throttle 'drag' (16 ms), requestAnimationFrame.
Дифф-рендер: өзгөргөн виджеттерди гана кайра тартуу.
Чыр-чатактарды жана гайдлайндарды эсептөө кэши.

16) Коопсуздук жана мазмунду коргоо

HTML Widget үчүн Sunbox (iframe, CSP, 'sandbox' желектери).
Дропторду чектөө: whitelist түрлөрү (файлдар, шилтемелер, JSON алдын ала жазуулар); өлчөмүн жана мазмунун текшерүү.
Presets укуктары (RBAC/ABAC), экспорт/импорт аудит.

17) 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'.
Жарыялоого чейин пропстерди валидациялоо.

18) Импорт/экспорт жана миграция

Экспорттойт: 'grid', 'widgets', 'theme', 'meta'.
Импорт: схемасы нускасын текшерүү, автоматтык көчүрүү (талаа/демейки карта), отчет.
бүтүндүгүн камсыз кылуу үчүн хэш менен жабуу-file алдын ала.

19) ысык баскычтар (сунуш)

Навигация: '← ↑ → ↓' - жылдыруу; 'Shift' + жебелер - тез кадам.
Кайра карап чыгуу: 'Alt' + жебелер.
Операциялар: 'Ctrl/Cmd + D' - кайталоо; 'Ctrl/Cmd + G' - топ; 'Ctrl/Cmd + Shift + G' - топтоо.
деңгээл: '['/']' - z-индекс боюнча артка/алдыга.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
Presets: 'Ctrl/Cmd + 1.. 9' - тез сакталган колдонуу.

20) UX үлгүлөрү

Биринчи учурууда тез гиддер (3-5 кадам үчүн микро-чогултуу).
Тор режими: "тор көрсөтүү/жашыруу" баскычы.
Коллизиялар боюнча инлайн кеңештери ("жеткиликтүү эмес: минималдуу виджет туурасы = 3").
Макеттердин тарыхы: мурунку версияга кайтуу.

21) Тест-план

Бирдик: коллизияларды эсептөө, снаппинг, валидатор constraints.
Интеграция: DnD чычкан/тачем/клавиатура; топтордун; контейнерлер.
E2E: dashbord "нөлдөн" чогултуу, алдын ала колдонуу, жарыялоо, экспорт/импорт.
Башаламандык: рендер кечигүү, байланыш жоготуу (реалдуу убакыт), укук чыр-чатак.
A11y: клавиатура скрипт, SR-үн, карама-каршы.

22) Киргизүү чек-тизмеси

• тор/breakpoint жана snapping орнотулган
• Кайра иштетүү/топтор/тегиздөө иштеп жана сыналган
• Klaviatura DnD жана экрандын учтары кирет
• Automobile, undo/redo, макеттердин тарыхы
• Алдын ала: версиялар, укуктар, экспорт/импорт
• Темалар жана дизайн белгилер, High-Contrast режими
• Реалдуу убакыт кызматташтыгы жана чыр-чатактарды чечүү
• Тамчылаткычтарды чектөө, файлдарды валидациялоо, HTML sandbox
• Metrics: adoption, биринчи жайгаштыруу үчүн убакыт, карама-каршы каталар

23) Mini-FAQ

Эмне үчүн гана сетка эмес, эркин координаттары?
Тор тегиздөө, ылайыкташтыруу, алдын ала эскертүүлөрдү чыдамкайлык жана аткаруу жардам берет.

Кантип ар кандай layout's breakpoint астында сактоо керек?
Ар бир widget - автоматтык fall-back менен breakpoint (desktop/tablet/mobile) үчүн 'pos'.

кызматташуу үчүн эмне тандоо керек - OT же CRDT?
CRDT оффлайн/чыр-чатактар үчүн жеңил; OT - сызыктуу текст иштери үчүн ок. Layout үчүн көбүнчө CRDT алынат.

Жыйынтык

Жакшы Drag & Drop-виджеттер - бул жөн гана "картаны сүйрөп" эмес. Бул: катуу тор жана snapping, ыңгайлуу топтор жана тегиздөө, клавиатурадан жеткиликтүүлүк, версиялар жана экспорт менен туруктуу алдын ала жазуулар, коопсуз басылмалар жана биргелешип иштөө. Аны UX жана тест-пландын ишенимдүү маалымат моделинин айланасында куруңуз - жана конструктор тез, түшүнүктүү жана мазмундун жана буйруктардын өсүшүнө туруктуу болот.