xpict 0.3.1 → 0.3.3

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { GroupLayer, RepeatLayer, GroupLayerOptions, ImageLayer, ImageLayerOptions, LineLayer, LineLayerOptions, RectangleLayer, RectangleLayerOptions, RepeatLayerOptions, TextLayer, TextLayerOptions, CircleLayerOptions, CircleLayer } from "./layers";
 import { negativeEffect, blurEffect, grayscaleEffect } from "./effects";
 import { Template, InputTemplateOptions } from "./template";
-import { wrapText, fontConfig } from "./utils";
 export * from "./layers";
 export * from "./effects";
 export * from "./template";
@@ -20,9 +19,5 @@ declare const xpict: {
         blur: typeof blurEffect;
         grayscale: typeof grayscaleEffect;
     };
-    utils: {
-        fontConfig: typeof fontConfig;
-        wrapText: typeof wrapText;
-    };
 };
 export default xpict;

package/dist/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const layers_1 = require("./layers");
 const effects_1 = require("./effects");
 const template_1 = require("./template");
-const utils_1 = require("./utils");
 __exportStar(require("./layers"), exports);
 __exportStar(require("./effects"), exports);
 __exportStar(require("./template"), exports);
@@ -52,9 +51,5 @@ const xpict = {
         blur: effects_1.blurEffect,
         grayscale: effects_1.grayscaleEffect,
     },
-    utils: {
-        fontConfig: utils_1.fontConfig,
-        wrapText: utils_1.wrapText,
-    },
 };
 exports.default = xpict;

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

@@ -16,6 +16,8 @@ export type TextFunctionOptions<Data> = {
     index: number;
 };
 export type StringFunction<Data> = (options: TextFunctionOptions<Data>) => string;
+export type TextAlign = "left" | "center" | "right";
+export type TextBaseline = "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";
 export type TextLayerOptions<Data> = {
     text: StringFunction<Data> | string;
     font: FontOptions;
@@ -23,6 +25,8 @@ export type TextLayerOptions<Data> = {
     y: Axis<Data>;
     backgroundColor?: string;
     anchor?: TextAnchor;
+    align?: TextAlign;
+    baseline?: TextBaseline;
     stroke?: Stroke;
     rotation?: number;
     when?: WhenFunction<Data>;

package/dist/layers/text-layer.js

@@ -25,7 +25,7 @@ class TextLayer extends layer_1.Layer {
         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, align, baseline, } = this.options;
         if (!font.name) {
             throw new Error("Font name is required");
         }
@@ -38,19 +38,18 @@ class TextLayer extends layer_1.Layer {
             context.fillStyle = backgroundColor;
             context.fillRect(0, 0, width, height);
         }
+        if (align) {
+            context.textAlign = align;
+        }
+        if (baseline) {
+            context.textBaseline = baseline;
+        }
         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 = typeof text === "string" ? text : text({ data: data, index: index });
-        const lines = content.split("\n");
-        const sampleMetrics = context.measureText("M");
-        const lineHeight = sampleMetrics.actualBoundingBoxAscent + sampleMetrics.actualBoundingBoxDescent;
-        let maxWidth = 0;
-        for (const line of lines) {
-            const metrics = context.measureText(line);
-            maxWidth = Math.max(maxWidth, metrics.width);
-        }
-        const textWidth = maxWidth;
-        const textHeight = lines.length * lineHeight;
+        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)({
             axis: initialX,
@@ -71,16 +70,13 @@ class TextLayer extends layer_1.Layer {
         context.save();
         context.translate(adjustedX, adjustedY);
         context.rotate((rotation * Math.PI) / 180);
-        lines.forEach((line, i) => {
-            const y = i * lineHeight;
-            if (stroke) {
-                context.strokeStyle = stroke.fill;
-                context.lineWidth = stroke.width;
-                context.lineJoin = "round";
-                context.strokeText(line, 0, y);
-            }
-            context.fillText(line, 0, y);
-        });
+        if (stroke) {
+            context.strokeStyle = stroke.fill;
+            context.lineWidth = stroke.width;
+            context.lineJoin = "round";
+            context.strokeText(content, 0, 0);
+        }
+        context.fillText(content, 0, 0);
         context.restore();
         const buffer = canvas.toBuffer();
         ctx.image = ctx.image.composite([{ input: buffer, top: 0, left: 0 }]);

package/dist/utils/wrap-text.d.ts

@@ -1 +1 @@
-export declare function wrapText(text: string, maxWidth: number): string;
+export declare function wrapText(text: string, maxWidth: number): string[];

package/dist/utils/wrap-text.js

@@ -16,5 +16,5 @@ function wrapText(text, maxWidth) {
         }
     }
     lines.push(line);
-    return lines.join("\n");
+    return lines;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpict",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Xpict é uma biblioteca para a geração de imagens padronizadas a partir de modelos declarativos.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",