it's hip to be in a square
This is the utility we use to generate product image positions within layouts for our digital catalogues(incito), such as this one.
Basically you give packAnimal some box dimensions and a list of polygons, then it will give you back a list of transforms to apply to put the polygons neatly in the box.
These transforms are expressed in several ways on the output objects, so that you may choose whichever is appropriate for your use case. You can check that out here.
Installation
npm install pack-animal --save
Import
ESM supporting environment:
; // ES6
CommonJS environment:
var packAnimal = ; // ES5 with npm
Browser environment
<script src="https://unpkg.com/pack-animal"></script><script>const packAnimal = windowpackAnimal;</script>
Usage
Pass a pack size and a list of polygons to packAnimal
, the polygons argument must be an array of polygons each of which is an array of points represented each by a { x: number, y: number }
shape object.
const width = 600;const height = 400;const polygons = x: 0 y: 0 x: 500 y: 0 x: 500 y: 120 x: 0 y: 120 x: 0 y: 0 x: 400 y: 0 x: 500 y: 220 x: 0 y: 120 ;const polygonTransforms = ;
The polygonTransforms
returned by packAnimal are sets of instructions that you can use to "transform" the input polygons into their packed positions. You can check out the transform
properties here.
<img/>
in HTML
For the use case of positioning <img/>
s in HTML, this transform object includes a handy cssText
So you can do something like this with that object:
const boxToPack = document;polygonTransforms;boxToPackstylewidth = width;boxToPackstyleheight = height;boxToPackstyleposition = 'relative';
Contributing
Check out the internal API documentation
This project uses TypeScript for static typing and TSLint for linting. You can get both of these built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms.
Running the example(s):
npm installnpm run buildnpx serve
And navigate to the shown URL.
Running development mode:
npm installnpm run start
Running tests locally:
npm installnpm test