mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-15 22:16:35 +00:00
refactor: separate registry file
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
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"),
|
||||
}),
|
||||
},
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user