pixeli 0.1.6 → 0.1.8

package/README.md

@@ -11,9 +11,15 @@ The tool currently supports two main layout modes: ***Grid*** and ***Masonry***
 
 | Grid (1:1 images) | Contact Sheet Grid |
 |---|---|
-| <img src="samples/grid.png" width="400"> | <img src="samples/grid-with-captions.png" width="400"> |
+| <img src="samples/grid.jpg" width="400"> | <img src="samples/grid-with-captions.jpg" width="400"> |
 | **Masonry (Horizontal)** | **Masonry (Vertical)** |
-| <img src="samples/masonry-horizontal.png" width="400"> | <img src="samples/masonry-vertical.png" width="400"> |
+| <img src="samples/masonry-horizontal.jpg" width="400"> | <img src="samples/masonry-vertical.jpg" width="400"> |
+| **Collag (Instagram Grid)** | **Collage (Vertical Book Spread)** |
+| <img src="samples/instagram-grid.jpg" width="400"> | <img src="samples/vertical-book-spread.jpg" width="400"> |
+| **Collage (Horizontal Book Spread)** | **Collage (Dashboard Shot)** |
+| <img src="samples/horizontal-book-spread.jpg" width="400"> | <img src="samples/dashboard-shot.jpg" width="400"> |
+| **Collage (Art Gallery)** |
+| <img src="samples/art-gallery.jpg" width="400"> | 
 
 ## Installation
 Pixeli can be installed using npm. Simply run the following command to install it globally on your machine:
@@ -73,6 +79,19 @@ By default, the masonry merge command uses a horizontal flow, but a vertical one
 pixeli merge masonry -rd ./samples/images -f vertical --cvh 4000
 ```
 
+### Collage Layout
+Collage layouts require a JSON template, or an inline JSON string, which describe your specific layout. The `-t` flag is used to specify the path to a JSON template, whereas the `-m` flag is used to provide inline JSON:
+```bash
+pixeli merge collage -rd ./samples/images -t ./template.json
+```
+
+You could also use a preset, and also round all the image corners in your collage:
+```bash
+pixeli merge collage -rd ./samples/images -t ./template.json --cr 100
+```
+
+To learn about the JSON template, see [collage templates](#collage-templates).
+
 ## Full Documentation
 
 ### pixeli merge
@@ -125,6 +144,95 @@ The masonry mode preserves each image’s natural shape, creating an organic bri
 | `--ha`, `--h-align <left\|center\|right\|justified>` | `justified`             | Controls **horizontal alignment** of rows when in `horizontal` flow. `justified` overfills each row and crops the final image to fill up the canvas.   |
 | `--va`, `--v-align <top\|middle\|bottom\|justified>` | `justified`             | Controls **vertical alignment** of columns when in `vertical` flow. `justified` overfills each column and crops the final image to fill up the canvas. |
 
+### pixeli merge collage
+Usage: `pixeli merge collage [options] [files...]`
+
+The collage merge requires a specified JSON template file, or JSON string. Images will be placed as per the template. If a preset ID is provided, both `--template` and `--mapping` are ignored.
+
+| Option/Flag                                          | Default                 | Description                                                                                                                                                                                 |
+| ---------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-t`, `--template <path>`                            | `null`                  | Sets the **path to the JSON template file** which will be used to arrange the collage. Priority is given to this option if `--mapping` is not provided.                                     |
+| `-m`, `--mapping <string>`                           | `null`                  | Sets the **JSON string** which will be parsed to later arrange the collage. Priority is given to `--template` if both options are provided.                                                 |
+| `-p`, `--preset <preset-id>`                         | `null`                  | Use a **predefined collage preset** instead of providing your own. Available preset IDs: `instagram-grid`, `dashboardShot`, `horizontal-book-spread`, `vertical-book-spread`, `art-gallery` |
+
+### Collage Templates
+The following javascript object thoroughly describes the shape of the JSON objects which are expected to be received. Logical checks are performed on the values after the template is validated. This is to ensure the collage can be created, for example, without any overlaps or 0 pixel-wide images:
+```javascript
+{
+  type: 'object',
+  required: ['canvas', 'slots'],
+  properties: {
+    canvas: {
+      type: 'object',
+      required: ['width', 'height', 'columns', 'rows'],
+      properties: {
+        width: { type: 'number', minimum: 1, multipleOf: 1 },
+        height: { type: 'number', minimum: 1, multipleOf: 1 },
+        columns: { type: 'number', minimum: 1, multipleOf: 1 },
+        rows: { type: 'number', minimum: 1, multipleOf: 1 },
+        gap: { type: 'number', minimum: 0, multipleOf: 1 },
+        background: { type: 'string' },
+      },
+    },
+
+    slots: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['col', 'row', 'colSpan', 'rowSpan'],
+        properties: {
+          col: { type: 'number', minimum: 1, multipleOf: 1 },
+          row: { type: 'number', minimum: 1, multipleOf: 1 },
+          colSpan: { type: 'number', minimum: 1, multipleOf: 1 },
+          rowSpan: { type: 'number', minimum: 1, multipleOf: 1 },
+        },
+      },
+    },
+  },
+}
+```
+
+The `template.canvas` object defines key properties of the canvas, and the `template.slots` array lists all the slots in which images are to be placed.
+
+A slot object takes 4 properties: `col`, `row`, `colSpan`, and `rowSpan`. `col` and `row` specify which column and row to place the image in, while `colSpan` and `rowSpan` define how many units the image should take up horizontally and vertically.
+
+The width of a single unit is equal to canvas width divided by the number of columns, and the height of a single unit is equal to the canvas height divided by the number of rows.
+
+For example:
+```json
+{ 
+  "col": 1,
+  "row": 5,
+  "colSpan": 3,
+  "rowSpan": 2
+}
+```
+This slot will be placed at the 1st column from the left, at the 5th row from the top. It will span 3 columns, including the one it has been placed in, meaning it will take up column 1, 2, and 3. The same goes for the rows; the slot will take up row 5 and 6.
+
+This is an example of a full JSON template:
+```json
+{
+  "canvas": {
+    "width": 1200,
+    "height": 1600,
+    "columns": 3,
+    "rows": 6,
+    "gap": 12,
+    "background": "#000"
+  },
+  "slots": [
+    { "col": 1, "row": 1, "colSpan": 2, "rowSpan": 2 },
+    { "col": 3, "row": 1, "colSpan": 1, "rowSpan": 1 },
+    { "col": 3, "row": 2, "colSpan": 1, "rowSpan": 1 },
+    { "col": 1, "row": 3, "colSpan": 1, "rowSpan": 2 },
+    { "col": 2, "row": 3, "colSpan": 2, "rowSpan": 2 },
+    { "col": 1, "row": 5, "colSpan": 3, "rowSpan": 2 }
+  ]
+}
+```
+
+Note that the `canvas.background` and `canvas.gap` properties are optional. If they are not provided, the defaults from the CLI options will be used. If both the CLI and template options exists, the template options take priority.
+
 ## License
 This project is licensed under the [MIT License](./LICENSE).
 

package/commands/merge/collage.js

@@ -0,0 +1,83 @@
+import { Command } from 'commander';
+import chalk from 'chalk';
+import {
+  cliConfirm,
+  displayInfoMessage,
+  displaySuccessMessage,
+  displayWarningMessage,
+  handleError,
+  writeImage,
+} from '../../lib/helpers/utils.js';
+import { validateCollageOptions, validateSharedOptions } from './helpers/validations.js';
+import { loadImages } from '../../lib/helpers/loadImages.js';
+import { addSharedOptions } from './helpers/utils.js';
+import { validateTemplate } from '../../lib/helpers/templateValidator.js';
+import { collageMerge } from '../../lib/merges/collage-merge/index.js';
+
+const collageCommand = new Command('collage');
+
+collageCommand
+  .description('Use JSON layouts to build custom collages.')
+  .option('-t, --template <path>', 'The path to the JSON file describing the collage template', null)
+  .option('-m, --mapping <json>', 'Inline JSON template override straight from the command line', null)
+  .option('-p, --preset <preset-id>', 'Collage preset ID to use. Available collage IDs: ', null)
+  .action(async (files, opts) => {
+    await main(files, opts);
+  });
+
+const main = async (files, opts) => {
+  // Collect and validate parameters
+  try {
+    const params = { files, ...opts };
+    const sharedOptions = await validateSharedOptions(params);
+    const collageOptions = await validateCollageOptions(opts);
+    const validatedParams = { ...sharedOptions, ...collageOptions };
+
+    // Load images, create collage, and write on disk
+    await generateAndSaveCollage(validatedParams);
+
+    // Output success message
+  } catch (e) {
+    handleError(e);
+  }
+};
+
+const generateAndSaveCollage = async (validatedParams) => {
+  // Replace gap and background if not provided with command line values
+  if (validatedParams.template?.canvas?.gap === undefined) {
+    validatedParams.template.canvas.gap = validatedParams.gap;
+  }
+  if (validatedParams.template?.canvas?.background === undefined) {
+    validatedParams.template.canvas.background = validatedParams.canvasColor;
+  }
+
+  // Validate the template and update it
+  const validatedTemplate = validateTemplate(validatedParams.template);
+  validatedParams.template = validatedTemplate;
+
+  // Load images from file
+  const { images, ignoredFiles } = await loadImages({ ...validatedParams, count: validatedParams.template.slots.length });
+
+  // Display warnings if needed
+  if (ignoredFiles.length) {
+    displayWarningMessage('\nThese files will be ignored due to unsupported formats:');
+    for (const file of ignoredFiles) {
+      displayInfoMessage(file);
+    }
+
+    const confirmation = await cliConfirm('\nAre you sure you want to continue?');
+    if (!confirmation) return;
+  }
+
+  const collage = await collageMerge(images, validatedParams);
+
+  const success = await writeImage(collage, validatedParams.output);
+
+  // Display success message
+  if (success) {
+    displaySuccessMessage(`\nImage has been created successfully: ${chalk.bold(validatedParams.output)}\n`);
+  }
+};
+
+addSharedOptions(collageCommand);
+export default collageCommand;

package/commands/merge/grid.js

@@ -8,8 +8,8 @@ import {
   handleError,
   writeImage,
 } from '../../lib/helpers/utils.js';
-import { addSharedOptions, getValidatedParams } from './helpers/utils.js';
-import { validateGridOptions } from './helpers/validations.js';
+import { addSharedOptions } from './helpers/utils.js';
+import { validateGridOptions, validateSharedOptions } from './helpers/validations.js';
 import { loadImages } from '../../lib/helpers/loadImages.js';
 import { gridMerge } from '../../lib/merges/grid-merge/index.js';
 
@@ -30,7 +30,10 @@ gridCommand
 const main = async (files, opts) => {
   // Collect and validate parameters
   try {
-    const validatedParams = await getValidatedParams(files, opts, validateGridOptions);
+    const params = { files, ...opts };
+    const sharedOptions = await validateSharedOptions(params);
+    const gridOptions = validateGridOptions(sharedOptions, params);
+    const validatedParams = { ...sharedOptions, ...gridOptions };
 
     // Load images, create grid, and write grid on disk
     await generateAndSaveGrid(validatedParams);

package/commands/merge/helpers/utils.js

@@ -1,5 +1,3 @@
-import { validateSharedOptions } from './validations.js';
-
 export const addSharedOptions = (cmd) => {
   return cmd
     .argument('[files...]', 'Image filepaths to merge (use --dir for directories)')
@@ -11,10 +9,3 @@ export const addSharedOptions = (cmd) => {
     .option('--bg, --canvas-color <hex|transparent>', 'Background color for canvas', '#ffffff')
     .option('-o, --output <file>', 'Output file path', './pixeli.png');
 };
-
-export const getValidatedParams = async (files, opts, validationFunc) => {
-  const params = { files, ...opts };
-  const sharedOptions = await validateSharedOptions(params);
-  const commandOptions = validationFunc(sharedOptions, params);
-  return { ...sharedOptions, ...commandOptions };
-};

package/commands/merge/helpers/validations.js

@@ -8,6 +8,7 @@ import {
   parseAspectRatio,
   SUPPORTED_OUTPUT_FORMATS,
 } from '../../../lib/helpers/utils.js';
+import { isValidPreset, PRESETS } from '../../../lib/merges/collage-merge/presets.js';
 
 export const validateSharedOptions = async (sharedOptions) => {
   // Extract params
@@ -212,3 +213,57 @@ export const validateGridOptions = (sharedOptions, gridOptions) => {
 
   return formattedParams;
 };
+
+export const validateCollageOptions = async (collageOptions) => {
+  const { template, mapping, preset } = collageOptions;
+
+  // If a valid preset is given, use it
+  if (preset && isValidPreset(preset)) {
+    return { template: PRESETS[preset] };
+  }
+  // If preset is invalid, throw error
+  else if (preset && !isValidPreset(preset)) {
+    const validPresets = Object.keys(PRESETS).join(', ');
+    throw new Error(`"${preset}" is not a valid preset ID. Choose one of the following: \n${validPresets}`);
+  }
+
+  // Ensure only one of the two are given
+  if (!template && !mapping) {
+    throw new Error('Either --template, --mapping, or --preset need to be provided.');
+  } else if (template && mapping) {
+    throw new Error('Either use --template or --mapping, not both.');
+  }
+
+  // Ensure mapping is actually a json string
+  if (!template && mapping) {
+    try {
+      JSON.parse(mapping);
+    } catch {
+      throw new Error('--mapping should be a valid JSON string.');
+    }
+  }
+
+  // Ensure template is a valid dir path
+  if (template && !mapping) {
+    let stats;
+
+    try {
+      stats = await fs.stat(template);
+    } catch (e) {
+      throw new Error('Template path does not exist.');
+    }
+  }
+
+  // Parse and return respective JSON data
+  try {
+    if (template) {
+      const jsonStr = await fs.readFile(template, 'utf8');
+      return { template: JSON.parse(jsonStr) };
+    }
+
+    // mapping is already a JSON string
+    return { template: JSON.parse(mapping) };
+  } catch (err) {
+    throw new Error('Could not read or parse the provided template or mapping JSON.');
+  }
+};

package/commands/merge/index.js

@@ -1,10 +1,12 @@
 import { Command } from 'commander';
 import masonryCommand from './masonry.js';
 import gridCommand from './grid.js';
+import collageCommand from './collage.js';
 
 const mergeCommand = new Command('merge').description('Merge images into a grid layout.');
 
 mergeCommand.addCommand(masonryCommand);
 mergeCommand.addCommand(gridCommand);
+mergeCommand.addCommand(collageCommand);
 
 export default mergeCommand;

package/commands/merge/masonry.js

@@ -8,8 +8,8 @@ import {
   handleError,
   writeImage,
 } from '../../lib/helpers/utils.js';
-import { addSharedOptions, getValidatedParams } from './helpers/utils.js';
-import { validateMasonryOptions } from './helpers/validations.js';
+import { addSharedOptions } from './helpers/utils.js';
+import { validateMasonryOptions, validateSharedOptions } from './helpers/validations.js';
 import { loadImages } from '../../lib/helpers/loadImages.js';
 import { masonryMerge } from '../../lib/merges/masonry-merge/index.js';
 
@@ -31,7 +31,10 @@ masonryCommand
 const main = async (files, opts) => {
   try {
     // Collect and validate parameters
-    const validatedParams = await getValidatedParams(files, opts, validateMasonryOptions);
+    const params = { files, ...opts };
+    const sharedOptions = await validateSharedOptions(params);
+    const masonryOptions = validateMasonryOptions(sharedOptions, opts);
+    const validatedParams = { ...sharedOptions, ...masonryOptions };
 
     // Load images, create grid, and write grid on disk
     generateAndSaveGrid(validatedParams);

package/lib/helpers/loadImages.js

@@ -5,20 +5,25 @@ import { isSupportedInputImage, shuffleTogether } from './utils.js';
 
 const MAX_RECURSION_DEPTH = 10;
 
-export const loadImages = async ({ files, dir, recursive, shuffle }) => {
+export const loadImages = async ({ files, dir, recursive, shuffle, count }) => {
   let ignoredFiles = [];
   let filepaths = files;
   let images = [];
 
   if (files && files.length) {
     // Load directly from provided file list
-    images = await loadFromFiles(files);
+    images = await loadFromFiles(files, count);
   } else {
     // Get all files from directory
     const { skippedFiles, paths } = await getFilesFromDirectory(dir, recursive);
     filepaths = paths;
     ignoredFiles = skippedFiles;
-    images = await loadFromFiles(filepaths);
+    images = await loadFromFiles(filepaths, count);
+  }
+
+  // Ensure filepaths and images match
+  if (images.length !== filepaths.length) {
+    filepaths = filepaths.slice(0, images.length);
   }
 
   // Optional: shuffle filepaths and images together
@@ -29,10 +34,15 @@ export const loadImages = async ({ files, dir, recursive, shuffle }) => {
   return { images, files: filepaths, ignoredFiles };
 };
 
-const loadFromFiles = async (files) => {
+const loadFromFiles = async (files, count) => {
   const images = [];
+  const total = count || files.length;
+  for (let i = 0; i < total; i++) {
+    // End the loop if count is higher than number of available files
+    if (i >= files.length) break;
 
-  for (const filepath of files) {
+    // Load images
+    const filepath = files[i];
     let image;
 
     if (filepath.endsWith('.svg')) {

package/lib/helpers/templateValidator.js

@@ -0,0 +1,139 @@
+import Ajv from 'ajv';
+import { isValidHexadecimal } from './utils.js';
+
+// Define entire template schema
+const TEMPLATE_SCHEMA = {
+  type: 'object',
+  additionalProperties: false,
+  required: ['canvas', 'slots'],
+  properties: {
+    canvas: {
+      type: 'object',
+      additionalProperties: false,
+      required: ['width', 'height', 'columns', 'rows'],
+      properties: {
+        width: { type: 'number', minimum: 1, multipleOf: 1 },
+        height: { type: 'number', minimum: 1, multipleOf: 1 },
+        columns: { type: 'number', minimum: 1, multipleOf: 1 },
+        rows: { type: 'number', minimum: 1, multipleOf: 1 },
+        gap: { type: 'number', minimum: 0, multipleOf: 1 },
+        background: { type: 'string' },
+      },
+    },
+
+    slots: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['col', 'row', 'colSpan', 'rowSpan'],
+        properties: {
+          col: { type: 'number', minimum: 1, multipleOf: 1 },
+          row: { type: 'number', minimum: 1, multipleOf: 1 },
+          colSpan: { type: 'number', minimum: 1, multipleOf: 1 },
+          rowSpan: { type: 'number', minimum: 1, multipleOf: 1 },
+          borderRadius: { type: 'number', minimum: 0, multipleOf: 1 },
+        },
+      },
+    },
+  },
+};
+
+const ajv = new Ajv({ allErrors: true });
+
+const validate = ajv.compile(TEMPLATE_SCHEMA);
+
+export const validateTemplate = (json) => {
+  const valid = validate(json);
+
+  // Handle schema validation
+  if (!valid) {
+    const path = validate.errors[0].instancePath.slice(1).replaceAll('/', '.');
+    const message = validate.errors[0].message;
+    throw new Error(`${path} ${message}.`);
+  }
+
+  // Handle canvas background color
+  if (json.canvas.background !== 'transparent' && !isValidHexadecimal(json.canvas.background)) {
+    throw new Error(`Canvas color must be a valid hex value or "transparent".`);
+  }
+  json.canvas.background = json.canvas.background === 'transparent' ? { r: 0, g: 0, b: 0, alpha: 0 } : json.canvas.background;
+
+  // Ensure canvas is wide enough for at least a single 1px column
+  if (json.canvas.width <= json.canvas.gap * 2) {
+    throw new Error(`Canvas width must be greater than ${json.canvas.gap * 2}.`);
+  }
+
+  // Ensure canvas is long enough for at least a single 1px row
+  if (json.canvas.height <= json.canvas.gap * 2) {
+    throw new Error(`Canvas height must be greater than ${json.canvas.gap * 2}.`);
+  }
+
+  // Calculate column width and row height
+  const workableCanvasWidth = json.canvas.width - json.canvas.gap * (json.canvas.columns + 1);
+  const workableCanvasHeight = json.canvas.height - json.canvas.gap * (json.canvas.rows + 1);
+  const columnWidth = Math.floor(workableCanvasWidth / json.canvas.columns);
+  const rowHeight = Math.floor(workableCanvasHeight / json.canvas.rows);
+
+  // Ensure columns are thick enough
+  if (columnWidth <= 0) {
+    throw new Error(`Columns are too thin. Increase canvas width, reduce gap, or reduce number of columns.`);
+  }
+
+  // Ensure rows are thick enough
+  if (rowHeight <= 0) {
+    throw new Error(`Rows are too thin. Increase canvas height or reduce number of rows.`);
+  }
+
+  // For each slot...
+  for (let i = 0; i < json.slots.length; i++) {
+    const slot = json.slots[i];
+
+    // Ensure slot is placed inside given canvas columns
+    if (slot.col > json.canvas.columns) {
+      throw new Error(`json.slots[${i}].col must be between 1 and ${json.canvas.columns}.`);
+    }
+
+    // Ensure slot is placed inside given canvas rows
+    if (slot.row > json.canvas.rows) {
+      throw new Error(`json.slots[${i}].row must be between 1 and ${json.canvas.rows}.`);
+    }
+
+    // Ensure slot spans within given canvas columns
+    if (slot.col + slot.colSpan - 1 > json.canvas.columns) {
+      throw new Error(`json.slots[${i}] spans past the right edge of the grid (col + colSpan exceeds columns).`);
+    }
+
+    // Ensure slot spans within given canvas rows
+    if (slot.row + slot.rowSpan - 1 > json.canvas.rows) {
+      throw new Error(`json.slots[${i}] spans past the bottom edge of the grid (row + rowSpan exceeds rows).`);
+    }
+  }
+
+  // Ensure no slots overlap
+  validateSlotOverlaps(json.slots);
+
+  return json;
+};
+
+const validateSlotOverlaps = (slots) => {
+  for (let i = 0; i < slots.length; i++) {
+    const A = slots[i];
+
+    const A_right = A.col + A.colSpan - 1;
+    const A_bottom = A.row + A.rowSpan - 1;
+
+    for (let j = i + 1; j < slots.length; j++) {
+      const B = slots[j];
+
+      const B_right = B.col + B.colSpan - 1;
+      const B_bottom = B.row + B.rowSpan - 1;
+
+      const overlap = A.col <= B_right && A_right >= B.col && A.row <= B_bottom && A_bottom >= B.row;
+
+      if (overlap) {
+        throw new Error(`Slot ${i} overlaps with slot ${j}.`);
+      }
+    }
+  }
+};

package/lib/merges/collage-merge/index.js

@@ -0,0 +1,110 @@
+import sharp from 'sharp';
+import { progressBar, WRITING_TO_FILE_PERCENTAGE } from '../../helpers/progressBar.js';
+import { roundImages } from '../merge-utils.js';
+
+export const collageMerge = async (images, validatedParams) => {
+  const { template, cornerRadius } = validatedParams;
+
+  // Set up progress bar
+  const total = Math.min(images.length, template.slots.length) * 2;
+  const totalFileWrite = Math.ceil(total * WRITING_TO_FILE_PERCENTAGE);
+  progressBar.start(total + totalFileWrite, 0, {
+    stage: 'Calculating dimensions',
+  });
+
+  // Calculate each column's width and height
+  const workableCanvasWidth = template.canvas.width - template.canvas.gap * (template.canvas.columns + 1);
+  const workableCanvasHeight = template.canvas.height - template.canvas.gap * (template.canvas.rows + 1);
+  const columnWidth = workableCanvasWidth / template.canvas.columns;
+  const rowHeight = workableCanvasHeight / template.canvas.rows;
+
+  // Each block has its resized image with its respective slot coordinates
+  progressBar.update({ stage: 'Resizing images' });
+  const blocks = await getBlocks({
+    slots: template.slots,
+    images,
+    gap: template.canvas.gap,
+    columnWidth,
+    rowHeight,
+    cornerRadius,
+  });
+
+  // Lay blocks
+  progressBar.update({ stage: 'Merging images' });
+  const collage = layBlocks({
+    canvasOptions: template.canvas,
+    blocks,
+    columnWidth,
+    rowHeight,
+  });
+
+  return collage;
+};
+
+const getBlocks = async ({ slots, images, gap, columnWidth, rowHeight, cornerRadius }) => {
+  const blocks = [];
+
+  for (let i = 0; i < slots.length && i < images.length; i++) {
+    const slot = slots[i];
+    const image = images[i];
+    let imageBuffer;
+
+    // Calculate image width and height
+    const width = slot.colSpan * columnWidth + (slot.colSpan - 1) * gap;
+    const height = slot.rowSpan * rowHeight + (slot.rowSpan - 1) * gap;
+
+    // Resize image respectively
+    const resizedImage = image.resize({ width: Math.floor(width), height: Math.floor(height) });
+
+    // Round corners of images if needed
+    if (cornerRadius > 0) {
+      const roundingOptions = {
+        width: Math.floor(width),
+        height: Math.floor(height),
+        cornerRadius,
+      };
+
+      const roundedImage = (await roundImages([resizedImage], roundingOptions))[0];
+      imageBuffer = await roundedImage.toBuffer();
+    } else {
+      imageBuffer = await resizedImage.toBuffer();
+    }
+
+    blocks.push({ imageBuffer, col: slot.col, row: slot.row });
+    progressBar.increment();
+  }
+
+  return blocks;
+};
+
+const layBlocks = ({ canvasOptions, blocks, columnWidth, rowHeight }) => {
+  // Create canvas
+  const canvas = sharp({
+    limitInputPixels: false,
+    create: {
+      background: canvasOptions.background,
+      channels: 4,
+      width: canvasOptions.width,
+      height: canvasOptions.height,
+    },
+  });
+
+  const composites = [];
+
+  // Collect composites
+  for (const block of blocks) {
+    const x = (block.col - 1) * columnWidth + block.col * canvasOptions.gap;
+    const y = (block.row - 1) * rowHeight + block.row * canvasOptions.gap;
+
+    composites.push({
+      input: block.imageBuffer,
+      left: Math.floor(x),
+      top: Math.floor(y),
+    });
+
+    progressBar.increment();
+  }
+
+  canvas.composite(composites);
+  return canvas;
+};

package/lib/merges/collage-merge/presets/artGallery.js

@@ -0,0 +1,17 @@
+export default {
+  canvas: {
+    width: 2000,
+    height: 1500,
+    columns: 5,
+    rows: 5,
+    gap: 20,
+    background: '#000',
+  },
+  slots: [
+    { col: 1, row: 1, colSpan: 3, rowSpan: 3 },
+    { col: 4, row: 1, colSpan: 2, rowSpan: 2 },
+    { col: 4, row: 3, colSpan: 2, rowSpan: 1 },
+    { col: 1, row: 4, colSpan: 2, rowSpan: 2 },
+    { col: 3, row: 4, colSpan: 3, rowSpan: 2 },
+  ],
+};

package/lib/merges/collage-merge/presets/dashboardShot.js

@@ -0,0 +1,18 @@
+export default {
+  canvas: {
+    width: 1800,
+    height: 1200,
+    columns: 6,
+    rows: 4,
+    gap: 10,
+    background: '#000',
+  },
+  slots: [
+    { col: 1, row: 1, colSpan: 3, rowSpan: 2 },
+    { col: 4, row: 1, colSpan: 3, rowSpan: 1 },
+    { col: 4, row: 2, colSpan: 3, rowSpan: 1 },
+    { col: 1, row: 3, colSpan: 2, rowSpan: 2 },
+    { col: 3, row: 3, colSpan: 2, rowSpan: 2 },
+    { col: 5, row: 3, colSpan: 2, rowSpan: 2 },
+  ],
+};

package/lib/merges/collage-merge/presets/horizontalBookSpread.js

@@ -0,0 +1,15 @@
+export default {
+  canvas: {
+    width: 2400,
+    height: 1400,
+    columns: 8,
+    rows: 3,
+    gap: 16,
+    background: '#000',
+  },
+  slots: [
+    { col: 1, row: 1, colSpan: 3, rowSpan: 3 },
+    { col: 4, row: 1, colSpan: 5, rowSpan: 1 },
+    { col: 4, row: 2, colSpan: 5, rowSpan: 2 },
+  ],
+};

package/lib/merges/collage-merge/presets/instagramGrid.js

@@ -0,0 +1,18 @@
+export default {
+  canvas: {
+    width: 1200,
+    height: 1600,
+    columns: 3,
+    rows: 6,
+    gap: 12,
+    background: '#000',
+  },
+  slots: [
+    { col: 1, row: 1, colSpan: 2, rowSpan: 2 },
+    { col: 3, row: 1, colSpan: 1, rowSpan: 1 },
+    { col: 3, row: 2, colSpan: 1, rowSpan: 1 },
+    { col: 1, row: 3, colSpan: 1, rowSpan: 2 },
+    { col: 2, row: 3, colSpan: 2, rowSpan: 2 },
+    { col: 1, row: 5, colSpan: 3, rowSpan: 2 },
+  ],
+};

package/lib/merges/collage-merge/presets/verticalBookSpread.js

@@ -0,0 +1,15 @@
+export default {
+  canvas: {
+    width: 1400,
+    height: 2100,
+    columns: 2,
+    rows: 3,
+    gap: 20,
+    background: '#000',
+  },
+  slots: [
+    { col: 1, row: 1, colSpan: 2, rowSpan: 1 },
+    { col: 1, row: 2, colSpan: 1, rowSpan: 2 },
+    { col: 2, row: 2, colSpan: 1, rowSpan: 2 },
+  ],
+};

package/lib/merges/collage-merge/presets.js

@@ -0,0 +1,17 @@
+import instagramGrid from './presets/instagramGrid.js';
+import dashboardShot from './presets/dashboardShot.js';
+import horizontalBookSpread from './presets/horizontalBookSpread.js';
+import verticalBookSpread from './presets/verticalBookSpread.js';
+import artGallery from './presets/artGallery.js';
+
+export const PRESETS = {
+  'instagram-grid': instagramGrid,
+  'dashboard-shot': dashboardShot,
+  'horizontal-book-spread': horizontalBookSpread,
+  'vertical-book-spread': verticalBookSpread,
+  'art-gallery': artGallery,
+};
+
+export const isValidPreset = (presetId) => {
+  return presetId in PRESETS;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixeli",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A lightweight command-line tool for merging multiple images into customizable grid layouts.",
   "homepage": "https://github.com/pakdad-mousavi/pixeli#readme",
   "bugs": {
@@ -33,6 +33,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "ajv": "^8.17.1",
     "chalk": "^5.6.2",
     "cli-progress": "^3.12.0",
     "commander": "^14.0.2",