@hellkite/pipkin 0.5.0 → 0.5.1

package/src/lib/types/size.ts

@@ -0,0 +1,4 @@
+export type Size = {
+    width: number;
+    height: number;
+};

package/src/lib/types/text.ts

@@ -1,11 +1,9 @@
-import { BoundingBox } from './2d';
 import { ReplacementMap } from './replacement';
 
-export type TextLayerProps<EntryType> = {
-    key: keyof EntryType;
-    position: TextPosition;
-    options?: TextLayerOptions;
-};
+export type TextRef<EntryType> =
+    | { key: string }
+    | { text: string }
+    | { textFn: (entry: EntryType) => string };
 
 export type TextLayerOptions = {
     font?: {
@@ -58,8 +56,6 @@ export type TextLayerOptions = {
         | 'justify-right';
 };
 
-export type TextPosition = BoundingBox;
-
 // TODO: all required
 export const DEFAULT_TEXT_LAYER_OPTIONS: TextLayerOptions = {
     xAlign: 'center',

package/src/lib/utils/buildFontString.ts

@@ -1,4 +1,4 @@
-import { TextLayerOptions } from "../types/text";
+import { TextLayerOptions } from "../types";
 
 export const buildFontString = (
     font: TextLayerOptions['font'],

package/src/lib/utils/container.ts

@@ -1,52 +1,48 @@
-import { BoundingBox, Point } from '../types/2d';
-import {
-    DEFAULT_CONTAINER_OPTIONS,
-    DEFAULT_DIRECTION_CONTAINER_OPTIONS,
-    DirectionContainerOptions,
-    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';
+
+import { h } from 'virtual-dom';
+import { DEFAULT_DIRECTION_CONTAINER_OPTIONS, DirectionContainerOptions, ImageType, PackingFn, BoundingBox, SCALE_MODE_TO_OBJECT_FIT, Size } from '../types';
+import { boundingBoxToPx, toPx } from './toPx';
+import merge from 'lodash.merge';
+import { htmlToImage } from './htmlToImage';
 
 export const vboxPackingFn =
-    (position: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
+    (box: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
     (background: ImageType, images: Array<ImageType>) =>
         directionalPackingFn({
             isVertical: true,
-            background,
+            backgroundSize: background,
             images,
-            position,
+            box,
             options,
         });
 
 export const hboxPackingFn =
-    (position: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
+    (box: BoundingBox, options?: DirectionContainerOptions): PackingFn =>
     (background: ImageType, images: Array<ImageType>) =>
         directionalPackingFn({
             isVertical: false,
-            background,
+            backgroundSize: background,
             images,
-            position,
+            box,
             options,
         });
 
 const directionalPackingFn = async ({
     isVertical,
-    background,
+    backgroundSize: background,
     images,
-    position,
+    box,
     options,
 }: {
     isVertical: boolean;
-    background: ImageType;
+    backgroundSize: Size;
     images: Array<ImageType>;
-    position: BoundingBox;
+    box: BoundingBox;
     options?: DirectionContainerOptions;
 }): 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 +71,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,22 @@
-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();
+    // TODO: extract this in a dif function
+    const image = await nodeHtmlToImage({
+        html,
+        transparent: true,
+        type: 'png',
+        puppeteerArgs: {
+            defaultViewport: {
+                width: backgroundSize.width,
+                height: backgroundSize.height,
+            },
+        },
+    });
+    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,64 @@
-import { Jimp } from 'jimp';
-import path from 'path';
+import { h } from 'virtual-dom';
+import { boundingBoxToPx } from './toPx';
 import {
-    Alignment,
-    ImageType,
-    ImagePosition,
+    DEFAULT_IMAGE_LAYER_OPTIONS,
     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 merge from 'lodash.merge';
+import { htmlToImage } from './htmlToImage';
 
 type PlaceImageProps = {
-    background: ImageType;
     image: ImageType;
-    position: ImagePosition;
+    box: BoundingBox;
+    backgroundSize: { width: number; height: number };
+    options: ImageLayerOptions;
 };
 
-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;
+export async function placeImage({
+    image,
+    box,
+    backgroundSize,
+    options,
+}: PlaceImageProps): 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];
 
-    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);
-    }
+    const document = h(
+        'div',
+        {
+            style: {
+                display: 'flex',
+                position: 'absolute',
+                scale: 1,
 
-    if (scale === 'stretch') {
-        image.scaleToFit({ w: position.width, h: position.height });
-    }
+                justifyContent: mergedOptions.justifyContent,
+                alignItems: mergedOptions.alignItems,
 
-    const xOffset =
-        position.x +
-        computeOffsetFromAlignment(xAlignment, image.width, position.width);
-    const yOffset =
-        position.y +
-        computeOffsetFromAlignment(yAlignment, image.height, position.height);
+                ...boundingBoxToPx(box),
+            },
+        },
+        [
+            h(
+                'img',
+                {
+                    style: {
+                        objectFit,
+                        flex: '1 1 auto',
+                        minWidth: 0,
+                        minHeight: 0,
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                    },
+                    src: imageBase64,
+                },
+                [],
+            ),
+        ],
+    );
 
-    return background.composite(image, xOffset, yOffset);
+    return htmlToImage(document, backgroundSize);
 }

package/src/lib/utils/renderText.ts

@@ -1,19 +1,17 @@
-import { h, create as createElement, VNode } from 'virtual-dom';
+import { h, VNode } from 'virtual-dom';
 import {
     DEFAULT_TEXT_LAYER_OPTIONS,
     ImageType,
+    BoundingBox,
     Size,
     TextLayerOptions,
-    TextPosition,
-    toPx,
 } from '../types';
-import nodeHtmlToImage from 'node-html-to-image';
-import { Jimp } from 'jimp';
-
+import { boundingBoxToPx, toPx } from './toPx';
+import { htmlToImage } from './htmlToImage';
 
 export const renderText = async (
     text: string,
-    position: TextPosition,
+    box: BoundingBox,
     backgroundSize: Size,
     options?: TextLayerOptions,
 ): Promise<ImageType> => {
@@ -62,15 +60,12 @@ 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?.xAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.xAlign,
                 alignItems:
                     options?.yAlign ?? DEFAULT_TEXT_LAYER_OPTIONS.yAlign,
+
+                ...boundingBoxToPx(box),
             },
         },
         [
@@ -94,17 +89,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;

package/src/lib/types/omitArgument.ts

@@ -1,17 +0,0 @@
-export type OmitArgument<
-    T extends (...args: any[]) => any,
-    K extends number,
-> = T extends (...args: infer P) => infer R
-    ? (...args: TupleFilter<P, K>) => R
-    : never;
-
-// Helper type to remove an argument at index K
-type TupleFilter<
-    T extends any[],
-    K extends number,
-    I extends any[] = [],
-> = T extends [infer First, ...infer Rest]
-    ? I['length'] extends K
-        ? [...I, ...Rest] // Skip the K-th element
-        : TupleFilter<Rest, K, [...I, First]>
-    : I;

package/src/lib/utils/canvasToImage.ts

@@ -1,19 +0,0 @@
-import { Jimp } from 'jimp';
-import { ImageType } from '../types/image';
-import * as fabric from 'fabric/node';
-
-export const canvasToImage = async (canvas: fabric.Canvas): Promise<ImageType> => {
-    const dataUrl = canvas.toDataURL({
-        format: 'png',
-        quality: 1,
-        multiplier: 1,
-    });
-    const image = await Jimp.read(
-        Buffer.from(dataUrl.split(',')[1], 'base64'),
-    );
-    return Jimp.fromBitmap({
-        data: image.bitmap.data,
-        width: image.bitmap.width,
-        height: image.bitmap.height
-    });
-};