panlr

A package to generate comic panels, dynamically and with ease. Visualized Example given a 3x3 grid

1. Empty Grid

   . . .
   . . .
   . . .

2. Generate the first panel:

   A A .
   . . .
   . . .

3. After this only X space is available to be filled because of comic ltr reading nature

   A A X
   . . .
   . . .

4. After placing the second panel:

A A B
X X X
X X X

5. After placing the third panel:

A A B
C C X
C C X

6. Final panel:

A A B
C C D
C C D

Installation

npm:

npm install panlr

or with yarn:

yarn add panlr

Usage

Generate one panel

import { usePanlr } from 'panlr';

const config = {
    cols: 5, // grid has 5 cols
    rows: 5, // grid has 5 rows
    maxPanelSize: {
        cols: 2, // generated panels max 2 cols width
        rows: 2, // generated panels max 2 rows height
    },
};
const panlr = usePanlr(config);
// generates a max 2x2 panel in the grid
// read from left to right and tries to
// position it in comic book reading order
panlr.generateNext();
console.log(panlr.toString());
/**
'┌───────────┐
 │ 1 1 . . . │
 │ 1 1 . . . │
 │ . . . . . │
 │ . . . . . │
 │ . . . . . │
 └───────────┘'
*/

Generate full

import { usePanlr } from 'panlr';

const config = {
    cols: 5, // grid has 5 cols
    rows: 5, // grid has 5 rows
    maxPanelSize: {
        cols: 2, // generated panels max 2 cols width
        rows: 2, // generated panels max 2 rows height
    },
};
const panlr = usePanlr(config);
let state = panlr.getCurrentState();
// isCompleted === true when
// the 5x5 is full with panels
while (!state.isComplete) {
    state = panlr.generateNext();
}
console.log(state.panels[0]);
/**
   @panel
   startRowIndex: number; // 0 to 4
   startColIndex: number; // 0 to 4
   cols: number; // number of cols the panel occupies
   rows: number; // number of rows the panel occupies
*/

Reference

usePanlr(config: TGridConfig): TGridGenerator

config: TGridConfig

@return TGridGenerator

@return TGridGeneratorState