@hellkite/pipkin 0.7.0 → 0.8.2

package/src/lib/types/pdf.ts

@@ -0,0 +1 @@
+export type PDFData = Uint8Array<ArrayBufferLike>;

package/src/lib/types/render.ts

@@ -1,8 +1,6 @@
-
-
 export type RenderOptions<EntryType extends Record<string, string>> = {
     duplication?: DuplicationOptions<EntryType>;
-}
+};
 
 export type DuplicationOptions<EntryType extends Record<string, string>> = {
     /**
@@ -20,4 +18,4 @@ export type DuplicationOptions<EntryType extends Record<string, string>> = {
      * default: 1
      */
     default?: number;
-}
+};

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,6 +1,6 @@
 import type { RequiredDeep } from 'type-fest';
-import { LayerOptions } from './layer';
-import { ReplacementMap } from './replacement';
+import { DEFAULT_LAYER_OPTIONS, LayerOptions } from './layer';
+import { Replacement } from '../template';
 
 /**
  * Static text -> `text`
@@ -42,8 +42,9 @@ 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> = {
@@ -59,12 +60,10 @@ export type TextLayerSpecificOptions<EntryType extends Record<string, string>> =
 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

@@ -4,7 +4,6 @@ import {
     DirectionContainerOptions,
     PackingFn,
     BoundingBox,
-    SCALE_MODE_TO_OBJECT_FIT,
     GridContainerOptions,
     DEFAULT_GRID_CONTAINER_OPTIONS,
     HyperNode,

package/src/lib/utils/htmlToImage.ts

@@ -16,7 +16,6 @@ export const htmlToImage = async (
             defaultViewport: {
                 width: backgroundSize.width,
                 height: backgroundSize.height,
-                deviceScaleFactor: 1,
             },
         },
     });

package/src/lib/utils/imagesToPdf.ts

@@ -0,0 +1,24 @@
+import { PDFDocument } from 'pdf-lib';
+import { ImageType, PDFData } from '../types';
+
+export const imagesToPdf = async (
+    images: Array<ImageType>,
+): Promise<PDFData> => {
+    const pdf = await PDFDocument.create();
+
+    for (const image of images) {
+        const imageBase64 = await image.getBase64('image/png');
+        const embeddedImage = await pdf.embedPng(imageBase64);
+        const { width, height } = embeddedImage.scale(1);
+        const page = pdf.addPage([width, height]);
+
+        page.drawImage(embeddedImage, {
+            x: 0,
+            y: 0,
+            width,
+            height,
+        });
+    }
+
+    return pdf.save();
+};

package/src/lib/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './container';
 export * from './placeBoundingBox';
-export * from './placeImage';
-export * from './placeText';
 export * from './htmlToImage';
 export * from './toPx';
+export * from './reduceBoundingBox';

package/src/lib/utils/placeBoundingBox.ts

@@ -1,19 +1,39 @@
 import { h } from 'virtual-dom';
 import { boundingBoxToPx } from './toPx';
 import { BoundingBox, HyperNode } from '../types';
+import { reduceBoundingBox } from './reduceBoundingBox';
 
-export const placeBoundingBox = async (box: BoundingBox): Promise<HyperNode> => {
-    return h(
-        'div',
-        {
-            style: {
-                position: 'absolute',
-                border: '2px solid red',
-                background: 'transparent',
-                boxSizing: 'border-box',
-                ...boundingBoxToPx(box),
+export const placeBoundingBox = async (
+    box: BoundingBox,
+): Promise<HyperNode> => {
+    const borderWidthPx = 2;
+    const reducedBoundingBox = reduceBoundingBox(box, borderWidthPx);
+    return h('div', {}, [
+        h(
+            'div',
+            {
+                style: {
+                    position: 'absolute',
+                    border: `${borderWidthPx}px solid red`,
+                    background: 'transparent',
+                    boxSizing: 'border-box',
+                    ...boundingBoxToPx(box),
+                },
             },
-        },
-        [],
-    );
+            [],
+        ),
+        h(
+            'div',
+            {
+                style: {
+                    position: 'absolute',
+                    border: `${borderWidthPx}px dashed blue`,
+                    background: 'transparent',
+                    boxSizing: 'border-box',
+                    ...boundingBoxToPx(reducedBoundingBox),
+                },
+            },
+            [],
+        ),
+    ]);
 };

package/src/lib/utils/reduceBoundingBox.ts

@@ -0,0 +1,21 @@
+import { BoundingBox } from '../types';
+
+type KeysOfUnion<T> = T extends unknown ? keyof T : never;
+
+export const reduceBoundingBox = (
+    boundingBox: BoundingBox,
+    reduceWithPx: number,
+): BoundingBox => {
+    return (Object.entries(boundingBox) as [KeysOfUnion<BoundingBox>, number][])
+        .map(([key, value]) => [
+            key,
+            value +
+                (key === 'width' || key === 'height'
+                    ? -reduceWithPx * 2
+                    : reduceWithPx),
+        ])
+        .reduce(
+            (box, [key, value]) => ({ ...box, [key]: value }),
+            {} as BoundingBox,
+        );
+};

package/src/lib/replacement.ts

@@ -1,21 +0,0 @@
-import { ReplacementMap, ImageType } from "./types";
-
-/**
- * Represents a replacement map between sets of words and symbols
- */
-export class Replacement {
-
-    private readonly replacementMap: ReplacementMap = {};
-
-    replace(words: Array<string>, symbol: ImageType): this {
-        words.forEach(word => {
-            this.replacementMap[word] = symbol.clone();
-        });
-        return this;
-    }
-
-    build(): ReplacementMap {
-        return this.replacementMap;
-    }
-}
-

package/src/lib/utils/placeImage.ts

@@ -1,69 +0,0 @@
-import { h } from 'virtual-dom';
-import { boundingBoxToPx } from './toPx';
-import {
-    ImageLayerOptions,
-    ImageType,
-    BoundingBox,
-    SCALE_MODE_TO_OBJECT_FIT,
-    HyperNode,
-    ImageLayerSpecificOptions,
-} from '../types';
-import { RequiredDeep } from 'type-fest';
-
-type PlaceImageProps<EntryType extends Record<string, string>> = {
-    image: ImageType;
-    box: BoundingBox;
-    options: RequiredDeep<ImageLayerOptions<EntryType>>;
-};
-
-export const placeImage = async <EntryType extends Record<string, string>>({
-    image,
-    box,
-    options,
-}: PlaceImageProps<EntryType>): Promise<HyperNode> => {
-    return h(
-        'div',
-        {
-            style: {
-                display: 'flex',
-                position: 'absolute',
-                scale: 1,
-
-                justifyContent: options.justifyContent,
-                alignItems: options.alignItems,
-
-                ...boundingBoxToPx(box),
-            },
-        },
-        [await prepareImage({ image, options })],
-    );
-};
-
-type PrepareImageProps<EntryType extends Record<string, string>> = {
-    image: ImageType;
-    options: RequiredDeep<ImageLayerSpecificOptions<EntryType>>;
-};
-
-export const prepareImage = async <EntryType extends Record<string, string>>({
-    image,
-    options,
-}: PrepareImageProps<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,
-        },
-        [],
-    );
-};

package/src/lib/utils/placeText.ts

@@ -1,110 +0,0 @@
-import { h } from 'virtual-dom';
-import {
-    BoundingBox,
-    TextLayerOptions,
-    HyperNode,
-    TextLayerSpecificOptions,
-} from '../types';
-import { boundingBoxToPx, toPx } from './toPx';
-import { RequiredDeep } from 'type-fest';
-
-type PlaceTextProps<EntryType extends Record<string, string>> = {
-    text: string;
-    box: BoundingBox;
-    options: RequiredDeep<TextLayerOptions<EntryType>>;
-};
-
-export const placeText = async <EntryType extends Record<string, string>>({
-    text,
-    box,
-    options,
-}: PlaceTextProps<EntryType>): Promise<HyperNode> => {
-    return h(
-        'div',
-        {
-            style: {
-                display: 'flex',
-                overflow: 'visible',
-                position: 'absolute',
-
-                justifyContent: options.justifyContent,
-                alignItems: options.alignItems,
-
-                ...boundingBoxToPx(box),
-            },
-        },
-        [
-            await prepareText({
-                text,
-                options,
-            }),
-        ],
-    );
-};
-
-type PrepareTextProps<EntryType extends Record<string, string>> = {
-    text: string;
-    options: RequiredDeep<TextLayerSpecificOptions<EntryType>>;
-};
-
-export const prepareText = async <EntryType extends Record<string, string>>({
-    text,
-    options,
-}: PrepareTextProps<EntryType>): Promise<HyperNode> => {
-    let textChildren: Array<string | HyperNode> = [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 | 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,
-    );
-};