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` схемы и миграции (map полей, дефолты).
Preview & Apply: предварительный просмотр до применения.
Scoped presets: личные, командные, глобальные; права на чтение/редактирование.
Экспорт/импорт: JSON/YAML, подпись контрольной суммой, проверка совместимости версии.

9) Доступность (A11y) и клавиатура

• `Enter/Space` — начать перенос; стрелки — перемещение на шаг сетки; `Shift`+стрелки — ускоренный шаг; `Esc` — отмена.
• `Ctrl/Cmd+G` — группировать; `Ctrl/Cmd+Shift+G` — разгруппировать.
• `Alt` — временно отключить привязку к сетке.
• Озвучка SR: «Перемещено на (x, y). Прилипание: включено. Конфликт: да/нет».
• Фокус-кольца, крупные ручки ресайза, зоны дропа с описанием.

10) Тач и мобильные паттерны

Long-press (300–500 мс) для старта DnD.
Увеличенные таргеты (минимум 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’ов).

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`.
Импорт: проверка версий схемы, автоматические миграции (map полей/дефолты), отчет.
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’ы под брейкпоинты?
У каждого виджета — `pos` на брейкпоинт (desktop/tablet/mobile) с автоматическим fall-back.

Что выбрать для коллаборации — OT или CRDT?
CRDT проще для offline/конфликтов; OT — ок для линейных текстовых операций. Для layout чаще берут CRDT.

Итог

Хорошие Drag & Drop-виджеты — это не только «перетащить карточку». Это: строгая сетка и снаппинг, удобные группы и выравнивание, доступность с клавиатуры, стабильные пресеты с версиями и экспортом, безопасные публикации и совместная работа. Постройте это вокруг надежной модели данных, продуманного UX и тест-плана — и конструктор станет быстрым, понятным и устойчивым к росту контента и команд.