Runtime and resizing

Most of the time there is nothing to call. Layouts follow their box, and the runtime notices changes on its own. The few functions it exports are for waiting, forcing an update, and old fixed-size layouts.

Sizing needs no code

Every ring, satellite and band is a fraction of its .bigbang, so when the box changes size everything inside changes with it. There is no breakpoint to write. Drag the corner of the dashed box:

The .bigbang is square and as wide as its parent, and a parent with a height keeps it from growing taller. Here the box is 280 × 200, so the universe is 200px across. Give the .bigbang a width, height or aspect-ratio of its own and the system follows that instead.

What the runtime watches

Orbit watches the page for added, removed and reordered elements, attribute and style changes, and containers that change size. It batches what it sees into the next animation frame. That is why a framework can re-render a layout, or you can change value on an <o-progress>, and the drawing follows with no extra call.

Waiting for the drawing

Orbit.ready() returns a promise that resolves when every pending layout is drawn. Pass an element, a document or a shadow root to wait only for that part. Use it in tests, or before you measure something.

Each <o-arc> and <o-progress> also fires an o-rendered event after it redraws. It bubbles and crosses shadow roots, so one listener on a container hears all of its arcs.

Updating by hand

Two kinds of change are invisible to the runtime: rules you edit through CSSOM, and CSS that depends on something outside the layout, like a class on <html> or a checkbox elsewhere on the page. After one of those, call Orbit.refresh() with the part that changed. Without an argument it refreshes the whole document.

sheet.cssRules[0].style.setProperty('--o-range', '180deg');
Orbit.refresh(panel);

For shadow DOM, include the stylesheet inside each shadow root. Arcs and progress register their shadow root on their own; for a shadow tree with only CSS elements, call Orbit.refresh(shadowRoot) once.

Fixed sizes and Orbit.resize()

When a system should keep a fixed size, give its .gravity-spot a length: --o-force: 300px. That system no longer follows its box. Orbit.resize() brings part of that back: it watches a container and scales the fixed-size systems inside it with its width, taking 500px as 1×.

const stopResizing = Orbit.resize('.wrapper');
// When the container goes away:
stopResizing();

It takes a selector or an element and returns a function that stops watching. Calling it again on the same container replaces the previous watcher. It leaves systems without a fixed reach alone, and if it finds none the console says [orbit] Orbit.resize() has nothing to do here.

Here the same layout has --o-force: 300px and Orbit.resize('.wrapper'). At 280px wide the reach is 168px (300 × 280 / 500). Drag the corner: only the width counts.

For new layouts, leave --o-force alone and size the .bigbang instead. Orbit.resize() is there mostly for layouts written for Orbit 1.x, where every system was 500px across. Coming from 1.x has the rest.