@hellkite/pipkin 0.6.1 → 0.7.0

package/src/lib/template.ts

@@ -3,15 +3,17 @@ import { parse as parseCsv } from 'papaparse';
 import { Jimp, rgbaToInt } from 'jimp';
 import camelCase from 'lodash.camelcase';
 import concat from 'lodash.concat';
-import { registerFont } from 'canvas';
 import path from 'path';
 import {
-    drawBoundingBox,
+    placeBoundingBox,
     gridPackingFn,
     hboxPackingFn,
+    htmlToImage,
     placeImage,
-    renderText,
+    placeText,
     vboxPackingFn,
+    prepareText,
+    prepareImage,
 } from './utils';
 import {
     DirectionContainerOptions,
@@ -31,9 +33,15 @@ import {
     LayerOptions,
     ContainerOptions,
     DEFAULT_CONTAINER_OPTIONS,
+    HyperNode,
+    ElementsFn,
+    ElementRef,
+    ImageLayerSpecificOptions,
 } from './types';
 import merge from 'lodash.merge';
 import { RequiredDeep } from 'type-fest';
+import { h } from 'virtual-dom';
+import flatten from 'lodash.flatten';
 
 type RequiredTemplateOptions = {
     height: number;
@@ -61,7 +69,7 @@ export type LayerFnContext = {
 export type LayerFn<EntryType> = (
     entry: EntryType,
     context: LayerFnContext,
-) => Promise<ImageType | undefined>;
+) => Promise<Array<HyperNode>>;
 
 export type TemplateLayerFn<EntryType extends Record<string, string>> = (
     template: Template<EntryType>,
@@ -102,13 +110,6 @@ export class Template<EntryType extends Record<string, string>> {
         });
     }
 
-    private shadowBackground(): ImageType {
-        return new Jimp({
-            width: this.background.width,
-            height: this.background.height,
-        });
-    }
-
     private get backgroundSize(): Size {
         return {
             width: this.background.width,
@@ -122,13 +123,24 @@ export class Template<EntryType extends Record<string, string>> {
     }
 
     template = (fn: TemplateLayerFn<EntryType>): this =>
-        this.layer(entry => {
+        this.layer(async entry => {
             const template = fn(this.shadowTemplate());
-            return template.render(entry);
+            const image = await template.render(entry);
+            return [
+                await placeImage({
+                    image,
+                    box: {
+                        left: 0,
+                        top: 0,
+                        ...this.backgroundSize,
+                    },
+                    options: DEFAULT_IMAGE_LAYER_OPTIONS,
+                }),
+            ];
         });
 
     container = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         packingFn: PackingFn,
         options?: ContainerOptions<EntryType>,
@@ -137,45 +149,39 @@ export class Template<EntryType extends Record<string, string>> {
             const mergedOptions: RequiredDeep<ContainerOptions<EntryType>> =
                 merge({}, DEFAULT_CONTAINER_OPTIONS, options);
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
-            const images = await imagesFn(entry);
-            const result = await packingFn(
-                box,
-                this.shadowBackground(),
-                images,
-            );
+            const elementRefs = await elementsFn(entry);
+            const elements = await Promise.all(elementRefs.map(elementRef => this.elementFromElementRef(entry, elementRef)))
+            const result = await packingFn(box, elements);
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     hbox = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: DirectionContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, hboxPackingFn(options), options);
+    ): this => this.container(elementsFn, box, hboxPackingFn(options), options);
 
     vbox = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: DirectionContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, vboxPackingFn(options), options);
+    ): this => this.container(elementsFn, box, vboxPackingFn(options), options);
 
     grid = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: GridContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, gridPackingFn(options), options);
+    ): this => this.container(elementsFn, box, gridPackingFn(options), options);
 
     image = (
         ref: ImageRef<EntryType>,
@@ -191,10 +197,10 @@ export class Template<EntryType extends Record<string, string>> {
                     options,
                 );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
-            const image = await this.pathFromImageRef(
+            const image = await this.imageFromImageRef(
                 entry,
                 ref,
                 mergedOptions,
@@ -202,20 +208,16 @@ export class Template<EntryType extends Record<string, string>> {
             const result = await placeImage({
                 image,
                 box,
-                backgroundSize: this.backgroundSize,
                 options: mergedOptions,
             });
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     loadImage = async (imagePath: string | Buffer): Promise<ImageType> => {
@@ -240,28 +242,23 @@ export class Template<EntryType extends Record<string, string>> {
                 options,
             );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
             const text = this.textFromTextRef(entry, ref);
-            const result = await renderText(
+            const result = await placeText({
                 text,
                 box,
-                this.backgroundSize,
-                mergedOptions,
-                this.fonts,
-            );
+                options: mergedOptions,
+            });
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     font(path: fs.PathLike, name: string): this {
@@ -275,7 +272,7 @@ export class Template<EntryType extends Record<string, string>> {
         return this;
     }
 
-    private async renderLayers(entry: EntryType): Promise<Array<ImageType>> {
+    async render(entry: EntryType): Promise<ImageType> {
         const results = await Promise.all(
             this.layers.map(layerFn =>
                 layerFn(entry, {
@@ -283,18 +280,28 @@ export class Template<EntryType extends Record<string, string>> {
                 }),
             ),
         );
-        return results.filter(result => !!result);
-    }
-
-    async render(
-        entry: EntryType,
-        options?: RenderOptions<EntryType>,
-    ): Promise<ImageType> {
-        const renderedLayers = await this.renderLayers(entry);
-        return renderedLayers.reduce(
-            (acc, layerRender) => acc.composite(layerRender),
-            this.background.clone(),
-        );
+        const document = h('html', [
+            h('head', [
+                h(
+                    'style',
+                    Object.entries(this.fonts)
+                        .map(
+                            ([name, data]) =>
+                                `@font-face {
+                                        font-family: '${name}';
+                                        src: url(data:font/ttf;base64,${data}) format('truetype');
+                                    }`,
+                        )
+                        .join('\n'),
+                ),
+            ]),
+            h(
+                'body',
+                flatten(results),
+            ),
+        ]);
+        const renderedLayers = await htmlToImage(document, this.backgroundSize);
+        return this.background.clone().composite(renderedLayers);
     }
 
     async renderAll(
@@ -305,7 +312,7 @@ export class Template<EntryType extends Record<string, string>> {
             entries.map(
                 entry =>
                     new Promise<Array<ImageType>>(resolve =>
-                        this.render(entry, options).then(image => {
+                        this.render(entry).then(image => {
                             if (!options?.duplication) {
                                 return resolve([image]);
                             }
@@ -353,10 +360,10 @@ export class Template<EntryType extends Record<string, string>> {
         });
     }
 
-    private pathFromImageRef = async (
+    private imageFromImageRef = async (
         entry: EntryType,
         ref: ImageRef<EntryType>,
-        options: RequiredDeep<ImageLayerOptions<EntryType>>,
+        options: RequiredDeep<ImageLayerSpecificOptions<EntryType>>,
     ): Promise<ImageType> => {
         const pathSegments = [];
         if (options.assetsPath) {
@@ -395,6 +402,29 @@ export class Template<EntryType extends Record<string, string>> {
         }
     };
 
+    private elementFromElementRef = async (
+        entry: EntryType,
+        ref: ElementRef<EntryType>,
+    ): Promise<HyperNode> => {
+        if ('text' in ref) {
+            const options = merge({}, DEFAULT_TEXT_LAYER_OPTIONS, ref.options);
+            return prepareText({
+                text: this.textFromTextRef(entry, ref.text),
+                options,
+            });
+        } else if ('image' in ref) {
+            const options = merge({}, DEFAULT_IMAGE_LAYER_OPTIONS, ref.options);
+            return prepareImage({
+                image: await this.imageFromImageRef(entry, ref.image, options),
+                options,
+            });
+        } else if ('node' in ref) {
+            return ref.node
+        } else {
+            throw new Error('Unknown TextRef variant');
+        }
+    };
+
     private shouldSkipLayerForEntry = (
         entry: EntryType,
         options: LayerOptions<EntryType>,

package/src/lib/types/containers.ts

@@ -1,8 +1,10 @@
 import { RequiredDeep } from 'type-fest';
 import { BoundingBox } from './boundingBox';
-import { ImageType } from './image';
+import { ImageLayerSpecificOptions, ImageRef, ImageType } from './image';
 import { ScaleMode } from './scale';
 import { LayerOptions } from './layer';
+import { HyperNode } from './hypernode';
+import { TextLayerSpecificOptions, TextRef } from './text';
 
 export type ContainerOptions<EntryType extends Record<string, string>> =
     LayerOptions<EntryType> & {
@@ -65,8 +67,24 @@ export const DEFAULT_GRID_CONTAINER_OPTIONS: RequiredDeep<
     direction: 'rows',
 };
 
+export type ElementRef<EntryType extends Record<string, string>> =
+    | {
+          image: ImageRef<EntryType>;
+          options?: ImageLayerSpecificOptions<EntryType>;
+      }
+    | {
+          text: TextRef<EntryType>;
+          options?: TextLayerSpecificOptions<EntryType>;
+      }
+    | {
+          node: HyperNode;
+      };
+
+export type ElementsFn = <EntryType extends Record<string, string>>(
+    entry: EntryType,
+) => Promise<Array<ElementRef<EntryType>>>;
+
 export type PackingFn = (
     box: BoundingBox,
-    background: ImageType,
-    images: Array<ImageType>,
-) => Promise<ImageType>;
+    elements: Array<HyperNode>,
+) => Promise<HyperNode>;

package/src/lib/types/hypernode.ts

@@ -0,0 +1,4 @@
+import { VNode } from "virtual-dom";
+
+export type HyperNode = VNode;
+

package/src/lib/types/image.ts

@@ -5,6 +5,10 @@ import { RequiredDeep } from 'type-fest';
 
 export type ImageType = JimpInstance;
 
+/**
+ * Static images -> `buffer`, `path`, `absolutePath`
+ * Dynamic images -> `key`, `pathFn`
+ */
 export type ImageRef<EntryType extends Record<string, string>> =
     | { buffer: Buffer }
     | { path: string }
@@ -36,6 +40,8 @@ export const DEFAULT_IMAGE_LAYER_OPTIONS: RequiredDeep<ImageLayerOptions<Record<
     assetsPath: ''
 };
 
+export type ImageLayerSpecificOptions<EntryType extends Record<string, string>> = Omit<ImageLayerOptions<EntryType>, keyof LayerOptions<EntryType>>;
+
 export type Alignment = 'start' | 'center' | 'end';
 
 export const DEFAULT_IMAGE_ALIGNMENT: Alignment = 'center';

package/src/lib/types/index.ts

@@ -8,3 +8,4 @@ export * from './text';
 export * from './boundingBox';
 export * from './css';
 export * from './layer';
+export * from './hypernode';

package/src/lib/types/text.ts

@@ -2,9 +2,13 @@ import type { RequiredDeep } from 'type-fest';
 import { LayerOptions } from './layer';
 import { ReplacementMap } from './replacement';
 
+/**
+ * Static text -> `text`
+ * Dynamic text -> `key`, `textFn`
+ */
 export type TextRef<EntryType> =
-    | { key: string }
     | { text: string }
+    | { key: string }
     | { textFn: (entry: EntryType) => string };
 
 export type FontOptions = {
@@ -33,19 +37,25 @@ export type TextLayerOptions<EntryType extends Record<string, string>> =
 
         color?: string;
 
+        border?: {
+            width?: number;
+            color?: string;
+        };
+
         // TODO: processor fn
         replacement?: ReplacementMap;
     };
 
-export const DEFAULT_FONT: Required<
-FontOptions
-> = {
+export const DEFAULT_FONT: Required<FontOptions> = {
     size: 28,
     family: 'Arial',
     bold: false,
     italic: false,
 };
 
+export type TextLayerSpecificOptions<EntryType extends Record<string, string>> =
+    Omit<TextLayerOptions<EntryType>, keyof LayerOptions<EntryType>>;
+
 export const DEFAULT_TEXT_LAYER_OPTIONS: RequiredDeep<
     TextLayerOptions<Record<string, string>>
 > = {
@@ -55,4 +65,8 @@ export const DEFAULT_TEXT_LAYER_OPTIONS: RequiredDeep<
     color: 'black',
     replacement: {},
     skip: false,
+    border: {
+        width: 0,
+        color: 'black',
+    },
 };

package/src/lib/utils/container.ts

@@ -2,28 +2,25 @@ import { h } from 'virtual-dom';
 import {
     DEFAULT_DIRECTION_CONTAINER_OPTIONS,
     DirectionContainerOptions,
-    ImageType,
     PackingFn,
     BoundingBox,
     SCALE_MODE_TO_OBJECT_FIT,
-    Size,
     GridContainerOptions,
     DEFAULT_GRID_CONTAINER_OPTIONS,
+    HyperNode,
 } from '../types';
 import { boundingBoxToPx, toPx } from './toPx';
 import merge from 'lodash.merge';
-import { htmlToImage } from './htmlToImage';
 import chunk from 'lodash.chunk';
 
 export const vboxPackingFn =
     <EntryType extends Record<string, string>>(
         options?: DirectionContainerOptions<EntryType>,
     ): PackingFn =>
-    (box: BoundingBox, background: ImageType, images: Array<ImageType>) =>
+    (box: BoundingBox, elements: Array<HyperNode>) =>
         directionalPackingFn({
             isVertical: true,
-            backgroundSize: background,
-            images,
+            elements,
             box,
             options,
         });
@@ -32,11 +29,10 @@ export const hboxPackingFn =
     <EntryType extends Record<string, string>>(
         options?: DirectionContainerOptions<EntryType>,
     ): PackingFn =>
-    (box: BoundingBox, background: ImageType, images: Array<ImageType>) =>
+    (box: BoundingBox, elements: Array<HyperNode>) =>
         directionalPackingFn({
             isVertical: false,
-            backgroundSize: background,
-            images,
+            elements,
             box,
             options,
         });
@@ -45,41 +41,15 @@ export const gridPackingFn =
     <EntryType extends Record<string, string>>(
         options?: GridContainerOptions<EntryType>,
     ): PackingFn =>
-    async (
-        box: BoundingBox,
-        background: ImageType,
-        images: Array<ImageType>,
-    ) => {
+    async (box: BoundingBox, elements: Array<HyperNode>) => {
         const mergedOptions = merge(
             {},
             DEFAULT_GRID_CONTAINER_OPTIONS,
             options,
         );
-        const objectFit = SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
-
-        const children = await Promise.all(
-            images.map(async image => {
-                const imageBase64 = await image.getBase64('image/png');
-                return h(
-                    'img',
-                    {
-                        style: {
-                            objectFit,
-                            flex: '1 1 auto',
-                            minWidth: 0,
-                            minHeight: 0,
-                            maxWidth: '100%',
-                            maxHeight: '100%',
-                        },
-                        src: imageBase64,
-                    },
-                    [],
-                );
-            }),
-        );
 
         const items = [];
-        for (const subset of chunk(children)) {
+        for (const subset of chunk(elements)) {
             items.push(
                 h(
                     'div',
@@ -98,7 +68,7 @@ export const gridPackingFn =
                 ),
             );
         }
-        const document = h(
+        return h(
             'div',
             {
                 style: {
@@ -112,51 +82,26 @@ export const gridPackingFn =
             },
             items,
         );
-
-        return htmlToImage(document, background);
     };
 
 const directionalPackingFn = async <EntryType extends Record<string, string>>({
     isVertical,
-    backgroundSize: background,
-    images,
+    elements,
     box,
     options,
 }: {
     isVertical: boolean;
-    backgroundSize: Size;
-    images: Array<ImageType>;
+    elements: Array<HyperNode>;
     box: BoundingBox;
     options?: DirectionContainerOptions<EntryType>;
-}): Promise<ImageType> => {
+}): Promise<HyperNode> => {
     const mergedOptions = merge(
         {},
         DEFAULT_DIRECTION_CONTAINER_OPTIONS,
         options,
     );
-    const objectFit = SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
 
-    const children = await Promise.all(
-        images.map(async image => {
-            const imageBase64 = await image.getBase64('image/png');
-            return h(
-                'img',
-                {
-                    style: {
-                        objectFit,
-                        flex: '1 1 auto',
-                        minWidth: 0,
-                        minHeight: 0,
-                        maxWidth: '100%',
-                        maxHeight: '100%',
-                    },
-                    src: imageBase64,
-                },
-                [],
-            );
-        }),
-    );
-    const document = h(
+    return h(
         'div',
         {
             style: {
@@ -172,8 +117,6 @@ const directionalPackingFn = async <EntryType extends Record<string, string>>({
                 ...boundingBoxToPx(box),
             },
         },
-        children,
+        elements,
     );
-
-    return htmlToImage(document, background);
 };

package/src/lib/utils/htmlToImage.ts

@@ -1,10 +1,10 @@
-import { create as createElement, VNode } from 'virtual-dom';
+import { create as createElement } from 'virtual-dom';
 import nodeHtmlToImage from 'node-html-to-image';
 import { Jimp } from 'jimp';
-import { ImageType, Size } from '../types';
+import { HyperNode, ImageType, Size } from '../types';
 
 export const htmlToImage = async (
-    document: VNode,
+    document: HyperNode,
     backgroundSize: Size,
 ): Promise<ImageType> => {
     const html = createElement(document).toString();

package/src/lib/utils/index.ts

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

package/src/lib/utils/{drawBoundingBox.ts → placeBoundingBox.ts}

@@ -1,13 +1,9 @@
 import { h } from 'virtual-dom';
-import { htmlToImage } from './htmlToImage';
 import { boundingBoxToPx } from './toPx';
-import { ImageType, Size, BoundingBox } from '../types';
+import { BoundingBox, HyperNode } from '../types';
 
-export const drawBoundingBox = async (
-    box: BoundingBox,
-    imageSize: Size,
-): Promise<ImageType> => {
-    const document = h(
+export const placeBoundingBox = async (box: BoundingBox): Promise<HyperNode> => {
+    return h(
         'div',
         {
             style: {
@@ -20,6 +16,4 @@ export const drawBoundingBox = async (
         },
         [],
     );
-
-    return htmlToImage(document, imageSize);
 };