# phosphor-boxengine

> A low-level box layout algorithm.

Latest version **1.0.1** (published 2015-11-06) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install phosphor-boxengine
pnpm add phosphor-boxengine
yarn add phosphor-boxengine
bun add phosphor-boxengine
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2015-11-06 |
| First published | 2015-08-31 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | S. Chris Colbert |
| Maintainers | sccolbert |
| Keywords | box, layout |

## Links

- npm: https://www.npmjs.com/package/phosphor-boxengine
- Repository: https://github.com/phosphorjs/phosphor-boxengine
- Issues: https://github.com/phosphorjs/phosphor-boxengine/issues
- npm.io page: https://npm.io/package/phosphor-boxengine

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2015-11-06
- 1.0.0 — 2015-11-06
- 0.9.4 — 2015-10-02
- 0.9.3 — 2015-09-13
- 0.9.2 — 2015-09-03
- 0.9.1 — 2015-09-03
- 0.9.0 — 2015-08-31

## README

phosphor-boxengine
==================

[![Build Status](https://travis-ci.org/phosphorjs/phosphor-boxengine.svg)](https://travis-ci.org/phosphorjs/phosphor-boxengine?branch=master)
[![Coverage Status](https://coveralls.io/repos/phosphorjs/phosphor-boxengine/badge.svg?branch=master&service=github)](https://coveralls.io/github/phosphorjs/phosphor-boxengine?branch=master)

A low-level box layout algorithm.

[API Docs](http://phosphorjs.github.io/phosphor-boxengine/api/)


Package Install
---------------

**Prerequisites**
- [node](http://nodejs.org/)

```bash
npm install --save phosphor-boxengine
```


Source Build
------------

**Prerequisites**
- [git](http://git-scm.com/)
- [node](http://nodejs.org/)

```bash
git clone https://github.com/phosphorjs/phosphor-boxengine.git
cd phosphor-boxengine
npm install
```

**Rebuild**
```bash
npm run clean
npm run build
```


Run Tests
---------

Follow the source build instructions first.

```bash
npm test
```


Build Docs
----------

Follow the source build instructions first.

```bash
npm run docs
```

Navigate to `docs/index.html`.


Supported Runtimes
------------------

The runtime versions which are currently *known to work* are listed below.
Earlier versions may also work, but come with no guarantees.

- Node 0.12.7+
- IE 11+
- Firefox 32+
- Chrome 38+


Bundle for the Browser
----------------------

Follow the package install instructions first.

```bash
npm install --save-dev browserify
browserify myapp.js -o mybundle.js
```


Usage Examples
--------------

**Note:** This module is fully compatible with Node/Babel/ES6/ES5. Simply
omit the type declarations when using a language other than TypeScript.

```typescript
import {
  BoxSizer, boxCalc
} from 'phosphor-boxengine';


// Setup a simple 3-column arrangement. Normally done via static HTML
// or some form of DOM generation library. Kept simple for this example.
let host = document.createElement('div');
let col1 = document.createElement('div');
let col2 = document.createElement('div');
let col3 = document.createElement('div');
let columns = [col1, col2, col3];

host.style.position = 'relative';
host.style.height = '500px';

col1.style.position = 'absolute';
col1.style.top = '0';
col1.style.bottom = '0';

col2.style.position = 'absolute';
col2.style.top = '0';
col2.style.bottom = '0';

col3.style.position = 'absolute';
col3.style.top = '0';
col3.style.bottom = '0';

host.appendChild(col1);
host.appendChild(col2);
host.appendChild(col3);
document.body.appendChild(host);


// Create the sizers for the columns.
let sizer1 = new BoxSizer();
let sizer2 = new BoxSizer();
let sizer3 = new BoxSizer();
let sizers = [sizer1, sizer2, sizer3];


// Setup the constraints on the column widths.
sizer1.minSize = 150;
sizer2.maxSize = 250;
sizer2.minSize = 100;
sizer3.minSize = 150;
sizer3.maxSize = 250;


// Setup the desired sizes for the columns.
sizer1.sizeHint = 300;
sizer2.sizeHint = 600;
sizer3.sizeHint = 200;


// The middle column expands twice as fast as the others.
sizer1.stretch = 1;
sizer2.stretch = 2;
sizer3.stretch = 1;


// Layout the columns on each resize event. Note that `boxCalc` only
// handles sizes in the direction of layout (`width` in this case).
// The application decides how to handle the orthogonal dimension.
window.onresize = () => {

  // Compute the new column sizes for the host width.
  boxCalc(sizers, host.offsetWidth);

  // Layout the columns using the computed sizes.
  let left = 0;
  for (let i = 0; i < sizers.length; ++i) {
    let col = columns[i];
    let sizer = sizers[i];
    col.style.left = left + 'px';
    col.style.width = sizer.size + 'px';
    left += sizer.size;
  }

};
```

---
_Source: https://npm.io/package/phosphor-boxengine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._