Nostalgic Pickled Mango

    potpack
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    potpack

    A tiny JavaScript library for packing 2D rectangles into a near-square container, which is useful for generating CSS sprites and WebGL textures. Similar to shelf-pack, but static (you can't add items once a layout is generated), and aims for maximal space utilization.

    A variation of algorithms used in rectpack2D and bin-pack, which are in turn based on this article by Blackpawn.

    Demo

    Example usage

    import potpack from 'potpack';
    
    const boxes = [
        {w: 300, h: 50},
        {w: 100, h: 200},
        ...
    ];
    
    const {w, h, fill} = potpack(boxes);
    // w and h are resulting container's width and height;
    // fill is the space utilization value (0 to 1), higher is better
    
    // potpack mutates the boxes array: it's sorted by height,
    // and box objects are augmented with x, y coordinates:
    boxes[0]; // {w: 300, h: 50,  x: 100, y: 0}
    boxes[1]; // {w: 100, h: 200, x: 0,   y: 0}

    Install

    Install with NPM: npm install potpack.

    Potpack is provided as a ES module, so it's only supported on modern browsers, excluding IE:

    <script type="module">
    import potpack from 'https://cdn.skypack.dev/potpack';
    ...
    </script>

    In Node, you can't use require — only import in ESM-capable versions (v12.15+):

    import potpack from 'potpack';

    Install

    npm i potpack

    DownloadsWeekly Downloads

    878,030

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    7.11 kB

    Total Files

    5

    Last publish

    Collaborators

    • mourner