feat: update generate tool to new types

This commit is contained in:
2026-09-10 12:01:53 +05:00
parent 9dccdd99a0
commit 6b0b0646d5
+63 -31
View File
@@ -2,7 +2,6 @@ import { renderEmoji, renderTextToImage } from "../core/domText";
import { colorSpectrum, drawGrid, randomColorBlocks } from "../core/gen-tools"; import { colorSpectrum, drawGrid, randomColorBlocks } from "../core/gen-tools";
import { noiseImage, solidImage } from "../core/generate"; import { noiseImage, solidImage } from "../core/generate";
import { changeCanvasSize } from "../core/geometry"; import { changeCanvasSize } from "../core/geometry";
import type { PixelImage } from "../core/types";
import { import {
analogousSet, analogousSet,
complementarySet, complementarySet,
@@ -18,6 +17,7 @@ import {
tetradicSet, tetradicSet,
triadicSet, triadicSet,
} from "../core/palette"; } from "../core/palette";
import type { PixelImage } from "../core/types";
import { import {
field, field,
toolSchema, toolSchema,
@@ -26,7 +26,7 @@ import {
type FontStyle, type FontStyle,
type Gradient, type Gradient,
} from "../registry-schema"; } from "../registry-schema";
import type { ToolEntry } from "./types"; import { genTool, type ToolEntry } from "./types";
function rgba(hex: string): [number, number, number, number] { function rgba(hex: string): [number, number, number, number] {
const { r, g, b } = hexToRgb(hex); const { r, g, b } = hexToRgb(hex);
@@ -101,14 +101,15 @@ const createEmpty: ToolEntry<CreateEmptyParams> = {
"Creates a blank canvas of the chosen dimensions, either transparent or filled with a solid color.", "Creates a blank canvas of the chosen dimensions, either transparent or filled with a solid color.",
category: "generate", category: "generate",
schema: createEmptySchema, schema: createEmptySchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
if (p.transparent) { if (p.transparent) {
return solidImage(w, h, [0, 0, 0, 0]); return solidImage(w, h, [0, 0, 0, 0]);
} }
return solidImage(w, h, rgba(p.color)); return solidImage(w, h, rgba(p.color));
}, }),
}; };
interface SingleColorParams { interface SingleColorParams {
@@ -127,11 +128,12 @@ const singleColor: ToolEntry<SingleColorParams> = {
description: "Generates a rectangle of the given size and color.", description: "Generates a rectangle of the given size and color.",
category: "generate", category: "generate",
schema: singleColorSchema, schema: singleColorSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return solidImage(w, h, rgba(p.color)); return solidImage(w, h, rgba(p.color));
}, }),
}; };
interface RandomNoiseParams { interface RandomNoiseParams {
@@ -151,11 +153,12 @@ const randomNoise: ToolEntry<RandomNoiseParams> = {
"Generates an image with random pixels. The seed fixes the result: one seed — one image.", "Generates an image with random pixels. The seed fixes the result: one seed — one image.",
category: "generate", category: "generate",
schema: randomNoiseSchema, schema: randomNoiseSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return noiseImage(w, h, p.seed); return noiseImage(w, h, p.seed);
}, }),
}; };
interface LinearGradientParams { interface LinearGradientParams {
@@ -185,7 +188,8 @@ const linearGradient: ToolEntry<LinearGradientParams> = {
"Generates a smooth transition between two colors along a chosen angle.", "Generates a smooth transition between two colors along a chosen angle.",
category: "generate", category: "generate",
schema: linearGradientSchema, schema: linearGradientSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return angleGradient( return angleGradient(
@@ -195,7 +199,7 @@ const linearGradient: ToolEntry<LinearGradientParams> = {
rgba(p.gradient.to), rgba(p.gradient.to),
p.gradient.angle, p.gradient.angle,
); );
}, }),
}; };
interface ColorSpectrumParams { interface ColorSpectrumParams {
@@ -235,11 +239,12 @@ const colorSpectrumTool: ToolEntry<ColorSpectrumParams> = {
"Full hue rainbow 0360° along the chosen axis with adjustable saturation and lightness.", "Full hue rainbow 0360° along the chosen axis with adjustable saturation and lightness.",
category: "generate", category: "generate",
schema: colorSpectrumSchema, schema: colorSpectrumSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return colorSpectrum(w, h, p.direction, p.saturation, p.lightness); return colorSpectrum(w, h, p.direction, p.saturation, p.lightness);
}, }),
}; };
interface RandomColorsParams { interface RandomColorsParams {
@@ -271,11 +276,12 @@ const randomColors: ToolEntry<RandomColorsParams> = {
"Fills the canvas with random vivid color blocks. Deterministic by seed.", "Fills the canvas with random vivid color blocks. Deterministic by seed.",
category: "generate", category: "generate",
schema: randomColorsSchema, schema: randomColorsSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return randomColorBlocks(w, h, p.blockSize, p.seed); return randomColorBlocks(w, h, p.blockSize, p.seed);
}, }),
}; };
interface DrawGridParams { interface DrawGridParams {
@@ -317,7 +323,8 @@ const drawGridTool: ToolEntry<DrawGridParams> = {
"Draws a grid with custom columns, rows and line width on a transparent or white background.", "Draws a grid with custom columns, rows and line width on a transparent or white background.",
category: "generate", category: "generate",
schema: drawGridSchema, schema: drawGridSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
return drawGrid( return drawGrid(
@@ -329,7 +336,7 @@ const drawGridTool: ToolEntry<DrawGridParams> = {
p.color, p.color,
p.transparentBg, p.transparentBg,
); );
}, }),
}; };
interface PlaceholderParams { interface PlaceholderParams {
@@ -364,7 +371,8 @@ const placeholder: ToolEntry<PlaceholderParams> = {
"Generates a placeholder rectangle with its dimensions printed in the center.", "Generates a placeholder rectangle with its dimensions printed in the center.",
category: "generate", category: "generate",
schema: placeholderSchema, schema: placeholderSchema,
generate: (p) => { input: "none",
run: genTool((p) => {
const w = Math.trunc(p.size.width); const w = Math.trunc(p.size.width);
const h = Math.trunc(p.size.height); const h = Math.trunc(p.size.height);
let out = solidImage(w, h, rgba(p.backgroundColor)); let out = solidImage(w, h, rgba(p.backgroundColor));
@@ -382,7 +390,7 @@ const placeholder: ToolEntry<PlaceholderParams> = {
out = changeCanvasSize(label, w, h, "center"); out = changeCanvasSize(label, w, h, "center");
} }
return out; return out;
}, }),
}; };
interface BlendTwoParams { interface BlendTwoParams {
@@ -401,7 +409,8 @@ const blendTwo: ToolEntry<BlendTwoParams> = {
description: "A continuous horizontal gradient between two colors.", description: "A continuous horizontal gradient between two colors.",
category: "generate", category: "generate",
schema: blendTwoSchema, schema: blendTwoSchema,
generate: (p) => renderBlend(p.pair.from, p.pair.to, p.width), input: "none",
run: genTool((p) => renderBlend(p.pair.from, p.pair.to, p.width)),
}; };
interface StepColorsParams { interface StepColorsParams {
@@ -440,12 +449,14 @@ const stepColorsTool: ToolEntry<StepColorsParams> = {
description: "A discrete set of evenly spaced steps between two colors.", description: "A discrete set of evenly spaced steps between two colors.",
category: "generate", category: "generate",
schema: stepColorsSchema, schema: stepColorsSchema,
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches( renderSwatches(
stepColors(p.pair.from, p.pair.to, p.steps), stepColors(p.pair.from, p.pair.to, p.steps),
p.width, p.width,
p.layout, p.layout,
), ),
),
}; };
interface EmojiToPngParams { interface EmojiToPngParams {
@@ -466,7 +477,8 @@ const emojiToPng: ToolEntry<EmojiToPngParams> = {
category: "generate", category: "generate",
domOnly: true, domOnly: true,
schema: emojiToPngSchema, schema: emojiToPngSchema,
generate: (p) => renderEmoji(p.emoji, Math.round(p.size)), input: "none",
run: genTool((p) => renderEmoji(p.emoji, Math.round(p.size))),
}; };
interface ColorWheelParams { interface ColorWheelParams {
@@ -486,7 +498,8 @@ const colorWheelTool: ToolEntry<ColorWheelParams> = {
"Generates an HSL color wheel: hue around the circle, saturation from center to edge, chosen lightness.", "Generates an HSL color wheel: hue around the circle, saturation from center to edge, chosen lightness.",
category: "generate", category: "generate",
schema: colorWheelSchema, schema: colorWheelSchema,
generate: (p) => renderWheel(p.size, p.lightness), input: "none",
run: genTool((p) => renderWheel(p.size, p.lightness)),
}; };
interface PaletteBaseParams { interface PaletteBaseParams {
@@ -530,8 +543,10 @@ const complementaryTool: ToolEntry<PaletteBaseParams> = {
{ ...paletteBaseSchema }, { ...paletteBaseSchema },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches(complementarySet(p.baseColor), p.width, p.layout), renderSwatches(complementarySet(p.baseColor), p.width, p.layout),
),
}; };
const triadicTool: ToolEntry<PaletteBaseParams> = { const triadicTool: ToolEntry<PaletteBaseParams> = {
@@ -546,7 +561,10 @@ const triadicTool: ToolEntry<PaletteBaseParams> = {
}, },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => renderSwatches(triadicSet(p.baseColor), p.width, p.layout), input: "none",
run: genTool((p) =>
renderSwatches(triadicSet(p.baseColor), p.width, p.layout),
),
}; };
const tetradicTool: ToolEntry<PaletteBaseParams> = { const tetradicTool: ToolEntry<PaletteBaseParams> = {
@@ -562,7 +580,10 @@ const tetradicTool: ToolEntry<PaletteBaseParams> = {
}, },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => renderSwatches(tetradicSet(p.baseColor), p.width, p.layout), input: "none",
run: genTool((p) =>
renderSwatches(tetradicSet(p.baseColor), p.width, p.layout),
),
}; };
interface AnalogousParams extends PaletteBaseParams { interface AnalogousParams extends PaletteBaseParams {
@@ -585,12 +606,14 @@ const analogousTool: ToolEntry<AnalogousParams> = {
}, },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches( renderSwatches(
analogousSet(p.baseColor, p.spread, p.count), analogousSet(p.baseColor, p.spread, p.count),
p.width, p.width,
p.layout, p.layout,
), ),
),
}; };
interface MonochromaticParams extends PaletteBaseParams { interface MonochromaticParams extends PaletteBaseParams {
@@ -613,12 +636,14 @@ const monochromaticTool: ToolEntry<MonochromaticParams> = {
}, },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches( renderSwatches(
monochromaticSet(p.baseColor, p.count, p.range), monochromaticSet(p.baseColor, p.count, p.range),
p.width, p.width,
p.layout, p.layout,
), ),
),
}; };
interface ShadesParams extends PaletteBaseParams { interface ShadesParams extends PaletteBaseParams {
@@ -640,8 +665,10 @@ const shadesTool: ToolEntry<ShadesParams> = {
}, },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
), ),
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches(shadeSet(p.baseColor, p.count, p.depth), p.width, p.layout), renderSwatches(shadeSet(p.baseColor, p.count, p.depth), p.width, p.layout),
),
}; };
interface MixColorsParams { interface MixColorsParams {
@@ -671,7 +698,8 @@ const mixColorsTool: ToolEntry<MixColorsParams> = {
"Averages the selected colors into one swatch. Colors become one uniform fill.", "Averages the selected colors into one swatch. Colors become one uniform fill.",
category: "generate", category: "generate",
schema: mixColorsSchema, schema: mixColorsSchema,
generate: (p) => renderSwatches([mixColors(p.colors)], p.width, "strip"), input: "none",
run: genTool((p) => renderSwatches([mixColors(p.colors)], p.width, "strip")),
}; };
interface SortColorsParams { interface SortColorsParams {
@@ -731,8 +759,10 @@ const sortColorsTool: ToolEntry<SortColorsParams> = {
"Renders the chosen colors as swatches sorted by hue, brightness or saturation.", "Renders the chosen colors as swatches sorted by hue, brightness or saturation.",
category: "generate", category: "generate",
schema: sortColorsSchema, schema: sortColorsSchema,
generate: (p) => input: "none",
run: genTool((p) =>
renderSwatches(sortPalette(p.colors, p.order), p.width, p.layout), renderSwatches(sortPalette(p.colors, p.order), p.width, p.layout),
),
}; };
interface TextToPngParams { interface TextToPngParams {
@@ -777,7 +807,8 @@ const textToPng: ToolEntry<TextToPngParams> = {
category: "generate", category: "generate",
domOnly: true, domOnly: true,
schema: textToPngSchema, schema: textToPngSchema,
generate: (p) => input: "none",
run: genTool((p) =>
renderTextToImage({ renderTextToImage({
text: p.text, text: p.text,
fontSize: p.style.size, fontSize: p.style.size,
@@ -788,6 +819,7 @@ const textToPng: ToolEntry<TextToPngParams> = {
transparentBg: p.transparentBg, transparentBg: p.transparentBg,
padding: p.padding, padding: p.padding,
}), }),
),
}; };
export const generateEntries = [ export const generateEntries = [