docs: update plans

2026-09-14 21:46:35 +00:00 · 2026-08-23 04:54:40 +05:00
parent aa5372b771
commit 7e391a420b
3 changed files with 72 additions and 20 deletions
@@ -1,6 +1,6 @@
 # План: декомпозиция страницы инструмента, реактивные параметры, предпросмотр маски
-> Статус: план к выполнению.
+> **СТАТУС: ВЫПОЛНЕН 2026-08-23.**
 ## 1. Зачем
@@ -1,25 +1,8 @@
 # Backlog
-## 1. Реактивные параметры без кнопки «Применить»
+## 1. Range-слайдеры и пипетка цвета
 Процесс надо выстроить автоматически: кнопка «Применить» не нужна — все изменения параметров должны применяться к результату реактивно, с дебаунсом (~200–400 мс после последнего изменения), чтобы не пересчитывать тяжёлые операции на каждое движение ползунка.
 - Убрать кнопку, статус «processing» показывать ненавязчиво (лёгкая индикация поверх превью).
 - Дебаунс + отмена устаревших запусков (актуален только последний набор параметров).
 - Распространить тот же механизм на будущий пайплайн-workspace.
 ## 2. Более user-friendly интерфейс
 Сделать управление параметрами удобнее:
- **Range slider вместо полей ввода** там, где это удобнее (яркость/контраст, качество JPEG/WebP, порог похожести) — желательно slider с присоединённым числовым значением.
+- **Range slider вместо полей ввода** там, где это удобно (яркость/контраст, качество JPEG/WebP, порог похожести) — slider с присоединённым числовым значением.
 - **Пипетка для цвета** — выбор цвета удаления/подложки кликом прямо по превью изображения (в дополнение к `<input type="color">`).
 ## 3. Загрузка изображений и раскладка страницы — выполнено 2026-08-22
 Убрать отдельное состояние «страница загрузки» и сделать постоянную двухпанельную раскладку:
 - **Слева — исходная картинка**, всегда присутствует: если не загружена, панель — пустое поле, на которое можно перетащить файл (или кликнуть для выбора).
 - **Справа — результат работы инструмента** (до загрузки — пустое состояние/подсказка).
 - **Ctrl+V** — вставка изображения из буфера обмена сразу в исходник.
 - **Drag&drop поверх загруженной картинки** — перетаскивание нового файла на левую панель заменяет текущее исходное изображение.
@@ -0,0 +1,69 @@
 # План: range-слайдеры и пипетка цвета
 > Статус: план к выполнению.
 ## 1. Целевое поведение
 1. «Процентные» параметры (яркость, контраст, качество JPEG/WebP, порог похожести) — слайдеры с числовым значением рядом; точные координаты и размеры (resize/crop) остаются полями ввода.
 2. У цветовых параметров появляется кнопка-переключатель «Пипетка»: активна → клик по превью исходника снимает цвет пикселя и подставляет его в поле цвета; после выбора режим гаснет.
 3. В режиме пипетки возле курсора видна лупа: увеличенный блок пикселей вокруг точки с перекрестием и подписью hex текущего пикселя; клик выбирает центр перекрестия.
 4. Активная пипетка видна на превью перекрестием курсора; повторный клик по кнопке отменяет режим без выбора.
 5. Всё работает поверх текущего процесса: авто-применение с задержкой, токен запусков, маски — без изменений.
 ## 2. Слайдеры
 - В реестре новый тип параметра `'slider'` с обязательными `min`/`max`; валидируется как число (дефолт в диапазоне, минимум меньше максимума).
 - Форма маппит его на готовый `SliderField` из `ui/`; санитизация параметров обрабатывает slider так же, как number.
 - Переводятся: яркость и контраст, качество JPEG, качество WebP, порог похожести. Остальные инструменты — без изменений.
 ## 3. Пипетка и лупа
 - В ядро добавляется чистая функция `rgbToHex(r, g, b)` → строка вида `#rrggbb`, с юнит-тестами; чтение пикселя — из уже отрисованного canvas превью исходника через `getImageData(x, y, 1, 1)`.
 - `Preview.svelte` получает опциональный режим пипетки: пропсы «активна» и колбэк «цвет выбран»; курсор перекрестие, клик вычисляет координату пикселя с учётом разницы CSS-размера canvas и его внутренней ширины.
 - **Лупа** — компонент `PipetteLoupe.svelte`: канвас около 110×110 px у курсора (позиция fixed, `pointer-events: none`); рисует блок 15×15 пикселей из исходника с увеличением ×8 без сглаживания, перекрестие в центре, подпись hex текущего пикселя. Координаты блока клампятся у краёв изображения; лупа скрыта вне превью и вне режима пипетки. Тач-устройства: прямой тап выбирает пиксель без лупы.
 - Проводка: кнопка у каждого цветового поля в карточке параметров → состояние «активное цветовое поле» живёт в оркестраторе → выбор цвета записывает hex в это поле и выключает режим.
 - Пипетка работает только по левой панели (исходнику): удаляемый цвет и подложка берутся с оригинала.
 ## 4. Этапы и проверки
 - **A. Слайдеры** — тип в реестре, перевод четырёх инструментов, тесты реестра и санитизации, тест `rgbToHex`. Проверка: `pnpm test/check`, визуально слайдеры.
 - **B. Пипетка** — режим в Preview, проводка через карточки до полей цвета. Проверка: смоук §6 пп. 5–7.
 - **B2. Лупа** — компонент лупы поверх режима пипетки. Проверка: смоук §6 пп. 8–10.
 - **C. Итог** — полный прогон `test/check/build`.
 ## 5. Изменения по файлам
 - `registry.ts` — тип `'slider'` в `ParamDef`, перевод четырёх записей, ветка в `sanitizeParams`.
 - `ParamForm.svelte` — ветка slider → `SliderField`.
 - `core/color.ts` — `rgbToHex`.
 - `Preview.svelte` — режим пипетки (курсор, клик, колбэк).
 - `PipetteLoupe.svelte` — лупа у курсора в режиме пипетки.
 - `SourceCard.svelte` — проброс режима и колбэка наверх.
 - `ParamsCard.svelte` + `ColorField.svelte` — кнопка «Пипетка» у цветового поля.
 - `ToolPage.svelte` — состояние активного поля, обработчик выбора цвета.
 ## 6. Смоук-чеклист
 1. Яркость/контраст — слайдеры со значением справа, результат обновляется сам при перетаскивании.
 2. Качество JPEG/WebP — слайдер от 1 до 100.
 3. Порог похожести — слайдер от 0 до 100.
 4. Resize и crop остались числовыми полями.
 5. Удаление цвета: «Пипетка» → клик по красной области исходника → поле цвета получил hex этого пикселя, режим погас, результат пересчитался.
 6. Повторный клик по кнопке или выбор без подтверждения — режим снят, цвет не изменился.
 7. Подложка JPEG: пипетка проставляет цвет подложки тем же способом.
 8. В режиме пипетки лупа следует за курсором, перекрестие показывает пиксель под ним, подпись hex совпадает с выбранным при клике.
 9. У края картинки блок лупи корректно клампится — за границей тянется чёрный/прозрачный фон, выбор по-прежнему точен.
 10. Курсор ушёл с превью или режим выключен — лупа скрыта; клики по кнопкам под превью не перехватываются лупой.
 11. Слайдеры и пипетка дружат с быстрыми правками: одна финальная версия результата, чип «Пересчёт…» на месте.
 ## 7. Критерии готовности
 - Все процентные параметры — слайдеры; числовые поля остались только там, где нужен точный ввод.
 - Цвет любого color-параметра можно взять кликом с исходника.
 - `test/check/build` зелёные, чеклист §6 пройден.
 ## 8. Что сознательно не делаем
 - Пипетка и лупа на превью результата и маски — только исходник.
 - Кастомная стилизация слайдеров за пределами дизайн-системы.
 - Лупа для тач-устройств — там прямой тап без лупы.