mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-11-13 17:08:20 +00:00
25 KiB
25 KiB
Backlog
Статус: active. Открытые задачи. Подробные планы, разбор решений и сырые находки —
docs/plan-seo.md,docs/plan-platform.md,docs/plan-fields-audit-fixes.md,docs/tools-audit.md,docs/decisions.md.Все пункты — чекбоксы; нумерация «Идея N» в тексте сквозная по документу и сохраняется ради перекрёстных ссылок («идея 4 зависит от идеи 3»). Оценки (S/M/L) — оценка труда, не приоритет.
Pipeline
- баг: drag-n-drop перестановки шагов не работает — обработчики на месте
(
StepCarddraggable в сниппетеstepCardSchemaToolView.svelte,onStepDrop→moveStepвschema-tool-state.svelte.ts), но перетаскивание не срабатывает. Замечено до рефактора H1 (2026-10), не регрессия от него. Начать с проверкиdraggable/dragstartнаStepCardи того, что drop не глушится дочерними элементами карточки - названия инструментов — в pipeline инструмент называется «обрезать png», но он работает с любыми картинками, наверное надо убрать; в заголовке страницы — возможно, надо указать все форматы (связано с SEO)
- кнопка «добавить инструмент» в pipeline — обдумать селектор с нормальным поиском, фильтром возможных инструментов и т.д.
- посмотреть реализацию flip animation svelte для анимации переключения режима aligned\normal
- переделать визуал toggle компонента (которым режим переключается)
- Идея 4. Batch-обработка архивов выбранным chain — оценка L. Fan-out и
мультивыбор уже есть (идея 15:
web/src/lib/run-chain.ts, zip-выгрузка набора). Осталось: zip на вход (распаковка в браузере, порядок файлов, поведение many → 1 → many), прогресс и отмена пофайлово, запуск по сохранённой цепочке из/chains. - Идея 15. Остатки fan-out — сделано: 1 → many не терминален, мультизагрузка, склейка имён, per-file ошибки с warning. Отложено: parts-grid на промежуточных тайлах (сейчас первая картинка набора), прогресс/отмена, analyze-шаги пофайлово (сейчас firstOnly-warning).
Инструменты
- split-to-parts, загружаем картинку, после этого переключаемся на режим by tile - интерфейс начинает тормозить. уже пора переходить на worker\wasm?
- remove-alpha-channel - дубль инструмента с выбором цвета на замену, что с такими делать вообще? оставить как seo? можно ли под капотом использовать другой инструмент с хардкодед настройками?
- qr code to text, text to qr code
- bar code to text, text to bar code
- нужен инструмент для удаления фона по выбранной точке - удалять внутри выделенной области
- сделать конвертацию в смайлики\награды для твитча (6 размеров или выбор какой размер - 112\56\28px или 72\36\18)
- Font Style - обдумать выбор шрифта (google fonts???) как организовать
шрифты с кириллицей? сделать галочку "только с кириллицей"??? (решение о
наборе и лицензиях:
docs/plan-platform.md§4 — только OFL/Apache с паспортом, семейства с кириллицей) - Свести convert-страницы (
convert-png-to-jpg,convert-png-to-webp,png-to-bmp) на один инструментconvert— зависит от S1f (docs/plan-seo.md§4). Мешает не толькоquality(он живёт в схеме инструмента), а сама модель:outputс mime/ext — свойствоTool, аPageStepумеет только{ id, params? }, поэтому страницы на общийidполучат одинаковый формат вывода. Нужно научить шаг переопределять формат вывода - Идея 6. Конвертация формата — НЕ отдельный инструмент, а выбор в кнопке
Download — оценка M/L. Решение и продуктовое обоснование:
docs/plan-seo.md§0 и задача S1f; почему селектор не заменяет существующие convert-страницы —docs/plan-seo.md§5. Селектор формата и качества в Download уже есть; «сжатие до целевого КБ» реализовано (fitWithinBytesвweb/src/lib/core/io.ts: бинарный поиск по quality для lossy, по k квантования для PNG; для BMP — предупреждение, что лимит не применим). Что осталось: нужна ли отдельная страница под интент «сжать до N КБ» — открытый вопрос с вордстатом, имя не выбрано (docs/plan-seo.md§5). Проработать вместе с достройкой download-флоу. - S1g под вопросом — исходная формулировка (
docs/plan-seo.md§4): на convert-страницах блокировать в меню Download формат исходника, чтобыconvert-png-to-jpgне сохранял в png. Против: пользователь может захотеть сохранить обработанный PNG или JPEG с другим качеством — блок мешает легальному сценарию. Решение не принято; перед реализацией переобдумать. - Лимит КБ: сигнал о недостижимости — если даже минимальное качество /
k=2 не влезает в лимит, файл скачивается молча с превышением. Нужно:
fitWithinBytes(web/src/lib/core/io.ts) возвращает также достигнутый размер, UI показывает warning «не удалось ужаться до N КБ, получилось M». - Лимит КБ: индикация активного сжатия — сейчас заданный лимит никак не
виден, пока меню Download закрыто: пользователь может забыть про него и
случайно сжать следующие файлы. Нужен постоянный индикатор (значок/
подпись на кнопке или рядом). Связанный вопрос персистентности: лимит —
$stateвSchemaToolView.svelte, при переходе на другой инструмент сбрасывается вinit()и в localStorage не пишется (в отличие от шагов цепочки). Это безопасное поведение по умолчанию, но стоит осознанно решить: оставить сброс при смене страницы или сохранять лимит (per-tool? глобально?) вместе с цепочкой. - Лимит КБ/качество: превью итогового результата — обдумать UI/UX: при
сжатии по размеру или низкому качеству дать возможность посмотреть
итоговый файл до скачивания — при сильном сжатии (низкий quality, грубое
квантование в PNG) искажения могут быть настолько заметны, что
пользователь откажется от варианта и выберет другой формат/лимит. Сейчас
превью показывает результат инструмента до re-encode, а сжатая версия
существует только внутри
fitWithinBytes/encodeв момент скачивания. Открытые вопросы: превью на лету (дорого — encode на каждый ввод) или по кнопке «предпросмотр»; где показывать (оверлей/замена тайла результата); связь с идеей 14 (отображение маски) и пунктом про зум превью выше. - Идея 7. Страница
watermark-image-png(водяной знак картинкой) — оценка M. Нужна overlay-механика: второй источник изображения (getOverlay/store), параметры scale/opacity/position/margin/aspect. Решается вместе с вопросом, как второй источник картинки вписывается в schema-driven preview (SchemaToolView). - Идея 8.
png-info(детальная информация о PNG) — оценка M/L. Отдельный райз: exif-теги, редактирование, структурированный вывод; нужен свой отдельный случай в UI, не «ещё один text/verdict». Возможно нужна вообще отдельная страница, несовместимая с другими инструментами: 1) она работает не с изображением, а с метаданными из файла, 2) она не может быть частью цепочки, т.к. результат не является изображением, 3) если надо изменить теги, никакого форматирования и изменения в изображение вносить не надо, только в метаинформацию. - Идея 9. Region-инструменты (censor/erase/pixelate-area/blur-area/ sharpen-area/reverse-area) — ждут UI выделения области на превью. Вне очереди.
- Идея 10. Мультифайловые инструменты-потребители (gif-to-frames,
separate-colors) — механизм «результат = набор файлов» (1 → many) уже есть
(
docs/architecture.md, раздел 7), первый потребитель —split-into-parts-png. Остальные подключаются по мере нужды. - Идея 11. Анимационные (slow-reveal/fade/scrolling) — выход не PNG; отдельное решение о формате.
- Идея 12. HARD-серия (glitch, barcode, signature-extract, handwritten-digital).
UI и качество
- кнопку редактирования названия пайплайна на этой же странице
- при загрузке нескольких файлов, показывает source не той же высоты, как result
- split to parts - посмотреть вариант с toggle component - может будет удобнее чем sectioned buttons
- чип «Маска» (
resultCard.maskToggleна тайлах результата) — попробовать заменить на Toggle-компонент, когда тот будет доделан (см. пункт про визуал toggle в «Pipeline»): возможно, будет удобнее и понятнее - маска подгружается с задержкой при нажатии на чип «Маска» — сейчас
runMaskсчитается только для включённых шагов (эффект вSchemaToolView.svelte). Альтернатива: считать маску всегда вместе с результатом, по нажатию просто показывать другую картинку. Оценить достоинства/недостатки: отклик мгновенный, но лишний проход по пикселям на каждый ран каждого шага сrunMask(на больших изображениях — заметная цена за функцию, которую могут не открыть) - неудобно настраивать ползунками, некоторые инструменты удобнее настроить через drag-n-drop. звучит сложно, но надо придумать процесс
- fav: текущий ui слишком дерганный — при клике на звёздочку элементы мгновенно пересортировываются и под мышкой оказывается другой элемент. Нужна или анимация, или механизм отложенного обновления позиций
- просмотр картинки в оригинальном размере, и возможно с зумом отдельных областей, чтобы просмотреть мелкие артефакты, выбор разных подложек - черная\белая\цветные\серая для проверки прозрачных картинок
- обдумать объединение пар
inputMode + sourceиresultKind + resultв единую структуру, позволит упростить некоторые вещи - напримерsourceValue\resultValueвSchemaPreview.svelte - Рассмотреть необходимость всех этих пропсов в
SchemaPreview.svelteони дублируют друг другаontextsource,onrendertext,oncopytext,ondownloadtxt,ondownload, - resize keep aspect - работает, но немного не очевидное поведение при прямоугольной картинке и выборе размера через быстрые кнопки (например 256х256). Воспроизведение поведения: keep aspect включено, загружаем прямоугольную картинку 832 × 1232, картинка рескейлится до 173 × 256, выключаем keep aspect, картинка рескейлится до 256 × 256 (с искажением пропорций), включаем keep aspect - картинка рескейлится до размера 256 × 379
- Переделать внешний вид инструментов без настроек, например Remove alpha channel PNG "remove-alpha-channel-png". Сейчас выглядит слишком пустым.
- Пересмотреть поля - Plate, Position, Font Style - сейчас второй label
- поле ввода текста - сделать по умолчанию нормального размера, а не одну строку для svg - форматирование или подсветку синтаксиса??? для bin\hex - форматирование по колонкам??? для hex\bytes\rgba - пример в placeholder
- прикрутить кастомный color picker, добавить прозрачность (range?)
- обновить страницу kit или сделать storybook
PreviewTile: высота плитки задана толькоmin-height: clamp(...), поэтому она не следует за пропорциями результата — широкий результат уезжает в узкую полосу, а высокий упирается вmax-height: 100vh. Нужно, чтобы соотношение сторон выбиралось по результату в диапазоне 16:9…9:16 (web/src/lib/components/schema/PreviewTile.svelte).- Радиусы бордеров:
--radius-mненулевой и применён ко всем бордерам (app.css,SchemaToolView.svelte). Решить, где скругления реально есть в дизайне, а где должен быть 0 - Component-тесты
SchemaToolView/SchemaPreviewтребуют отдельного решения: node Vitest не имеет DOM/canvas, а e2e уже покрывает поведение. - Идея 13. Контраст текста на акцентных кнопках — частично закрыт. Тона
--color-main/--color-accentподняты под текущий порогpalette.test.ts; targeted-тест проходит. Light-тема всё ещё ниже AA 4.5 для обычного текста, а--color-dangerв light-теме на границе: после завершения редизайна вернуть порог 4.5 и перепроверить оба токена. - Идея 16. Главная должна отличаться от каталога — оценка S. Сейчас
src/routes/+page.svelteиsrc/routes/list-tools/+page.svelteпобайтово идентичны (совпадают script, шаблон и стили), при этом/list-tools— рабочий маршрут: на него ссылается крошка в+layout.svelteи он открыт e2e-сценариямиcatalog.spec.ts,i18n.spec.ts,navigation.spec.ts. Замысел: главная — крупнее и с более простым поиском, без категорий; каталог остаётся группировкой с фильтрами. Детектор дублирования разметки сознательно не вводим —docs/decisions.md, раздел 1, поэтому расхождение ловится на ревью.
Тесты и lint
- линтер на deprecated иконки возможен? 'FilePlus2' is deprecated.
tseslint.config(...)deprecated: сигнатура(...configs: InfiniteDepthConfigWithExtends[]): ConfigArrayпомечена устаревшей, нужен переход наdefineConfigизeslint/config(ESLint core, а неtypescript-eslint) —web/eslint.config.js.- удалить мёртвые
tools.*.paramsиз root i18n после проверки потребителей; до этого действует pattern-based policy-исключение (web/eslint-plugins/README.md, разделdict-consistency) - e2e:
i18n.spec.tsиtext-and-verdicts.spec.tsдублируют локаторы изhelpers/page.tsвместо вызова — правило «спека зовёт helpers» (docs/testing-strategy.md, раздел 5) - Пересмотреть тесты — убрать точные совпадения текстов и любые селекторы,
привязанные к разметке или svelte-классам (сейчас остались:
tool-flows.spec.ts,schema-tool-strings.test.ts) - можно ли в тестах получать i18n ключ вместо текста? можно ли написать lint правило такое (запретить toContain без i18n)
SEO/GEO
- переименование бренда + домен: чек-лист в локальном файле
plan-domain.local.md(в git не входит, в клоне отсутствует; подробности и порядок —docs/plan-seo.md§6, R1/R2) - снять
noindexсо страниц инструментов, когда будут sitemap, canonical и контент (S1h; блокирует индексацию всего сайта) —docs/plan-seo.md§4 - форматные страницы по конкурентным слагам (
crop-jpeg, …) — только по вордстату с уникальным контентом; редиректы только для опечаток и переименований уже опубликованных страниц; клонов с canonical не делать (docs/plan-seo.md§5) - sitemap.xml из реестра +
Sitemap:в robots.txt (S1b/S1c) - Seo.svelte: per-tool OG-картинки (S1e) — у каждой страницы инструмента
своя превью-карточка 1200×630 для соцсетей/мессенджеров: имя инструмента,
бренд, иконка. Сейчас все страницы ссылаются на общую
static/og/default.png(генерируетpnpm --dir web gen:og— Playwright-скриншот HTML-карточки вweb/scripts/gen-og.mjs). Что делать: расширить gen-og.mjs — проход по реестру страниц, карточка с названием инструмента вstatic/og/[slug].png, вSeo.svelteподставлять og-URL по slug страницы. Критерий приёмки: у/tools/flip-pngв og:image своя картинка с названием инструмента, файл лежит вstatic/og/ - контент страницы инструмента: seo-блок в словарях, how-to/FAQ/related (S2)
- JSON-LD (SoftwareApplication/FAQPage/Breadcrumb) + llms.txt (S3)
- дистрибуция: закрепить репо, alternative.to, Product Hunt, Reddit/HN (S4c)
- GSC: подключить домен, отправить sitemap, мониторинг индексации (S4a)
- GA4: cookieless-конфигурация, отключить рекламные audiences и signals,
anonymize_ip— сейчас вweb/src/routes/+layout.svelteголыйgtag('config')(S4b)
Платформа (API/PWA)
- Vercel: переезд хостинга с GitHub Pages + глобальная статистика популярности инструментов через Vercel KV (serverless-функция: INCR при открытии инструмента, чтение топа для скоринга поиска).
- PWA: manifest + service worker, оффлайн-режим, установка (после S1)
- API: спайк серверного ядра (нативный Rust vs edge-wasm), ключи, free tier (после wasm-фаз 5–7)
- Шрифты: лицензирование (F1–F4) и DOM-free рендер (F5–F6) — до фазы 8
(
docs/plan-platform.md§4)
Переезд
- множественные числа (часть/части/частей; «N параметров», счётчики) —
функция
tPlural(path, n)и формаPluralForms(обязательноеother, опциональныеone/few/many); первые потребители —part/partsв подписи результата и счётчики параметров. Критерий приёмки: у ключа с plurals есть все формы, для которых нужен перевод,otherникогда не пустой, число подставляется в текст без склейки