@hellkite/pipkin 0.5.0 → 0.5.2

package/build/src/lib/types/layer.d.ts

@@ -0,0 +1,15 @@
+import { JustifyContent, AlignItems } from "./css";
+export type LayerOptions<EntryType extends Record<string, string>> = {
+    /**
+     * default `center`
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * default `center`
+     */
+    alignItems?: AlignItems;
+    /**
+     * Decides if a layer should be rendered or not for a certain entry
+     */
+    skip?: boolean | ((entry: EntryType) => boolean);
+};

package/build/src/lib/types/layer.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=layer.js.map

package/build/src/lib/types/layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer.js","sourceRoot":"","sources":["../../../../src/lib/types/layer.ts"],"names":[],"mappings":""}

package/build/src/lib/types/position.d.ts

@@ -0,0 +1,21 @@
+import { BoundingBox, Size } from './2d';
+export type Position = ({
+    top: number;
+    height: number;
+} | {
+    bottom: number;
+    height: number;
+} | {
+    top: number;
+    bottom: number;
+}) & ({
+    left: number;
+    width: number;
+} | {
+    right: number;
+    width: number;
+} | {
+    left: number;
+    right: number;
+});
+export declare const toBoundingBox: (position: Position, backgroundSize: Size) => BoundingBox;

package/build/src/lib/types/position.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toBoundingBox = void 0;
+const toBoundingBox = (position, backgroundSize) => {
+    const box = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    };
+    if ('height' in position) {
+        if ('top' in position) {
+            box.y = position.top;
+            box.height = position.height;
+        }
+        else {
+            box.y = backgroundSize.height - position.bottom - position.height;
+            box.height = position.height;
+        }
+    }
+    else {
+        box.y = position.top;
+        box.height = position.bottom - position.top;
+    }
+    if ('width' in position) {
+        if ('left' in position) {
+            box.x = position.left;
+            box.width = position.width;
+        }
+        else {
+            box.x = backgroundSize.width - position.right - position.width;
+            box.width = position.width;
+        }
+    }
+    else {
+        box.x = position.left;
+        box.width = position.right - position.left;
+    }
+    return box;
+};
+exports.toBoundingBox = toBoundingBox;
+//# sourceMappingURL=position.js.map

package/build/src/lib/types/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../src/lib/types/position.ts"],"names":[],"mappings":";;;AA+BO,MAAM,aAAa,GAAG,CACzB,QAAkB,EAClB,cAAoB,EACT,EAAE;IACb,MAAM,GAAG,GAAgB;QACrB,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACZ,CAAC;IACF,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAAC;QACvB,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YACpB,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC;YACrB,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;QACjC,CAAC;aAAM,CAAC;YACJ,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;YAClE,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;QACjC,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC;QACrB,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;IAChD,CAAC;IAED,IAAI,OAAO,IAAI,QAAQ,EAAE,CAAC;QACtB,IAAI,MAAM,IAAI,QAAQ,EAAE,CAAC;YACrB,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;YACtB,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;QAC/B,CAAC;aAAM,CAAC;YACJ,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC/D,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;QAC/B,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;QACtB,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC/C,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AArCW,QAAA,aAAa,iBAqCxB"}

package/build/src/lib/types/scale.d.ts

@@ -1 +1,9 @@
-export {};
+/**
+ * Behavior of the content around a space
+ * that is bigger or smaller than necessary
+ * -> `none`: no scaling
+ * -> `keep-ration`: scale while preserving aspect ration
+ * -> `stretch`: scale without preserving aspect ration
+ */
+export type ScaleMode = 'none' | 'keep-ratio' | 'stretch';
+export declare const DEFAULT_SCALE_MODE: ScaleMode;

package/build/src/lib/types/scale.js

@@ -1,3 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SCALE_MODE = void 0;
+exports.DEFAULT_SCALE_MODE = 'none';
 //# sourceMappingURL=scale.js.map

package/build/src/lib/types/scale.js.map

@@ -1 +1 @@
-{"version":3,"file":"scale.js","sourceRoot":"","sources":["../../../../src/lib/types/scale.ts"],"names":[],"mappings":""}
+{"version":3,"file":"scale.js","sourceRoot":"","sources":["../../../../src/lib/types/scale.ts"],"names":[],"mappings":";;;AAUa,QAAA,kBAAkB,GAAc,MAAM,CAAC"}

package/build/src/lib/types/size.d.ts

@@ -0,0 +1,4 @@
+export type Size = {
+    width: number;
+    height: number;
+};

package/build/src/lib/types/size.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=size.js.map

package/build/src/lib/types/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../src/lib/types/size.ts"],"names":[],"mappings":""}

package/build/src/lib/types/text.d.ts

@@ -1,40 +1,36 @@
-import { BoundingBox } from './2d';
+import type { RequiredDeep } from 'type-fest';
+import { LayerOptions } from './layer';
 import { ReplacementMap } from './replacement';
-export type TextLayerProps<EntryType> = {
-    key: keyof EntryType;
-    position: TextPosition;
-    options?: TextLayerOptions;
+export type TextRef<EntryType> = {
+    key: string;
+} | {
+    text: string;
+} | {
+    textFn: (entry: EntryType) => string;
 };
-export type TextLayerOptions = {
-    font?: {
-        /**
-         * Size of font is represented in pixels
-         */
-        size?: number;
-        /**
-         * Either use one supported by canvas
-         * or load a custom one before rendering
-         */
-        family?: string;
-        /**
-         * Warning: Not supported by all fonts
-         */
-        bold?: boolean;
-        /**
-         * Warning: Not supported by all fonts
-         */
-        italic?: boolean;
-    };
-    color?: string;
-    replacement?: ReplacementMap;
+export type FontOptions = {
     /**
-     * default `center`
+     * Size of font is represented in pixels
      */
-    xAlign?: 'left' | 'center' | 'right' | 'justify' | 'justify-left' | 'justify-center' | 'justify-right';
+    size?: number;
     /**
-     * default `center`
+     * Either use one supported by canvas
+     * or load a custom one before rendering
      */
-    yAlign?: 'left' | 'center' | 'right' | 'justify' | 'justify-left' | 'justify-center' | 'justify-right';
+    family?: string;
+    /**
+     * Warning: Not supported by all fonts
+     */
+    bold?: boolean;
+    /**
+     * Warning: Not supported by all fonts
+     */
+    italic?: boolean;
+};
+export type TextLayerOptions<EntryType extends Record<string, string>> = LayerOptions<EntryType> & {
+    font?: FontOptions;
+    color?: string;
+    replacement?: ReplacementMap;
 };
-export type TextPosition = BoundingBox;
-export declare const DEFAULT_TEXT_LAYER_OPTIONS: TextLayerOptions;
+export declare const DEFAULT_FONT: Required<FontOptions>;
+export declare const DEFAULT_TEXT_LAYER_OPTIONS: RequiredDeep<TextLayerOptions<Record<string, string>>>;

package/build/src/lib/types/text.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_TEXT_LAYER_OPTIONS = void 0;
-// TODO: all required
+exports.DEFAULT_TEXT_LAYER_OPTIONS = exports.DEFAULT_FONT = void 0;
+exports.DEFAULT_FONT = {
+    size: 28,
+    family: 'Arial',
+    bold: false,
+    italic: false,
+};
 exports.DEFAULT_TEXT_LAYER_OPTIONS = {
-    xAlign: 'center',
-    yAlign: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    font: exports.DEFAULT_FONT,
+    color: 'black',
+    replacement: {},
+    skip: false,
 };
 //# sourceMappingURL=text.js.map

package/build/src/lib/types/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/lib/types/text.ts"],"names":[],"mappings":";;;AA8DA,qBAAqB;AACR,QAAA,0BAA0B,GAAqB;IACxD,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;CACnB,CAAC"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/lib/types/text.ts"],"names":[],"mappings":";;;AAuCa,QAAA,YAAY,GAErB;IACA,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,OAAO;IACf,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,KAAK;CAChB,CAAC;AAEW,QAAA,0BAA0B,GAEnC;IACA,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,IAAI,EAAE,oBAAY;IAClB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,EAAE;IACf,IAAI,EAAE,KAAK;CACd,CAAC"}

package/build/src/lib/utils/buildFontString.d.ts

@@ -1,2 +1,2 @@
-import { TextLayerOptions } from "../types/text";
-export declare const buildFontString: (font: TextLayerOptions["font"], defaultFontFamily?: string) => string;
+import { FontOptions } from "../types";
+export declare const buildFontString: (font: FontOptions, defaultFontFamily?: string) => string;

package/build/src/lib/utils/buildFontString.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildFontString.js","sourceRoot":"","sources":["../../../../src/lib/utils/buildFontString.ts"],"names":[],"mappings":";;;AAEO,MAAM,eAAe,GAAG,CAC3B,IAA8B,EAC9B,iBAA0B,EACpB,EAAE;;IACR,MAAM,SAAS,GAAa,EAAE,CAAC;IAC/B,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,EAAE,CAAC;QACb,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC;IACD,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,EAAE,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC;IACD,SAAS,CAAC,IAAI,CAAC,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,EAAE,IAAI,CAAC,CAAC;IACxC,SAAS,CAAC,IAAI,CAAC,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,iBAAiB,mCAAI,OAAO,GAAG,CAAC,CAAC;IACpE,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B"}
+{"version":3,"file":"buildFontString.js","sourceRoot":"","sources":["../../../../src/lib/utils/buildFontString.ts"],"names":[],"mappings":";;;AAEO,MAAM,eAAe,GAAG,CAC3B,IAAiB,EACjB,iBAA0B,EACpB,EAAE;;IACR,MAAM,SAAS,GAAa,EAAE,CAAC;IAC/B,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,EAAE,CAAC;QACb,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC;IACD,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,EAAE,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC;IACD,SAAS,CAAC,IAAI,CAAC,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,EAAE,IAAI,CAAC,CAAC;IACxC,SAAS,CAAC,IAAI,CAAC,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,iBAAiB,mCAAI,OAAO,GAAG,CAAC,CAAC;IACpE,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B"}

package/build/src/lib/utils/canvasToImage.d.ts

@@ -1,3 +1,3 @@
-import { ImageType } from '../types/image';
 import * as fabric from 'fabric/node';
+import { ImageType } from '../types';
 export declare const canvasToImage: (canvas: fabric.Canvas) => Promise<ImageType>;

package/build/src/lib/utils/container.d.ts

@@ -1,4 +1,4 @@
-import { BoundingBox } from '../types/2d';
-import { DirectionContainerOptions, PackingFn } from '../types/containers';
-export declare const vboxPackingFn: (position: BoundingBox, options?: DirectionContainerOptions) => PackingFn;
-export declare const hboxPackingFn: (position: BoundingBox, options?: DirectionContainerOptions) => PackingFn;
+import { DirectionContainerOptions, PackingFn, GridContainerOptions } from '../types';
+export declare const vboxPackingFn: <EntryType extends Record<string, string>>(options?: DirectionContainerOptions<EntryType>) => PackingFn;
+export declare const hboxPackingFn: <EntryType extends Record<string, string>>(options?: DirectionContainerOptions<EntryType>) => PackingFn;
+export declare const gridPackingFn: <EntryType extends Record<string, string>>(options?: GridContainerOptions<EntryType>) => PackingFn;

package/build/src/lib/utils/container.js

@@ -12,31 +12,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hboxPackingFn = exports.vboxPackingFn = void 0;
-const containers_1 = require("../types/containers");
+exports.gridPackingFn = exports.hboxPackingFn = exports.vboxPackingFn = void 0;
 const virtual_dom_1 = require("virtual-dom");
-const node_html_to_image_1 = __importDefault(require("node-html-to-image"));
-const jimp_1 = require("jimp");
 const types_1 = require("../types");
-const vboxPackingFn = (position, options) => (background, images) => directionalPackingFn({
+const toPx_1 = require("./toPx");
+const lodash_merge_1 = __importDefault(require("lodash.merge"));
+const htmlToImage_1 = require("./htmlToImage");
+const lodash_chunk_1 = __importDefault(require("lodash.chunk"));
+const vboxPackingFn = (options) => (box, background, images) => directionalPackingFn({
     isVertical: true,
-    background,
+    backgroundSize: background,
     images,
-    position,
+    box,
     options,
 });
 exports.vboxPackingFn = vboxPackingFn;
-const hboxPackingFn = (position, options) => (background, images) => directionalPackingFn({
+const hboxPackingFn = (options) => (box, background, images) => directionalPackingFn({
     isVertical: false,
-    background,
+    backgroundSize: background,
     images,
-    position,
+    box,
     options,
 });
 exports.hboxPackingFn = hboxPackingFn;
-const directionalPackingFn = (_a) => __awaiter(void 0, [_a], void 0, function* ({ isVertical, background, images, position, options, }) {
-    var _b, _c, _d, _e;
-    const objectFit = SCALE_MODE_TO_OBJECT_FIT[(_b = options === null || options === void 0 ? void 0 : options.scale) !== null && _b !== void 0 ? _b : 'none'];
+const gridPackingFn = (options) => (box, background, images) => __awaiter(void 0, void 0, void 0, function* () {
+    const mergedOptions = (0, lodash_merge_1.default)({}, types_1.DEFAULT_GRID_CONTAINER_OPTIONS, options);
+    const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
     const children = yield Promise.all(images.map((image) => __awaiter(void 0, void 0, void 0, function* () {
         const imageBase64 = yield image.getBase64('image/png');
         return (0, virtual_dom_1.h)('img', {
@@ -51,40 +52,45 @@ const directionalPackingFn = (_a) => __awaiter(void 0, [_a], void 0, function* (
             src: imageBase64,
         }, []);
     })));
+    const items = [];
+    for (const subset of (0, lodash_chunk_1.default)(children)) {
+        items.push((0, virtual_dom_1.h)('div', {
+            style: {
+                display: 'flex',
+                flexDirection: 'row',
+                overflow: 'hidden',
+                gap: (0, toPx_1.toPx)(mergedOptions.gap),
+                justifyContent: mergedOptions.justifyContent,
+                alignItems: mergedOptions.alignItems,
+            },
+        }, subset));
+    }
     const document = (0, virtual_dom_1.h)('div', {
-        style: {
-            display: 'flex',
-            position: 'absolute',
-            scale: 1,
-            flexDirection: `${isVertical ? 'column' : 'row'}${(options === null || options === void 0 ? void 0 : options.reversed) ? '-reversed' : ''}`,
-            gap: (0, types_1.toPx)((_c = options === null || options === void 0 ? void 0 : options.gap) !== null && _c !== void 0 ? _c : 0),
-            // TODO: merge options and defaults
-            justifyContent: (_d = options === null || options === void 0 ? void 0 : options.justifyContent) !== null && _d !== void 0 ? _d : containers_1.DEFAULT_DIRECTION_CONTAINER_OPTIONS.justifyContent,
-            alignItems: (_e = options === null || options === void 0 ? void 0 : options.alignItems) !== null && _e !== void 0 ? _e : containers_1.DEFAULT_DIRECTION_CONTAINER_OPTIONS.alignItems,
-            top: (0, types_1.toPx)(position.y),
-            left: (0, types_1.toPx)(position.x),
-            height: (0, types_1.toPx)(position.height),
-            width: (0, types_1.toPx)(position.width),
-        },
-    }, children);
-    const rootNode = (0, virtual_dom_1.create)(document);
-    // TODO: extract this in a dif function
-    const image = yield (0, node_html_to_image_1.default)({
-        html: rootNode.toString(),
-        transparent: true,
-        type: 'png',
-        puppeteerArgs: {
-            defaultViewport: {
-                width: background.width,
-                height: background.height,
+        style: Object.assign({ display: 'grid', gridTemplateColumns: `repeat(${mergedOptions.size}, 1fr)`, position: 'absolute', gap: (0, toPx_1.toPx)(mergedOptions.gap) }, (0, toPx_1.boundingBoxToPx)(box)),
+    }, items);
+    return (0, htmlToImage_1.htmlToImage)(document, background);
+});
+exports.gridPackingFn = gridPackingFn;
+const directionalPackingFn = (_a) => __awaiter(void 0, [_a], void 0, function* ({ isVertical, backgroundSize: background, images, box, options, }) {
+    const mergedOptions = (0, lodash_merge_1.default)({}, types_1.DEFAULT_DIRECTION_CONTAINER_OPTIONS, options);
+    const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
+    const children = yield Promise.all(images.map((image) => __awaiter(void 0, void 0, void 0, function* () {
+        const imageBase64 = yield image.getBase64('image/png');
+        return (0, virtual_dom_1.h)('img', {
+            style: {
+                objectFit,
+                flex: '1 1 auto',
+                minWidth: 0,
+                minHeight: 0,
+                maxWidth: '100%',
+                maxHeight: '100%',
             },
-        },
-    });
-    return jimp_1.Jimp.read(image);
+            src: imageBase64,
+        }, []);
+    })));
+    const document = (0, virtual_dom_1.h)('div', {
+        style: Object.assign({ display: 'flex', position: 'absolute', scale: 1, flexDirection: `${isVertical ? 'column' : 'row'}${mergedOptions.reversed ? '-reversed' : ''}`, gap: (0, toPx_1.toPx)(mergedOptions.gap), justifyContent: mergedOptions.justifyContent, alignItems: mergedOptions.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
+    }, children);
+    return (0, htmlToImage_1.htmlToImage)(document, background);
 });
-const SCALE_MODE_TO_OBJECT_FIT = {
-    'keep-ratio': 'contain',
-    stretch: 'fill',
-    none: 'none',
-};
 //# sourceMappingURL=container.js.map

package/build/src/lib/utils/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/lib/utils/container.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/lib/utils/container.ts"],"names":[],"mappings":"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"}

package/build/src/lib/utils/drawBoundingBox.d.ts

@@ -1,3 +1,2 @@
-import { BoundingBox, Size } from '../types/2d';
-import { ImageType } from '../types/image';
+import { ImageType, Size, BoundingBox } from '../types';
 export declare const drawBoundingBox: (box: BoundingBox, imageSize: Size) => Promise<ImageType>;

package/build/src/lib/utils/drawBoundingBox.js

@@ -1,37 +1,4 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -43,21 +10,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawBoundingBox = void 0;
-const canvasToImage_1 = require("./canvasToImage");
-const fabric = __importStar(require("fabric/node"));
+const virtual_dom_1 = require("virtual-dom");
+const htmlToImage_1 = require("./htmlToImage");
+const toPx_1 = require("./toPx");
 const drawBoundingBox = (box, imageSize) => __awaiter(void 0, void 0, void 0, function* () {
-    const fabricCanvas = new fabric.Canvas(undefined, imageSize);
-    const boundingBox = new fabric.Rect({
-        left: box.x,
-        top: box.y,
-        width: box.width,
-        height: box.height,
-        stroke: 'red',
-        strokeWidth: 2,
-        fill: 'transparent',
-    });
-    fabricCanvas.add(boundingBox);
-    return (0, canvasToImage_1.canvasToImage)(fabricCanvas);
+    const document = (0, virtual_dom_1.h)('div', {
+        style: Object.assign({ position: 'absolute', border: '2px solid red', background: 'transparent', boxSizing: 'border-box' }, (0, toPx_1.boundingBoxToPx)(box)),
+    }, []);
+    return (0, htmlToImage_1.htmlToImage)(document, imageSize);
 });
 exports.drawBoundingBox = drawBoundingBox;
 //# sourceMappingURL=drawBoundingBox.js.map

package/build/src/lib/utils/drawBoundingBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawBoundingBox.js","sourceRoot":"","sources":["../../../../src/lib/utils/drawBoundingBox.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAgD;AAEhD,oDAAsC;AAG/B,MAAM,eAAe,GAAG,CAC3B,GAAgB,EAChB,SAAe,EACG,EAAE;IACpB,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;QAChC,IAAI,EAAE,GAAG,CAAC,CAAC;QACX,GAAG,EAAE,GAAG,CAAC,CAAC;QACV,KAAK,EAAE,GAAG,CAAC,KAAK;QAChB,MAAM,EAAE,GAAG,CAAC,MAAM;QAClB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,aAAa;KACtB,CAAC,CAAC;IACH,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC9B,OAAO,IAAA,6BAAa,EAAC,YAAY,CAAC,CAAC;AACvC,CAAC,CAAA,CAAC;AAhBW,QAAA,eAAe,mBAgB1B"}
+{"version":3,"file":"drawBoundingBox.js","sourceRoot":"","sources":["../../../../src/lib/utils/drawBoundingBox.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAAgC;AAChC,+CAA4C;AAC5C,iCAAyC;AAGlC,MAAM,eAAe,GAAG,CAC3B,GAAgB,EAChB,SAAe,EACG,EAAE;IACpB,MAAM,QAAQ,GAAG,IAAA,eAAC,EACd,KAAK,EACL;QACI,KAAK,kBACD,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAE,YAAY,IACpB,IAAA,sBAAe,EAAC,GAAG,CAAC,CAC1B;KACJ,EACD,EAAE,CACL,CAAC;IAEF,OAAO,IAAA,yBAAW,EAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC5C,CAAC,CAAA,CAAC;AAnBW,QAAA,eAAe,mBAmB1B"}

package/build/src/lib/utils/htmlToImage.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'virtual-dom';
+import { ImageType, Size } from '../types';
+export declare const htmlToImage: (document: VNode, backgroundSize: Size) => Promise<ImageType>;

package/build/src/lib/utils/htmlToImage.js

@@ -0,0 +1,36 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlToImage = void 0;
+const virtual_dom_1 = require("virtual-dom");
+const node_html_to_image_1 = __importDefault(require("node-html-to-image"));
+const jimp_1 = require("jimp");
+const htmlToImage = (document, backgroundSize) => __awaiter(void 0, void 0, void 0, function* () {
+    const html = (0, virtual_dom_1.create)(document).toString();
+    const image = yield (0, node_html_to_image_1.default)({
+        html,
+        transparent: true,
+        type: 'png',
+        puppeteerArgs: {
+            defaultViewport: {
+                width: backgroundSize.width,
+                height: backgroundSize.height,
+                deviceScaleFactor: 1,
+            },
+        },
+    });
+    return jimp_1.Jimp.read(image);
+});
+exports.htmlToImage = htmlToImage;
+//# sourceMappingURL=htmlToImage.js.map

package/build/src/lib/utils/htmlToImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlToImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/htmlToImage.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,4EAAiD;AACjD,+BAA4B;AAGrB,MAAM,WAAW,GAAG,CACvB,QAAe,EACf,cAAoB,EACF,EAAE;IACpB,MAAM,IAAI,GAAG,IAAA,oBAAa,EAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;IAChD,MAAM,KAAK,GAAG,MAAM,IAAA,4BAAe,EAAC;QAChC,IAAI;QACJ,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,KAAK;QACX,aAAa,EAAE;YACX,eAAe,EAAE;gBACb,KAAK,EAAE,cAAc,CAAC,KAAK;gBAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;gBAC7B,iBAAiB,EAAE,CAAC;aACvB;SACJ;KACJ,CAAC,CAAC;IACH,OAAO,WAAI,CAAC,IAAI,CAAC,KAAe,CAAuB,CAAC;AAC5D,CAAC,CAAA,CAAC;AAlBW,QAAA,WAAW,eAkBtB"}

package/build/src/lib/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './buildFontString';
-export * from './canvasToImage';
 export * from './container';
 export * from './drawBoundingBox';
 export * from './placeImage';
 export * from './renderText';
+export * from './htmlToImage';
+export * from './toPx';

package/build/src/lib/utils/index.js

@@ -15,9 +15,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./buildFontString"), exports);
-__exportStar(require("./canvasToImage"), exports);
 __exportStar(require("./container"), exports);
 __exportStar(require("./drawBoundingBox"), exports);
 __exportStar(require("./placeImage"), exports);
 __exportStar(require("./renderText"), exports);
+__exportStar(require("./htmlToImage"), exports);
+__exportStar(require("./toPx"), exports);
 //# sourceMappingURL=index.js.map

package/build/src/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,kDAAgC;AAChC,8CAA4B;AAC5B,oDAAkC;AAClC,+CAA6B;AAC7B,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,8CAA4B;AAC5B,oDAAkC;AAClC,+CAA6B;AAC7B,+CAA6B;AAC7B,gDAA8B;AAC9B,yCAAuB"}

package/build/src/lib/utils/placeImage.d.ts

@@ -1,8 +1,13 @@
-import { ImageType, ImagePosition } from '../types/image';
-type PlaceImageProps = {
-    background: ImageType;
+import { ImageLayerOptions, ImageType, BoundingBox } from '../types';
+import { RequiredDeep } from 'type-fest';
+type PlaceImageProps<EntryType extends Record<string, string>> = {
     image: ImageType;
-    position: ImagePosition;
+    box: BoundingBox;
+    backgroundSize: {
+        width: number;
+        height: number;
+    };
+    options: RequiredDeep<ImageLayerOptions<EntryType>>;
 };
-export declare function placeImage({ background, image, position }: PlaceImageProps): Promise<ImageType>;
+export declare const placeImage: <EntryType extends Record<string, string>>({ image, box, backgroundSize, options, }: PlaceImageProps<EntryType>) => Promise<ImageType>;
 export {};