@hellkite/pipkin 0.6.1 → 0.7.0

package/src/lib/utils/placeImage.ts

@@ -5,27 +5,23 @@ import {
     ImageType,
     BoundingBox,
     SCALE_MODE_TO_OBJECT_FIT,
+    HyperNode,
+    ImageLayerSpecificOptions,
 } 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(
+}: PlaceImageProps<EntryType>): Promise<HyperNode> => {
+    return h(
         'div',
         {
             style: {
@@ -39,24 +35,35 @@ export const placeImage = async <EntryType extends Record<string, string>>({
                 ...boundingBoxToPx(box),
             },
         },
-        [
-            h(
-                'img',
-                {
-                    style: {
-                        objectFit,
-                        flex: '1 1 auto',
-                        minWidth: 0,
-                        minHeight: 0,
-                        maxWidth: '100%',
-                        maxHeight: '100%',
-                    },
-                    src: imageBase64,
-                },
-                [],
-            ),
-        ],
+        [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 htmlToImage(document, backgroundSize);
-}
+    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

@@ -0,0 +1,110 @@
+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,
+    );
+};

package/src/lib/utils/buildFontString.ts

@@ -1,17 +0,0 @@
-import { FontOptions } from "../types";
-
-export const buildFontString = (
-    font: FontOptions,
-    defaultFontFamily?: string,
-): string => {
-    const fragments: string[] = [];
-    if (font?.bold) {
-        fragments.push('bold');
-    }
-    if (font?.italic) {
-        fragments.push('italic');
-    }
-    fragments.push(`${font?.size ?? 16}px`);
-    fragments.push(`"${font?.family ?? defaultFontFamily ?? 'Arial'}"`);
-    return fragments.join(' ');
-};

package/src/lib/utils/renderText.ts

@@ -1,105 +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,
-                    },
-                },
-                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);
-};