easy-png-tools2/web/src/lib/registry/text.ts

import type { ToolEntry } from "../registry";
import { drawTextBlock, drawTextTile, type TextFont } from "../core/domText";
import { formatStamp } from "../core/datefmt";
import type { Position9 } from "../core/textdraw";
import { num, str, bool } from "../registry-helpers";

export function textEntries(): ToolEntry[] {
	return [
		{
			id: "add-text-png",
			title: "Add text to PNG",
			description:
				"Draws a text label on the image: font, size, color, bold, position on a 3×3 grid and an optional backing plate.",
			category: "text",
			domOnly: true,
			params: [
				{
					id: "text",
					label: "Text",
					type: "text",
					default: "Hello!",
					placeholder: "Your text",
				},
				{
					id: "fontSize",
					label: "Font size, px",
					type: "slider",
					min: 8,
					max: 200,
					step: 1,
					default: 48,
				},
				{
					id: "color",
					label: "Text color",
					type: "color",
					default: "#ffffff",
				},
				{
					id: "font",
					label: "Font",
					type: "select",
					default: "sans",
					options: [
						{ value: "sans", label: "Sans-serif" },
						{ value: "serif", label: "Serif" },
						{ value: "mono", label: "Monospace" },
					],
				},
				{ id: "bold", label: "Bold", type: "checkbox", default: true },
				{
					id: "position",
					label: "Position",
					type: "select",
					default: "bottom-right",
					options: [
						{ value: "top-left", label: "Top left" },
						{ value: "top-center", label: "Top center" },
						{ value: "top-right", label: "Top right" },
						{ value: "middle-left", label: "Middle left" },
						{ value: "center", label: "Center" },
						{ value: "middle-right", label: "Middle right" },
						{ value: "bottom-left", label: "Bottom left" },
						{ value: "bottom-center", label: "Bottom center" },
						{ value: "bottom-right", label: "Bottom right" },
					],
				},
				{
					id: "margin",
					label: "Margin, px",
					type: "slider",
					min: 0,
					max: 200,
					step: 1,
					default: 24,
				},
				{
					id: "plate",
					label: "Backing plate",
					type: "checkbox",
					default: false,
				},
				{
					id: "plateColor",
					label: "Plate color",
					type: "color",
					default: "#000000",
				},
				{
					id: "plateOpacity",
					label: "Plate opacity, %",
					type: "slider",
					min: 0,
					max: 100,
					step: 5,
					default: 60,
				},
			],
			run: (img, p) =>
				drawTextBlock(img, {
					text: str(p, "text"),
					fontSize: num(p, "fontSize"),
					font: str(p, "font") as TextFont,
					bold: bool(p, "bold"),
					color: str(p, "color"),
					opacityPercent: 100,
					position: str(p, "position") as Position9,
					margin: num(p, "margin"),
					plateColor: bool(p, "plate") ? str(p, "plateColor") : undefined,
					plateOpacityPercent: num(p, "plateOpacity"),
				}),
		},
		{
			id: "date-stamp-png",
			title: "Date stamp PNG",
			description:
				"Stamps the current date and time using a format string (YYYY MM DD hh mm ss tokens). Same styling options as Add text.",
			category: "text",
			domOnly: true,
			params: [
				{
					id: "format",
					label: "Format",
					type: "text",
					default: "YYYY-MM-DD",
					placeholder: "YYYY-MM-DD hh:mm",
				},
				{
					id: "fontSize",
					label: "Font size, px",
					type: "slider",
					min: 8,
					max: 200,
					step: 1,
					default: 32,
				},
				{
					id: "color",
					label: "Text color",
					type: "color",
					default: "#ffffff",
				},
				{
					id: "font",
					label: "Font",
					type: "select",
					default: "mono",
					options: [
						{ value: "sans", label: "Sans-serif" },
						{ value: "serif", label: "Serif" },
						{ value: "mono", label: "Monospace" },
					],
				},
				{ id: "bold", label: "Bold", type: "checkbox", default: false },
				{
					id: "position",
					label: "Position",
					type: "select",
					default: "bottom-right",
					options: [
						{ value: "top-left", label: "Top left" },
						{ value: "top-center", label: "Top center" },
						{ value: "top-right", label: "Top right" },
						{ value: "middle-left", label: "Middle left" },
						{ value: "center", label: "Center" },
						{ value: "middle-right", label: "Middle right" },
						{ value: "bottom-left", label: "Bottom left" },
						{ value: "bottom-center", label: "Bottom center" },
						{ value: "bottom-right", label: "Bottom right" },
					],
				},
				{
					id: "margin",
					label: "Margin, px",
					type: "slider",
					min: 0,
					max: 200,
					step: 1,
					default: 20,
				},
				{
					id: "plate",
					label: "Backing plate",
					type: "checkbox",
					default: true,
				},
				{
					id: "plateColor",
					label: "Plate color",
					type: "color",
					default: "#000000",
				},
				{
					id: "plateOpacity",
					label: "Plate opacity, %",
					type: "slider",
					min: 0,
					max: 100,
					step: 5,
					default: 55,
				},
			],
			run: (img, p) =>
				drawTextBlock(img, {
					text: formatStamp(new Date(), str(p, "format")),
					fontSize: num(p, "fontSize"),
					font: str(p, "font") as TextFont,
					bold: bool(p, "bold"),
					color: str(p, "color"),
					opacityPercent: 100,
					position: str(p, "position") as Position9,
					margin: num(p, "margin"),
					plateColor: bool(p, "plate") ? str(p, "plateColor") : undefined,
					plateOpacityPercent: num(p, "plateOpacity"),
				}),
		},
		{
			id: "watermark-tile-png",
			title: "Watermark Tile PNG",
			description:
				"Covers the image with a repeating diagonal semi-transparent text tile — a protection watermark.",
			category: "text",
			domOnly: true,
			params: [
				{
					id: "text",
					label: "Text",
					type: "text",
					default: "DRAFT",
					placeholder: "Watermark text",
				},
				{
					id: "fontSize",
					label: "Font size, px",
					type: "slider",
					min: 12,
					max: 160,
					step: 1,
					default: 56,
				},
				{
					id: "color",
					label: "Text color",
					type: "color",
					default: "#ffffff",
				},
				{
					id: "opacity",
					label: "Opacity, %",
					type: "slider",
					min: 5,
					max: 100,
					step: 5,
					default: 30,
				},
				{
					id: "angle",
					label: "Angle, °",
					type: "slider",
					min: -90,
					max: 90,
					step: 1,
					default: -30,
				},
				{
					id: "stepX",
					label: "Step X, px",
					type: "slider",
					min: 40,
					max: 600,
					step: 10,
					default: 220,
				},
				{
					id: "stepY",
					label: "Step Y, px",
					type: "slider",
					min: 40,
					max: 600,
					step: 10,
					default: 180,
				},
				{
					id: "font",
					label: "Font",
					type: "select",
					default: "sans",
					options: [
						{ value: "sans", label: "Sans-serif" },
						{ value: "serif", label: "Serif" },
						{ value: "mono", label: "Monospace" },
					],
				},
				{
					id: "bold",
					label: "Bold",
					type: "checkbox",
					default: true,
				},
			],
			run: (img, p) =>
				drawTextTile(img, {
					text: str(p, "text"),
					fontSize: num(p, "fontSize"),
					font: str(p, "font") as TextFont,
					bold: bool(p, "bold"),
					color: str(p, "color"),
					opacityPercent: num(p, "opacity"),
					stepX: num(p, "stepX"),
					stepY: num(p, "stepY"),
					angleDeg: num(p, "angle"),
				}),
		},
	];
}