import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/scripts/Classes/DesignFlags - Генератор спрайтов флагов'/>

# Класс DesignFlags

Класс `DesignFlags` предоставляет автоматизированное решение для генерации оптимизированных спрайтов изображений из коллекции SVG-иконок флагов. Он управляет рендерингом на основе холста, расчетом сетки и созданием файлов CSS-маппинга для эффективного отображения иконок с использованием позиционирования фона.

## Ключевые особенности

- **Автоматическая сборка спрайта** — объединяет множество отдельных SVG-файлов в один оптимизированный спрайт формата `.webp`.
- **Динамическая генерация CSS** — автоматически создает утилитарные классы с точными значениями `background-position` для каждого флага.
- **Настраиваемая сетка** — позволяет настраивать размеры флагов и количество колонок в результирующем изображении.
- **Рендеринг на базе холста** — использует высокопроизводительную обработку изображений для плавного преобразования и масштабирования.
- **Сохранение пропорций** — гарантирует центрирование флагов внутри ячеек сетки с сохранением оригинальных пропорций дизайна.

## Инициализация

Для инициализации генератора укажите исходную директорию и желаемые пропорции вывода.

**Параметры:**
- `dir: string` — путь к директории, где расположены исходные SVG-иконки флагов.
- `width: number` — целевая ширина одного флага в сгенерированном спрайте (по умолчанию: 96).
- `height: number` — целевая высота одного флага в сгенерированном спрайте (по умолчанию: 72).
- `columns: number` — количество колонок иконок в сетке спрайта (по умолчанию: 12).

```typescript
import { DesignFlags } from '@dxtmisha/scripts'

const generator = new DesignFlags('assets/flags', 64, 48)
generator.make()
```

## Методы

### Управление

- `make(): Promise<void>` — координирует весь процесс: чтение файлов, отрисовку на холсте, сохранение изображения и запись CSS-файла.

### Информация

- `getLines(): number` — вычисляет общее количество строк, необходимых в сетке спрайта, на основе количества файлов и лимита колонок.

## Операции

### Рабочий процесс генерации

При выполнении `make()` класс выполняет следующие шаги:
1. **Обнаружение**: сканирует исходную директорию на наличие `.svg` файлов и инициализирует размеры сетки.
2. **Расчет макета**: определяет смещения плиток и поля центрирования для указанных размеров флагов.
3. **Отрисовка на холсте**: итеративно загружает каждое изображение и рисует его на холсте спрайта в рассчитанных координатах сетки.
4. **Сбор данных**: записывает имя и координаты каждого флага для создания данных маппинга.
5. **Экспорт ресурсов**: 
    - сохраняет содержимое холста как изображение `webp` в директории `assets`.
    - генерирует файл `flags.css` с определениями корневых переменных и индивидуальными классами-модификаторами `--[name]`.

### Реализация стилей

Сгенерированный CSS использует централизованный класс `.ui-sys-flags`, который хранит переменные размеров и ссылку на фоновое изображение. Индивидуальные модификаторы (например, `.ui-sys-flags--ru`) затем обновляют `background-position` для изоляции конкретных иконок, сводя к минимуму количество вызовов отрисовки в браузере и HTTP-запросов.
