Files
easy-png-tools2/docs/archive/plan-text-wave.md
T
2026-08-26 07:27:40 +05:00

6.4 KiB
Raw Blame History

План: волна 4 — текст, штампы, водяные знаки

СТАТУС: ВЫПОЛНЕН 25.08.2026.

1. Что получается

Четыре инструмента новой категории «Текст»: надпись на изображении, дата-штамп, защитная плитка (повторяющийся полупрозрачный текст под углом), водяной знак картинкой. Каталог вырастает с 69 до 73. Это первые операции, рисующие через canvas 2D — класс perceptual по роадмапу: точные пиксельные тесты на них не пишутся, юнит-тестами покрывается чистая математика раскладки.

2. Решения

  • Вся геометрия — чистые функции без DOM: якорь из 9-позиционной сетки → координаты, перенос текста по ширине с инъекцией измерителя, раскладка плитки с углом и шагом. Canvas-вызовы — тонкий слой рядом (core/textdraw.ts), в юнит-тесты не попадает.
  • Один движок рендера текста на все три текстовых инструмента: шрифт из системного набора (sans/serif/mono), размер, цвет, жирность, прозрачность, поворот. Различия инструментов — только в пресетах параметров и количестве слоёв (одна надпись vs плитка).
  • Дата-штамп — надпись с автотекстом: строка формата (YYYY-MM-DD hh:mm) разворачивается в текущую дату в момент запуска; свой мини-форматтер без зависимостей.
  • Водяной знак картинкой — первый двухисточниковый инструмент: вторая картинка грузится отдельной зоной в этапе, живёт только в состоянии страницы и сознательно не сохраняется ни в workspace-pipeline, ни в экспорте JSON; после восстановления цепочки знак нужно выбрать заново. Ограничение фиксируем в описании инструмента.
  • Новая категория text встаёт после «Фильтров»; названия в обоих словарях, порядок в CATEGORIES один.

3. Инструменты

  • add-text-png — параметры: текст (строка), размер (слайдер 8–200), цвет, шрифт (select), жирность (чекбокс), позиция (select 3×3: углы/стороны/центр), отступ (слайдер). Опциональная подложка: цвет + прозрачность плашки за текстом.
  • date-stamp-png — тот же набор минус текст, плюс формат даты; дефолт — нижний правый угол.
  • watermark-tile-png — текст, размер, цвет, прозрачность (0–100), угол (-90…90), шаг по X/Y; плитка заполняет весь холст.
  • watermark-image-png — второй источник (загрузка PNG с альфой), масштаб знака (% от ширины холста), прозрачность, позиция 3×3, отступ.

4. Этапы и проверки

Каждый этап заканчивается зелёными test/check/build и ревью.

  • A. Фундамент — категория text (categories + словари + порядок), core/textdraw.ts: anchor9, wrap, tileLayout с юнит-тестами на математике (координаты углов/центра, переносы слов, плотность плитки), тонкий canvas-модуль domText.ts (без тестов). Реестр пока пуст в категории.
  • B. Надпись и датаadd-text-png, date-stamp-png на общем движке; иконки, переводы, записи реестра. Смоук: обе локали, тёмная тема (плашка читаема), длинный текст переносится и не вылезает за край.
  • C. Плиткаwatermark-tile-png; смоук: отрицательные и нулевой угол, прозрачность 0/50/100, мелкий шаг не подвешивает страницу на больших холстах (ограничение количества плиток капом).
  • D. Знак картинкой — двухисточниковый UX: вторая drop-зона в этапе (компонент рядом с SourceCard, виден только у этого инструмента), масштаб/позиция/отступ; ограничение про сохранение — в описании и подсказке. Этап режется без ущерба остальным, если решим отложить.
  • E. Итог — полный прогон, смоук §6, архивация плана.

5. Критерии готовности

  • 73 инструмента; вся математика раскладки покрыта юнит-тестами; canvas-слой изолирован в одном модуле.
  • test/check/build зелёные; новые инструменты работают в цепочке как обычные шаги (кроме источника знака — см. ограничение).

6. Что сознательно не делаем

  • Выбор произвольных пользовательских шрифтов (файлами) и веб-шрифтов — только системный набор.
  • Кернинг/линии/многострочное редактирование с абзацами — один абзац с автопереносом.
  • Сохранение картинки-знака в пайплайне и её передача между сессиями.
  • Текст по контуру, градиентные заливки текста.