phosphor-boxengine

phosphor-boxengine

A low-level box layout algorithm.

API Docs

Package Install

Prerequisites

• node

npm install --save phosphor-boxengine

Source Build

Prerequisites

• git
• node

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

Rebuild

npm run clean
npm run build

Run Tests

Follow the source build instructions first.

npm test

Build Docs

Follow the source build instructions first.

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.

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.

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;
  }

};