node_modules/potpack/README.md · rowtype-yoga/yoga-r3f

git.iko.soy/rowtype-yoga/yoga-r3f

52 lines 1.5 kB history raw

1# potpack

3A tiny JavaScript library for packing 2D rectangles into a near-square container,

4which is useful for generating CSS sprites and WebGL textures. Similar to [shelf-pack](https://github.com/mapbox/shelf-pack),

5but static (you can't add items once a layout is generated), and aims for maximal space utilization.

7A variation of algorithms used in

8[rectpack2D](https://github.com/TeamHypersomnia/rectpack2D) and

9[bin-pack](https://github.com/bryanburgers/bin-pack),

10which are in turn based on

11[this article by Blackpawn](http://blackpawn.com/texts/lightmaps/default.html).

13## [Demo](https://mapbox.github.io/potpack/)

15## Example usage

17```js

18import potpack from 'potpack';

20const boxes = [

21 {w: 300, h: 50},

22 {w: 100, h: 200},

23 ...

26const {w, h, fill} = potpack(boxes);

27// w and h are resulting container's width and height;

28// fill is the space utilization value (0 to 1), higher is better

30// potpack mutates the boxes array: it's sorted by height,

31// and box objects are augmented with x, y coordinates:

32boxes[0]; // {w: 300, h: 50, x: 100, y: 0}

33boxes[1]; // {w: 100, h: 200, x: 0, y: 0}

34```

36## Install

38Install with NPM (`npm install potpack`) or Yarn (`yarn add potpack`), then:

40```js

41// import as an ES module

42import potpack from 'potpack';

44// or require in Node / Browserify

45const potpack = require('potpack');

46```

48Or use a browser build directly:

50```html

51<script src="https://unpkg.com/potpack@1.0.1/index.js"></script>

52```