masontree v0.0.12

masontree

masontree is a library for creating complex masonry layouts for arbitrarily sized rectangles. Given an ordered list of rectangles, it will calculate a "best attempt" at the "optimal" and "visually pleasing" layout for those rectangles in a given constant-width and undefined-height container.

This calculation is done in basically O(n log n) time**. The algorithm employs various binary search trees in different ways to achieve this.

It provides a MasonTreeElement class that can be used to create a masonry layout for a container element, and a MasonTreeElementOptions class that can be used to configure the MasonTreeElement. For a lower-level calculation, the MasonTree class can be used directly.

Getting Started

npm install --save masontree

MasonTreeElementOptions

The MasonTreeElementOptions class is used to configure the MasonTreeElement.

It has the following properties:

• masonTreeOptions: A MasonTreeOptions instance, which is used to configure the underlying MasonTree instance.
• debounceTime: The amount of time to wait after the last change detected to the container size or its containing elements before recalculating the layout.
• translateMethod: The method to use to translate the rectangles. Can be either "transform" or "position". This will determine how the rectangles are moved around in the container.

MasonTreeElement

The MasonTreeElement class is used to create a masonry layout for a DOM element. It primarily handles updating the layout when the container size changes (or if the rectangles inside of the container change), and translating the rectangles to their new positions. This can be created with the following code:

import { MasonTreeElement, MasonTreeElementOptions } from 'masontree';

//TODO: Add example code here

//TODO: Add some more information here.

Examples

import { MasonTreeElement, MasonTreeElementOptions } from 'masontree';

const opts = new MasonTreeElementOptions({
    masonTreeOptions: {
      pullX: true,
      pullY: true,
      pullXValue: 0, // 0 means pull to the center of the available space along the x axis
      pullYValue: 0, 
      pullIterations: 8,
      stickyLeftWall: true,
      stickyRightWall: true,
      stickyTopWall: true,
      stickyBottomWall: true,
    },
    debounceTime: 50,
    translateMethod: "transform",
})
const masonTree = new MasonTreeElement(document.getElementById('my-masontree-container', opts);
...