xpict 0.1.2 → 0.2.0

package/dist/effects/blur.d.ts

@@ -0,0 +1,3 @@
+import sharp from "sharp";
+import { ImageTransformFunction } from "../layers";
+export declare function blurEffect(sigma: number | boolean | sharp.BlurOptions): ImageTransformFunction<any>;

package/dist/effects/blur.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blurEffect = blurEffect;
+function blurEffect(sigma) {
+    return ({ image }) => {
+        return image.blur(sigma);
+    };
+}

package/dist/effects/grayscale.d.ts

@@ -0,0 +1,2 @@
+import { ImageTransformFunction } from "../layers";
+export declare function grayscaleEffect(): ImageTransformFunction<any>;

package/dist/effects/grayscale.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.grayscaleEffect = grayscaleEffect;
+function grayscaleEffect() {
+    return ({ image }) => {
+        return image.grayscale();
+    };
+}

package/dist/effects/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./blur";
+export * from "./grayscale";
+export * from "./negative";

package/dist/effects/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./blur"), exports);
+__exportStar(require("./grayscale"), exports);
+__exportStar(require("./negative"), exports);

package/dist/effects/negative.d.ts

@@ -0,0 +1,2 @@
+import { ImageTransformFunction } from "../layers";
+export declare function negativeEffect(): ImageTransformFunction<any>;

package/dist/effects/negative.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.negativeEffect = negativeEffect;
+function negativeEffect() {
+    return ({ image }) => {
+        return image.negate();
+    };
+}

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import { GroupLayer, RepeatLayer, GroupLayerOptions, ImageLayer, ImageLayerOptions, LineLayer, LineLayerOptions, RectangleLayer, RectangleLayerOptions, RepeatLayerOptions, TextLayer, TextLayerOptions, CircleLayerOptions, CircleLayer } from "./layers";
-import { Template, TemplateOptions } from "./template";
+import { negativeEffect, blurEffect, grayscaleEffect } from "./effects";
+import { Template, InputTemplateOptions } from "./template";
 import { fontConfig } from "./utils/font-config";
+export * from "./layers";
+export * from "./effects";
+export * from "./template";
+export * from "./utils/font-config";
 declare const xpict: {
     rectangle<Data>(options: RectangleLayerOptions<Data>): RectangleLayer<Data>;
     circle<Data>(options: CircleLayerOptions<Data>): CircleLayer<Data>;
@@ -9,7 +14,12 @@ declare const xpict: {
     repeat<Data, Item>(options: RepeatLayerOptions<Data, Item>): RepeatLayer<Data, Item>;
     group<Data>(options: GroupLayerOptions<Data>): GroupLayer<Data>;
     line<Data>(options: LineLayerOptions<Data>): LineLayer<Data>;
-    template<Data>(options: TemplateOptions<Data>): Template<Data>;
+    template<Data>(options: InputTemplateOptions<Data>): Template<Data>;
     fontConfig: typeof fontConfig;
+    effects: {
+        negative: typeof negativeEffect;
+        blur: typeof blurEffect;
+        grayscale: typeof grayscaleEffect;
+    };
 };
 export default xpict;

package/dist/index.js

@@ -1,8 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const layers_1 = require("./layers");
+const effects_1 = require("./effects");
 const template_1 = require("./template");
 const font_config_1 = require("./utils/font-config");
+__exportStar(require("./layers"), exports);
+__exportStar(require("./effects"), exports);
+__exportStar(require("./template"), exports);
+__exportStar(require("./utils/font-config"), exports);
 const xpict = {
     rectangle(options) {
         return new layers_1.RectangleLayer(options);
@@ -28,6 +47,11 @@ const xpict = {
     template(options) {
         return new template_1.Template(options);
     },
-    fontConfig: font_config_1.fontConfig
+    fontConfig: font_config_1.fontConfig,
+    effects: {
+        negative: effects_1.negativeEffect,
+        blur: effects_1.blurEffect,
+        grayscale: effects_1.grayscaleEffect,
+    },
 };
 exports.default = xpict;

package/dist/layers/circle-layer.d.ts

@@ -1,15 +1,14 @@
+import { Layer, RenderOptions, WhenOptions } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
 export type CircleLayerOptions<Data> = {
     x: Axis<Data>;
     y: Axis<Data>;
     radius: number;
     fill: string;
-    when?: (data: Data, index?: number) => boolean;
+    when?: (options: WhenOptions<Data>) => boolean;
 };
 export declare class CircleLayer<Data> extends Layer<Data> {
     private readonly options;
     constructor(options: CircleLayerOptions<Data>);
-    render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/circle-layer.js

@@ -2,20 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircleLayer = void 0;
 const canvas_1 = require("canvas");
-const resolve_axis_1 = require("../utils/resolve-axis");
 const layer_1 = require("./layer");
+const resolve_axis_1 = require("../utils/resolve-axis");
 class CircleLayer extends layer_1.Layer {
     constructor(options) {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data, index = 0) {
+    async render({ context: ctx, data, index = 0, templateConfig }) {
         const image = ctx.image;
         const metadata = await image.metadata();
         const canvasWidth = metadata.width;
         const canvasHeight = metadata.height;
-        const x = ctx.offsetX + (0, resolve_axis_1.resolveAxis)(this.options.x, data, index);
-        const y = ctx.offsetY + (0, resolve_axis_1.resolveAxis)(this.options.y, data, index);
+        const x = ctx.offsetX +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.x,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
+        const y = ctx.offsetY +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.y,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
         const { radius, fill } = this.options;
         const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
         const context = canvas.getContext("2d");
@@ -29,8 +41,8 @@ class CircleLayer extends layer_1.Layer {
             {
                 input: circleBuffer,
                 top: 0,
-                left: 0
-            }
+                left: 0,
+            },
         ]);
     }
 }

package/dist/layers/group-layer.d.ts

@@ -1,14 +1,13 @@
-import { Layer } from "./layer";
+import { Layer, RenderOptions, WhenOptions } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
 export type GroupLayerOptions<Data> = {
     layers: Layer<Data>[];
     x: Axis<Data>;
     y: Axis<Data>;
-    when?: (data: Data) => boolean;
+    when?: (options: WhenOptions<Data>) => boolean;
 };
 export declare class GroupLayer<Data> extends Layer<Data> {
     private readonly options;
     constructor(options: GroupLayerOptions<Data>);
-    render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/group-layer.js

@@ -9,9 +9,19 @@ class GroupLayer extends layer_1.Layer {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data, index = 0) {
-        const dx = (0, resolve_axis_1.resolveAxis)(this.options.x, data, index);
-        const dy = (0, resolve_axis_1.resolveAxis)(this.options.y, data, index);
+    async render({ context: ctx, data, index = 0, templateConfig }) {
+        const dx = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.x,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
+        const dy = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.y,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
         const prevX = ctx.offsetX;
         const prevY = ctx.offsetY;
         ctx.offsetX += dx;
@@ -19,7 +29,12 @@ class GroupLayer extends layer_1.Layer {
         for (const layer of this.options.layers) {
             if (!layer.shouldRender(data))
                 continue;
-            await layer.render(ctx, data, index);
+            await layer.render({
+                context: ctx,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
             ctx.image = await (0, commit_frame_1.commitFrame)(ctx.image);
         }
         ctx.offsetX = prevX;

package/dist/layers/image-layer.d.ts

@@ -1,16 +1,31 @@
+import sharp from "sharp";
+import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
+export type TransformOptions<Data> = {
+    data: Data;
+    index: number;
+    image: sharp.Sharp;
+};
+export type ImageTransformFunction<Data> = (options: TransformOptions<Data>) => sharp.Sharp | Promise<sharp.Sharp>;
+export type ImageImageSrcOptions<Data> = {
+    data: Data;
+    index: number;
+};
+export type ImageSrcFunction<Data> = (options: ImageImageSrcOptions<Data>) => string | Buffer;
 export type ImageLayerOptions<Data> = {
-    src: (data: Data) => string | Buffer;
+    src: string | ImageSrcFunction<Data>;
     x: Axis<Data>;
     y: Axis<Data>;
     width?: number;
     height?: number;
-    when?: (data: Data) => boolean;
+    flipX?: boolean;
+    flipY?: boolean;
+    rotate?: number;
+    when?: WhenFunction<Data>;
+    transform?: ImageTransformFunction<Data>[];
 };
 export declare class ImageLayer<Data> extends Layer<Data> {
     private options;
     constructor(options: ImageLayerOptions<Data>);
-    render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/image-layer.js

@@ -5,24 +5,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageLayer = void 0;
 const sharp_1 = __importDefault(require("sharp"));
-const resolve_axis_1 = require("../utils/resolve-axis");
 const layer_1 = require("./layer");
+const resolve_axis_1 = require("../utils/resolve-axis");
 class ImageLayer extends layer_1.Layer {
     constructor(options) {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data, index = 0) {
-        const localX = (0, resolve_axis_1.resolveAxis)(this.options.x, data, index);
-        const localY = (0, resolve_axis_1.resolveAxis)(this.options.y, data, index);
+    async render({ context: ctx, data, index = 0, templateConfig }) {
+        const localX = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.x,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
+        const localY = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.y,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
         const x = ctx.offsetX + localX;
         const y = ctx.offsetY + localY;
-        const img = await (0, sharp_1.default)(this.options.src(data))
-            .resize(this.options.width, this.options.height)
-            .toBuffer();
-        ctx.image = ctx.image.composite([
-            { input: img, left: x, top: y }
-        ]);
+        const src = this.options.src;
+        const resolvedImageSource = typeof src === "string" ? src : src({ data: data, index: index });
+        let img = (0, sharp_1.default)(resolvedImageSource).resize(this.options.width, this.options.height);
+        if (this.options.flipX) {
+            img = img.flop();
+        }
+        if (this.options.flipY) {
+            img = img.flip();
+        }
+        if (this.options.rotate !== undefined) {
+            img = img.rotate(this.options.rotate);
+        }
+        if (this.options.transform && this.options.transform.length > 0) {
+            for (const transform of this.options.transform) {
+                img = await transform({
+                    data: data,
+                    index: index,
+                    image: img,
+                });
+            }
+        }
+        const buffer = await img.toBuffer();
+        ctx.image = ctx.image.composite([{ input: buffer, left: x, top: y }]);
     }
 }
 exports.ImageLayer = ImageLayer;

package/dist/layers/layer.d.ts

@@ -1,7 +1,19 @@
 import { RenderContext } from "../render-context";
+import { TemplateConfig } from "../template";
+export type WhenOptions<Data> = {
+    data: Data;
+    index: number;
+};
+export type WhenFunction<Data> = (options: WhenOptions<Data>) => boolean;
+export type RenderOptions<Data> = {
+    context: RenderContext;
+    data: Data;
+    index?: number;
+    templateConfig: TemplateConfig;
+};
 export declare abstract class Layer<Data = any> {
-    protected readonly when?: ((data: Data, index?: number) => boolean) | undefined;
-    constructor(when?: ((data: Data, index?: number) => boolean) | undefined);
+    protected readonly when?: WhenFunction<Data> | undefined;
+    constructor(when?: WhenFunction<Data> | undefined);
     shouldRender(data: Data, index?: number): boolean;
-    abstract render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    abstract render(options: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/layer.js

@@ -6,7 +6,7 @@ class Layer {
         this.when = when;
     }
     shouldRender(data, index = 0) {
-        return this.when ? this.when(data, index) : true;
+        return this.when ? this.when({ data, index }) : true;
     }
 }
 exports.Layer = Layer;

package/dist/layers/line-layer.d.ts

@@ -1,6 +1,5 @@
+import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
 export type LineLayerOptions<Data> = {
     from: {
         x: Axis<Data>;
@@ -12,10 +11,10 @@ export type LineLayerOptions<Data> = {
     };
     color: string;
     width: number;
-    when?: (data: Data, index?: number) => boolean;
+    when?: WhenFunction<Data>;
 };
 export declare class LineLayer<Data> extends Layer<Data> {
     private readonly options;
     constructor(options: LineLayerOptions<Data>);
-    render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/line-layer.js

@@ -2,22 +2,46 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineLayer = void 0;
 const canvas_1 = require("canvas");
-const resolve_axis_1 = require("../utils/resolve-axis");
 const layer_1 = require("./layer");
+const resolve_axis_1 = require("../utils/resolve-axis");
 class LineLayer extends layer_1.Layer {
     constructor(options) {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data, index = 0) {
+    async render({ context: ctx, data, index = 0, templateConfig }) {
         const image = ctx.image;
         const metadata = await image.metadata();
         const canvasWidth = metadata.width;
         const canvasHeight = metadata.height;
-        const x1 = ctx.offsetX + (0, resolve_axis_1.resolveAxis)(this.options.from.x, data, index);
-        const y1 = ctx.offsetY + (0, resolve_axis_1.resolveAxis)(this.options.from.y, data, index);
-        const x2 = ctx.offsetX + (0, resolve_axis_1.resolveAxis)(this.options.to.x, data, index);
-        const y2 = ctx.offsetY + (0, resolve_axis_1.resolveAxis)(this.options.to.y, data, index);
+        const x1 = ctx.offsetX +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.from.x,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
+        const y1 = ctx.offsetY +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.from.y,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
+        const x2 = ctx.offsetX +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.to.x,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
+        const y2 = ctx.offsetY +
+            (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.to.y,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
         const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
         const context = canvas.getContext("2d");
         context.strokeStyle = this.options.color;
@@ -32,8 +56,8 @@ class LineLayer extends layer_1.Layer {
             {
                 input: lineBuffer,
                 top: 0,
-                left: 0
-            }
+                left: 0,
+            },
         ]);
     }
 }

package/dist/layers/rectangle-layer.d.ts

@@ -1,6 +1,5 @@
+import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
 export type RectangleLayerOptions<Data> = {
     x: Axis<Data>;
     y: Axis<Data>;
@@ -11,6 +10,6 @@ export type RectangleLayerOptions<Data> = {
 };
 export declare class RectangleLayer<Data> extends Layer<Data> {
     private readonly options;
-    constructor(options: RectangleLayerOptions<Data>, when?: (data: Data, index?: number) => boolean);
-    render(ctx: RenderContext, data: Data, index?: number): Promise<void>;
+    constructor(options: RectangleLayerOptions<Data>, when?: WhenFunction<Data>);
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/rectangle-layer.js

@@ -2,20 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleLayer = void 0;
 const canvas_1 = require("canvas");
-const resolve_axis_1 = require("../utils/resolve-axis");
 const layer_1 = require("./layer");
+const resolve_axis_1 = require("../utils/resolve-axis");
 class RectangleLayer extends layer_1.Layer {
     constructor(options, when) {
         super(when);
         this.options = options;
     }
-    async render(ctx, data, index = 0) {
+    async render({ context: ctx, data, index = 0, templateConfig }) {
         const image = ctx.image;
         const metadata = await image.metadata();
         const canvasWidth = metadata.width;
         const canvasHeight = metadata.height;
-        const localX = (0, resolve_axis_1.resolveAxis)(this.options.x, data, index);
-        const localY = (0, resolve_axis_1.resolveAxis)(this.options.y, data, index);
+        const localX = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.x,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
+        const localY = (0, resolve_axis_1.resolveAxis)({
+            axis: this.options.y,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
         const x = ctx.offsetX + localX;
         const y = ctx.offsetY + localY;
         const { width, height, fill, borderRadius } = this.options;
@@ -45,8 +55,8 @@ class RectangleLayer extends layer_1.Layer {
             {
                 input: rectangleBuffer,
                 top: 0,
-                left: 0
-            }
+                left: 0,
+            },
         ]);
     }
 }

package/dist/layers/repeat-layer.d.ts

@@ -1,15 +1,19 @@
+import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
+export type EachOptions<Data> = {
+    data: Data;
+    index: number;
+};
+export type EachFunction<Data> = (options: EachOptions<Data>) => any[];
 export type RepeatLayerOptions<Data, Item> = {
-    each: (data: Data) => Item[];
+    each: EachFunction<Data>;
     layer: (item: Item, index: number) => Layer<Data>;
-    when?: (data: Data) => boolean;
+    when?: WhenFunction<Data>;
     x: Axis<Data>;
     y: Axis<Data>;
 };
 export declare class RepeatLayer<Data, Item> extends Layer<Data> {
     private readonly options;
     constructor(options: RepeatLayerOptions<Data, Item>);
-    render(ctx: RenderContext, data: Data): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/repeat-layer.js

@@ -1,28 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RepeatLayer = void 0;
+const layer_1 = require("./layer");
 const resolve_axis_1 = require("../utils/resolve-axis");
 const commit_frame_1 = require("../utils/commit-frame");
-const layer_1 = require("./layer");
 class RepeatLayer extends layer_1.Layer {
     constructor(options) {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data) {
-        const items = this.options.each(data);
+    async render({ context: ctx, data, index = 0, templateConfig }) {
+        const items = this.options.each({ data: data, index: index });
         if (!items || items.length === 0)
             return;
         for (let index = 0; index < items.length; index++) {
             const item = items[index];
-            const dx = (0, resolve_axis_1.resolveAxis)(this.options.x, data, index);
-            const dy = (0, resolve_axis_1.resolveAxis)(this.options.y, data, index);
+            const dx = (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.x,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
+            const dy = (0, resolve_axis_1.resolveAxis)({
+                axis: this.options.y,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
             const prevX = ctx.offsetX;
             const prevY = ctx.offsetY;
             ctx.offsetX += dx;
             ctx.offsetY += dy;
             const layer = this.options.layer(item, index);
-            await layer.render(ctx, data, index);
+            await layer.render({
+                context: ctx,
+                data: data,
+                index: index,
+                templateConfig: templateConfig,
+            });
             ctx.image = await (0, commit_frame_1.commitFrame)(ctx.image);
             ctx.offsetX = prevX;
             ctx.offsetY = prevY;

package/dist/layers/text-layer.d.ts

@@ -1,6 +1,5 @@
+import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
-import { RenderContext } from "../render-context";
-import { Layer } from "./layer";
 export type FontOptions = {
     size: number;
     color?: string;
@@ -12,8 +11,13 @@ export type Stroke = {
     fill: string;
     width: number;
 };
+export type TextFunctionOptions<Data> = {
+    data: Data;
+    index: number;
+};
+export type StringFunction<Data> = (options: TextFunctionOptions<Data>) => string;
 export type TextLayerOptions<Data> = {
-    text: (data: Data) => string;
+    text: StringFunction<Data> | string;
     font: FontOptions;
     x: Axis<Data>;
     y: Axis<Data>;
@@ -21,10 +25,10 @@ export type TextLayerOptions<Data> = {
     anchor?: TextAnchor;
     stroke?: Stroke;
     rotation?: number;
-    when?: (data: Data) => boolean;
+    when?: WhenFunction<Data>;
 };
 export declare class TextLayer<Data> extends Layer<Data> {
     private readonly options;
     constructor(options: TextLayerOptions<Data>);
-    render(ctx: RenderContext, data: Data): Promise<void>;
+    render({ context: ctx, data, index, templateConfig }: RenderOptions<Data>): Promise<void>;
 }

package/dist/layers/text-layer.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLayer = void 0;
 const canvas_1 = require("canvas");
-const resolve_axis_1 = require("../utils/resolve-axis");
 const layer_1 = require("./layer");
+const resolve_axis_1 = require("../utils/resolve-axis");
 const anchorOffsets = {
     "top-left": (w, h) => ({ x: 0, y: 0 }),
     "top-center": (w, h) => ({ x: -w / 2, y: 0 }),
@@ -13,19 +13,22 @@ const anchorOffsets = {
     "middle-right": (w, h) => ({ x: -w, y: -h / 2 }),
     "bottom-left": (w, h) => ({ x: 0, y: -h }),
     "bottom-center": (w, h) => ({ x: -w / 2, y: -h }),
-    "bottom-right": (w, h) => ({ x: -w, y: -h })
+    "bottom-right": (w, h) => ({ x: -w, y: -h }),
 };
 class TextLayer extends layer_1.Layer {
     constructor(options) {
         super(options.when);
         this.options = options;
     }
-    async render(ctx, data) {
+    async render({ context: ctx, data, index = 0, templateConfig }) {
         var _a, _b;
         const imageMetadata = await ctx.image.metadata();
         const width = imageMetadata.width;
         const height = imageMetadata.height;
-        const { text, font, x: initialX, y: initialY, backgroundColor = "transparent", anchor = "top-left", stroke, rotation = 0 } = this.options;
+        const { text, font, x: initialX, y: initialY, backgroundColor = "transparent", anchor = "top-left", stroke, rotation = 0, } = this.options;
+        if (!font.name) {
+            throw new Error("Font name is required");
+        }
         if (font.filePath) {
             (0, canvas_1.registerFont)(font.filePath, { family: font.name });
         }
@@ -37,13 +40,23 @@ class TextLayer extends layer_1.Layer {
         }
         context.font = `${font.size}px ${(_a = font.name) !== null && _a !== void 0 ? _a : "Arial"}`;
         context.fillStyle = (_b = font.color) !== null && _b !== void 0 ? _b : "#000";
-        const content = text(data);
+        const content = typeof text === "string" ? text : text({ data: data, index: index });
         const metrics = context.measureText(content);
         const textWidth = metrics.width;
         const textHeight = font.size;
         const offset = anchorOffsets[anchor](textWidth, textHeight);
-        const localX = (0, resolve_axis_1.resolveAxis)(initialX, data, 0);
-        const localY = (0, resolve_axis_1.resolveAxis)(initialY, data, 0);
+        const localX = (0, resolve_axis_1.resolveAxis)({
+            axis: initialX,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
+        const localY = (0, resolve_axis_1.resolveAxis)({
+            axis: initialY,
+            data: data,
+            index: index,
+            templateConfig: templateConfig,
+        });
         const x = ctx.offsetX + localX;
         const y = ctx.offsetY + localY;
         const adjustedX = x + offset.x;
@@ -60,9 +73,7 @@ class TextLayer extends layer_1.Layer {
         context.fillText(content, 0, 0);
         context.restore();
         const buffer = canvas.toBuffer();
-        ctx.image = ctx.image.composite([
-            { input: buffer, top: 0, left: 0 }
-        ]);
+        ctx.image = ctx.image.composite([{ input: buffer, top: 0, left: 0 }]);
     }
 }
 exports.TextLayer = TextLayer;

package/dist/template.d.ts

@@ -5,7 +5,7 @@ export type TemplateConfig = {
     height: number;
     fill?: Color;
 };
-export type TemplateOptions<Data> = {
+export type InputTemplateOptions<Data> = {
     imagePath?: undefined;
     config: TemplateConfig;
     layers: Layer<Data>[];
@@ -14,8 +14,13 @@ export type TemplateOptions<Data> = {
     imagePath: string;
     layers: Layer<Data>[];
 };
+export type TemplateOptions<Data> = {
+    imagePath?: string;
+    config?: TemplateConfig;
+    layers: Layer<Data>[];
+};
 export declare class Template<Data> {
     readonly options: TemplateOptions<Data>;
-    constructor(options: TemplateOptions<Data>);
+    constructor(options: InputTemplateOptions<Data>);
     render(data: Data): Promise<sharp.Sharp>;
 }

package/dist/template.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Template = void 0;
 const sharp_1 = __importDefault(require("sharp"));
 const commit_frame_1 = require("./utils/commit-frame");
+const transparentFill = {
+    r: 0,
+    g: 0,
+    b: 0,
+    alpha: 0,
+};
 class Template {
     constructor(options) {
         this.options = options;
@@ -19,27 +25,31 @@ class Template {
                     width: width,
                     height: height,
                     channels: 4,
-                    background: fill !== null && fill !== void 0 ? fill : {
-                        r: 0,
-                        g: 0,
-                        b: 0,
-                        alpha: 0
-                    }
-                }
+                    background: fill !== null && fill !== void 0 ? fill : transparentFill,
+                },
             });
         }
         else {
             image = (0, sharp_1.default)(this.options.imagePath);
+            const metadata = await image.metadata();
+            this.options.config = {
+                width: metadata.width,
+                height: metadata.height,
+            };
         }
         const ctx = {
             image: image,
             offsetX: 0,
-            offsetY: 0
+            offsetY: 0,
         };
         for (const layer of this.options.layers) {
             if (!layer.shouldRender(data))
                 continue;
-            await layer.render(ctx, data);
+            await layer.render({
+                context: ctx,
+                data: data,
+                templateConfig: this.options.config,
+            });
             ctx.image = await (0, commit_frame_1.commitFrame)(ctx.image);
         }
         return ctx.image;

package/dist/utils/commit-frame.js

@@ -13,6 +13,6 @@ async function commitFrame(image) {
             width: metadata.width,
             height: metadata.height,
             channels: metadata.channels,
-        }
+        },
     });
 }

package/dist/utils/font-config.d.ts

@@ -1,7 +1,7 @@
 import { FontOptions } from "../layers/text-layer";
 export type FontConfigOptions = {
     color?: string;
-    name?: string;
+    name: string;
     filePath?: string;
 };
 export type PartialFontOptions = {

package/dist/utils/font-config.js

@@ -5,7 +5,7 @@ function fontConfig(options) {
     return (partialOptions) => {
         return {
             ...options,
-            ...partialOptions
+            ...partialOptions,
         };
     };
 }

package/dist/utils/resolve-axis.d.ts

@@ -1,3 +1,14 @@
-export type ComputeAxis<Data> = (data: Data, index: number) => number;
+import { TemplateConfig } from "../template";
+export type ComputeAxisOptions<Data> = {
+    data: Data;
+    index: number;
+};
+export type ComputeAxis<Data> = (options: ComputeAxisOptions<Data>) => number;
 export type Axis<Data> = ComputeAxis<Data> | number;
-export declare function resolveAxis<Data>(axis: Axis<Data>, data: Data, index: number): number;
+export type ResolveAxisOptions<Data> = {
+    axis: Axis<Data>;
+    data: Data;
+    index: number;
+    templateConfig: TemplateConfig;
+};
+export declare function resolveAxis<Data>({ axis, ...params }: ResolveAxisOptions<Data>): number;

package/dist/utils/resolve-axis.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveAxis = resolveAxis;
-function resolveAxis(axis, data, index) {
+function resolveAxis({ axis, ...params }) {
     if (typeof axis === "function") {
-        return axis(data, index);
+        return axis(params);
     }
     return axis;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpict",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Xpict é uma biblioteca para a geração de imagens padronizadas a partir de modelos declarativos.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -12,7 +12,8 @@
   "scripts": {
     "playground:heroic-race": "ts-node ./playground/heroic-race.ts",
     "test": "jest",
-    "build": "tsc"
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.ts\" \"__tests__/**/*.ts\""
   },
   "keywords": [
     "xpict",
@@ -27,6 +28,10 @@
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/node": "^25.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.7.4",
+    "prettier-plugin-sort-imports": "^1.8.9",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"