Package Exports

potpackweighted

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (potpackweighted) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

potpackweighted

A tiny JavaScript library for packing 2D rectangles into a near-square container with priority based on a weight provided, 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.

Example usage

import potpackweighted from 'potpackweighted';

const boxes = [
    {w: 300, h: 50, weight:9},
    {w: 100, h: 200, weight:0},
    ...
];

const {w, h, fill} = potpack(boxes);
// w and h are resulting container's width and height;
// weight increases how close to the top left the box will be placed 
// fill is the space utilization value (0 to 1), higher is better

// potpack mutates the boxes array: it's sorted by weight and then height,
// and box objects are augmented with x, y coordinates:
boxes[0]; // {w: 300, h: 50, weight:9, x: 100, y: 0}
boxes[1]; // {w: 100, h: 200, weight: 0, x: 0,   y: 0}

Install

Install with NPM (npm install potpackweighted) or Yarn (yarn add potpackweighted), then:

// import as an ES module
import potpackweighted from 'potpackweighted';

// or require in Node / Browserify
const potpackweighted = require('potpackweighted');

Or use a browser build directly:

<script src="https://unpkg.com/potpackweighted@1.0.2/index.js"></script>