Игорь Надеин 53ec1a7b87 feat: implement Telegram-style image dimension pre-loading to fix auto-scroll
- Backend: added width/height fields to MessageAttachment model with Pillow auto-extraction
- Migration: 0021_add_image_dimensions + populate_image_dimensions management command
- API: serialize width/height in messageAttachmentSerializer and consumers.py
- Frontend: switched from CSS aspect-ratio to explicit pixel calculation (Telegram approach)
  * messageRendererV2.js: calculate exact dimensions (maxWidth=500px, proportional height)
  * Fixes scroll jump issue: images now reserve exact space before loading
  * Debug logging added to validate dimension rendering
- Testing: 18/18 images populated successfully with dimensions

This prevents scroll position shifts when images load after initial positioning,
implementing the same approach as Telegram Web.

Related: scroll positioning, image preloading, chat UX
2026-01-14 17:32:06 +03:00
..

Backend Documentation

Техническая документация по backend части проекта EUSRR.

📁 Структура

guides/

Руководства разработчика - инструкции по работе с различными модулями

  • CONTEXT_MENU_GUIDE.md - работа с контекстными меню
  • REACTIONS_GUIDE.md - система реакций

troubleshooting/

Отладка и исправления - диагностика проблем

  • CONTEXT_MENU_DEBUG.md - отладка контекстного меню
  • MESSAGE_DELETE_DEBUG.md - отладка удаления сообщений
  • MESSAGE_DELETE_FIX.md - исправление проблем удаления

architecture/

Архитектурная документация - устройство систем

  • API_ANALYSIS.md - анализ API
  • API_REFACTORING_SUMMARY.md - результаты рефакторинга API
  • VIEWSET_ANALYSIS.md - анализ ViewSet

testing/

Тестирование - планы и результаты тестирования

  • POSITION_PERMISSIONS_TESTING.md - тестирование прав должностей
  • REQUESTS_API_TESTING_PLAN.md - план тестирования API заявок
  • TEST_IMAGE_SCRIPTS.md - скрипты тестирования изображений

reports/

Отчеты и аудиты - результаты проверок и реорганизаций

  • BACKEND_CLEANUP_AUDIT.md - аудит очистки backend/
  • REQUESTS_API_TESTING_PLAN.md - план тестирования API заявок
  • TEST_IMAGE_SCRIPTS.md - скрипты тестирования изображений

🔍 Навигация

По типу задачи:

Связанная документация:

  • /docs/ - общая документация проекта
  • backend/scripts/ - вспомогательные скрипты

📝 Правила

Добавление новой документации:

  1. Guides - постоянные инструкции, reference материалы
  2. Troubleshooting - временные документы, после решения → удалить
  3. Architecture - долгосрочная документация, обновлять при изменениях
  4. Testing - планы тестирования, после завершения → архивировать

Формат файлов:

# Заголовок

**Дата:** DD.MM.YYYY  
**Автор:** Имя  
**Статус:** Актуально / Устарело / В процессе

## Описание
...

## Использование
...

## Примеры
...

🔄 Жизненный цикл

  1. Создание - документируйте новую фичу/проблему
  2. Актуализация - обновляйте при изменениях
  3. Архивация - после завершения/решения
  4. Удаление - если больше не актуально

Поддерживайте документацию актуальной! 📚