fix: update crop tool max sizes - 2000x1200

docs/backlog.md

@@ -19,6 +19,12 @@
 - [ ] Пересмотреть тесты - исправить всякие хрупкие, которые проверяют
       количество инструментов, точное совпадение текстов, поиск по
       `img[alt="Result image"]`, svelte классам и тому подобные
+- [ ] нужен инструмент для удаления фона по выбранной точке - удалять внутри
+      выделенной области
+- [ ] сделать конвертацию в смайлики\награды для твитча (6 размеров или выбор
+      какой размер и 2 сетки)
+- [ ] неудобно настраивать ползунками, некоторые инструменты удобнее настроить
+      через drag-n-drop. звучит сложно, но надо придумать процесс
 - [ ] можно ли в тестах получать i18n ключ вместо текста?
 - [ ] убрать в тестах все нестандартные символы `→`, длинные тире и т.д.
 - [ ] Пересмотреть прозрачность в инструментах - Create empty PNG - прозрачность
@@ -64,7 +70,7 @@
 
 ## Переезд
 
-- [ ] добавить i18n в preview
+- [x] добавить i18n в preview
 - [ ] множественные числа (часть/части/частей; «N параметров», счётчики) —
       `tPlural()` и формат `PluralForms`, детали в §Фаза 9
       `docs/plan-preview-i18n.md`

docs/tools-audit.md

@@ -3,49 +3,71 @@
 ## везде
 
 - возможность переключать пиксели\проценты
-- инструменты без параметров выглядят странно, пересмотреть, может добавить какую-то надпись "нет параметров"
+- инструменты без параметров выглядят странно, пересмотреть, может добавить
+  какую-то надпись "нет параметров"
 - удаление\маски и т.д. - надо добавить галочку сглаживание
-- производительность: почему flip заметно тормозит, но нет индикации работы инструмента (также sharpen-png)
+- производительность: почему flip заметно тормозит, но нет индикации работы
-- производительность: исследовать, есть ли смысл на инструментах геометрии выводить рамку результата до полноценной работы (например на skew \ rotate будет удобнее)
+  инструмента (также sharpen-png)
+- производительность: исследовать, есть ли смысл на инструментах геометрии
+  выводить рамку результата до полноценной работы (например на skew \ rotate
+  будет удобнее)
 
 ## аудит инструментов
 
 ### transparency
 
 - add-stroke-png: добавить галочку "расширить на толщину линии"
-- find-contour-png: если толщина линии более 1px - круг боле с искажениями, надо расширять на толщину линии
+- find-contour-png: если толщина линии более 1px - круг боле с искажениями, надо
+  расширять на толщину линии
 - circle-mask-png: размеры заданы в процентах, надо задавать в пикселях
 - square-mask-png: размеры заданы в процентах, надо задавать в пикселях
-- star-mask-png: размеры заданы в процентах, надо задавать в пикселях, проверить форму звезды - сейчас выпуклые края, радиус задан до 100%, а более 50 - смысле нет
+- star-mask-png: размеры заданы в процентах, надо задавать в пикселях, проверить
-- wavy-mask-png:размеры заданы в процентах, надо задавать в пикселях, пересмотреть форму и параметры. как будто неудобно конфигурировать
+  форму звезды - сейчас выпуклые края, радиус задан до 100%, а более 50 - смысле
-- remove-alpha-channel-png: выбор цвета фона, как будет работать с полупрозрачной картинкой?
+  нет
+- wavy-mask-png:размеры заданы в процентах, надо задавать в пикселях,
+  пересмотреть форму и параметры. как будто неудобно конфигурировать
+- remove-alpha-channel-png: выбор цвета фона, как будет работать с
+  полупрозрачной картинкой?
 - extract-alpha-mask-png: галочка инвертировать маску
-- round-corners-png: размеры заданы в пикселях, должна быть возможность задать в процентах, нету сглаживания по вырезанным пикселям
+- round-corners-png: размеры заданы в пикселях, должна быть возможность задать в
-- invert-alpha-png: края со сглаживанием странно обрабатываются, может галочка\слайдер обрезать сглаживание?
+  процентах, нету сглаживания по вырезанным пикселям
-- remove-background-png: возможность выбора точки, от которой удалять (или отдельный инструмент?)
+- invert-alpha-png: края со сглаживанием странно обрабатываются, может
+  галочка\слайдер обрезать сглаживание?
+- remove-background-png: возможность выбора точки, от которой удалять (или
+  отдельный инструмент?)
 - make-thicker-png: расширять картинку на толщину линии
-- make-thinner-png: уменьшать от краев, если картинка начинается от края, то остается выступ
+- make-thinner-png: уменьшать от краев, если картинка начинается от края, то
-- feather-edges-png: расширять картинку на толщину линии, (выбор цвета возможен? другой инструмент?)
+  остается выступ
-- clean-edges-png: непонятный инструмент (слишком маленький максимум?). найти тест кейс для него
+- feather-edges-png: расширять картинку на толщину линии, (выбор цвета возможен?
+  другой инструмент?)
+- clean-edges-png: непонятный инструмент (слишком маленький максимум?). найти
+  тест кейс для него
 - despeckle-alpha-png: найти более заметный тест-кейс
-- close-holes-png: проверить, как должен работать, картинки с большой полупрозрачной областью - закрывает всё, по описанию должен закрывать только небольшие дырки
+- close-holes-png: проверить, как должен работать, картинки с большой
+  полупрозрачной областью - закрывает всё, по описанию должен закрывать только
+  небольшие дырки
 
 ### colors
 
 - two-colors-png: в range slider добавить описание что это luminance threshold
-- gamma-png: проверить правильность работы - яркое изображение выглядит не контрастным, проверить максимум и минимум
+- gamma-png: проверить правильность работы - яркое изображение выглядит не
-- temperature-png: проверить правильность работы - не слишком ли отдает желтым\синим?
+  контрастным, проверить максимум и минимум
+- temperature-png: проверить правильность работы - не слишком ли отдает
+  желтым\синим?
 - quantize-png: максимум 64 - не слишком мало? сделать кнопки с пресетами
-- custom-palette-png: копирует two-colors-png, только ввод через текстовое поле и нет выбора порога luminance
+- custom-palette-png: копирует two-colors-png, только ввод через текстовое поле
+  и нет выбора порога luminance
 - dithering-png: проверить алгоритм Floyd–Steinberg на малом количестве цветов
 - sepia-png: не нужна настройка силы эффекта?
 - extract-channel-png: мульти вывод сразу в 3 канала?
-- swap-channels-png: обдумать описание подобных инструментов через flow более простых?
+- swap-channels-png: обдумать описание подобных инструментов через flow более
+  простых?
 - black-and-white-png: аналог two-colors-png, только без выбора цветов
 - posterize-png: не нужен вариант настройки для каждого канала отдельно?
 - auto-contrast-png: найти тестовый кейс
 - decrease-color-count-png: сделать кнопки вместо селекта
-- png-to-hsl: проверить, что `space as rgb` должна выдавать одинаковые результаты, вне зависимости от выбора h s l. может выбрать отдельные кнопки?
+- png-to-hsl: проверить, что `space as rgb` должна выдавать одинаковые
+  результаты, вне зависимости от выбора h s l. может выбрать отдельные кнопки?
 - png-to-hsv: тоже самое ^
 - png-to-hsi: тоже самое ^, нужно ли разделять на отдельные инструменты?
 - png-to-cmyk: тоже самое ^
@@ -56,43 +78,53 @@
 - add-border-png: прозрачность цвета (аудит полей)
 - fit-on-background-png: цвет
 - change-canvas-size-png: использовать position9 вместо селекта
-- resize-png: по умолчанию размеры 0х0, надо поменять; выбор метода масштабирования
+- resize-png: по умолчанию размеры 0х0, надо поменять; выбор метода
+  масштабирования
 - crop-png: offset - слишком большие значения
 - rotate-png: кнопки вместо select
 - flip-png: кнопки вместо select
 - add-padding-png: чем отличается от add-border-png?
 - center-by-alpha-png: найти тест кейс
 - zoom-png: выбор точки центра
-- trim-empty-space-png: выбор от 0 до 254 (надо везде привести к единому стилю - переключение 0-100 проценты и 0-255)
+- trim-empty-space-png: выбор от 0 до 254 (надо везде привести к единому стилю -
-- change-aspect-ratio-png: не видно что меняется, добавить рамку вокруг результата, а не вокруг div
+  переключение 0-100 проценты и 0-255)
+- change-aspect-ratio-png: не видно что меняется, добавить рамку вокруг
+  результата, а не вокруг div
 - swap-orientation-png: кнопки вместо select
-- symmetric-copy-png: кнопки вместо select, два выбора в селекте `keep side` не работают (в зависимости от выбора `axis`)
+- symmetric-copy-png: кнопки вместо select, два выбора в селекте `keep side` не
+  работают (в зависимости от выбора `axis`)
 - shift-png: цвет (прозрачность)
 - split-into-parts-png: результат с несколькими файлами, обдумать процесс
 
 ### filters
 
-- vignette-png: выбор точки центра, цвет, кроме силы нужен еще параметр прироста силы (как называется?)
+- vignette-png: выбор точки центра, цвет, кроме силы нужен еще параметр прироста
+  силы (как называется?)
 - pixelate-png: разные алгоритмы? выглядит не очень. тест кейс?
-- randomize-pixels-png: настройка размеров другим вариантом - на сколько кусков делить. seed - поменять
+- randomize-pixels-png: настройка размеров другим вариантом - на сколько кусков
+  делить. seed - поменять
 - add-noise-png: кнопки вместо select, seed - поменять
 - sharpen-png: добавить тест кейс
 - silhouette-png: аналог extract-alpha-mask-png?
 
 ### text
 
-- add-text-png: plate снизу большой отступ, сделать галочку для этого (некоторые буквы будут обрезаться - y, g)
+- add-text-png: plate снизу большой отступ, сделать галочку для этого (некоторые
+  буквы будут обрезаться - y, g)
 - watermark-tile-png: заполняет не полностью
 
 ### analyze
 
-- extract-color-from-png: надо описать или дать выбор на основе какого параметра работает threshold
+- extract-color-from-png: надо описать или дать выбор на основе какого параметра
+  работает threshold
 - show-transparent-png: кнопки вместо select
 - show-grayscale-pixels-png: кнопки вместо select
 - show-color-pixels-png: кнопки вместо select
 - light-pixel-mask-png: кнопки вместо select
-- verify-is-png: название неверное, в описании указано изображение, а фактически проверяется текст
+- verify-is-png: название неверное, в описании указано изображение, а фактически
-- png-is-grayscale: результат плохо виден, нужно ли копирование на полный вердикт? может отдельные поля - 0\1, yes\no?
+  проверяется текст
+- png-is-grayscale: результат плохо виден, нужно ли копирование на полный
+  вердикт? может отдельные поля - 0\1, yes\no?
 
 ### generators
 
@@ -100,10 +132,12 @@
 - draw-grid-png: выбор цвета фона
 - placeholder-png: с галочкой "показать текст" нет заполнения фона
 - blend-two-png: высота не задается
-- step-colors-png: кнопки вместо select, высота не задается, не слишком ли маленький max steps?
+- step-colors-png: кнопки вместо select, высота не задается, не слишком ли
+  маленький max steps?
 - emoji-to-png: выбор эмодзи
 - color-wheel-png: сглаживание краев
-- complementary-png: кнопки вместо select(?), не меняется, всего 2 цвета, высота не задается
+- complementary-png: кнопки вместо select(?), не меняется, всего 2 цвета, высота
+  не задается
 - triadic-png: кнопки вместо select, высота не задается
 - tetradic-png: кнопки вместо select, высота не задается
 - analogous-png: кнопки вместо select, высота не задается
@@ -119,4 +153,5 @@
 - range slider with presets: слайдер, как выше, добавочные кнопки с пресетами
 - color picker: пикер с картинки (как исходника, так и результата), прозрачность
 - ввод высоты и ширины с keep aspect ratio должен быть единым компонентом
-- поле seed (random) - range slider не нужен, поле для ввода и "randomize" кнопка
+- поле seed (random) - range slider не нужен, поле для ввода и "randomize"
+  кнопка

web/src/app.html

@@ -4,6 +4,20 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="text-scale" content="scale" />
+		<!-- Google tag (gtag.js) -->
+		<script
+			async
+			src="https://www.googletagmanager.com/gtag/js?id=G-MEQJ7JHRQQ"
+		></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag("js", new Date());
+
+			gtag("config", "G-MEQJ7JHRQQ");
+		</script>
 		<script>
 			(() => {
 				try {

web/src/lib/registry/geometry.ts

@@ -1,10 +1,10 @@
-import { ToolError } from "../core/errors";
 import {
 	rotateFreeImage,
 	skewImage,
 	transformImage,
 	zoomImage,
 } from "../core/affine";
+import { ToolError } from "../core/errors";
 import {
 	centerByAlpha,
 	changeCanvasSize,
@@ -249,22 +249,22 @@ export const cropSchema = toolSchema<CropParams>(
 	{
 		x: field.number({
 			label: "fields.x",
-			min: -100000,
+			min: 0,
-			max: 100000,
+			max: 2000,
 			step: 1,
 			default: 0,
 		}),
 		y: field.number({
 			label: "fields.y",
-			min: -100000,
+			min: 0,
-			max: 100000,
+			max: 1200,
 			step: 1,
 			default: 0,
 		}),
 		size: field.dimension({
 			label: "fields.cropAreaSize",
 			min: 0,
-			max: 100000,
+			max: 2000,
 			width: 0,
 			height: 0,
 		}),

web/src/lib/v1/registry/geometry.ts

@@ -1,27 +1,27 @@
-import type { ToolEntry } from "../registry";
-import { ToolError } from "../../core/errors";
-import {
-	crop,
-	expandCanvas,
-	flip,
-	resize,
-	rotate90,
-	tile,
-	centerByAlpha,
-	changeCanvasSize,
-	cropToRatio,
-	forceOrientation,
-	padToRatio,
-	symmetricCopy,
-	trimToContent,
-	type Anchor9,
-} from "../../core/geometry";
 import {
 	rotateFreeImage,
 	skewImage,
 	transformImage,
 	zoomImage,
 } from "../../core/affine";
+import { ToolError } from "../../core/errors";
+import {
+	centerByAlpha,
+	changeCanvasSize,
+	crop,
+	cropToRatio,
+	expandCanvas,
+	flip,
+	forceOrientation,
+	padToRatio,
+	resize,
+	rotate90,
+	symmetricCopy,
+	tile,
+	trimToContent,
+	type Anchor9,
+} from "../../core/geometry";
+import type { ToolEntry } from "../registry";
 import { num, str } from "../registry-helpers";
 
 export function geometryEntries(): ToolEntry[] {
@@ -90,8 +90,8 @@ export function geometryEntries(): ToolEntry[] {
 					id: "x",
 					label: "X (from left)",
 					type: "number",
-					min: -100000,
+					min: -0,
-					max: 100000,
+					max: 2000,
 					step: 1,
 					default: 0,
 				},
@@ -99,8 +99,8 @@ export function geometryEntries(): ToolEntry[] {
 					id: "y",
 					label: "Y (from top)",
 					type: "number",
-					min: -100000,
+					min: 0,
-					max: 100000,
+					max: 1200,
 					step: 1,
 					default: 0,
 				},
@@ -108,8 +108,8 @@ export function geometryEntries(): ToolEntry[] {
 					id: "width",
 					label: "Area width",
 					type: "number",
-					min: -100000,
+					min: 0,
-					max: 100000,
+					max: 2000,
 					step: 1,
 					default: 0,
 				},
@@ -117,8 +117,8 @@ export function geometryEntries(): ToolEntry[] {
 					id: "height",
 					label: "Area height",
 					type: "number",
-					min: -100000,
+					min: 0,
-					max: 100000,
+					max: 1200,
 					step: 1,
 					default: 0,
 				},