xpict 0.2.1 → 0.3.1

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 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 { fontConfig } from "./utils/font-config";
+import { wrapText, fontConfig } from "./utils";
 export * from "./layers";
 export * from "./effects";
 export * from "./template";
-export * from "./utils/font-config";
+export * from "./utils";
 declare const xpict: {
     rectangle<Data>(options: RectangleLayerOptions<Data>): RectangleLayer<Data>;
     circle<Data>(options: CircleLayerOptions<Data>): CircleLayer<Data>;
@@ -15,11 +15,14 @@ declare const xpict: {
     group<Data>(options: GroupLayerOptions<Data>): GroupLayer<Data>;
     line<Data>(options: LineLayerOptions<Data>): LineLayer<Data>;
     template<Data>(options: InputTemplateOptions<Data>): Template<Data>;
-    fontConfig: typeof fontConfig;
     effects: {
         negative: typeof negativeEffect;
         blur: typeof blurEffect;
         grayscale: typeof grayscaleEffect;
     };
+    utils: {
+        fontConfig: typeof fontConfig;
+        wrapText: typeof wrapText;
+    };
 };
 export default xpict;

package/dist/index.js

@@ -17,11 +17,11 @@ 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");
+const utils_1 = require("./utils");
 __exportStar(require("./layers"), exports);
 __exportStar(require("./effects"), exports);
 __exportStar(require("./template"), exports);
-__exportStar(require("./utils/font-config"), exports);
+__exportStar(require("./utils"), exports);
 const xpict = {
     rectangle(options) {
         return new layers_1.RectangleLayer(options);
@@ -47,11 +47,14 @@ const xpict = {
     template(options) {
         return new template_1.Template(options);
     },
-    fontConfig: font_config_1.fontConfig,
     effects: {
         negative: effects_1.negativeEffect,
         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.js

@@ -41,9 +41,16 @@ 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 = typeof text === "string" ? text : text({ data: data, index: index });
-        const metrics = context.measureText(content);
-        const textWidth = metrics.width;
-        const textHeight = font.size;
+        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 offset = anchorOffsets[anchor](textWidth, textHeight);
         const localX = (0, resolve_axis_1.resolveAxis)({
             axis: initialX,
@@ -64,13 +71,16 @@ class TextLayer extends layer_1.Layer {
         context.save();
         context.translate(adjustedX, adjustedY);
         context.rotate((rotation * Math.PI) / 180);
-        if (stroke) {
-            context.strokeStyle = stroke.fill;
-            context.lineWidth = stroke.width;
-            context.lineJoin = "round";
-            context.strokeText(content, 0, 0);
-        }
-        context.fillText(content, 0, 0);
+        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);
+        });
         context.restore();
         const buffer = canvas.toBuffer();
         ctx.image = ctx.image.composite([{ input: buffer, top: 0, left: 0 }]);

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./wrap-text";
+export * from "./font-config";

package/dist/utils/index.js

@@ -0,0 +1,18 @@
+"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("./wrap-text"), exports);
+__exportStar(require("./font-config"), exports);

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

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

package/dist/utils/wrap-text.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapText = wrapText;
+function wrapText(text, maxWidth) {
+    const words = text.split(" ");
+    let line = "";
+    const lines = [];
+    for (let n = 0; n < words.length; n++) {
+        const testLine = line + words[n] + " ";
+        if (testLine.length > maxWidth && n > 0) {
+            lines.push(line);
+            line = words[n] + " ";
+        }
+        else {
+            line = testLine;
+        }
+    }
+    lines.push(line);
+    return lines.join("\n");
+}

package/package.json

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