@hellkite/pipkin 0.6.2 → 0.8.0

package/src/lib/types/image.ts

@@ -1,17 +1,24 @@
 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;
 
+/**
+ * Static images -> `buffer`, `path`, `absolutePath`
+ * 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> & {
         /**
@@ -28,14 +35,18 @@ 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 Alignment = 'start' | 'center' | 'end';
 
 export const DEFAULT_IMAGE_ALIGNMENT: Alignment = 'center';

package/src/lib/types/index.ts

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

package/src/lib/types/layer.ts

@@ -1,3 +1,4 @@
+import { RequiredDeep } from "type-fest";
 import { JustifyContent, AlignItems } from "./css";
 
 export type LayerOptions<EntryType extends Record<string, string>> = {
@@ -15,4 +16,18 @@ 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,
 };

package/src/lib/types/replacement.ts

@@ -1,3 +1,3 @@
-import { ImageType } from './image';
+import { StaticImageRef } from './image';
 
-export type ReplacementMap = Record<string, ImageType>;
+export type ReplacementMap = Record<string, StaticImageRef>;

package/src/lib/types/template.ts

@@ -0,0 +1,22 @@
+import { rgbaToInt } from "jimp";
+
+type RequiredTemplateOptions = {
+    height: number;
+    width: number;
+    color: number;
+};
+
+type OptionalTemplateOptions = Partial<{
+    defaultFontFamily: string;
+    defaultAssetsPath: string;
+    // TODO: defaultOutputDirectoryPath
+    debug: boolean;
+}>;
+
+export type TemplateOptions = RequiredTemplateOptions & OptionalTemplateOptions;
+
+export const DEFAULT_TEMPLATE_OPTIONS: RequiredTemplateOptions = {
+    height: 1050,
+    width: 750,
+    color: rgbaToInt(255, 255, 255, 255),
+};

package/src/lib/types/text.ts

@@ -1,10 +1,14 @@
 import type { RequiredDeep } from 'type-fest';
-import { LayerOptions } from './layer';
-import { ReplacementMap } from './replacement';
+import { DEFAULT_LAYER_OPTIONS, LayerOptions } from './layer';
+import { Replacement } 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 = {
@@ -38,30 +42,30 @@ export type TextLayerOptions<EntryType extends Record<string, string>> =
             color?: string;
         };
 
+        replacementFn?: (replace: Replacement) => Replacement;
+
         // 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>>
 > = {
-    justifyContent: 'center',
-    alignItems: 'center',
+    ...DEFAULT_LAYER_OPTIONS,
     font: DEFAULT_FONT,
     color: 'black',
-    replacement: {},
-    skip: false,
+    replacementFn: replacement => replacement,
     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,6 +1,4 @@
 export * from './container';
-export * from './drawBoundingBox';
-export * from './placeImage';
-export * from './renderText';
+export * from './placeBoundingBox';
 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);
 };

package/src/lib/utils/placeImage.ts

@@ -1,62 +0,0 @@
-import { h } from 'virtual-dom';
-import { boundingBoxToPx } from './toPx';
-import {
-    ImageLayerOptions,
-    ImageType,
-    BoundingBox,
-    SCALE_MODE_TO_OBJECT_FIT,
-} from '../types';
-import { htmlToImage } from './htmlToImage';
-import { RequiredDeep } from 'type-fest';
-
-type PlaceImageProps<EntryType extends Record<string, string>> = {
-    image: ImageType;
-    box: BoundingBox;
-    backgroundSize: { width: number; height: number };
-    options: RequiredDeep<ImageLayerOptions<EntryType>>;
-};
-
-export const placeImage = async <EntryType extends Record<string, string>>({
-    image,
-    box,
-    backgroundSize,
-    options,
-}: PlaceImageProps<EntryType>): Promise<ImageType> => {
-    const imageBase64 = await image.getBase64('image/png');
-    const objectFit = SCALE_MODE_TO_OBJECT_FIT[options.scale];
-
-    const document = h(
-        'div',
-        {
-            style: {
-                display: 'flex',
-                position: 'absolute',
-                scale: 1,
-
-                justifyContent: options.justifyContent,
-                alignItems: options.alignItems,
-
-                ...boundingBoxToPx(box),
-            },
-        },
-        [
-            h(
-                'img',
-                {
-                    style: {
-                        objectFit,
-                        flex: '1 1 auto',
-                        minWidth: 0,
-                        minHeight: 0,
-                        maxWidth: '100%',
-                        maxHeight: '100%',
-                    },
-                    src: imageBase64,
-                },
-                [],
-            ),
-        ],
-    );
-
-    return htmlToImage(document, backgroundSize);
-}

package/src/lib/utils/renderText.ts

@@ -1,107 +0,0 @@
-import { h, VNode } from 'virtual-dom';
-import { ImageType, BoundingBox, Size, TextLayerOptions } from '../types';
-import { boundingBoxToPx, toPx } from './toPx';
-import { htmlToImage } from './htmlToImage';
-import { RequiredDeep } from 'type-fest';
-
-export const renderText = async <EntryType extends Record<string, string>>(
-    text: string,
-    box: BoundingBox,
-    backgroundSize: Size,
-    options: RequiredDeep<TextLayerOptions<EntryType>>,
-    fonts: Record<string, string>,
-): Promise<ImageType> => {
-    let textChildren: Array<string | VNode> = [text];
-    for (const [word, image] of Object.entries(options.replacement)) {
-        const regex = new RegExp(word, 'gi');
-        const imageBase64 = await image.getBase64('image/png');
-
-        let tmpChildren: Array<string | VNode> = [];
-        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;
-    }
-
-    const content = h(
-        'div',
-        {
-            style: {
-                display: 'flex',
-                overflow: 'visible',
-                position: 'absolute',
-
-                justifyContent: options.justifyContent,
-                alignItems: options.alignItems,
-
-                ...boundingBoxToPx(box),
-            },
-        },
-        [
-            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,
-            ),
-        ],
-    );
-
-    const document = h('html', [
-        h('head', [
-            h(
-                'style',
-                Object.entries(fonts)
-                    .map(
-                        ([name, data]) =>
-                            `@font-face {
-                                font-family: '${name}';
-                                src: url(data:font/ttf;base64,${data}) format('truetype');
-                            }`,
-                    )
-                    .join('\n'),
-            ),
-        ]),
-        h('body', [content]),
-    ]);
-
-    return htmlToImage(document, backgroundSize);
-};