xpict 0.3.1 → 0.3.2

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/package.json

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