Package Exports

phosphor-boxengine

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (phosphor-boxengine) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

};