From 7e391a420bd11c2e5f017ccb0486f945bb7131da Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sun, 23 Aug 2026 04:54:40 +0500 Subject: [PATCH] docs: update plans --- docs/{ => archive}/plan-tool-workbench.md | 2 +- docs/backlog.md | 21 +------ docs/plan-sliders-pipette.md | 69 +++++++++++++++++++++++ 3 files changed, 72 insertions(+), 20 deletions(-) rename docs/{ => archive}/plan-tool-workbench.md (99%) create mode 100644 docs/plan-sliders-pipette.md diff --git a/docs/plan-tool-workbench.md b/docs/archive/plan-tool-workbench.md similarity index 99% rename from docs/plan-tool-workbench.md rename to docs/archive/plan-tool-workbench.md index 8ab3172..d17ddff 100644 --- a/docs/plan-tool-workbench.md +++ b/docs/archive/plan-tool-workbench.md @@ -1,6 +1,6 @@ # План: декомпозиция страницы инструмента, реактивные параметры, предпросмотр маски -> Статус: план к выполнению. +> **СТАТУС: ВЫПОЛНЕН 2026-08-23.** ## 1. Зачем diff --git a/docs/backlog.md b/docs/backlog.md index 6dacc2e..be63302 100644 --- a/docs/backlog.md +++ b/docs/backlog.md @@ -1,25 +1,8 @@ # Backlog -## 1. Реактивные параметры без кнопки «Применить» - -Процесс надо выстроить автоматически: кнопка «Применить» не нужна — все изменения параметров должны применяться к результату реактивно, с дебаунсом (~200–400 мс после последнего изменения), чтобы не пересчитывать тяжёлые операции на каждое движение ползунка. - -- Убрать кнопку, статус «processing» показывать ненавязчиво (лёгкая индикация поверх превью). -- Дебаунс + отмена устаревших запусков (актуален только последний набор параметров). -- Распространить тот же механизм на будущий пайплайн-workspace. - -## 2. Более user-friendly интерфейс +## 1. Range-слайдеры и пипетка цвета Сделать управление параметрами удобнее: -- **Range slider вместо полей ввода** там, где это удобнее (яркость/контраст, качество JPEG/WebP, порог похожести) — желательно slider с присоединённым числовым значением. +- **Range slider вместо полей ввода** там, где это удобно (яркость/контраст, качество JPEG/WebP, порог похожести) — slider с присоединённым числовым значением. - **Пипетка для цвета** — выбор цвета удаления/подложки кликом прямо по превью изображения (в дополнение к ``). - -## 3. Загрузка изображений и раскладка страницы — выполнено 2026-08-22 - -Убрать отдельное состояние «страница загрузки» и сделать постоянную двухпанельную раскладку: - -- **Слева — исходная картинка**, всегда присутствует: если не загружена, панель — пустое поле, на которое можно перетащить файл (или кликнуть для выбора). -- **Справа — результат работы инструмента** (до загрузки — пустое состояние/подсказка). -- **Ctrl+V** — вставка изображения из буфера обмена сразу в исходник. -- **Drag&drop поверх загруженной картинки** — перетаскивание нового файла на левую панель заменяет текущее исходное изображение. diff --git a/docs/plan-sliders-pipette.md b/docs/plan-sliders-pipette.md new file mode 100644 index 0000000..6948468 --- /dev/null +++ b/docs/plan-sliders-pipette.md @@ -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. Что сознательно не делаем + +- Пипетка и лупа на превью результата и маски — только исходник. +- Кастомная стилизация слайдеров за пределами дизайн-системы. +- Лупа для тач-устройств — там прямой тап без лупы.