mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
docs: update plans
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# План: герой-поиск v2 — иконки, популярность, карточки
|
||||
|
||||
> Статус: план к выполнению.
|
||||
> **СТАТУС: ВЫПОЛНЕН 2026-08-23.**
|
||||
|
||||
## 1. Что получается
|
||||
|
||||
+5
-27
@@ -1,42 +1,20 @@
|
||||
# Backlog
|
||||
|
||||
## 1. Популярность инструментов — оценка: S
|
||||
## 1. Несколько языков — оценка: L, разбита на подзадачи
|
||||
|
||||
Поле `popularity` (число) в записи реестра; проставить всем текущим инструментам значения вручную (crop/resize/rescale выше остальных).
|
||||
|
||||
- Сортировка выдачи поиска и каталога: сначала популярные среди равного скоринга.
|
||||
- Опционально: блок «Популярные» под героем поиска на главной.
|
||||
|
||||
## 2. Иконки инструментов — оценка: M
|
||||
|
||||
У каждой записи поле `icon`; отображается в результатах поиска, каталоге `/list-tools`, легендах шагов цепочки.
|
||||
|
||||
- Источник иконок: готовый открытый набор (Lucide, MIT) — подобрать по смыслу для всех инструментов; недостающие — нейтральная заглушка.
|
||||
- Рендер одним SVG-спрайтом, без отдельных файлов на иконку.
|
||||
- Кропотливая часть — подбор 50 осмысленных иконок, техника тривиальна.
|
||||
|
||||
## 3. Карточки результатов поиска — оценка: S
|
||||
|
||||
Заменить строки выдачи на карточки: иконка слева, название и описание справа; сетка в одну-две колонки в зависимости от размера героя.
|
||||
|
||||
- Зависимость: лучше делать после №1 (иконка), но можно раньше с плейсхолдером.
|
||||
- Сохранить клавиатурную навигацию ↑↓ Enter Esc и подсветку активной карточки.
|
||||
|
||||
## 4. Несколько языков — оценка: L, разбита на подзадачи
|
||||
|
||||
### 4a. Инфраструктура i18n — M
|
||||
### 1a. Инфраструктура i18n — M
|
||||
|
||||
Модуль словарей (`locales/ru.ts`, `locales/en.ts`), функция перевода с фолбэком на базовый язык, состояние активной локали (localStorage), переключатель в шапке, обновление `<html lang>`.
|
||||
|
||||
### 4b. Перевод каркаса интерфейса — S/M
|
||||
### 1b. Перевод каркаса интерфейса — S/M
|
||||
|
||||
Шапка, кнопки, подписи полей и состояний («Результат появится здесь», тексты ошибок исполнителя), главная-герой, страница каталога.
|
||||
|
||||
### 4c. Перевод контента реестра — L по объёму, механическая
|
||||
### 1c. Перевод контента реестра — L по объёму, механическая
|
||||
|
||||
Вынести title/description инструментов и label/options параметров в словари локалей с фолбэком. Объём: ~51 инструмент плюс параметры — основной трудозатратный кусок волны.
|
||||
|
||||
### 4d. Поиск по любому языку — M
|
||||
### 1d. Поиск по любому языку — M
|
||||
|
||||
Матчинг запроса против названий/описаний во всех поддерживаемых локалях сразу (не только активной); нормализация: нижний регистр, ё→е, снятие диакритики (NFD). Скоринг существующий сохраняется, лучшая локаль даёт балл.
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
# План: MEDIUM-волна №2 — морфология прозрачности
|
||||
|
||||
> Статус: план к выполнению.
|
||||
|
||||
## 1. Зачем
|
||||
|
||||
Одна пара функций — расширение и сужение непрозрачных областей — открывает целое семейство пользовательских операций: обводка логотипов и иконок, контуры, утолщение и утончение подписей, удаление мелкого мусора и закрытие дырок. Всё это частые запросы в наборах PNG-утилит, а ядро получается компактным и легко покрывается тестами.
|
||||
|
||||
## 2. Инструменты — 7 (все в категории «Прозрачность»)
|
||||
|
||||
- **Обвести PNG** (`add-stroke-png`) — кольцо выбранного цвета вокруг непрозрачного содержимого; параметры: цвет, толщина 1–10 px.
|
||||
- **Найти контур PNG** (`find-contour-png`) — линия по краю непрозрачных областей; параметр: толщина линии.
|
||||
- **Утолщить PNG** (`make-thicker-png`) — расширение содержимого на N пикселей.
|
||||
- **Утончить PNG** (`make-thinner-png`) — сужение содержимого на N пикселей.
|
||||
- **Жёсткие края PNG** (`harden-alpha-png`) — бинаризация альфы по порогу: полупрозрачность уходит, остаётся два состояния.
|
||||
- **Убрать мусор PNG** (`despeckle-alpha-png`) — открытие: удаляет одиночные полупрозрачные пиксели и мелкие крапинки.
|
||||
- **Закрыть дыры PNG** (`close-holes-png`) — закрытие: заполняет одиночные прозрачные точки внутри объекта.
|
||||
|
||||
Все операции применяются к альфа-каналу; RGB пикселей сохраняется.
|
||||
|
||||
## 3. Ядро `core/morphology.ts`
|
||||
|
||||
Чистые функции над бинарной маской и над альфа-каналом:
|
||||
|
||||
- `buildAlphaMask(img)` — 1 там, где альфа > 0.
|
||||
- `dilateMask(mask, w, h, radius, shape)` — расширение; `shape`: квадрат или диск (для обводок диск даёт ровную круглую линию).
|
||||
- `erodeMask(...)` — зеркальная операция.
|
||||
- `dilateImage / erodeImage(img, radiusPx)` — применяют маскирование к альфе изображения, RGB сохраняется.
|
||||
- Сборщики:
|
||||
- обводка: `dilate(mask) − mask` → новое кольцо заливается цветом;
|
||||
- контур: `mask − erode(mask)` → линия;
|
||||
- открытие: `erode → dilate`; закрытие: `dilate → erode`.
|
||||
- `hardenAlpha(img, thresholdPercent)` — отдельно от морфологии, но той же волной.
|
||||
|
||||
Структурирующий элемент при радиусе r — диск радиуса r (расстояние до центра ≤ r); квадрат не используем, чтобы углы обводок не были угловатыми.
|
||||
|
||||
## 4. Web Worker
|
||||
|
||||
Ничего не требуется: новые операции попадают в реестр, исполнитель автоматически исполняет их в воркере. Тесты ядра идут мимо воркера (чистые функции).
|
||||
|
||||
## 5. Этапы и проверки
|
||||
|
||||
- **A. Ядро** — `morphology.ts` + точные тесты на матрицах 5×5: расширение диска, сужение, открытие убирает одиночный пиксель, закрытие закрывает одиночную дыру, кольцо обводки нужного цвета и толщины. Проверка: `pnpm test/check`.
|
||||
- **B. Реестр** — семь записей, тест целостности обновляется (51 → 58). Проверка: `test/build`, визуально.
|
||||
- **C. Итог** — полный прогон, смоук §7.
|
||||
|
||||
## 6. Критерии готовности
|
||||
|
||||
- Семь новых инструментов работают на прозрачных PNG: обводка, контур, толще/тоньше, жёсткие края, убрать мусор, закрыть дыры.
|
||||
- Все операции детерминированы и покрыты юнит-тестами с ручными ожиданиями.
|
||||
- Исполнение автоматически идёт в воркере.
|
||||
- `test/check/build` зелёные, смоук §7 пройден.
|
||||
|
||||
## 7. Смоук-чеклист
|
||||
|
||||
1. Обводка толщиной 3 вокруг круглого стикера — ровное кольцо выбранного цвета, без угловатости.
|
||||
2. Толщина 1 — тонкая аккуратная линия; 10 — толстая, форма содержимого не искажается сверх роста.
|
||||
3. Контур показывает только край содержимого линией.
|
||||
4. Толще/тоньше на тонкой надписи — штрихи растут/сжимаются без разрывов при умеренных значениях.
|
||||
5. Жёсткие края: полупрозрачность исчезает, силуэт сохраняется.
|
||||
6. Убрать мусор убирает одиночные точки-крапинки, не трогая крупные области.
|
||||
7. Закрыть дыры заполняет одиночные прозрачные точки внутри логотипа.
|
||||
8. Цепочка: обводка после удаления фона работает; каждое звено скачивает свой промежуток.
|
||||
9. Регресс остальных инструментов без изменений.
|
||||
|
||||
## 8. Что сознательно не делаем
|
||||
|
||||
- Морфология по яркости для непрозрачных сканов — волна фокусируется на альфе прозрачных PNG.
|
||||
- Выбор структурирующего элемента пользователем — всегда диск.
|
||||
- Feather/свечение краёв — отдельная будущая задача поверх размытия.
|
||||
- Произвольные SVG-маски и градиентные обводки.
|
||||
Reference in New Issue
Block a user