mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
fix: update tools list - show all tools
This commit is contained in:
@@ -14,7 +14,9 @@
|
||||
{ value: "color", label: "COLOR" },
|
||||
{ value: "geometry", label: "GEOMETRY" },
|
||||
{ value: "filters", label: "FILTERS" },
|
||||
{ value: "text", label: "TEXT" },
|
||||
{ value: "analyze", label: "ANALYZE" },
|
||||
{ value: "generate", label: "GENERATE" },
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
+21
-224
@@ -1,3 +1,4 @@
|
||||
import { CATEGORIES } from "../categories";
|
||||
import { TOOLS, type ToolEntry } from "../registry";
|
||||
|
||||
export type PreviewGroup = {
|
||||
@@ -6,230 +7,26 @@ export type PreviewGroup = {
|
||||
tools: ToolEntry[];
|
||||
};
|
||||
|
||||
/** Uppercase labels для всех категорий каталога (стиль нового дизайна). */
|
||||
const GROUP_LABELS: Record<string, string> = {
|
||||
convert: "CONVERT",
|
||||
alpha: "TRANSPARENCY",
|
||||
color: "COLOR",
|
||||
geometry: "GEOMETRY",
|
||||
filters: "FILTERS",
|
||||
text: "TEXT",
|
||||
analyze: "ANALYZE",
|
||||
generate: "GENERATE",
|
||||
};
|
||||
|
||||
/**
|
||||
* Preview-only catalog: a trimmed view of the registry that mirrors
|
||||
* refs-html/list-tools.html (28 tools in 6 groups). Used exclusively by
|
||||
* /preview and /kit so the working site (old) and /ui keep the full registry.
|
||||
*
|
||||
* Titles/descriptions are overridden with the ref's exact copy where they
|
||||
* diverge from the registry. The underlying ToolEntry (params, run, …) is
|
||||
* reused so navigation and tool pages stay functional.
|
||||
* Preview-каталог: полный реестр инструментов, сгруппированный по категориям.
|
||||
* Больше не урезаем до референс-набора — показываем все инструменты из TOOLS.
|
||||
*/
|
||||
const REF: {
|
||||
group: string;
|
||||
label: string;
|
||||
tools: { id: string; title: string; description: string }[];
|
||||
}[] = [
|
||||
{
|
||||
group: "convert",
|
||||
label: "CONVERT",
|
||||
tools: [
|
||||
{
|
||||
id: "jpg-to-png",
|
||||
title: "Convert JPG to PNG",
|
||||
description:
|
||||
"Re-encode JPEG files as lossless PNG while preserving transparency.",
|
||||
},
|
||||
{
|
||||
id: "webp-to-png",
|
||||
title: "Convert WebP to PNG",
|
||||
description:
|
||||
"Turn WebP images into a universal PNG format for any workflow.",
|
||||
},
|
||||
{
|
||||
id: "png-to-base64",
|
||||
title: "PNG to Base64",
|
||||
description:
|
||||
"Encode an image as a base64 string for embedding in code or styles.",
|
||||
},
|
||||
{
|
||||
id: "png-to-data-uri",
|
||||
title: "PNG to Data URI",
|
||||
description: "Build a complete data URI ready for HTML and CSS.",
|
||||
},
|
||||
{
|
||||
id: "convert-png-to-jpg",
|
||||
title: "Convert PNG to JPG",
|
||||
description:
|
||||
"Composite transparency over a selected backdrop and export JPEG.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "alpha",
|
||||
label: "TRANSPARENCY",
|
||||
tools: [
|
||||
{
|
||||
id: "remove-background-png",
|
||||
title: "Remove background PNG",
|
||||
description:
|
||||
"Remove a solid background by color, tolerance, or edge-connected regions.",
|
||||
},
|
||||
{
|
||||
id: "extract-alpha-mask-png",
|
||||
title: "Extract alpha mask",
|
||||
description:
|
||||
"Turn the alpha channel into a clean black-and-white mask.",
|
||||
},
|
||||
{
|
||||
id: "round-corners-png",
|
||||
title: "Round corners PNG",
|
||||
description: "Clip the image corners by a precise radius percentage.",
|
||||
},
|
||||
{
|
||||
id: "add-stroke-png",
|
||||
title: "Outline PNG",
|
||||
description:
|
||||
"Add a colored ring around opaque content with adjustable thickness.",
|
||||
},
|
||||
{
|
||||
id: "change-png-opacity",
|
||||
title: "Change PNG opacity",
|
||||
description:
|
||||
"Multiply the alpha channel while keeping the original colors unchanged.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "color",
|
||||
label: "COLOR",
|
||||
tools: [
|
||||
{
|
||||
id: "linear-gradient-png",
|
||||
title: "Create gradient PNG",
|
||||
description:
|
||||
"Generate a smooth transition between two colors with direction controls.",
|
||||
},
|
||||
{
|
||||
id: "grayscale-png",
|
||||
title: "Grayscale PNG",
|
||||
description: "Convert the image to luminance-based shades of gray.",
|
||||
},
|
||||
{
|
||||
id: "invert-colors-png",
|
||||
title: "Invert colors PNG",
|
||||
description:
|
||||
"Invert every color channel while leaving alpha untouched.",
|
||||
},
|
||||
{
|
||||
id: "adjust-brightness-contrast-png",
|
||||
title: "Brightness & contrast",
|
||||
description:
|
||||
"Adjust brightness and contrast across a controlled range.",
|
||||
},
|
||||
{
|
||||
id: "temperature-png",
|
||||
title: "Temperature PNG",
|
||||
description:
|
||||
"Make an image warmer or cooler with a single precise control.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "geometry",
|
||||
label: "GEOMETRY",
|
||||
tools: [
|
||||
{
|
||||
id: "resize-png",
|
||||
title: "Resize PNG",
|
||||
description:
|
||||
"Scale an image with bilinear interpolation and optional aspect lock.",
|
||||
},
|
||||
{
|
||||
id: "crop-png",
|
||||
title: "Crop PNG",
|
||||
description:
|
||||
"Cut a rectangular area with exact coordinates and dimensions.",
|
||||
},
|
||||
{
|
||||
id: "rotate-png",
|
||||
title: "Rotate PNG",
|
||||
description: "Rotate by 90, 180, or 270 degrees without quality loss.",
|
||||
},
|
||||
{
|
||||
id: "flip-png",
|
||||
title: "Flip PNG",
|
||||
description: "Mirror the image horizontally or vertically.",
|
||||
},
|
||||
{
|
||||
id: "add-padding-png",
|
||||
title: "Add padding to PNG",
|
||||
description:
|
||||
"Expand the canvas on all sides by a chosen number of pixels.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "filters",
|
||||
label: "FILTERS",
|
||||
tools: [
|
||||
{
|
||||
id: "blur-png",
|
||||
title: "Blur PNG",
|
||||
description:
|
||||
"Apply a fast Gaussian-style blur with transparent edge handling.",
|
||||
},
|
||||
{
|
||||
id: "sharpen-png",
|
||||
title: "Sharpen PNG",
|
||||
description: "Emphasize edges with an adjustable sharpening kernel.",
|
||||
},
|
||||
{
|
||||
id: "vignette-png",
|
||||
title: "Vignette PNG",
|
||||
description:
|
||||
"Smoothly darken the image edges while preserving the center.",
|
||||
},
|
||||
{
|
||||
id: "jpeg-artifacts-png",
|
||||
title: "JPEG artifacts",
|
||||
description: "Simulate low-quality JPEG recompression for testing.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "analyze",
|
||||
label: "ANALYZE",
|
||||
tools: [
|
||||
{
|
||||
id: "png-info",
|
||||
title: "PNG info",
|
||||
description:
|
||||
"Inspect dimensions, alpha presence, and unique color count.",
|
||||
},
|
||||
{
|
||||
id: "png-is-grayscale",
|
||||
title: "Check grayscale",
|
||||
description: "Report whether the image contains only shades of gray.",
|
||||
},
|
||||
{
|
||||
id: "png-is-transparent",
|
||||
title: "Check transparency",
|
||||
description: "Detect transparent and semi-transparent pixels.",
|
||||
},
|
||||
{
|
||||
id: "png-orientation",
|
||||
title: "PNG orientation",
|
||||
description: "Classify the image as portrait, landscape, or square.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const PREVIEW_GROUPS: PreviewGroup[] = CATEGORIES.map((category) => ({
|
||||
id: category,
|
||||
label: GROUP_LABELS[category] ?? category.toUpperCase(),
|
||||
tools: TOOLS.filter((tool) => tool.category === category),
|
||||
})).filter((group) => group.tools.length > 0);
|
||||
|
||||
const TOOL_BY_ID = new Map(TOOLS.map((t) => [t.id, t]));
|
||||
|
||||
export const PREVIEW_GROUPS: PreviewGroup[] = REF.map((g) => ({
|
||||
id: g.group,
|
||||
label: g.label,
|
||||
tools: g.tools.map((spec) => {
|
||||
const base = TOOL_BY_ID.get(spec.id);
|
||||
if (!base) {
|
||||
throw new Error(`preview catalog: missing tool ${spec.id}`);
|
||||
}
|
||||
return { ...base, title: spec.title, description: spec.description };
|
||||
}),
|
||||
}));
|
||||
|
||||
// The ref header statically reads 32 (its own count); the body lists 28 cards.
|
||||
// Mirroring the ref exactly keeps the audit at 0/0.
|
||||
export const PREVIEW_TOTAL = 32;
|
||||
export const PREVIEW_TOTAL = TOOLS.length;
|
||||
|
||||
+12
-1
@@ -1,5 +1,5 @@
|
||||
import type { CategoryId } from "./categories";
|
||||
import type { ToolSchema } from "./registry-schema";
|
||||
import { field, toolSchema, type ToolSchema } from "./registry-schema";
|
||||
import { ToolError } from "./core/errors";
|
||||
import {
|
||||
colorMask,
|
||||
@@ -564,6 +564,16 @@ function hexToRgba(hex: string, alpha = 255): [number, number, number, number] {
|
||||
];
|
||||
}
|
||||
|
||||
interface AddBorderParams {
|
||||
thickness: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const addBorderSchema = toolSchema<AddBorderParams>({
|
||||
thickness: field.number({ min: 1, max: 500, step: 1, default: 5 }),
|
||||
color: field.color({ default: "#000000" }),
|
||||
});
|
||||
|
||||
export const TOOLS: ToolEntry[] = [
|
||||
...channelEntries(),
|
||||
...maskEntries(),
|
||||
@@ -933,6 +943,7 @@ export const TOOLS: ToolEntry[] = [
|
||||
description:
|
||||
"Draws a colored frame of the chosen thickness around the image.",
|
||||
category: "geometry",
|
||||
schema: addBorderSchema,
|
||||
params: [
|
||||
{
|
||||
id: "thickness",
|
||||
|
||||
Reference in New Issue
Block a user