@hellkite/pipkin 0.5.1 → 0.6.1

package/src/lib/types/containers.ts

@@ -1,66 +1,72 @@
-import { AlignItems, JustifyContent } from './css';
+import { RequiredDeep } from 'type-fest';
+import { BoundingBox } from './boundingBox';
 import { ImageType } from './image';
 import { ScaleMode } from './scale';
+import { LayerOptions } from './layer';
 
-export type ContainerOptions = {
-    /**
-     * Setting a non-default value for justify will cause the alignment to be ignored.
-     * 
-     * Defaults to `normal`
-     */
-    justifyContent?: JustifyContent;
+export type ContainerOptions<EntryType extends Record<string, string>> =
+    LayerOptions<EntryType> & {
+        /**
+         * This is treated as a minimum length of an unit of space
+         * between two items, but it can grow larger than it
+         *
+         * Defaults to 0
+         */
+        gap?: number;
 
-    /**
-     * This is treated as a minimum length of an unit of space
-     * between two items, but it can grow larger than it
-     * 
-     * Defaults to 0
-     */
-    gap?: number;
+        /**
+         * Defaults to `none`
+         */
+        scale?: ScaleMode;
+    };
 
-    /**
-     * Defines how the items should be placed
-     * across the secondary direction of the container
-     *
-     * Defaults to `center`
-     */
-    alignItems?: AlignItems;
-
-    /**
-     * Defaults to `none`
-     */
-    scale?: ScaleMode;
-};
-
-export const DEFAULT_CONTAINER_OPTIONS: Required<ContainerOptions> = {
+export const DEFAULT_CONTAINER_OPTIONS: RequiredDeep<
+    ContainerOptions<Record<string, string>>
+> = {
     gap: 0,
     justifyContent: 'normal',
     alignItems: 'center',
     scale: 'none',
+    skip: false,
 };
 
-export type DirectionContainerOptions = ContainerOptions & {
+export type DirectionContainerOptions<
+    EntryType extends Record<string, string>,
+> = ContainerOptions<EntryType> & {
     reversed?: boolean;
 };
 
-export const DEFAULT_DIRECTION_CONTAINER_OPTIONS: Required<DirectionContainerOptions> = {
+export const DEFAULT_DIRECTION_CONTAINER_OPTIONS: RequiredDeep<
+    DirectionContainerOptions<Record<string, string>>
+> = {
     ...DEFAULT_CONTAINER_OPTIONS,
     reversed: false,
-}
+};
 
-export type GridContainerOptions = ContainerOptions & {
-    rows?: number;
-    cols?: number;
+export type GridContainerOptions<EntryType extends Record<string, string>> =
+    ContainerOptions<EntryType> & {
+        size?: number;
 
-    /**
-     * Defines what is considered the main direction of the container.
-     * -> `rows` - the items would be placed to fill each row before starting the next
-     * -> `cols` - the items would be placed to fill each col before starting the next
-     *
-     * Defaults to `rows`
-     */
-    direction?: 'rows' | 'cols';
-};
+        /**
+         * Defines what is considered the main direction of the container.
+         * -> `rows` - the items would be placed to fill each row before starting the next
+         * -> `cols` - the items would be placed to fill each col before starting the next
+         *
+         * Defaults to `rows`
+         */
+        direction?: 'rows' | 'cols';
+    };
 
+export const DEFAULT_GRID_CONTAINER_OPTIONS: RequiredDeep<
+    GridContainerOptions<Record<string, string>>
+> = {
+    ...DEFAULT_CONTAINER_OPTIONS,
+    size: 3,
+    direction: 'rows',
+};
 
-export type PackingFn = (background: ImageType, images: Array<ImageType>) => Promise<ImageType>;
+export type PackingFn = (
+    box: BoundingBox,
+    background: ImageType,
+    images: Array<ImageType>,
+) => Promise<ImageType>;

package/src/lib/types/image.ts

@@ -1,47 +1,39 @@
 import { JimpInstance } from 'jimp';
 import { ScaleMode } from './scale';
-import { AlignItems, JustifyContent } from './css';
+import { LayerOptions } from './layer';
+import { RequiredDeep } from 'type-fest';
 
 export type ImageType = JimpInstance;
 
-export type ImageRef<EntryType> =
+export type ImageRef<EntryType extends Record<string, string>> =
     | { buffer: Buffer }
     | { path: string }
     | { absolutePath: string }
     | { key: keyof EntryType }
     | { pathFn: (entry: EntryType) => string };
 
-export type ImageLayerOptions = {
-    /**
-     * Base path for the assets. Overrides the more global property of the template `defaultAssetsPath`.
-     */
-    assetsPath?: string;
-
-    /**
-     * default `center`
-     */
-    justifyContent?: JustifyContent;
-    /**
-     * default `center`
-     */
-    alignItems?: AlignItems;
-
-    /**
-     * Defaults to `none`
-     */
-    scale?: ScaleMode;
-
-    // TODO:
-    // processorFn?: (entry: EntryType, image: ImageType) => Promise<ImageType>;
-};
+export type ImageLayerOptions<EntryType extends Record<string, string>> =
+    LayerOptions<EntryType> & {
+        /**
+         * Base path for the assets. Overrides the more global property of the template `defaultAssetsPath`.
+         */
+        assetsPath?: string;
+
+        /**
+         * Defaults to `none`
+         */
+        scale?: ScaleMode;
+
+        // TODO:
+        // processorFn?: (entry: EntryType, image: ImageType) => Promise<ImageType>;
+    };
 
-export const DEFAULT_IMAGE_LAYER_OPTIONS: Required<
-    Omit<ImageLayerOptions, 'assetsPath'>
-> &
-    Pick<ImageLayerOptions, 'assetsPath'> = {
+export const DEFAULT_IMAGE_LAYER_OPTIONS: RequiredDeep<ImageLayerOptions<Record<string, string>>> = {
     justifyContent: 'center',
     alignItems: 'center',
     scale: 'none',
+    skip: false,
+    assetsPath: ''
 };
 
 export type Alignment = 'start' | 'center' | 'end';

package/src/lib/types/index.ts

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

package/src/lib/types/layer.ts

@@ -0,0 +1,18 @@
+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/src/lib/types/text.ts

@@ -1,3 +1,5 @@
+import type { RequiredDeep } from 'type-fest';
+import { LayerOptions } from './layer';
 import { ReplacementMap } from './replacement';
 
 export type TextRef<EntryType> =
@@ -5,59 +7,52 @@ export type TextRef<EntryType> =
     | { 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;
-
-    // TODO: processor fn
-    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;
+    /**
+     * 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 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";
+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,13 +1,25 @@
-
 import { h } from 'virtual-dom';
-import { DEFAULT_DIRECTION_CONTAINER_OPTIONS, DirectionContainerOptions, ImageType, PackingFn, BoundingBox, SCALE_MODE_TO_OBJECT_FIT, Size } from '../types';
+import {
+    DEFAULT_DIRECTION_CONTAINER_OPTIONS,
+    DirectionContainerOptions,
+    ImageType,
+    PackingFn,
+    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 =
-    (box: 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,
             backgroundSize: background,
@@ -17,8 +29,10 @@ export const vboxPackingFn =
         });
 
 export const hboxPackingFn =
-    (box: 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,
             backgroundSize: background,
@@ -27,7 +41,82 @@ export const hboxPackingFn =
             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,
     backgroundSize: background,
     images,
@@ -38,9 +127,13 @@ const directionalPackingFn = async ({
     backgroundSize: Size;
     images: Array<ImageType>;
     box: BoundingBox;
-    options?: DirectionContainerOptions;
+    options?: DirectionContainerOptions<EntryType>;
 }): Promise<ImageType> => {
-    const mergedOptions = merge(DEFAULT_DIRECTION_CONTAINER_OPTIONS, options);
+    const mergedOptions = merge(
+        {},
+        DEFAULT_DIRECTION_CONTAINER_OPTIONS,
+        options,
+    );
     const objectFit = SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
 
     const children = await Promise.all(

package/src/lib/utils/drawBoundingBox.ts

@@ -5,18 +5,21 @@ import { ImageType, Size, BoundingBox } from '../types';
 
 export const drawBoundingBox = async (
     box: BoundingBox,
-
     imageSize: Size,
 ): Promise<ImageType> => {
-    const document = h('div', {
-        style: {
-            position: 'absolute',
-            border: '2px solid red',
-            background: 'transparent',
-            boxSizing: 'border-box',
-            ...boundingBoxToPx(box),
+    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

@@ -8,7 +8,6 @@ export const htmlToImage = async (
     backgroundSize: Size,
 ): Promise<ImageType> => {
     const html = createElement(document).toString();
-    // TODO: extract this in a dif function
     const image = await nodeHtmlToImage({
         html,
         transparent: true,
@@ -17,6 +16,7 @@ export const htmlToImage = async (
             defaultViewport: {
                 width: backgroundSize.width,
                 height: backgroundSize.height,
+                deviceScaleFactor: 1,
             },
         },
     });

package/src/lib/utils/placeImage.ts

@@ -1,31 +1,29 @@
 import { h } from 'virtual-dom';
 import { boundingBoxToPx } from './toPx';
 import {
-    DEFAULT_IMAGE_LAYER_OPTIONS,
     ImageLayerOptions,
     ImageType,
     BoundingBox,
     SCALE_MODE_TO_OBJECT_FIT,
 } from '../types';
-import merge from 'lodash.merge';
 import { htmlToImage } from './htmlToImage';
+import { RequiredDeep } from 'type-fest';
 
-type PlaceImageProps = {
+type PlaceImageProps<EntryType extends Record<string, string>> = {
     image: ImageType;
     box: BoundingBox;
     backgroundSize: { width: number; height: number };
-    options: ImageLayerOptions;
+    options: RequiredDeep<ImageLayerOptions<EntryType>>;
 };
 
-export async function placeImage({
+export const placeImage = async <EntryType extends Record<string, string>>({
     image,
     box,
     backgroundSize,
     options,
-}: PlaceImageProps): Promise<ImageType> {
+}: PlaceImageProps<EntryType>): Promise<ImageType> => {
     const imageBase64 = await image.getBase64('image/png');
-    const mergedOptions = merge(DEFAULT_IMAGE_LAYER_OPTIONS, options);
-    const objectFit = SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
+    const objectFit = SCALE_MODE_TO_OBJECT_FIT[options.scale];
 
     const document = h(
         'div',
@@ -35,8 +33,8 @@ export async function placeImage({
                 position: 'absolute',
                 scale: 1,
 
-                justifyContent: mergedOptions.justifyContent,
-                alignItems: mergedOptions.alignItems,
+                justifyContent: options.justifyContent,
+                alignItems: options.alignItems,
 
                 ...boundingBoxToPx(box),
             },

package/src/lib/utils/renderText.ts

@@ -1,22 +1,18 @@
 import { h, VNode } from 'virtual-dom';
-import {
-    DEFAULT_TEXT_LAYER_OPTIONS,
-    ImageType,
-    BoundingBox,
-    Size,
-    TextLayerOptions,
-} from '../types';
+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,
     box: BoundingBox,
     backgroundSize: Size,
-    options?: TextLayerOptions,
+    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 ?? {})) {
+    for (const [word, image] of Object.entries(options.replacement)) {
         const regex = new RegExp(word, 'gi');
         const imageBase64 = await image.getBase64('image/png');
 
@@ -36,7 +32,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,
@@ -52,7 +48,7 @@ export const renderText = async (
         textChildren = tmpChildren;
     }
 
-    const document = h(
+    const content = h(
         'div',
         {
             style: {
@@ -60,10 +56,8 @@ export const renderText = async (
                 overflow: 'visible',
                 position: 'absolute',
 
-                justifyContent:
-                    options?.xAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.xAlign,
-                alignItems:
-                    options?.yAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.yAlign,
+                justifyContent: options.justifyContent,
+                alignItems: options.alignItems,
 
                 ...boundingBoxToPx(box),
             },
@@ -77,11 +71,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,
@@ -89,5 +83,23 @@ export const renderText = async (
         ],
     );
 
+    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);
 };