README

@auvious/layout / Exports

Auvious Layout

This library manages the layout of components in a container and animates their transition on insertion, removal and resize.

Build

1. npm install
2. npm run build

Demo

1. cd demo
2. npm install
3. npm run serve

Live Development

npm run watch in root and npm run serve in demo. Might need to remove .parcel-cache periodically to update dependency changes.

Installation

npm install @auvious/layout

Documentation

Some sample code on how to use everything this lib offers. You call the positioning methods tile, untile, float, unfloat, focus, unfocus, update as many times needed and at the end render to render.

import { Layout } from "@auvious/layout";

// some random component
const div = document.createElement("div");

// better to not flash to the user the component
div.style.opacity = 0;

// initialize the layout manager with margin 10px and dimension those of the room
const layout = new Layout({
  margin: 10,
  height: 720,
  width: 1280,
  focus: { maximize: true },
});

// resize and update stuff like margin
layout.update({ width: 600, left: 200 });

/**
 * FLOATING
 */

layout.float(div, {
  ratio: 16 / 9,
  height: 100,
  right: 10,
  focus: { maximize: false },
});

layout.unfloat();

/**
 * TILING
 */

layout.tile(div, 16 / 9);

// reduce div's ratio to half
layout.tile(div, 16 / 18);

// finally remove from layout
layout.untile(div);

/**
 * FOCUS
 */

layout.focus(div, 16 / 9);

layout.unfocus();

/**
 * RENDER
 */

// render with animation, false by default
await layout.render(true);

// and only then remove from dom
div.remove();