@hellkite/pipkin 0.5.0 → 0.5.2

package/src/lib/types/text.ts

@@ -1,67 +1,58 @@
-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 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;
-
-    // TODO: processor fn
-    replacement?: ReplacementMap;
+export type TextRef<EntryType> =
+    | { key: string }
+    | { text: string }
+    | { textFn: (entry: EntryType) => string };
 
+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;
+    /**
+     * Either use one supported by canvas
+     * or load a custom one before rendering
+     */
+    family?: string;
     /**
-     * default `center`
+     * Warning: Not supported by all fonts
      */
-    yAlign?:
-        | 'left'
-        | 'center'
-        | 'right'
-        | 'justify'
-        | 'justify-left'
-        | 'justify-center'
-        | 'justify-right';
+    bold?: boolean;
+    /**
+     * Warning: Not supported by all fonts
+     */
+    italic?: boolean;
 };
 
-export type TextPosition = BoundingBox;
+export type TextLayerOptions<EntryType extends Record<string, string>> =
+    LayerOptions<EntryType> & {
+        font?: FontOptions;
+
+        color?: string;
+
+        // TODO: processor fn
+        replacement?: ReplacementMap;
+    };
+
+export const DEFAULT_FONT: Required<
+FontOptions
+> = {
+    size: 28,
+    family: 'Arial',
+    bold: false,
+    italic: false,
+};
 
-// TODO: all required
-export const DEFAULT_TEXT_LAYER_OPTIONS: TextLayerOptions = {
-    xAlign: 'center',
-    yAlign: 'center',
+export const DEFAULT_TEXT_LAYER_OPTIONS: RequiredDeep<
+    TextLayerOptions<Record<string, string>>
+> = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    font: DEFAULT_FONT,
+    color: 'black',
+    replacement: {},
+    skip: false,
 };

package/src/lib/utils/buildFontString.ts

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

package/src/lib/utils/container.ts

@@ -1,52 +1,141 @@
-import { BoundingBox, Point } from '../types/2d';
+import { h } from 'virtual-dom';
 import {
-    DEFAULT_CONTAINER_OPTIONS,
     DEFAULT_DIRECTION_CONTAINER_OPTIONS,
     DirectionContainerOptions,
+    ImageType,
     PackingFn,
-} from '../types/containers';
-import { ImageType, ScaleMode } from '../types/image';
-import { h, create as createElement, VNode } from 'virtual-dom';
-import nodeHtmlToImage from 'node-html-to-image';
-import { Jimp } from 'jimp';
-import { toPx } from '../types';
+    BoundingBox,
+    SCALE_MODE_TO_OBJECT_FIT,
+    Size,
+    GridContainerOptions,
+    DEFAULT_GRID_CONTAINER_OPTIONS,
+} from '../types';
+import { boundingBoxToPx, toPx } from './toPx';
+import merge from 'lodash.merge';
+import { htmlToImage } from './htmlToImage';
+import chunk from 'lodash.chunk';
 
 export const vboxPackingFn =
-    (position: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
-    (background: ImageType, images: Array<ImageType>) =>
+    <EntryType extends Record<string, string>>(
+        options?: DirectionContainerOptions<EntryType>,
+    ): PackingFn =>
+    (box: BoundingBox, background: ImageType, images: Array<ImageType>) =>
         directionalPackingFn({
             isVertical: true,
-            background,
+            backgroundSize: background,
             images,
-            position,
+            box,
             options,
         });
 
 export const hboxPackingFn =
-    (position: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
-    (background: ImageType, images: Array<ImageType>) =>
+    <EntryType extends Record<string, string>>(
+        options?: DirectionContainerOptions<EntryType>,
+    ): PackingFn =>
+    (box: BoundingBox, background: ImageType, images: Array<ImageType>) =>
         directionalPackingFn({
             isVertical: false,
-            background,
+            backgroundSize: background,
             images,
-            position,
+            box,
             options,
         });
 
-const directionalPackingFn = async ({
+export const gridPackingFn =
+    <EntryType extends Record<string, string>>(
+        options?: GridContainerOptions<EntryType>,
+    ): PackingFn =>
+    async (
+        box: BoundingBox,
+        background: ImageType,
+        images: Array<ImageType>,
+    ) => {
+        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)) {
+            items.push(
+                h(
+                    'div',
+                    {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            overflow: 'hidden',
+
+                            gap: toPx(mergedOptions.gap),
+                            justifyContent: mergedOptions.justifyContent,
+                            alignItems: mergedOptions.alignItems,
+                        },
+                    },
+                    subset,
+                ),
+            );
+        }
+        const document = h(
+            'div',
+            {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${mergedOptions.size}, 1fr)`,
+                    position: 'absolute',
+
+                    gap: toPx(mergedOptions.gap),
+                    ...boundingBoxToPx(box),
+                },
+            },
+            items,
+        );
+
+        return htmlToImage(document, background);
+    };
+
+const directionalPackingFn = async <EntryType extends Record<string, string>>({
     isVertical,
-    background,
+    backgroundSize: background,
     images,
-    position,
+    box,
     options,
 }: {
     isVertical: boolean;
-    background: ImageType;
+    backgroundSize: Size;
     images: Array<ImageType>;
-    position: BoundingBox;
-    options?: DirectionContainerOptions;
+    box: BoundingBox;
+    options?: DirectionContainerOptions<EntryType>;
 }): Promise<ImageType> => {
-    const objectFit = SCALE_MODE_TO_OBJECT_FIT[options?.scale ?? 'none'];
+    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');
@@ -75,44 +164,16 @@ const directionalPackingFn = async ({
                 position: 'absolute',
                 scale: 1,
 
-                flexDirection: `${isVertical ? 'column' : 'row'}${options?.reversed ? '-reversed' : ''}`,
-                gap: toPx(options?.gap ?? 0),
-                // TODO: merge options and defaults
-                justifyContent:
-                    options?.justifyContent ??
-                    DEFAULT_DIRECTION_CONTAINER_OPTIONS.justifyContent,
-                alignItems:
-                    options?.alignItems ??
-                    DEFAULT_DIRECTION_CONTAINER_OPTIONS.alignItems,
+                flexDirection: `${isVertical ? 'column' : 'row'}${mergedOptions.reversed ? '-reversed' : ''}`,
+                gap: toPx(mergedOptions.gap),
+                justifyContent: mergedOptions.justifyContent,
+                alignItems: mergedOptions.alignItems,
 
-                top: toPx(position.y),
-                left: toPx(position.x),
-                height: toPx(position.height),
-                width: toPx(position.width),
+                ...boundingBoxToPx(box),
             },
         },
         children,
     );
 
-    const rootNode = createElement(document);
-    // TODO: extract this in a dif function
-    const image = await nodeHtmlToImage({
-        html: rootNode.toString(),
-        transparent: true,
-        type: 'png',
-        puppeteerArgs: {
-            defaultViewport: {
-                width: background.width,
-                height: background.height,
-            },
-        },
-    });
-    return Jimp.read(image as Buffer) as Promise<ImageType>;
-};
-
-
-const SCALE_MODE_TO_OBJECT_FIT: Record<ScaleMode, string> = {
-    'keep-ratio': 'contain',
-    stretch: 'fill',
-    none: 'none',
+    return htmlToImage(document, background);
 };

package/src/lib/utils/drawBoundingBox.ts

@@ -1,22 +1,25 @@
-import { canvasToImage } from './canvasToImage';
-import { BoundingBox, Size } from '../types/2d';
-import * as fabric from 'fabric/node';
-import { ImageType } from '../types/image';
+import { h } from 'virtual-dom';
+import { htmlToImage } from './htmlToImage';
+import { boundingBoxToPx } from './toPx';
+import { ImageType, Size, BoundingBox } from '../types';
 
 export const drawBoundingBox = async (
     box: BoundingBox,
     imageSize: Size,
 ): Promise<ImageType> => {
-    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 canvasToImage(fabricCanvas);
+    const document = h(
+        'div',
+        {
+            style: {
+                position: 'absolute',
+                border: '2px solid red',
+                background: 'transparent',
+                boxSizing: 'border-box',
+                ...boundingBoxToPx(box),
+            },
+        },
+        [],
+    );
+
+    return htmlToImage(document, imageSize);
 };

package/src/lib/utils/htmlToImage.ts

@@ -0,0 +1,24 @@
+import { create as createElement, VNode } from 'virtual-dom';
+import nodeHtmlToImage from 'node-html-to-image';
+import { Jimp } from 'jimp';
+import { ImageType, Size } from '../types';
+
+export const htmlToImage = async (
+    document: VNode,
+    backgroundSize: Size,
+): Promise<ImageType> => {
+    const html = createElement(document).toString();
+    const image = await nodeHtmlToImage({
+        html,
+        transparent: true,
+        type: 'png',
+        puppeteerArgs: {
+            defaultViewport: {
+                width: backgroundSize.width,
+                height: backgroundSize.height,
+                deviceScaleFactor: 1,
+            },
+        },
+    });
+    return Jimp.read(image as Buffer) as Promise<ImageType>;
+};

package/src/lib/utils/index.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/src/lib/utils/placeImage.ts

@@ -1,65 +1,62 @@
-import { Jimp } from 'jimp';
-import path from 'path';
+import { h } from 'virtual-dom';
+import { boundingBoxToPx } from './toPx';
 import {
-    Alignment,
-    ImageType,
-    ImagePosition,
     ImageLayerOptions,
-    DEFAULT_IMAGE_ALIGNMENT,
-    DEFAULT_SCALE_MODE,
-} from '../types/image';
-
-function computeOffsetFromAlignment(
-    alignment: Alignment,
-    size: number,
-    boxSize: number,
-): number {
-    if (alignment === 'start') {
-        return 0;
-    } else if (alignment === 'center') {
-        return Math.floor((boxSize - size) / 2);
-    } else {
-        return -(boxSize - size);
-    }
-}
+    ImageType,
+    BoundingBox,
+    SCALE_MODE_TO_OBJECT_FIT,
+} from '../types';
+import { htmlToImage } from './htmlToImage';
+import { RequiredDeep } from 'type-fest';
 
-type PlaceImageProps = {
-    background: ImageType;
+type PlaceImageProps<EntryType extends Record<string, string>> = {
     image: ImageType;
-    position: ImagePosition;
+    box: BoundingBox;
+    backgroundSize: { width: number; height: number };
+    options: RequiredDeep<ImageLayerOptions<EntryType>>;
 };
 
-export async function placeImage(
-    // TODO: pass background size only
-    { background, image, position }: PlaceImageProps,
-): Promise<ImageType> {
-    // handle alignment inside the bounding box
-    const xAlignment =
-        position.xAlignment ?? position.alignment ?? DEFAULT_IMAGE_ALIGNMENT;
-    const yAlignment =
-        position.yAlignment ?? position.alignment ?? DEFAULT_IMAGE_ALIGNMENT;
-
-    const scale = position.scale ?? DEFAULT_SCALE_MODE;
-
-    if (scale === 'keep-ratio') {
-        // TODO: handle case when box has a size equal to 0
-        const ratio = Math.min(
-            position.width / image.width,
-            position.height / image.height,
-        );
-        image.scale(ratio);
-    }
-
-    if (scale === 'stretch') {
-        image.scaleToFit({ w: position.width, h: position.height });
-    }
-
-    const xOffset =
-        position.x +
-        computeOffsetFromAlignment(xAlignment, image.width, position.width);
-    const yOffset =
-        position.y +
-        computeOffsetFromAlignment(yAlignment, image.height, position.height);
-
-    return background.composite(image, xOffset, yOffset);
+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,24 +1,17 @@
-import { h, create as createElement, VNode } from 'virtual-dom';
-import {
-    DEFAULT_TEXT_LAYER_OPTIONS,
-    ImageType,
-    Size,
-    TextLayerOptions,
-    TextPosition,
-    toPx,
-} from '../types';
-import nodeHtmlToImage from 'node-html-to-image';
-import { Jimp } from 'jimp';
+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 (
+export const renderText = async <EntryType extends Record<string, string>>(
     text: string,
-    position: TextPosition,
+    box: BoundingBox,
     backgroundSize: Size,
-    options?: TextLayerOptions,
+    options: RequiredDeep<TextLayerOptions<EntryType>>,
 ): Promise<ImageType> => {
     let textChildren: Array<string | VNode> = [text];
-    for (const [word, image] of Object.entries(options?.replacement ?? {})) {
+    for (const [word, image] of Object.entries(options.replacement)) {
         const regex = new RegExp(word, 'gi');
         const imageBase64 = await image.getBase64('image/png');
 
@@ -38,7 +31,7 @@ export const renderText = async (
                                 style: {
                                     display: 'inline',
                                     verticalAlign: 'middle',
-                                    height: toPx(options?.font?.size ?? 28), // TODO: use constant
+                                    height: toPx(options.font.size),
                                     width: 'auto',
                                 },
                                 src: imageBase64,
@@ -62,15 +55,10 @@ export const renderText = async (
                 overflow: 'visible',
                 position: 'absolute',
 
-                top: toPx(position.y),
-                left: toPx(position.x),
-                height: toPx(position.height),
-                width: toPx(position.width),
+                justifyContent: options.justifyContent,
+                alignItems: options.alignItems,
 
-                justifyContent:
-                    options?.xAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.xAlign,
-                alignItems:
-                    options?.yAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.yAlign,
+                ...boundingBoxToPx(box),
             },
         },
         [
@@ -82,11 +70,11 @@ export const renderText = async (
                         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,
+                        color: options.color,
+                        fontFamily: options.font.family,
+                        fontSize: options.font.size,
+                        fontStyle: options.font.italic ? 'italic' : undefined,
+                        fontWeight: options.font.bold ? 'bold' : undefined,
                     },
                 },
                 textChildren,
@@ -94,17 +82,5 @@ export const renderText = async (
         ],
     );
 
-    const rootNode = createElement(document);
-    const image = await nodeHtmlToImage({
-        html: rootNode.toString(),
-        transparent: true,
-        type: 'png',
-        puppeteerArgs: {
-            defaultViewport: {
-                width: backgroundSize.width,
-                height: backgroundSize.height,
-            },
-        },
-    });
-    return Jimp.read(image as Buffer) as Promise<ImageType>;
+    return htmlToImage(document, backgroundSize);
 };

package/src/lib/utils/toPx.ts

@@ -0,0 +1,11 @@
+import { BoundingBox } from '../types';
+
+export const toPx = (value: number): string => `${value}px`;
+
+export const boundingBoxToPx = (
+    boundingBox: BoundingBox,
+): Record<string, string> => {
+    return Object.entries(boundingBox)
+        .map(([key, value]) => [key, toPx(value)])
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+};

package/src/lib/types/2d.ts

@@ -1,11 +0,0 @@
-export type Point = {
-    x: number;
-    y: number;
-};
-
-export type Size = {
-    width: number;
-    height: number;
-};
-
-export type BoundingBox = Point & Size;