kazachilo/StickerAI-Front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
StickerAI-Front/Редактор_стикеров_план_реализации.md
kazachilo 971d76e3d5 рупное обновление: добавлен редактор стикеров, offerwall, обновлены UI компоненты 
- ✨ обавлен редактор стикеров (StickerEditorScreen.tsx)
- 💰 обавлена offerwall функциональность
- 🎨 обавлены Figma дизайн-файлы
- 🔧 обавлены конфигурации редактора (editorFonts.ts, editorStickers.ts)
- 🎯 бновлены компоненты: Gallery, Profile, Header, TokenPacks
- 📱 бновлены onboarding экраны и стили
- 📦 бновлены зависимости проекта
- ��️ обавлены новые изображения для onboarding
- 📋 обавлен план реализации редактора стикеров
2025-06-30 16:22:55 +03:00

6.5 KiB
Raw Permalink Blame History

План внедрения редактора стикеров для Telegram Mini App

1. Кнопка "Редактировать" и роутинг

  • Добавить кнопку/иконку "Редактировать" на каждый стикер в галерее.
  • При нажатии — переход на экран /edit/:stickerId, где stickerId — идентификатор стикера (или file_id).
  • На экран редактора передаётся webp-стикер 512x512 с прозрачным фоном.

2. Экран редактора (MVP)

  • Технология: React + react-konva (canvas-редактирование, поддержка мобильных жестов, drag-n-drop, масштабирование, поворот).
  • Холст: фиксированный размер 512x512, webp-стикер как прозрачный фон.
  • Инструменты:
    • Масштабирование и перемещение самого стикера (фонового слоя).
    • Добавление текста (выбор шрифта из выпадающего списка, цвета из палитры, размер, позиция, поворот, обводка).
    • Добавление PNG/эмодзи (drag-n-drop, resize, rotate, перемещение).
    • Удаление объектов.
  • История изменений: стек undo/redo (реализуется через массив состояний редактора, можно использовать useReducer или отдельную библиотеку типа use-undo).
  • UI: крупные кнопки, панель инструментов снизу/сбоку, адаптация под мобильные (touch-жесты).

3. Сохранение результата

  • Экспорт canvas в webp 512x512 (react-konva поддерживает toDataURL с нужным форматом и размером).
  • Модальное окно подтверждения сохранения (в стиле NotificationModal, как в проекте).
  • Отправка изображения на сервер через ваш эндпоинт (с телеграм id).
  • После успешного сохранения — возврат в галерею (или показ уведомления).

4. Расширяемость и удобство

  • Шрифты:
    • Список шрифтов хранить в конфиге (например, src/config/editorFonts.ts).
    • Добавлять новые шрифты — просто дописывать в конфиг и подключать через Google Fonts.
  • Палитра цветов:
    • Использовать готовый компонент color picker (например, 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 — максимально близок к мобильным привычкам.