Drag & Drop-виджеттер мен пресеттер

1) Тұжырымдама және сценарийлер

Drag & Drop-виджеттер - пайдаланушы тор байланыстырылған кенепке еркін орналастыратын интерактивті блоктар (графика карточкалары, кестелер, сүзгілер, әрекет түймешіктері). Пресеттер - тез қолдануға, бөлісуге және нұсқалауға болатын сақталған орналасулар мен стильдер (layout + тақырып + параметрлер).

• Дайын блоктардан дашборд құрастыру (KPI карточкалары, графиктер, сүзгілер).
• «Ықшам», «Аналитика», «Презентация» пресеттері арқылы орналасуды жылдам ауыстыру.
• Ортақ редакциялау: өнім түрі виджеттерді орналастырады, талдаушы көздерді теңшейді.
• Стейкхолдерлер үшін «тек оқу» жариялау.

2) Сәулет қағидаттары

1. Grid-first: логикалық бағандарда/жолдарда орналасу (12/24), пикселдер - туынды.
2. Snapping & Guides: магниттік бағыттауыштар, торға және көршілерге жабысу, тегістеу.
3. Constraint-aware: өлшем/пропорция шектегіштері, min/max, lock-aspect.
4. Safe-by-default: үздіксіз автосақтау, транзакциялық жарияланым, 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) Грид, байламдар және бағыттаушылар

Тор: 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-index

Бұрыштағы ресайз тұтқалары + пропорцияларды сақтау үшін 'Shift' ұстау.
Топты түзету: «сол/оң шеті бойынша», «ортасы бойынша», «біркелкі бөлу».
Бетке салу деңгейлері: 'z' диапазоны бойынша шектеумен, «алдыңғы/артқы» түймешігі.

7) Топтар, контейнерлер және ішіне салынуы

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

8) Пресеттер (үлгілер) және нұсқалар

Пресеттердің түрлері: layout, тақырып (theme), «виджеттер жиынтығы», «құрастыру + деректер».
Нұсқалау: 'semver' схемасы және көшіру (өрістердің картасы, дефолттар).
Preview & Apply: қолдануға дейін алдын ала қарау.
Scoped presets: жеке, командалық, жаһандық; оқу/редакциялау құқықтары.
Экспорт/импорт: JSON/YAML, бақылау сомасы қолтаңбасы, нұсқаның үйлесімділігін тексеру.

9) Қол жетімділік (A11y) және пернетақта

• 'Enter/Space' - ауыстыруды бастау; сілтемелер - тор қадамына жылжыту; 'Shift' + сілтемелер - жеделдетілген қадам; 'Esc' - болдырмау.
• 'Ctrl/Cmd + G' - топтастырылсын; 'Ctrl/Cmd + Shift + G' - топтастырылсын.
• 'Alt' - тор байланысын уақытша өшіру.
• SR дыбысы: "(x, y) көшірілді. Жабысу: қосылған. Қайшылық: иә/жоқ".
• Фокус-сақина, ресайздың ірі тұтқалары, сипаттамасы бар дроп аймақтары.

10) Тач және мобильді паттерндер

DnD бастау үшін Long-press (300-500 мс).
Үлкейтілген таргеттер (кемінде 40-48 px).
Бейімделетін құралдар тақтасы (төменгі док-тақтасы).
«Өңдеу режімі»: кенепті жылжытуды бұғаттау, шетіне жылжыту кезінде тік авто-скролл.

11) Виджеттердегі әрекеттер (Actionable Widgets)

Кірістірілген CTA (түймешік), мәтінмәндік мәзір, drag-clone ('Alt' ұстаумен қайталау).
Виджет үшін «жылдам пресеттер» (тығыздығы, аңыз, түс схемасы).
Күйі: loading/empty/error, қауіпсіз бітеуіштер («деректер артта қалады»).

12) Бірлескен жұмыс және жарияланымдар

Realtime: CRDT (мысалы, Yjs) немесе OT (Quill-тәсіл) - қатысушылардың, топтардың блоктау курсорлары.
Құқықтары: 'Owner', 'Editor', 'Viewer'; суретті жариялау (immutable snapshot).
Ағындар: жоба → жаңару → жариялау; өзгерістерді салыстыру (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" }
}
}

layout қайта санаусыз тақырыптарды ауыстырып қосу (тек көрнекі белгілер).
AA/AAA қарама-қайшылығы, High-Contrast режимі, күңгірт тақырыбы дұрыс сұр.

15) Өнімділік

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

16) Қауіпсіздік және мазмұнды қорғау

HTML виджеттеріне арналған санбокс (iframe, CSP, 'sandbox' жалаушалары).
Дроптарды шектеу: whitelist түрлері (файлдар, сілтемелер, JSON пресеттер); өлшемі мен мазмұнын тексеру.
Пресеттерге құқықтар (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'.
Импорт: схеманың нұсқаларын тексеру, автоматты көші-қон (өрістердің/дефолттардың картасы), есеп.
Тұтастыққа кепілдік беру үшін хэшті пресеттің lock-file.

19) Ыстық пернелер (ұсынылатын)

Навигация: '← ↑ → ↓' - жылжыту; 'Shift' + көрсеткілер - жылдам қадам.
Қайта есептеу: 'Alt' + көрсеткілер.
Операциялар: 'Ctrl/Cmd + D' - телнұсқа; 'Ctrl/Cmd + G' - топ; 'Ctrl/Cmd + Shift + G' - кіші топ.
Деңгейлер: '['/']' - z-index бойынша артқа/алға.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
Пресеттер: 'Ctrl/Cmd + 1.. 9' - сақталғандарын жылдам қолдану.

20) UX-үлгілер

Алғашқы іске қосу кезінде жылдам гайдтар (3-5 қадамға микро-онбординг).
Тор күйі: «тор көрсету/жасыру» қосқышы.
Коллизиялардағы инлайн-кеңестер («қол жетімді емес: ең кіші виджет ені = 3»).
Орналасу тарихы: алдыңғы нұсқаға оралу.

21) Тест-жоспар

Юнит: коллизияларды есептеу, снаппинг, валидатор constraints.
Интеграция: DnD тінтуір/қол/пернетақта; топтастыру; контейнерлер.
E2E: дашбордты «нөлден» құрастыру, пресетті қолдану, жариялау, экспорт/импорт.
Хаос: рендердің кідіруі, қосылымның жоғалуы (realtime), құқықтар қайшылығы.
A11y: клавиатуралық сценарийлер, SR-дыбыс шығару, контраст.

22) Енгізу чек-парағы

• Тор/брейк-пункттер және снаппинг теңшелген
• Қайта есептеу/топтар/теңестіру жұмыс істейді және сынақтан өткізілді
• DnD пернетақта және экрандық кеңестер қосылған
• Автосейв, undo/redo, орналасу тарихы
• Пресеттер: нұсқалар, құқықтар, экспорт/импорт
• Тақырыптар мен дизайн-токендер, High-Contrast режимі
• Realtime-коллаборациясы және жанжалдарды шешу
• Дроптарды шектеу, файлдарды валидациялау, sandbox HTML
• Өлшемдер: adoption, бірінші орналасуға дейінгі уақыт, коллизиялар қателері

23) Шағын FAQ

Неге бос координаттар емес, тек тор ғана?
Тор түзеуді, бейімдеуді, пресеттерге төзімділікті және өнімділікті жеңілдетеді.

Әртүрлі layout 'терін брейк-пойнттарда қалай сақтау керек?
Әрбір виджетте - автоматты fall-back бар брейкпоинтке (desktop/tablet/mobile) 'pos'.

Коллаборация үшін не таңдау керек - OT немесе CRDT?
CRDT оффлайн/қайшылықтар үшін оңай; OT - сызықтық мәтіндік операциялар үшін ок. Layout үшін көбінесе CRDT қолданылады.

Жиынтығы

Жақсы Drag & Drop-виджеттер тек «карточканы жылжыту» ғана емес. Бұл: қатаң тор және снаппинг, ыңғайлы топтар және тегістеу, клавиатурадан қол жетімділік, нұсқалары мен экспорты бар тұрақты пресеттер, қауіпсіз жарияланымдар және бірлескен жұмыс. Оны UX пен тест-жоспардың сенімді деректер моделінің айналасында жасаңыз - конструктор контент пен командалардың өсуіне тез, түсінікті және тұрақты болады.