971d76e3d5
- ✨ обавлен редактор стикеров (StickerEditorScreen.tsx) - 💰 обавлена offerwall функциональность - 🎨 обавлены Figma дизайн-файлы - 🔧 обавлены конфигурации редактора (editorFonts.ts, editorStickers.ts) - 🎯 бновлены компоненты: Gallery, Profile, Header, TokenPacks - 📱 бновлены onboarding экраны и стили - 📦 бновлены зависимости проекта - ��️ обавлены новые изображения для onboarding - 📋 обавлен план реализации редактора стикеров
92 lines
6.5 KiB
Markdown
92 lines
6.5 KiB
Markdown
# План внедрения редактора стикеров для Telegram Mini App
|
||
|
||
## 1. Кнопка "Редактировать" и роутинг
|
||
|
||
- Добавить кнопку/иконку "Редактировать" на каждый стикер в галерее.
|
||
- При нажатии — переход на экран `/edit/:stickerId`, где stickerId — идентификатор стикера (или file_id).
|
||
- На экран редактора передаётся webp-стикер 512x512 с прозрачным фоном.
|
||
|
||
---
|
||
|
||
## 2. Экран редактора (MVP)
|
||
|
||
- **Технология:** React + [react-konva](https://konvajs.org/docs/react/index.html) (canvas-редактирование, поддержка мобильных жестов, drag-n-drop, масштабирование, поворот).
|
||
- **Холст:** фиксированный размер 512x512, webp-стикер как прозрачный фон.
|
||
- **Инструменты:**
|
||
- Масштабирование и перемещение самого стикера (фонового слоя).
|
||
- Добавление текста (выбор шрифта из выпадающего списка, цвета из палитры, размер, позиция, поворот, обводка).
|
||
- Добавление PNG/эмодзи (drag-n-drop, resize, rotate, перемещение).
|
||
- Удаление объектов.
|
||
- **История изменений:** стек undo/redo (реализуется через массив состояний редактора, можно использовать useReducer или отдельную библиотеку типа [use-undo](https://github.com/aaronpowell/react-use-undo)).
|
||
- **UI:** крупные кнопки, панель инструментов снизу/сбоку, адаптация под мобильные (touch-жесты).
|
||
|
||
---
|
||
|
||
## 3. Сохранение результата
|
||
|
||
- Экспорт canvas в webp 512x512 (react-konva поддерживает toDataURL с нужным форматом и размером).
|
||
- Модальное окно подтверждения сохранения (в стиле NotificationModal, как в проекте).
|
||
- Отправка изображения на сервер через ваш эндпоинт (с телеграм id).
|
||
- После успешного сохранения — возврат в галерею (или показ уведомления).
|
||
|
||
---
|
||
|
||
## 4. Расширяемость и удобство
|
||
|
||
- **Шрифты:**
|
||
- Список шрифтов хранить в конфиге (например, src/config/editorFonts.ts).
|
||
- Добавлять новые шрифты — просто дописывать в конфиг и подключать через Google Fonts.
|
||
- **Палитра цветов:**
|
||
- Использовать готовый компонент color picker (например, [react-colorful](https://omgovich.github.io/react-colorful/)), палитру можно расширять.
|
||
- **Набор эмодзи/картинок:**
|
||
- Хранить в src/assets/editor-stickers/ (SVG/PNG/WebP).
|
||
- Добавлять новые — просто копировать в папку и прописывать в конфиге.
|
||
- **Предупреждение о несохранённых изменениях:**
|
||
- При попытке выхода из редактора без сохранения — показывать модальное окно с подтверждением.
|
||
|
||
---
|
||
|
||
## UX-детали
|
||
|
||
- Пользователь всегда видит результат редактирования в реальном времени.
|
||
- Все действия (масштабирование, перемещение, поворот) доступны для любого объекта, включая сам стикер.
|
||
- История изменений (undo/redo) работает в рамках одной сессии редактирования.
|
||
- Сохранение всегда в формате webp 512x512 с прозрачным фоном.
|
||
- Мобильная адаптация — приоритет (крупные кнопки, поддержка touch-жестов).
|
||
|
||
---
|
||
|
||
## Сложность и сроки
|
||
|
||
- MVP (редактирование, undo/redo, сохранение, мобильная адаптация): 2-3 недели.
|
||
- Добавление новых шрифтов/эмодзи — не требует изменений в коде, только в конфиге/папке.
|
||
- UI/UX — минимальные риски для остального приложения, редактор полностью изолирован.
|
||
|
||
---
|
||
|
||
## Вопросы и ответы
|
||
|
||
- **Ограничение на количество объектов:** не требуется.
|
||
- **Шрифты:** список в конфиге, легко расширять.
|
||
- **Цвета:** палитра, легко расширять.
|
||
- **Предпросмотр:** не нужен, пользователь видит результат сразу.
|
||
- **Модальное окно подтверждения:** обязательно, в стиле NotificationModal.
|
||
- **Набор эмодзи/картинок:** система через папку и конфиг, легко расширять.
|
||
- **Предупреждение о несохранённых изменениях:** обязательно.
|
||
|
||
---
|
||
|
||
## Примерная структура компонентов
|
||
|
||
- GallerySticker (с кнопкой "Редактировать")
|
||
- StickerEditorScreen (отдельный экран)
|
||
- EditorCanvas (react-konva)
|
||
- Toolbar (инструменты: текст, эмодзи, undo/redo, сохранить)
|
||
- ColorPicker, FontPicker, EmojiPicker (модальные/панельные компоненты)
|
||
- ConfirmModal (подтверждение сохранения/выхода)
|
||
|
||
---
|
||
|
||
**Резюме:**
|
||
Редактор внедряется как отдельный экран, не затрагивает остальной функционал. Использование react-konva обеспечивает мобильную совместимость и нужный функционал. Все ресурсы (шрифты, эмодзи) легко расширяемы через конфиг/папку. UX — максимально близок к мобильным привычкам.
|