@hellkite/pipkin 0.7.0 → 0.8.2

package/src/lib/template.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import { parse as parseCsv } from 'papaparse';
-import { Jimp, rgbaToInt } from 'jimp';
+import { Jimp } from 'jimp';
 import camelCase from 'lodash.camelcase';
 import concat from 'lodash.concat';
 import path from 'path';
@@ -9,11 +9,9 @@ import {
     gridPackingFn,
     hboxPackingFn,
     htmlToImage,
-    placeImage,
-    placeText,
     vboxPackingFn,
-    prepareText,
-    prepareImage,
+    boundingBoxToPx,
+    toPx,
 } from './utils';
 import {
     DirectionContainerOptions,
@@ -37,52 +35,41 @@ import {
     ElementsFn,
     ElementRef,
     ImageLayerSpecificOptions,
+    TextLayerSpecificOptions,
+    SCALE_MODE_TO_OBJECT_FIT,
+    StaticImageRef,
+    TemplateOptions,
+    DEFAULT_TEMPLATE_OPTIONS,
+    LayerFn,
+    ReplacementMap,
 } 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;
-    width: number;
-    color: number;
-};
-
-type OptionalTemplateOptions = Partial<{
-    defaultFontFamily: string;
-    defaultAssetsPath: string;
-}>;
-
-export type TemplateOptions = RequiredTemplateOptions & OptionalTemplateOptions;
-
-const DEFAULT_TEMPLATE_OPTIONS: RequiredTemplateOptions = {
-    height: 1050,
-    width: 750,
-    color: rgbaToInt(255, 255, 255, 255),
-};
-
-export type LayerFnContext = {
-    debugMode: boolean;
-};
-
-export type LayerFn<EntryType> = (
-    entry: EntryType,
-    context: LayerFnContext,
-) => Promise<Array<HyperNode>>;
+import { Bundler } from './bundler';
 
 export type TemplateLayerFn<EntryType extends Record<string, string>> = (
     template: Template<EntryType>,
 ) => Template<EntryType>;
 
 export class Template<EntryType extends Record<string, string>> {
-    private readonly fonts: Record<string, string> = {};
-    private readonly layers: LayerFn<EntryType>[] = [];
+    /**
+     * Template data
+     */
     private readonly background: ImageType;
-    private debugMode: boolean = false;
+    private readonly layers: LayerFn<EntryType>[] = [];
+    private readonly fonts: Record<string, string> = {};
+    private renderBoundingBox?: boolean;
     private defaultFontFamily?: string;
     private defaultAssetsPath?: string;
 
+    /**
+     * Render data
+     */
+    private readonly debugPoints: Array<DebugPoint> = [];
+    private bundler?: Bundler;
+
     // disallow constructor initialization
     private constructor(options: TemplateOptions) {
         this.background = new Jimp({
@@ -127,7 +114,7 @@ export class Template<EntryType extends Record<string, string>> {
             const template = fn(this.shadowTemplate());
             const image = await template.render(entry);
             return [
-                await placeImage({
+                await this.placeImage({
                     image,
                     box: {
                         left: 0,
@@ -145,19 +132,28 @@ export class Template<EntryType extends Record<string, string>> {
         packingFn: PackingFn,
         options?: ContainerOptions<EntryType>,
     ): this =>
-        this.layer(async (entry: EntryType, { debugMode }) => {
+        this.layer(async (entry: EntryType) => {
             const mergedOptions: RequiredDeep<ContainerOptions<EntryType>> =
-                merge({}, DEFAULT_CONTAINER_OPTIONS, options);
+                merge(
+                    {},
+                    DEFAULT_CONTAINER_OPTIONS,
+                    { renderBoundingBox: this.renderBoundingBox },
+                    options,
+                );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
                 return [];
             }
 
             const elementRefs = await elementsFn(entry);
-            const elements = await Promise.all(elementRefs.map(elementRef => this.elementFromElementRef(entry, elementRef)))
+            const elements = await Promise.all(
+                elementRefs.map(elementRef =>
+                    this.elementFromElementRef(entry, elementRef),
+                ),
+            );
             const result = await packingFn(box, elements);
 
             // debug mode
-            if (debugMode) {
+            if (mergedOptions.renderBoundingBox) {
                 const debugImage = await placeBoundingBox(box);
                 return [result, debugImage];
             }
@@ -188,12 +184,15 @@ export class Template<EntryType extends Record<string, string>> {
         box: BoundingBox,
         options: ImageLayerOptions<EntryType>,
     ): this =>
-        this.layer(async (entry, { debugMode }) => {
+        this.layer(async entry => {
             const mergedOptions: RequiredDeep<ImageLayerOptions<EntryType>> =
                 merge(
                     {},
                     DEFAULT_IMAGE_LAYER_OPTIONS,
-                    { assetsPath: this.defaultAssetsPath },
+                    {
+                        assetsPath: this.defaultAssetsPath,
+                        renderBoundingBox: this.renderBoundingBox,
+                    },
                     options,
                 );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
@@ -203,16 +202,16 @@ export class Template<EntryType extends Record<string, string>> {
             const image = await this.imageFromImageRef(
                 entry,
                 ref,
-                mergedOptions,
+                mergedOptions.assetsPath,
             );
-            const result = await placeImage({
+            const result = await this.placeImage({
                 image,
                 box,
                 options: mergedOptions,
             });
 
             // debug mode
-            if (debugMode) {
+            if (mergedOptions.renderBoundingBox) {
                 const debugImage = await placeBoundingBox(box);
                 return [result, debugImage];
             }
@@ -230,7 +229,7 @@ export class Template<EntryType extends Record<string, string>> {
         box: BoundingBox,
         options?: TextLayerOptions<EntryType>,
     ): this =>
-        this.layer(async (entry, { debugMode }) => {
+        this.layer(async entry => {
             const mergedOptions = merge(
                 {},
                 DEFAULT_TEXT_LAYER_OPTIONS,
@@ -238,6 +237,7 @@ export class Template<EntryType extends Record<string, string>> {
                     font: {
                         family: this.defaultFontFamily,
                     },
+                    renderBoundingBox: this.renderBoundingBox,
                 } as FontOptions,
                 options,
             );
@@ -246,14 +246,14 @@ export class Template<EntryType extends Record<string, string>> {
             }
 
             const text = this.textFromTextRef(entry, ref);
-            const result = await placeText({
+            const result = await this.placeText({
                 text,
                 box,
                 options: mergedOptions,
             });
 
             // debug mode
-            if (debugMode) {
+            if (mergedOptions.renderBoundingBox) {
                 const debugImage = await placeBoundingBox(box);
                 return [result, debugImage];
             }
@@ -267,41 +267,77 @@ export class Template<EntryType extends Record<string, string>> {
         return this;
     }
 
-    debug(): this {
-        this.debugMode = true;
+    debug = (): this => {
+        this.debugPoints.push({
+            index: this.layers.length,
+        });
         return this;
-    }
+    };
 
     async render(entry: EntryType): Promise<ImageType> {
         const results = await Promise.all(
             this.layers.map(layerFn =>
                 layerFn(entry, {
-                    debugMode: this.debugMode,
+                    renderBoundingBox: this.renderBoundingBox,
                 }),
             ),
         );
-        const document = h('html', [
-            h('head', [
-                h(
-                    'style',
-                    Object.entries(this.fonts)
-                        .map(
-                            ([name, data]) =>
-                                `@font-face {
+        const buildDocument = (children: Array<HyperNode>) =>
+            h('html', [
+                h('head', [
+                    h(
+                        'style',
+                        // load fonts
+                        Object.entries(this.fonts)
+                            .map(
+                                ([name, data]) =>
+                                    `@font-face {
                                         font-family: '${name}';
                                         src: url(data:font/ttf;base64,${data}) format('truetype');
                                     }`,
-                        )
-                        .join('\n'),
+                            )
+                            .join('\n'),
+                    ),
+                ]),
+                // fix chromium headless padding issue
+                h(
+                    'body',
+                    {
+                        style: {
+                            margin: 0,
+                        },
+                    },
+                    [
+                        h(
+                            'div',
+                            {
+                                style: {
+                                    marginLeft: '-8px',
+                                },
+                            },
+                            children,
+                        ),
+                    ],
                 ),
-            ]),
-            h(
-                'body',
-                flatten(results),
-            ),
-        ]);
-        const renderedLayers = await htmlToImage(document, this.backgroundSize);
-        return this.background.clone().composite(renderedLayers);
+            ]);
+
+        // TODO: move it to a proper place
+        for (const debugPoint of this.debugPoints) {
+            const debugRender = await htmlToImage(
+                buildDocument(flatten(results.slice(0, debugPoint.index))),
+                this.backgroundSize,
+            );
+            const debugImage: ImageType = await this.background
+                .clone()
+                .composite(debugRender);
+            await debugImage.write('assets/debug-1.png');
+        }
+
+        const render = await htmlToImage(
+            buildDocument(flatten(results)),
+            this.backgroundSize,
+        );
+        return this.background.clone().composite(render);
     }
 
     async renderAll(
@@ -363,11 +399,31 @@ export class Template<EntryType extends Record<string, string>> {
     private imageFromImageRef = async (
         entry: EntryType,
         ref: ImageRef<EntryType>,
-        options: RequiredDeep<ImageLayerSpecificOptions<EntryType>>,
+        assetsPath: string,
     ): Promise<ImageType> => {
         const pathSegments = [];
-        if (options.assetsPath) {
-            pathSegments.push(options.assetsPath);
+        if (assetsPath.length) {
+            pathSegments.push(assetsPath);
+        }
+
+        if ('key' in ref) {
+            const fileName = entry[ref.key];
+            return this.loadImage(path.join(...pathSegments, fileName));
+        } else if ('pathFn' in ref) {
+            const fileName = ref.pathFn(entry);
+            return this.loadImage(path.join(...pathSegments, fileName));
+        } else {
+            return this.imageFromStaticImageRef(ref, assetsPath);
+        }
+    };
+
+    private imageFromStaticImageRef = async (
+        ref: StaticImageRef,
+        assetsPath: string,
+    ): Promise<ImageType> => {
+        const pathSegments = [];
+        if (assetsPath.length) {
+            pathSegments.push(assetsPath);
         }
 
         if ('buffer' in ref) {
@@ -376,12 +432,6 @@ export class Template<EntryType extends Record<string, string>> {
             return this.loadImage(path.join(...pathSegments, ref.path));
         } else if ('absolutePath' in ref) {
             return this.loadImage(ref.absolutePath);
-        } else if ('key' in ref) {
-            const fileName = entry[ref.key];
-            return this.loadImage(path.join(...pathSegments, fileName));
-        } else if ('pathFn' in ref) {
-            const fileName = ref.pathFn(entry);
-            return this.loadImage(path.join(...pathSegments, fileName));
         } else {
             throw new Error('Unknown ImageRef variant');
         }
@@ -408,18 +458,22 @@ export class Template<EntryType extends Record<string, string>> {
     ): Promise<HyperNode> => {
         if ('text' in ref) {
             const options = merge({}, DEFAULT_TEXT_LAYER_OPTIONS, ref.options);
-            return prepareText({
+            return this.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),
+            return this.prepareImage({
+                image: await this.imageFromImageRef(
+                    entry,
+                    ref.image,
+                    options.assetsPath,
+                ),
                 options,
             });
         } else if ('node' in ref) {
-            return ref.node
+            return ref.node;
         } else {
             throw new Error('Unknown TextRef variant');
         }
@@ -434,4 +488,193 @@ export class Template<EntryType extends Record<string, string>> {
         }
         return options.skip ?? false;
     };
+
+    private placeText = async ({
+        text,
+        box,
+        options,
+    }: {
+        text: string;
+        box: BoundingBox;
+        options: RequiredDeep<TextLayerOptions<EntryType>>;
+    }): Promise<HyperNode> => {
+        return h(
+            'div',
+            {
+                style: {
+                    display: 'flex',
+                    overflow: 'visible',
+                    position: 'absolute',
+
+                    justifyContent: options.justifyContent,
+                    alignItems: options.alignItems,
+
+                    ...boundingBoxToPx(box),
+                },
+            },
+            [
+                await this.prepareText({
+                    text,
+                    options,
+                }),
+            ],
+        );
+    };
+
+    private prepareText = async ({
+        text,
+        options,
+    }: {
+        text: string;
+        options: RequiredDeep<TextLayerSpecificOptions<EntryType>>;
+    }): Promise<HyperNode> => {
+        let textChildren: Array<string | HyperNode> = [text];
+        const replacementBuilder = new ReplacementBuilder();
+        options.replacementFn(replacementBuilder);
+        const replacementMap = replacementBuilder.build();
+        for (const [word, imageRef] of Object.entries(replacementMap)) {
+            const regex = new RegExp(word, 'gi');
+            const textOptions: RequiredDeep<ImageLayerOptions<EntryType>> =
+                merge(
+                    {},
+                    DEFAULT_IMAGE_LAYER_OPTIONS,
+                    { assetsPath: this.defaultAssetsPath },
+                    options,
+                );
+            const image = await this.imageFromStaticImageRef(
+                imageRef,
+                textOptions.assetsPath,
+            );
+            const imageBase64 = await image.getBase64('image/png');
+
+            const tmpChildren: Array<string | HyperNode> = [];
+            for (const textSegment of textChildren) {
+                if (typeof textSegment !== 'string') {
+                    continue;
+                }
+
+                const parts = (textSegment as string).split(regex);
+                for (let index = 0; index < parts.length; index++) {
+                    if (index > 0) {
+                        tmpChildren.push(
+                            h(
+                                'img',
+                                {
+                                    style: {
+                                        display: 'inline',
+                                        verticalAlign: 'middle',
+                                        height: toPx(options.font.size),
+                                        width: 'auto',
+                                    },
+                                    src: imageBase64,
+                                },
+                                [],
+                            ),
+                        );
+                    }
+                    tmpChildren.push(parts[index]);
+                }
+            }
+
+            textChildren = tmpChildren;
+        }
+
+        return h(
+            'div',
+            {
+                style: {
+                    overflow: 'visible',
+                    overflowWrap: 'word-wrap',
+                    whiteSpace: 'normal',
+
+                    color: options.color,
+                    fontFamily: options.font.family,
+                    fontSize: options.font.size,
+                    fontStyle: options.font.italic ? 'italic' : undefined,
+                    fontWeight: options.font.bold ? 'bold' : undefined,
+
+                    '-webkit-text-stroke': `${options.border.width}px ${options.border.color}`,
+                },
+            },
+            textChildren,
+        );
+    };
+
+    private placeImage = async ({
+        image,
+        box,
+        options,
+    }: {
+        image: ImageType;
+        box: BoundingBox;
+        options: RequiredDeep<ImageLayerOptions<EntryType>>;
+    }): Promise<HyperNode> => {
+        return h(
+            'div',
+            {
+                style: {
+                    display: 'flex',
+                    position: 'absolute',
+                    scale: 1,
+
+                    justifyContent: options.justifyContent,
+                    alignItems: options.alignItems,
+
+                    ...boundingBoxToPx(box),
+                },
+            },
+            [await this.prepareImage({ image, options })],
+        );
+    };
+
+    private prepareImage = async ({
+        image,
+        options,
+    }: {
+        image: ImageType;
+        options: RequiredDeep<ImageLayerSpecificOptions<EntryType>>;
+    }): Promise<HyperNode> => {
+        const imageBase64 = await image.getBase64('image/png');
+        const objectFit = SCALE_MODE_TO_OBJECT_FIT[options.scale];
+
+        return h(
+            'img',
+            {
+                style: {
+                    objectFit,
+                    flex: '1 1 auto',
+                    minWidth: 0,
+                    minHeight: 0,
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                },
+                src: imageBase64,
+            },
+            [],
+        );
+    };
 }
+
+/**
+ * Represents a replacement map between sets of words and symbols
+ */
+export class Replacement {
+    protected readonly replacementMap: ReplacementMap = {};
+
+    replace(words: Array<string>, symbol: StaticImageRef): this {
+        words.forEach(word => {
+            this.replacementMap[word] = symbol;
+        });
+        return this;
+    }
+}
+
+class ReplacementBuilder extends Replacement {
+    build(): ReplacementMap {
+        return this.replacementMap;
+    }
+}
+
+type DebugPoint = {
+    index: number;
+};

package/src/lib/types/containers.ts

@@ -1,8 +1,8 @@
 import { RequiredDeep } from 'type-fest';
 import { BoundingBox } from './boundingBox';
-import { ImageLayerSpecificOptions, ImageRef, ImageType } from './image';
+import { ImageLayerSpecificOptions, ImageRef } from './image';
 import { ScaleMode } from './scale';
-import { LayerOptions } from './layer';
+import { DEFAULT_LAYER_OPTIONS, LayerOptions } from './layer';
 import { HyperNode } from './hypernode';
 import { TextLayerSpecificOptions, TextRef } from './text';
 
@@ -25,11 +25,9 @@ export type ContainerOptions<EntryType extends Record<string, string>> =
 export const DEFAULT_CONTAINER_OPTIONS: RequiredDeep<
     ContainerOptions<Record<string, string>>
 > = {
+    ...DEFAULT_LAYER_OPTIONS,
     gap: 0,
-    justifyContent: 'normal',
-    alignItems: 'center',
     scale: 'none',
-    skip: false,
 };
 
 export type DirectionContainerOptions<

package/src/lib/types/hypernode.ts

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

package/src/lib/types/image.ts

@@ -1,6 +1,6 @@
 import { JimpInstance } from 'jimp';
 import { ScaleMode } from './scale';
-import { LayerOptions } from './layer';
+import { DEFAULT_LAYER_OPTIONS, LayerOptions } from './layer';
 import { RequiredDeep } from 'type-fest';
 
 export type ImageType = JimpInstance;
@@ -10,12 +10,15 @@ export type ImageType = JimpInstance;
  * Dynamic images -> `key`, `pathFn`
  */
 export type ImageRef<EntryType extends Record<string, string>> =
-    | { buffer: Buffer }
-    | { path: string }
-    | { absolutePath: string }
+    | StaticImageRef
     | { key: keyof EntryType }
     | { pathFn: (entry: EntryType) => string };
 
+export type StaticImageRef =
+    | { buffer: Buffer }
+    | { path: string }
+    | { absolutePath: string };
+
 export type ImageLayerOptions<EntryType extends Record<string, string>> =
     LayerOptions<EntryType> & {
         /**
@@ -32,15 +35,17 @@ export type ImageLayerOptions<EntryType extends Record<string, string>> =
         // processorFn?: (entry: EntryType, image: ImageType) => Promise<ImageType>;
     };
 
-export const DEFAULT_IMAGE_LAYER_OPTIONS: RequiredDeep<ImageLayerOptions<Record<string, string>>> = {
-    justifyContent: 'center',
-    alignItems: 'center',
+export const DEFAULT_IMAGE_LAYER_OPTIONS: RequiredDeep<
+    ImageLayerOptions<Record<string, string>>
+> = {
+    ...DEFAULT_LAYER_OPTIONS,
     scale: 'none',
-    skip: false,
-    assetsPath: ''
+    assetsPath: '',
 };
 
-export type ImageLayerSpecificOptions<EntryType extends Record<string, string>> = Omit<ImageLayerOptions<EntryType>, keyof LayerOptions<EntryType>>;
+export type ImageLayerSpecificOptions<
+    EntryType extends Record<string, string>,
+> = Omit<ImageLayerOptions<EntryType>, keyof LayerOptions<EntryType>>;
 
 export type Alignment = 'start' | 'center' | 'end';
 

package/src/lib/types/index.ts

@@ -9,3 +9,5 @@ export * from './boundingBox';
 export * from './css';
 export * from './layer';
 export * from './hypernode';
+export * from './template';
+export * from './pdf';

package/src/lib/types/layer.ts

@@ -1,4 +1,6 @@
-import { JustifyContent, AlignItems } from "./css";
+import { RequiredDeep } from 'type-fest';
+import { JustifyContent, AlignItems } from './css';
+import { HyperNode } from './hypernode';
 
 export type LayerOptions<EntryType extends Record<string, string>> = {
     /**
@@ -15,4 +17,25 @@ export type LayerOptions<EntryType extends Record<string, string>> = {
      * Decides if a layer should be rendered or not for a certain entry
      */
     skip?: boolean | ((entry: EntryType) => boolean);
+
+    /**
+     * Control if should render bounding box for this layer
+     */
+    renderBoundingBox?: boolean;
 };
+
+export const DEFAULT_LAYER_OPTIONS: RequiredDeep<
+    LayerOptions<Record<string, string>>
+> = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    skip: false,
+    renderBoundingBox: false,
+};
+
+export type LayerFnContext = {};
+
+export type LayerFn<EntryType> = (
+    entry: EntryType,
+    context: LayerFnContext,
+) => Promise<Array<HyperNode>>;