2.0.0 • Published 1 year ago

potpack v2.0.0

Weekly downloads
386,572
License
ISC
Repository
github
Last release
1 year ago

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';
@simosol/mapbox-gl-js-offlinebst-map-gl@mapcreator/mapbox-gl@datav-gi/datav-gi-js@everything-registry/sub-chunk-2464@langge-data/mapbox-glkt-maplibre-glheroicons1map-core-funcmapsi-glmapbox-with-shapesmaplibre-gl-reduce-functionalitiesmaplibre-gl-tdtsdmapmagic-glmaplibre-glmaplibre-gl-ashmapbox-glmapbox-gl--custom-stretchmapbox-gl-ahtmapbox-gl-custom-layermapbox-gl-tdtsdmapbox-gl-testmapbox-gl-tultmapbox-gl-mbtilesmapbox-gl-encryptedmapbox-gl-htmapbox-gl-kyemapbox-gl-js-with-shapesmax-sym-three-nebulaf-mapbox-gl@xbcx/mapbox-glprotomapsprotomaps-leaflet@xll/mapbox-gl@xt-plugins/mapbox-gl@yongju/maplibre-gl@webdeb/mapbox-gl@tommy2gis/swsk-mapbox-gl@xrengine/editor@tssu/mapbox-glp-mapbox-glark-map@ark-org/mappetr-maplibre-gl@uncharted.software/graferpbf-basic-rendersdf-manager@goongmaps/goong-js@hansdo/maplibre-gl@etherealengine/editor@geomatico/mapbox-gl@globalfishingwatch/mapbox-gl@globalfishingwatch/maplibre-gl@emuanalytics/maplibre-gl@felix5/mapbox-webgl2@fwoosh/app@jingsam/mapbox-gl@inelo/maplibre-glvizzuality-mapbox-glvnmapvietmap-glvietmaps-glviiiivektrackasia-gl@kantas/vector-js@krisdages/mapbox-glx-mapbox-glxtal-glxyd-mapbox-gltoglibthree-nebulathree-stdlibthinknetmaps@luqh_mapbox/mapbox-gl@geops/maplibre-glcheaper-mapbox-gl-with-referrer-policy@dfw810/mapbox-gl@deltadevs/three-stdlibcomments-mapswsk-mapboxglstdlib-forkdingi-gldiscourse-i18ndiscourse-markdown-itdeprecation-silencerdmap-gl@cgcs2000/mapbox-gl@cczbby/mapbox-gl@cczbby/maplibre-glrif-mapbox-gl@datav-gi/datavgi-gl-jsanthonyhull-mapbox-gl@allmaps/layers@allmaps/render@autoxing/mapbox-gl@onthegomap/mapbox-gl@maps-gl/maps-gl@mapgis/mapbox-gl@polygonjs/polygonjs@ogix/mapbox-gl
2.0.0

1 year ago

1.0.2

2 years ago

1.0.1

6 years ago

1.0.0

6 years ago