@hellkite/pipkin 0.5.0 → 0.5.1

package/build/src/test.js

@@ -10,90 +10,66 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jimp_1 = require("jimp");
-const bundler_1 = require("./lib/bundler");
-const replacement_1 = require("./lib/replacement");
-const template_1 = require("./lib/template");
+const lib_1 = require("./lib");
 (() => __awaiter(void 0, void 0, void 0, function* () {
     const fireball = (yield jimp_1.Jimp.read('assets/fireball.png'));
     const luigi = (yield jimp_1.Jimp.read('assets/luigi.png'));
-    const result = yield template_1.Template.new({
+    const result = yield lib_1.Template.new({
         defaultFontFamily: 'branela',
         defaultAssetsPath: 'assets',
     })
-        .text({
-        key: 'subtitle',
-        position: {
-            x: 25,
-            y: 25,
-            width: 700,
-            height: 100,
-        },
-        options: {
-            font: {
-                size: 48,
-                family: 'blackflag',
-            },
+        .text({ key: 'subtitle' }, {
+        left: 25,
+        top: 25,
+        width: 700,
+        height: 100,
+    }, {
+        font: {
+            size: 48,
+            family: 'blackflag',
         },
     })
         .font('assets/BlackFlag.ttf', 'blackflag')
-        .text({
-        key: 'subtitle',
-        position: {
-            x: 25,
-            y: 125,
-            width: 700,
-            height: 100,
-        },
-        options: {
-            font: {
-                size: 38,
-            },
-            color: 'purple',
+        .text({ key: 'subtitle' }, {
+        left: 25,
+        top: 125,
+        width: 700,
+        height: 100,
+    }, {
+        font: {
+            size: 38,
         },
+        color: 'purple',
     })
         .font('assets/branela.otf', 'branela')
-        .image({
-        key: 'title',
-        position: {
-            x: 25,
-            y: 225,
-            width: 700,
-            height: 700,
-            scale: 'stretch',
-        },
-        options: {
-            assetsPath: 'assets',
-            pathFn: (title) => `${title.toLowerCase()}.png`,
-        },
+        .image({ pathFn: entry => `${entry.title.toLowerCase()}.png` }, { left: 25, top: 225, width: 700, height: 700 }, {
+        scale: 'stretch',
+        assetsPath: 'assets',
     })
-        .text({
-        key: 'effect',
-        position: {
-            x: 75,
-            y: 900,
-            width: 600,
-            height: 150,
-        },
-        options: {
-            font: {
-                size: 32,
-            },
-            replacement: new replacement_1.Replacement()
-                .replace(['Fireball'], fireball)
-                .build(),
+        .text({ key: 'effect' }, {
+        left: 75,
+        top: 900,
+        width: 600,
+        height: 150,
+    }, {
+        font: {
+            size: 32,
         },
+        replacement: new lib_1.Replacement()
+            .replace(['Fireball'], fireball)
+            .build(),
     })
         .hbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
-        x: 25,
-        y: 25,
+        left: 25,
+        top: 25,
         width: 300,
         height: 300,
     }, {
         gap: 100,
     })
         .vbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
-        x: 25,
-        y: 325,
+        left: 25,
+        top: 325,
         width: 100,
         height: 600,
     }, {
@@ -101,20 +77,21 @@ const template_1 = require("./lib/template");
         gap: 50,
     })
         .vbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
-        x: 300,
-        y: 325,
+        left: 300,
+        top: 325,
         width: 100,
         height: 600,
     }, {
         scale: 'keep-ratio',
         gap: 50,
     })
+        .debug()
         .fromCsv('assets/data.csv', {
         duplication: {
             countField: 'copies',
         },
     });
-    yield Promise.all(bundler_1.Bundler.new()
+    yield Promise.all(lib_1.Bundler.new()
         .bundle(result)
         .map((r, index) => r.write(`assets/test-${index + 1}.png`)));
 }))();

package/build/src/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hellkite/pipkin",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "description": "Library for board game card generation",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",
@@ -16,11 +16,10 @@
     },
     "dependencies": {
         "canvas": "^3.1.0",
-        "fabric": "^6.6.1",
-        "html2canvas": "^1.4.1",
         "jimp": "^1.6.0",
         "lodash.camelcase": "^4.3.0",
         "lodash.concat": "^4.5.0",
+        "lodash.merge": "^4.6.2",
         "node-html-to-image": "^5.0.0",
         "papaparse": "^5.5.2",
         "ts-node": "^10.9.2",
@@ -29,6 +28,7 @@
     "devDependencies": {
         "@types/lodash.camelcase": "^4.3.9",
         "@types/lodash.concat": "^4.5.9",
+        "@types/lodash.merge": "^4.6.9",
         "@types/node": "^22.7.5",
         "@types/papaparse": "^5.3.15",
         "@types/virtual-dom": "^2.1.4",

package/src/lib/bundler.ts

@@ -1,6 +1,5 @@
 import { Jimp } from 'jimp';
-import { Size } from './types/2d';
-import { ImageType } from './types/image';
+import { Size, ImageType } from './types';
 
 type RequiredBundlerOptions = {
     size: Size;

package/src/lib/replacement.ts

@@ -1,5 +1,4 @@
-import { ImageType } from "./types/image";
-import { ReplacementMap } from "./types/replacement";
+import { ReplacementMap, ImageType } from "./types";
 
 /**
  * Represents a replacement map between sets of words and symbols

package/src/lib/template.ts

@@ -2,18 +2,11 @@ import * as fs from 'fs';
 import { parse as parseCsv } from 'papaparse';
 import { Jimp, rgbaToInt } from 'jimp';
 import camelCase from 'lodash.camelcase';
-import { placeImage } from './utils/placeImage';
-import { drawBoundingBox } from './utils/drawBoundingBox';
-import { ImageType, ImageLayerOptions, ImageLayerProps } from './types/image';
-import { TextLayerProps } from './types/text';
-import { RenderOptions } from './types/render';
 import concat from 'lodash.concat';
 import { registerFont } from 'canvas';
 import path from 'path';
-import { hboxPackingFn, vboxPackingFn } from './utils/container';
-import { DirectionContainerOptions, PackingFn } from './types/containers';
-import { BoundingBox } from './types/2d';
-import { renderText } from './utils';
+import { drawBoundingBox, hboxPackingFn, placeImage, renderText, vboxPackingFn } from './utils';
+import { DirectionContainerOptions, ImageLayerOptions, ImageRef, ImageType, PackingFn, BoundingBox, RenderOptions, Size, TextLayerOptions, TextRef } from './types';
 
 type RequiredTemplateOptions = {
     height: number;
@@ -35,8 +28,6 @@ const DEFAULT_TEMPLATE_OPTIONS: RequiredTemplateOptions = {
 };
 
 export type LayerFnContext = {
-    width: number;
-    height: number;
     debugMode: boolean;
 };
 
@@ -90,6 +81,13 @@ export class Template<EntryType extends Record<string, string>> {
         });
     }
 
+    private get backgroundSize(): Size {
+        return {
+            width: this.background.width,
+            height: this.background.height,
+        };
+    }
+
     layer(fn: LayerFn<EntryType>): this {
         this.layers.push(fn);
         return this;
@@ -113,74 +111,59 @@ export class Template<EntryType extends Record<string, string>> {
 
     hbox = (
         imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
-        position: BoundingBox,
+        box: BoundingBox,
         options?: DirectionContainerOptions,
-    ): this => this.container(imagesFn, hboxPackingFn(position, options));
+    ): this => this.container(imagesFn, hboxPackingFn(box, options));
 
     vbox = (
         imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
-        position: BoundingBox,
+        box: BoundingBox,
         options?: DirectionContainerOptions,
-    ): this => this.container(imagesFn, vboxPackingFn(position, options));
-
-    image = ({
-        key,
-        path,
-        position,
-        options,
-    }: ImageLayerProps<EntryType>): this =>
-        this.layer(async (entry, { debugMode, width, height }) => {
-            const imagePath =
-                path ??
-                (options?.pathFn ? options.pathFn(entry[key]) : entry[key]);
-            const image = await this.loadImage(imagePath, options);
+    ): this => this.container(imagesFn, vboxPackingFn(box, options));
 
+    image = (
+        ref: ImageRef<EntryType>,
+        box: BoundingBox,
+        options: ImageLayerOptions,
+    ): this =>
+        this.layer(async (entry, { debugMode }) => {
+            const image = await this.pathFromImageRef(entry, ref, options);
             const result = await placeImage({
-                background: this.shadowBackground(),
                 image,
-                position,
+                box,
+                backgroundSize: this.backgroundSize,
+                options,
             });
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(position, {
-                    width,
-                    height,
-                });
+                const debugImage = await drawBoundingBox(
+                    box,
+                    this.backgroundSize,
+                );
                 return debugImage.composite(result);
             }
 
             return result;
         });
-
-    loadImage = async (
-        imagePath: string,
-        options?: ImageLayerOptions,
-    ): Promise<ImageType> => {
-        const assetsPath = options?.assetsPath ?? this.defaultAssetsPath;
-        const imageCompletePath = assetsPath
-            ? path.join(assetsPath, imagePath)
-            : imagePath;
-        const image = (await Jimp.read(
-            imageCompletePath,
-        )) as unknown as ImageType;
+    loadImage = async (imagePath: string | Buffer): Promise<ImageType> => {
+        const image = (await Jimp.read(imagePath)) as unknown as ImageType;
         return image;
     };
 
-    text = ({ key, position, options }: TextLayerProps<EntryType>): this =>
-        this.layer(async (entry, { debugMode, width, height }) => {
-            const text = entry[key] as string;
+    text = (
+        ref: TextRef<EntryType>,
+        box: BoundingBox,
+        options?: TextLayerOptions,
+    ): this =>
+        this.layer(async (entry, { debugMode }) => {
+            const text = this.textFromImageRef(entry, ref);
             const fontFamily =
                 options?.font?.family ?? this.defaultFontFamily ?? 'Arial';
-            return renderText(
-                text,
-                position,
-                {
-                    width,
-                    height, 
-                },
-                { ...options, font: { ...options?.font, family: fontFamily } },
-            );
+            return renderText(text, box, this.backgroundSize, {
+                ...options,
+                font: { ...options?.font, family: fontFamily },
+            });
         });
 
     font(path: fs.PathLike, name: string): this {
@@ -200,8 +183,6 @@ export class Template<EntryType extends Record<string, string>> {
             this.layers.map(layerFn =>
                 layerFn(entry, {
                     debugMode: this.debugMode,
-                    width: this.background.width,
-                    height: this.background.height,
                 }),
             ),
         );
@@ -273,6 +254,49 @@ export class Template<EntryType extends Record<string, string>> {
             }
         });
     }
+
+    private pathFromImageRef = async (
+        entry: EntryType,
+        ref: ImageRef<EntryType>,
+        options: ImageLayerOptions,
+    ): Promise<ImageType> => {
+        const assetsPath = options?.assetsPath ?? this.defaultAssetsPath;
+        const pathSegments = [];
+        if (assetsPath) {
+            pathSegments.push(assetsPath);
+        }
+
+        if ('buffer' in ref) {
+            return this.loadImage(ref.buffer);
+        } else if ('path' in ref) {
+            return this.loadImage(path.join(...pathSegments, ref.path));
+        } else if ('absolutePath' in ref) {
+            return this.loadImage(ref.absolutePath);
+        } else if ('key' in ref) {
+            const fileName = entry[ref.key];
+            return this.loadImage(path.join(...pathSegments, fileName));
+        } else if ('pathFn' in ref) {
+            const fileName = ref.pathFn(entry);
+            return this.loadImage(path.join(...pathSegments, fileName));
+        } else {
+            throw new Error('Unknown ImageRef variant');
+        }
+    };
+
+    private textFromImageRef = (
+        entry: EntryType,
+        ref: TextRef<EntryType>,
+    ): string => {
+        if ('key' in ref) {
+            return entry[ref.key];
+        } else if ('text' in ref) {
+            return ref.text;
+        } else if ('textFn' in ref) {
+            return ref.textFn(entry);
+        } else {
+            throw new Error('Unknown TextRef variant');
+        }
+    };
 }
 
 // TODO: Ledger of actions applied to the image like a logging feed

package/src/lib/types/boundingBox.ts

@@ -0,0 +1,28 @@
+export type BoundingBox = (
+    | {
+          top: number;
+          height: number;
+      }
+    | {
+          bottom: number;
+          height: number;
+      }
+    | {
+          top: number;
+          bottom: number;
+      }
+) &
+    (
+        | {
+              left: number;
+              width: number;
+          }
+        | {
+              right: number;
+              width: number;
+          }
+        | {
+              left: number;
+              right: number;
+          }
+    );

package/src/lib/types/containers.ts

@@ -1,11 +1,6 @@
-import { Alignment, ImageType, ScaleMode } from './image';
-
-export const DEFAULT_CONTAINER_OPTIONS: Required<ContainerOptions> = {
-    gap: 0,
-    justifyContent: 'normal',
-    alignItems: 'center',
-    scale: 'none',
-};
+import { AlignItems, JustifyContent } from './css';
+import { ImageType } from './image';
+import { ScaleMode } from './scale';
 
 export type ContainerOptions = {
     /**
@@ -13,7 +8,7 @@ export type ContainerOptions = {
      * 
      * Defaults to `normal`
      */
-    justifyContent?: ContainerJustifyContent;
+    justifyContent?: JustifyContent;
 
     /**
      * This is treated as a minimum length of an unit of space
@@ -29,7 +24,7 @@ export type ContainerOptions = {
      *
      * Defaults to `center`
      */
-    alignItems?: Alignment;
+    alignItems?: AlignItems;
 
     /**
      * Defaults to `none`
@@ -37,28 +32,22 @@ export type ContainerOptions = {
     scale?: ScaleMode;
 };
 
+export const DEFAULT_CONTAINER_OPTIONS: Required<ContainerOptions> = {
+    gap: 0,
+    justifyContent: 'normal',
+    alignItems: 'center',
+    scale: 'none',
+};
+
 export type DirectionContainerOptions = ContainerOptions & {
     reversed?: boolean;
 };
 
-// TODO: all required
-export const DEFAULT_DIRECTION_CONTAINER_OPTIONS: DirectionContainerOptions = {
+export const DEFAULT_DIRECTION_CONTAINER_OPTIONS: Required<DirectionContainerOptions> = {
     ...DEFAULT_CONTAINER_OPTIONS,
     reversed: false,
 }
 
-/**
- * Same as CSS justify-content property
- */
-type ContainerJustifyContent =
-    | 'flex-start'
-    | 'flex-end'
-    | 'center'
-    | 'space-evenly'
-    | 'space-between'
-    | 'space-around'
-    | 'normal';
-
 export type GridContainerOptions = ContainerOptions & {
     rows?: number;
     cols?: number;

package/src/lib/types/css.ts

@@ -1 +1,32 @@
-export const toPx = (value: number): string => `${value}px`;
+import { ScaleMode } from './scale';
+
+export type JustifyContent =
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-evenly'
+    | 'space-between'
+    | 'space-around'
+    | 'normal';
+
+export type AlignItems =
+    | 'normal'
+    | 'stretch'
+    | 'center'
+    | 'start'
+    | 'end'
+    | 'flex-start'
+    | 'flex-end'
+    | 'self-start'
+    | 'self-end'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center';
+
+export const SCALE_MODE_TO_OBJECT_FIT: Record<ScaleMode, string> = {
+    'keep-ratio': 'contain',
+    stretch: 'fill',
+    none: 'none',
+};

package/src/lib/types/image.ts

@@ -1,66 +1,49 @@
 import { JimpInstance } from 'jimp';
-import { BoundingBox, Point, Size } from './2d';
+import { ScaleMode } from './scale';
+import { AlignItems, JustifyContent } from './css';
 
 export type ImageType = JimpInstance;
 
-export type ImageLayerProps<EntryType> = (
-    | {
-          key: keyof EntryType;
-          path?: undefined;
-      }
-    | {
-          key?: undefined;
-          path: string;
-      }
-) & {
-    position: ImagePosition;
-    options?: ImageLayerOptions;
-};
+export type ImageRef<EntryType> =
+    | { 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;
-    pathFn?: (path: string) => string;
-    // TODO:
-    // processorFn?: (entry: EntryType, image: ImageType) => Promise<ImageType>;
-};
 
-export type ImagePosition = ImageAlignmentProps & ScaleProps & BoundingBox;
-
-export type ImageAlignmentProps = {
     /**
-     * Overridden by xAlignment and/or yAlignment if provided.
      * default `center`
      */
-    alignment?: Alignment;
+    justifyContent?: JustifyContent;
     /**
      * default `center`
      */
-    xAlignment?: Alignment;
+    alignItems?: AlignItems;
+
     /**
-     * default `center`
+     * Defaults to `none`
      */
-    yAlignment?: Alignment;
+    scale?: ScaleMode;
+
+    // TODO:
+    // processorFn?: (entry: EntryType, image: ImageType) => Promise<ImageType>;
+};
+
+export const DEFAULT_IMAGE_LAYER_OPTIONS: Required<
+    Omit<ImageLayerOptions, 'assetsPath'>
+> &
+    Pick<ImageLayerOptions, 'assetsPath'> = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    scale: 'none',
 };
 
 export type Alignment = 'start' | 'center' | 'end';
 
 export const DEFAULT_IMAGE_ALIGNMENT: Alignment = 'center';
-
-/**
- * Behavior of the content around a space
- * that is bigger or smaller than necessary
- * -> `none`: no scaling
- * -> `keep-ration`: scale while preserving aspect ration
- * -> `stretch`: scale without preserving aspect ration
- */
-// TODO: Could be extended with 'x-stretch' and 'y-stretch'
-export type ScaleMode = 'none' | 'keep-ratio' | 'stretch';
-
-export const DEFAULT_SCALE_MODE: ScaleMode = 'none';
-
-export type ScaleProps = {
-    /**
-     * Defaults to `none`
-     */
-    scale?: ScaleMode;
-};

package/src/lib/types/index.ts

@@ -1,9 +1,9 @@
-export * from './2d';
+export * from './size';
 export * from './containers';
 export * from './image';
-export * from './omitArgument';
 export * from './render';
 export * from './replacement';
 export * from './scale';
 export * from './text';
+export * from './boundingBox';
 export * from './css';

package/src/lib/types/scale.ts

@@ -0,0 +1,11 @@
+/**
+ * Behavior of the content around a space
+ * that is bigger or smaller than necessary
+ * -> `none`: no scaling
+ * -> `keep-ration`: scale while preserving aspect ration
+ * -> `stretch`: scale without preserving aspect ration
+ */
+// TODO: Could be extended with 'x-stretch' and 'y-stretch'
+export type ScaleMode = 'none' | 'keep-ratio' | 'stretch';
+
+export const DEFAULT_SCALE_MODE: ScaleMode = 'none';